To edit any widget element, click it. The element’s settings will open in the right-hand panel.
Text settings
Fonts
Click on a text element to open its settings in the right-hand panel. Use Font family to select a font for the text.
All options available in the editor are sourced from Google Fonts. To find a font faster, you can:
search by name;
filter them by a supported writing system (Latin or Cyrillic).
Changes are applied instantly, so you can preview the result in real time. To adjust font size use the +/- controls.
You can also apply your website’s fonts to widget texts. Learn more in this guide.
Text color
To access extended text color options, click the color swatch next to the color setting.
In the color picker, you can:
select a base color using the hue slider;
control opacity with the transparency slider;
refine the shade by moving the selector within the color palette.
Additionally, you can:
switch between HEXA and RGBA color formats;
enter a specific color value manually if you know the code.
To reuse colors, save them to Swatches:
click + under Swatches to save the current color;
select a swatch and press Del to remove it.
Why text changes may affect other elements
Text styles in Claspo are shared styles. When a text element uses a specific Text style (for example, Title), any style changes you make — such as font size, weight, or spacing — are applied to all elements that use the same style, not just the selected one.
This helps keep typography consistent across the widget, but it also means changes can affect multiple elements at once.
Smaller screens often require a smaller font size — especially for headings. However, if you change the Title text style while in mobile view, the update applies to all elements using that style, across both desktop and mobile. This can make text look unexpectedly smaller.
To change only one text element (for example, reduce the font size on mobile):
Select the text element (in mobile view in our example).
Open the Text style dropdown.
Click Remove style from an element.
The element will be detached from the shared style, and any changes (font size, color, spacing, etc.) will affect only this text.
Background
You can change the background for the entire widget or for individual components (such as fields or buttons).
To change the background of the entire widget:
1. Click anywhere on the widget canvas to deselect individual elements.
2. In the top-left corner of the editor, select the top-level layer (the first item in the layer path).
3. The widget-level settings panel will open on the right, where you can enable the Background toggle and adjust the background settings. Available options:
Color:
solid color;
gradient.
Image:
upload your own image (PNG, JPEG, SVG, GIF, WebP, AVIF — up to 3 MB);
use an external image link;
choose a free image from the built-in Claspo’s library.
To edit the background of an individual component:
Click the specific element (for example, a field or a button).
Enable the Background toggle in the right-hand panel and customize its background independently.
Some components, such as Text, Radio, Checkbox, NPS, and Rating, support background color customization only. Background images are not available for these components.
Size
To resize the entire widget, select the top-level (root) layer of the widget.
Resize handles will appear along the widget’s edges. Drag them to adjust the width or height visually.
If you need precise dimensions, use the Size section in the right-hand panel:
set Fixed width and/or Fixed height;
enter exact values in pixels.
You can also switch height to By content height/width if you want the widget to adjust automatically based on its content.
Borders
To adjust the widget’s corner radius, enable Round corners and enter numeric values manually. By default, the same value is applied to all corners. To customize corners separately, click the lock icon and switch to Individually, then set values for each corner as needed.
Some components can be visually highlighted with a stroke. This option is available for:
input fields (Email, Number, First name, Last name, Text input, Text area, Dropdown, Calendar, Date).
Button.
Countdown timer.
Data processing and Terms of use.
Promo code.
Video.
For these components, you can:
choose a stroke style: solid, dashed, or dotted;
set the stroke width manually;
pick a stroke color;
apply the stroke to all sides or customize each side separately.
Some other components (such as Checkbox, Radio, NPS, Rating, and Slot machine) also include a stroke, but the style cannot be changed — only the stroke thickness is adjustable.