Days
:
Hours
:
Minutes
:
Seconds

Spike - Sports WordPress Theme $69 $19

View Now
Skip to content Skip to sidebar Skip to footer

How to Customize Layouts

customize layouts

Layouts is a tool for creating and customizing headersfooters, and other parts of your website. It is based on the Visual Composer page builder. Availability of this feature depends on the ThemeREX Framework version used in the theme. Let’s see how we can customize layouts in order to create the desired website’s look. 

 Although it’s not the single usage of Layouts, you can think of them as Visual Composer for headers and footers

 Traditionally, Visual Composer has been enabling you to customize pages, however the header and footer sections remained untouched.

 Now you have a full freedom over your header and footer, and can even expand your website with additional elements.

 In this article, we’ll cover the details on how to customize Layouts.

How to See Which Layout Is Enabled Right Now

If you want to know which Layout you’re currently using, go to Appearance -> Customize, select Header (or Footer, depending on which one you want to explore) and view the Header style option.

header styles

This is the list of available Header Layouts (i.e. headers). If you want to select a different header, that’s where you need to do it.

 You can also set a specific Layout for a dedicated page. Go to Pages -> All Pages, select the page you want to customize, and in the Theme Options section at the bottom choose the necessary Header style or Footer style.

header style page settings

Note: For your home page, you can specify the necessary layout right in the Customizer in Homepage -> Header style.

Exploring Layouts

Layouts are not limited to headers and footers only and can be used to add different kinds of elements to your site.

 Where Are the Actual Layouts Located?

 In order to view the available Layouts, go to Layouts -> All Layouts.

 You can see that sometimes beside headers and footers, there are additional Layouts, such as Galleries, Actions, Events, etc. Each theme has a different collection of Layouts.

list of layouts

If you open any of them, you’ll see the familiar Visual Composer editor, which means you can customize them the same way you’ve been customizing your pages.

layouts structure

Going Beyond Headers & Footers: Layout Shortcodes

 In its essence, a Layout is a Visual Composer’s row.

 With that in mind, you can place them in any location on your page.

 In order to add a ready-made Layout as a Visual Composer row, you need to:

  • Add a new Visual Composer element, click on the ThemeREX tab, and select Layouts.

customize layouts
  • Choose your Layout from the dropdown list. 
layout list

This is the same list of Layouts you’ve seen in Layouts -> All Layouts in your admin dashboard.

Creating Your Own Layout

You can build Layouts using existing Visual Composer elements, however there are also custom elements for building layouts.

 In order to access them, click Layouts -> Add New, open the Backend editor and add a new Visual Composer element. In the ThemeREX tab, you’ll see the available Layout shortcodes.

layout shortcodes

They include LogoSearch formShopping cartMenu, etc., and would come in handy when building Layouts for headers and footers.

Useful Layout Settings

 There’s a number of things you can do to customize Layouts.

 For example, you can hide it on mobile phones or tablets, or choose to disable it on a front page.

 You can also make your header stick to the top, by fixing the element’s row.

 In order to change its settings:

  • Click on the row settings of a container element

edit row
  • Go to Custom Layouts and check the necessary boxes:
fix this row
  •  Layout Templates

If you need to create a new Layout, but don’t want to create it from scratch, you can use a library of Layout templates to get you started.

Creating Layouts from Templates

In order to create a new Layout from a template:

  • Click Layouts -> Add New

  • Choose Backend Editor
  • Click the Templates icon
templates icon (1)
  • Select a template from the list
templates list

Saving Current Layout as a Template

You can also save the current Layout and use it later as a template. In order to do this:

  • Click the Templates icon

 

templates icon
  • Enter the name of your template and click ‘Save template’
save layout as a template
  • Now you can find it in the templates list
new template

 

You may also check our video tutorial on how to customize layouts. 

For the Updates

Exploring ideas at the intersection of design, code, and technology. Subscribe to our newsletter and always be aware of all the latest updates.

Leave a comment