Skip to main content

Overview

An overview of XO Builder elements

Element structure​

Content​

Fill this tab with the text, images, videos, or anything else that brings your website to life.

Each element has different fields, so you can customize it differently.

field

Design​

This tab lets you customize the look and feel of your element, from colors and fonts to borders and spacing. Make it your own!

Predefined styles​

Get started quickly with our pre-made styles! Choose from a collection of professionally designed looks to give your element instant flair.

Advanced styles​

Fine-tune the pre-defined styles or craft your own unique look in the advanced styles section.

CSS code​

Write your own code to achieve exactly the style you desire.

tip

Using $element for current element selector

Advanced​

Dive deeper and unlock even more control! This tab lets you define advanced settings like actions, visibility on different devices, animations, and even add custom HTML attributes for ultimate flexibility.

Add element​

There're 3 places you can add new element to your canvas

From elements panel​

Find your element and drag it to the canvas

Add element from elements panel

From the canvas​

After select an element, you will see some + buttons that help you add other elements

Add element from the canvas
tip

Add inside only available with element that support child element

From element detail panel​

After select an element, you can add other element by clicking the + button from element detail panel

Add element from element detail panel

Delete element​

You can follow 1 of 5 ways to delete an element:

  • From the canvas: Right click to the element and choose Delete
  • From element detail panel: Click the Trash button
  • Right click to the element and choose Delete
  • Left click to choose element and click the Trash button
  • Select / Hover to the element and press CMD + Backspace (Mac) / Ctrl + Backspace (Win)