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
Go to your Site Editor.
Click the Styling tab.
Click the Edit button beside the Theme.
Add a new style preset
Click +New button in the Style Presets.
Set a name for your style preset, click Save.
Customize the web preview tile in the style preset
Go to the Web preview tiles section, click it to expand.
From here, you can change the background color and font variables (color, size, style, weight, height, and top padding) of the following:
Background color - changes the icon or image background color
Link Description - change the web preview description's font variables
Link Source - change the web preview's URL font variables
Link Title - change the web preview's site name font variables
Click Done on the top to save the changes.
Click the Publish button to show the new style preset to the linked sites.
Apply the style preset to your web preview tile
Go back to the Site Editor.
Refresh the browser tab to ensure that the new style preset will be available.
Go to the subpage where the web preview tile is located.
Select the web preview tile.
Click the Style Preset dropdown and select the newly added style preset.