> 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/master-1/pages/2-column-profile-page.md).

# 2-Column Profile Page

## Overview

Full layout for a generic profile or listing page. This page is fully-responsive and optimized for mobile devices. Includes common UI components (title text, link, description text, and tags), a section to display multiple images, and a sidebar for booking appointments and reservations. Please ensure that you have installed the **Slick Slideshows plugin** to your app before submitting your page request.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcmZ-jt-n0DI70YjDPx%2F-LcmqjtQIhk-JVs0uXE2%2Fshot-20190418-15781-uwd9ho.jpeg?alt=media\&token=0938566e-2d6c-482e-916b-db27dbb4c0b1)

## Structure

* When this page is added to your app, it will come with seven main groups:
  * `Group Content` - This group contains the responsive settings for all modules. 
  * `Group page860Group` - All modules should be placed into this group.
  * `Group Details` - This group contains common UI components that you can customize.
  * `Group Pictures desktop` - This group stores the profile's main image and list of images. It is only visible when the`Current page width is greater than or equal to 800`. It contains two groups:
    * `Group Pic main` - This group stores the profile's main image on desktop.
    * `RepeatingGroup image` - This repeating group holds the list of images of the profile page's data type.
  * `Group Pic main Mobile` - This group stores the profile's main image. It is only visible when the `Current page width less than 800`.
  * `Group Sidebar menu` - This group contains additional UI components that you can customize.
  * `FloatingGroup Book button` - This floating group is anchored to bottom of the page and it will only be visible when `Current page scrolling position is greater than or equal to 665` and when `Current page width is less than or equal to 1047`.
* This page comes with two popups:
  * `Popup View image` contains an element called `Slideshow Photos` which shows a list of images (it uses a Bubble plugin called Slick Slideshow).
  * [`Popup Hidden Variables`](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup) contains two groups:
    * `var - Website object` - This group stores the website object (e.g., app name, primary color, and etc.)
    * `var - dummy data` - This group stores the data source of the profile page's thing.
* Clicking on `Button VIEW PHOTOS desktop` and `Button VIEW PHOTOS` mobile will show `Popup View image`
* This module will come with three reusable elements:
  * `star rating` - Set the data source of the reusable to a number between 1 to 5 to display the appropriate stars.
  * [`header A`](https://docs.airdev.co/canvas/assets/reuseables/header)
  * [`footer`](https://docs.airdev.co/canvas/assets/reuseables/footer)

## How to set up

* Remove or add additional UI components in `Group Details`

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqX8SbEduynfmLVLXu%2FScreen%20Shot%202019-04-19%20at%209.57.50%20AM.png?alt=media\&token=c479c7c0-a63d-40ad-a693-bbb6a8318935)

* Resize `Group page860Group` and add other modules inside of it

{% hint style="info" %}
If you add more modules, please resize Group PLACEHOLDER 2 so that it is not overlapping with any other elements (for responsiveness).
{% endhint %}

* Update `var - dummy data's` data type and data source

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqYgCn6nbaFA6w2Fv7%2FScreen%20Shot%202019-04-19%20at%2010.04.21%20AM.png?alt=media\&token=fe4711d4-2495-40ae-9827-6b0b4ddf4a60)

* To make the profile page dynamic, update the `page's` type of content and set `var - dummy data's` data source to `Current page's data type`

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqYvhHupsit3vIl6_1%2FScreen%20Shot%202019-04-19%20at%2010.05.19%20AM.png?alt=media\&token=6357aa9d-9334-4262-926e-5a7389985f1c)

* To change the default image on which main image to show when the page is loaded, open `Group Pic main` and `Group Pic main Mobile` and update the dynamic image data sources.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqZbav500iofJiFoP-%2FScreen%20Shot%202019-04-19%20at%2010.08.24%20AM.png?alt=media\&token=667b9f18-e71d-42ff-83bb-bd5eca6b3ad2)

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqZfoDwUaw6fcFJ00M%2FScreen%20Shot%202019-04-19%20at%2010.08.55%20AM.png?alt=media\&token=d53e5f17-a67b-4f51-88e3-5e438da1efb6)

* To change the list of images displayed in the top section, update `RepeatingGroup images's` type of content and data source.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqZpF65G4T3wDF1OGl%2FScreen%20Shot%202019-04-19%20at%2010.09.29%20AM.png?alt=media\&token=b8713d95-7f82-48f5-8cbb-2c6262a399c7)

* Resize `Group Sidebar menu` and add more UI components inside of it.

{% hint style="info" %}
If you add more UI components, please resize `Group Sidebar PLACEHOLDER` so that it is not overlapping with any other elements (for responsiveness).
{% endhint %}

* Add workflows to `Button Schedule` and `Button BOOK A TOUR`
* Open `Popup View image` and update the data source for `Slideshow Photos`

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lcq_VyFDT8xaD5GMLYj%2F-LcqblyDp1OyhxdwDN7w%2FScreen%20Shot%202019-04-19%20at%2010.22.17%20AM.png?alt=media\&token=90665eb2-d89e-47dd-bcd2-3e0ec32b6089)

* Move the `footer` and make sure the bottom of the `footer` aligns with the bottom of `FloatingGroup Book button`.