List gallery

Note: To create list template, we need to create data field for it. In this example we need Heading, Description and Background image data fields

List gallery example

List gallery is a gallery custom field data with custom design. We can also select gallery mode like fade or slider 
list-gallery-example

Step 1: Setting up list data fields and gallery mode

In this example, we will create a list module with various data fields for gallery.
  • In Modules panel , find and select List module
  • Select Data source tab, and select Custom fields
  • Click Add fields and add following data fields
    • Type: Text - Name: Heading
    • Type: Text - Name: Description
    • Type: Picture - Name: Background
  • Go to List template tab
  • On right site, enable Gallery option, and set Fade Animation with 5000 Duration
  • Check Dots and Navigation arrows checkboxes below
  • Click Save to save List module
step1-setup-listmodule

Step 2: Setting up layer module

  • Select Add module in List template tab
  • Find and select Layer module
  • On right side of Layer module, select Middle option at Vertical alignment
  • In Module setting, select Full width, Background options
  • Select Background tab, select Plug-in icon, select 'Background' name which we have created in Step 1. Then click OK
  • In Full width tab, select 'Expand entire module content' to set fullwidth for both content and background. Then click OK
step2-setup-layer-module

Step 3: Setting up list template

  • Select Layer tab in Layer module
  • Click Add module, find and select Module module
  • Click Add module, find and select Heading module. 
  • In Title input, select Plug in icon, and select Heading option which we have created in Step 1. Select Heading style below then click OK to save
  • Click Add module, find and select Text module. 
  • In HTML input, select Plug in icon, and select Description option which we have created in Step 1. Then click OK to save
  • Click OK to save Module Group
step3-setup-modulegroup

Step 4: Adding data to gallery

  • Go to Data source tab, in the 'Title/name of the elements', copy any field below to input. In this example we use [Heading]
  • Click Add in Data tab of List module to add gallery slider data
  • There are 3 Data fields for a gallery slide which we have created in Step 1 and 3. 
  • Input your own data and add some more slide
  • Click OK and explore the gallery slider
step4-adding-data