Type and press Enter.


The Customizer is the place where you have access to all the theme’s configuration settings. All changes may be previewed before saving them.

You can find the Customizer at Appearance Customize .

Site Identity

Appearance → Customize → Site Identity

Upload the header logo as well as the logo for transparent headers.
More info at Header / Footer → The Header.


Appearance → Customize → Layout

Change your Top Bar / Header / Footer / Blog layout.
Add content to your Top Bar and Footer Copyright Area.


Appearance Customize Typography

Change the typography.

You can find the responsive typography settings at Appearance → Customize → Responsive Settings → Typography.

Font Sizes

px VS em
For the font size and line height you can use either the px or em unit.
While px are fixed-size units (one pixel is equal to one dot on the computer screen), using the “em” unit will display the text element relative to the Base Font.
Base font size: 16px.
Headline font size: 2em. The headline will display twice the size of the base font, which equals 32px.

The Base Font
Changing the Base Font will affect most other typography elements on the site as it also increases/decreases all other text elements (like headlines etc.) that use the “em” unit. Any typography elements that use the “px” unit will not be affected.

Using Adobe Fonts
  1. Go to Appearance Customize Typography Font Families
  2. Select Font Family Source: Adobe Font for the Base Font or Headings Font
  3. The Adobe Fonts Project Embed Code field will Appear
  4. Enter the Adobe Fonts Project ID.

How to get the Adobe Fonts Project ID:

  1. Using Adobe Fonts requires any Creative Cloud Plan
  2. Go to the Adobe Fonts website and log into your account.
  3. Browse thousands of fonts to find the right ones for your site.
  4. Create a new web project or add a font to an existing project by clicking:
  1. Go to My Adobe Fonts → Web Projects to find all your Web Projects.
  1. Copy the Project ID of a Web Project.
Using Custom Fonts

If you wish to add a custom font, you can use the Use Any Font plugin for that. Once the plugin is installed and activated you can upload your font file at Use Any Font → Upload Font and then select the uploaded font at Appearance → Customize → Typography → Font Families.

Select “Google Font” and then select your uploaded font under “Standard Fonts”.


Appearance → Customize → Colors

Change the color of the background, text, links, headlines, buttons, header, footer and more…

Responsive Settings

Appearance → Customize → Responsive Settings → Responsive Layout

Layout options for the Top Bar and Header on small screens.

Appearance → Customize → Responsive Settings → Responsive Layout

Typography for small screens.


Appearance → Customize → Animation → Animate on Scroll

Select if you wish to the following elements on scroll:

  • Hero Block Text (fade up, fade down, fade right)
  • Content Boxes (fade up)
  • Content Boxes Text (fade up, fade down, fade right)
  • Menu Tabs (fade up)
  • Gallery Block (fade up)


Appearance → Customize → ConnectSocial Accounts

Set up your social accounts to display them in the top bar and in the Social Icons Block.


Appearance → Customize → Media

Activate/deactivate the Image Lightbox, which will open your images in a fullscreen Lighbox instead of in a new window.


Appearance → Customize → WooCommerce

Additionally to the default WooCommerce customizer settings that come with the WooCommerce plugin, the theme adds the following additional settings at Appearance  Customize  WooCommerce  Product Catalog:

  • choose the style of the Add To Cart Link (Display on hover / Display permanently / Hide )