# Premium Bubble Marketing Page
## Overview
This page includes all free and premium marketing blocks built with Bubble elements.
## Structure
When this page is added to your app, it will include **40 pre-built marketing blocks:**
* **Page** \
You can easily change the page background to one of our free and premium svg backgrounds.
* **Group Main left-justified hero blocks** and **Group Main centered 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'*.
* **Group Main left-justified hero with long text** and **Group Main centered hero with long text**\
Use this hero block when you have longer heading and subheading.
* **Group Main Right-Justified Hero with Full-Height** Image and **Group Responsive left-justified text content**\
Use this hero block when you need to display a tall image.\
* **Group Main hero with image carousel**\
Use this block when you want to feature a list of images. This block includes a **Group Collapsible Standard SearchBar** that you can unhide by checking the box for '*This element is visible on page load'*.
* **Group Main hero with left-justified content box** and **Group Main hero with right-justified content box**\
Use this hero section when you want to make your content stand out on a background.
* **Group Main centered hero with laptop device**\
Use this hero block to embed a screenshot in a laptop device. This block includes a **Group Collapsible Standard SearchBar** that you can unhide by checking the box for '*This element is visible on page load'*. \ 
* **Group Main hero with mobile and desktop devices**\
Use this hero block to embed screenshots in mobile and laptop devices. This block includes a **Group Collapsible Standard SearchBar** that you can unhide by checking the box for '*This element is visible on page load'*. \ 
* **Group Main left-justified hero with mobile device**\
Use this hero block to embed a screenshot in a mobile device. This block includes a **Group Collapsible Standard SearchBar** that you can unhide by checking the box for '*This element is visible on page load'*.
* **Group Main social proof block**\
This block allows you to feature logos from different companies.
* **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.
 
* **Group Main right-justified metrics block** and **Group Main left-justified metrics block**\
This block allows you to feature key metrics about your company. You can add an image and up to three metrics with descriptions.
* **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.
* **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.
 
* **Group Main left-justified text content**\
This block allows you to feature multiple lines of text and a bulleted list of text.
* **Group Main centered text block**\
This block allows you to feature multiple lines of centered text and a bulleted list of text.
* **Group Main testimonial block**\
This block allows you to feature testimonials from your clients or customers. Each testimonial includes a picture, logo, testimonial, name, and position title.
* **Group Main 4-column pricing blocks**, **Group Main 3-column pricing blocks**, **Group Main 2-column pricing blocks**, and **Group Main 1-column pricing blocks**\
This block allows you to feature pricing or subscription plans. Each plan will include a title, description, a list of items, button, and a short text below the button.
* **Group Main reviews block**\
This block allows you to feature reviews from your customers. Each review includes the customer's picture, name, date of review, review, and star rating.
* **Group Main gallery block**\
This block allows you to feature a list of images.
* **Group Main team block**\
This block allows you to feature a list team members from your company. Each tile includes a name, position, description, and links to the person's social media profiles.
* **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.
* **Group Main press block**\
This block allows you to feature a list of links by dates. It is ideal for showcasing press articles or company news.
* **Group Main faq block**\
This block allows you show a list of frequently asked questions. Users can click on a question to expand it and view the answer to that question.
* **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.
* **Group Main call to action block**\
This block features a centered description text and two buttons.
* **Group Main left-justified cta**\
This block features a left-justified title text, call to action button and a right-justified image.
* **Group Main centered cta**\
This blocks allows you to feature your mobile app.
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.
* **var - carousel image #**\
This group stores the current image # to show in **Group Main hero with image carousel.**
* **var - total carousel images**\
This group stores the total # of images to show in **Group Main hero with image carousel**.
* [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)
## 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.\
* To use one of these backgrounds, simply toggle to the Appearance tab and copy and paste the image settings from the Conditional tab over.\
* 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).
#### 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)
* 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 box shadow style to "None"*.\
Modify the conditional statement *when Current page scrolling position > 0* by adding *and header's Remove background? is "no"*.
#### 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'*.
* Update the data source of repeating groups in the features list, pricing, FAQ, news, and gallery 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 %}
#### Updating **Group Main hero with image carousel's list of images**
* Select **Group Inner carousel\_image** and update the data source of the repeating group
\
Here's a search example:
* Search for YOUR DATA TYPE (be sure to sort the list by ascending order - you may need to add a **Order** number field to the object)
* At the end of the search expression, add **:item#** and **var - carousel image's number**
* Open **Popup Hidden Variables** and update the number in **var - total carousel images**. This will show all the images up to that image number and then reset the carousel to the first image in the list.\ 