Designed forIndustrial manufacturing, foreign trade export, B2B technical serviceenterprises. Each block is crafted around the chain of „Build Trust → Show Strength → Guide Inquiry“. No coding required, use them like building blocks in the Gutenberg editor.

Block 1: Hero Block (Hero Banner)

Block 1: Hero Banner

The first screen determines whether visitors continue browsing. The Hero block supports full-screen background images + dual action buttons (e.g., „View Cases / Inquire Now“), conveying the main business and value proposition within 3 seconds, preventing users from leaving due to lack of focus.

Our Services Contact Us

When to Use

• Homepage/Landing Page First Screen
• Important Product Line/New Service Launch Page

Why B2B Enterprises Need It

The first screen determines whether visitors continue browsing. The Hero block supports full-screen background images + dual action buttons (e.g., „View Cases / Inquire Now“),conveying the main business and value proposition within 3 seconds, preventing users from leaving due to lack of focus.

💡 Best Practice: Use factory photos/equipment panoramas as the background, and use strong-intent words like „Get a Quote“ or „View Brochure“ for button copy.

Block 2: Hero Slider Block (Image Carousel)

Block 2: Hero Multi-Image Carousel

When a single image cannot cover multiple business lines, use a carousel to efficiently display them in the same position.

Tutorials Button 2

Block 2: Hero Multi-Image Carousel

Based on Swiper.js, smooth sliding with touch support, no slow loading due to multiple images (only preloads adjacent slides by default).

Button 1 Button 2

When to Use

• Need to carousel multiple product series/service scenarios within one screen
• Display partner client logos, certifications, exhibition scenes

What Problem It Solves

When a single image cannot cover multiple business lines, use a carousel to efficiently display them in the same position. Based on Swiper.js,smooth sliding with touch support, will not cause slow loading due to multiple images (only adjacent images are preloaded by default).

Block 3: About Block (About Us with Image and Text)

Block 3: About Us (Image and Text Introduction)

We are an industry-leading company dedicated to providing first-class solutions to our clients. With years of experience and an expert team, we strive to exceed expectations and deliver excellence in every project we undertake.

Core Advantage Item 1

Advantage description text, can also hide advantages

Core Advantage Item 2

Supports up to 4 core advantage descriptions

Learn More

When to Use

• Second/Third Screen of Homepage: Company Profile + Core Advantages
• Main content of the independent „About Us“ page

Role in Conversion

B2B transactions rely on trust. This block supportsLeft-right image and text switching + 4 core advantage items (with icons), use hard indicators such as „years/capacity/patent count/delivery standards“ instead of vague descriptions, allowing customers to quickly establish an understanding of the company„s capabilities.

Block 4: Accordion Block / FAQ Accordion

When to Use

• Product parameter description, service process details
• Centralized answers to common customer questions (payment/delivery/after-sales)

Why it improves inquiry quality

Filter out unsuitable requirements in advance, saving time for both parties. Place „minimum order quantity/MOQ/warranty policy/customization cycle“ in the FAQ,allowing customers to self-screen and retain high-intent leads. Smooth expand animation, does not affect the overall page rhythm.

Block 5: Blog Block (Latest Posts / News List)

Block 5: Latest Articles/News List

Regularly updating professional content can increase search engine crawl frequency, while demonstrating expertise through real cases and technical articles.

12 May

Content Card Block Usage Tutorial

We have designed three display forms for the Content Card block. To maximize user customization, we have not set a limit on the number of cards. Therefore, if the default Content Card layout is not aesthetically pleasing, you need to adjust it yourself through the „Columns“ setting in the design options.

Read more →

12 May

Hero Slider Block Usage Tutorial

To add a switchable slideshow to your website, simply add the Hero Slider Block. The specific steps are as follows: 1. Create a new page and set it to the full-width template (for the homepage, keep the default setting, as it will automatically use the full-width layout). 2. Click the plus icon in the top-left corner and select Hero Slider Block...

Read more →

10 May

How to Add AI Customer Service to Product Pages

To add an AI customer service feature to your product functions, first install the B2B product management plugin, then fill in the corresponding API address and key in the plugin settings, enter your company introduction and FAQ information. After that, users will see the AI customer service feature on the front-end product page. The specific steps are as follows: 1…

Read more →

When to Use

• Bottom of homepage/News page
• Display content such as „installation cases,“ „industry insights,“ and „product application scenarios“

Dual Value of SEO and Trust

Regularly updating professional content can increase search engine crawling frequency, while alsodemonstrating expertise through real cases and technical articles. It is recommended to use it with the „LingHang Theme SEO Tutorial“ to turn every article into a customer acquisition entry point.

Block 6: Contact Info (Contact Information Card)

Best Placement

• Contact Page
• Service/Product Page Sidebar (Specific Business Contact)

Key to Reducing Churn

Let customers see the phone/email/WhatsApp at a glance when they most want to contact you.Supports horizontal/vertical layout switching and external link icons, foreign trade companies can configure WhatsApp direct links, while domestic users can bind WeChat QR code pop-ups.

Block 7: Content Card (Content Card Set: Classic / Modern / List)

Block 7: Content Card Set (Classic)

Three styles correspond to different content depths: the classic style emphasizes equal parallelism, the modern style highlights featured services, and the list style is suitable for long directories. Unified design language avoids page style fragmentation.

Tutorials

Block 7: Content Card Set (Modern)

Three styles correspond to different content depths: the classic style emphasizes equal parallelism, the modern style highlights featured services, and the list style is suitable for long directories. Unified design language avoids page style fragmentation.

Tutorials

Block 7: Content Card Set (List)

Three styles correspond to different content depths: the classic style emphasizes equal parallelism, the modern style highlights featured services, and the list style is suitable for long directories. Unified design language avoids page style fragmentation.

Tutorials

Typical Uses

• Detailed description of service sub-items (e.g., „Precision Machining/Mold Manufacturing/OEM Manufacturing“)
• Technical Documentation/White Paper/Sample Book Download Entry

Design Philosophy of Layered Guidance

Three styles correspond to different content depths:The classic style emphasizes equal parallelism, the modern style highlights featured services, and the list style is suitable for long directoriesUnified design language to avoid page style fragmentation.

Block 8: CTA Block (Call to Action Banner)

Block 8: Call to Action (CTA) Banner

The CTA block uses a one-sentence value summary plus a strong action button (e.g., „Free Needs Assessment →“ „Get Sample List“) to push at the decision tipping point, directly improving form submission rates.

Get a Quote

Where to Place for Best Results

• After case studies (strike while the iron is hot)
• At the end of service descriptions (eliminate concerns, drive next steps)

Turning Traffic into Inquiries

Showing alone is not enough; clear instructions are needed. The CTA blockuses a one-sentence value summary plus a strong action button(e.g., „Free Needs Assessment →“ „Get Sample List“) to push at the decision tipping point, directly improving form submission rates.

Block 9: Contact CTA Block (Contact CTA with Phone / Quick Links)

High-Conversion Scenarios

• Heavy equipment/engineering project pages (need instant communication)
• Price-sensitive customers (provide phone-first option)

Capturing the Customer Group That Prefers Phone

Some customers are not used to filling out forms and prefer to confirm by phone. This blockplaces the phone number in a prominent position, paired with short copy to create urgency, suitable for high-unit-price, long-decision-chain B2B businesses.

Block 10: Featured Grid Block (Featured Grid for Services / Highlights)

Block 10: Feature Grid (Service/Highlight Display)

Use „equipment close-up + short title + one-sentence result description“ (e.g., „CNC accuracy ±0.01mm“) to quickly convey technical standards and quality commitments, dispelling customer doubts about process capability.

1.

Project Name

Brief description of this project.

Read More

2.

Project Name

Brief description of this project.

Read More

3.

Project Name

Brief description of this project.

Read More

4.

Project Name

Brief description of this project.

Read More

Use Cases

• Visual display of core processes / unique advantages
• Summary display of 4-6 key service items

Visual persuasion

Images build impressions more easily than text. Use „equipment close-up + short title + one-line result description“ (e.g., „CNC accuracy ±0.01mm“)Quickly convey technical standards and quality commitments, dispelling customer doubts about process capabilities.

Block 11: Projects Block (Project Case Grid)

Block 11: Project case grid

Hover overlay effect guides clicks for details; use real delivery records to prove reliability, especially suitable for engineering / custom manufacturing enterprises.

Categories

Project demo title

Categories

Project demo title

Categories

Project demo title

Categories

Project demo title

Categories

Project demo title

Categories

Project demo title

Essential pages

• Individual case page / Homepage success stories section
• Display by industry / region / product line

Key evidence for B2B deals

„Others have used it and are satisfied“ is the strongest sales pitch. Hover overlay effect guides clicks for details,use real delivery records to prove reliability, especially suitable for engineering / custom manufacturing enterprises. It is recommended to pair with a „data statistics block“ to display cumulative delivery quantities.

Block 12: Services Block (Service List with Icons)

Standard usage

• Service page main content / Homepage service overview
• Standardized description of multiple business lines (each with its own icon)

Structurally showcase capability boundaries

Prevent customer loss due to „not knowing what you actually do“. Supports 6-12 services,each can be linked to a detailed description page, forming a browsing path of „overview → details → inquiry“, suitable for complex mid-to-large B2B enterprises.

Block 13: Stats Block (Animated Statistics)

Trust Badge Section

• After 'About Us' / Before 'Case Studies'
• Replace subjective adjectives with numbers (e.g., „experienced“ → „15+ years established“)

Quantify strengths to build barriers

Scrolling number animations naturally grab attention. DisplayHard data such as „annual production capacity / number of export countries / number of engineers / yield rate“to help SMEs stand out among competitors. Supports custom units and suffixes, adaptable to different industry metrics.

Block 14: Team Block (Team Showcase)

Block 14: Team Showcase

B2B transactions ultimately come down to trust between people.

Name

Position

Name

Position

Name

Position

Target Audience

• Technical / Consulting Companies (Engineer / Expert Teams)
• Real-name display of foreign trade salespersons (for clients to specify contacts)

Humanize the company

B2B transactions ultimately come down to trust between people. Display core members' names, positions, and LinkedIn links,making clients feel they are working with a professional team, not a faceless company, especially beneficial for cross-cultural trust building in cross-border business.

Block 15: Testimonials Block (Client Testimonials Carousel)

Block 15: Customer Testimonial Carousel

A customer's word is worth more than self-praise.

A carousel displaying testimonials with real avatars / company logos effectively removes final decision-making doubts, especially suitable for companies with a high proportion of new clients.

Client Name

Position / Company

A carousel displaying testimonials with real avatars / company logos effectively removes final decision-making doubts, especially suitable for companies with a high proportion of new clients.

Client Name

Position / Company

A carousel displaying testimonials with real avatars / company logos effectively removes final decision-making doubts, especially suitable for companies with a high proportion of new clients.

Client Name

Position / Company

Social Proof Section

• Second-to-last screen on homepage (the final push)
• Product detail page sidebar / bottom

Let others praise you

A word from a customer is worth more than self-praise. Carousel display of reviews with real avatars/company logoseffectively eliminates final decision-making hesitation, especially suitable for businesses with a high proportion of new customers. It is recommended to select descriptions with specific scenarios (e.g., „solved a certain technical problem“).

Block 16: Why Choose Block (Why Choose Us: Differentiators)

Decision booster position

• End of service page / Before inquiry form
• Need to highlight differences when comparison with competitors is not obvious

Answer customers' implicit questions

When customers hesitate to choose, use 3-4 items„Shorter delivery cycle / Better after-sales system / More flexible customization capabilities“Give reasons directly. This is equivalent to answering the question „Why you?“ before you even speak.

Block 17: Content Card Grid — Multi-Card Grid Layout

Content Card Grid — Multi-Card Grid Layout

This is a design supplement to the Content Card block. For beginners who cannot design layouts themselves, we have added a multi-card grid layout with unified card styles, 2/3/4 column options, and responsive auto-adaptation.

Title

Multi-card grid layout, unified card styles, 2/3/4 column options, responsive auto-adaptation

Link

Title

Multi-card grid layout, unified card styles, 2/3/4 column options, responsive auto-adaptation

Link

Title

Multi-card grid layout, unified card styles, 2/3/4 column options, responsive auto-adaptation

Link

Block 18: Product Showcase — B2B Product Showcase Block

Product Showcase — B2B Product Showcase Block

For users who need to display specific products on a page, supports badges, category labels, specification parameters, a "View Details" button, with 2, 3, or 4 column options and no limit on the number of products.

Demo

Category 1

Product Title

Optional parameters DN15-DN200 / MOQ: 100 pcs

View Details

Demo

Category 1

Product Title

Optional parameters DN15-DN200 / MOQ: 100 pcs

View Details

Demo

Category 1

Product Title

Optional parameters DN15-DN200 / MOQ: 100 pcs

View Details

Block 19: Logo Wall — Partner Logo Display

Logo Wall — Partner Logo Display

This block displays partner or client logos. Supports "multi-row layout" or "scroll animation".

Block 20: Image Gallery — Image Gallery Block

Image Gallery — Image Gallery Block

This block displays images in a gallery grid. Supports 3/4 column layouts, hover title overlay, and built-in native lightbox (click to view large image, ESC/click overlay to close).

Demo Image

Demo Image

Demo Image

🚀 20 Blocks = A Complete B2B Website Conversion System

From first-screen appeal (Hero) → capability proof (cases/data) → trust reinforcement (reviews/team) → action guidance (CTA), the LingHang theme encapsulates complex website building logic into simple drag-and-drop operations. You only need to focus on your own business content.

👉 View full theme demo site|Buy LingHang Theme Now

More Designs👉 Template Workshop