Section

Collection · Hero Banner

2 个模板实例,20 个 section 配置,0 类 block。

真实模板变体

Schema

{
  "name": "Collection · Hero Banner",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "collection-hero-banner"
    },
    {
      "type": "header",
      "content": "Images"
    },
    {
      "type": "image_picker",
      "id": "image_d",
      "label": "Background image (Desktop)"
    },
    {
      "type": "image_picker",
      "id": "image_m",
      "label": "Background image (Mobile)"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading",
      "default": "<p>Electric Toothbrush</p>"
    },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag (SEO)",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "p",
          "label": "Paragraph"
        }
      ],
      "default": "h2"
    },
    {
      "type": "richtext",
      "id": "subheading",
      "label": "Subheading",
      "default": "<p>Experience The World's Smartest Toothbrush Smart Pressure Sensor. Custom Modes. Guided Brushing.</p>"
    },
    {
      "type": "header",
      "content": "Layout & Colors"
    },
    {
      "type": "select",
      "id": "content_align",
      "label": "Content horizontal position",
      "options": [
        {
          "value": "flex-start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "flex-end",
          "label": "Right"
        }
      ],
      "default": "flex-start"
    },
    {
      "type": "select",
      "id": "content_vertical_desktop",
      "label": "Content vertical position (Desktop)",
      "options": [
        {
          "value": "flex-start",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Middle"
        },
        {
          "value": "flex-end",
          "label": "Bottom"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "content_vertical_mobile",
      "label": "Content vertical position (Mobile)",
      "options": [
        {
          "value": "flex-start",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Middle"
        },
        {
          "value": "flex-end",
          "label": "Bottom"
        }
      ],
      "default": "flex-end"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "content_max_width",
      "label": "Content max width",
      "min": 320,
      "max": 900,
      "step": 10,
      "unit": "px",
      "default": 520
    },
    {
      "type": "range",
      "id": "container_max_width",
      "label": "Container max width",
      "min": 960,
      "max": 1600,
      "step": 10,
      "unit": "px",
      "default": 1310
    },
    {
      "type": "range",
      "id": "min_height_desktop",
      "label": "Min height (Desktop)",
      "min": 200,
      "max": 700,
      "step": 10,
      "unit": "px",
      "default": 320
    },
    {
      "type": "range",
      "id": "min_height_mobile",
      "label": "Min height (Mobile)",
      "min": 160,
      "max": 600,
      "step": 10,
      "unit": "px",
      "default": 280
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Subheading color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "aria_label",
      "label": "Accessibility label",
      "default": "Collection hero banner"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Collection · Hero Banner"
    }
  ]
}