Section

内容文章

3 个模板实例,33 个 section 配置,2 类 block。

真实模板变体

Schema

{
  "name": "内容文章",
  "settings": [
    {
      "type": "header",
      "content": "Section Content"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Expert Guides & Tips"
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "Subheading",
      "default": "Discover helpful articles, buying guides, and expert advice to make the most of your personal care routine."
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "select",
      "id": "color_mode",
      "label": "Color mode",
      "default": "custom",
      "options": [
        {
          "value": "custom",
          "label": "Use custom colors"
        },
        {
          "value": "dark",
          "label": "Dark"
        },
        {
          "value": "light",
          "label": "Light"
        }
      ]
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Section Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#cccccc"
    },
    {
      "type": "header",
      "content": "Tab Bar"
    },
    {
      "type": "color",
      "id": "tab_bar_background",
      "label": "Tab Bar Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tab_bar_border_color",
      "label": "Tab Bar Border",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tab_active_background",
      "label": "Active Tab Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "tab_active_text_color",
      "label": "Active Tab Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tab_inactive_text_color",
      "label": "Inactive Tab Text Color",
      "default": "#666666"
    },
    {
      "type": "header",
      "content": "Card"
    },
    {
      "type": "color",
      "id": "card_background",
      "label": "Card Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_title_color",
      "label": "Card Title Color",
      "default": "#151515"
    },
    {
      "type": "color",
      "id": "card_desc_color",
      "label": "Card Description Color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "readmore_color",
      "label": "Read More Color",
      "default": "#888888"
    },
    {
      "type": "range",
      "id": "card_radius",
      "label": "Card Radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "card_gap",
      "label": "Card Gap",
      "min": 8,
      "max": 40,
      "step": 2,
      "default": 24,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "color",
      "id": "nav_arrow_background",
      "label": "Prev Arrow Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "nav_arrow_background_active",
      "label": "Next Arrow Background",
      "default": "#888888"
    },
    {
      "type": "color",
      "id": "nav_arrow_color",
      "label": "Arrow Icon Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "dot_color",
      "label": "Pagination Dot Color",
      "default": "#888888"
    },
    {
      "type": "color",
      "id": "dot_active_color",
      "label": "Pagination Active Dot Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "cards_per_view",
      "label": "Cards Per View (Desktop)",
      "min": 1,
      "max": 5,
      "step": 0.1,
      "default": 3.2
    },
    {
      "type": "range",
      "id": "cards_per_view_mobile",
      "label": "Cards Per View (Mobile)",
      "min": 1,
      "max": 2,
      "step": 0.1,
      "default": 1.1
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Max Width",
      "min": 800,
      "max": 1600,
      "step": 10,
      "default": 1310,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 200,
      "step": 4,
      "default": 80,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 200,
      "step": 4,
      "default": 80,
      "unit": "px"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Tab Label",
          "default": "Hair Dryers"
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "paragraph",
          "content": "Card belongs to the most recent Tab above it in the block list. Manual fields override the selected blog article fields."
        },
        {
          "type": "article",
          "id": "article",
          "label": "Blog article"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image override"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title override"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description override"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link override"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link Label",
          "default": "READ MORE >"
        },
        {
          "type": "checkbox",
          "id": "open_new_tab",
          "label": "Open link in new tab",
          "default": false
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "内容文章",
      "category": "Custom",
      "blocks": [
        {
          "type": "tab",
          "settings": {
            "label": "Hair Dryers"
          }
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "tab",
          "settings": {
            "label": "Shavers"
          }
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "tab",
          "settings": {
            "label": "Toothbrushes"
          }
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        }
      ]
    }
  ]
}