Create customizible, performance focused and keyboard Accessible Tabs section with GenerateBlocks.

by | Aug 27, 2022 | 0 comments

Create customizible, performance focused and keyboard Accessible Tabs section with GenerateBlocks.

by | Aug 27, 2022 | Free Wordpress Plugins | 0 comments



@GenerateBlocks @GeneratePress #generateblocks #generatepress #css #js #wordpress @WPCodeBox #wpcodebox

In this short video I show how to have a Tabs builder using only GenerateBlocks free plugin. Using the powerfull GenerateBlocks plugin enables us to have powerfull design controls over how out tabs looks.

To enable tabs feature, you have to include a JS snippet (linked bellow) and CSS (customizer custom CSS section or via a file).

Snippets will do the rest, add accessibility support using aria attributes, and control the visibility of tabbed content.

GET CODE (for generateblocks):

CODEPEN:

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>