-
Posts
-
Hello there :-)
I’m building a custom page template for enfold, and I’m using the tab element of enfold.I’ve replicated the Tabs html output in my template, as follow:
<div class="tabcontainer top_tab avia-builder-el-0 el_before_av_one_full avia-builder-el-first "> <div class="tab_titles"> <div data-fake-id="#tab-id-1" class="tab active_tab tab_counter_0" itemprop="headline">No Icon Tab 1</div> <div data-fake-id="#tab-id-2" class="tab tab_counter_1" itemprop="headline">No Icon Tab 2</div> <div data-fake-id="#tab-id-3" class="tab tab_counter_2" itemprop="headline">No Icon Tab 3</div> </div> <section class="av_tab_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"> <div data-fake-id="#tab-id-1" class="tab active_tab fullsize-tab" itemprop="headline"> No Icon Tab 1 </div> <div id="tab-id-1-container" class="tab_content active_tab_content"> <div class="tab_inner_content invers-color" itemprop="text"> <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla <strong>consequat</strong> massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div> </div> </section> <section class="av_tab_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"> <div data-fake-id="#tab-id-2" class="tab fullsize-tab" itemprop="headline"> No Icon Tab 2 </div> <div id="tab-id-2-container" class="tab_content"> <div class="tab_inner_content invers-color" itemprop="text"> <p>Vestibulum ante ipsum <strong>primis</strong> in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis</p> <p>Alutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis <strong>condimentum</strong>, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p> </div> </div> </section> <section class="av_tab_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"> <div data-fake-id="#tab-id-3" class="tab fullsize-tab" itemprop="headline"> No Icon Tab 3 </div> <div id="tab-id-3-container" class="tab_content"> <div class="tab_inner_content invers-color" itemprop="text"> <p>Alutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis</p> </div> </div> </section> </div>Everything works just fine on the desktop version, but on smaller resolutions, when the tabs “switch” to accordion mode, they are always closed and there’s no way to open any of them…
Am I missing something? Should I include any specific JS or other code in the page?
thanksHi Josue, thank you for your answer :-)
You need to change your hosts file so it look like this:
81.201.5.181 langhe.net
you’ll find the page here: http://langhe.net/business/dei-bersaglieri/ – the tabs are located after the initial white-bg section.thanks :-)
bestHey!
Please give us an update when the site is live. We’ll check it then. Instead of adding the actual html tag. Copy the tab element shortcode then use the do_shortcode function to render it on a template. Refer to this link: http://codex.wordpress.org/Function_Reference/do_shortcode
Best regards,
IsmaelHello there,
we went online, and you can see some example of the pages here
http://langhe.net/business/hotel-ristorante-i-castelli/
http://langhe.net/business/cascina-gramolere/I’m using the shortcode now, but I’d really like to switch to the html structure because for example in one of the tab I’m printing the content of a wysiwyg custom field, and the shortcode does not fully respect the formatting given inside the wysiwyg editor.
So please let me know if I should be including any js to use the html structure :-)
best
Hi!
I’m sorry but why do you need to create a template? Note that you can save this kind of template using the advance layout builder. Create a starting template then look for the Template button. Click Save Entry as Template. You can then reuse it on different pages if that’s what you’re trying to do.
Regards,
IsmaelNo,
the page you see is printed out from different custom fields. It’s not built with the visual composerI can’t use the visual composer (and save a template with that) for 2 reason:
1 – if in the future I want to change the layout I will have to manually change all the 100+ entries.
2 – This content is user generated and I don’t want the users to fiddle around with the visual composer. It’s much easier for them to just fill in the custom fields.If you can tell me if there is some js I can include in the page to have the proper “switch to accordion” with the tabs built with the html structure instead of the shortcode, it woul be really great :-) (refer to the original post to see exactly what the problem is)
Thank you!
best :-)
Hi!
Please create a test page or template that is using the html structure of the tab instead of shortcode. We’ll check it. If possible, please post the whole template code on pastebin.com.
Best regards,
IsmaelHi Ismael thank you :-)
here’s the template made with the html structure of the tabs elementhttp://langhe.net/business/timeless-la-morra/
best!
thanks again
- The topic ‘Tab in custom page template: how to make them work on mobile?’ is closed to new replies.