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.
Note: You can add an element in this way only if it occupies the full width of the canvas. This option isn’t available in content blocks.
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:
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.
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.
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:
- Mute Sound;
- Show Player Controls.
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.
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;
- 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.
Note: Do you need specific features? Let us know which ones via our contact form (pick the Feature Request option in the Feedback topic field,) and we will consider them.
Your request is important for us to develop and improve our product.
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!