Menu

Blog posts : "Basics"

When editing a new Site Blocks website, it can be very helpful to familiarize yourself with Blocks, Columns, and Elements. 


 

Video Tutorials

 

Please see our videos for a detailed walkthrough on how to add, style and edit Blocks, Columns, and Elements on your new SiteBlocks website!

Part 1: How to Add Blocks, Columns, and Elements
 
 

Part 2: Style & Edit Blocks, Columns, and Elements



 

Overview



See the pictures below to understand where each structure is located:



Blocks


Blocks are the main containers that hold your website content and offer a convenient way to group your website content into different sections.  Body blocks are the main blocks that make up the body of your page and are indicated by the purple outline when editing your website. 

Note that all elements and columns on your page will always be inside of a block. If you add a single element to an empty page, this will automatically create a block to hold the element.





There are also special blocks meant for the header and footer of your pages.

Header blocks are located at the very top of your page and can be used to create a header for your website. These can be identified by the green outline surounding the block while editing your site.




Footer blocks are located at the bottom-most part of your page and can be used to create a footer for your website. This is a great place to put additional information about your company, organization, or contact information. These can be identified by the green outline surounding the block while editing your site.




You can create multiple different styles of headers and footers for different locations on your website, or for different events/time of the year. For complete information on how to use Header and Footer blocks, please see our articles on Header Blocks and Footer Blocks.

 
Creating New Blocks

Create a new block by adding an element, column, or premade block (located in the Blocks menu) onto a purple ribbon that appears when dragging an item onto your page.

If you add a single element to an empty page, this will automatically create a block to hold the element. To do so, navigate to the Elements menu and drag-and-drop a new element onto a purple 'New Block' ribbon.




You can also drag empty columns into a new block section to create a new block.
 


We also have a large variety of pre-made blocks you can add to your page. You can find these from the 'Blocks' menu.
 
 

Blocks Menu


Access the blocks menu to style, move or copy content.

Styling A Block

To style an already existing block on your website, hover over the block with your cursor until you see a purple "Body Block" border dropdown appear. 

Click on the purple "Body Block" dropdown, and a menu will appear. You will see a Style option, where it will bring up a style editor. There are many option to choose from, including background, padding and font styling options.


Duplicating A Block

To duplicate an already existing block on your website, hover over the block with your cursor until you see a purple "Body Block" border dropdown appear. 

Click on the purple "Body Block" dropdown, and a menu will appear. You will see a duplicate option, where it will bring up a "Duplicate Container" window asking where you'd like to move the block. You may add the duplicate block to your current page, or another page on your website. You will then be taken to the duplicated block, where you may move it up or down the page.


Editing A Block

To edit an already existing block on your website, hover over the block with your cursor until you see a purple "block" border dropdown appear. 

Click on the purple "block" dropdown, and a menu will appear. You will see a style option, where it will bring up a "Block Styles" window. From here you can change the background color of the block, the font color, add an image, or change the padding and borders.


Moving A Block

To move an already existing block on your website, hover over the block with your cursor until you see a purple "block" border dropdown appear. 

Click on the "block" dropdown, and a menu will appear. You will see a "move up" and "move down" option. Selecting these options will move the block up or down the block next to it. 


 

Columns & Rows


Inside of the blocks are rows of columns. You can find columns by looking for the blue menu on the right hand side of your content. Columns act as the content container that will hold your elements. You can have 1 single column across one row of your page, or have up to 6 columns in row. Having multiple columns in 1 row is a great way to space your content across your page.


An empty colum will appear as an empty content container. Click 'Add Content' or simply drag existing elements into the box from other locations in the page or new elements from the Elements Menu.




If the column already has content inside of it, you can see the column and access the Column Menu from the blue bar that appears of the right-hand-side of your element.




You can stack multiple elements inside of one column. Simply drag the elements onto any of the available orange ribbons within that container.

 

 
Creating New Columns & Rows
 
Create a new column by adding an element, or an empty column / row (located in the Blocks menu) onto a blue ribbon that appears when dragging an item onto your page.

To add empty Rows / Colums, navigate to the 'BLOCKS' menu:



Add an Element to a blue ribbon to create a new row for the Element:



Removing Columns & Rows

To remove a column, simply navigate to the blue column menu and select 'Remove Column'. Please note, this will remove all elements inside of the content which is not reversible.
 

 

 

Elements


Elements make up the content on your page. You can identify them by the orange border surrounding them when in the editor. Select from our wide range of media, ecommerce, blogging and social media elements to create a beautiful modern website in Site Blocks.

 

Adding An Element

 
If you want to add an Element to your website creating your own personalized block, look to the side menu and select "Elements" this will open up a panel with all the elements that you may use for your website.

Scroll down the list to find the element you want to use, or search from the search bar at the top of the list, if you already know what you are looking for. 

Grab and drag with your cursor which element you'd like on your website until you see orange and blue lines appear on your website block. The element will load in where you released it.
 



Moving An Element

 
Drag the element to the desired location and note the orange color of the content location area to be sure you're adding it to the currently edited page. 
 



Duplicating An Element

 
Option 1: Hover over the element until the orange dropdown appears. Element menu will pop open, where you will see a "duplicate" option.  A window will open allowing you to choose which page you'd like your element to go to.



Option 2: Quickly duplicate an element by hovering over an element until an orange dropdown appears. Hold down Shift and click and drag with your cursor until you see orange and blue guides appear. Let go of element, then let go of Shift key.




Editing An Element

 

Hover over the element until the orange dropdown appears. Element menu will pop open, where there will be multiple editing options. Depending on the element you are editing, you will be able to add animations, add a link, edit the style, and much more.

For instructions on how to edit a specific element, please select it from our Elements help page.




 

Go Back

What Are Blocks?

We welcome you to take a look at our extensive collection of pre-made blocks. Blocks are a great way to add both structure and style your website. You can add blocks to the header, body, or footer block sections on your page.



Adding Blocks to a Page


To see our complete instructions on how to add Blocks to your website, please see our wiki article on Adding To A Page.


Blocks Categories

Blocks are organized into different categories. You can select from our pre-made blocks for the header, footer or body of your page. Some of these include pre-designed content for text, slideshows, maps and many of types of media.

To browse all Blocks click on the "BLOCKS" button in the main menu.

Click on a category under the "Choose a Block" menu to browse blocks. You can also use the scroll bar to browse or use the search bar located at the top to search for a particular block.






 

Go Back

Organizing Your Pages

Editing a Page

You can edit a page by Accessing The Website Editor. To manage your Page Settings click the "PAGES" button located in the main toolbar, then click the cogwheel icon.




Changing Your Navigation

To change the names of your pages to match your desired website, simply go to the left side menu, where you will see Pages. You should see the list of all the current pages that are on your website. From here you can add a new page to your site, or hover over one of your pages until you see a cogwheel icon, move your cursor over the icon, and choose Settings. A new window will open, allowing you to rename the page that you clicked on. Save your changes and you're done.




Adding A New Page To Your Website

To create a new page for your website, simply go to the left side menu, where you will see Pages. You should see the list of all the current pages that are on your website. From here you can add a new page to your site, by selecting "Add New Page". Give your new page a name, save your changes by clicking "Create Page" and you're done.

Go Back

Related topics to help you get started: What are columns?What are blocks? , Customizing your site with blocksHow do I publish my website?Uploading files using the file manager


Creating Your First Website

This page will take you through the process of creating your first website builder site from the beginning, assuming you haven't already built a page. The purpose of this section is to break down the process step by step for those of you who would like help at each stage. We welcome you to browse the related articles listed above to help you get started.


Step 1: Choose a Template
Immediately after completing registration, you will be given the ability to select your Template. Simply mouse over the template you would like to use and click the "Install" button. 

Note: Please make sure you have chosen the template you like as this template is permanent and cannot be changed later.



When you hover your mouse over the template thumbnail, you will be presented with the option to "view as a preview" or "use this site" if you are sure you would like to use that template.

Step 2: Choose a Domain
You can create a website with a domain you have already purchased, or a new free SiteBlocks subdomain.


Step 3: Editing a Page
Now that you have become familiar with what makes up a website builder page and what tools are available to you, we can now modify it to suit your needs. Replace any imagery by double-clicking on the default photos. Replace any default text with your own. To change the site styles, like colors, fonts, buttons, etc. choose Design in the left side menu. Or add any extra Elements or Pre-built blocks from the left side menu.

For more details on adding elements and blocks, please see our article on Adding To A Page.

Step 4: Changing Your Navigation
To change the names of your pages to match your desired website, simply go to the left side menu, where you will see Pages. You should see the list of all the current pages that are on your website. From here you can add a new page to your site, or hover over one of your pages until you see a cogwheel icon, move your cursor over the icon, and choose Settings. A new window will open, allowing you to rename the page that you clicked on. Save your changes and you're done.



To change the order of your web pages on the main navigation, hover over your navigation in the header of your website until you see the orange dropdown called "Nav Style 1".  Choose "edit menu items" and a new window will pop up listing all your current pages on your website. From here you may simple drag and re-order your pages, delete pages, or else editing your page labels.


Step 5: Viewing Your Site Statistics and SEO
Now that your site is live, you may want to view your website's statistics and SEO (Search Engine Optimization) every now and again. To do this select Site on the left side menu where you will be given all of your statistics and be able to choose your metatag keywords for SEO.

For more information on configuring your website SEO, please see our wiki article on Page Settings.


Next: Learn how to edit and style your page with Blocks, Columns & Elements.

Go Back

Adding To A Page

If you want to add one of our pre-made blocks to your website, look to the side menu and select "Blocks" this will open up a panel with all the prebuilt blocks that you may use for your website.
 




Choose a category to be taken to the blocks that match your specific needs, or scroll down the list to view them all. You also may use the search bar at the top of the list, if you already know what you are looking for.




Once you found the block that matches your needs, simply grab and drag the block to where you want it on your website. You will see a purple "New Block" bar on your webpage showing where it will be placed.

 


Moving A Block

To move an already existing block on your website, hover over the block with your cursor until you see a green "block" border dropdown appear. 

 


Click on the "block" dropdown, and a menu will appear. You will see a "move up" and "move down" option. Selecting these options will move the block up or down the block next to it. 







Duplicating A Block

To duplicate an already existing block on your website, hover over the block with your cursor until you see a green "block" border dropdown appear. 
Click on the green "block" dropdown, and a menu will appear. You will see a duplicate option, where it will bring up a "Duplicate Container" window asking where you'd like to move the block. You may add the duplicate block to your current page, or another page on your website. You will then be taken to the duplicated block, where you may move it up or down the page.




 


Editing A Block

To edit an already existing block on your website, hover over the block with your cursor until you see a green "block" border dropdown appear. 
Click on the green "block" dropdown, and a menu will appear. You will see a style option, where it will bring up a "Block Styles" window. From here you can change the background color of the block, the font color, add an image, or change the padding and borders.






Adding An Element
If you want to add an element to your website creating your own personalized block, look to the side menu and select "Elements" this will open up a panel with all the elements that you may use for your website.

Scroll down the list to find the element you want to use, or search from the search bar at the top of the list, if you already know what you are looking for. 





Grab and drag with your cursor which element you'd like on your website until you see orange and blue lines appear on your website block. The element will load where you released it.


 

Moving An Element

Drag the element to the desired location and note the color of the content location area to be sure you're adding it to the currently edited page, or all pages. 


 

Duplicating An Element

Option 1: Hover over the element until the orange dropdown appears. The element menu will pop open, where you will see a "duplicate" option.  A window will open allowing you to choose which page you'd like your element to go to.

Option 2: Quickly duplicate an element by hovering over an element until an orange dropdown appears. Hold down Shift and click and drag with your cursor until you see orange and blue guides appear. Let go of the element, then let go of the Shift key.


 

Editing An Element

Hover over the element until the orange dropdown appears. The Elements Menu will pop open, where there will be multiple editing options. Depending on the element you are editing, you will be able to add animations, add a link, edit the style, and much more.

Go Back

5 blog posts