Menu

Welcome to the SiteBlocks Site Builder

HELP CENTER

Blog posts : "Blocks"

Blog Label Settings
Update the labels found throughout your blog posts such as the comment button, or even the placeholder text in the comments. This is a great way to customize your blog to match your style and personality, or even update the blog terminology to match a different language.

To get started, navigate to the Blog Label Settings from "POSTS" > "Blog Posts" > "LABELS". From here you can view different labels found throughout your blog, you can update them by changing the text in the corresponding text input field. Remember to save your changes once done!

Go Back

 Posted in Blocks

Advanced Blog Settings
To access your advanced blog settings to further customize your blog, go to "POSTS" > "Blog Posts" > "Settings".

 

Full Article Heading Style


You can adjust how your blog titles appear by selecting your preferred site-wide heading style. 

You can edit and view your site-wide headings from "DESIGN" > "Heading / Title Styles". Simply click on the corresponding headers (ex: H1, H2, H3, H4...) to view the current style for that type of header. You can adjust their appearance in the Site Wide Heading Styles editor. 

If you would like your Blog articles to display the H2 heading style, select 'Header 2' from the drop-down menu. 


 

Date & Time Formatting


Choose how you would like your timestamps to display on your blog article posts. You can select from a large variety of formats via the Date format dropdown menu.




 

Blog Notifications


Enter your e-mail address in the input box to receive e-mail notifications when visitors leave a blog comment.




 

Blog Archive


Choose to display the full post or just a summary from the Blog Archive.



 

Go Back

 Posted in Blocks

Favicons
Create or pick from our large selection of favicons to add a great final touch to your site! Adding a favicon to your website can help your visitors locate your website when they have a large number of open tabs or bookmarks in their browsers.


 

What is a favicon?


A Favicon is a small icon or picture that appears in your website's browser. These little icons appear to the left of your Website's title in the browser bar, or in your bookmark bar. You can select from a list of preset icons by clicking on "Select Icon", or upload one of your own (for best results, we recommend uploading a 512x512 pixel .png file or a .svg file). 

For example, this website has a cupcake favicon for a bakery website. Adding a favicon is not only a nice fine detail to add to your website, but it can also make it easy to find your website in their web browser.




 

How To Add A Favicon To Your Website


Adding a favicon to your website is easy with Site Blocks. Simply navigate to the Favicon settings in the Site-Wide Settings menu by going to "SITE" > "Site-Settings" > "FAVICON". From this menu, you can click on one of our favicons from the favicon library, or click the "Select File To Upload" button to upload your own favicon.





 

Go Back

 Posted in Blocks

Customize your Website with Header and Footer Blocks
Related Topics: Adding to a Page, What are blocks? , Header Blocks, Body Blocks, Footer Blocks
 


Customize Your Website Using Blocks


SiteBlocks is a template-based editor that gives you more control over the look and feel of your website, where every single block can have its own customized layout and design.

Even though there isn't an option to swap templates, you only need to edit the contents of your header and footer to give your site a new look and feel.


You can set up your holiday, sale, or special event headers and footers and easily swap them into your page for the short or long-term by creating new Header and Footer blocks. For step-by-step instructions, please see the following video on  customizing your website with Header, Footer, and Body Blocks:






Please see the locations highlighted below to get started on changing the appearance of your website:

 

Update your Header Block 

  1. Hover your mouse near the top of the page, the header will be outlined in green.
  2. Click the header name "Header A" to access the header toolbar.
  3. Quickly swap different styles by selecting "Header A", "Header B" or "Create a new header" to create a new style.
For more information on how to swap, edit, and remove header blocks please see our wiki article on Header Blocks.

 

Update your Footer Block

  1. Hover your mouse over the bottom of the page, the footer will be outlined in red.
  2. Click the header name ("Header A") to access the header toolbar.
  3. Quickly swap different styles by selecting "Footer A", "Footer B" or "Create a new footer" to create a new style.
For more information on how to swap, edit, and remove a footer block please see our wiki article on Footer Blocks.

 

Update Site-Wide Styles


Click 'DESIGN' to access the global style options. Update your background, fonts, links, button styles, and more by exploring the submenu options located in this menu.


 

Go Back

 Posted in Blocks

Body Blocks
Add your main content to the body of your page. Body Blocks are blocks located in the body section of your page. When editing your website, this section can be identified by the purple outline when hovering your mouse over the page.





To move or style your block, see the Body Block Toolbar by hovering your mouse over the block and clicking the purple "Body Block" toolbar in the top right corner. From here you can select from the following:


Style: Adjust the background, border and padding of your block.

Move Up: Click to move your block one block higher on your page.

Move Down: Click to move your block one block lower on your page.

Toggle Width: Click to toggle between a wider and narrower block.

Duplicate: Make copies of your block by duplicating your block to the same page, or other locations by selecting this option.

Remove: Permanently remove the block from your page.


 

Go Back

 Posted in Blocks

Header Blocks
Give your visitors a great first impression by adding a header. The header of your page is a great location to add your navigation menu, logos, contact information, and anything else you would like your visitors to see when first visiting that page.
 

Headers can be saved and used on multiple different pages in your website. Don't want the same header on all of your pages? No problem! You can style and save multiple different headers, and optionally disable the headers on your page as well.

 

Adding To A Header


The header of your page can be found at the top of your page. When hovering your mouse over the page, this section should be outlined in green.




You can select which header you would like to add your content to by clicking the Header Toolbar that will appear at the top of the green outline. By default, there should be a "Header A", "Header B" you can add to. For example, If you would like to create a new Header style, select the "Create a new header" option from the Header Toolbar.





You can drag any elements, columns or blocks you would like to your header. If you would like to learn more about how to add content to your page, please see our wiki article on Adding To A Page. As a side note have a selection of pre-made Header Blocks in the "BLOCKS" section of the main toolbar that we welcome you to try out by dragging into the Header Block section of your page.

To move or style your block, see the Header Block Toolbar by hovering your mouse over the block and clicking the green "Header Block" toolbar in the top right corner. From here you can select from the following:


Style: Adjust the background, border and padding of your block.

Move Up: Click to move your block one block higher on your page.

Move Down: Click to move your block one block lower on your page.

Make Sticky: Sticky blocks will stay in place when a user scrolls, this currently disabled when in the builder. Go to viewer mode to see in in action

Toggle Width: Click to toggle between a wider and narrower block.

Duplicate: Make copies of your block by duplicating your block to the same page, or other locations by selecting this option.

Remove: Permanently remove the block from your page.

 

Go Back

 Posted in Blocks

Footer Blocks
The footer of your page is a great location to add additional contact information about you or your business, or anything else you would like visitors to see at the end of your page!

Footers can be saved and used on multiple different pages on your website. Don't want the same footer on all of your pages? No problem! You can style and save multiple different footers, and optionally disable the footer on your page as well.


 

Adding To A Footer


The footer of your page can be found at the bottom of your page. When hovering your mouse over the page, this section should be outlined in red.





You can select which Footer you would like to add your content to by clicking the Footer toolbar that will appear at the top of the red outline. By default, there should be a "Footer A", or "Footer B" you can add to. For example, If you would like to create a new Footer style, select the "Create a new footer" option from the Footer Toolbar.





You can drag any elements, columns, or blocks you would like to your footer. If you would like to learn more about how to add content to your page, please see our wiki article on Adding To A Page. As a side note have a selection of pre-made Footer Blocks in the "BLOCKS" section of the main toolbar that we welcome you to try out by dragging into the Footer Block section of your page.

To move or style your block, see the Footer Block Toolbar by hovering your mouse over the block and clicking the red "Footer Block" toolbar in the top right corner. From here you can select from the following:

Style: Adjust the background, border, and padding of your block.

Move Up: Click to move your block one block higher on your page.

Move Down: Click to move your block one block lower on your page.

Toggle Width: Click to toggle between a wider and narrower block.

Duplicate: Make copies of your block by duplicating your block to the same page, or other locations by selecting this option.

Remove: Permanently remove the block from your page.

 

Go Back

 Posted in Blocks
7 blog posts