Quick Start Guides

  1. Home
  2. Support
  3. Quick Start Guides
  4. Customizing the Website Appearance Using the Theme Customizer

Customizing the Website Appearance Using the Theme Customizer

The page designer makes it simple and fun to design your website pages and include multiple elements to them, like sections, rows and modules. But there’s an extra major feature that will absolutely thrill you: the Theme Customizer.

This feature enables you to tweak your theme settings and personalize your theme’s colors, fonts, headers, favicon, footer, blog, and a lot more. It’s a WYSIWYG (“What You See Is What You Get”) editor, that lets you see your results on the same interface where you are making the changes and gives you full control over your theme design.

Access the Theme Designer

Go to your website admin menu and select Appearance-> Customize. You will get to a page with a left-side menu that includes a toolkit with the customizable elements, and on the right see the website just as your visitors see it. You can navigate between pages to preview them as you make your alterations.

Explore the Device Preview Buttons

On the bottom of the customizer pane, three device buttons show how your website looks in desktop, tablet or mobile configuration. By default, the customizer will display the page in desktop view, but you can switch between the modes.

Save Your Changes or Schedule Them for Later

When you are finished editing, don’t forget to click on the blue Publish button on top of the page. If you wish to save a draft or schedule your changes to be published in the future, press the gear icon and adjust the settings.

What You Can Customize

The Avoori customizer toolkit contains hundreds of settings and combination elements that can be tailored to fit your needs and design requirements.

General

Begin your customiztion journey here. You can configure your homepage settings, deciding if you want it to contain your latest posts or a static page. If you prefer, you may choose to display your posts on a separate page as well. Decide on the page structure, add website background image, page title, configure the scroll to top button, design the pagination, forms appearance, set a custom 404 page, add a custom site favicon and many more.

Menus

The menus tab lets you define the location of your menus, including the option to show or hide a menu from the mobile mode.

Widgets

Avoori gives you the option to use up to two sidebars, to the left or right of your blog posts. You can add, move up and down, and remove Widgets, which are the sections that compose them. To configure your Widgets you also have the option to go to the Appearances-> Widgets menu. There is also an option to add custom widget areas which you may use around your website.

Top Bar

The top bar allows you to place a top section above the header of your website. This section usually includes some contact information and unique call to action elements.

Typography

The typography section allows you to customize the appearance of the textual elements that appear in your website pages. All the customizable elements are editable with the provided settings, giving you full control over their appearance.

Header

The header section allows you to change the design of the header section to have it include or exclude elements, have a specific structure, look and function on mobile.

Blog

It’s possible to customize your blog layout and decide where the archive and entries will go. Have fun adding some social media sharing buttons to your blog, by simply dragging them to the page.

Sidebar

If you decided to include a sidebar on your website, you can control its appearance in this section.

Footer Widgets

Add widgets that will be displayed on your website footer, on all the pages its enabled on.

Footer Bottom

The footer bottom section usually includes your site signature and final points or remarks you would like to display to your website visitors. You may also include the privacy policy and terms of service links on the footer bottom by applying the shortcodes listed in the settings.

Custom CSS/JS

If you are craving a little bit of code, jump to the CSS/JS tab and add some there. It will override your current theme settings set in the theme customizer.

Summary

The customizer empowers you to perform an array of tasks within a simple interface to completely change the design of your website. It easily lets you transform your site’s identity and design by swapping the menus, colors, images, post options, and much more.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?