Editing Text on Your Page
Clicking on any text element on the page opens it for editing — simply start typing to replace the placeholder content. Each text box will show a label (Heading, Subheading, or Paragraph Text) to help you identify what type of content it holds.
💡 Templates are a starting point, not a fixed structure. You are welcome to add, remove, or duplicate any section to suit your business.
Changing Font Size, Weight, and Style
With a text box selected, you will see formatting controls appear in the right-hand panel. Here is what each setting does:
Font size — measured in rem by default (1 rem ≈ 16 pixels). Switch to pixels if that is easier to work with.
Font weight — controls how bold or light the text appears.
Line height — adjusts the space between lines of text within the same paragraph.
Text transform — choose from Uppercase, Lowercase, or Capitalised.
Letter spacing — adds or reduces space between individual characters.
Colour — click the colour swatch to open the colour picker and change the text colour.
Font style — switch between your body font and heading font as set in your Typography settings.
Adjusting for Mobile Layout
Always check your page in mobile layout mode after making changes. Font sizes can be set independently for mobile and desktop — so if a heading looks too large on a phone, you can reduce it for mobile without affecting the desktop view.
💡 To set a different font size for mobile, switch to mobile layout mode in the editor, select the text element, and update the font size. The desktop size will remain unchanged.
Duplicating and Rearranging Sections
If you need to repeat a section — for example, to add a third service to a two-service layout — click the duplicate icon (two overlapping squares) on the section or element. This will create a copy directly below the original.
To reorder sections, click and drag them into the position you need. This works for both desktop and mobile layouts.
⚠️ After duplicating or moving sections, switch to mobile layout mode to confirm everything still sits correctly on smaller screens.
Working with Padding, Margins, and Spacing
Spacing is controlled through two settings found in the Styles tab of any element:
Margin — the space outside the element, pushing other elements away from it.
Padding — the space inside the element, between its border and its content.
As a general rule, use margin-bottom to create breathing room between stacked elements. Most of the spacing will already be set correctly in your template — you will only need to adjust this if you have added new elements and they are not sitting the way you would like.
💡 When adding space between a button and the text above it, add margin-bottom to the text element above rather than margin-top to the button. Working downward keeps your spacing consistent.
Column Layout and Content Alignment
When you have a multi-column layout and the content in each column is a different length, you may notice the elements within columns are not aligning the way you expect. To fix this:
Click into the column settings (the column will highlight in purple).
Find the Content Spacing option.
Set the alignment to Left to push all content to the top of the column.
Repeat this for each column in the row.
You can also choose from other alignment options such as Space Around, Space Evenly, or Space Between — which distributes elements differently within the column height.
Adding Borders, Shadows, and Animations
Borders
You can add a border to any text box or element through the Styles tab. Choose to apply a border to all four sides, or unlink the sides and apply it to just the top, bottom, left, or right. Set the pixel width and colour for each border individually.
Box Shadows
To add a shadow to an image or text box, scroll to the bottom of the Styles tab and locate the Box Shadow option. From here you can:
Increase the blur to soften and expand the shadow.
Adjust the spread to change how far it extends.
Change the shadow colour if the default grey feels too strong.
Animations
Any block on the page — text, images, buttons — can have an entrance animation applied to it. Click on the block, open the Animations option in the panel, and choose from the available styles. To remove an animation, select None.
💡 Use animations sparingly. A page with too many animated elements can feel distracting rather than polished. One or two subtle entrance animations on key sections work well.
Working with Images
Image Elements vs Background Images
Images in Alvéya funnel pages work in two different ways, and it is worth understanding the difference:
Image elements — the image is placed as its own block within the layout. The full image is always visible, and its dimensions stay fixed regardless of screen size.
Background images — the image is set as the background of a section, row, or column. The image scales with the width of the screen, which means parts of it may crop or shift on different devices.
To check which type is being used, click on the section or row and look in the General tab. If there is a background image linked there, that is what is controlling the image display.
Changing a Background Image
Click on the row or section where the background image sits.
Open the General tab in the right-hand panel.
Click the image icon to the right of the background field.
Upload your new image or select one from your media library.
Choose a display style: Parallax (the image stays fixed as you scroll) or Full Centre (the full image is displayed centred in the container).
Adding a Fade Overlay
If you have text sitting over a background image and it is hard to read, you can add a fade overlay to darken or lighten the image beneath. In the background settings, switch the fade option to Light Half or Heavy Fade. To change the overlay colour, open the Colour tab for that section.
💡 A dark overlay is the most common choice when text needs to be legible over a busy image. Stick to black at reduced opacity for a clean, professional result.
Replacing an Image Element
To swap out an image that is placed as an image element (not a background), simply click on the image and update the source in the panel. If you would prefer to display a full image in a section that currently uses a background image, delete the background image setting and add a standalone image element into the column instead.
Your Header Section
Your header — including your logo and navigation — is covered in a separate guide. Head to the next tutorial to learn how to update your logo, set up your navigation menu, and understand the difference between website page navigation and funnel page navigation.