> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/pages/free-bubble-marketing-page.md).

# Free Bubble Marketing Page

## Overview

This page recreates all the free blocks in the Canvas marketing page builder. All of the content blocks are built with Bubble elements instead of static html and css. \
\
This marketing page is ideal for users who:\
a) Cannot use the Canvas marketing page builder because they are not on a paid Bubble plan \
b) Want to be able to customize the marketing page by adding custom designs\
c) Want to link content blocks to database objects

## Structure

When this page is added to your app, it will include **15 pre-designed content blocks:**

* **Group Main left-justified hero blocks**\
  This is the first block that users will see when they visit your website. This section should summarize what your website is about in a few sentences and include call to action buttons. This block includes a **Group Collapsible Standard SearchBar** that you can unhide by checking the box for '*This element is visible on page load'*.

  <img src="/files/-MVXl5YXE9tqJQwUXqz0" alt="" data-size="original"><br>
* **Group Main right-justified about block** and **Group Main left-justified about block**\
  This is a content block that allows you to feature a title, an image, and a list of four items.<br>

  ![](/files/-MVXn5qukqJvgRM_nmYb)     ![](/files/-MVXnFU-NRH-tBJoXvmb)
* **Group Main right-justified text and image block** and **Group Main left-justified text and image block**\
  This block allows you to feature some text content, an image, and a call to action button.<br>

  ![](/files/-MVXnj3-L2TMpLatAliv)![](/files/-MVXnmNbX8WMoZ8vBSY2)
* **Group Main right-justified content list block** and **Group Main left-justified content list block**\
  This is a content block that allows you to feature an image, title, description, and a list of texts.<br>

  ![](/files/-MVXoBAI3Li6T2gW1t0i)  ![](/files/-MVXoEAnxrkwJxGrtS7a)
* **Group Main left-justified text content**\
  This block allows you to feature multiple lines of text and a bulleted list of text.<br>

  ![](/files/-MVXoRJQFYWjYvE4us6X)
* **Group Main centered text block**\
  This block allows you to feature multiple lines of centered text and a bulleted list of text.<br>

  ![](/files/-MVXofB8D3sclaMwhKOT)
* **Group Main 4-column feature blocks**, **Group Main 3-column feature blocks**, **Group Main 2-column feature blocks**, and **Group Main 1-column feature blocks**\
  This is block allows you to feature a list of items. Each item includes an icon, title, and description.<br>

  ![](/files/-MVXpEluAt73g_1GonWn)![](/files/-MVXpI2AjNoc4ELn9sv8)<br>

  ![](/files/-MVXpMx8zDVrBASuXA_V)![](/files/-MVXpQTeNkEPNh95ZvTI)
* **Group Main html embed**\
  This block allows you to include a title and add your own custom embed code. For demo purposes, we included a video embed.<br>

  ![](/files/-MVXptnfWzSs-ttRoGF9)<br>
* **Group Main call to action block**\
  This block features a centered description text and two buttons.<br>

  ![](/files/-MVXq5lk-kfnWIQ_xwzU)<br>

This page also includes a popup and a reusable element:

* **Popup Hidden Variables** contains two groups:
  * **var - Website object**\
    This group stores the website object (e.g., app name, primary color, and etc.)
  * **var - dummy data**\
    A placeholder group in case you want to use any hidden variable groups later.
* [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Please check your Canvas Base Template version by going to your Bubble editor > Data tab > App data tab > All websites table > Click to view the website entry and the **Template version** field. If your template version is not 3.3.3 or later then please add the following state and workflows:
  * Go to the **header** reusable and add a custom state called '*Remove background?*' (yes/no)<br>

    ![](/files/-MVXstqfWLWz9L6BLEO-)
  * Select **Group Header** and make the following changes to the conditional tab:\
    Add a new conditional *when header's Remove background? is "yes" then change background color opacity to 0 and set boxshadow style to "None"*.\
    Modify the conditional statement *when Current page scrolling position > 0* by adding *and header's Remove background? is "no"*.<br>

    ![](/files/-MVXulNlUrNMA6391HhK)<br>
* To show or hide a block, simply click on the main group and check or uncheck the box for '*This element is visible on page load'*.<br>

  <img src="/files/-MVXwoVK43RqWQLubfwO" alt="" data-size="original"><br>
* Update the data source of repeating groups in the features list blocks
* Update the image and text content in the blocks and add workflows to buttons

{% hint style="info" %}
All of the blocks are fully responsive. Please refrain from moving things out of their container groups as it would affect responsiveness. To add additional elements to a block, resize **Group Placeholder** and make sure it is not overlapping with any other elements.
{% endhint %}
