Menu

Welcome to the SiteBlocks Site Builder

HELP CENTER

Blog posts : "Basics"

BraveShop Bag
Create a digital shopping bag for your website. This element will allow customers visiting your website to drag and drop-in items for checkout.



Note: You will need to connect your BraveShop Account first if you haven't already done so. For more information on connecting your BraveShop account, please see the BraveShop Products article.

   

Adding to your Website


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

 

Options


For more options for your Element, you can visit the following in the Element Toolbar:


Settings: To customize your Braveshop account settings you will need to access your Online Store panel from your Bravenet account dashboard. From there you will be able to add new products to your online store. The element on your website will update automatically. For more information on managing your Braveshop online store, please see the 'Managing your Store' section in the Ecwid Products article.




Animate: You can add an animation for your Element. This will appear when the visitor first loads your page and the animation will display as your Element appears on the page.




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




Pin: You can optionally "Pin" the element to multiple pages to add consistency to the style of your website.



 

Go Back

 Posted in Basics

BraveShop Search
Add a search box for the products you sell. This element will allow customers visiting your website to easily browse through items in your BraveShop store.



Note: You will need to connect your BraveShop Account first if you haven't already done so.  For more information on connecting your BraveShop account, please see the BraveShop Products article.

 

Adding to your Website


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

 

Options


For more options for your Element, you can visit the following in the Element Toolbar:


Settings: Settings: To customize your Braveshop account settings you will need to access your Online Store panel from your Bravenet account dashboard. From there you will be able to add new products to your online store. The element on your website will update automatically. For more information on managing your Braveshop online store, please see the 'Managing your Store' section in the Ecwid Products article.




Animate: You can add an animation for your Element. This will appear when the visitor first loads your page and the animation will display as your Element appears on the page.




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




Pin: You can optionally "Pin" the element to multiple pages to add consistency to the style of your website.


 

Go Back

 Posted in Basics

BraveShop Products

Display products from your BraveShop Online Store. This element will allow customers visiting your website to select and purchase items. This element will allow you to set up a free 14-day trial if you have never used the Online Store in your Bravenet account before. If you already have a Bravenet Online Store, you can connect this to your website using this element.

Please note, after the 14-day free trial all members will need to select a paid plan to keep the store active. 

For further information on pricing, please see our Services Price List here: ​https://wiki.bravenet.com/Services_Price_List#Web_Tools 

 

Getting Started


1. Add the element to your page

After selecting this Element, you will be able to choose exactly where you want to add it. Simply drag this onto a blue, orange, or purple ribbon that will appear when dragging the element onto the page.


2. Click "Get Started"

You will see a demo store appear on your website, click the hyperlink to get started.





3. Connect or Create a new Store

If you have not set up your BraveShop Online Store yet, click the "Free Trial" button to start a 14-day free trial. If you already have an Online Store in your Bravenet account, this will automatically connect. Otherwise, if you are looking to connect an existing online store from your Bravenet account, you need need to enter your store ID. Please see the 'Connect an Existing Account' paragraph below for further instructions.



Your store is now connected and ready to display your products. We recommend adding the "BraveShop Bag" and "BraveShop Search" if you haven't already done so. Please see the "Managing your Store" section for further instructions on how to edit, add and manage your store products.

 

Connect a Store from a Different Bravenet Account


If you already have a Braveshop Online Store in a different Bravenet account, you will can connect your existing store. In the following steps we will show you were to locate your store ID and then how to connect this to your SiteBlocks website.


1. Open your Online Store

 Under your web services on the account dashboard, click on the Online Store tile to open your Braveshop settings.




2.  Obtain your Store ID

You will see your 8 digit Store ID at the top of the Online Store dashboard. Save this number as you will need it to connect your store in the next steps.




3. Start the Braveshop Products Free Trial

Open your SiteBlocks website and ensure you have added the BraveShop Products element on the page you wish to display your store. When first adding this element from the Element List, it will display the following message with a hyperlink: "Click Here to Setup". Click on this link to get started.




4. Connect with your Store ID

Paste in the Store ID that was obtained in Step 2 then click "Submit".


 


Managing your Store

 

You will need to access your store management panel in order to add, edit, or remove products that are displayed in the Braveshop Products element. Please see the instructions below to get started.
 
1. Open your Bravenet Account Dashboard

Login to your Bravenet Account, or go to "Account" > "Account Dashboard" from your SiteBlocks builder to access the Bravenet Account Dashboard.

 
2. Click on the "Online Store" Tile

 Under your web services on the account dashboard, click on the Online Store tile to open your Braveshop settings.




3. Click "Manage Store" under the Store Control Panel

Click the 'manage store' button to open your Braveshop control panel. ​ This will be the location where you can manage all shop products, pricing, payment methods, etc.




4. Go to "Catalog" > "Products" to view your store products
 

 
4. Add, Edit or Remove Products

From here you can add your product listings, delete the sample products or edit existing products. Please see the highlighted locations for where you can add, edit or delete products.




Looking for more options? The BraveShop Online Store is a robust software with many different options. It supports many different payment options, it supports different product shipping options and allows for sales and promotions.

We highly encourage you to explore the complete help documentation here to learn more: 
https://help.shopsettings.com/hc/en-us

(Please note the "Instant Site" feature mentioned in this documentation is not applicable to the BraveShop Online Store).

 

 

Options


For more options for your Element, you can visit the following in the Element Toolbar:


Settings: To customize your Braveshop account settings you will need to access your Online Store panel from your Bravenet account dashboard. From there you will be able to add new products to your online store. The element on your website will update automatically. For more information on managing your Braveshop online store, please see the Managing your Store paragraph above.

You can connect to a different account by Navigating to "Settings" in the Element's Toolbar. You will be brought to ta window where you can enter a different BraveShop ID. Please see the 'Connect a Store from a Different Bravenet Account' section above for further guidance.




Animate: You can add an animation for your Element. This will appear when the visitor first loads your page and the animation will display as your Element appears on the page.




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




Pin: You can optionally "Pin" the element to multiple pages to add consistency to the style of your website.


FAQ

Why Does my BraveShop store say it is Closed for Maintenance?


If your Braveshop store is displaying a closed for maintenance message such as the one below, it is likely because you need to renew your online store plan. When starting your store, each member is given a 14 day free trial and once this trial has expired, you will need to purchase a plan to continue using the store. 

For further information on pricing, please see our Services Price List here: ​https://wiki.bravenet.com/Services_Price_List#Web_Tools 


You can renew your store by simply logging into your Bravenet dashboard and clicking on the "Renew" button found on the Online Store tile.



Follow the prompts to select your plan and check out. 



Please reach out to our support team at support.bravenet.com if you have any questions.

 

Go Back

 Posted in Basics

Free and Premium Plan Limits

Premium Only Elements


Certain elements are only available on paid plans. Upgrade today to access the following elements within SiteBlocks.
  • Before/After
  • Audio Player
  • Disqus
  • eBay Items
  • Custom Code
  • PayPal
  • Social Media Buttons
  • Video
  • Vimeo


Premium-only Settings/Functionality


Certain menu items and settings are only available on paid plans. Upgrade today to access the following elements within SiteBlocks.
  • Modify header
  • Meta tags (i.e. keywords, description)
  • Modify sitemap
  • Modify robots.txt
  • Upload favicon
  • Google Analytics
  • Website redirect
  • Site Manager
 

Premium Limits


Statistics
Statistics Top Pages: 300 results
Data History: 3 years


Blog
Daily Posting Limit: 10 per day
 

Go Back

 Posted in Basics

Style Your Website

Background and Width


You can set the background for your website to a solid color, pattern, or of an image of your choice. You may also want to set a maximum width for your website or disable this option to leave the width fluid. To control these settings, simply navigate to the 'DESIGN' menu and then visit 'Background and Width'.

 

 

Set a background color by selecting the color picker by clicking on the color square, or by typing in a hex color value of your choice. Optionally, you can set a pattern to display on top of the background color by clicking the 'Pattern' button, or, click 'Image' to choose an image from your uploaded images or stock photo library to display as the background.





If you have chosen an image background, you can click the 'Settings' button to access a variety of image setting options. You can choose a different scaling setting, or enable the fixed background setting to create a parallax effect.

Tip: Don't see the background color or image appear after saving? Any blocks that have their own background will cover the main website background. You can remove the block's background by going to the 'Style' menu and setting the color to transparent from the block's toolbar, then your website's background should be displayed behind that block.

To change your website's maximum width, navigate to the website width section of the style menu and click the checkbox to enable the maximum width, then use the slider to set a maximum width in pixels. Alternatively, you may leave this option unchecked to have no maximum width, allowing a more fluid effect (this is useful for users with widescreen sizes).
 

 
Set a Maximum Width
 
 Fluid Width (No Maximum Width)


If you wish to have a margin on the left and right-hand sides of your pages, you can achieve this look by navigating to the website margin section of this style menu and using the slider to set a margin in pixel units.




 

Base Font Style


You can set a default font for your website by navigating to 'DESIGN' and then 'Base Font Style'. This can be useful if you have the desired font style, size, or color in mind that you wish to have the majority of your content on your website appear in. While all fonts are fully customizable in each block, your base font is the default font that will initially be set for your blog post or paragraph content (and other locations across your website).





Choose a font family and adjust the font to your liking by adjusting the size, letter spacing, line height, and font color.


 

Heading /Title Styles


There are 6 title styles you can set for your website. When setting a title in the title element or the Paragraph element, you can choose from Heading 1, Heading 2, ..., Heading 6. In order to change the font style, sizing, spacing, or color, for a particular header, you can do so by navigating to the 'DESIGN' menu, and then select 'Heading / Title Styles'. From here, you can select the header you would like to edit by selecting the correct tab in the style menu (tabs H1 to H6).





Tip: Not sure which heading style your title is in that you are looking to change? Navigate to the page your title is on first, then open the Heading / Title Styles menu. Once the menu is open, there will be a bubble indicating which header is in use (H1 through H6). 


Link Styles

Choose your default link style by navigating to the 'DESIGN' menu and then 'Link Styles'. From here, you can set a font style, size, and color. The font styling under the 'REGULAR' section will be the default style for any unvisited links. Optionally you can also change the style under the 'HOVER' section to change the appearance of the link styling when a visitor hovers their mouse over the link. Lastly, you can change the appearance of visited links from the 'VISITED' section.




 

Button Styles


When creating a button for your website, you are given many different button styles that are provided with your template to choose from. All of these button styles are fully customizable. To customize a button style, go to the 'DESIGN' menu and then 'Button Styles'. There are many customization options for the button, adjust everything from the font, shape, size, and color of the button. You can even set a hover style so your button changes styles when your visitor hovers their mouse over the button by adjusting the 'Hover Style' options from this menu. Lastly, remember to save your changes to apply them.





 

Form Styles


There are various locations throughout your website where you may have input forms, including Contact Form elements, blog comments, visitor comments, and search bars. You can completely style all components to a form including the input fields, labels, titles, and the validation text that appears after submitting input. In order to style your form, go to the 'Design' menu and then 'Form Styles'.

Visit the corresponding tabs in the Form Styles menu to style the following:
  • Input Fields
  • Input Labels
  • Validation Text
  • Submit Button
  • Checkbox/Radios
  • Title Text
  • Paragraph Text
Tip: Want to quickly add a Contact Form with a unique style? Visit the Contact Forms section of the 'BLOCKS' menu to add a pre-designed contact form to your page.
 
 

Go Back

 Posted in Basics

Adding Video Backgrounds
Set video backgrounds on your website to increase visit time and impress your visitors. Video backgrounds can be useful to add to your landing page, the home page, or splash pages.

Tip: Make your video ready to show on desktop websites. By default, most mobile web browsers disable videos by default, so it's best to make these ready for larger screens.

Once you have your video ready to go, simply add it as a Block's background from the Block Style Editor. We currently accept videos with the .mp4 file extension so please make sure it is in the correct format before uploading. You may also link to an external .mp4 file. For best quality, ensure your video resolution is high enough for a standard website page, because small videos may appear blurry on a large webpage.

 

 

Where to Find


Edit your website and locate the Block you would like to add a video background to. In the Block's Toolbar click 'Style' to open the Blocks Style Menu. From here, you can click the folder icon to access the Photo and Media Manager, where you can select your video, or upload your video if you haven't already. Optionally, if you want to link to the video, simply paste the full URL for the video in the input field.



Tip: Add a spacer element to your block to adjust the height to accommodate the video.

 

Video Thumbnails


Once you have selected your video, you will have the option to select an image for the video's thumbnail by clicking on the corresponding folder icon. A thumbnail is a still image that is displayed before a video starts playing. It's like a preview or a snapshot of the video. This image is shown to viewers while the video is loading, or on some devices that do not support video backgrounds.
 

Click the folder icon to select an image.
Click on the thumbnail image to change or edit it.



 

Go Back

 Posted in Basics

Linking your Content
Adding links can help you share different types of content such as websites, images, or different pages on your website. You may want to add links to your paragraph elements, blog posts, or anywhere you are adding content. This article will guide you through the basics of how to create a link using our text editor.





You can link your content to many different locations. To get started, highlight the text you would like to add a link to, and then click the link icon in the text editor toolbar to add/update the link for your content.


 
From here, you can select from the following options:

Link to a Page: Select a pre-existing page from your website to add to your Button.

Link to a File: Add a file from your Photos and Media Manager.

Link to a Website: Paste in the complete URL of a website.

Link to an Email: Have your visitors send a message addressed to your email through their local email client to contact you.

Link to Blog Page: Create a page for your blog or type in the existing URL.





 

Go Back

 Posted in Basics

Animation Library
Add some extra attention to details on your website by adding animation to your content containers or elements. Animations can be useful if you would like a particular logo, title, video, or picture to 'fade' or 'slide' onto the screen when the page loads (or select a continuous animation).
 
























We welcome you to try out our animation library. Our animation library is divided into different tabs. Browse across our 'subtle', 'moderate', 'loud', and 'attention' categories, to find an animation of your liking.


 

How to Add an Animation


You can access our animation library by selecting the 'Animation' option found throughout our Column and Element toolbars.

 
 



How to Remove an Animation


To remove an animation, simply navigate to the animation library using the steps above, click the 'No Animation' button near the right-hand side, and 'Save'.

 

Go Back

 Posted in Basics

Icon Library
Add an icon to your website to catch your visitor's attention. We encourage you to explore our large library of creative and fun icons. We might have just what you are looking for!




 


Where to Find


You can add an individual icon to your page with the use of the Icon Element. Access the Icon Editor by clicking "Edit" in the Element's Toolbar to search and browse from our large collection of icons. For further information, please see our Icon Element article.

Append an icon to your Title Element by navigating to the 'Add an Icon' option in your Title Element's toolbar.


 

Choosing your Icon


Browse our Icon Library by searching for a keyword to see related icons. There are many different Icon Sets (sort by Icon Set by selecting one from the Set dropdown). If you like the design of an Icon, hover your mouse over that icon to view the set and style class it belongs to.

Filter by the icon set to see other similar icons. We have 3D, colored, black-and-white and thin or heavy outline styles, and many more. Optionally, you can choose a style from the Style dropdown to filter by style.





 

Options


When a visitor clicks on your icon, you can add a link to another location through the "Link" option in the Element's Toolbar.

You can optionally "Pin" the icon to multiple pages to add consistency to the style of your website. Simply select the "Pin" option in your Element's toolbar. Or, add it to your header or footer to be copied across all of your pages that have that header enabled.

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

Go Back

 Posted in Basics

Blocks, Columns, and Elements
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 surrounding 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 surrounding 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, which will bring up a style editor. There are many options 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, which 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, which 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 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 a row. Having multiple columns in 1 row is a great way to space your content across your page.


An empty column will appear as an empty content container. Click 'Add Content' or simply drag existing elements into the box from other locations on 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 on the right-hand side of your element.





You can stack multiple elements inside 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 / Columns, 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, e-commerce, 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 by 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 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. 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 the 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 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

 Posted in Basics

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 to 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

 Posted in Basics

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

 Posted in Basics

Building Your First Website
Related topics to help you get started: What are columns? ,  What are blocks? , Customizing your site with blocks ,  How 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 simply drag and re-order your pages, delete pages, or else edit 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

 Posted in Basics

Adding To A Page

Adding A Block

 
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, which 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 create 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 the 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

 Posted in Basics
14 blog posts