Skip to main content
All CollectionsPage BuilderBuilder Components
Components of the Builder
Components of the Builder

In this article, we have explained about the Structural Elements & Content Elements of the builder

siddarth avatar
Written by siddarth
Updated over a year ago

Swipe Pages landing page/Funnel builder is based on the Grid-based approach.

You may ask why a grid-based approach.
​

Here are some of the advantages of Grid-based builders:

  • Grid-based builders enforce a consistent structure, ensuring that all elements align properly across different sections of the page. This results in a cleaner, more professional look.

  • Grid-based systems provide a straightforward way for users with little to no design experience to create well-structured pages.

  • Grid-based layouts inherently lend themselves to responsive design, ensuring that the website looks good on devices of all sizes with minimal extra effort.

  • With grid-based builders, users can quickly drag and drop elements into predefined columns and rows, speeding up the layout creation process.

  • Grid-based systems facilitate the organization of content, making it easier for users to manage and update their content over time.

Now, you can see why we chose the Grid based approach.

Swipe Pages enables a person with no prior design or development skills to create stunning and responsive landing pages/Funnel pages with ease.

Below is a detailed guide to help you understand and make the most out of our builder.

Let's get started!!

The landing page/Funnel page is made up of two parts namely structural elements and content elements.
​
Structural elements include sections, rows and columns and content elements includes modules like Text, button etc

Let's understand both of them in detail

Understanding the Structure elements:

At a structural level, the landing pages/funnel pages built using Swipe Pages are nothing but sections stacked on top of each other.

The structural elements include sections, rows and columns.

These structural elements are the building blocks used to build the layout of the page in the landing page builder/Funnel Builder.

Within the sections, you have rows. Rows contain columns and columns host modules.


Let us understand these structural elements in detail.

1. Sections:

Sections are the building blocks of your landing page. Think of them as individual containers that hold various elements of your landing page/funnel page. Each section spans the full width of the page and can contain multiple rows.

  • Usage: Sections are perfect for grouping related content together. For example, you might have one section for your header, another for your main content, and a third for your footer.

To learn more about the sections, click here

2. Rows:

Rows exist within sections and serve to hold your columns. A row spans the full width of the section and can be divided into multiple columns.

  • Usage: Use rows to create horizontal groupings of content or elements. For example, a row might contain text on one side and an image on the other.

To learn more about the rows, click here
​

3. Columns:

Columns are nested inside rows and are the containers where your content and elements are placed. You can have multiple columns within a row, and the width of each column can be adjusted based on your design needs.

  • Usage: Columns are where the content comes to life. Insert text, images, buttons, or any other elements into columns to build up your page.

To learn more about the columns, click here

Note: In both the landing page builder and the Funnel builder, the structural elements are the same.
​
​

Content Elements

Content elements, often referred to as modules or widgets, are the building blocks you use to add different types of content to your landing page/funnel page.

Here is the list of modules that are available within the landing page builder of Swipe Pages:

1. Text Module:

  • Description: Allows you to add and format text content.

  • Use Case: Create a detailed product description to inform visitors about features and benefits.

2. Image Module:

  • Description: Enables the addition of static images.

  • Use Case: Display high-resolution images of your product.

3. Heading Module:

  • Description: Specifically designed for adding headings and subheadings.

  • Use Case: Highlight the name of your product or service at the top of the landing page.

4. Button Module:

  • Description: Adds clickable buttons.

  • Use Case: Create a “Buy Now” button to facilitate quick purchases.

5. Icon Module:

  • Description: Lets you add scalable vector icons.

  • Use Case: Use icons next to feature descriptions to visually represent the benefits.

6. Card Module:

  • Description: A container that can include text, images, and buttons.

  • Use Case: Create feature cards to highlight different services with an image, a brief description, and a “Learn More” button.

7. Animated Link Module:

  • Description: Adds hyperlinks with animations.

  • Use Case: Draw attention to a special offer link with a subtle animation.

8. Video Module:

  • Description: Embeds video content.

  • Use Case: Show a product demo video to explain how your product works.

9. Divider Module:

  • Description: Adds a visual line or space to separate content.

  • Use Case: Separate testimonials from the rest of the content for better visual organization.

10. Form Module:

  • Description: Creates forms for data collection.

  • Use Case: Include a contact form for visitors to request more information.

11. Multi-Layer Images Module:

  • Description: Allows for the stacking of multiple images.

  • Use Case: Create a layered visual effect showcasing different product angles.

12. Star Rating Module:

  • Description: Displays a star rating system.

  • Use Case: Show product ratings to build trust and credibility.

13. Maps Module:

  • Description: Embeds interactive maps.

  • Use Case: Help users find your physical store location.

14. Countdown Timer Module:

  • Description: Adds a countdown to a specific date or time.

  • Use Case: Create urgency for a limited-time offer.

15. Counter Module:

  • Description: Displays numbers that count up or down.

  • Use Case: Show the number of satisfied customers or products sold.

16. Gallery Module:

  • Description: Creates a photo gallery.

  • Use Case: Display a portfolio of your previous work or projects.

17. Image Carousel Module:

  • Description: Adds a rotating slider of images.

  • Use Case: Showcase multiple customer testimonials with their photos.

18. Table Module:

  • Description: Allows for the creation of tables.

  • Use Case: Display a comparison of different product plans with their features.

19. Pricing Table Module:

  • Description: Specifically designed to display pricing options.

  • Use Case: Clearly lay out different subscription plans and their benefits.

20. Testimonial Slider Module:

  • Description: A slider to display customer testimonials.

  • Use Case: Rotate through various customer reviews to build trust.

21. Tabs Module:

  • Description: Adds tabbed content sections.

  • Use Case: Organize product features into different tabs for easy navigation.

22. Accordion Toggle Module:

  • Description: Creates collapsible content sections.

  • Use Case: Use for FAQs, allowing users to click and expand answers.

23. Order Form Module:

  • Description: Specifically designed for creating order forms.

  • Use Case: Streamline the purchasing process with a simple order form.

24. 2 Step Order Form Module:

  • Description: A two-step order form for collecting user information in stages.

  • Use Case: First, collect basic information, and then move to payment details to reduce friction.

25. HTML Module:

  • Description: Allows for the addition of custom HTML code.

  • Use Case: Embed a third-party widget or tool that isn’t natively supported.

26. Inner Row Module:

  • Description: Adds a nested row inside another row or module.

  • Use Case: Create complex layouts with additional content nested within a section.

27. Icon Group Module:

  • Description: Displays a group of icons together.

  • Use Case: Showcase supported payment methods or social media icons.

28. Button Group Module:

  • Description: Groups multiple buttons together.

  • Use Case: Provide several call-to-action options side by side.

29. Coupon Button Module:

  • Description: Adds a button specifically for coupon codes.

  • Use Case: Encourage purchases with an “Apply Coupon” button.

30. Coupon Copy Module:

  • Description: Displays coupon codes that users can copy.

  • Use Case: Clearly present a discount code that users can easily copy and apply.

31. Checklist Module:

  • Description: Creates a list with check marks or other icons.

  • Use Case: Highlight the key benefits or features of your product.

32. Progress Bar Module:

  • Description: Displays a visual progress bar.

  • Use Case: Shows the progress.

Here is the list of modules that are available within the Funnel builder of Swipe Pages:

The Funnel builder also has all the above-mentioned 32 modules.

In addition to that, the Funnel builder has one more module that is not present within the landing page builder.
​
This module that I'm talking about is called the OTO button module.

To learn more about modules in general, click here

Did this answer your question?