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: heading, paragraph, quote
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 the attractive 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 + icon on the left panel. In this window, you will see the Basic Elements tab. Click on it, and the accordion menu with all available elements will open. Select the appropriate element and drag and drop it into 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 on 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 bar” icon on the left panel and specify the element’s width, height, margin, and padding in pixels on the CSS Panel.
Editing the element
Each element has its own settings that you can change as you see fit. To do this, you need to click on a specific basic element on the page and proceed to the editing menu.
Let’s take a closer look at each element’s settings.
Click Edit 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 define the opacity of the video, enable/ disable autoplay, loop, mute mood, and player controls display.
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 shadow 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.
Heading, paragraph, and quote elements
Click the Edit option to open the panel with basic typography settings. Choose the text’s font, size, style, position, and so on.
The Quote element consists of the Paragraph elements, so you can customize it in the same way as the Paragraph.
Moreover, 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), and 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.
Now, it’s time to use and customize basic elements on your website!