Customising Widget Display Styles
This article covers the Styles tab in Widget Displays, which allows you to change the font, background image and colour of the Display, and how new Tiles are loaded. You can also view all available custom options along with the structure and terminology used in Widget Displays.
From the left menu, browse to Engage > Widget Displays.
Click on the Edit button under the Actions column for Widget Display you wish to customise.
On the Edit Display page, click on the Style tab in the right sidebar to edit any of the options described below.
Use Custom Font – click on the Use Custom Font button to enter details of any custom fonts you wish to use in this Display.
Enable Custom Font – turn on to use custom fonts
Font Embed Code – paste your custom font embed code
CSS Rules – paste CSS rules for your custom font
Click Apply to continue.
Background Image – upload a background image for this Display. For best results, the image should have an aspect ratio and resolution suitable for devices intended for this display. This option takes precedence over Background Colour (below).
Background Colour – lets you specify the background colour for this Display.
Padding - lets you configure the internal spacing around the edges of the header/footer.
Tile Spacing – lets you specify the space between Inline Tiles for this Display.
Auto Load More – turn on this toggle switch if you want new Tiles to automatically load when users scroll to the end (lazy loading), or disable it to require users to manually click a Load More button.
Load More Button Style – lets you customise the text, font, and colours of the Load More button. This option is only available if ‘Auto Load More’ switch is disabled.
Loading Spinner – lets you customise the size and colour of the animated loading spinner displayed while new Tiles are being fetched.
Scroll Top Icon – let you enable and customise the scroll top icon in the bottom right corner of the Display. This field is not applicable for Slider Themes.
Click on the bottom right Save Changes button to save your changes when done.
Customising Widget Displays – Style Tab
From the left menu, browse to Engage > Widget Displays.
Click on the Edit button under the Actions column for Widget Display you wish to customise.
On the Edit Display page, click on the Style tab in the right sidebar to edit any of the options described below.
Use Custom Font – click on the Use Custom Font button to enter details of any custom fonts you wish to use in this Display.
Enable Custom Font – turn on to use custom fonts
Font Embed Code – paste your custom font embed code
CSS Rules – paste CSS rules for your custom font
Click Apply to continue.
Background Image – upload a background image for this Display. For best results, the image should have an aspect ratio and resolution suitable for devices intended for this display. This option takes precedence over Background Colour (below).
Background Colour – lets you specify the background colour for this Display.
Padding - lets you configure the internal spacing around the edges of the header/footer.
Tile Spacing – lets you specify the space between Inline Tiles for this Display.
Auto Load More – turn on this toggle switch if you want new Tiles to automatically load when users scroll to the end (lazy loading), or disable it to require users to manually click a Load More button.
Load More Button Style – lets you customise the text, font, and colours of the Load More button. This option is only available if ‘Auto Load More’ switch is disabled.
Loading Spinner – lets you customise the size and colour of the animated loading spinner displayed while new Tiles are being fetched.
Scroll Top Icon – let you enable and customise the scroll top icon in the bottom right corner of the Display. This field is not applicable for Slider Themes.
Click on the bottom right Save Changes button to save your changes when done.
Updated on: 04/02/2023
Thank you!