Customizer options

All customization options for Ignition Framework based themes have been integrated in the WordPress Customizer to provide the user with an easy to use and familiar interface.

Customization options are split into seven distinct categories based on which aspect of the site they affect. Let’s take a brief look at each one.

Site Options

This panel houses options that affect the entire site. It is split in three sections presented below.

Layout

Through this section users can customize the appearance of the site and blog by moving or entirely disabling the sidebar, furthermore the entire site’s, theme’s content and sidebar’s width can be changed using the respective sliders.

Themes are built on a column based grid, specifically they are built on a bootstrap inspired twelve column system. This means that the site’s width (set using the Site width slider above) is split in twelve columns which are then grouped in various configurations to make up the final layout. Using the Content/Sidebar width sliders or inputs users can adjust the number of columns each of the two main site sections take up. one can choose to make the content narrower in favor of a wider sidebar and vice-versa. When configuring these widths it is important to make sure their sum is always 12 since, as mentioned before, we’re working with a twelve column system.

These options are by default applied site-wide, however the layout can be overridden on a per-post (or page/custom post type) basis. This can be done using any of the available templates in the Page Summary metabox, this way any item can bypass the default layout and have the sidebar moved or removed entirely. The fullwidth template will also override the content width and set it equal to the screen’s (viewport) width.

Themes with a side header

On themes with a side header the General Layout tab is a bit different. Here we have the Site Layout drop down which offer four layout options for the entire site, these are: Boxed site – centered which will restrict the width of your site to the set site width, Full width site – Boxed content which will make the site full width and apply the site width to the content area, Full width site – Left aligned content same as before but aligns the content to the left and finally Full width site – Full width content which makes both the site and content full width. The Content, Blog & Single blog post Layout drop downs allow you to configure the appearance of inner pages, the blog, posts and custom post types, they affect only the area next to the sidebar and not the entire site. Available options are Content/Sidebar, Sidebar/Content, Full width & Full width narrow. The last two options will remove the widgetized sidebar entirely.

Colors

Through the colors section users can easily modify the theme’s background image and or color and change the theme’s color scheme using the provided color controls.

Typography

Finally the typography section gives control over the theme’s primary and secondary font family and properties. Additionally it allows for fine tuning of key font properties for headings and widgets. A vast font selection is available to users in the form of Google Fonts, plus a handful of standard/system fonts. Google Fonts can be entirely disabled via the provided checkbox if they are not needed (i.e. if using a custom font family, or favoring system fonts).

Top Bar

The top bar panel gives users access to customization options available for the area above the logo/menu. The Content section offers three content areas (left, middle and right) which can accept plain text, HTML or any of the framework’s built in shortcodes. Here users can also choose the colors of the top bar when the header is set to the normal or the transparent layout. The top bar can be entirely disabled if needed via the provided checkbox or set to be visible only on specific devices.

The top bar is not available on themes with a Side Header.

Header

Header customization is split into six sections as presented below.

Layout

In this section users can modify the header type by choosing between a normal (example) or a transparent header (example), the transparent header layout essentially overlaps the Page Title section (if enabled) or the first few elements of the content to create layouts ideal for landing page hero sections/sliders. The header type can be overridden in each post/page/custom post type individually if needed. The header can be also made fullwidth, which means it won’t be restricted to the width set earlier but will span the entire viewport.

There are four available layouts for the menu/logo group. The menu can be to the left, right of the logo, centered (below the logo) or split to two separate menus with the logo between them (in this case you will need to set menu items for both the main menu left and main menu right under Customize > Menus > Menu Locations). The sticky menu option can be enabled here, you can also choose to make the mobile menu slide in from the left instead of slowly fading in, and finally users can choose the viewport width below which the mobile menu will be displayed.

Side Header Layout

On themes with a Side Header, such as Coastline for example, the layout tab is much leaner because some of the options available on the normal header are not necessary. In such cases under the layout tab you will find an option to make the side header fixed, which means it will not scroll along with the content and stay in view the entire time, you can also choose to make the mobile menu slide in from the left instead of slowly fading in, and finally set the maximum width below which the mobile menu will show up.

Content

The header features a content area next to or opposite the menu (depending on which layout was selected above) which can host plain text, HTML or one of the framework’s built in shortcodes.

Colors

There are four distinct color sections for the header. Normal and transparent colors apply to their respective header layout types, sticky colors take care of the menu when it’s stuck and finally the mobile menu colors deal with the appearance of the menu on mobile devices.

For themes with a Side Header the transparent and sticky color tabs will not show up since these functions do not exist on these themes.

Page Title

The page title is the section located just below the header (example). It houses the page’s title and an optional subtitle. Here users can customize the section’s height on various devices, change its content alignment and choose if they want to show/hide the normal page title and subtitle globally in favor of the ones that appear in the page title section and toggle the appearance of the site’s breadcrumbs. Τhe appearance of the section can be configured by applying a background color or image and settings the color for the title and subtitle. The section can be globally disabled if not needed via the provided checkbox.

The appearance of the page title section, its background image, contents and breadcrumbs can be toggled individually for each page and custom post type using the item’s configuration options.

If you have set a certain page as your posts page under the Homepage Settings panel in the Customizer and set a custom background image, header layout, title appearance etc for it, all single posts and other post archives, such as category, tag and author listings will inherit these options from the blog page. If no page is set as your posts page in the Customizer posts and post listings will inherit the global options set under Page Title.

Similar to the blog, single products and product categories will inherit all layout options configured in the Shop page. Pages like the cart, checkout and my account will follow globally set options or their own if they are set.

Blog

The blog customization panel is split into two sections. The archives section allows users to choose how they want the posts displayed in listing pages (in a single column or in a grid like layout) such as the blog, category & tag listings, set the size of the excerpt, and choose which information they want visible on each post listing item. The single post’s section takes care of the meta displayed on single posts, also from here users can toggle the appearance of related posts.

Footer

Through the footer settings panel users can configure the footer section or disable it entirely. You can also choose the number of equal widget areas. Through the colors section they can customize its color scheme by applying a background color or image and modifying colors for the borders and text. The Credits content section offers two content areas, to the left and right of the bottom footer bar, which are ideal for copyright and contact info. These areas accept text, HTML or any of the framework’s shortcodes.

Utilities

 

Weather

The themes have the ability to display current weather conditions in a selected location via the built in shortcode. These information are provided by OpenWeatherMap. For the integration to work you need to acquire an API key from OpenWeatherMap and also provide the location ID of the place. The location ID can be found by visiting OpenWeatherMap.org and searching for the desired location. Once on the location’s page, the location ID is the last numeric part of the URL. For example, the URL for London, UK is https://openweathermap.org/city/2643743 and the location ID is 2643743.

Lightbox

Ignition Framework based themes bundle a lightbox for featured images and image galleries. The lightbox can be toggled at will using the provided checkbox. This allows users to utilize lighboxes provided by third party gallery plugins, page builders etc without having to deal with double lightboxes or other issues that might arise from the existence of two lightboxes on the same site. Users going for a more streamlined and minimal site without a lot of third party plugins can opt to enable the theme’s lightbox in order to take advantage of this functionality.

Block Editor

Some themes have dark color schemes which are reflected in the block editor, this can make working with certain blocks a bit harder. Enabling the editor dark mode using the provided checkbox will apply certain styles to the editor in order to improve the content creation experience.

Social Sharing

Here you can toggle the appearance of social sharing icons on standard posts and WooCommerce products. You can also select on which networks you want your visitors to be able to share to.

Back to Top button

Toggle the appearance of a back to top button which will allow users to easily return to the page’s top once they have scrolled towards its end.

Widgets

Toggling this option allows you to use blocks as widgets in any of the theme’s widgetized areas.