It is a dedicated section where you can display a set of logos and relevant text by adding items to the list.
Ideally, you can use this section in your website’s pre-footer to display your affiliates, brands, awards and recognitions, etc.
In this article:
- Add Logo Section
- Manage Logo Section
- Add & Edit List Items
- Sequencing List Items
- Manage Layout
- Style Logo Section
Add Logo Section
- To add a section, you need to add a page to your website first.
- On your page, click on the blue + icon to add a new section.
- You will now see the section categories on the left side.
- Scroll to Logo (1) section and click on it. A screen will pop up allowing you to choose from different layouts (2) of the Logo Section.
- Choose any section layout and click on it to add it to your page.
Manage Logo Section
Once you have added the section:
- Click on the Manage Logo (1) button to open the Logo Section (2) Settings.
Add & Edit List Items
Add a List Item
- Click on the Add Item (1) button to add a new item to the list.
- Duplicate or Delete (2) the list items.
Edit List Item
Click on the list item that you want to edit. It will open that particular List item’s editing options. From here you can:
- Upload or Delete (1) the image. You can also edit the Accent Color which will be visible while hovering cursor over the image.
- Add a Title (2), Subtitle (3), and Description (4) of the list item.
Note
Before adding the description, check this article.
- Link a List Item’s Title by clicking on the toggle (5). Click here to know more.
- Set the Link to open in a New Tab or in the Same Tab (6).
- Add other Links (7) to the list item. You can add a Button/Text Link/Image link/Social Icon. Learn more.
- Save (8) your changes.
Sequencing List Items
You can easily change the sequence of the List Items by Dragging and Dropping them. See sequencing the Logo Items List in action:
Manage Layout
- Click on the Edit Logo button to open the section editing panel.
- Choose the Layout tab.
- From here, you can easily change the layout of the section even after adding it to the page.
While changing the layout, you will see the section-related layouts on the top.
Apart from these, you also have the option to choose a layout from other sections under the More Layouts heading.
Style Logo Section
You can customize different aspects of the Logo section using various styling options. To navigate to the Styling options, click on the Manage Logo (1) button, and choose the Style (2) tab.
Items Styling options
- Display the items in Rows and Columns or in Carousel mode (1).
- Set the Number of Columns (2). You can select up to a maximum of 10 columns.
- Specify the Space Between Columns (3) of the list items. This value is defined in Pixels.
- Specify the Space Between Rows (4) of the list items. This option will not be visible if the Carousel mode is active. This value is defined in Pixels.
- Choose the Content Order (5) i.e., the images of the list items to be displayed first or the associated text.
- Manage the Content Alignment within the section Horizontally (6).
- Manage the Content Alignment within the section Vertically (7).
- Specify the Number of Columns on Mobile devices (8). You can select up to a maximum of 3 columns.
- Manage the spacing between the items Vertically and Horizontally (9).
Image Styling options
- Choose the Image Crop (10) for the list items. You can set the images as Square, Circle, Landscape, Portrait, and Original.
- Using Corner Radius (11) the corners of the images can be managed for their sharpness. You can also choose to manage the corners Individually.
- Choose the Image Hover Color (12) to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
- Choose the Base Color (13) and Opacity that you want while hovering over the images. This option will only be visible when Specify Color is selected.
- Set the Elements Color (14) for the list items of the section.
- Choose to Animate Images (15) while hovering. If enabled, you can also change the Animation Style (16).
Shape Mask
- Shape Mask: Enable this toggle to apply a shape mask to the images in the Logo section. Once enabled, the selected shape will visually clip the image into that form.
- Select Shape: Choose from various predefined shapes to apply to your images. This allows you to creatively stylize your content by displaying images in unique forms like rounded, diamond, drop, etc.
- Stretch: Enable this option to stretch the selected shape to better fit the image container. This ensures the shape fills the available space proportionally, enhancing visual alignment across different screen sizes.
Notes
- The Stretch option is layout-dependent – It may not appear under certain layouts. On layouts where text like title or subtitle is displayed over the image, the entire Shape Mask option might not be available.
- The Stretch setting depends on multiple factors – including image size, alignment, and crop settings defined under the Style tab.
- If Image Crop is set to Original, the image’s actual dimensions will determine whether it gets stretched vertically or horizontally.
Size & Space and Text Style options
- Specify the Image Width (17) for items’ images.
- Specify the Content Width (18) for the List Items.
- Specify the Space Below Section Headline (19) in Pixels.
- Specify the Space Below Image (20) in Percent.
- Specify the Space Below Title (21) of the List Items in Percent.
- Specify the Space Below Subtitle (22) of the List Items in Percent.
- Specify the Title (23) Font Style of the List Items.
- Specify the Subtitle (24) Font Style of the List Items.
- Specify the Description (25) Font Style of the List Items.
Cards and Shadow
- See how to manage Cards (26).
- Specify how to Display (27) the shadow.
- Style (28) the shadow. There are several Presets and also you can Customize the shadow with Box Shadow Generator tool.
- If the Presets option is selected, then Choose Shadow Styles (29) from the dropdown.
Buttons & Links
- See how to manage the styling of Buttons & Links (30).
