Once you've created a new website on SpringBuilder, the system will automatically generate a free subdomain like mysite.springbuilder.site that will be available to the public right away.
To access your website's design mode and start making changes, you simply need to add a /design at the end of your site's URL: mysite.springbuilder.site/design.
The Editor Tools
Easily access these Editor Tools via the Left Panel!
Preview - Leave the Design Mode to preview your website in Public Mode for the Desktop, Tablet, and Mobile views.
Dashboard - Make use of the handy apps to manage your website Pages, set up SEO, connect your custom domain, access 3rd party integrations, and much more.
Blocks - Discover predesigned blocks, with specific elements and layouts, created to help you build your website quickly. To add a block, drag and drop it to your preferred place.
Elements - The elements are customizable widgets that can be added to your page. These include Image, Image Slider, Gallery, Title, Paragraph, Video, Icon, Logo, Button, User Account, and Blank Space. To use an element, drag and drop it to where you like.
Colors - Create a custom color palette. You can drag and drop your custom color on a button, text, block, column, or page background to apply.
Effects (fx) - The effects aesthetically enhance your website. They are divided into four sections: Fade In, Rotate, Parallax, and Affix. To apply, drag and drop them on different elements, blocks, or background images.
Progress - A beginner-friendly checklist designed to help you complete the Basics. The Basics include: Add Your Logo, Edit Your Content, Use Blocks, Change Colors, and Add Elements. Once you've mastered the basics, complete the Advanced and Additional steps recommended for webmasters or designers.
Undo - Use this function to reverse an earlier action. You can also access this function through the Ctrl+Z or Command+Z shortcuts. After you refresh your page, all the changes you made will be saved and you won't be able to Undo actions done before the page refresh.
Help - You'll be redirected to our Help Desk. If you need further assistance, contact us directly via the Live Chatbox, located in the lower right corner.
Latest Synchronization - The Track Synchronization button, which is the blue checkmark located at the bottom of the Left Panel, shows the last syncing operation time. All the changes made on your page are automatically saved, so your site will go live without publishing.
Tablet and Mobile Versions
This option gives you a chance to edit your website for different devices and optimize it for tablet and mobile screens. Click on the Monitor icon to choose the version you'd like to edit: Desktop, or Mobile.
Keep in mind that all the changes made in the desktop version of your site will be applied to the mobile version as well. However, if you edit anything on the mobile version, it will only be applied to the mobile version.
If you want to simultaneously delete an element from all the Design modes, you'll need to delete it from the version where it was first created.
Duplicating method
You can also duplicate Elements/Blocks and set the visibility for one of them to Desktop only, while the other one on Mobile. That will allow you to edit the looks of your Website without affecting the Desktop version.
To do so simply:
Duplicate the Element/Block. You can duplicate items on your website by holding Ctrl C/Command C and dragging them to a new position.
Change the visibility for the first Element/Block to Desktop only.
Change the visibility for the second Element/Block to Mobile/Tablet only.
Edit your Desktop and Mobile view individually.
You can read more about managing Visibility Settings of Elements and Blocks in this article.
How to duplicate Elements/Blocks
To duplicate an Element simply press and hold Ctrl C/Command C and drag the Element to a position you intend it to be.
How to duplicate Blocks
Similar to Elements, you can duplicate entire Blocks. Just hold Ctrl C/Command C and drag the block above or below.
How to add Elements next to each other horizontally
Here is a short tutorial on how to add Elements next to each other horizontally. Simply drag one of the Elements and move it to the edge of the block until you see a single big grey line appear, indicating that you will add a new column to your block.
It might happen that your Elements do not align next on the same line at first. To fix that simply right-click on one of the Elements and change Vertical Alignment settings to match the other Element.
