🆕Gallery
Overview
The Avonni Gallery Component provides four flexible ways to display content beautifully on your Experience Cloud site:
Carousel: Create an engaging slideshow of images or content cards.
Tabs: Organize content into clearly labeled sections for easy navigation.
Grid: Display items in a neat, multi-column layout.
Gallery: Put your images front and center with a visually striking showcase.
Each display option offers extensive customization to match your site's style and needs.
Connect to Salesforce Data
The Data Source is where you define the content of your carousel. There are two main types of data sources: Manual and Query.
| Data Source Type | Description | When to Use |
|---|---|---|
Manual Data Source | Involves manually entering data for gallery items. Useful for static content or predefined items. | Ideal for content that doesn't change frequently or for quick setup with specific items. |
Query Data Source | Enables fetching data through a query, pulling various records/data points from Salesforce. | Ideal for complex data retrieval or when sourcing. |
Setting a variant
Carousel
The Carousel variant offers a dynamic, engaging way to showcase your content, images, or cards. It's designed to display items sequentially in a slideshow format, making it an excellent choice for highlighting featured content, product images, or important announcements.
When to Use: Utilize the Carousel variant when you want to:
Capture user attention with a visually appealing presentation.
Display multiple items or images in a space-efficient manner.
Create rotating banners or featured content sections on your site.
Features:
Navigation Controls: Navigate the carousel using intuitive controls like arrow buttons or pagination dots.
Auto-Play Option: Set the carousel to cycle through items automatically, with the ability to pause and resume.
Customizable Appearance: Tailor the look and feel of the carousel to match your site's design, adjusting elements like transition effects and display duration.
Tabs
The Tabs variant introduces an organized, tabulated approach to content presentation. This variant is ideal for categorizing information, offering a clean, structured layout that allows users to navigate and access different content sections quickly.
When to Use: Consider the Tabs variant when you need to:
Present categorized information in a clear, segmented format.
Allow users to easily switch between different content sections without leaving the page.
Organize content such as product specifications, service categories, or informational tabs in a user-friendly manner.
Features:
Segmented Content: Organize your content into clearly defined tabs, making it straightforward for users to find and view different sections.
User-Friendly Navigation: Enable users to seamlessly switch between tabs, ensuring a smooth and intuitive interaction.
Customizable Design: Adapt the appearance of the tabs to align with your branding and site aesthetics, modifying elements like tab labels, layout, and color schemes.
Grid
Presents content in a structured, multi-column layout. Each item occupies a cell within the grid.
When to use: Ideal for displaying a collection of items where equal emphasis is desired, such as:
Product listings
Team member profiles
Blog post previews
Features
Customizable number of columns
Ability to define the spacing (gap) between items
Options for images, titles, descriptions, and call-to-action buttons within each grid cell
Gallery
A visually-driven layout that prominently showcases images.
When to use: Best for highlighting image-based content, such as:
Photography portfolios
Product galleries
Image-centric featured content
Features
Focus on large, high-quality images
Options to include captions or lightbox functionality for zooming in on images
Potential for creative layouts and hover effects
Interactions
The "Link to" section determines what happens when a user clicks on an item in your Avonni Gallery. Use this to direct users to detailed pages, open new content, or trigger other actions.
Example:
For example, showcase featured houses in a gallery and allowed users to click on each image to view more details on a separate page.
Styling Appearance
Explore the styling attributes for the Avonni Gallery, each designed to refine the visual presentation of your content, whether you're using the Carousel or Tabs variant:
Size: Adjust the overall dimensions of the gallery to fit perfectly within your layout.
Border: Customize the border style, width, and color to frame your gallery content effectively.
Caption: Style the caption text associated with each item for clarity and emphasis.
Title: Modify the title text for each gallery item to stand out or align with your site's theme.
Content: Tailor the appearance of the main content area within each gallery item for cohesive visual presentation.
Media: Customize how media (images or videos) are displayed, ensuring they complement your gallery's overall design.
Slideshow Item: Style individual items in the carousel, including background, alignment, and spacing.
Slideshow Item Title: Customize the appearance of titles within each carousel item for immediate impact and recognition.
Slideshow Item Description: To enhance readability, tailor the font, size, and color of descriptions in carousel items.
Slideshow Image: For visual consistency, adjust the size and border of images in the carousel.
Slideshow Active Indicator: Style the indicator for the currently viewed item, making it prominent and distinct.
Slideshow Inactive Indicator: Customize indicators for non-active items to ensure smooth navigation through the carousel.
Slideshow Navigation Button: Tailor the appearance of navigation buttons, ensuring they are user-friendly and match your gallery's style.
Tab: Style individual tabs to differentiate between active and inactive content sections.
Tab Border: Customize the border of each tab for clear segmentation and visual appeal.
Active/Hover Tab Border: Style the border of active or hovered-over tabs to guide users visually through their interactions.
Tab Background: Adjust the background color or image of tabs to align with the overall theme of your site.
Tab Label: Customize tab labels' font, size, and color for clarity and visual harmony.
Tab Subtitle: Tailor the appearance of tab subtitles, cohesively providing additional context or information.
Last updated
