# Basic Bubble Marketing Page

## Overview

This page includes 3 marketing blocks built with Bubble elements. You can add more marketing blocks to the page by opening the Canvas extension > going to Blocks > Filtering on marketing blocks.

## Structure

* **Page** \
  You can easily change the page background to one of our free svg backgrounds. <br>
* **Group Main 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'*.

  ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FKZQuuuxQC6P1cWuVwaGx%2Fm1.png?alt=media\&token=f8f99c2d-d1eb-4ce1-9a7a-afb25a3f0df6)
* **Group Main 2 column feature blocks**\
  This is block allows you to feature a list of items. Each item includes an icon, title, and description.

  ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FnRfex5Yzy5jnVCfMsT59%2Fm8-3.png?alt=media\&token=971990af-9148-471b-847c-9f994d69b553)
* **Group Main call to action block**\
  This block features a centered description text and two buttons.\
  ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FQMPin9LVZByfeK1uQ0it%2Fcta.png?alt=media\&token=7311f3f6-06f0-467e-ac68-828017f603c5)

This page also includes a popup and a reusable element:

* **Popup Hidden Variables** contains four groups:
  * **var - app settings**\
    This group stores the app settings object (e.g., app name, primary color, and etc.)
  * **var - marketing page id (do not delete)**\
    This allows the Canvas extension to identify the page as a marketing page and to filter the extension blocks to show only marketing blocks
  * **var - app variables**\
    This group stores the app variables object
  * **var - dummy**\
    A placeholder group in case you want to use any hidden variable groups later.
* [Header](https://docs.airdev.co/canvas/5.0/canvas-functionality/reference/reusable-elements/header)
* [Footer](https://docs.airdev.co/canvas/5.0/canvas-functionality/reference/reusable-elements/footer)

## How to set up

#### Changing your page background

* By default, the page will come with a few placeholder conditional statements. You should save the SVG backgrounds here for later use.

  \
  &#x20;<img src="https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FpmUY7VJSDpeHnYq1AUbm%2Fb1.png?alt=media&#x26;token=51edee9f-ceea-4037-8c22-2448c4279493" alt="" data-size="original">&#x20;

* To use one of these backgrounds, simply toggle to the 'Appearance' tab and copy and paste the image settings from the 'Conditional' tab over.

  \
  &#x20;<img src="https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FWhWPgwzGilBscBYrwhxy%2Fb2.png?alt=media&#x26;token=83a72689-c596-415c-a58a-1be97da9965c" alt="" data-size="original">&#x20;

* To change the colors in the svg background, you would need to have a program that supports this format (e.g., Sketch app or Adobe illustrator).

#### &#x20;Updates to older versions of the template

* 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)

    ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FnCAGEGRgYNk9TZqUVLVF%2Fb3.png?alt=media\&token=9c41ac14-ec7a-45f0-967b-790f3f742355)

  * 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"*.

    ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FZ3EISVL8xNDZZrTJQuKb%2Fb4.png?alt=media\&token=e6e069ec-4c28-4aa9-b5f6-8da7a144d306)

#### Show or hide a block

* 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="https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FXDol6yeEFncwCKOZmN5M%2Fb5.png?alt=media&#x26;token=fbbc773a-1019-4280-a738-5dd46e961b52" 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
