4.3. Gallery
Last updated
Last updated
The Gallery widget allows you to display a collection of images in an attractive and organized manner on your landing page. You can use the gallery to showcase product categories, photo collections, or images related to the services you offer.
In the sidebar, click on Widgets, then select Gallery.
Click and drag the Gallery widget into your landing page.
Click on the Gallery widget and select Content from the quick setup bar to open the Gallery content editor.
Upload images from the computer.
Click on the Gallery widget and select Design from the quick setup bar to open the Gallery design editor.
Align: Helps you align the Gallery within the container. For more information, see Align.
Sizes: In the design editor, allows you to adjust the size and position of elements on the landing page. For more information, see Sizes.
Display on: Allows you to control the display of the Gallery on different devices, including Desktop and Mobile.
Styles: Allows you to change the background color and shadow effects of the selected Gallery. For more information, see Styles.
Border: Allows you to add and customize the border around the Gallery, and you can also adjust the border radius. For more information, see Border.
Gallery General: Configure general settings for the gallery, including how images are displayed, the number of columns, spacing between images, and other related options.
+ Grid: A way to organize content in a grid format, helping to arrange elements (such as images, text, or widgets) neatly and manageably.
+ Masonry: A type of grid layout that allows elements (such as images) to be arranged unevenly to optimize space and create a visually appealing interface.
Spacing Between: Adjust the spacing between elements.
Image hover effect: Create an effect when the user hovers over an image.
None: No effect when hovering over the image.
Grow: The image enlarges when hovered over.
Shrink: The image shrinks when hovered over.
Pulse: The image flashes or gently enlarges and shrinks.
Pulse grow: The image flashes and enlarges when hovered over.
Pulse shrink: The image flashes and shrinks when hovered over.
Push: The image pushes out of its original position when hovered over.
Pop: The image pops out when hovered over.
Bounce in: The image bounces in from outside when hovered over.
Bounce out: The image bounces out when hovered over.
Rotate: The image rotates when hovered over.
