Vertical menu created with tabs idea in a creative WordPress theme.
Today I will show you how to manage vertically aligned tabs on the front page of the creative WordPress theme called "Magnetic". It's not a menu, taking into account technical solutions, but tabs with different content displayed with widgets which look like a vertical menu.
Take a look at the front page of this fantastic creative WordPress theme. We've got five tabs here, starting from the first tab item we see sliders, work portfolio, services, a company team and contact form. You may quickly add any content here with widgets. Each tab displays a widget that is assigned to the layout position called "header."
How to manage tabs at the WordPress backend?
OK, let's check how it looks at the WordPress backend. Login to the admin dashboard and go to Appearance -> Widgets. Here we've got all widgets positions that you may use with this responsive WordPress theme, but we have to look for "header." Let's open it.
And look, we've got five widgets assigned to "header" theme layout position. Each one refers to the each tab from the home page. Widgets titles are the same as on tabs at the front page. If you modify the title of any widget placed in the "header" area, you will see changes in front tabs.
The height of the tab menu area is handled by the height of the first tab - which actually means the content of the widget listed at "header" position. If you add more widgets or longer widgets titles then the site visitor may use top/bottom navigators that will appear on the right bottom corner of the site.
It's worth to mention that the tabs are presented as a clean and user-friendly navigation without the site reloading on mobiles for portrait view.
Like the appearance of the tabs on mobile? Try free PE Panels plugin.
How to manage a number of displayed tabs?
A number of displayed widgets is unlimited. If you remove one from the widgets area and refresh the site then the tab related to the deleted one disappears from the front page.
How to manage tabs items ordering?
Ordering refers to the widgets order located at "header" position. If you add any other widget then its position in tabs will reflect the position at the dashboard.
Can I use one widget only at header position?
And the last interesting feature about tabs. If you want to get let's say, a standard, most common theme layout, I mean displaying the slider only at header position, it's enough to remove all widgets from the "header" position. We've got it done at the third demo example of Magnetic theme - the marketing company.
Learn other interesting info about Magnetic Wordpress theme.
Like it? Please share if you like the tutorial.