The promo gallery makes it possible for you to show some promotion banners within your page!
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Promo gallery', then click on 'Promo gallery' under Theme sections.
3) Done, your promo gallery is added!
General settings
The general settings contains the settings for the styling and layout of the testimonials section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Columns per row:
Set the number of columns you want for your gallery. The maximum here is 4 columns (banners) in one row. The design will change on base of how many banners you use.
Show zoom effect on hover on banner images:
Check this box if you want the image to get an zoom effect when you hover over the images
Mobile Layout
Layout:
Select the layout for mobile.
Spacing
Bottom spacing desktop/mobile:
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
How to configure the promo gallery banners and change the images & text?
By default, there are 3 images/banners added, you can edit them, remove them or add more.
1. Editing the image banners
To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the following sidebar will open.
Image:
Set your images here, for example a nice banner for a sale.
Video:
You can also select a video to show in your banner. There are two ways to show the video:
When you choose an image as well, there will be a "play" button showing on top of your image and the video will play in a popup.
When you don't choose an image, the video will play inline in the banner
Image/video overlay opacity:
Want to show an colored overlay over the image/video? Set the opacity here.
This comes in handy when you use text over the banner image/video to make it easier to read.
100% = full color
0% = no overlay
Color scheme:
Select the color scheme for the overlay. You can select the color scheme here.
Button scheme:
Select the color scheme for the button. You can select the color scheme here.
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Content position:
Set the position of the content within the image (text + button)
Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".
Heading:
Fill in the title of your banner. Don't want to show a title? Simply leave the field empty!
Description:
In the text field you can fill in more text to reinforce the title of your banner. For this example we're going to use: 'Give your customers more details'.
Button label:
This text will show on the button, for example: 'View products'
Link:
Enter a link for the button, for example to your products sale page.
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
2. How to remove an image banner?
Don't want to use 3 banners? But you want to use 2? You can always remove the banners one by one to fit in your needs.
To remove the blocks you simply click on the block you want to remove in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.
3. How to add a new/more image banners?
Do you want to use more images? That's possible, no worries!
To add blocks you simply click on the 'Add promo banner' button in your sidebar on the left of your screen.
After you clicked on 'Add Image banner', a new block will be added. You can edit the block like explained in step 1.