Tabbed Content
How difficult is to create tabbed content with iDeal theme? Believe it or not, it can’t be easier; all of H1 tags (titles) will automatically be converted to clickable tabs while the content after H1 title is considered as tab content. Have a look at the example below…
My first tab
Titles must be H2 or below with Tabber! This is H5…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor vehicula sem nec congue. Nulla sit amet orci sit amet urna pharetra mollis at facilisis risus. Curabitur tempus, risus eu volutpat molestie, mauris quam faucibus felis, porttitor pretium sapien tortor eget velit. Aliquam erat volutpat. Phasellus placerat porta tellus et pellentesque. Phasellus at fermentum nisl. Fusce volutpat leo et justo dapibus sed rutrum ante sagittis. Proin aliquet diam in tortor sodales aliquam. Nulla congue molestie lacus, a feugiat erat consectetur non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget turpis ac turpis porttitor faucibus. Nulla hendrerit sodales arcu non interdum.
Second tab
This is H4 title
Suspendisse ut mi vitae nunc tempor aliquet non sit amet lectus. Curabitur eget libero nisl. Nulla eget velit lectus, vel scelerisque tellus. Suspendisse molestie dictum lacus eu cursus. Maecenas condimentum cursus turpis eu molestie.
Integer auctor mattis dictum. Sed tincidunt posuere laoreet. Fusce vulputate lorem sit amet mauris viverra ut hendrerit dui vestibulum. Aliquam vel ipsum et nulla pretium elementum non sit amet nulla. Mauris eget risus at arcu vehicula aliquet. In non pharetra nunc. Sed quis sapien a velit porta pharetra consectetur sed nunc. Aliquam eget eros velit.
My buttonI would love to be bigger
Now third tab
Tables can also be displayed in Tabber
| Lorem Ipsum | Dolor sit Amet | Vitae Semper Arcu |
|---|---|---|
| Morbi volutpat accumsan nisl | quis sollicitudin est dictum ac | Fusce luctus |
| leo a pulvinar egestas | enim enim gravida diam | sit amet commodo dolor nulla sit amet diam |
| Vestibulum odio quam | Donec tempor magna | tincidunt vel quam |
| Leo a pulvinar egestas lorem | Enim enim gravida diam | Sit amet commodo dolor |
Fourth one
Insert images if you like, align to whichever side you like
Maybe a title…Pellentesque vehicula, metus ut mollis cursus, purus nibh sollicitudin sapien, et tincidunt magna ipsum nec dolor. In dui metus, mattis ut imperdiet et, auctor a mi. Fusce magna ipsum, commodo sed tincidunt a, semper non ante. Morbi feugiat pharetra nulla, vitae laoreet nulla vehicula quis. Nam sem mi, volutpat vel faucibus at, eleifend id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent elit purus, porttitor ut placerat vitae, lacinia mattis sem.
The last – fifth tab
This is subtitle H6
- Nam sem mi
- Volutpat vel faucibus at
- Maecenas imperdiet
- Eleifend id odio
Curabitur accumsan dolor eget lorem sollicitudin ac molestie diam aliquam. Donec egestas, augue sit amet vehicula pulvinar, neque ligula imperdiet dui, a euismod sem tellus eu felis. Nullam nec turpis mauris, et volutpat nunc. Maecenas imperdiet purus eget tortor semper hendrerit.
How to format text that will be converted to tabbed content?
As already mentioned, all of H1 tags are converted to clickable tabs. Text after each H1 (title) is considered as tab content. Have a look at this trivial example:
<h1>First tab</h1> My text with images, more shortcodes, etc. <h1>Second tab</h1> Some other chunk of text with table <h1>Third tab</h1> My third tab content So, how to actually turn that into tabbed content? Shortcode button is already present in WordPress WYSIWYG editor (tinyMCE), simply select entire chunk of text then hit shortcode button. Publish your page or post (or update) and that’s all. At the end, it’ll look like this in text editor:
<h1>First tab</h1> My text with images, more shortcodes, etc. <h1>Second tab</h1> Some other chunk of text with table <h1>Third tab</h1> My third tab content