The editor has a top bar with 4 tabs to customize different widget elements and a Preview switch (Desktop/Mobile view). Below the bar is a side panel with the settings that vary depending on the selected tab, and a Preview area to see what the widget will look like in your theme.
<aside> 💡 Adjust your preview width to test the widget’s content adaptivity on different screen sizes.
</aside>
The 4 tabs in the top bar are as follows:
In this tab, you choose the fonts to further use in the widget’s components, and adjust the mobile breakpoint, i.e. the screen size where the widget’s design changes from desktop to mobile layout.
Note that if you decide to use the theme fonts in the widget, you won’t see them in the preview - only in the theme editor of the published theme.
Here, you can also choose a default preset for your timer widget. Presets define the overall appearance of the widget (components, background, typography, colors, etc.). Use presets as they are, or customize them to your taste.
In this tab, you adjust the layout, background, borders, corners, and spacing of the widget. You also turn on and off, and rearrange the widget’s components (Text, Timer, Coupon, and Button) and adjust their appearance (fonts, colors, extra elements).
Note that you can edit, duplicate, and delete the added components as well as rearrange them by dragging them up and down in the list.
In this tab, you choose the type and source of the widget’s background and adjust its borders, corners, and spacing.