When you sign up you will be asked to either enter a website address or create a new free website
This is a guide for when you choose to use our free Website Builder to create your new website. We recommend using Google Chrome.
Builder view
The builder consists of 4 parts:
- Top menu (PURPLE) for device display and page actions
- Center part (RED) where you build your site
- Right menu (ORANGE) for fonts, colors, and adjustments
- Left menu (GREEN) for setting, tools, and elements
Top menu
The top menu shows, first of all, the Cobiro logo which when clicked takes you back to your account.
The next set of icons let you switch device views from desktop to tablet to mobile.
The two bent arrows let you Undo and Redo the latest actions taken on the page you are on.
Publish
This action makes your website visible online. Use also the Publish button regularly when you have made the changes such as long writing text.
Preview
After publishing your site you can click the Preview button to see how it is displayed online. It could take a few minutes for the preview to update the latest changes since you clicked publish.
Center (Canvas)
This area consists of two parts just like an ordinary browser window. The first is the URL given to your site on creation, and the second area where you build will become the actual website. We call this area the Canvas. We decided to give you a simple pre-built site with 2 headers (small and large) and 1 container (Home) which will display all your pages.
START here! When you are redirected to the NEW website builder you will notice a blue square around the Home header. This means that this header is selected and that any actions you take, on left or right menus, will affect only the selected header or element.
You can switch to the header below by clicking on it or go ahead and edit the currently selected header on the right-side menu.
Right menu
The menu on the right is determined by the selection header, element, or button. E.g. you can only change the style of a header, therefore, the link and animate options are not available.
Go ahead and change the height of the header to 100 pixels and change the background color. You can also use an image as the background. We have partnered up with Unsplash to provide you with thousands of free high-resolution photos. You can also upload your own image, just make sure you have the rights to it in line with copyright laws. The header will look something like this:
Next, click on the page container (Home) which is set to the color white. You might want to change that look. Go to the right menu and click on the color box which is set to white (left of color code box #FFFFFF).
![]() |
Clicking on the color box will open the color scheme options. Here you can choose a color or set the Alpha channel to 0 (transparent). This you can do by moving the cursor or typing in 0 above the A. |
And now you will get a more professional-looking header.
You can change the location of where Home is displayed by clicking on the container and moving it or using the alignment options top, left, right, and center on the right menu.
Deleting a container, a header, or any selected item is done by using the trash icon on the bottom of the right menu.
Left menu
The left menu icons are divided into two groups. Icons from top to bottom:
Group 1: Pages, and Sections
Group 2: Add Text, Add Button, Add Image, Add Products, and Add Container
Pages |
You can add a page to your website by clicking the + (add pages) button on the Pages menu. Name your new page (maybe add a description) and save it. You will notice that the top header now displays Home and your new page name. This will make it easy for your visitors to navigate between your pages. The text color has been transferred to the new page but if you want an easy way to make all your pages look the same then here is how:
In the address bar above the canvas, you can see the URL of your new page (about). How you add the saved header will be explained next under Sections.
If you still have questions regarding Pages, check our article with a more detailed explanation here. |
Sections |
On the Sections menu, you will find a variety of cool sections to use as building blocks for your website. They are very easy to use as will be shown now. Let's add your saved header to your new page:
|
Text |
If you added a blank section as your second header you will want to add some text. I called my second page About because I want to tell my visitors more about the business. Select your blank section, click on the Text icon and a text box will be inserted. Use these text boxes both headline and body text. On the right-side menu, you will see a variety of formatting options for your text. |
Button
|
Add a button anywhere on your website and lead your visitors to the page you want. E.g. you can create a page for your products or services and lead the visitor there.
|
Image |
Images? Yes, of course, you want to make your site more attractive by adding images. Click on the Image icon and chose an image from the thousands of free Unsplash photos or upload your own. Again, use your own property to avoid copyright issues. |
Icon |
You can now add icons to your website. We have a wide selection of icons for you to choose from and, if they're not what you're looking for, feel free to import any icon of your choice. |
Video |
Videos keep people on your website longer and engage them with your content. With that in mind, we have now added the option of adding video to your website! You will need a video URL (YouTube, for example) and you're good to go. |
Add Contact Form |
Having a clean and clear contact form makes your website look more professional. That's why we have created the option for you to add a contact form to your website. It is customizable, so you can choose which fields fit your business better - for more details, check this article. |
Products |
If you have products to sell you can easily make your website into a webshop.
Click on Sections, then choose E-Commerce to make your added products to the site. *You need to upload products to your E-commerce before they can be displayed on your site. |
Still have questions? Feel free to reach us out at support@cobiro.com and we will be more than happy to help!
Comments
1 comment
news website disaine
Please sign in to leave a comment.