How to Create a Website

You can create a single-page or multi-page website with a well-thought-out user-friendly design using a visual website builder — no coding skills are required. Choose and customize premade templates that suit your business, or create your own from scratch.

With our website builder, you only need to select an element, drag it to the workspace, and customize its style to fit your business tasks. In addition to text and visual content, you can add payment options, subscription forms, and image galleries and include links to your social media profiles or blog to attract and convert visitors into customers.

To create a website, go to the “Website” tab, and click Create website.

Select “Website.”

Then click New Site to create a website from a scratch.

You can filter pre-made templates by category or template language, select a template, and adapt it to your needs. Find a template, view it, and click Edit.

Overall Page Style

Before you start adding elements, choose your template style. By default, the color scheme and text style you select will be applied to all the elements you use. You can also set or change the overall style of your website after it is created.

Overall website style settings are applied to all its pages. Read more: Overall Page Style and Customizing Your Elements.

Set Up Elements

Create a Structure

Plan your website structure, and start creating it using the “Block,” “Section,” and “Column” elements. You can combine sections into blocks vertically and unite columns into sections horizontally.

You can add an unlimited number of blocks and up to 6 columns to one section.

Select a block from the library. To add it, click Add Block.

You can add an empty block or select ready-made blocks from our library, including Header, First screen, About us, Advantages, Text, Contacts, FAQ, and Footer.

If you have already added an element to your future site and want to move on to the next one, hover over it, and click + Add block.

Read more: How to Work with Site Elements.

Add Widgets

Select a widget — a functional website element designed to add information and interact with visitors. Read more about each element below.

Menu

You can add a menu to help users navigate to the desired website page.

Add the “Menu” widget to the top of your page. You can see some menu examples and customize them when editing your widget.

To add a new item to your menu, click Add. Then, click on the pencil icon. Enter a new item name. Select your website page, or enter a link, email address, phone number, or anchor link to another block.

You can choose whether to open the link in a new window or the same one.

See also: How to Add a Website Menu.

Button

It is used to add buttons with links to other sites, pages, and blocks or communicate via phone or email.

You can include additional buttons or align your button when editing it.

To add an extra button to a column row, click Add. To customize the button, click the pencil icon.

Enter your button name and hint in the description. Select its type: link, phone number, email address, or anchor link, and then insert the necessary data.

Let's analyze the purpose of each link type.

Select your button style. By default, your primary and secondary overall page styles are applied. You can also create a unique style for each button separately. To do this, select the "Custom" option. You can also add scroll animation to your button.

Text

It is used to add a text element to your page.

To change the formatting, click the text itself. Select the necessary part of the text, and choose its color, size, and font. You can also add lists, hyperlinks, or additional items using source code and add scroll animation.

You can customize the font size and line height of each of your headings in the general site style settings.

Image

With the “Image” widget, you can add a multimedia element to your page. Add visual elements that enhance your text.

Once you have added the widget, go to the element editor, select a file, or upload a new one.

Keep in mind that your image height affects the height of the entire section. To resize your image, click it in the widget, and drag the sizing handle.

To set a focal point (an image part you want to draw more attention to), hover over your image.

To see how your website will look on different devices, use the Preview option.

Website images are automatically resized to match the screen size of the visitor's device (720, 1080, or 1920 px) and converted to the webp format. If the required size is not available, the website visitor will see the original image, which is stored in the file manager.

You can enter alternative text and add a description and a link. Customize the text you will use for your image by changing its size, color, and position and adding a background to it.

You can also add scroll animation to your image.

Video

If you want to add a video, you must first upload it to YouTube or Vimeo and then include a link to it.

Gallery

Used to display images as a carousel, grid, or collage. Upload images, select a gallery type, and customize its appearance (how you want to display images and how users should interact with them).

You can also resize your images and select a focal point (an image part you want to draw more attention to). To do this, click the image, and customize its settings using the sizing handle and cursor.

Read more: How to Add a Gallery to Your Website.

Socials

You can add a link to your social media profile to invite users to follow you.

To add a link to your social media profile, click Add. Then click on the pencil icon, select a social media platform, and enter your profile link.

Customize your element by displaying it as a button or icon or choosing its color and alignment.

Read more: How to Add Socials to Your Website.

Spacer and Divider

Use a spacer and divider to visually separate your content: blocks, sections, columns, or widgets.

Indentation affects the sections' width and the columns' height, so think about your page structure beforehand. You can also set spacing between elements by adding a spacer using the element settings. Read more: Indents.

When adding the “Spacer” widget, you can set the height size in pixels.

You can select the color, type, thickness, and size of your "Divider" element. For example, if you need a line for the entire column, you can set the width to 100%. If you need it for a smaller element, you adjust the width using the slider. Align your content left, right, or center.

Subscription Form

Collect your site visitors' data, and offer them to subscribe to your newsletter using a subscription form.

First, choose where you want to save your new subscribers.

By default, every time you get a new lead, your CRM system creates a new deal. Enter a deal name, and select a pipeline where you want to add your new contacts.

You can also save contacts to your mailing list to send them campaigns later. Select a mailing list where your new contacts will be stored.

Then customize your form fields and subscription button.

Read more: How to Add a Subscription Form to Your Site.

Payments

Use the "Payments" element to enable users to buy your products in one click.

Enter the name of your product, its price, and select a pipeline your deal will be saved to. Select a mailing list where your contact will be stored once they successfully pay for your product. You can also customize your form fields.

Read more: How to Add a Payment System to Your Website.

Chatbots

You can add a button to offer users to subscribe to your chatbot and launch the desired flow, for example, a welcome flow or a customized flow.

You can choose your button style and customize it. Then add a new element, or edit an existing one by specifying a social network.

Read more: How to Add a Subscription to Chatbots.

Countdown

You can add the “Timer” element to set a countdown timer until the start of an event or the end of a sale.

Enter your end date and time and message, set the date options, and customize your countdown timer.

Read more: How to Add a Timer to Your Website.

FAQ

Use the “FAQ” element to add detailed answers to frequently asked questions from your users.

To change the text and formatting, click on your text or heading, and you will be able to edit it.

You can add a new question when editing your widget. Change your icon style, add or remove a spacer or divider, and choose its color.

Read more: How to Add a FAQ to Your Website.

Map

Add your contact information and location to a map to help users find you offline.

Obtain and connect a unique Google Maps API key. Add addresses and descriptions as needed. Customize your maps’ scale and look and feel.

Read more: How to Add a Google Maps Widget to Your Website.

Login EDU

You can add this widget to your course website to allow students to register for a course or log in a student account. This enables you to create a page, for example, about a school or an expert, and use it to present different courses.

You can add this widget only to a site with a linked course. To develop a page with your own design, go to the course site, create a new page of your site with a linked course, and add the widget to it.

Select the course for which you want to create a site page. Select and customize your buttons, or add new ones.

Read more: How to Add a Widget for Course Registration and Student Account Login.

Custom Code

If you need to add an extra element to your website, such as a calendar widget or a comment system, you can add it using the “Custom code” widget.

You can add an element with HTML, CSS, or JavaScript code you have written or generated using a relevant tool. To do this, add the widget to your website page, and click it to insert your code.

Read more: How to Add a Custom Code Element to Your Website Page.

Reviews

Use it to display your website or product reviews to increase customer trust.

Once you add this widget, go to the "Review display option" field, and choose if you want to display your reviews as a carousel or a grid.

In the "Source" field, select the course for which you want to display reviews.

Your course must have the same domain as your website and contain existing reviews. The "Student Reviews" setting in your course settings must be enabled.

In the "Number" field, select the number of reviews to display.

For more information, see "How to Add a Review Widget to Your Website."

Manage Changes

You can undo up to ten actions. To undo the most recent data entry or action, use the control buttons on the top panel. To do this, click the left arrow.

You can undo the most recent action in the builder by clicking the button once. To cancel previous actions, keep clicking the button. You can also use the Ctrl + Z keyboard shortcut to undo an action.

You can also redo an action that has been undone. To do this, click the right arrow, or press Ctrl + Y.

Read also: How to Use the Website Builder.

Preview

Once you create your website, you can see what it will look like on different devices. To do this, click Preview at the top of the screen.

Choose which device you want to see the preview on (desktop or mobile).

You can edit elements, columns, sections, and blocks separately for the mobile version.

Read more: How to Edit Elements in the Mobile Version.

Save and Publish

Once you've finished creating the page, click Save and Exit. Enter your website name and link. When adding a new page, enter its URL.

Afterward, you will be able to publish, customize, copy, or delete a new page.

See also: How to Manage Your Website Pages.

To change your page title and URL, go to “Settings,” enter a new title and URL, and click Save.

By default, the first page you add when creating a website is considered its main page. To change your main page, go to "Site Settings," and select a new page from the dropdown menu.

Please note that you can select your website’s main page only if there are two or more pages. Your new main page will have the URL of your website itself, and the previous main page will have a system URL that you can change in the page settings.

To change your site name, connect your domain, add third-party code, and enable analytics, you need to go to “Site Settings.”

You can also monitor your website visit statistics. To do this, go to the "Statistics" tab, and select a statistics type you want to track.

Last Updated: 26.09.2023