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

![](/files/-LcmqjtQIhk-JVs0uXE2)

## 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`

![](/files/-LcqX8SbEduynfmLVLXu)

* 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

![](/files/-LcqYgCn6nbaFA6w2Fv7)

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

![](/files/-LcqYvhHupsit3vIl6_1)

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

![](/files/-LcqZbav500iofJiFoP-)

![](/files/-LcqZfoDwUaw6fcFJ00M)

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

![](/files/-LcqZpF65G4T3wDF1OGl)

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

![](/files/-LcqblyDp1OyhxdwDN7w)

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