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.
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 theCurrent 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 theCurrent 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 whenCurrent page scrolling position is greater than or equal to 665
and whenCurrent page width is less than or equal to 1047
.
This page comes with two popups:
Popup View image
contains an element calledSlideshow Photos
which shows a list of images (it uses a Bubble plugin called Slick Slideshow).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
- This group stores the data source of the profile page's thing.
Clicking on
Button VIEW PHOTOS desktop
andButton VIEW PHOTOS
mobile will showPopup View image
How to set up
Remove or add additional UI components in
Group Details
Resize
Group page860Group
and add other modules inside of it
If you add more modules, please resize Group PLACEHOLDER 2 so that it is not overlapping with any other elements (for responsiveness).
Update
var - dummy data's
data type and data source
To make the profile page dynamic, update the
page's
type of content and setvar - dummy data's
data source toCurrent page's data type
To change the default image on which main image to show when the page is loaded, open
Group Pic main
andGroup Pic main Mobile
and update the dynamic image data sources.
To change the list of images displayed in the top section, update
RepeatingGroup images's
type of content and data source.
Resize
Group Sidebar menu
and add more UI components inside of it.
If you add more UI components, please resize Group Sidebar PLACEHOLDER
so that it is not overlapping with any other elements (for responsiveness).
Add workflows to
Button Schedule
andButton BOOK A TOUR
Open
Popup View image
and update the data source forSlideshow Photos
Move the
footer
and make sure the bottom of thefooter
aligns with the bottom ofFloatingGroup Book button
.
Last updated