Basic Elements Overview

The Boxmode website builder contains functional basic elements designed to help you customize the pages and present your content in various ways. They are divided into the following categories:

• Media: Image, Video
• Markup: Container
• Buttons: Button
• Typography: Quote, Text (former Heading and Paragraph elements combined for the users’ convenience)

Create striking visual content and add it simply by tapping the Image and Video elements. Using the Container element, you can split the page into sections and enrich them with engaging content. Click the Button element to add a customizable button to the canvas. The Typography elements enable you to paste the textual content, such as headings, paragraphs, and quotes, into the page.

Adding an element to a page

Open your project in the editor and click the + button on the Left Panel. In this window, you will see the Basic Elements tab. Click on it, and the drop-down menu with all available elements will open. Select the appropriate element and drag and drop it into the page. 

Another way to add an element is by clicking the + button between sections on the canvas. When the window with the Basic elements tab opens, click the appropriate element, and it will be added to the page.

Moving the element

Play around with the element by moving it to a different part of the page. Click on the element, and you will see its controls. Click and hold the crossed arrows icon and drag the element to any other place on the page. Then, drop the element in the canvas’s highlighted area. 

Resizing the element

To resize the element, click on it and drag its anchor points to the size you want. You can also set the element’s paddings and margins. Hover your cursor over the corresponding anchor point and drag a green or red arrow in the appropriate direction to resize the element’s padding and margin. 

Another way to adjust the element’s size is to click on the settings icon on the Left Panel that opens the CSS panel, where you can specify the element’s:

• Width;
• Height;
• Margin;
• Padding.

Editing the element

Each element has its settings that you can change as you see fit. To do this, you need to click on a specific basic element on the page to call out its controls and proceed to the editing. 

Let’s take a closer look at each element’s settings. 

Image element

Click the Edit button and set the required adjustments. You can edit the size and perspective of the inline image, as well as change the image.

Video element

Click the Change video option to see video settings. You can upload a video file from your computer or project’s library or insert the link to the video on Youtube or Vimeo. It’s also possible to set:

• Opacity;
• Autoplay;
• Loop;
• Mute Sound;
• Show Player Controls.

Container element

Click the brush icon to customize the element’s design. Choose the color for filling the container or insert an image and set: 

• Its format, 
• Position in the browser, 
• Vertical and horizontal alignment.

Besides, you can add borders and shadows to the container. 

Button element

Click the brush icon and specify the default and hover settings of the element. You can select text and background color and add borders and shadow to the button. 

Text and Quote elements

Click the Edit button to open the control panel with basic typography settings. Set the headings (H1-H6) and paragraphs. Choose the text’s font, size, style, position, and so on. 

You can read about the extended settings of the Inline Editor in our article. 

The Quote element consists of the Text elements, so you can customize it in the same way as the Text.

You can add clickable links to the Image, Container, and Button elements, specify the Action Type: 

• To URL;
• Jump to page;
• Email;
• Phone;
• Download file.

Moreover, it’s possible to enable the Open in New Tab option. 

Deleting the element

To delete the element from the page, just click on it and hit the trash bin icon or press the delete (backspace) button on the keyboard.

We hope this guide helped you understand what the Boxmode basic elements are and how you can use and customize them in the editor. 

Now, it’s time to use and customize the Boxmode basic elements on your website!

Go to Editor