Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

6 tips for designing pages in Website Builder

In Website Builder there are several ways to work with images, get them aligned and position them exactly where you want them. Check out these videos with tips and tricks.


Tip 1 - Use the space adjuster
Tip 2 - Use the guiding lines
Tip 3 - Add text and images on top of existing elements
Tip 4 - Wrap text around your images
Tip 5 - Place elements on different layers
Tip 6 - Use the red squares to find overlapping elements



Tip 1 - Use the space adjuster


The space adjuster are two horizontal grey lines, placed above and under the component you select on your workspace. Just drag the lines to expand or decrease the area of your component.

By adjusting these lines for the background component, you can move several elements at once.




See how you can use the grey space adjuster to make room for new components.




Tip 2 - Use the guiding lines


The guiding lines help you position images and elements precisely. They appear automatically as dashed lines when you start moving a component on your work space. Use them to perfectly align images or other components on the website you are making.

And no worries, the guiding lines will not show on your published website.






Tip 3 - Add text and images on top of existing elements


You can easily add text and images on top of each other. Just drag new components to your workspace, and use the guiding lines to align them.







Tip 4 - Wrap text around your images


See how you can wrap text around images. Simply add the background component, and use it to control the wrapping.






Tip 5 - Place elements on different layers


In Website Builder you can place components on different layers. You can quickly change the component's position by clicking the Change depth icon.

Choose between the options: Move to front, Move forward, Move backward and Move to back.






Tip 6 - Use the red squares to find overlapping elements


The transparent red square, tells you that there are overlapping elements. Remember that the red square is just a helper while you are working, and will not be published on your website.