As a child page under Settings you'll find the Theme page. Here you will find a long list of settings and configuration options for your website. The theme settings will apply to the entire website.
Most of the options found here, are also available through the Theme Editor.
In this article you can learn more about the various options as well as get an idea of what the settings will affect.
The Theme settings are divided into 5 different groups:
In this group you will find options to upload and set your company logo for various use cases, define the default fonts and a few options to costumize the buttons on your website.
Logo on Dark and Logo on Light
These give you the option to upload two versions of your company logo - one that works best on a dark background and one that works best on a light/white background.
The logo will mainly be used in the website header and act as a link to your frontpage.
Upload a square image in
.png format, that will be used as the website favicon
Upload a square image, preferably with a background color. The App Icon is used when the website is added to the homescreen of an iPhone.
Icon Background Color
In some cases your facivon will be shown with a background color. This setting lets you configure the exact color that should be used as background with the image you uploaded to be used as favicon.
The color needs to be in HEX value.
This setting lets you load in webfonts from e.g. Google Fonts. The default font is
You can load in as many fonts as you would like. Keep in mind that loading in too many different fonts might affect the site performance.
Define the font(s) used for all text on the website that isn't defined as a heading. If you are defining multiple fonts, make sure that you seperate each with a comma (,)
Define the font used for all headings on the website. If you are defining multiple fonts, make sure that you seperate each with a comma (,)
Button Border Radius
Define how rounded the borders on your buttons should be. The lower the value, the more square your buttons will be.
"To Top"-button color
When you start to scroll down on any page on the website, there will be a button visible to help you jump back to the top of the page.
You can customize the button to be either black, white or the custom theme color you've define.
In this group you have the option to custmize the colors used around the website. This provides the option to match the website to your company colors and identity.
This is the main color on the website. It can be used for buttons, backgrounds, link color and other design elements.
The color that will be used for text elements placed together with the Theme color.
Heading Dark and Text Dark
Define the color for headings and text placed on light backgrounds (white or gray). Choose a darker color for the best results.
Heading Light and Text Light
Define the color for headings and text placed on dark backgrounds. Choose a lighter color for the best results.
Gray and Dark Background
The option to make the gray and dark backgrounds the colors that best fit your company identity.
Selected Navigation Item
Define the color of selected item in the naviation bar on your website. By default this will be set as the default Theme color.
This group contains configuration options for the header of your website, hich by default contains your company logo/name, the main navigation menu, search functionality and the option to change language if you've set this up.
For the header background you can choose either dark or light.
You can choose between 4 different layouts for the Header of your website.
Define the width of the container inside of the header which will always be the full width of the screen size.
Define the height of the header in pixels.
Define the height of the header when your websites is view on mobile.
Logo Padding and Logo Padding Mobile
Define the padding (in pixels) over and under the logo.
Navigation Padding and Navigation Padding Smaller Screens
Define the padding (in pixels) around each of the navigation items.
In this group you get a couple of configuration options to customize the look of the footer in the very bottom of your website.
For the footer background you can choose either dark or light.
Container Width (Footer)
Define the width of the container inside of the footer which will always be the full width of the screen size.
In this group you can custmize the dimensions of the Grid widget.
Container Width (Grid)
Define the width (in pixels) of the container holding the grid widget. It's possible to define 3 sizes: Small, regular and big.
The Grid Gutter is the space between columns when working with the Grid widget.
You can specify the amount of pixels between each column for 4 different screen sizes: Large (default), Medium, Small and XS.