Onepage offers you a variety of options to customize your projects individually.
Table of contents:
Picking a color palette
Click on Design ➡️ Color to access the color palettes for your project.
As you might see, you're free to choose one of our pre-designed color palettes, where each is a set of matching colors for modern designs.
Select one from the list or create your own:
If you want an individual color palette and struggle to pick the right colors, we suggest you use palette generators like coolors or colorhunt.
📌 Please note: Remember that projects share the same font and color settings. Once you change a color palette within a project, it automatically changes on every other page inside your website.
Selecting fonts
You’ll find our popular fonts in Typography. Pre-sets are specifically made to give your project a coherent look. They're awesome by default. You will find more information in our dedicated article:
Gradient background
In Onepage you can add gradients either for an entire section, individual containers inside the section or CTA buttons. Let us review how to access the gradient settings, explain the three gradient types (Linear, Radial, Mesh), and show you how to save your favourite combinations as presets.
Apply a gradient to section background
Hover over the target section. Click the brush icon in the top‑right control panel. In the panel that opens, switch to the third option (Gradient).
Apply a gradient to a specific container
Hover over the desired container and the container’s control panel will appear. Click the brush icon on that panel. In the pop-up, open Background. Select the fourth option (Gradient). This lets you style that single container without affecting the rest of the section.
Apply a gradient to a button
You can apply a gradient background to a button as well. Click on the button, switch to style settings (brush symbol), click on background and select the 4-th option (gradient).
Apply a gradient to text
To add a gradient to a text element or heading, hover over the desired element. A three-dot button will appear to the left of it, click this button. Then select Edit and open Text color. Finally, choose the fourth option (Gradient).
Gradient Types & Controls
Before you start setting up the gradient, you can select the base color. Simply click on Background and pick a color.
In Onepage, you can choose between three gradient types — Linear, Radial and Mesh.
The Linear gradient lets you define color stops and set the angle of the fade, with a simple toggle to invert its direction.
Radial gradients allow you to add multiple color stops that radiate from a center point, whose horizontal position you can freely adjust. Inverting position is also possible.
Mesh gradients offer the greatest creative freedom: you place multiple color points anywhere within the area and fine‑tune each point’s X and Y position. You can even randomize the palette, either limited to your project’s predefined colors or fully randomly generated.
Adding and removing color stops
Simply click anywhere on the gradient settings to add a new color stop. Click on the color stop to edit the color.
To remove a color stop, click on the burger button below the gradient settings. A list of all color stops will be displayed, where you can delete and also add color stops.
Saving & reusing presets
After crafting your gradient, click add color to save the preset . Your new preset will appear in the presets list for quick reuse in any section or container.
Related articles
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂