By If you’re can’t find the right EverWeb widget out of the box, you have options available to you. EverWeb Garden is one of them and is a great third party widget provider who has just added two new widgets to their existing 70+ widget collection! IN this post, we’re going to look at two of EverWeb Garden’s latest widgets, The Tab Content and CSS Dropdown Menu widget.
The Tab Content Widget
This is a great widget for when you want tabbed content in your website. Using tabbed content is an effective way to present summary information, or when you want to present information in a way that does not overwhelm your visitor e.g. describing steps within a project, presenting a group of products or services under one banner, setting out a list of instructions and so on.
The Tab Content widget works on both fixed width and responsive pages and can also be used as a full width object. Once you have installed the widget, drag and drop it on to your page. Use the Widget Settings to add a heading and any explanatory text below the heading to guide the visitor to the purpose of the tabs that you have created.
The tabs themselves have options to set the color of the current tab text and non-selected tab text, background and hover colors. You can also set which tab you would like to be the default when the page loads. When adding content to each tab you can include an image which can be hyperlinked. The image can be scaled and aligned above, below, to the left or to the right of the image.
When adding content to each tab, you’ll notice that when you start on the second tab you don’t see its contents in the Editor Window. To ba able to view the second tab’s content, simply go down to the ‘Default Tab’ field and set it to ‘1’ instead of zero. For each new tab that you create, simply change the value of this field as appropriate to see the content you want to view. When publishing your site, remember to reset the Default Tab value to where you want it to default to, for example, a value of zero makes the default tab the left most tab.
To set the overall font for the widget, make sure the widget is selected, then use the Fonts button in the Toolbar to choose the font that you want. This will change the Title and Tab fields font and font sizes. For the other sections in the widget, use one of the Preferred Fonts from the dropdown menu in the Styled Text Editor, or use a predefined Paragraph Style. If necessary, you can create a Paragraph Style from the Format-> Default Styles… menu option.
In addition, you can set the maximum width of the widget to suit the width of your page, set the border radius size and also the margins used between the tab and the tab’s content.
The Tab Content is a great way to display content in a compact and easy to navigate manner.
The CSS Dropdown Menu Widget
The second new widget from EverWeb Garden is the CSS Dropdown Menu widget. The advantage of this widget is that it allows you to create an extra sub menu level for your navigation. Once you have drag and dropped the widget on to your page, you will notice that it is a full width object. You can adjust at what point the regular menu becomes a Hamburger menu style by adjusting the value of the Responsive Breakpoint field in the Mobile Settings section of the widget’s Widget Settings. As you would expect, you can also adjust the colors used in the navigation using the fields in the Colors section.
Setting up the menu and the different levels is a bit confusing at first but once you get the hang of it, it’s easy. The Widget Settings refers to menu levels as pages which seems a bit confusing. So the ‘Pages’ section refers to the top level menu, the ‘Sub Pages’ section refers to the first level dropdown menu, and the ‘Third Level Pages’ section refers to the second level of dropdown menu.
Start with the Pages section by using the Add button to add in the top level navigation menu items that you want to include. Once you have finished the top level, click on the navigation menu item in the Pages list that you want to add sub menus to. Next, go to the Sub Pages section and click on the ‘Add page to the dropdown’ dropdown menu. Select the page that you want from the list. Once the page has been selected, click on the ‘Add’ button. You will now see the page you have selected added to the Sub Page list for the menu item highlighted in the Pages section. You can change the label used for the navigation menu item just by double clicking on the name of the menu item in the Sub Pages list then entering in your own label.
Repeat the same process for the Third Level Page as you did for the Sub Page. Additional options available include setting the Padding of the menu items i.e. the horizontal and vertical distance between menu items, the minimum item width and the maximum item with of submenus. In addition, the widget also allows you to link to external pages as well as the internal pages of your site.
More About EverWeb Garden
The two widgets we have reviewed are part of EverWeb Garden’s Basic widget set, so are available to anyone with a current Standard, Premium, or Agency plan.
If you have a question about these widgets, about EverWeb Garden or about anything EverWeb, please let us know in the Comments Section below!
Loading ...
Comments