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.

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.

​

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.

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:

@import url('https://fonts.googleapis.com/css?family=Roboto');

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:

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.

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

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.

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.

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.

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.

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.

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.

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.