EN
Searching...

Image List Section

Use the Image list section when you want to display a set of images and relevant text.

Using this section you can easily link different pages within the website or add any links where you want to add an image and description too for each link.

In this article:

  1. What is an Image List?
  2. Adding Image List section
  3. Add and Edit list items
  4. Sequencing list items
  5. Deleting list items
  6. Changing section layout
  7. Style options
  8. The Carousel Style
  9. Live example

Image List

  • An image list is a collection of images where you can add a description for the image, and add a link or button to connect it with any other page on the website or any other link.

Add Image List section

  • A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
  • On your page, click on the blue + icon to add a New Section to your page.

  • You will now see the section categories on the left side.
  • Choose the List (1) category and click on the Image List tab (2) where you can choose from different layouts of the Image List (3).

  • Choose any section layout and click on it to add it to your page.

Note

  1. You can manage the section width from the section settings and the content width from the content style.
  2. The ideal image size that you need to upload in this section will depend on the number of columns. Know more.
  3. Keep the titles, subtitles, and descriptions short and crisp.
  4. In the description field, hit the Enter button to give a line break and the Shift+Enter button to start from the very next line.

Add and Edit list items

Add list item

Once you have added the section:

  • Click on the Edit Image List (1) button to open the List Item Panel.

  • Click on the Add Item (2) button to add a new list item.
  • You can choose to Duplicate or Delete (3) the list items.

Edit list item

Click on the list item that you want to edit. It will open the particular List item editing options.

From here, you can:

  • Upload / Remove Image (1) for the list item. You can also set the Image Accent Color from here which will be displayed on image hover.
  • Add a Title (2), Subtitle (3), and Description (4) of the list item.
  • You may not find the option of subtitle and description in particular list items depending on the layout you choose.
    Before adding the description, check this article.

  • Click on the Link Builder icon of the Title Link (5) to open the link builder to link the list item title to any page. Know more about Link Builder.
  • Set the Link to open in a new tab or in the same tab (6).
  • Add any type of Link (7) to the list item. You can add a Button/Image link/Social Icon/Text Link. Learn more.
  • Save (8) your changes.

See editing an image list item in action:

Sequence list items

  • You can easily drag and drop the list items to change the sequence.

See sequencing the image list items in action: 

Delete a list item

Once you have added a list item, you can edit and delete it.

  • Click on the Delete icon next to the image list item.
  • Tne, click on the Delete button in the confirmation popup.
  • Finally, save your changes.

See deleting an image list item in action: 

Note

List items once deleted can not be recovered.

Section Layout

  • Click on the Edit Image List (1) button.

  • Choose the Layout (2) tab.
  • Select (3) the layout for your section and Save (4) the changes.

 

Pro Tip

To create a Full-Width Section / Tabbed List Section, choose any layout ranging from 25 to 29.

Notes

  • You can easily add a tabbed list layout to your page.
  • You have the option to select from a horizontal tabbed / vertical tabbed layout.
  • It helps in making a comparison-based section.

Style your section

  • Click on Edit Image List (1) button.

  • Choose the Style (2) tab.
  • Change the Style for the section elements and Save (3) your changes.

You will have multiple style options for the section: 

  1. Items Style Options
  2. Mobile Display
  3. Image Options
  4. Image Hover Options
  5. Border Options
  6. Size & Space
  7. Section Headline
  8. Text Options
  9. Card Options
  10. Shadow Options
  11. Buttons & Links

Items 

  1. Choose to Show Items in rows and columns or carousel 
    • If you have chosen the rows and columns option, the list items will be arranged in rows and columns. In this case, you need to specify the number of rows and columns.
    • If you have chosen the carousel option, the list items will be presented as a slideshow. Know more.
  2. Set the Number of Columns for the image list. You can choose from 1 to 10 columns.
  3. Specify the Space Between Columns of the list items.
  4. Specify the Space Between Rows of the list items.
  5. Choose the Content Order i.e., the images of the list items to be displayed first or the associated text.
  6. Align the Content Horizontally in the Image List. You can set them to be left, right or center aligned.
  7. Align the Content Vertically in the Image List. You can set them to be top, center and bottom aligned.

If Carousel option is selected in Step 1, then you will see the following additional options:

  1. Choose to Loop the Carousel or not.
  2. In case of the Carousel, choose the Navigation Controls. You can choose between No Controls, Arrows – Bottom Center/Top Right/Bottom Right, Chevron, or Dots.

Mobile Display

  1. Set the number of Grid Columns for mobile devices. You can set it to a maximum of 3 columns.
  2. Define the Spacing between grids (in pixels).

Device-Specific Column Layout Based on Studio Settings:

Images 

  1. Choose the Image Crop for the list items. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
  2. Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the Corner Radius of the list item images. Know more.

Tip

Using the corner radius field, you can create different shapes of list item images. In case you specify 500 px here, the images would display in a circle shape.

  • In case you have chosen split corners, you can set different corner radius for each corner.

On Image Hover 

  1. Choose the Image Hover Color to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
  2. If you have chosen the specify color option then set the Base hover color and opacity for the list items.
  3. Set the Elements color for the list items of the section.
  4. Choose to Animate the list item images on hover by clicking on Yes. Check this feature on a live page.
  5. Choose an Animation Style for images when the cursor is hovered over them.

Border Options

  1. Enable / Disable border around the images by switching the toggle.
  2. Choose to have a common border on all sides of images or you can specify the borders separately for each side.
  3. Specify the width of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
  4. Select the Border Color from color picker.
  5. Select a preferred Border Style from the dropdown.
  6. Determine the border width for mobile devices, aligning it with the width chosen for desktop.

Size & Space 

  1. Specify the Image Width for list items.
  2. Specify the Content Width for the list items.
  3. Specify the Space below Section Headline in px.
  4. Specify the Space below images of the list items (in %).
  5. Specify the Space below the titles of the list items (in %).
  6. Specify the Space below the Subtitles of the list items (in %).

Section Headline

  1. Enable/Disable the Divider between the section headline and the section content.
  2. Set the thickness of divider (in px).
  3. Specify the Divider Color from color picker.
  4. Horizontally Align the section headline text. You can set it to Left, Center, and Right.

Text

  1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
  2. Set the Title font style for the list items of the section.
  3. Set the Subtitle font style for the list items of the section.
  4. Set the default Description font style for the list items of the section.

Cards

Shadow

  1. Display – Choose to show the shadow behind the list items always or on hover only.
  2. Style – Choose from existing presets or create a custom shadow.
    In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
  3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

Buttons & Links

  1. See how to manage the styling of Buttons & Links.
  2. Save all the style changes.

The Carousel Style

The Carousel style shows list items as a slideshow i.e., the list items will be cycled after each other.

See how the carousel style works: 

Here’s a live Image List:

View a live demo site. 

See how the Corner Radius works: 

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us