Section

Sticky Navigation

8 个模板实例,50 个 section 配置,7 类 block。

真实模板变体

Schema

{
  "name": "Sticky Navigation",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "sticky-navigation"
    },
    {
      "type": "text",
      "id": "product_title",
      "label": "Product Title",
      "default": "Product Name"
    },
    {
      "type": "image_picker",
      "id": "product_image",
      "label": "Product Image"
    },
    {
      "type": "header",
      "content": "Button 1"
    },
    {
      "type": "text",
      "id": "button_1_text",
      "label": "Button 1 Text",
      "default": "Buy Now"
    },
    {
      "type": "url",
      "id": "button_1_link",
      "label": "Button 1 Link"
    },
    {
      "type": "checkbox",
      "id": "button_1_show_dropdown",
      "label": "Button 1 Show Product Dropdown",
      "default": true
    },
    {
      "type": "color",
      "id": "button_1_background",
      "label": "Button 1 Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_1_text_color",
      "label": "Button 1 Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_1_border_color",
      "label": "Button 1 Border Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_1_border_width",
      "label": "Button 1 Border Width",
      "default": "1px",
      "info": "e.g. 1px, 2px, 0px"
    },
    {
      "type": "text",
      "id": "button_1_border_radius",
      "label": "Button 1 Border Radius",
      "default": "24px",
      "info": "e.g. 24px, 12px, 0px"
    },
    {
      "type": "color",
      "id": "button_1_hover_background",
      "label": "Button 1 Hover Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_1_hover_text_color",
      "label": "Button 1 Hover Text Color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "id": "button_1_hover_border_color",
      "label": "Button 1 Hover Border Color",
      "default": "#007bff"
    },
    {
      "type": "color_background",
      "id": "button_1_background_gradient",
      "label": "Button 1 Background Gradient",
      "default": "linear-gradient(90deg,#ffffff,#ffffff)",
      "info": "CSS gradient string, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "color_background",
      "id": "button_1_hover_background_gradient",
      "label": "Button 1 Hover Background Gradient",
      "default": "linear-gradient(90deg,#ffffff,#ffffff)",
      "info": "CSS gradient string for hover, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "header",
      "content": "Button 2"
    },
    {
      "type": "text",
      "id": "button_2_text",
      "label": "Button 2 Text"
    },
    {
      "type": "url",
      "id": "button_2_link",
      "label": "Button 2 Link"
    },
    {
      "type": "checkbox",
      "id": "button_2_show_dropdown",
      "label": "Button 2 Show Product Dropdown",
      "default": false
    },
    {
      "type": "color",
      "id": "button_2_background",
      "label": "Button 2 Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_2_text_color",
      "label": "Button 2 Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_2_border_color",
      "label": "Button 2 Border Color",
      "default": "transparent"
    },
    {
      "type": "text",
      "id": "button_2_border_width",
      "label": "Button 2 Border Width",
      "default": "0px",
      "info": "e.g. 1px, 2px, 0px"
    },
    {
      "type": "text",
      "id": "button_2_border_radius",
      "label": "Button 2 Border Radius",
      "default": "24px",
      "info": "e.g. 24px, 12px, 0px"
    },
    {
      "type": "color",
      "id": "button_2_hover_background",
      "label": "Button 2 Hover Background",
      "default": "#5a9bff"
    },
    {
      "type": "color",
      "id": "button_2_hover_text_color",
      "label": "Button 2 Hover Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_2_hover_border_color",
      "label": "Button 2 Hover Border Color",
      "default": "transparent"
    },
    {
      "type": "color_background",
      "id": "button_2_background_gradient",
      "label": "Button 2 Background Gradient",
      "default": "linear-gradient(90deg,#000000,#000000)",
      "info": "CSS gradient string, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "color_background",
      "id": "button_2_hover_background_gradient",
      "label": "Button 2 Hover Background Gradient",
      "default": "linear-gradient(90deg,#5a9bff,#5a9bff)",
      "info": "CSS gradient string for hover, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "header",
      "content": "Button 3"
    },
    {
      "type": "text",
      "id": "button_3_text",
      "label": "Button 3 Text"
    },
    {
      "type": "text",
      "id": "button_3_code",
      "label": "Button 3 Form Code"
    },
    {
      "type": "checkbox",
      "id": "button_3_show_dropdown",
      "label": "Button 3 Show Product Dropdown",
      "default": false
    },
    {
      "type": "color",
      "id": "button_3_background",
      "label": "Button 3 Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_3_text_color",
      "label": "Button 3 Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_3_border_color",
      "label": "Button 3 Border Color",
      "default": "transparent"
    },
    {
      "type": "text",
      "id": "button_3_border_width",
      "label": "Button 3 Border Width",
      "default": "0px",
      "info": "e.g. 1px, 2px, 0px"
    },
    {
      "type": "text",
      "id": "button_3_border_radius",
      "label": "Button 3 Border Radius",
      "default": "24px",
      "info": "e.g. 24px, 12px, 0px"
    },
    {
      "type": "color",
      "id": "button_3_hover_background",
      "label": "Button 3 Hover Background",
      "default": "#5a9bff"
    },
    {
      "type": "color",
      "id": "button_3_hover_text_color",
      "label": "Button 3 Hover Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_3_hover_border_color",
      "label": "Button 3 Hover Border Color",
      "default": "transparent"
    },
    {
      "type": "color_background",
      "id": "button_3_background_gradient",
      "label": "Button 3 Background Gradient",
      "default": "linear-gradient(90deg,#000000,#000000)",
      "info": "CSS gradient string, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "color_background",
      "id": "button_3_hover_background_gradient",
      "label": "Button 3 Hover Background Gradient",
      "default": "linear-gradient(90deg,#5a9bff,#5a9bff)",
      "info": "CSS gradient string for hover, e.g. linear-gradient(90deg,#000000,#FFFFFF)"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "active_color",
      "label": "Active Link Color",
      "default": "#181623"
    },
    {
      "type": "color",
      "id": "dropdown_background",
      "label": "Dropdown Background",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "nav_item",
      "name": "Navigation Item",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Overview"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "channel_link",
      "name": "Channel Link",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Shop"
        },
        {
          "type": "image_picker",
          "id": "logo",
          "label": "Logo Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "products_list",
      "name": "Products List",
      "settings": [
        {
          "type": "image_picker",
          "id": "product_image",
          "label": "Product Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "nav_item_2",
      "name": "Navigation Item 2",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Overview"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "nav_item_3",
      "name": "Navigation Item 3",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Overview"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "nav_item_4",
      "name": "Navigation Item 4",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Overview"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    },
    {
      "type": "nav_item_5",
      "name": "Navigation Item 5",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Overview"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sticky Navigation",
      "blocks": [
        {
          "type": "nav_item",
          "settings": {
            "title": "Overview",
            "link": "#overview"
          }
        },
        {
          "type": "nav_item",
          "settings": {
            "title": "Features",
            "link": "#features"
          }
        },
        {
          "type": "nav_item",
          "settings": {
            "title": "Specs",
            "link": "#specs"
          }
        },
        {
          "type": "nav_item",
          "settings": {
            "title": "Comparison",
            "link": "#comparison"
          }
        }
      ]
    }
  ]
}