Creating Pages & Building with Content Blocks

In international export marketing, an enterprise website requires more than just product catalog pages. To effectively engage overseas buyers, factories need specialized landing pages—such as an About Us factory profile, an OEM/ODM Custom Solutions page, an Applications showcase, or an International Trade Show spotlight.

Traditional websites hard-code these layouts into templates, requiring software engineers whenever a section needs adjustment. In SymbolFlow Appsuite, every page is assembled using modular, responsive Content Blocks.

This guide covers how to create new pages and harness the 15 specialized Content Blocks to construct world-class B2B industrial landing pages.

---

1. Creating a New Page

In Payload CMS, all marketing and informational pages are managed within the Pages collection:

Step-by-Step Instructions:

1. Log into your Payload CMS admin panel;
2. Under Collections in the left sidebar, click Pages (页面);
3. Click the Create New button in the top-right corner;
4. In the top Title field, enter the internal and display name, e.g. Custom Rubber Molding Solutions. This field is localized (— en, — zh);
5. In the right sidebar, define the Slug: enter custom-manufacturing (the public URL path becomes /custom-manufacturing or /zh/custom-manufacturing).

---

2. The 4 Central Page Configuration Tabs

The page editor organizes settings into 4 structured tabs:

Tab Name	Key Responsibility & Configuration Highlights
Hero	Defines the visual entry point above the fold. Choose from 3 styles: • High Impact: Full-width visual background, ideal for homepages or aerial plant imagery; • Medium Impact: Classic two-column split with text and featured image, optimal for product solutions; • Low Impact: Clean, typography-driven header, best for text-centric documentation or contact pages.
Content	The primary body workspace where you assemble your modular page using the layout (Blocks) field.
SEO	Fine-tune the localized Meta Title, Meta Description, Open Graph social share image (Meta Image), and structured JSON-LD data.
Top Banner	(Optional) Configure a page-specific announcement ribbon (e.g. for upcoming trade fairs), overriding the global site banner.

[!IMPORTANT] Independent Multi-language Layouts (Localized Layout): The layout field is natively localized. When you design a layout with 6 content blocks in English (en), switching the language dropdown to Chinese (zh) does not automatically copy over those blocks. You must configure and populate the layout for each language. This provides the flexibility to feature environmental certifications for European buyers while highlighting fast-turnaround inventory for Asian markets.

---

3. Deep Dive into the 15 Core Content Blocks

In the Content tab, clicking Add Block unlocks 15 specialized industrial components:

1. Multi-Column Content (Content Block)

• Slug: content
• Role: The foundational workhorse for narrative copywriting and rich text.
• Capabilities: Divide sections into single column (Full), halves (1/2), thirds (1/3), or asymmetric layouts (2/3 + 1/3). Each column supports Lucide vector icons, rich text, and call-to-action buttons.

2. Feature & Advantage Grid (Feature Grid)

• Slug: featureGrid
• Role: Spotlight factory core competencies, precision tolerances, and manufacturing capabilities.
• Capabilities: Card grid layout with variable card sizes, industrial Material Symbol icons, and optional gradient accents (useGradient) to make key capabilities pop.

3. Call to Action (CallToAction / CTA)

• Slug: cta
• Role: The primary conversion engine driving next steps.
• Capabilities: Prominent headline, value proposition, and interactive button groups. Typically positioned mid-page or at the footer (e.g. “Need custom OEM shock absorbers? Contact our engineering team for instant 3D CAD support.”).

4. High-Resolution Media (Media Block)

• Slug: mediaBlock
• Role: Showcase precision CNC machinery, cleanroom workshops, or 3D exploded diagrams.
• Capabilities: Links directly to the Media collection, with support for captions and full-width container breakouts.

5. Content & Blog Archive (Archive Block)

• Slug: archive
• Role: Dynamically surface relevant technical articles, case studies, or news on the page.
• Capabilities: Populate dynamically by category filter or curate hand-picked posts using manual selection.

6. Embedded Catalog (Offerings Catalog Block)

• Slug: offeringsCatalog
• Role: Bring parts of your catalog directly into landing pages.
• Capabilities: Allows buyers to filter and browse vibration dampers and industrial components directly on a solutions page without jumping to the catalog directory.

7. Commercial Lead Form (Form Block)

• Slug: formBlock
• Role: Capture commercial RFQs, technical drawings, and custom inquiries.
• Capabilities: Embeds forms built via the Form Builder plugin (e.g., an “OEM Technical Feasibility Request Form”) with client-side validation.

8. Client Testimonials (Testimonials)

• Slug: testimonials
• Role: Build instant credibility with foreign buyers through verified social proof.
• Capabilities: Display customer feedback in Grid, Slider, or Featured layouts, complete with client photos, job titles, and company affiliations.

9. Partner & Certification Cloud (Logo Cloud)

• Slug: logoCloud
• Role: Establish corporate authority and supply-chain trust.
• Capabilities: Display partner brand logos or industry certifications (ISO9001, CE, RoHS, FDA, IATF 16949).

10. Tiered Pricing & Packages (Pricing)

• Slug: pricing
• Role: Clarify prototyping fees, tooling cost ranges, or wholesale volume tiers.
• Capabilities: Compare plans side-by-side, highlight a Most Popular tier, and list included engineering services.

11. Collapsible Questions & Answers (FAQ)

• Slug: faq
• Role: Preemptively resolve buyer concerns regarding MOQs, lead times, sea freight, and tooling ownership.
• Capabilities: Interactive accordion layout that maps naturally to Google FAQ Schema for rich search snippet capture.

12. Technical Data Table (Table Block)

• Slug: tableBlock
• Role: Present structured comparisons of technical specs and material grades.
• Capabilities: Display Shore A hardness ranges, tensile strengths, and temperature tolerances cleanly.

13. Milestones & Workflows (Timeline)

• Slug: timeline
• Role: Illustrate factory growth history or end-to-end manufacturing workflows.
• Capabilities: Chronological node presentation tracing paths from initial CAD drawing analysis to sample validation, mass production, and export dispatch.

14. Engineering Flowcharts (Mermaid)

• Slug: mermaid
• Role: Technical and QA process transparency.
• Capabilities: Renders flowcharts and inspection sequences dynamically using concise text-based Mermaid syntax.

15. Vector Graphics (Svg)

• Slug: svg
• Role: Embed intricate mechanical schematics and vector blueprints with zero pixelation.

---

4. Recommended Landing Page Recipe: The OEM/ODM Blueprint

Now that you understand the 15 building blocks, you can assemble high-converting page structures:

The High-Converting OEM Landing Page Formula:

1. Hero: High Impact showing modern automated vulcanization machinery, titled “Precision Rubber-to-Metal Bonding for Global OEMs”;
2. Logo Cloud: Prominently display ISO9001, IATF 16949, and CE accreditation badges;
3. Feature Grid: Spotlight 4 core capabilities (In-house mold tooling, German precision testing, 24h rapid sampling, dedicated engineering support);
4. Timeline: Outline the “5-Stage Process from CAD Blueprint to Mass Production”;
5. Media Block: High-resolution exploded blueprint detailing vibration damper internal bond layers;
6. FAQ: Answer common questions on MOQs, tooling development cycles (7–10 days), and sample policies;
7. Call to Action (CTA): Drive engagement with “Request a Free DFM Analysis & Instant Factory Quote”.

Inspect your layout in real time using the Live Preview pane, refine spacing and copy, and hit Publish to deploy an enterprise-grade landing page!