You can customise the icons in Loopia Sitebuilder by changing their alignment, swapping the icon, adjusting its size and changing its colour. Icons are an important way to get information across – they improve the look of your page and help visitors take in content quickly:
- Better user experience: visitors focus not just on the text but on your site’s visual design too.
- Visual support: icons help draw attention to specific elements with relevant imagery.
- Consistent look: your icons display the way you want on every device, without losing quality.
Blocks with icons
You can choose a block that contains icons from the Block library, including the Headline, About us, Columns, Pricing, Schedule, Why Choose Us and Custom blocks.
Changing icon alignment
- Click the icon to activate its controls. The panel shows the alignment options, with the current one highlighted in grey.
- Click the alignment you want, then click anywhere on the canvas to apply the change.
Swapping an icon
- Click the icon to activate its controls, then click Change icon on the panel to open Icon settings.
- Scroll down to browse every icon in the extended icon gallery, or use the search box if you know what kind of icon you’re after.
- Click Save to confirm.
Repeat for any other icons on the page, then click Publish to make the changes visible.
Note: your changes are saved automatically every two minutes, and whenever you move to another page for editing.
Resizing an icon
Click the icon and drag the handle in the bottom-right corner to adjust its size. To resize every icon in a row at once, hold down Shift while you drag. This also works for the set of social media icons.
Changing icon colour
Your site’s overall colour palette determines the icon colour. To change it, click Design in the top bar in Sitebuilder. On the Colours tab of the Website design menu you’ll see your colour palette – you can either choose a different palette or customise this one to change the icon colour across your site.