All Collections
Design your site
Changing web preview tile font elements using a style preset
Changing web preview tile font elements using a style preset
Elaine Bondoc avatar
Written by Elaine Bondoc
Updated over a week ago

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.

To customize the web preview tile

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.

Did this answer your question?