Section Guide: Social Proof, Cards & Media

These sections help you build trust, show off what you offer, and bring your pages to life with photos, video, and maps. Several of them can also pull their content straight from your Content Types (your own collections of items like services, projects, or team members) so a section fills itself automatically and stays up to date as you add entries (see the Content Types articles). As always, every section shares the universal Background, Spacing, and Appearance settings.

Building trust (social proof)

Stats

Big, confident numbers that tell your story at a glance: "1,200 happy customers," "15 years in business," "98% on-time." Nothing builds credibility faster than the right figures presented boldly.

Styles:

  • Big Numbers: oversized figures with short labels.
  • With Context: each number paired with a sentence of explanation.
  • Dark Banner: the stats on a dark, high-contrast strip.
  • Inline Strip: a slim single-line row of figures.

You can also turn on a count-up animation so the numbers tick up from zero as the visitor scrolls to them, a small touch that draws the eye.

Logo Grid

A "trusted by" or "as seen in" row of logos: clients you've worked with, brands you carry, or press you've earned. Familiar logos reassure new visitors instantly.

Styles:

  • Grid: logos arranged in a tidy grid.
  • With Caption: the grid plus a short heading like "Trusted by teams like yours."
  • Marquee scroll: the logos glide slowly across the screen in a continuous loop.

An optional grayscale-until-hover setting shows the logos in muted gray and reveals full color when a visitor points at one, for a clean, uniform look.

Testimonial

Customer quotes with a star rating and a photo: the words of happy customers, in their own voice. Real reviews are some of the most persuasive content on your whole site.

Styles:

  • Grid: several reviews shown together at once.
  • Slider: one review at a time that visitors can swipe through.
  • Featured: a single standout review given plenty of space.

You can enter reviews by hand, or auto-fill them from a Content Type (for example a "Reviews" collection) so the section updates itself whenever you add a new one.

Highlighting what you offer

Feature Cards

Icon-led highlights that summarize your key benefits or services in a scannable row of cards, each with an icon, a short title, and a sentence or two. Perfect for "Why choose us" or a quick overview of what you do.

Styles:

  • Icon Top: the icon sits above the title and text.
  • Icon Side: the icon sits to the left of the text.
  • Numbered: numbered steps instead of icons, great for a process.

Cards

Flexible cards that each combine an image, a title, and some text: the all-purpose way to present services, projects, blog highlights, team members, or products. More visual than Feature Cards, thanks to a full image on each card.

Layouts:

  • Grid: cards laid out in even rows and columns.
  • Carousel: a swipeable row of cards.
  • List: cards stacked as a vertical list.

Like the Testimonial section, Cards can auto-fill from a Content Type, so a "Services" or "Projects" collection populates the cards for you automatically.

Comparison Table

A table that lines up features, plans, or options against each other so visitors can compare at a glance. Ideal for "us vs. the alternative" or a detailed plan breakdown.

Styles:

  • Side by Side: two options compared column against column.
  • Plan Matrix: a full grid of features across several plans.
  • Highlighted Column: one column emphasized to guide the choice.

Collection Listing

Embeds items from one of your Content Types directly onto any page: for example, showing your latest projects on the homepage, or your team on the About page. You pick which Content Type to display, and the section pulls in those items and keeps them current as you add or edit entries. It's the easiest way to reuse content you've already organized (see the Content Types articles).

Photos, video and maps

Gallery

A photo gallery with click-to-enlarge. Visitors tap any image to open it full size in a lightbox. Ideal for portfolios, before-and-after collections, event photos, or product shots.

Styles:

  • Grid: evenly sized thumbnails in a clean grid.
  • Masonry: a staggered, Pinterest-style layout that fits images of different heights.
  • Carousel: a swipeable row of photos.

You can upload photos directly, or pull them from a Content Type: for instance showing all the images attached to a particular project entry (see the Content Types articles).

Video Embed

Drops in a video from YouTube or Vimeo. Just paste the video's link. Great for a welcome message, a product demo, a tour, or customer stories.

Styles:

  • Single: one video, front and center.
  • Hero Overlay: a large video with your text laid over it.
  • Grid: several videos arranged together.

Map Embed

Shows an interactive Google or Mapbox map so visitors can find you, perfect for a storefront, office, or service area. Add your address and the map does the rest.

Styles:

  • Full Bleed: the map stretches edge to edge.
  • Framed: the map inside a neat bordered frame.
  • Split with contact details: the map beside your address, hours, and phone number.

Before / After

Two images stacked behind a draggable slider. The visitor drags the handle left and right to wipe between the "before" and "after." Made for redesigns, rebrands, restorations, product upgrades, and any transformation you're proud of.

Advanced

Custom Code

Lets you paste in an embed snippet from another service: a booking widget, a live-chat box, a calculator, a social feed, or anything a third-party tool gives you to add to a website. This one's for advanced users comfortable copying an embed code; if you're not sure, most needs are already covered by the other sections above.

Was this helpful?