Articles in this category

GOOD STUFF!

Building a page from scratch with Subbly

Every site has its peculiar structure and a unique set of elements used, and here, at Subbly, you’re the one to set the rules of the game so you’re free to add elements and choose their layout! Unleash your creative self and let's get things crackin'.

How to build a page?

If you're looking for some ready-made templates that will kick-start you instantly without having to build everything from scratch, please check the library of 50+ free templates Subbly offers HERE. 

Before you proceed to read through these instructions, perhaps you'd want to set aside a quick minute to take a look at our video instructions on how to get started with the website builder.

 

Website Builder basics

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

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

• Colors tool, to help you make your website more colorful and eye-capturing

• a set of Effects, to visually enhance your website along with the

• progress bar, that aims at figuring out the steps you should take to make your website more professional and practical

The progress bar is here only for orientation purposes and you shouldn't be worrying if you didn't tick all the boxes in it. It's only important that you're satisfied with how your website looks to the public.

Once you start building a page from scratch and have a vision in your head of how every single element and block should look, all you need to do is just figure out how to give a practical solution to your ideas. 

Building your own template

As you know, Subbly's website builder 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. Just the same, you can undo the changes made by hitting Ctrl+Z  if on Windows or Command+Z if you are a Mac user.

All changes you make to your site are automatically saved once made and you don't need to save them manually. However, if you have Site Provisioning and Caching enabled, you will need to publish your site's pages if you want them live.

When we say that you can drop your elements wherever you want on a blank canvas, we mean that. It's as simple as hovering over the preferable block and checking the grey line indicating the space in 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 canvas area and hold for a while to notice the lines. 

For best performance, we suggest placing a maximum of 4 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 grey 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 side.  

For more information and a video explanation of how headers and footers work, make sure to check the article HERE. 

Let us have a closer look at headers and footers, which play significant roles in the visual impact your website leaves on your site's visitors.

Wisely chosen and arranged blocks are not only eye-catching but are also pretty functional. For instance, you can place such important elements as your website logo or your site navigation in your Header or add your contact info, and a subscription form along with social icons to the Footer. 

Alternatively, you can also add pre-designed 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.

Please note that the Pages element, mainly used for setting the site's navigation bar in the header, automatically reverts to the burger layout on mobile view, but only if it's included in the site's header.
Subbly website builder was not tested on IE, so we don't guarantee a 100% website performance on this browser. We highly recommend switching to Safari, Chrome, Mozilla Firefox, etc. to avoid any technical issues.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free