Hero Simple Centered
Centered hero with heading, subheading, and call-to-action button on a soft gradient
Hero
Sections · 596 items
Responsive Website Section Templates
Full-width building blocks that stack together to form complete pages. Each section is self-contained, responsive, and designed to integrate seamlessly with other sections.
Browse · Categories
Responsive Website Section Templates
596 items
Hero Ecommerce Sale
Online store hero promoting a sale or seasonal discount with a shopping call to action
Hero
Hero Event Conference
Event hero presenting a conference with its date, venue and registration button
Hero
Hero Nonprofit Cause
Nonprofit hero presenting a cause with an emotional message and a donation button
Hero
Hero Job Listing
Careers page hero inviting candidates to browse open positions and join the team
Hero
Hero Webinar Registration
Webinar hero with session details and a registration form to save a seat
Hero
Content Text Left
Left-aligned text section in a classic article layout designed for comfortable reading
Content
Content Text Legal
Structured text layout for legal pages such as privacy policies and terms of service
Content
Content Text Steps
Horizontal numbered steps that explain a process flow in a clear sequence
Content
Content Text Quote Large
Large pull quote that puts a single striking statement center stage
Content
Content Text Sources
Section listing sources and bibliographic references that support an article
Content
Blog List Horizontal
Blog article list with the image on the left and title, excerpt and details on the right
Blog
Blog Card Standard
Vertical blog post card with cover image, title, excerpt and publication details
Blog
Blog Card Horizontal
Wide blog post card with the image on the left and article text on the right
Blog
Blog Section Newsletter
Section combining recent blog posts with a newsletter signup call to action
Blog
Blog Section Featured
Full-width hero section spotlighting one featured blog article with image and summary
Blog
Blog Comments
Blog comment section with reader replies, avatars and a form to join the discussion
Blog
Portfolio Grid Cards
Portfolio with project cards including image, title, category, and description
Gallery
Steps Vertical Simple
Simple vertical list of numbered steps that walks visitors through a process
Steps & process
Steps Vertical Scroll Progress
Vertical timeline with animated scroll progress and alternating content
Steps & process
Process Section Comparison
Section comparing the situation before and after following your process
Steps & process
Testimonial Card Photo Side
Testimonial card with the customer photo on the left and the quote on the right
Testimonials
Testimonial Card Minimal
Minimal testimonial card showing only the quote and the customer name
Testimonials
Testimonial Card Social
Testimonial card styled like a social media post with avatar, handle and message
Testimonials
Testimonials Grid Featured
Testimonial grid with one large featured review and two smaller supporting ones
Testimonials
Testimonials Section Split
Split testimonial section with a customer photo on one side and the quote on the other
Testimonials
Testimonials Section Wall
Wall of love packed with short customer testimonials to build social proof
Testimonials
About Section How
Section explaining how the company works, with its methodology and step-by-step approach
About
Logos Carousel Pause on Hover
Auto-scroll carousel that pauses on hover for better readability
Logo clouds
Pricing Cards Enterprise Contact
Pricing table with Enterprise plan "Contact us" without fixed price
Pricing
Pricing Section with Guarantee
Pricing section with featured satisfaction guarantee or money-back
Pricing
Product Cards with Stock Status
Product grid with stock indicator (available/out of stock)
E-commerce
Newsletter Inline Simple
Compact inline newsletter form with input and button side-by-side
Newsletter
Newsletter Section Gradient
Newsletter section with vibrant gradient background and modern design
Newsletter
Newsletter Section Social Proof
Newsletter section with social proof and subscriber counter
Newsletter
Newsletter Section Lead Magnet
Newsletter section with lead magnet (ebook, guide, free resource)
Newsletter
Wishlist Button
Heart button that lets shoppers add or remove a product from their favorites
Commerce
Nothing matches this filter.
Guide
Website sections are the full-width building blocks that make up every page on the web. Instead of designing from a blank canvas, pick the sections you need, arrange them in order, and customize the content. Our library contains over 800 section templates covering every common website pattern — from attention-grabbing heroes to informative footers.
Popular Section Categories
Start with a striking hero section to capture attention above the fold. Add a features section to explain what you offer in a visual grid. Build trust with customer testimonials featuring quotes, photos, and star ratings. Present plans with a pricing table that supports monthly and annual toggling. Close with a persuasive call to action that drives visitors to sign up, buy, or get in touch. Don't forget the essentials: a professional header with navigation and a comprehensive footer tie everything together across your entire site.
Why Sections Beat Full-Page Templates
Full-page templates from the page library are great when you need a quick start, but sections give you granular control. Mix a dark-mode hero with a light pricing table. Swap a carousel testimonial for a masonry grid. Replace a simple contact form with a map-integrated version from the Google Maps templates. Sections let you build truly unique pages while keeping the polish of professional design. Each section is self-contained with its own styles, so they never conflict with one another.
Designed for Performance
Each section is optimized for fast rendering: minimal DOM nodes, lazy-loaded images, and efficient CSS following Google's rendering best practices. They slot naturally into Communik's page builder, but the underlying HTML and Tailwind CSS classes work in any modern framework. Browse the contact sections or the FAQ sections to see for yourself how clean and performant the markup is.
Questions
What is the difference between a section and a component?
A section is a full-width block that occupies an entire row of the page — like a hero banner, pricing table, or footer. A component is a smaller, reusable UI element — like a card, button, or badge — that lives inside a section.
Can I combine sections from different style families?
Yes. Each section is self-contained with its own color and spacing definitions. Communik's theme system automatically harmonizes colors and typography across sections so they look cohesive.
How do I add a section to my page?
Open the page builder, click "Add Section," browse or search the library, and click to insert. You can reorder sections with drag-and-drop and customize every element visually.
Can I save a customized section for reuse?
Yes. After customizing a section, save it to your personal library. It becomes available across all your projects, preserving your edits, content, and styling.
Keep exploring
About Sections
Browse about sections templates
Blog Sections
Browse blog sections templates
Call to action Sections
Browse call to action sections templates
Blog Module
Complete blog feature with multiple design variants
About Page Templates
Full page layouts in the about category
Templates for Real Estate
Templates designed for real estate businesses
Stripe Templates
Templates with Stripe integration support
Your next site starts here.
Everything here is one click away.
Every section, component, page and module in this library is ready inside the Communik editor, styled with your brand.
Free to start. No credit card.