A variation is a named look for one kind of element. It lets you keep several versions of a button, heading, or image without styling each one by hand.
Last updated
A variation changes only the look. It is not a component and does not create a new block type.
Variations are created from the editor and managed in the Style manager.
Variations are available for buttons, headings, paragraphs, dividers, menu links, and images.
A button always has a variation. The other elements can also use a plain Default look.
If the palette button does not appear when you select an element, that element does not support variations. Use the Box and Text tabs or Custom classes (advanced) instead.
Select the element.
Open the palette button in its floating toolbar.
Choose a variation from the list.
The element changes to that look. Switching a variation replaces the element's manual classes with the variation's classes.
If you have custom classes on the element that you want to keep, apply them to a shared style first or write them down before switching.
For elements that allow it, Default removes the variation and returns the plain look.
Style the element first. The variation captures the look you already made, including device-specific styles.
Select the element.
Open the palette button.
Choose + New variation.
Give it a name, such as "Pill button".
Choose Create variation.
The new variation is saved for the project, appears in the picker, and is applied to the selected element.
It also appears in the Style manager, where you can edit its classes later.
A good way to make a variation based on an existing one is:
Apply the existing variation.
Change the parts you want to differ.
Create a new variation from the result.
Custom variations can be renamed. Renaming does not break the elements that use them, because the name is only a label.
Deleting a custom variation is permanent. Check any element that used it and choose another variation.
Built-in variations cannot be deleted. If you customized one, the Style manager offers Restore default.
Open the Style manager, find the variation, and choose Edit classes.
This creates a project override. The original look stays available through Restore default, so you can always go back.
This is the workflow for sharing the look of one element with the rest.
You style one element until it looks right, then move those extra classes into a shared style.
Style the element with the toolbar controls or a class list.
Select it.
Open the palette button in its floating toolbar.
Choose Merge styles into base style. The dialog is called Apply styles everywhere.
Select the classes you want to share.
Choose the target style.
Choose Apply everywhere.
This action is available for elements that support variations, such as buttons, headings, paragraphs, dividers, menu links, and images. For a section or row, edit the shared style in the Style manager instead.
The classes move into the shared style and are removed from the element. Every element using that style gets them.
The target decides how far the change reaches.
For a button, the dialog can offer:
x-btn:primary, the primary variation. Only elements using the primary variation change.
x-btn, the shared button base. Every button changes, including soft, outline, and any other variation.
The shorter name without a colon is the base. The name with a colon is a variation.
The dialog starts on the variation the element currently uses. Change it to the base when the change should reach every variation.
Style one button with rounded-full.
Open the palette menu and choose Merge styles into base style.
In the Apply styles everywhere dialog, select rounded-full.
Choose the base target, x-btn.
Choose Apply everywhere.
Every button now gets the rounded shape, unless a variation sets its own radius. If one variation still looks square, edit that variation or apply the same class to it.
Use the same steps, but choose x-btn:primary as the target. The soft and outline buttons keep their current shape.
Only classes Remake can generate appear in the dialog. A custom class from your own stylesheet stays on the one element.
If the element has no extra classes beyond its style, there is nothing to merge and the dialog does not open.
The button base is in the Style manager under Show advanced, in the Base styles category. After a merge, edit it there like any other style.
If you merged into a custom base, it appears under Other in the advanced section.
Use the variation when only one kind of element should change:
Primary buttons only.
Display headings only.
Rounded images only.
Use the base when every version should share the change:
Every button should have the same height.
Every heading should use the same font.
Every image should have the same default radius.
When a base change is too broad, move the class to a variation instead.
To add a new button style:
Select a button and apply the primary variation.
Change the color, padding, and radius.
Open the palette and choose + New variation.
Name it "Pill button".
Create it.
Use it on the buttons that need that look.
Publish.
To make every button share one change:
Style one button.
Open the palette menu and choose Merge styles into base style.
Select the class in the Apply styles everywhere dialog.
Choose the base target.
Check the other variations.
Publish.
A website builder that works like a document. CMS, forms and EU hosting included.
© 2026 Remake. All rights reserved.
