Design and widgets

The look of your whole site (colors, fonts, buttons, effects) is set in one place: the Design tab of the editor. Site-wide extras like chat buttons and an announcement bar are in the Widgets tab. Changes show in the preview instantly and go live when you click Publish.

Ready-made themes

1. In the editor, open the Design tab (left panel).
2. Under Colors, the Ready-made themes offer complete color sets: Orange, Midnight blue, Neon lime, Rose, Violet, Light studio and Black and white.
3. Click one to apply it. You can then fine-tune any color below.

Tip: start with the theme closest to your brand, then change only the Accent color to your brand color. That alone often does the job.

Colors

Typography

• Heading font and Body font: choose from a list of web fonts; the preview loads them as you pick.
• Heading weight: from regular to extra bold.
• Heading letter spacing: tighter or wider titles.
• Title size: scale all titles up or down.
• Text size: the base size of body text.
• Small labels in capitals: whether small labels above titles are in capital letters.

Shapes

• Card corner rounding and Button corner rounding: from square to fully round.
• Button appearance: Solid color, Gradient or Outline.
• Content width: how wide the content can get on large screens.

Effects and animations

• Glow strength: how strong the glow effect is (0 turns it off).
• Scroll animation: how sections appear while scrolling: No animation, Fade in, Fade in from below, Zoom or Sharpen.
• Cards lift on hover: cards move up slightly under the mouse.
• Film grain over the site: a subtle textured look.
• Smooth scrolling: soft scrolling when a link jumps to a section.

Custom CSS

Under Advanced, the Custom CSS field lets you add your own CSS for design changes that are not available as settings. Example:

.btn { text-transform: uppercase; }

Custom CSS is for advanced users. If something breaks, delete what you added, or use Ctrl+Z.

Section-level design

Each section also has its own look in Edit → Appearance: background (none, card, glow, accent), spacing, title alignment and a background image with darkening. Many sections add their own options, such as columns, card style or image shape. See Sections and elements.

Widgets

Open the Widgets tab. It has three groups: Chat buttons, Announcement bar and Other.

Chat buttons

Floating buttons in the corner of the screen let visitors contact you in one tap.

1. Turn on Show chat buttons.
2. Under Channels, click Add item for each channel and choose the Channel:
   • WhatsApp, Viber, Telegram, Messenger, Instagram;
   • Call, SMS, Email;
   • Other link (any https://… address, with your own icon).
3. Fill in Number, username or address:
   • WhatsApp, Viber and Call: your number in international format, for example +381601234567;
   • Telegram and Instagram: your username;
   • Email: your email address;
   • Other link: a full https://… address.
4. Optionally add a Prefilled message (WhatsApp), a Text next to the button (optional) and a Color (empty = brand color).

Then choose how the buttons behave:

Announcement bar

A thin bar at the very top of the site, for news or offers (Free shipping this week, New course out now).

1. Turn on Show a bar at the top of the site.
2. Write the Text, and optionally a Link text (optional) with Link goes to.
3. Choose the Style: Accent, Dark or Light.
4. Decide whether Visitors can close it.

Other

• “Back to top” button: a small button that scrolls back to the top on long pages.
• Scroll progress line at the top: a thin line that fills as the visitor scrolls.

Tips

• Check your colors on Phone too, and make sure text is readable on every background.
• Do not mix more than two fonts; the heading and body font are enough.
• One or two chat channels are usually better than five.