All Collections
Instructions
How to Build a Page from Scratch with Multiple Headers and Footers in SpringBuilder?
How to Build a Page from Scratch with Multiple Headers and Footers in SpringBuilder?

A complete step by step guide and a video tutorial for webmasters and designers to create websites and landing pages with SpringBuilder.

Karen Sahakyan avatar
Written by Karen Sahakyan
Updated over a week ago

Every site has its peculiar structure and a unique set of elements used, and here, at SpringBuilder, you’re the one to set the rules of the game so you’re free to add elements and choose their layout.

SpringBuilder website pages have a common set layout with a Header, Body, and Footer. 

SpringBuilder offers a special feature: multiple headers and footers. If you want to have multiple elements and rows in your header/footer, you can simply choose the desired elements from the Elements section and drag and drop them to the header section.
In other words, you can drag and drop as many elements and blocks as you want to see in your website's header/footer, which will be visible on all pages.

You can see the header outlined in yellow in this image:


There is a set of settings available once you click on the three dots above the block:

Here you can make your header overlapped, i.e. if you add an Image element below the header, upload a background image or a video for the section by setting the opacity and color and making it a cover.

All these settings apply to Footer as well.

In addition, let us introduce you to the Left Panel as well, where you will find:
 
•  the option to Preview how your website currently looks to your audience,
Blocks section, which enables adding designer blocks to your website,
• a wide range of site Elements,
Color tool, to help you make your website more colorful and eye-capturing
• a set of Effects, to visually enhance your website
• Progress Bar, which aims at figuring out the steps you should take to make your SpringBuilder website more professional and practical
Publish app, meant to deal with website versions, testing them out and then pushing them Live.

Make sure to check out the last step to see the progress you've made towards creating a perfect website for you.

Now, once you start to build a page right from scratch and have your vision in your head on how every single element and block should look, all you need to do is figure out how to give a practical solution to your ideas.

As you know, SpringBuilder is based on the drag and drop feature, which means you can simply choose the desired element from the Elements section and drop it wherever you want.
In the same way, you can Undo the changes through Ctrl Z Windows shortcut or Command Z if you are a Mac user. 

Saying wherever we mean hovering over the preferable block and checking the gray line indicating the space the elements can be placed.


The elements can be set both in full width or grid width, that is to say, occupy the whole screen or just the central part of your page respectively.


You can also drag the element in the grid width position to full width and back using the pointer.

Once you’ve picked the element, move it throughout the crafting area and hold for a while to notice the lines. You can place four elements in a row.


To have the elements in the center of your block, in other words in grid width, just move them to the central part and you’ll notice a gray line indicating where you can place them.

In case you want a particular element to stand at full width, drop the desired element to the very right or left sides of your sections.


Let us have a closer look at headers and footers, that play significant roles in the visual impact your website leaves on your site's visitors. The wisely chosen and arranged blocks are not only eye-capturing but are also pretty functional. For instance, you can place such important elements like your website logo or your site navigation in your Header or add your contact info, a Subscription form along with social icons to the Footer.

Please note, that both blocks are fixed for all the pages on your site and there’s only a single Header and single Footer available.

Alternatively, you can also add predesigned blocks from the Blocks section. Just choose the Block type and drag and drop it on your Header or Footer area.

By the way, the width for the given blocks is fixed but once you’ve used a certain block, you can change its width just the way you prefer using the pointer.

All the changes made on your site are being saved automatically, so all you need to do is play around, add preferable elements, and blocks of effects and customize them to meet your expectations and enjoy the creative process.

!Note: SpringBuilder is not being tested on Edge and IE, so we don't guarantee 100% website performance on these browsers. We highly recommend switching to Safari, Chrome, Mozilla Firefox, etc. to avoid any technical issues.

We suggest checking out our Help Section as well for more insightful articles and a bigger view of SpringBuilder and the opportunities available.

Did this answer your question?