all themes banner
0.00 (0 votes)
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." 

tabs scrolling wordpress

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.

widgets in header

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.

tabs on mobile wordpress

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.

standard header image wordpress

See more theme details

Like it? Please share if you like the tutorial.

About the author

Izabela Kowalska
Izabela Kowalska is the manager, heart and brain of Joomla-Monster and PixelEmu brands. She’s IT Engineer passionate about Joomla, WordPress, sales and project management. For many years she successfully manages and develops new products and solutions for Joomla and WordPress.

Users' reviews

Total rating: (0 votes) Add review

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2015-2017 PixelEmu.com All rights reserved.