Skip to main content
Pages are built from elements. A public page has three parts: a header at the top, a Main Section in the middle, and a footer at the bottom. You add elements to the Main Section from its Element Library. See Adding, moving, and removing elements.

​
Where each element can go

The Hero, Header, and Header with Hero elements make up the top of a page. They aren’t in the Element Library.

​
Main Section

The Main Section holds the page’s content. Besides its list of elements, it has two settings sections:
  • Spacing — Space above and Space below the section’s content: None, Small, Medium (the default), or Large. Press Save Spacing.
  • Background — A Background image that spans the full width behind the content, and an optional overlay. Press Save Background.

​
Text Block

A block of formatted text. Its editor has:
  • Name — A name for this block, to help you tell blocks apart in the editor. Visitors don’t see it.
  • Text content — The text itself. See The text editor.
  • Spacing — See Spacing.
  • Text style — Text color and Link color. See Colors.
  • Make published — Uncheck to make the block a draft that visitors don’t see.

​
The text editor

The text editor works like a word processor. Its toolbar has:
  • Paragraph and heading styles (Heading 1–3)
  • Bold, italic, and underline
  • Left, center, and right alignment
  • Numbered and bulleted lists
  • Links
  • Tables: insert a table, add or remove rows and columns, and merge or split cells
  • Clear formatting
Above the text you’ll find:
  • Add image or PDF — Upload an image or PDF into the text. You can also drag a file onto the editor.
  • Event — Insert an upcoming event. Search for the event, and GroupFlow adds its title as a link, its date and time, its venue, and a “View event details” link.
  • Edit mode: Edit / Preview — Switch between editing and a preview of the finished text.
To work with the HTML directly, choose Edit raw HTML in the toolbar. Choose Switch to visual editor to go back.

​
Image

A single image. Its editor has:
  • Image — Choose the image. See Choosing an image.
  • Alt text — A short description of the image. Screen readers read it aloud to people who can’t see the image.
  • Spacing — See Spacing.
  • Layout options › Width — Standard (768 pixels wide), Wide (1024 pixels), or Full width. This setting is available only in the Main Section; inside a column, an image fills the column.

​
Two Columns

Two areas side by side. On narrow screens, the columns stack, one above the other. Each column can hold its own elements. Select a column to edit what’s in it, or drag the columns in the Columns list to change which comes first. Under Layout options:
  • Width — Standard, Wide, or Full width. Available only in the Main Section.
  • Column widths — How the space is divided:
    • Column 1: % — The first column takes 25%, 33%, 50%, 67%, or 75% of the width.
    • Column 1: fixed or Column 2: fixed — One column has a fixed width, from 80 to 480 pixels, and the other takes the rest.
  • Stack the columns below — When the element is narrower than this, the columns stack: Tight (320 pixels), Narrow (512 pixels), or Wide (704 pixels).
You can put a Two Columns element inside a column, for a three- or four-part layout. You can nest them only one level deep.

​
Column

Each column lists its elements under Column Elements, with an Element Library for adding more. Press Save Elements to apply changes. A column also has its own Spacing. If you delete a column’s last element, an empty Text Block takes its place, so the column is never left empty.

​
Button Row

A button that links somewhere. Enter the Button Label and the Link address. The link can be a page on your site, such as /join, or a full web address.

​
Contact Form

A form visitors can use to send you a message. It includes a check to keep out spam.
  • Form Title — The heading shown above the form.
  • Fields — The questions the form asks. A new form asks for Your Email and a Message. You can add, change, and remove fields, but the form always keeps an email field so you can reply.
  • Send Submissions To — Choose A Team to email every submission to everyone on a team, or A Member to email them to one member.

​
Posts

A list of posts. Each post has an image, a heading, some text, and an optional button. Posts alternate sides: the first has its image on one side, the next on the other. Drag posts by their handles to reorder them. Each post’s menu lets you clone, delete, publish, or unpublish it. Unlike other elements, changes to the list of posts are saved immediately. Click a post to edit it:
  • Title — The post’s heading.
  • Photo — The post’s image, with Alt text and an optional Photo caption.
  • Button — An optional button, with a Label and a URI path to link to.
  • Text content — The body of the post.
  • Colors — Title color, Text color, and Link color.
  • Make published — Uncheck to hide the post.
The Members Home page uses a Posts list for the content members see when they log in.

​
Quote

A highlighted quote, such as a testimonial, with an optional photo. It has a Title, a Photo, the quote in Text content, and Colors.

​
Public Events List

A list of your group’s upcoming public events. It updates on its own as you publish events, and has no settings.

​
Hero

A large banner at the top of a page, with a heading over a background image or video.
  • Layout options › Hero Style — Heading Only, or Full Hero - Heading, Subheading, and Button.
  • Background — A Background image, a Background video, or both, plus an optional overlay.
  • Spacing — See Spacing.
  • Heading — The heading text, with its own text color.
  • Sub Heading — Smaller text below the heading. Full Hero only.
  • Call-to-Action (CTA) Button — A button below the text, with a Label and a Link. Full Hero only.

​
Background videos

For Background video, enter a link to a video file, or a YouTube or Vimeo link or embed code. It must be a single video, not a playlist. If you set both an image and a video, the image shows while the video loads, and the video plays over it. You can also use a video without an image. The bar at the top of a public page, with your logo and your main menu.
  • Layout options — Two Column or Three Column. Press Save Header Layout.
  • Background — A background image, video, and overlay for the header bar. Press Save Header Background. With no background set, the header uses the header background color from Design Settings.
  • Spacing — See Spacing.
To change your logo, go to Design Settings. To edit the menu in the header, click the menu on the page. See Navigation Menus.

​
Header with Hero

A header bar and a hero combined, over one shared background. New public pages start with one.
  • Background — A background image, video, and overlay behind both the header and the hero.
  • Header › Edit header… — Opens the Header editor for the header bar.
  • Hero › Edit hero… — Opens the Hero editor for the heading and button.
The bottom of your public pages. The footer is shared: editing it on one page changes it on every public page. Its Element Library has Navigation (a menu of links), Logo and Copyright, and Social Links.

​
Settings shared by many elements

​
Spacing

Spacing sets how much room an element has around its content. The Spacing section appears in the Text Block, Image, Button Row, Two Columns, Column, Hero, and Header editors.
  1. Choose Desktop or Mobile under Screen size. Mobile spacing applies to screens narrower than 768 pixels.
  2. Set the spacing. It starts as one value for All edges. Use the link below it to set top-and-bottom and left-and-right separately, or each edge separately.
  3. Choose a value from 0 to 128 pixels, or Default to use the element’s built-in spacing. On Mobile, choose Same as desktop to reuse the desktop spacing.
The element’s background shows through its spacing.

​
Colors

Color settings, such as Text color and Link color, each offer three choices:
  • No color — Use the color of the surrounding area.
  • Default — Use the color set for this kind of text in Design Settings.
  • Any color — Pick any color. You can also enter a six-digit hex code such as #1A73E8.

​
Overlay

An overlay tints a background image or video, which can make text over it easier to read. Check Tint the background to turn it on.
  • Overlay color — One of your site’s colors: Page background, Page text, Accent, Button, or Header background.
  • Overlay strength — 20%, 40%, 60%, 80%, or 100%.

​
Choosing an image

The Image element and the background settings share one image picker:
  • Upload a new image — Drop an image onto the picker, browse for one, or press Upload new. Images up to 5 MB are accepted, and are resized automatically.
  • Reuse an image — Pick one from Or choose from your library, which shows the images already used in Image elements on your site.
  • Remove the image — Press Remove image. Press Undo if you change your mind.
The picker shows the new image as not saved yet until you save the editor.