Understanding the Elements

  1. Overview
  2. Understanding the Elements

Structure Your Web Page Using Columns and Rows

Properly structure your web page by using columns and rows as container elements. Add and customize columns, adjust widths, duplicate and delete sections, and organize content for ...

Text

Using the text element, you can add and style text elements on your web page. This tutorial covers everything from inserting headings and paragraphs to adjusting typography, alignm ...

Buttons

Create attention-grabbing buttons for your website's call to action. We cover everything from customizing text, typography, and colors to adding hover effects, links, and icons. Co ...

Icons

Enhance your website by adding and customizing icons. Choose from outlined or glyph icons, resize and style them, add background colors, and create hover effects. Duplicate icons, ...

Image

This covers the basics of adding and customizing images on your website. Resize, crop, and control the width and height of images. Apply effects like zoom, filters, and hover state ...

Audio

Add audio to your page using the audio element by integrating SoundCloud audio or uploading a custom file. Explore features like autoplay, looping, and the ability to add a custom ...

Video

Add videos from YouTube, Vimeo, custom uploads, or external URLs to your website. Adjust the video size, set the aspect ratio, and customize video settings like autoplay, looping, ...

Spacer

Use the spacer element to add vertical space between elements on your web page. Learn how to adjust the height of the spacer for better structure and separation, and customize it f ...

Line

Use the line element to enhance your page layout with stylish separators or design accents. Resize the line, adjust its width, and choose from various line styles such as dashed, d ...

Map

Add a map to your contact page using the map element. Change the location by entering an address, adjust the zoom level, and apply custom filters for colors and alignment. You&rsqu ...

HTML Embed Element to Add External Code

Use the HTML embed element to easily add external code, such as audio, videos, or widgets, to your web page. Discover how to paste the embed code from sources like SoundCloud, cust ...

Icon Box

Create a visually appealing info box with an icon, heading, text, and optional call-to-action button using the Icon Box element. Customize the icon's position, adjust text and butt ...

Counter Element for Dynamic Progress Displays

Use the Counter element to create dynamic displays of numbers, such as units sold or milestones reached. Set start and end values, control duration, add prefixes, and choose from m ...

Countdown Timer

Use the countdown element to create a time-sensitive display, perfect for upcoming events or promotions. Setting the date and time, adjusting styles, and using the countdown's link ...

Organize Content with the Tabs Element

The tabs element organizes and displays content in a clean, accessible way. Adding, duplicating, and renaming tabs, customizing the tab content, and adjusting styles for different ...

Display Progress on Your Website

Discover how to add and customize the progress element on your website to visually track progress. This tutorial covers adjusting the width, height, and fill of the progress bar, a ...

Create and Customize Accordion for FAQs

Find out how to integrate and customize an accordion element on your website to display frequently asked questions (FAQs). Add content, customize the labels, and adjust the styling ...

Menu

Create and customize a navigation menu for your website. We'll walk you through the process of adding pages to your menu, organizing them, and saving your changes. You'll also disc ...

Gallery

Quickly create a stunning image gallery for your website using the gallery element. We'll guide you through the process of uploading and arranging images, adjusting image sizes, an ...

Carousel

Easily add a carousel element to your website to showcase images or content in a dynamic, sliding format. We’ll show you the process of setting up the carousel, adjusting the ...

Rating

We will guide you through the process of adding a rating element to your website, enabling users to provide feedback. Customize the rating scale, adjust icons and labels, and contr ...

Playlist

Learn how to add a YouTube playlist to your website, allowing users to watch videos in a seamless, interactive playlist format. Add multiple videos, duplicate them, and style the p ...

Table

Adding a table element to your website, allows you to display content in a structured format. Learn how to customize table rows, columns, and headers, as well as apply color settin ...

Timeline

Learn how to add a timeline element to your website and customize it to display content in either a vertical or horizontal format. Style and organize your content by adding heading ...

Switcher

Add the switcher (toggle) element to your website and customize it to toggle between different content. Design the switcher, adjust its width, colors, typography, and spacing, and ...

Use Lottie Files for Animations

Create dynamic Lottie animations for your website using the Lottie element. Learn how to insert Lottie files via URL or upload JSON files from LottieFiles.com, and customize settin ...

Language Translation for Your Multilingual Website

This tutorial demonstrates how to add and customize a language switcher (translation element) to your bilingual or multilingual website. Learn how to adjust the switcher's settings ...

Alert

The alert element is to highlight important notices like site maintenance, sales, or events. This tutorial covers how to customize the alert's title, description, colors, close but ...

Facebook Feed

Integrate your Facebook feed into your website using the Facebook social element. Learn how to customize your feed with options like embedding specific posts, adding a like/share b ...

Twitter Feed

Add a Twitter feed to your site using the Twitter element. Learn how to customize the feed with options like username input, button/embed settings, and light/dark themes. You'll al ...

Calendly Calendar

Easily add and customize a Calendly calendar on your website. Learn how to embed your calendar by pasting your Calendly link, resizing the element for proper fit, and styling the b ...

Adding Facebook or Disqus Comments

Learn how to enhance user interaction on your website by adding a comment section with either Facebook or Disqus. We'll guide you through embedding the comment feature on your page ...

Posts

Add blog posts or any content posts to your website, whether it's on a dedicated post page or a static page. We’ll walk you through dragging and dropping posts onto your page ...

Assets

Use the assets element to display dynamic content on your website, similar to the posts element. Adding the assets element, customizing the layout with columns, rows, and spacing, ...

Assets Element for Dynamic Content

The assets element functions similarly to the posts element, allowing you to display dynamic content on your website. In this tutorial, you'll learn how to add the assets element, ...