Section

Gallery

8 个模板实例,14 个 section 配置,1 类 block。

真实模板变体

Schema

{
  "name": "Gallery",
  "class": "section-gallery",
  "settings": [
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Number of columns on desktop"
    },
    {
      "type": "select",
      "id": "section_width",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "full-width-row",
          "label": "Full width"
        },
        {
          "value": "full-width-row-full",
          "label": "Full width, no spacing"
        }
      ],
      "default": "grid",
      "label": "Section width"
    },
    {
      "type": "checkbox",
      "id": "mobile_swipe",
      "default": false,
      "label": "Enable swipe on mobile"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt to image"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "landscape",
          "label": "Landscape"
        },
        {
          "value": "square",
          "label": "Square"
        }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Content position",
      "options": [
        {
          "value": "top-left",
          "label": "Top left"
        },
        {
          "value": "top-center",
          "label": "Top center"
        },
        {
          "value": "top-right",
          "label": "Top right"
        },
        {
          "value": "middle-left",
          "label": "Middle left"
        },
        {
          "value": "middle-center",
          "label": "Middle center"
        },
        {
          "value": "middle-right",
          "label": "Middle right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom right"
        }
      ],
      "default": "bottom-left"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left",
      "label": "Content alignment"
    },
    {
      "type": "select",
      "id": "column_spacing",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small",
      "label": "Column spacing"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        {
          "value": "h1",
          "label": "Large"
        },
        {
          "value": "h2",
          "label": "Medium"
        },
        {
          "value": "h3",
          "label": "Small"
        }
      ],
      "default": "h2"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Overlay opacity",
      "default": 70
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_top_spacing",
      "default": false,
      "label": "Remove top spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_bottom_spacing",
      "default": false,
      "label": "Remove bottom spacing"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "720 x 550 .jpg recommended."
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Add a tagline"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "Heading"
        },
        {
          "type": "textarea",
          "id": "text",
          "default": "Pair text with an image to focus on your chosen image",
          "label": "Description"
        },
        {
          "id": "link_label",
          "type": "text",
          "label": "Button label",
          "default": "Explore",
          "info": "Leave the label blank to hide the button."
        },
        {
          "id": "link",
          "type": "url",
          "label": "Button link"
        },
        {
          "type": "checkbox",
          "id": "use_text_button",
          "label": "Use text button",
          "default": false
        },
        {
          "id": "block_link",
          "type": "url",
          "label": "Image link",
          "info": "This will allow you to set a link to whole image."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}