Ex2 Header Builder Element: the Toggle Button
The toggle button is a way of attractively displaying content (such as a menu, buttons, search bar, etc.) in the header of a website. It is specially designed for display on computer screens and works like the hamburger button on mobile display.
When a user clicks on the toggle button, it opens an off-canvas window on the screen containing all the content added to it. As it takes little space, it is a very effective way to display the content in the header of a site.
This element of the header manufacturer is a premium feature available since version 3.3 of Ex2-Theme Pro. Before this release, it was necessary to use a custom code to include a toggle button.
Now you can easily display off-canvas content and completely customize it with this new button.
As this is a premium feature, make sure you have the Ex2-Theme Pro theme updated and enabled on your Wordpress site. Then follow the steps below:
Step 1: Open the header builder and click where you want to add a toggle button. From the list of items, choose Toggle Button.
Step 2: Now you can choose which elements to include. They will be displayed in a window that will appear when users click the button.
The off-canvas section will be visible in the header builder as soon as you add the toggle button.
Click the off-canvas section and you will see a list of items.
Choose the desired items from this list. They will then be automatically added to the off-canvas section associated with the button. You can add a multitude of items like a menu, other buttons, HTML elements, widgets, search tools, social media links, etc.
To customize these items, simply click on them. All available customization options will then appear in the customizer.
To add a menu in the off-canvas section, use the Off-Canvas Menu item from the list. Note that the main menu and the secondary menu cannot be used, you need another menu.
By default, the off-canvas menu will display all pages of your site (like the default WordPress menu). You can also create another dedicated off-frame menu or assign this role to an existing menu.
First click on the Off-Canvas menu. Then, in the customizer, click Configure Menu from Here.
From the Off-Canvas drop-down menu, select the desired menu. You can also create a new menu and assign it to that role.
Step 3: Once you add all the desired content to the off-canvas section, you can customize the toggle button to suit your preferences.
To do this, click the button in the header builder. All customization options will then appear in the customizer.
In the General section, you can define:
Icons – Choose from three different design templates
Toggle Button Style – Choose from three available preset styles for the button
Menu Label – Add a label for the menu button if desired.
In the Design section, you can define the size, color and margin of the toggle button.
Step 4: You can customize the Off-canvas window and define its layout and colors. To do this, click on the gear icon in the Off-Canvas section. The available options will then appear in the customizer.
Under the General tab, you can define the position type and alignment. Under the Design tab, you can also define colors and spacing.
If you switch to tablet or mobile display in the customizer, you will also see an offline section. Note that the off-canvas section associated with the toggle button works separately on a computer, tablet or mobile device.
This allows you to design different toggle menus for different devices. The Off-Canvas display of the computer version will not be automatically inherited on the display for tablets or mobile devices (and vice versa).
When a user clicks on the toggle button, it opens an off-canvas window on the screen containing all the content added to it. As it takes little space, it is a very effective way to display the content in the header of a site.
This element of the header manufacturer is a premium feature available since version 3.3 of Ex2-Theme Pro. Before this release, it was necessary to use a custom code to include a toggle button.
Now you can easily display off-canvas content and completely customize it with this new button.
How to add a toggle button for computer display
As this is a premium feature, make sure you have the Ex2-Theme Pro theme updated and enabled on your Wordpress site. Then follow the steps below:
Step 1: Open the header builder and click where you want to add a toggle button. From the list of items, choose Toggle Button.
Step 2: Now you can choose which elements to include. They will be displayed in a window that will appear when users click the button.
The off-canvas section will be visible in the header builder as soon as you add the toggle button.
Click the off-canvas section and you will see a list of items.
Choose the desired items from this list. They will then be automatically added to the off-canvas section associated with the button. You can add a multitude of items like a menu, other buttons, HTML elements, widgets, search tools, social media links, etc.
To customize these items, simply click on them. All available customization options will then appear in the customizer.
Note:
To add a menu in the off-canvas section, use the Off-Canvas Menu item from the list. Note that the main menu and the secondary menu cannot be used, you need another menu.
By default, the off-canvas menu will display all pages of your site (like the default WordPress menu). You can also create another dedicated off-frame menu or assign this role to an existing menu.
If you don’t know how to create and assign an off-canvas menu, here are the steps
First click on the Off-Canvas menu. Then, in the customizer, click Configure Menu from Here.
From the Off-Canvas drop-down menu, select the desired menu. You can also create a new menu and assign it to that role.
Step 3: Once you add all the desired content to the off-canvas section, you can customize the toggle button to suit your preferences.
To do this, click the button in the header builder. All customization options will then appear in the customizer.
In the General section, you can define:
Icons – Choose from three different design templates
Toggle Button Style – Choose from three available preset styles for the button
Menu Label – Add a label for the menu button if desired.
In the Design section, you can define the size, color and margin of the toggle button.
Step 4: You can customize the Off-canvas window and define its layout and colors. To do this, click on the gear icon in the Off-Canvas section. The available options will then appear in the customizer.
Under the General tab, you can define the position type and alignment. Under the Design tab, you can also define colors and spacing.
Note:
If you switch to tablet or mobile display in the customizer, you will also see an offline section. Note that the off-canvas section associated with the toggle button works separately on a computer, tablet or mobile device.
This allows you to design different toggle menus for different devices. The Off-Canvas display of the computer version will not be automatically inherited on the display for tablets or mobile devices (and vice versa).
Updated on: 29/03/2023
Thank you!