Using the Customiser

Overview

You can use the Customiser to preview and quickly modify many of your website's core appearance settings, from your header & footer sections, as well as text colours and fonts. Generally the options you'll find in the customiser apply across your entire website, and not just a specific page.

It was designed with simplicity in mind and each section of customisation is broken up into categories inside the customiser, allowing you to quickly home in on the areas you want to tweak.

You can access the Customiser from any page on your website by clicking the "Customise" link in the admin bar, as well as from your admin menu by navigating to "Appearance > Customise".

Once inside the Customiser, the changes you apply can be seen with a live preview of your site giving you the freedom to play around with tweaking the styles and allowing you to get everything exactly as you envision before finally publishing the changes for your visitors to see.

At the bottom of the Customiser panel, there's also three toggle switches to let you see how your website looks across different devices - desktop, tablet, and smartphone. There's also a collapse toggle button which allows you to hide the Customiser panel to get a full-width preview of your website.

You can preview the changes made in the Customiser by selecting any of the options and making tweaks to the current settings. When you're done with an option, clicking on the left arrow near the top of the panel will bring you back to the main Customiser panel.

When you're done making changes using the Customiser, be sure to select "Save & Publish" if you wish to keep your new settings and apply them to your live website, or simply close the Customiser (with the "X" at the top of the panel) to discard all changes.

Sections

Presets

You can set a basic colour scheme for your website with one click. Selecting a preset configures many of the settings in the Customiser automatically to follow the preset colour scheme, but you can also customise any or all of them by selecting the other tabs and adding your own settings.

The preset options available are:

• Default - Full-width layout with all-white backgrounds, grey text, and a blue accent colour.
• Default Dark - Full-width layout in which header & footer areas are nearly black. Accent colour and content headings are lime green.
• Classic - The box applies to the entire page, from the top bar down to the footer. The nav bar and accent colour are a royal purple. Other areas of the page have a white background.
• Modern - The box applies to the entire page, from top bar down to the footer. There is a dark top bar and footer and grey header, nav bar, and footer widget area, plus a dark orange accent colour.
• Bold - A full-width layout with a triad of teal colours for top bar, header, nav bar, footer, and accent colour.
• Stripe - A full-width layout with a navy blue nav bar and footer, an off-white top bar and footer widget area, and blue accent colour.
• Deluxe - This preset has a combination of a boxed content area and nav bar with the rest of the header & footer components full width. There is a layered colour "sandwich", with a blue-grey top bar and footer, an off-black header & footer widget area, a dark grey nav area, and a blue grey accent colour.
• Premier - Has a combination of a full-width header & footer with a boxed content area. The top bar, footer widget area, and footer are black, with a dark grey header and page background. The nav bar and accent colour are green. The dark background around the content box disappears as the screen is sized smaller.
• Dusk - A boxed layout. The entire page except for the nav bar and the accent colour is shades of black and grey, including the page background outside the box.
• Midnight - A boxed layout. The entire page except for the accent colour is shades of black and grey, including the page background outside the box.

Note: Changing a preset can delete other Customiser settings you have made.

General

From here you can select layouts, background colours, link & accent colours, and set heading and body font styles.

Layout

• Width - Choose from a Full width layout, or a boxed layout.
• Content Width - Choose the maximum width of your content in pixels.
• Spacing (boxed layouts only) - The number of pixels of spacing on the top & bottom of the box layout.
• Drop Shadow Size (boxed layouts only) - The number of pixels used for a drop shadow along the box border.
• Drop Shadow Colour (boxed layouts only) - Choose a colour for the box border's drop shadow.
• Scroll To Top Button - Enable/Disable a fixed scroll to top button appearing in the bottom right corner of your website.

With a Full-width layout, the page content spans to the edge of the browser window. A Boxed layout will give your content a border separating it from the background.

Note: You will need to set rows to full-width in the Page Builder to take advantage of the full-width layout in the content area.

Important: The default maximum content width for content in the Page Builder is 1100 pixels. Setting the Content Width value higher can result in header and footer margin problems when resizing the browser window - make sure to test.

Tip: If you want row content to have the same width as your header and footer content width, go to the Page Builder's Global Settings and set the Max Width field in the Rows section to the same number of pixels.

Background

• Background Colour - Set the background colour. For boxed layouts this colour fills the browser window outside the box.
• Background Image - For boxed layouts you can select an image for your site's background. The image if set will override the background colour.

Accent Colour

• Colour
• Hover Colour

The accent colour is used to colour elements such as links and buttons. The hover colour sets the colour of linked text and buttons when the cursor hovers over it. By default, the accent and hover colours that appear in this section are set by the preset style, which is set under the Presets section. You can override the preset default colours by setting your own here. These custom defaults can then be overridden in individual rows, columns, and modules in the Page Builder.

Headings

• Colour
• Font Family
• Font Weight
• Font Format
• Heading (H1-H6 tags) font size
• Heading (H1-H6 tags) line height
• Heading (H1-H6 tags) letter spacing

This is where you can set custom font information and style in all the headings from <h1> to <h6>. The defaults come from your chosen preset, but you can set custom defaults here. These custom defaults can also be overridden in individual Heading modules in the Page Builder, and colour can be customised in rows, columns, and many modules.

Text

• Colour
• Font Family
• Font Weight
• Font Size
• Line Height

Here you can set custom font and other style defaults for non-heading text. Like headings, the initial default settings come from your selected preset, and again these settings can be overridden in individual rows, columns, and modules in the Page Builder.

Social Links

• Social Icons Colour
• Facebook
• Twitter
• Google
• LinkedIn
• Yelp
• Xing
• Pinterest
• Tumblr
• Vimeo
• YouTube
• Flickr
• Instagram
• Skype
• Dribbble
• 500px
• Blogger
• GitHub
• RSS
• Email

Configure which social icons appear by entering links to your pages on each social site you want to show. You can also set the icon colour as either monochrome or branded with the colours of each social site. Social icons set here can be displayed in the Top Bar, Header, or Footer areas of your website.

Header

The Customiser options support several different header styles with a variety of styling options.

The header area includes:

• And optional top bar.
• The main header area, which can contain your site name in plain text or a logo.
• A navigation menu, which in some header layouts is part of the main header area, or in others can be styled as a separate area.

The Header section includes the following sub-sections:

Top bar layout

You can optionally enable a top bar strip above your header with up to two columns of content. It's a great place for short promo messages or social icons.

If you select "Text" for either column, you can enter HTML in the content areas, such as links to email addresses, heading tags, or even a small image.

If you select "Social Icons", icons from the social links you entered under the General category will be used.

If you enable just one column, the content will appear centred in your top bar. If you enable two columns the left column will be left-justified, and the right column will be right-justified at larger screen sizes. As the screen is sized smaller, the two columns will become stacked and will appear centred.

The maximum width of the content is controlled by the Content Width setting under the "General > Layout" category.

Top bar style

You can set the following styles in the top bar:

• A background colour or image in the top bar, with all the usual settings for positioning and sizing the background image.
• Top bar text font colour, link colour, and hover colour.

Header layout

Header layout settings apply to both the main header and menu areas, not the top bar. We'll cover the options one by one.

Layout - There are several layout choices:

• None - The header and menu are not displayed. The top bar remains visible if enabled.
• Nav bottom - Menu items appear below the header. Both menu & header logo are left-aligned. With the Nav bottom layout, there is also a Content Layout setting. If enabled you can add text with a HTML text area, or social icons configurable from the "General > Social links" category.
• Nav right / Nav left - Menu items appear to the right or left of the header logo respectively. As the screen is sized smaller, menu items will appear centred below the header.
• Nav centred - Menu items appear below the header. Both the menu & header logo are centred.
• Nav centred + inline logo - Menu items straddle the logo. Selecting this adds another option for Inline logo position which decides where the logo should sit if there is an odd number of menu items.
• Nav vertical left / Nav vertical right - Header & menu items appear in a vertical bar along the left or right side of the page in the header background colour with a fixed layout (doesn't scroll with the page content). You can also customise settings for the width and padding of the bar. The header logo is sized according to the amount of space in the vertical bar. If the logo appears too small, decrease the Padding setting first, then try increasing the Vertical nav width setting.

On very small screens (typically mobile views), menu items are replaced by the word "MENU" or a hamburger icon, depending on which Nav Layout option you choose.

Padding - You can change the padding to vary the amount of vertical space in the header logo area.

Fixed header - A fixed header means that as the page is scrolled down past the header, the header logo area and menu stay displayed at the top of the screen, maintaining the background colour you set for the header. There are several options for fixed headers, and they vary a bit by the layout you choose:

• Disabled - Disables the fixed header, meaning the header is only displayed as the regular header when you are at the top of the page. With this setting, you have two additional options:
  • Hide header until scroll - The page loads with no header displayed, but displays after the visitor starts scrolling down the page.
  • Scroll distance - You can set the number of pixels of downward scrolling before the header is displayed.
• Fade-in - The menu items appear to the left or right of the header logo in a narrower bar with the heading background colour/image. The top bar disappears. For Nav bottom, Nav centred, Nav right, & Nav centered + inline logo layouts, the order is header logo to the left, menu items to the right. For the Nav left layout, the order is menu items to the left, header logo to the right. For the Nav bottom layout, if you added text or social icons to the header logo section in the "Content Layout" setting, they won't appear in the fixed header.
• Shrink - The header logo shrinks into a smaller vertical space, with the top bar displayed above it. For Nav bottom & Nav centred layouts, the logo vertically shrinks into a narrower area (left-aligned and centred respectively), with the top bar displayed above it and the menu left-aligned or centered below it. For the Nav centred + inline logo layout, the header logo stays inline with the menu items displayed to the left & right, but the header logo shrinks in size.
• Fixed - The header & top bar remain at the regular size and stay fixed at the top of the screen while the page is scrolled down.

The Fixed header will not show on smaller screens.

Header style

This category has a number of settings that relate to two aspects of the header logo area:

• Background - You can set a background colour or image, with associated style settings.
• Text Colour - You can set text colour, link colour, and hover colour. These colour settings apply to the two parts of the header logo area that contain text: The header logo if you choose text instead of an image; and the Content layout area in the Nav bottom layout. Note that the hover colour also styles the current page item in the menu.

Header logo

Choose Text & Tagline or Image as the logo type.

For image logos, you can add both a standard and high-DPI (retina) version of your logo. You can also upload a different logo for "Fade-in" header layouts. For example, you might want to upload a smaller or shorter version of your logo which will fit in the narrow upper band. After you've uploaded the logo, make sure you've selected the "Fade-in" type of fixed header under the "Header > Header layout" category of the Customiser.

For Text & Tagline logos, you can choose the text which is displayed as your logo, as well as optionally include a tagline. Removing the content in the Tagline field will mean a tagline is not displayed.

Nav layout

On the Nav layout section, you can control the following aspects of the nav menu in the header:

• Nav item spacing - Set the number of pixels between menu items.
• Nav search icon - Choose whether or not to display a search icon.
• Responsive nav toggle - Choose either a "MENU" label button or a hamburger icon to appear instead of the expanded menu at the responsive breakpoint.
• Responsive nav breakpoint - Choose the breakpoint at which to display the hamburger or "MENU" label. The choices are:
  • Always (displayed on every device size)
  • Medium & small devices only
  • Small devices only (default)

Nav style

The Nav style section has the following settings:

• Submenu indicator - You can enable a Font Awesome down arrow icon to main menu icons that have submenus.
• Font family / Font weight / Font format / Font size - You can set the font family, weight, format, and size specifically for the navigation menu.
• Nav background / Text Colour - When the header layout puts the menu below the header logo area (Nav centred or Nav Bottom layouts), you can select a background colour or image for the menu bar plus set the nav text colour.

Some Nav layouts like Nav right turn into a Nav centred layout as the screen is sized smaller, but in this case the nav bar cannot be styled in the Customiser for smaller devices, you can however write your own custom CSS using the Custom CSS app.

Content

The content area is everything between your site's header and the footer. Here are the options you can set:

Content background

Set a background colour or image for the content area. For full-width layouts, this colour or image will fill the entire area between the header and footer, from edge to edge of the browser window. For boxed layouts, the colour or image will fill the box between the header and footer.

Blog layout

If you have any blog posts, set layout options for the post and archive pages. There are two categories of settings:

• Sidebar - If and where it appears, size, which devices it appears on. Note that by default, the sidebar appears on Posts only, not Pages. You can enable the sidebar for individual pages using the "Templates" field when you edit the page. You can configure what appears in the sidebar either by going to your Admin Panel and navigating to "Appearance > Widgets", or selecting the main "Widgets" category section from the Customiser.
• Post meta - Show or hide Author, Date, or Comment count.

Archive layout

For Archive pages that display a list of your blog posts (such as when you set your home page to display your latest blog posts), you can set options for how the posts are displayed.

• Full post or a summary - If you have a lot of blog posts, or very long ones, it's helpful to display a summary with a "Read More" link that takes you to the full post. You can also change the "Read More" text to say something else.
• Positioning of the featured image - You can show or hide the featured image from each post and choose where to display it in relation to the text.

Post layout

Set options for individual blog posts (which appear in the Posts list in your Admin Dashboard). You can set the following options:

• Featured image - Show or hide the featured image for each post, and choose where to display it in relation to the post title & post content.
• Image size - You can control the size of the featured image based on the thumbnails which are generated when you upload images to the platform. Image sizes for Small, Medium, and Large can be set in your Admin Panel by navigating to "Settings > Website Settings > Media".
• Post categories - You can display or hide the categories to which the post belongs.
• Post tags - You can display or hide the tags to which the post belongs.
• Previous/next links to other posts - You can display or hide the navigation buttons to previous & next posts at the bottom of the post.
• Author box - You can enable an author box, which appears under single posts between the category & the previous/next post navigation. Information comes from the user's profile which can be set in the Admin Panel. Information used includes Display name publicly as, Biographical info, Profile picture (pulled from Gravatar, or whichever is set in the admin panel under "Settings > Website Settings > Discussion". If any of this information is missing from the user profile, the author box will still display, but without that object.

Shop layout

Set options for the product & shop pages. You can set the following options:

• Sidebar position - Hide the sidebar or place it on the left or right of the page.
• Number of columns - Configure the number of categories/products to display per row, from 1 to 6. The default is 4 columns.
• Product gallery - By default support is enabled for galleries.
• "Add to Cart" button - You can show or hide the "Add to Cart" button from appearing on product category/archive pages.
• Shop Styling - You can enable or disable the custom shop styling and revert to standard shop styling.

Lightbox

If you enable the Lightbox, images you insert into a page will automatically come with a link that, when clicked, will open the image in a Lightbox. This is recommended so that your visitors have the opportunity to view a larger version of your images.

Note: The Blog layout, Archive layout, and Post layout settings apply to all posts, regardless of whether they're built using the Page builder.

Footer

There are 2 main areas to your footer - a widget footer and a main footer. The widget footer appears above the main footer and can contain up to 4 widget areas. The main footer consists of either one or two columns with several content options.

Footer widgets layout

You can set the footer widgets area to either appear on all pages, just the home page, or not at all. If you do enable the footer widgets area, you can choose which widgets to use in the Customiser under the "Widgets" panel, or from your Admin panel under the "Appearance > Widgets" menu.

Tip: If you want to enable or disable footer widgets on particular pages, instead of this footer widget you could create a new footer row in the Page Builder, containing either widgets or modules, and save it as a Global row. Then you can use it in the pages where you want the footer widgets to appear.

Footer widgets style

If you enable the footer widgets area using the above setting, you can change the style settings for it. The settings relate to two aspects of the footer widgets area:

• Background - You can set a background colour or image, with associated style settings.
• Text colour - You can set the text colour, link colour, and hover colour.

Footer layout

Here you can enable or disable the main footer with up to two columns. Either column can contain text, social icons, text and social icons, or a menu.

If you choose Menu, go to the "Menus > Menu Locations" panel in the Customiser and select which menu you want to use for the Footer Menu. If you don't set a menu for the Footer a "Choose menu" link will display instead.

If you choose Social icons, you can configure which icons to use under the "General > Social links" section of the Customiser.

Footer style

If you have enabled a main footer, you can change the style settings for it here. The settings relate to two aspects of the footer widgets area:

• Background - You can set a background colour or image, with associated style settings.
• Text colour - You can set text colour, link colour, and hover colour.

Footer parallax

You can enable a parallax effect in which the footer widgets and footer areas are revealed fixed to the bottom of the page as the end of the content scrolls up.

Widgets

You can set and configure your footer widgets here, if you enabled footer widgets under the "Footer > Footer widgets layout" panel of the Customiser. You can also configure footer widgets and sidebar widgets for blog layouts in your Admin panel under the "Appearance > Widgets" menu. If you don't see the Widgets tab in the Customiser panel, it may be because you haven't enabled footer widgets or sidebars yet.

Widgets add content and features to your widget areas/sidebars. They were originally designed to provide a simple and easy-to-use way of giving design and structure control to the user, but much of it's functionality has since been shadowed by the page builder's modules which can also include widgets.

Widgets can be added here in the Customiser to whichever widget areas are available, and they can be rearranged simply by drag-and-drop.

Code

Besides all the ways you can customise your website in the Customiser, you can also add additional code (HTML, Javascript, or CSS) into your website's markup. The most common use for these optional settings are to embed tracking codes from third party services on your website with the Header or Footer code areas.

Javascript code

Javascript entered in this area will be rendered within <script></script> tags right before the closing </head> tag on every page.

Header code

HTML, CSS, or Javascript entered in this area will be rendered directly after the opening <body> tag on every page.

Footer code

HTML, CSS, or Javascript entered in this area will be rendered directly before the closing </body> tag on every page.

Settings

Configure some general settings for your website without having to leave the Customiser. Most of the settings here can also be set from your admin panel under the "Settings > Website Settings" menu.

Site identity

Set your site title, tagline, and site icon. Site title and tagline are important because they are displayed in search results.

Note: Site title and Tagline can also be set in your Admin panel under the "Settings > Website Settings > General" menu.

The site icon is displayed on the browser tab and also as an app icon.

Static front page

Set whether to display your latest posts, or a static front page as your site's home page. In the majority of cases, a static front page would be used as your homepage which could then be customised using the Page builder.

Menus

To display a menu on your website, you first have to create a menu, choose what it will contain, and then you can associate it with one or more locations in your site layout. You can create up to three separate menus which can be used in your layout. Additional menus can be created for use in page builder modules or widget areas.

Note: You can also configure the menu and menu locations from your Admin panel under the "Appearance > Menus" menu.

To add and configure a menu:

1. Click "Add a menu", give the menu a name, and then click "Create menu".
2. Choose one or more locations where you want this menu to appear. For the menu to appear at any location, you also have to configure the location: Go to "Header > Top bar layout", or "Header > Nav layout", or "Footer > Footer layout" to configure these areas.
3. Select the "Menu options" checkbox if you want new pages to automatically be added to this menu. Leave it blank if you want to add menu items manually.
4. Click "Add items" and select the pages or other links that you want to appear in your menu. Once you click to add them, you can then reorder them as you like with drag-and-drop.

You can change the association of a menu with a location at "Menus > Menu locations".