设计Section 12：Related PCB Assembly Services

最新推荐文章于 2026-06-26 20:40:47 发布

原创最新推荐文章于 2026-06-26 20:40:47 发布 · 297 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#tensorflow #人工智能 #python

这个区块只做 Related Services 内链卡片。

不做：

FAQ Schema
FAQ 区
Ninja Tables
Fluent Forms
Custom HTML
Gutenberg Spacer
Gutenberg Separator
Phase 2 占位内容

一、使用组件结构

Gutenberg Group
└── Gutenberg Group
    ├── Gutenberg Group：橙色短线
    ├── Gutenberg Heading：H2
    ├── Gutenberg Paragraph：说明文字
    └── Stackable Columns：4 列卡片
        ├── Stackable Column：卡片 1
        ├── Stackable Column：卡片 2
        ├── Stackable Column：卡片 3
        └── Stackable Column：卡片 4

二、Block Edit 操作步骤

1）外层 Section

添加组件：

Gutenberg → Group

设置：

Alignment: Full width

Additional CSS class(es)：

suga-pillar-section suga-pillar-section--12 suga-pillar-section--related-services

不要在页面里输入：

Section 12

2）内层容器

在外层 Group 里面添加：

Gutenberg → Group

设置：

Alignment: Full width

Additional CSS class(es)：

suga-pillar-section__inner

3）橙色短线

在内层 Group 里面添加：

Gutenberg → Group

Additional CSS class(es)：

suga-pillar-kicker-line

这个 Group 保持空白。

不要用 Separator。

4）H2 标题

添加组件：

Gutenberg → Heading

内容：

Related PCB Assembly Services

设置：

Heading level: H2

Additional 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: 4

Additional CSS class(es)：

suga-stack-grid suga-stack-grid--4 suga-related-services-grid

Stackable Columns 里面不要手动设置：

背景
padding
border
shadow
width

这些全部交给 CSS。

四、4 张卡片内容

每一列都是：

Stackable Column

每个 Column 内部放 4 个 Gutenberg 块：

Gutenberg Paragraph：Eyebrow
Gutenberg Heading：H3
Gutenberg Paragraph：描述
Gutenberg Paragraph：链接

Card 1

Column Additional CSS class(es)：

suga-related-card suga-related-card--sibling

内容：

块	内容	Class
Paragraph	Sibling Service	`suga-related-card__eyebrow`
H3	Prototype PCB Assembly	`suga-related-card__title`
Paragraph	Early-stage validation builds, small runs, fast iterations.	`suga-related-card__text`
Paragraph Link	Prototype PCB Assembly	`suga-related-card__link`

链接 URL：

/pcb-assembly-services/prototype/

Card 2

Column Additional CSS class(es)：

suga-related-card suga-related-card--sibling

内容：

块	内容	Class
Paragraph	Sibling Service	`suga-related-card__eyebrow`
H3	Quick-Turn PCB Assembly	`suga-related-card__title`
Paragraph	Accelerated schedule builds when speed is the priority.	`suga-related-card__text`
Paragraph Link	Quick-Turn PCB Assembly	`suga-related-card__link`

链接 URL：

/pcb-assembly-services/quick-turn/

Card 3

Column Additional CSS class(es)：

suga-related-card suga-related-card--sibling

内容：

块	内容	Class
Paragraph	Sibling Service	`suga-related-card__eyebrow`
H3	Consigned Assembly	`suga-related-card__title`
Paragraph	Customer-supplied materials, assembly-only engagement.	`suga-related-card__text`
Paragraph Link	Consigned Assembly	`suga-related-card__link`

链接 URL：

/pcb-assembly-services/consigned/

Card 4

Column Additional CSS class(es)：

suga-related-card suga-related-card--parent

内容：

块	内容	Class
Paragraph	Parent Service	`suga-related-card__eyebrow`
H3	PCB Assembly Services	`suga-related-card__title`
Paragraph	Complete PCB assembly service overview — parent service page.	`suga-related-card__text`
Paragraph Link	PCB Assembly Services	`suga-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-prefix="single_page"] .suga-pillar-section--12,
body[data-prefix="single_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-prefix="single_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-prefix="single_page"] .suga-related-services-grid > .stk-row,
body[data-prefix="single_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-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-column,
body[data-prefix="single_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-prefix="single_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-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__eyebrow,
body[data-prefix="single_page"] .suga-related-card__eyebrow p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .suga-related-card__eyebrow,
body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__eyebrow p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__title,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .suga-related-card__title,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__text,
body[data-prefix="single_page"] .suga-related-card__text p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .suga-related-card__text,
body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__link {
  margin: auto 0 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-related-card__link,
body[data-prefix="single_page"] .suga-related-card__link p,
body[data-prefix="single_page"] .suga-related-card__link .stk-block-text__text {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

body[data-prefix="single_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-prefix="single_page"] .suga-related-card__link a::after {
  content: " →";
}

body[data-prefix="single_page"] .suga-related-card__link a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* 10. Remove final unwanted margins */

body[data-prefix="single_page"] .suga-pillar-section--12 .suga-pillar-section__inner > :last-child,
body[data-prefix="single_page"] .suga-pillar-section--related-services .suga-pillar-section__inner > :last-child,
body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content > :last-child,
body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12,
  body[data-prefix="single_page"] .suga-pillar-section--related-services {
    --suga-section-padding-top: 46px;
    --suga-section-padding-bottom: 42px;
  }

  body[data-prefix="single_page"] .suga-related-services-grid > .stk-row,
  body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12,
  body[data-prefix="single_page"] .suga-pillar-section--related-services {
    --suga-section-padding-top: 40px;
    --suga-section-padding-bottom: 36px;
  }

  body[data-prefix="single_page"] .suga-related-services-grid > .stk-row,
  body[data-prefix="single_page"] .suga-related-services-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content,
  body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-inner-blocks {
    padding: 24px 20px 22px !important;
  }

  body[data-prefix="single_page"] .suga-related-card__title,
  body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12,
body[data-prefix="single_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-prefix="single_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-prefix="single_page"] .suga-related-services-grid > .stk-row,
body[data-prefix="single_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-prefix="single_page"] .suga-related-services-grid > .stk-row > .stk-column,
body[data-prefix="single_page"] .suga-related-services-grid > .stk-row > .stk-block-column,
body[data-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-column,
body[data-prefix="single_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-prefix="single_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-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent > .stk-column-wrapper > .stk-block-content,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__title,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .suga-related-card__title,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__text,
body[data-prefix="single_page"] .suga-related-card__text p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card--parent .suga-related-card__text,
body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text p,
body[data-prefix="single_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-prefix="single_page"] .suga-related-card__link {
  margin: auto 0 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-related-card__link,
body[data-prefix="single_page"] .suga-related-card__link p,
body[data-prefix="single_page"] .suga-related-card__link .stk-block-text__text {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

body[data-prefix="single_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-prefix="single_page"] .suga-related-card__link a::after {
  content: none !important;
}

body[data-prefix="single_page"] .suga-related-card__link a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12 .suga-pillar-section__inner > :last-child,
body[data-prefix="single_page"] .suga-pillar-section--related-services .suga-pillar-section__inner > :last-child,
body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content > :last-child,
body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12,
  body[data-prefix="single_page"] .suga-pillar-section--related-services {
    --suga-section-padding-top: 46px;
    --suga-section-padding-bottom: 42px;
  }

  body[data-prefix="single_page"] .suga-related-services-grid > .stk-row,
  body[data-prefix="single_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-prefix="single_page"] .suga-pillar-section--12,
  body[data-prefix="single_page"] .suga-pillar-section--related-services {
    --suga-section-padding-top: 40px;
    --suga-section-padding-bottom: 36px;
  }

  body[data-prefix="single_page"] .suga-related-services-grid > .stk-row,
  body[data-prefix="single_page"] .suga-related-services-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content,
  body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-inner-blocks {
    padding: 24px 20px 22px !important;
  }

  body[data-prefix="single_page"] .suga-related-card__title,
  body[data-prefix="single_page"] h3.suga-related-card__title {
    font-size: 18px !important;
  }
}