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: 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.

A few more controls decide how the wall is drawn. Logo size runs from Small to Extra Large, so you can go subtle or bold. On the Grid style you set how many logos sit across on desktop and, separately, Logos per row on mobile: one, two, or three, which keeps a large logo wall from looking cramped on a phone. The Marquee style has its own set: a scroll Speed of Slow, Normal, or Fast, how many logos are on screen at once on a phone, and Pause on hover (on by default) so a visitor can stop the row to read a logo.

Testimonial

Customer quotes with a star rating and, if you want one, 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 also set:

Show author photo: on by default. Left on, a reviewer with no photo gets their initials instead; turn it off for a clean, text-only review.
Columns: how many reviews sit per row in the Grid, two, three, or four.
Review text size: how large the quote reads in the Featured layout, from Small to Extra Large.
Auto-scroll: on the Slider, the reviews move along on their own instead of waiting for a swipe.

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.

The Cards section uses the same card controls as your blog listing and your Content Type listings: how many cards sit per row in the Grid, a Card style of Framed, Inset image, or Minimal (no card), and an Image ratio that every card image is cropped to so a row lines up evenly. The Carousel layout adds Auto-scroll. Those choices are explained in full in Designing your blog listing.

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 also set:

Aspect ratio: leave it as Original to keep each photo's own proportions, or crop every photo to the same square, landscape, or portrait shape so the grid lines up neatly. This is the fix when a gallery looks ragged. (Masonry always keeps each photo's own shape, since that's the point of it.)
Columns: two, three, or four across, on the Grid and Masonry styles.
Card style: Flush runs each photo to the edges of its tile; Inset gives it padding inside a frame.
Show image labels: puts a small label in the top-left corner of each photo, taken from that image's alt text, or its filename if you haven't written any.
Buttons: one or two buttons below the gallery, such as "View all projects." They link like any other button, so one can open a pop-up.
Carousel options: on the Carousel style, how many photos show at once on desktop, on tablets, and on phones, plus Auto-scroll, which moves the row along on its own and pauses while a visitor hovers over it. Auto-scroll turns the row into one continuous ribbon, so it sets its own photo widths rather than using those counts, and photos in it don't open in the lightbox.

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 + Text

Puts a video on the page, either a link you paste from YouTube or Vimeo, or a file you upload yourself. Great for a welcome message, a product demo, a tour, or customer stories.

Upload is best for short clips, up to 12 MB. There is no compression step, so whatever you upload is exactly what every visitor downloads. For anything longer, YouTube and Vimeo compress the video for each viewer's connection and are the better choice.

Styles:

Single: one video, front and center.
Video + Text: the video beside your copy, or above it with the text on top, with room for buttons and a reassurance line.
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 across to wipe between the "before" and "after." Made for redesigns, rebrands, restorations, product upgrades, and any transformation you're proud of. It can also carry an optional eyebrow, heading, and line of supporting text above the slider; leave all three empty and you get just the slider.

Settings you can adjust:

Orientation: Horizontal so the handle drags left and right, or Vertical so it drags up and down.
Before and after labels: a small caption pill sits over each image, reading "Before" and "After" until you type something else. Clear a label to hide it.
Image ratio: both photos are cropped to the one shape you pick, from square through widescreen, so a mismatched pair still lines up exactly. That's why one of your photos may look trimmed. Pick the shape that suits them both.
Start position: where the handle sits before anyone touches it, anywhere from 0 to 100%. A low number opens the page showing mostly the "after"; a high number shows mostly the "before."

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?