Overview
An overview of XO Builder elements
Accordion
Accordion Element allow you to expand or collapse individual items to reveal or hide the content when you click. It’s used for organizing large amounts of information or structure content for easy navigation.
Animated Heading
Animated heading highlight your text or phrase by drawing a shape on it to draw user attention.
Breadcrumb
Breadcrumb is a great tool to help user keep track of their navigation. Breadcrumb should alway place in top of child pages.
Carousel
Carousel, also known as a slider or image slider is an effective way to present multiple items in a compact space and enhance user engagement by scroll and slide series of images or content.
Countdown
A countdown is an effective call-to-action tool to drive user’s decision-making.
Drag, resize & rotate
Drag Resize and Rotate is a floating element allow content inside it to postion and rotate freely without being in a grid layout. This is very useful for building complex and unconstrain layout.
Flip box
The Flip Box reveals the back content when hovered. It lets you display additional information in a compact space or hide details that don't need to be immediately visible.
Hero
The Hero element allows you to create a hero section with multiple sliding banners, perfect for showcasing new products or campaigns at the top of your page.
Hotspot
Hotspot is an Image with interactive area that reveal additional information when hovered over. It's often used to enhance user interaction, provide context, or guide users towards desired actions.
Hover Show Image
Hover show image element allows an image to appear and follow the cursor when you hover over content. It's useful when creating an interactive navigation list.
Hover
The Hover Element lets you add extra information and elements that appears only when the user hovers over it, keeping the interface clean and uncluttered.
HTML Video
The HTML Video element allows you to upload and display your own video without using a third party.
Image Comparison
Image Comparison is useful for showcasing the difference between before and after using a product or service.
Image
Mask
Get access token
Layout
Lightbox
A lightbox or modal is very useful if you want to display additional information without redirecting users to a new page, thus preserving the user flow.
Marquee
Marquee is an infinite sliding ribbon that allows you to display important content such as announcements, flash sales, or new releases to grab users' attention.
Masonry
Masonry is a Pinterest-like image grid with variable heights, perfect for displaying collections in a dynamic, staggered fashion.
Parallax hover
Parallax scroll
Parallax scroll is the most advance plus easy way to add parallax effect when scrolling. You can achieve a very freedom layout and beautiful interactive site in just a few click.
Progress
The Progress element displays percentage data in either a pie or bar chart format. To start, navigate to the element tab, search for "progress bar," and drag it onto the canvas.
QR
The QR code element is very useful when you want to attach a link that users can access from their phone, such as a mobile app download link.
Tab
Tabs is the smart way to separate equal content and hide them for better experience.
Timeline
The Timeline element is perfect for displaying processes such as production stages, service implementation, shipping, or the development journey of your business.
Typing Heading
Typing heading is an pre-animated heading which traverse through a texts pool and type out respectively.
Wrapper
The Wrapper element helps you group other elements inside, allowing you to align, adjust direction, and set gaps between them to create a complex layout.