Menu

Welcome to the SiteBlocks Site Builder

HELP CENTER

Blog posts : "Elements"

Spacer Element


A Spacer Element is a great way to style your website. Adding space between content can sometimes help organize content and helps avoid having a crowded or busy-looking page. 





Tip: When you hover your mouse over the Spacer Element, arrows located at the bottom of the Element will appear that you can click and drag to adjust the height.


 

Where to Find


This Element can be found in the "ELEMENT" section of the Toolbar.

 

Adding to Website


After selecting this Element, you will be able to choose exactly where you want to add it! Simply drag the Spacer Element to any blue, orange, or purple ribbons that will appear when dragging the Element onto your page.

 

Options


You can optionally "Pin" the spacer to multiple pages to add consistency to the style of your website. Simply select the "Pin" option in your Element's toolbar

To quickly add another Spacer Element, select the "Duplicate" option in the Element's toolbar.


 

Go Back

Custom Code Element


A Custom Code Element is used for adding custom lines of HTML or JavaScript code to your website. This element is great if you want to insert code given to you by another website, or if you just want to write some custom HTML or JavaScript.

 

Where to Find


This Element can be found in the "ELEMENT" section of the Toolbar.


 

Adding to Website


After selecting this Element, you will be able to choose exactly where you want to add it!


 

Adding or Editing your Custom Code


You can access the settings for this Element again by clicking on the "Edit" button on the Element Toolbar. Remember to click "Save Changes" to save your code.


 

Go Back

Title Element

A custom element used for creating visually appealing and highly customizable Titles for your page, paragraphs, images, or any other content!


 

Where to Find


This element can be found in the "ELEMENTS" section of the Toolbar listed under Content.


 

Adding to your Website


You will see all available content locations it can be added to - on the current page only (content locations indicated by the blue, orange, or purple ribbons). 


 

Adding Icons to your Title


In the Element Toolbar, select "Add Icon" to add an icon. This will open the Title Icon Editor where you can click "Add an Icon" to select from our extensive list of icons. Change the color of the icon with the color picker and resize it to your preference using the slider, you can see a live preview of how this will appear on your page. Afterward, simply click "Save" to confirm your change.





Note: If you already have an icon added to your title, you can delete the icon by accessing the Title Icon Editor through the "Edit an Icon" option in the Element's Toolbar and then clicking the Trash Icon next to it. By default, this icon will be to the left of your Title, you can also move it to the right of your title by clicking on the line adjustment icon in the Title Icon Editor.






 

Styling your Title


You can customize the look of your Title in many different ways. If you would like to apply a style to all of your titles site-wide, select the "DESIGN" option in the main toolbar and then "Heading / Title Styles" to open Sitewide Heading Styles. Select the tab corresponding to your Title Element's heading size (H1 to H6). If you are not sure what heading size your Title is, a bubble beside your Title Element will appear with the heading size (H1 to H6) while the Sitewide Heading Styles window is open. By default, this Title is H2 for most templates. Customize your title to your liking and click "Save" to confirm any changes sitewide.

If you are looking to make a quick change to the font or content of a specific Title Element on your page, simply click on the title to edit the title. A rich text edit toolbar will appear when you click on the title where you can adjust the font stylings. To customize the background, border, padding or margin of the specific Title Element, select the "Element Wrapper" option in the Element toolbar to open the Element Styles window.

Go Back

Paragraph Element

A custom element is used for text and/or images. It is for creating generic content blocks where you can place whatever content you wish.
 

Where to Find


This element can be found in the "ELEMENTS" section of the Toolbar listed under Content.

 

Adding to your Website


You will see all available content locations it can be added to the current page only (content locations in orange or purple). 

 

Editing your Paragraph


You can edit your paragraph by simply clicking on the paragraph in the Site Blocks builder. Customize your text, add links, images, and more by utilizing the built-in toolbar.

 

Revision History


You can revert back to an older revision by selecting the 'Revisions' option from the Element's toolbar. From here, select a revision timestamp and then 'Select Revision'.




 

Customize your Content by Editing HTML



Prefer to work with HTML to customize your image or content? No problem! Simply select the "Edit HTML" option from the Element's Toolbar.



 

Go Back

4 blog posts