Design
Changes the overall style of the site, including background, text, and blocks. You can apply a theme to modify the entire site design at once, or adjust the settings of each element individually. The design is reflected in real-time and is immediately visible to site visitors.
Change the entire site style
In Edit mode , select the theme and palette to apply to the entire site from the Design > Color tab on the right panel .
Selecting a theme and palette changes various default colors and settings. When modifying the design of a public site, we recommend creating a test site to check the changes before making any modifications.
Site Theme
Themes are preset options for backgrounds, text, button colors, corner rounding, borders, shadows, and more. Click the Themes area at the top of the Design menu to select and apply your desired theme, and the default colors and settings for all elements will be automatically changed.
Color palette
A palette is a pre-set set of matching color combinations. If you click the palette area in the Color tab to select and apply a desired option, the default color of all elements will automatically change to the colors in that palette.
You can change the color by clicking on each color in the palette. If the changed color was also applied to the individual elements below the palette, those elements' colors will change as well.
By clicking Light and Dark , you can specify separate palette colors that will appear differently depending on the visitor's screen mode.
Do you want to keep your site in Light or Dark mode regardless of the visitor's mode?
With Light or Dark selected, click the circular icon to disable System Color Matching .
Change default style for each element
Change the default style for each element in the Design > Color , Font , and Shape tabs of the right panel in Edit mode .
What if there are blocks where the style doesn't apply even after changing it in the Design menu?
Since the color, size, thickness, etc., of the corresponding block have been individually customized, please click the undo icon in the block settings.
Site background, header style
Changes the background and site header colors in the entire site area of the Color tab .
Text style
Change text color
Change the site-wide title and default text colors on the Color tab.
Change text size, thickness, line spacing, and font type
On the Font tab, select the default font to apply to the entire site and the title font to apply to the titles, respectively.
Click Page Title, Page Body, and Titles 1 through 3 to modify their respective thickness, size, and line spacing values.
If you want to specify a separate style for channel posts, please enable the 'Post' option and modify the value.
Button style
Change button background and text color
Change the background and text colors in the button area of the Color tab.
Adjust button text size, thickness, and line spacing
Click the button in the defaults area of the Font tab to modify the thickness, size, and line spacing values.
Button padding, corner rounding adjustment
Adjust the padding and rounded corner values in the button area of the Shape tab.
Add button border and shadow
In the Button area of the Shape tab, activate Border and Shadow to adjust the border thickness, shadow blur, and position. Go to the Color tab and change the colors of the border and shadow in the Button area.
Please click the guide below to check how to set individual styles for each button.
Media (Image, Video) Style
Adjust media corner rounding
Adjust the rounded corner values in the image and video areas of the Shape tab, respectively.
Add media borders and shadows
In the Image and Video areas of the Shapes tab, activate Borders and Shadows to adjust border thickness, shadow blur, and position. Go to the Color tab and change the colors of the borders and shadows in the Media area.
Card (background, column) styles
Change card background and text color
Change the background, title, and text colors in the card area of the Color tab.
Adjust card corner rounding
Adjust the rounded corner value in the card area of the Shape tab.
Add card border and shadow
In the Card area of the Shape tab, activate Border and Shadow to adjust border thickness, shadow blur, and position. Go to the Color tab and change the colors of the border and shadow in the Card area.
Please click the guide below to check how to set individual styles for each card block.
Channel preview style
Change channel preview background and text color
Change the background and text colors in the Channels area of the Color tab.
Adjust channel preview corner rounding
Adjust the rounded corner value in the Channel area of the Shape tab.
Add channel preview border and shadow
In the Channels area of the Shape tab, activate Border and Shadow to adjust the border thickness, shadow blur, and position. Go to the Color tab and change the colors of the border and shadow in the Channels area.