Skip to main content
Customizing your theme
Elaine Bondoc avatar
Written by Elaine Bondoc
Updated over 5 months ago

Overview

A theme is a set of styling that you can apply to your site to control the header, logos, fonts, colors, spacing, and some structural elements of the site (like whether description panels appear beneath or next to expanded images, videos, and slideshows). Themes will help keep your sites consistent and on-brand, an important quality of professional communications. 

Whether you are editing a theme or creating a new one, you will be introduced to the Theme Editor window. This is where you can create Style Presets and select the colors, fonts, and sizes of the elements on your site. Theme customization may require the Account Admin, Content Admin, or Account Owner role/permission.

Using theme and style preset variable search utility

The theme editor lists the different variables which relate to the different customizable site elements, such as logo, navigation menu, footer, page background, etc.

While the variable list are grouped based on type and / or site and page major sections, the most convenient way to easily identify the element to target for customization is via the variable search utility, which is found at the top of the list of the left panel of the theme editor.

  1. Go to the Themes dashboard;

  2. Hover over the target theme, and click the Edit button;

  3. Click the search box at the top of the left pane of the theme editor;

  4. Type the keywords that refer to the site elements that you would like to customize;

  5. Click the group header to expand the variables that can be modified


Changes to any of the variables are automatically saved but not published. Once the variable change has been saved, the site previewer on the right of the theme editor is reloaded to preview the effect. Hit the Publish button to apply the variable change to the live site/s using the theme, or to make the change available for drafted site/s.

Edit a theme

One thing to keep in mind is when you edit a theme those changes will be made on ALL sites that are using the theme. Make sure you look at the list of sites in the theme dashboard, or theme editor window, so you can be sure that you are only affecting the sites you want to.

You can duplicate a theme before making any changes to ensure that other sites won't be affected.

  1. Hover to the theme from the Themes dashboard.

  2. Click the Edit button on the right side of the theme.

  3. Make your changes in the theme editor window.

Add a logo to your theme

If you do not have a URL for your logo, you can use our native public hosting button at the top of the theme editor to generate a new URL.

  1. Click on Upload File

  2. Click Choose file then search for your file from your local machine and click Open.

  3. Click Copy Link from the pop-up window that will appear after uploading the file.

  4. Using the search bar at the top, search for Logo or you can also go to Main > Site Header > General > Site Logo

  5. Paste the link on the URL field of the Site Logo part of the theme.

Customize the theme fonts

By default common fonts/font families are added to themes such as Helvetica, Arial, and Times New Roman. Font family loads the second font in the group if the first font would not load.

There are different site elements where the font can be modified from the theme editor, such as heading styles in style presets, tile captions, filter categories for grid sections, main navigation, submenu links, etc.

Import fonts

The second field in the theme editor is the Font Import Statement field. You can use Google fonts or custom web fonts in your theme here.

Google Fonts

To use Google fonts, first go to https://fonts.google.com. If you have used Google fonts before, you can add fonts to your collection and get the @import statement from the Cascading Style Sheets preview. If you have never used Google fonts before you will first need to find the fonts you want for your site.

To add a font to your collection, click the font that you want. You will now see a list of styles for that certain font. Select the styles that you want to add to your family by clicking the + Select this style at the right


Once you've selected all the font/styles that you want, click on the 3 boxes with plus sign icon at the upper right


This will open a pop-up at the right then click on the Embed tab, the pop-up will teach you how to use your new font collection.

If you click on the @import link you will see code explaining how to import the collection into your site. You should copy the code between the style tags. An example code would look like:

Get the url in between '' and it should start with https then you can now paste the URL into the Font Imports field.


Now whenever you want to use your Google font collection you can do so with the following CSS values: font-family: 'Roboto', sans-serif;

You should see this reflected in your theme now.

Custom Web Fonts

To use custom web fonts, you will first need to upload them somewhere. You can use our native public hosting (recommended), or other online tools including:

Change font family via Theme Editor

  1. Click Styling from the Site Editor left panel menu

  2. Click the selected theme under the Theme section

  3. Hover over the current theme for the site (you'll see a blue check icon next to it)

  4. Click the pencil icon to edit the theme

  5. Type the keywords font family in the variable search box at the left panel of the theme editor

  6. Select the variables you wish to change in the font, or font family

  7. Click the Font Family field and select the preferred font or font family from the drop-down

  8. Click the Publish button

Style Presets

Style preset allows you to change select aesthetics for tiles and text sections, such as font style, line height, list designs (ordered and unordered lists), border, background color, etc. Setting a style preset for a tile or text section makes it easier to isolate or dedicate specific design changes as well, through custom CSS.

Add a new style preset

Adding a new style preset doesn't necessarily affect any site/s using the theme, but changing any existing style preset does. In this latter case, it is best to copy the theme first before changing any values in any existing style preset.

  1. Open the editor for the theme.

  2. Hit the + New button next to the Style Presets on the left editing panel of the theme editor.

  3. Set a unique name for the Style Preset and click the Save button.

  4. Update the styling values in the available fields.

  5. Under Scope, indicate which elements the Style Preset should be applicable for.

  6. Click Done back at the top of the Style Preset menu.

  7. Click Publish button on the upper left of the editor.

  8. Refresh the site editor to see the new style preset in the list.

The style preset will only be available for the appropriate element selected in step 5.

Duplicate a style preset

Duplicating an existing style preset is sometimes easier and makes more sense than creating a new one. This ensures that you are no longer re-adding previous settings so that you can focus on specific objects you want to target.

  1. Go to the Themes dashboard

  2. Highlight the specific Theme where the existing style preset is and choose Edit

  3. Under Style Presets, select the existing preset you want to duplicate

  4. Click on Duplicate

  5. Provide a Name for the new preset

  6. Click Save.

Adjusting the font size using a style preset

The font size is a significant factor in creating a site. Utilizing the font slider to render paragraphs as headings, or headings as paragraphs is not recommended as it is not the best way to manipulate the font size. We suggest creating a new style preset with larger font sizes through the theme editor and employing the correct format such as <H1> to <H6> for headings, and <p> for paragraphs in your texts.

The list below may aid in determining the appropriate font size format to use.

  1. Header font size. This is the biggest font size on your page. Use it for the headline or section titles. If you have both a headline and section titles, you should almost certainly be using two different font sizes here.

  2. Default font size. This is the most common font size on your page and should be used for all body text – as well as most controls, like text boxes, dropdowns, captions, and menus.

It is recommended to use "em" instead of pixels for fonts as "em" sets the size relative to surrounding elements and this can be good in applying screen size, or mobile view where the text needs to scale according to its size.

Customize font-related variables using style preset

Using the right font not only aligns your site with your preferred branding style but also helps strengthen the register of your communication, optimizes content readability, and aids accessibility.

The theme editor lets you customize the font-related variables in the theme and style presets such as color, hover color, size, weight, etc. You can use the theme search utility, or run through the list of theme and preset variables, to identify which elements you like its font to be modified, such as the font for an overlap caption, button links, headings, tables, tags, tile titles, etc.

  1. Click the Themes icon from the left sidebar;

  2. Hover over the target theme and click Edit;

  3. In the search box at the upper left, type in the keyword font or the target element name (such as a secondary button or play icon), or you can find the target element by scrolling through the variable list on the left side of the editor;

  4. Click the arrow next to the variable heading name to see the customizable variables;

  5. Change the target font-related variable by updating the field value;

  6. Wait for the previewer on the right of the editor to reload the page and review the changes;

  7. Click Publish to apply changes for live or drafted sites.

    You can also check our Skills Workshop for Text Tiles to know more.

Customize border for tile/text sections via style preset

You can make a Style Preset to create different elements for tiles and sections. Different design elements of a tile and text section can be customized as you create or modify a style preset. You can change the font transparency, margin, heading style line height, or tile border. Style presets permit users to apply specific styles to selected tiles without recreating or duplicating the style every time you create a site.

One thing you can do in a style preset is to create a border for your tiles.

  1. In the theme editor, navigate to edit an existing style preset already applied to the target tile / text section, or create a style preset. If you are to create a new style preset, you have to apply the new style preset to the target tile / text section later.

  2. Click Tiles, and look for the Border field from the style preset editing interface, on the left pane.

  3. Set the value of the border using this format: <border-width> <style> <color> (e.g. 2px solid #000).

  4. Click Publish.

  5. Apply the style preset to the target tile or text section.

Customize web preview tile font elements using a style preset

A web preview tile refers to a visual representation or thumbnail image displayed when sharing a link on various online platforms, such as social media, messaging apps, or search engine results. It provides a preview of the webpage's content and serves as a clickable element that users can interact with to access the full page.

The web preview tile typically includes elements like a title, description, and an image associated with the webpage. These elements are often extracted from the webpage's metadata.

By customizing the appearance of web preview tiles, website owners can enhance the visibility and attractiveness of their shared links, increasing the chances of users clicking through to their webpages.

Open the theme from the Site Editor

  1. Go to your Site Editor.

  2. Click the Styling tab.

  3. Click the Edit button beside the Theme.

Add a new style preset

  1. Click +New button in the Style Presets.

  2. Set a name for your style preset, click Save.

Customize the web preview tile in the style preset

  1. Go to the Web preview tiles section, click it to expand.

  2. From here, you can change the background color and font variables (color, size, style, weight, height, and top padding) of the following:

    1. Background color - changes the icon or image background color

    2. Link Description - change the web preview description's font variables

    3. Link Source - change the web preview's URL font variables

    4. Link Title - change the web preview's site name font variables

  3. Click Done on the top to save the changes.

  4. Click the Publish button to show the new style preset to the linked sites.

Apply the style preset to your web preview tile

  1. Go back to the Site Editor.

  2. Refresh the browser tab to ensure that the new style preset will be available.

  3. Go to the subpage where the web preview tile is located.

  4. Select the web preview tile.

  5. Click the Style Preset dropdown and select the newly added style preset.

Customize link buttons using a style preset

Buttons allow users to take actions, and make choices, with a single click. The use of buttons is a great way to convert passive engagements, like viewing a content, to action-based interactions, like downloading or sharing an asset from your page, content reactions via emoji, signing up for a service, or registering for an event, etc.

Buttons communicate actions that users can do. They are typically placed throughout your site. Buttons should be easy to find, and should be identifiable while clearly indicating the action they allow a user to complete. In the Theme Editor, you can customize the primary and secondary buttons' background color, border, font color, and font color on hover in your preferred style.

  1. Under Sites Basics, click on Links and Buttons from the left editing menu;

  2. Edit the hex color codes for the Link, Link Interaction, Primary Button and Primary Button Interaction depending on your preference;

  3. You may modify the primary button's border width and radius by adjusting the size, in the corresponding fields;

  4. Click on Publish for the changes to apply to your site.


Did this answer your question?