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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/master-1/pages/2-column-profile-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.