这个区块只做Related Services 内链卡片。不做FAQ Schema FAQ 区 Ninja Tables Fluent Forms Custom HTML Gutenberg Spacer Gutenberg Separator Phase 2 占位内容一、使用组件结构Gutenberg Group └── Gutenberg Group ├── Gutenberg Group橙色短线 ├── Gutenberg HeadingH2 ├── Gutenberg Paragraph说明文字 └── Stackable Columns4 列卡片 ├── Stackable Column卡片 1 ├── Stackable Column卡片 2 ├── Stackable Column卡片 3 └── Stackable Column卡片 4二、Block Edit 操作步骤1外层 Section添加组件Gutenberg → Group设置Alignment: Full widthAdditional CSS class(es)suga-pillar-section suga-pillar-section--12 suga-pillar-section--related-services不要在页面里输入Section 122内层容器在外层 Group 里面添加Gutenberg → Group设置Alignment: Full widthAdditional CSS class(es)suga-pillar-section__inner3橙色短线在内层 Group 里面添加Gutenberg → GroupAdditional CSS class(es)suga-pillar-kicker-line这个 Group 保持空白。不要用 Separator。4H2 标题添加组件Gutenberg → Heading内容Related PCB Assembly Services设置Heading level: H2Additional CSS class(es)suga-pillar-h2不要手动设置左对齐。普通 Section 的 H2 仍然走全局居中规则。5说明文字添加组件Gutenberg → Paragraph内容Not the right fit? Here are adjacent service models within our PCB assembly silo.Additional CSS class(es)suga-pillar-lead三、添加 4 列卡片网格添加组件Stackable → Columns设置Columns: 4Additional CSS class(es)suga-stack-grid suga-stack-grid--4 suga-related-services-gridStackable Columns 里面不要手动设置背景 padding border shadow width这些全部交给 CSS。四、4 张卡片内容每一列都是Stackable Column每个 Column 内部放 4 个 Gutenberg 块Gutenberg ParagraphEyebrow Gutenberg HeadingH3 Gutenberg Paragraph描述 Gutenberg Paragraph链接Card 1Column Additional CSS class(es)suga-related-card suga-related-card--sibling内容块内容ClassParagraphSibling Servicesuga-related-card__eyebrowH3Prototype PCB Assemblysuga-related-card__titleParagraphEarly-stage validation builds, small runs, fast iterations.suga-related-card__textParagraph LinkPrototype PCB Assemblysuga-related-card__link链接 URL/pcb-assembly-services/prototype/Card 2Column Additional CSS class(es)suga-related-card suga-related-card--sibling内容块内容ClassParagraphSibling Servicesuga-related-card__eyebrowH3Quick-Turn PCB Assemblysuga-related-card__titleParagraphAccelerated schedule builds when speed is the priority.suga-related-card__textParagraph LinkQuick-Turn PCB Assemblysuga-related-card__link链接 URL/pcb-assembly-services/quick-turn/Card 3Column Additional CSS class(es)suga-related-card suga-related-card--sibling内容块内容ClassParagraphSibling Servicesuga-related-card__eyebrowH3Consigned Assemblysuga-related-card__titleParagraphCustomer-supplied materials, assembly-only engagement.suga-related-card__textParagraph LinkConsigned Assemblysuga-related-card__link链接 URL/pcb-assembly-services/consigned/Card 4Column Additional CSS class(es)suga-related-card suga-related-card--parent内容块内容ClassParagraphParent Servicesuga-related-card__eyebrowH3PCB Assembly Servicessuga-related-card__titleParagraphComplete PCB assembly service overview — parent service page.suga-related-card__textParagraph LinkPCB Assembly Servicessuga-related-card__link链接 URL/pcb-assembly-services/五、前端最终只出现这些文字Related PCB Assembly Services Not the right fit? Here are adjacent service models within our PCB assembly silo. Sibling Service Prototype PCB Assembly Early-stage validation builds, small runs, fast iterations. Prototype PCB Assembly Sibling Service Quick-Turn PCB Assembly Accelerated schedule builds when speed is the priority. Quick-Turn PCB Assembly Sibling Service Consigned Assembly Customer-supplied materials, assembly-only engagement. Consigned Assembly Parent Service PCB Assembly Services Complete PCB assembly service overview — parent service page. PCB Assembly Services不要出现Section 12 Related Services Design Spec Anchor Text Rules Future Placeholder Phase 2 Learn more Click here View service六、Section 12 CSS把下面 CSS 放到当前 V15 CSS 文件最后。这份 CSS 只控制 Section 12不重新定义全局 full-bleed、inner 宽度、H2 对齐。/* SECTION 12 - RELATED PCB ASSEMBLY SERVICES */ /* 1. Section background and rhythm */ body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { background: var(--suga-color-section-blue) !important; --suga-section-padding-top: 52px; --suga-section-padding-bottom: 48px; --suga-related-card-border: #dbe5ee; --suga-related-card-bg: #ffffff; --suga-related-card-text: #52677e; --suga-related-card-title: #102a46; --suga-related-card-dark: #0f3156; } /* 2. Stackable Columns grid */ body[data-prefixsingle_page] .suga-related-services-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-column, body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-block-column { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 3. Stackable column reset */ body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* 4. Default related service card */ body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { display: flex !important; flex-direction: column !important; padding: 26px 22px 24px !important; border: 1px solid var(--suga-related-card-border) !important; border-top: 4px solid var(--suga-color-orange) !important; border-radius: 0 !important; background: var(--suga-related-card-bg) !important; box-shadow: 0 10px 24px rgba(15, 49, 86, 0.06) !important; box-sizing: border-box !important; } /* 5. Parent service card */ body[data-prefixsingle_page] .suga-related-card--parent .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card--parent .stk-column-wrapper .stk-inner-blocks { border-color: var(--suga-related-card-dark) !important; border-top-color: var(--suga-related-card-dark) !important; border-left: 4px solid var(--suga-color-orange) !important; background: var(--suga-related-card-dark) !important; box-shadow: 0 12px 28px rgba(15, 49, 86, 0.16) !important; } /* 6. Eyebrow */ body[data-prefixsingle_page] .suga-related-card__eyebrow, body[data-prefixsingle_page] .suga-related-card__eyebrow p, body[data-prefixsingle_page] .suga-related-card__eyebrow .stk-block-text__text { margin: 0 0 18px !important; padding: 0 !important; color: #314961 !important; -webkit-text-fill-color: #314961 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__eyebrow, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__eyebrow p, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__eyebrow .stk-block-text__text { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; } /* 7. H3 title */ body[data-prefixsingle_page] .suga-related-card__title, body[data-prefixsingle_page] h3.suga-related-card__title { margin: 0 0 18px !important; padding: 0 0 18px !important; border-bottom: 1px solid #e4ebf2 !important; color: var(--suga-related-card-title) !important; -webkit-text-fill-color: var(--suga-related-card-title) !important; font-size: 19px !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; text-align: left !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__title, body[data-prefixsingle_page] .suga-related-card--parent h3.suga-related-card__title { border-bottom-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 8. Description text */ body[data-prefixsingle_page] .suga-related-card__text, body[data-prefixsingle_page] .suga-related-card__text p, body[data-prefixsingle_page] .suga-related-card__text .stk-block-text__text { margin: 0 0 14px !important; padding: 0 !important; color: var(--suga-related-card-text) !important; -webkit-text-fill-color: var(--suga-related-card-text) !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 500 !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text p, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text .stk-block-text__text { color: rgba(255,255,255,0.68) !important; -webkit-text-fill-color: rgba(255,255,255,0.68) !important; } /* 9. Exact-match anchor link */ body[data-prefixsingle_page] .suga-related-card__link { margin: auto 0 0 !important; padding: 0 !important; } body[data-prefixsingle_page] .suga-related-card__link, body[data-prefixsingle_page] .suga-related-card__link p, body[data-prefixsingle_page] .suga-related-card__link .stk-block-text__text { font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } body[data-prefixsingle_page] .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; text-decoration: none !important; font-weight: 800 !important; } body[data-prefixsingle_page] .suga-related-card__link a::after { content: →; } body[data-prefixsingle_page] .suga-related-card__link a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; } /* 10. Remove final unwanted margins */ body[data-prefixsingle_page] .suga-pillar-section--12 .suga-pillar-section__inner :last-child, body[data-prefixsingle_page] .suga-pillar-section--related-services .suga-pillar-section__inner :last-child, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content :last-child, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks :last-child { margin-bottom: 0 !important; margin-block-end: 0 !important; } /* 11. Tablet */ media (max-width: 1024px) { body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { --suga-section-padding-top: 46px; --suga-section-padding-bottom: 42px; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } } /* 12. Mobile */ media (max-width: 782px) { body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { --suga-section-padding-top: 40px; --suga-section-padding-bottom: 36px; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { grid-template-columns: 1fr !important; gap: 16px !important; } body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { padding: 24px 20px 22px !important; } body[data-prefixsingle_page] .suga-related-card__title, body[data-prefixsingle_page] h3.suga-related-card__title { font-size: 18px !important; } }七、检查点发布前检查 5 个地方1. 外层 Group class 是否包含 suga-pillar-section--related-services 2. Stackable Columns class 是否包含 suga-related-services-grid 3. 每个 Stackable Column 是否有 suga-related-card 4. 第 4 张卡片是否是 suga-related-card--parent 5. 链接文字是否是精确锚文本不是 Learn more最容易出错的是第 3 点suga-related-card 要加在 Stackable Column 上不是加在里面的 Paragraph 上。/* SECTION 12 - RELATED PCB ASSEMBLY SERVICES No Eyebrow / No Auto Arrow Version */ /* 1. Section background and local variables */ body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { background: var(--suga-color-section-blue) !important; --suga-section-padding-top: 52px; --suga-section-padding-bottom: 48px; --suga-related-card-border: #dbe5ee; --suga-related-card-bg: #ffffff; --suga-related-card-text: #52677e; --suga-related-card-title: #102a46; --suga-related-card-dark: #0f3156; } /* 2. Stackable Columns grid */ body[data-prefixsingle_page] .suga-related-services-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-column, body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-block-column, body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-column, body[data-prefixsingle_page] .suga-related-services-grid .stk-row .stk-block-column { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 3. Stackable column wrapper reset */ body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* 4. Default related service card */ body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { display: flex !important; flex-direction: column !important; padding: 28px 22px 24px !important; border: 1px solid var(--suga-related-card-border) !important; border-top: 4px solid var(--suga-color-orange) !important; border-radius: 0 !important; background: var(--suga-related-card-bg) !important; box-shadow: 0 10px 24px rgba(15, 49, 86, 0.06) !important; box-sizing: border-box !important; } /* 5. Parent service card */ body[data-prefixsingle_page] .suga-related-card--parent .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card--parent .stk-column-wrapper .stk-inner-blocks { border-color: var(--suga-related-card-dark) !important; border-top-color: var(--suga-related-card-dark) !important; border-left: 4px solid var(--suga-color-orange) !important; background: var(--suga-related-card-dark) !important; box-shadow: 0 12px 28px rgba(15, 49, 86, 0.16) !important; } /* 6. Card title */ body[data-prefixsingle_page] .suga-related-card__title, body[data-prefixsingle_page] h3.suga-related-card__title { margin: 0 0 18px !important; padding: 0 0 18px !important; border-bottom: 1px solid #e4ebf2 !important; color: var(--suga-related-card-title) !important; -webkit-text-fill-color: var(--suga-related-card-title) !important; font-size: 19px !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; text-align: left !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__title, body[data-prefixsingle_page] .suga-related-card--parent h3.suga-related-card__title { border-bottom-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 7. Card description */ body[data-prefixsingle_page] .suga-related-card__text, body[data-prefixsingle_page] .suga-related-card__text p, body[data-prefixsingle_page] .suga-related-card__text .stk-block-text__text { margin: 0 0 18px !important; padding: 0 !important; color: var(--suga-related-card-text) !important; -webkit-text-fill-color: var(--suga-related-card-text) !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 500 !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text p, body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__text .stk-block-text__text { color: rgba(255,255,255,0.68) !important; -webkit-text-fill-color: rgba(255,255,255,0.68) !important; } /* 8. Exact-match anchor link - no auto arrow */ body[data-prefixsingle_page] .suga-related-card__link { margin: auto 0 0 !important; padding: 0 !important; } body[data-prefixsingle_page] .suga-related-card__link, body[data-prefixsingle_page] .suga-related-card__link p, body[data-prefixsingle_page] .suga-related-card__link .stk-block-text__text { font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } body[data-prefixsingle_page] .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; text-decoration: none !important; font-weight: 800 !important; } body[data-prefixsingle_page] .suga-related-card__link a::after { content: none !important; } body[data-prefixsingle_page] .suga-related-card__link a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; } body[data-prefixsingle_page] .suga-related-card--parent .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; } /* 9. Terminal margin guard */ body[data-prefixsingle_page] .suga-pillar-section--12 .suga-pillar-section__inner :last-child, body[data-prefixsingle_page] .suga-pillar-section--related-services .suga-pillar-section__inner :last-child, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content :last-child, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks :last-child { margin-bottom: 0 !important; margin-block-end: 0 !important; } /* 10. Tablet */ media (max-width: 1024px) { body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { --suga-section-padding-top: 46px; --suga-section-padding-bottom: 42px; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } } /* 11. Mobile */ media (max-width: 782px) { body[data-prefixsingle_page] .suga-pillar-section--12, body[data-prefixsingle_page] .suga-pillar-section--related-services { --suga-section-padding-top: 40px; --suga-section-padding-bottom: 36px; } body[data-prefixsingle_page] .suga-related-services-grid .stk-row, body[data-prefixsingle_page] .suga-related-services-grid .stk-row { grid-template-columns: 1fr !important; gap: 16px !important; } body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-block-content, body[data-prefixsingle_page] .suga-related-card .stk-column-wrapper .stk-inner-blocks { padding: 24px 20px 22px !important; } body[data-prefixsingle_page] .suga-related-card__title, body[data-prefixsingle_page] h3.suga-related-card__title { font-size: 18px !important; } }