Creating & Editing Website Pages

Build pages, add sections, images, buttons, and embed Connection Card Pro tools (forms, giving, events) with the visual page builder.

Menu path: Web & App → Website → (Choose your site) → Pages & Settings

1) Open the Page Manager

1. Go to Web & App → Website.
2. Click Pages & Settings (or Manage Site) on the site you want to edit.
3. Scroll to the Pages section to see page thumbnails (e.g., Home, About).

• ✏️ Edit a page — click the pencil icon.
• 🗑️ Delete a page — click the trash can (use with caution).
• 🏠 Home — the home icon marks the current homepage.

2) Add a New Page

1. In Pages, click + New Page.
2. Fill out the Edit Page window:
   • Page Title — shows on the page and browser tab.
   • Page Subtitle (optional) — smaller text below the title on some layouts.
   • Page Preset — choose a starting layout:
     • Blank Page — empty canvas.
     • Cover Image & Text — hero image with text overlay.
     • Home / Landing Page — feature-rich layout for a main homepage.
   • Pretty Link — the URL path (e.g., /about, /giving, /kids).
   • Create a Link to this page in the Site Menu — check to add to top navigation.
3. Click Save to create the page.
4. Click the page’s ✏️ Edit icon to open the visual builder.

3) Understand the Page Builder

• Live Page Preview — left side.
• Builder Panel — right side tabs:
  • Elements — content blocks (text, images, forms, giving, etc.).
  • Properties — section background, borders, element-specific settings.
  • Style — fonts, colors, global styles for the page.
  • Menu — manage site navigation links and order.

Pages are built from sections (horizontal bands). Inside each section, add elements (text, images, grids, embedded widgets).

4) Add & Manage Sections

Add a new section

1. In the preview, scroll to where you want the section.
2. Click Add Section (at the bottom or between sections).
3. A blank section appears, ready for elements.

Change section appearance

1. Click inside the section to select it.
2. Open Properties:
   • Background — solid, gradient, or image (if available).
   • Border — choose a border style.
3. Use Style for global page fonts/colors.

5) Add Text, Images, and Grids

Open the Elements tab to see available blocks.

Add an element

1. Drag from Elements into a section (or click-then-place).
2. Click the element to edit:
   • Text — type, format, add links.
   • Image — upload/select from your library.

6) Work with Images

1. Add a component (e.g., Image & Text, Full Image, Cover Image, grid). (It is best to use images with not a lot of text. Text close to any of the edges may get cut off when someone is viewing from a smaller screen or on a mobile device)
2. Click the image placeholder in the preview.
3. Upload or choose from existing media.
4. Adjust alignment/crop/alt text if available.
5. Save.

Tip: Use high-quality, horizontal images for hero/cover sections to look great on desktop & mobile.

7) Buttons & Links

Buttons appear inside text/cards or as part of certain web elements.

• Use your text editor’s button-style option or built-in button controls.
• Many Image Cards / Web Elements include CTA buttons.
• For any link field, point to:
  • Another page on your site (e.g., /about, /plan-your-visit).
  • An external URL.
  • A Connection Card Pro form, event, or giving page.

Great button ideas: “Give Now,” “Plan Your Visit,” “Register for Event,” “Sign Up for Group.”

8) Embed Connection Card Pro Forms, Giving, Events & More

In Elements, look under Embedded Elements and Web Elements to connect directly to other modules.

To embed

1. Open Elements → choose an embedded/web element.
2. Add it to a section on your page.
3. Click the element in the preview to configure (pick which form, event, group, or giving widget).
4. Save your page.

9) Manage the Site Menu

1. On each page’s settings, check/uncheck Create a Link to this page in the Site Menu.
2. Or open the builder’s Menu tab to:
   • Reorder links.
   • Rename menu labels (without changing URLs).
   • Show/Hide links while keeping pages live for direct links.

10) Publish Changes

• Your edits save to the site’s current draft/live copy (based on your configuration).
• Use Preview Site from the site management screen to view in a full tab.
• If the site isn’t public yet, complete Billing and set status to Published. Once published, page changes typically appear immediately.

11) Practical Examples

Example A — “Give” Page with Embedded Giving

1. Open Web & App → Website → your site → Pages & Settings.
2. + New Page:
   • Page Title: Give
   • Pretty Link: /giving
   • Page Preset: Cover Image & Text or Blank Page
   • Check Create a Link to this page in the Site Menu
3. Edit the page:
   • Add a Cover Image section titled “Give Online”.
   • Add a new section with the Donation Widget (Embedded Element) and select your primary giving setup.
   • Optionally add Plain Text with giving philosophy/FAQs.
4. Save & Preview.

Example B — “Plan Your Visit” Page with Embedded Guest Form

1. Create a page Plan Your Visit, pretty link /visit, preset Home / Landing Page or Cover Image & Text.
2. Add sections:
   • Main Welcome web element — introduce your church.
   • Service Times web element — show times automatically.
   • Map web element — display your location.
3. Add a section with Digital Guest Card or Embedded Form and select your “Plan Your Visit” form.
4. Add a hero/button linking to the form section (“I’m Coming This Sunday”).
5. Save & Preview.