Section

Multicolumn

4 个模板实例,16 个 section 配置,1 类 block。

真实模板变体

Schema

{
  "name": "Multicolumn",
  "class": "section-multicolumn",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Multicolumn"
    },
    {
      "type": "checkbox",
      "id": "heading_left",
      "default": false,
      "label": "Left align heading"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Add a short description for this section</p>"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Make section full width",
      "default": true
    },
    {
      "type": "select",
      "id": "display_type",
      "options": [
        {
          "value": "grid",
          "label": "Grid"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "default": "grid",
      "label": "Display type"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt to image"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "square",
          "label": "Square"
        },
        {
          "value": "circle",
          "label": "Circle"
        }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 4,
      "label": "Number of columns on desktop"
    },
    {
      "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": "heading_size",
      "label": "Content heading size",
      "options": [
        {
          "value": "h3",
          "label": "Extra Large"
        },
        {
          "value": "h4",
          "label": "Large"
        },
        {
          "value": "h5",
          "label": "Medium"
        },
        {
          "value": "h6",
          "label": "Small"
        }
      ],
      "default": "h5"
    },
    {
      "type": "header",
      "content": "Grid"
    },
    {
      "type": "checkbox",
      "id": "mobile_swipe",
      "default": false,
      "label": "Enable swipe on mobile"
    },
    {
      "type": "header",
      "content": "Carousel"
    },
    {
      "type": "checkbox",
      "id": "show_progress_bar",
      "label": "Show progress bar",
      "default": true
    },
    {
      "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": "column",
      "name": "Column",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "770 x 770 .jpg recommended."
        },
        {
          "type": "checkbox",
          "id": "image_full_width",
          "label": "Fit image to column",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "retina",
          "label": "Enable retina",
          "default": true,
          "info": "Image will be displayed at half the size, making it look crisp on retina screens."
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Description"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multicolumn",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}