A page is a stack of sections. Each section type has its own editor form in the builder and its own template on the front end, and every one of them is styled for both client themes in light and dark mode and at phone width. The section library (Add Section in the builder) groups them as Hero, Commerce, Giving, Content and Media; the same grouping is used here, and the sections added in 1.7.1 and 1.7.2 have their own parts below (1.7.1, 1.7.2). Every section carries a Show/Hide switch, and most carry a caption, title and subtitle, a background type, a border, and top and bottom padding.

Links in sections

Wherever a section has a button, its Link Type chooses what the button points at: a custom URL, a Page Manager page, a product group (the order form for that group) or a product (straight to checkout with that plan). The group and product lists are the visible groups and plans in the catalogue.

Section design

Every section's editor ends with the same Section design panel, so the presentation choices that apply to any section live in one place and behave the same everywhere:

  • Width - the normal container, wide (up to 1600px) or the full viewport width.
  • Headings - left or centred, for the caption, title and subtitle of sections that have them.
  • Text - light or dark, for a section that sits on a photograph or a coloured band and needs its text forced one way. With light text, boxed items such as stats, feature cards and timeline cards turn to frosted glass so the text stays readable. Left on Auto, the text turns white only when a background picture and its overlay actually darken the section.
  • Appear with - the section's animation as it scrolls into view: a fade up, down, from the left or right, or a zoom.
  • Items - One after another brings the heading, subtitle and each card, column, list entry or button in turn instead of all at once.
  • Pictures - Gently float lets the section's main pictures and graphics drift slowly up and down.
  • Background image - a picture from the media library behind the section, with an image opacity (5-100%), a darkening overlay (0-90%), a position (centre, top, bottom), a fixed option that holds the picture still while the page scrolls (it scrolls with the page on phones, where fixed backgrounds are drawn unreliably), and Image motion: a slow zoom that pushes in and out, or a drift that pans side to side. Turn the opacity down and the picture fades on its own layer, so a map, a photograph or a texture sits behind the section as a watermark while the cards and text above it keep their normal colours. Image motion also moves a banner's own background picture.
  • Top edge / bottom edge - a wave, a slant or a curve cut out of the section itself, so whatever sits above or below shows through and a coloured band flows into the sections around it.
  • Anchor - an id (pricing, faq) that in-page links and menu items can jump to with #pricing.
  • Custom class - one or more class names for the theme's custom CSS to hook.
  • Hide on phones / Hide on desktop - show a section on one kind of screen only, for a phone-sized hero and a desktop one, say.

Every movement follows the Content Manager's front-end effects switch, and stays still for visitors whose device asks for less motion.

Short choices in a section's editor show as a row of pills rather than a drop-down, and the shorter fields sit side by side. Pages saved before 1.6.0 keep their older per-section animation and custom-class values; the panel reads them as its starting point.

Hero

The page opener: one or more slides, each with a caption, headline, subtitle, button and graphic. Banner Type chooses the layout (text beside a graphic, text over a background, centered), Graphic Position and Banner Shape place the illustration, and a slide can show a product group's starting price. With more than one slide the banner rotates.

Height makes the banner tall (about three quarters of the screen) or full screen, with its text centered; the default follows the content.

Slider

A full-width rotating band of headings, sub-headings, descriptions and buttons over a background image or color. Text carousel changes the words over one background; Full slides gives every slide its own picture or color. Since 1.7.2 both cross-fade, their words rise in, and they have previous/next arrows and progress pills that fill while Autoplay counts down (every 6 seconds, paused while the pointer is over the slider). Existing Slider sections pick this up on upgrade without any change. For a new page, the Hero Slider does all of this with more choices.

Block Header

A title break: one heading on a plain, light, dark or primary background, optionally over a background image, with an optional subtitle under it, left-aligned or centred. The first section on a page renders its title as the page's <h1>.

Background Band

A band with a background image, a title, free-form text and one button, with an image beside the text on the left or the right. Use it for a closing pitch with a photograph; use Call to Action when the band should carry no image.

Commerce

Product Groups

Cards for chosen product groups, each with its graphic, name, description and the starting price of its cheapest plan. One group can carry a Featured sticker. The button leads to the group's order form.

Products

Cards for chosen plans with their billing-cycle switcher, price, feature list and order button. Features Description Position places the feature list above or below the price; a plan can be marked as the featured one.

Price Panel

Product groups in a panel layout: name, tagline, starting price and a button per group, with one group highlighted. A compact alternative to Product Groups when the page only needs the price.

Product List One

Plans in a compact list for quick comparison: name, cycle switcher, price and order button, with the feature list folded into a View Details link.

Product Price List Two

One plan at a time under a row of tabs, with the plan's CPU, RAM, storage and bandwidth specifications as tiles, a billing-cycle switcher, the price and an order button. Written for hosting plans; the four specification fields are free text.

Comparison Table

A feature-by-feature table across up to four named columns. Each row is a feature and a value per column; a cell reading yes prints a check, no, a dash or nothing prints a dash, and anything else prints as written. One column can be highlighted, and each column can carry a button with its own link. On phones the table scrolls inside its card with the feature column held in place.

Content

Features

Benefit blocks with an icon or image, a title, a description and an optional link each. Feature Style chooses flat items or cards; Feature Icon Style and Feature Graphic Position shape the icon.

A list of items beside a large illustration or photograph. Style shows them as a slider, an icon list in columns, bordered cards or compact cards; the sliders carousel on narrow screens.

Section With Items

A strip of feature-and-value pairs - "Storage: NVMe SSD", "Backups: daily" - printed as chips under a heading. Use it for a specification summary between two larger sections.

Stats

Counters with a title and a value each. The value can carry a prefix, decimals, a thousands separator and a suffix - $1.2M, 99.98% - and counts up from zero when it scrolls into view.

FAQs

Questions and answers as a boxed or flat accordion, or all open at once, in one or two columns, with the first question open or closed. The answers are rich text. Search box adds a filter above the list that hides the questions that do not match as the visitor types - useful once a page carries more than a handful.

Text/HTML Editor

Free-form rich text or HTML, in a single column or a two-column layout, optionally over a background image. Reading width keeps long text at a readable measure - narrow (about 70 characters a line) or medium - instead of stretching it across the whole container; leave it at full width for tables and wide layouts.

Timeline

Steps down a vertical line, each with a label (a date, a year, a step number), a title and text. Style alternates the steps left and right of the line on desktop (a step on the left lines its text up on the right, toward the line), or keeps them in a single column; on phones they are always a single column. Horizontal lays the steps out left to right in a strip that scrolls and snaps (the arrow keys work once it has focus), and Marker puts a dot, a number or a check mark on each step.

Call to Action

A closing band with a caption, a headline, a subtitle and one or two buttons, on the primary colour, light, dark or plain. Alignment centers everything or puts the text on the left and the buttons on the right. Fine print is a small line under the buttons ("No credit card required"), and Button size makes them regular or large.

Newsletter Signup

An email signup form. Where sign-ups go picks one of three destinations:

  • This website's subscriber list (the default) keeps the sign-ups in WBAMS. The visitor gets a confirmation email and is on the list once they follow its link; the answer appears under the form without leaving the page. See Newsletter subscribers.
  • An outside mailing-list service posts the form to the address your provider gives you for HTML forms - Mailchimp, Brevo, MailerLite, Listmonk and the like. Email Field Name is the field the provider expects (EMAIL for Mailchimp, email for most others) and Hidden Fields takes one name=value per line for a list id or a tag. The form posts straight to the provider from the visitor's browser; nothing is stored in WBAMS.
  • An email to your inbox opens the visitor's mail app with a sign-up request addressed to the Email Address you give.

A section saved before 1.7.0 keeps doing what it did: an action URL means the outside service, an address without one means the email. Style puts the copy on the left and the form on the right (split) instead of stacking them, and Privacy line prints a short note under the form ("No spam. Unsubscribe any time.").

Sections added in 1.7.1

Eleven sections for pages that should feel current: large type, pictures that fill their space, and motion that follows the scroll. Each one arrives with sample content when it is added, so it looks finished straight away; replace the words and pictures and it is ready. Their motion follows the site's effects setting and the visitor's reduced-motion preference: with either off, every section shows its finished state, and nothing depends on motion to work. All of them have the shared Section design panel and a Background Type (none, light or dark).

Bento Grid

A mosaic of tiles in four (or three) columns. Each tile has a Size - regular, wide (two columns), tall (two rows) or large (both) - and a Look: card, accent color, dark or tinted. A tile can carry a picture (it fills the tile, with white text over a shaded foot), an icon, a small label, a Big figure such as 98%, a title, text and a link; a tile with a link lifts on hover. Tiles fill the grid in order and later small tiles move up into gaps. Tile height and Spacing adjust the rhythm. On tablets the grid has two columns and on phones one.

Story Rows

Rows of a picture beside its text, alternating sides the way a feature article reads. Each row has a picture and its description, a small label, a title, text, Key points (one per line, shown as a checked list) and an optional button. First picture chooses the side the first row starts on, Picture shape is rounded, an arch or square, and Row numbers prints 01, 02, 03 in outline. With Picture depth on, pictures drift slightly as the page scrolls. On phones the picture sits above its text.

Statement

One large sentence - a mission, a promise - with an optional caption, signature (name and role) and button. Wrap words in asterisks to highlight them in the accent color: every community deserves a *voice*. With Reveal set to word by word, the sentence starts faint and lights up word by word as it scrolls into view; screen readers get the whole sentence at once. Text size and Alignment set the scale and the side.

Quote

A single quotation, large, with the speaker's name, role or place, portrait and an optional organization logo. Layout centers everything with a small round portrait, or puts a tall portrait beside the quote. Use real words from a real person; the sample text only shows where they go.

Fundraiser

Live progress of donation causes: picture, name, short description, amount raised against the goal, percentage, number of donors, time left and a Give button to the cause. The figures come from paid gifts and change by themselves; the bars fill as the section comes into view. Causes to show picks causes in the order you want; left empty, the section shows every visible cause whose goal has progress switched on in the product builder (see Donations). Layout is cards, the first cause large beside the others, or a list. The section is left out while Donations is switched off under Management Levels, and when no cause qualifies.

Steps

A numbered how-it-works process. Each step has a title, text, an optional icon and link. Layout puts the steps in a row joined by a line that draws itself in, as cards with large outlined numbers, or down the page along a vertical line. Markers are numbers or the steps' icons.

Tabs Showcase

Tabs that swap a picture and its story in place - programs, services, features. Each tab has a name, an icon, a heading, text, key points, a picture and a button. Tab style is pills, an underline or a list on the side; Picture sits on the right or the left. Change tabs by itself moves to the next tab every 6 or 9 seconds, with a thin timer on the active tab; it pauses while the pointer is over the section and stops once a visitor picks a tab. The arrow keys, Home and End move between tabs.

Map & Places

A map picture - a region, a campus, a floor plan - with pins. Choose the Map picture first, then open each place and click on the map in its dialog to set the pin; the Across and Down percentages keep the pin in place at every screen size and can also be typed. A pin opens a card with the place's label, name, text and link. Layout adds a numbered list of the places beside the map (hovering an entry highlights its pin, clicking opens it) or shows the map alone; Pin is a pulsing dot, a map marker or a number. On phones the card opens along the bottom of the screen.

Before & After

Two pictures of the same place under one divider that visitors drag - a building restored, a field planted. Each side has a label, and a caption can sit below. Divider starts at the middle, a third or two thirds, and Shape is 16:9, 4:3 or square. The divider sways once when it first comes into view to show that it moves, and it can be moved with the keyboard.

Text Marquee

Large words sliding across the page, as a strip between sections. Each word can link somewhere. Look alternates solid and outlined words or uses one of them; Between words is a star, a dot, a diamond or nothing; Rows adds a second row moving the other way; Band puts the words on an accent-colored strip, straight or tilted. The strip pauses under the pointer, and stands still when effects are off.

Progress Metrics

Figures shown as rings, bars or large numbers. Each metric has a label, a Value, the value it is measured Out of (the ring or bar is full there), decimals, text before and after the number ($, %, k, +) and a line of text. Rings and bars fill and the numbers count up as the section comes into view.

Sections added in 1.7.2

Fifteen more sections - ten page sections and five banner sliders - built the same way as the 1.7.1 set: each arrives with sample content, has the Section design panel, works in both client themes in light and dark mode and at phone width, and keeps its motion to sites with effects on and visitors who have not asked for reduced motion. The section library lists them under Hero, Content and Media.

Split Hero

An opening section with the headline on one side and a collage of up to three pictures on the other. Rotating words (one per line) take turns at the end of the headline - Together we build followed by stronger communities, brighter futures; screen readers hear only the word showing. It also carries a small label, text, two buttons and a badge (a figure and a few words) pinned to the pictures. Pictures sit on the right or the left and Height is regular, tall or the full screen. On phones the pictures sit under the copy.

Countdown

Days, hours, minutes and seconds to a moment. Count down to a date you choose (in the site's time zone) or to the next event on the Events calendar; counting to an event shows its title, and an empty button link opens that event. When the time has come is the text shown instead of the numbers once the moment has passed, or while there is no upcoming event to count to; left empty, the section is hidden instead. Layout is cards, large numbers, or a dark band with the copy beside the numbers, and Seconds can be hidden.

Pictures that keep their own shape, stacked in two, three or four columns. Give pictures a Category and buttons above the gallery filter them. A picture opens full size in a lightbox, which moves with the arrow keys or a swipe and closes with Esc; only the pictures left by the filter are in it. Captions show on hover, below each picture, or only in the lightbox; the caption is also the picture's description for screen readers. Phones show two columns.

Contact & Location

Address, phone, email, opening hours and a note in a card beside a map. Opening hours takes one row per line with the day and the hours separated by a vertical bar: Monday - Friday | 9:00 - 17:00. The phone number and email become links, and Get directions opens the address in Google Maps. The map shows the address unless Map holds a Google Maps or OpenStreetMap embed link for a particular view; any other link is ignored. Map sits on the right, the left or is left out, and Map look is color or grayscale. On tablets and phones the map sits under the card.

Card Slider

A row of cards that slides sideways - stories, programs, places - with each card's picture, small label, title, text and link. Arrows beside the heading and a progress line under the cards move the row, as do a swipe, a trackpad and the arrow keys; the arrows are hidden when every card fits. Card width is regular, wide or narrow, Picture shape is landscape, portrait or square, and Text sits below the picture or over it.

Notice Bar

A one-line announcement - an opening, a closure, a deadline - with a small label, an icon and a link. Color is the accent color, information, good news, warning or dark, and Style is a full-width bar or a card inside the page width. With Close button on, a visitor who closes the notice does not see it again in that browser; changing the message shows it again. Show until removes the notice by itself after a moment you choose.

Resource List

Files to download - reports, forms, minutes - each with a title, a description, a date and a group. File takes a path from Content › Media Library (or anywhere on the site) or any https:// address. The icon and type (PDF, document, spreadsheet, presentation, archive, picture, audio, video, text) come from the file name; a file on the site is downloaded directly and its Size is worked out when left empty, and any other address opens in a new tab. Layout is a list or cards, and Search box adds a field that narrows the files as a visitor types.

Parallax Showcase

One large photograph across the full width of the page that moves more slowly than the page as it scrolls, with a headline, a small label, text, a button and a Photo credit in the corner. Message is centered or at the bottom left or right, Height is regular, tall or the full screen, and Shade over the picture is light, medium or strong - stronger shade keeps white text readable on a bright picture. The picture stands still when effects are off.

Sticky Scroll

A story told in steps: the picture stays in place while the steps scroll past it, and it changes to each step's picture as that step reaches the middle of the screen; the step in view is bright and the others faint. Each step has a picture and its description, a small label, a title, text and a link. Picture sits on the left or the right, and Step counter shows 1 / 3 on the picture. On phones each step shows its own picture above its text.

Expanding Panels

A row of tall picture panels where one is open at a time, showing its title, text and link; the others show only their icon and title, turned upright. Three to six panels work best, and the first starts open. Opens on is hover or click (on touch screens and small windows panels always open on a tap), and Height is regular or tall. On phones the panels are stacked and the open one grows.

Five slider sections for the top of a page or a showcase further down. They share their controls: previous/next arrows, navigation that shows how long each slide stays, the arrow keys, and a swipe on touch screens. Change slides sets how often they move by themselves, or leaves the choice to visitors. Changing by itself pauses while the pointer or keyboard focus is inside the slider, while it is scrolled out of view, and when a visitor presses the pause button; visitors who have asked their device for reduced motion start paused, and with the site's effects off the slides simply cross-fade. Screen readers hear each slide as "2 of 5".

Hero Slider

Full-width slides, each with a picture, a small label, a headline, text and two buttons. A slide can also carry a Video (an .mp4 or .webm file from the media library or an https:// address) that plays silently behind the message, with the picture shown until it starts and for visitors who prefer reduced motion. Transition is a fade, a slide or a zoom out; Message sits on the left, in the center or at the bottom left; Navigation is progress bars with the slide titles, dots, or a 01 / 03 counter; Picture motion adds a slow zoom; Shade over the picture is light, medium or strong; Height is regular, tall or the full screen. On phones the message moves to the bottom and the arrows give way to a swipe.

Split Slider

The words on one side and a picture on the other. When the slide changes, the new picture wipes in from the side it is coming from while the words fade across. Picture sits on the right or the left, Picture shape is rounded, an arch, or reaches to the edge of the page, and Navigation is a 01 / 03 counter with arrows or a row of thumbnails. On tablets and phones the picture sits above the words.

A large slide in the center with its neighbors peeking in on both sides; it goes round without an end, and a click on a side slide brings it to the center. Each slide has a picture, a small label, a title, text and a link. Text sits over the picture or below the carousel, and Height is short, regular or tall. Short lists are repeated so both sides stay filled; the dots still count each slide once.

Thumbnail Slider

A rounded picture stage chosen with Thumbnails along the bottom or A list of titles on the side; the chosen entry fills a thin bar while its slide is shown. Short title names a slide in the thumbnails or the list (the headline is used when empty). Height is regular, tall or the full screen, and Shade over the picture is light, medium or strong. On phones the thumbnails become a compact row under the message.

Stacked Cards

A deck of picture cards, fanned, beside the section heading and the top card's label, title, text and link. Visitors throw the top card aside by dragging it, press the arrows or use the arrow keys; it goes to the back of the deck. Cards sit on the right or the left, and Card shape is portrait, square or landscape.

Media

Image cards with a title and a link each - portfolio pieces, case studies, brands.

Thumbnails that open the full image in a lightbox, each with alternative text and an optional caption, as a slider or a grid. Thumbnail shape crops every thumbnail to a square, 4:3, 16:9 or portrait so a mixed set of pictures lines up.

Team List

People cards with a photograph, a name, a designation and optional Facebook, Twitter and LinkedIn links, as a grid or a carousel.

Testimonials

Customer quotes with a name, company, photograph and a star rating, in a carousel that lifts the centre card onto the primary colour, a grid, a wall (masonry, cards of any length) or a spotlight that shows one quote at a time; two, three or four across, with autoplay for the carousels. The quote leads the card, with the quote mark as a glyph, plain text, or a large opening quote; long quotes are truncated with a Read More that opens the full text, except on the wall, which shows them whole.

Logo Wall

A grid of customer or partner logos, four, five or six per row, muted with colour on hover or in full colour, each optionally linked. SVG or PNG with a transparent background works best; in dark mode the logos are inverted so dark marks stay visible. Motion turns the grid into a continuous marquee (normal or slow, paused while the pointer is over it, and still for visitors who prefer reduced motion), and Size makes the logos small, regular or large. An entry without an image shows its name as a word, so the wall can list places, languages or partners that have no logo.

Video

A YouTube or Vimeo link embeds the player (YouTube through its no-cookie domain, Vimeo with tracking off); a direct .mp4 or .webm link plays natively. With a Poster Image the section shows the poster and a play button, and nothing is fetched from the video host until the visitor presses play. Aspect Ratio and Width size the frame. A caption prints under the player.

Updates

The latest entries from the Updates section of the site as news cards - a chosen number at a time. Each card carries the update's preview image (set on the update in Help Center › Updates; without one, the first picture inside the update is used, and an update with no picture gets a placeholder), its date, its title, its deck or first paragraph as the excerpt, and a read-more link to the full update. Layout shows them as cards, as a list with the picture beside the text, or as a lead story - the newest update large with the rest as cards filling the row under it. A caption and subtitle can sit above the title. View all adds a button to the updates page, and the excerpt can be hidden for a compact list of titles and dates. Category limits the section to one update category, and its View all button then opens the updates page on that category.

Events

The next published events from Help Center › Events, soonest first: Number of events (two to six), Layout (cards with the picture and a date tile, or a compact list), a View all events button, and what to show when there are no upcoming events — hide the section, show the latest past events, or a message you write. Events that have ended are never shown as upcoming. If Events is switched off under Setup the section is left out of the page.

The published albums from Content Manager › Galleries as cards, each opening the album's own page. Leave Albums to show empty for the newest albums and set a Category to narrow them, or pick particular albums to pin a set in the order you choose. How many (one to twenty-four), Columns on desktop (two, three or four), Card details (the date, place and how many pictures the album holds, or the title alone) and Summary text shape the cards, and a button can lead to the full gallery. If Galleries is switched off under Setup the section is left out of the page.

One album's pictures and videos in place on the page, opening in the same lightbox the album's own page uses — so a picture added to the album in the Content Manager shows on every page that uses it. Choose the Album and how many items to show (the rest stay on the album's page), a Layout of mosaic or even grid, Columns on desktop, and whether Captions print under each picture or appear only in the lightbox. Take the heading from the album uses the album's own title and summary instead of the section's. A button opens the album's page.