Getting Started with the Customizer

Weaver Xtreme Version supports the WordPress Customizer support for all of its options. This  interface totally revolutionizes the way you work to create you own site. Weaver Xtreme is simply unique in the completeness of the options available, and how simple the Customizer makes finding and tweaking your options.

Most options are truly What You See is What You Get: change a color, border, font, or margin, and the change appears instantly on the preview window. You can literally see the changes in real time as you tweak the values. This is truly a magical experience. Other options work in refresh Customizer mode that requires the previewed page be refreshed – which usually takes just a second or two. Still amazing.

The previous Legacy option menus are still supported, but after using the Customizer interface, you probably won’t want to go back to the Legacy Setting interface. It can be useful if you have a slow computer or site host as the new Customizer does require fast computers and browsers for an optimal experience.

Weaver Xtreme Customizer Interface

The customizer (Appearance > Customize) offers the ability to do interactive editing of the theme settings. When making changes in most option setting, the preview window will show the changes in real time, which is a great help for tuning things like colors, padding, spacing etc. Some changes are more complex and may need a refresh of the preview window to show the changes.

The Xtreme Customizer offers two ways to reach any given set of options.

1- Main Customizer Panel

The left panel of the customizer holds the main navigation of the theme options.

It first shows WHAT things that can be changed (colors, spacing, style …). Once you select WHAT you want to change, it will show a list of WHERE you can make that change (wrapping areas, header, content…). As you select WHERE you want to make a change, you get to the actual options.

The left panel has two possible width so you can optimize options space vs preview space. You can increase / decrease the width of the left panel by using the small arrow button right of the Saved / Save & Publish button located at the top right of the navigation panel.
The left panel can also be collapsed entirely, to increase preview area, using the collapse button at the bottom left. You can bring it back by hitting that button a second time.

2- Quick Access Menu

Using the left panel to navigate the options can be tedious if you have to go back and forth a lot between settings. You have to scroll to the top of the option panel, then navigate back, then down …

To make it easier to quickly reach any option, there is a Quick Access Menu at the top left of the option panel (hamburger icon just right of the X that closes the customizer).

As you place your mouse over it, it shows you both the WHERE choices, and the WHAT choices. Unlike the default navigation panel, the quick access menu lets you choose if you want to start selecting WHERE to do the changes, or WHAT change you are after. Just move your cursor over your preferred choice, then down the list to make a selection.

If you select a WHAT item, it will open the list of WHERE options for it, if you select a WHERE item, it will open the list of WHAT options for it.

This lets you directly select any set of options without having to navigate in the left panel.

If you Collapse the left Panel, the Quick Access Menu will remain over the Preview Area, so you can still access any option while the left panel is collapsed. If it is in an inconvenient location, you can move it anywhere you like over the preview area by just dragging it with the mouse.

When you make a WHAT/WHERE selection, it will automatically reopen the Option Panel.

Customizer Option Organization

The Customizer option menus for Weaver Xtreme are organized somewhat differently than the Legacy Settings. Even though there are over 600 options available, the new Customizer organization of the options can make it seem like there are only about 20 different option sets available.

First Level Options: WHAT to Set – Option Categories

The first level of Weaver Xtreme Customizer menus is organized around different categories of options that reflect different collections of related options. For example, all the Color settings are found on a single, top-level option panel called “Colors”. The other top level option panels represent similar groups of options:

• Weaver Xtreme: Start Here – access to getting started help and other documentation.
• General Options & Admin – WordPress Site Identity and Static Front page options, and other theme admin options.
• Layout – Specify element layout – site width, header area, sidebars, etc.
• Typography – Set font family, font size, bold, italic, default base font information.
• Images – Set borders, placement, Featured Images, Header Images, Background Images.
• Visibility – Show or hide various elements – usually by device (phone, tablet, desktop)
• Colors – Specify all colors used on site – both text and background colors.
• Spacing, Widths, Alignment – Set margins, padding, spacing, heights, and widths.
• Style – Set borders, shadows, rounded corners, list bullet style, icons.
• Added Content – Define added content for extra HTML insertion areas.
• Custom CSS – Advanced users can specify custom CSS for the whole site or specific areas.
• Active Widget Areas – the WordPress Customizer nterface for currently active widget areas and widgets.
• Custom Menus Content – the standard WordPress interface for defining custom menus.

The basic logic behind this organization is that it is easy to remember the different kinds of things you want to customize, like color or spacing. The next level of menus specifies where you want to make those changes.

Second Level Options: WHERE to Set – Areas

Deciding what you want to customize is usually an obvious decision. Finding where to apply those settings take a bit more understanding just how a Weaver Xtreme WordPress site is organized.

We’ve tried to make this second level step as easy and consistent as possible. Almost every one of the option categories can be applied to the same set of areas. The “standard” set of areas include:

 

• Wrapping Areas – the major outer areas that wrap the site’s content. The main Wrapper Area wraps the entire site, while the Container Area wraps the page or post content and the main sidebars.
• Links – Not all categories apply to links, but links are treated as a single element to style.
• Header Area – the header area is displayed at the top of the site, and includes the site title and tagline, the primary and secondary menus, the site header image, a header widget area, and an extra area for arbitrary HTML.
• Menus – there are a Primary and Secondary menu available in the Header Area. Weaver Xtreme Plus also supports Extra menus that can be displayed in different locations.
• Info Bar – the Info Bar is displayed immediately below the Header Area, and shows navigation information, as well as other custom content.
• Content – the content area displays page and post content.
• Post Specific – the Content styling will be applied to both page and post content, but this section allows you to have specific styling for posts and blog views.
• Sidebars & Widget Areas – styling for the various Sidebars and Widget Areas.
• Individual Widgets – styling for individual widgets displayed in the Widget Areas.
• Footer Area – the footer area at the bottom of the site. This includes a widget area and an extra custom HTML insertion area.
• Global Options – some of the Option Categories can include other sections that can apply to global settings. Typography, for example, allows you to specify various global options such as base font size.

Summary

This has been a fairly brief overview of the Customizer interface to Weaver Xtreme options. Because of the WYSIWYG and quick refresh feedback on all the options, you can easily experiment with different settings. Remember, nothing is permanently saved until you click the “Save & Publish” button, so feel free to simply play around with the options.