Before you start: Open the page you want to edit and click Edit before working through this guide. Note that typography settings apply per page, so you will need to set these on each page individually.
The Most Efficient Way to Customise a Template
The quickest way to work through a template is to make one type of change at a time across the whole page, rather than jumping between different types of edits. Templates are built with repeated patterns — if you try to change things in isolation, you will find yourself making the same update in multiple places later.
A good order to work through is:
Buttons — colour, text colour, padding, and link actions.
Heading colours — any headings using a brand accent colour.
Background colours — section by section.
Images — swap out all placeholder images.
Text — update the written content last.
💡 Think of it like painting a room. You work in layers, finishing one type of change before moving to the next — not cutting in on one wall, rolling another, and then going back to the first.
Setting Up Global Typography
Before making any other changes, set up your global typography. This controls your headline font, body font, default text colour, and link colour across the entire page in one step.
Click Typography in the top bar of the editor.
Choose your headline font from the available options, or upload a custom font.
Choose your body font (this controls paragraph text).
Set your default text colour.
Set your link colour — this is a good place to use a brand accent colour if you have one.
⚠️ Typography settings apply to the page you are currently editing. You will need to repeat this step when you open each new page in your template.
Customising Buttons
With your typography set, move on to buttons. It is more efficient to get one button looking exactly right and then duplicate it, rather than manually updating each button individually.
Changing Button Colour and Text Colour
Click on a button to select it.
In the settings panel, scroll to Background Colour and choose your brand colour. If you have already set up your brand colours in Alvéya, they will appear here automatically.
The Colour field directly below controls the text colour of the button — set this to suit your background choice.
💡 Once one button is styled correctly, duplicate it and drag it into position wherever you need another. Then update the link on each copy rather than restyling from scratch.
Adjusting Button Width and Padding
Button padding is controlled in the Styles section of the button settings. You can choose to inherit the padding set in the Margin and Padding section of the parent element, or override it with a specific value for that button — for example, 10px top and bottom, 10px left and right.
Setting Button Link Actions
The link settings for each button are found near the bottom of the button settings panel, under Button Actions. From here you can set the button to:
Go to a page — link to another page within Alvéya.
Go to a URL — link to any external web address.
Download a file — trigger a file download when clicked.
Understanding the Page Structure
Before changing background colours, it helps to understand how pages are structured. Every page is built in layers:
Highlight colour | What it means |
Green | Section — the outermost container for a group of content |
Blue | Row — a horizontal band sitting inside a section |
Purple | Column — a vertical division inside a row |
When you click on any element, it will highlight in the corresponding colour so you can see exactly which layer you are working in. This matters when tracking down where a background colour is set.
Changing Background Colours
Page Background Colour
You can set a default background colour for the entire page in the page settings. Any section or row with a transparent background will inherit this colour. This is useful if your template has a lot of sections sitting on the same base colour — changing it in one place updates everything at once.
Section and Row Background Colours
Most background colours are set at the section level. To change one:
Click on the section (it will highlight green).
Open the General tab in the right-hand panel.
Find the Background Colour field and update it to your chosen colour.
Occasionally, a background colour will be set on the row rather than the section — this typically happens when the row is pushed all the way to the edges of the page. To check:
Click into Layers, then Page in the left-hand panel.
Click on the Section, then the Row within it.
If the Row shows a colour without a red strikethrough, the colour is set at the row level — update it there.
💡 If changing a section background colour does not seem to be working, check whether the colour is actually set on the row inside it.
Changing Text Colours
The most reliable way to change text colour is through the text block settings rather than by selecting text directly. This keeps your formatting consistent across the whole page.
Click on the text box you want to update.
In the General tab, scroll down to the Colour setting.
Update the colour here — this applies to all text within that text block.
The exception is when you want to highlight just one or two words in a different colour. In that case, select only those words, click the text colour option in the inline toolbar, and change just the highlighted text.
⚠️ Avoid using the direct inline colour change for entire paragraphs or headings. It can create inconsistencies that are difficult to untangle later, especially if you need to update colours across the page.
Social Media Icon Colours
Social media icons at the bottom of your page have a limited set of colour options — light, dark, and coloured versions. You cannot set them to a custom brand colour. Choose the version that best complements your design and swap out the existing icon for your preferred style.
Changing Image Overlay Colours
If a section has a background image with a colour overlay (a fade or tint sitting on top of the image), you can change the overlay colour without touching the image itself.
Click on the section containing the background image (it will highlight green).
Open the General tab — you will see the background is set as an image file, along with a scroll setting such as Parallax and a fade setting such as Heavy Fade.
To change the overlay colour, open the Colour tab for that section.
Select your new colour — the overlay on the image will update immediately.
💡 A dark overlay is the most common choice when you need text to be legible over a background image. If the image feels too heavy, try reducing the fade intensity from Heavy to Light Half.
With your fonts, colours, and buttons set, your template is already starting to look and feel like your brand.
If you get stuck at any point, reach out via live chat or submit a support request and we will guide you through.