Now, let’s learn how to use the widget on your site.
Insert the widget
To insert the widget on your page, type Static Grid Tab in the search field, then just drag-drop the widget in the text area.
Let’s create the Static Grid Tab Layout
After inserting the widget, you will see a default view of the Static Grid Tab in the Items section under the Content tab.
When you hover and click on the items, you can see a tab below with an image along with title and text, and a Read More option which is the info of the item.
Step 1 – Customize grid items
Notice that there are some items on the left in the Items section, and below them, there is a button to add more items.
Using the content tab, you can create the layout of the Static Grid Tab whatever you want.
First, go to the first Item. Just click on it. Here, you can change the image, then change the title, and text. At the bottom, you will get a link field.
Step 2 – Customize from the Additional Settings
Next, go to the Additional Settings section. Here, you can select the number of columns and set the type of Layout either Grid or Tab. We will prefer Grid here.
In the same section, you can select the number of Active Tab Index, then set the speed, enable or disable the Close Button, and Scroll To Tab switcher.
You can also change the view of the Grid Tab Type to either Image or Title. See the change after selecting the Tab Type to Title on the page.
Next, you can enable or disable the Content Reverse switcher which allows switching the image and text position. There are other options that you can manage.
Step 3 – Customize Read More button
Now, go to the Read More section. Here, you can change the Read More Text, set an icon, and Icon Position. You can also select the Icon Spacing using the scrollbar.
Customize the grid view with the Style tab
Now, we are going to customize the grid view with the Style tab.
Tab section customization
Go to Style> Tab
Here, you can change the Text Color, Background Color, and Typography of the tab grid. The changes are seen on the page.
Content section customization
Go to Style> Content
Now, go to the Content section. Here, you can change the Background Type and Background Color for the tab content. Also, you can add some Padding, and set the Space Between using the scrollbar.
Image section customization
Go to Style> Image
In this section, you can set a Border with Border Width, change Border Color, and set the Border Radius to 50 for the tab images. You can also add some Padding, customize the CSS Filters, and Box Shadow.
Title section customization
Go to Style> Title
After that, go to the Title section, you can change the Title Color, set a Margin, change the Typography and Text Shadow of the tabs.
Text section customization
Go to Style> Text
Here, you can change the color, set a Margin, and change the Typography of the tab description text.
Read More section customization
Go to Style> Read More
Here, you can change the text color, set a Background Type as well as set a border with Border Radius on the read more button/text. You can also give a Box Shadow, add some Padding, give a Margin, and change the Typography.
Close Button section customization
Go to Style> Close Button
Lastly, you can change the Background Color, set a Border Radius, and set a Box Shadow to the close button displayed at the top-right position on the tabs.
All done! You have successfully customized the Static Grid Tab widget on your website.
You can watch this quick video to learn more about the Static Grid Tab widget and visit the demo page for more examples.
This document is presented by BdThemes.