Siirry pääsisällölle

Using the Page Editor

The B1 page editor is a visual drag-and-drop builder that lets you design your church website pages without writing any code. You can add sections and content blocks, customize styles, preview your work, and undo changes -- all from within your browser.

Before You Begin

  • Complete Initial Setup to get your website configured
  • Create at least one page in Managing Pages
  • You need the content.edit permission to access the editor

Opening the Editor​

  1. In B1 Admin, open the Jump menu (the search bar at the top-left), expand Website, and click Pages.
  2. Find the page you want to edit in the Pages table and click Edit Content.

The editor opens in full-screen mode. The left panel shows your page structure and available content elements; the center area shows a live preview of your page.

tieto

The editor always displays in light mode, regardless of your B1 Admin theme setting, and uses the heading and body fonts you chose in Appearance. This ensures the preview accurately matches how your page will look to website visitors.

Page Structure: Sections and Elements​

Every page is built from two levels:

  • Sections -- The top-level containers that divide your page into horizontal bands (for example, a hero section, a content block, or a footer strip). Every page must have at least one section before you can add content.
  • Elements -- The individual content pieces placed inside a section, such as text, images, buttons, cards, forms, and calendars.

Adding a Section​

  1. Click Add Section (or the + button at the top of the left panel).
  2. Choose how to start:
    • From a template — browse the section template gallery organized by category (Hero, About, Services, Giving, etc.) and click one to insert it as a fully styled, pre-filled section. You can customize everything after it is added.
    • Blank section — choose a column layout (single, two columns, three columns, etc.) and build from scratch.
  3. The new section appears in the preview. Click it to select it and configure its background color, padding, and other style options.

Switching a Section's Layout​

Already built out a section but want a different structure? Use the layout switcher on that section to swap its column arrangement for a different one from the gallery while keeping your existing content and elements in place.

Adding Elements to a Section​

  1. Click inside a section in the preview to select it.
  2. Click Add Content and choose an element type from the list:
    • Text -- Headings, paragraphs, and rich text
    • Image -- Upload or link to a photo
    • Button -- A clickable call-to-action link
    • Card -- An image with a title and description
    • Form -- Embed a form directly on the page. If the form has a header photo, it shows above the questions
    • Calendar -- Display an event calendar
    • FAQ -- Accordion-style question and answer blocks
    • Video -- Embed a video by URL
    • Groups Browser -- A filterable directory of all church groups with optional search, category filter, and label filter
    • Icon Feature -- An icon with a title and short description, for feature or ministry highlights
    • Gallery -- A multi-photo grid or masonry layout
    • Testimonial -- One or more quotes with author name, role, and photo
    • Social Icons -- Linked icons for your church's social media profiles: Facebook, Instagram, WhatsApp, YouTube, X, TikTok, Vimeo, and Podcast. Fill in a link for each one you want to show; for WhatsApp, use a https://wa.me/ link with your number or a group invite link
    • Countdown -- A timer counting down to a date or a weekly service time
    • Stats -- A row of large numbers with labels (members, years, campuses)
    • Campaign Progress -- A live progress bar for a giving campaign, showing the total raised toward a fund goal
    • Staff Grid -- Photo cards for the members of a group; the group must have its public roster option turned on
    • Service Times -- Your campuses' service schedule, pulled automatically from attendance setup
    • Sermons -- Your sermon library, as a full browser or a grid, list, or featured-latest layout
    • Map -- An embedded map centered on your church's address
    • Table -- A simple grid of rows and columns for tabular content
    • Text with Photo -- Text and an image side by side
    • Logo -- Your church logo, pulled from Appearance
    • Live Stream -- Your live stream player, embedded directly on the page
    • Podcast -- A list of episodes pulled from an external podcast RSS feed URL you provide, with settings for how many episodes to show and whether to display dates and descriptions. Each episode on the live site has an audio player and a Download link that saves the episode's audio file under the episode title. This is for featuring any podcast feed on your site; to publish your own sermons as a podcast, see Managing Sermons instead.
    • Donation -- A giving button or embedded donation form
    • HTML -- Your own raw HTML, for advanced use cases such as embedding a third-party widget (see Using the HTML element)
    • iFrame -- Embed external content by URL
  3. Configure the element using the settings panel that appears.

Using the HTML element​

The HTML element has two boxes:

  • HTML Content -- The markup to show on the page. Any <script> tags you include here run on your live site.
  • JavaScript (exclude script tag) -- Script code that runs when the page loads. You can also paste a vendor's embed snippet here with its <script> tags included, and it will run on the live site.

If you paste only a web address (such as an image link) into the JavaScript box, the box turns red with the warning "This is a web address, not JavaScript." A bare address in that box does nothing. To show a picture, use an Image element or put <img src="..."> in HTML Content.

Using the Calendar element​

The Calendar element shows events from one of your calendars:

  1. Under Select, choose Group Calendar (one group's events -- the list shows groups you belong to) or Curated Calendar (a calendar you built under Calendars; see Curated Calendar).
  2. Under Select Calendar, pick the group or calendar.
  3. Under Display, choose how to show it:
    • Month calendar -- A month grid that visitors can page through.
    • Upcoming events -- A grid of tiles for the next 12 upcoming events, with a repeating event shown once on its next date. Each tile shows the event's photo (or its title on your theme's dark color when it has no photo), a date badge, the day and time, and the first line of its description. A Subscribe button above the tiles lets visitors copy the calendar's ICS link or download it.
  4. To show only some events, type a tag in Only events tagged -- for example, youth. Only events whose Tags include that word appear. Leave it empty to show every event. Tags are set on each event; see Adding and Editing Events.

In either display, clicking an event opens its own page on your website. The event page shows the event photo, title, date and time, and description, plus a box with When (including the repeat pattern for a recurring event) and Where (the rooms booked for it). It also has a Register for this Event button when registration is turned on, and an Add to my calendar link that downloads the event as a calendar file. The page is set up so search engines can show the event's date and details in their results. Event pages from curated calendars shown on your pages (for events in the next six months) are also listed in your site's sitemap, so search engines can find them.

Reordering Content​

Drag sections or elements using the handle icon (six dots) on the left side of each item to reorder them. You can drag elements within a section or move them between sections.

Styling Your Page​

Section Styles​

Click any section to open its style panel. You can set:

  • Background -- Solid color, gradient, or image. When using an image background, a Focal Point picker lets you click to set which part of the image stays centered as the section scales, and an Overlay color option lets you add a semi-transparent tint over the image to improve text legibility.
  • Padding -- Top and bottom spacing inside the section
  • Width -- Full-width or centered/contained
  • Dividers -- Decorative shape dividers (wave, slant, curve, triangle, and more) on the top or bottom edge of the section, with color, height, and flip options

Element Styles​

Click any element to open its style panel. Common options include font size, color, alignment, margin, and padding. For images, you can set alt text and link targets.

Custom CSS​

For advanced styling, each section and element has a Custom CSS field where you can write your own CSS rules. These are scoped to that element, so they will not unintentionally affect the rest of the page.

vihje

If you need to apply styles across your entire site -- such as a custom font or global color -- use the Appearance settings instead of custom CSS on individual pages.

Previewing Your Page​

Use the preview controls in the toolbar to check how your page looks at different screen sizes:

  • Desktop -- Full-width browser view
  • Mobile -- Narrow phone-sized view

To see the live page exactly as visitors will, go back to the Pages list and click the page's path. It opens in a new browser tab.

Checking Accessibility​

Click the Accessibility icon in the toolbar to run a quick check for common issues -- images missing alt text, low color contrast, or headings out of order. Each issue links directly to the element that needs attention so you can fix it in place.

Undoing Changes​

The editor tracks your editing history automatically. Use the toolbar buttons or keyboard shortcuts to navigate:

  • Undo (Ctrl+Z / Cmd+Z) -- Revert your last action
  • Redo (Ctrl+Shift+Z or Ctrl+Y / Cmd+Shift+Z) -- Re-apply an undone action

You can also restore the page to an earlier snapshot. Click View history in the toolbar to see a list of saved snapshots with descriptions, and click any entry to restore to that point.

varoitus

Restoring a snapshot replaces your current page content with the snapshot version. This cannot be undone with the standard undo button. Save a snapshot of your current state before restoring an old one if you want to keep the option to return.

Saving and Publishing​

Changes are saved automatically as you work. A status indicator in the toolbar shows whether your changes have been saved.

Draft and published state​

Pages can have a published state, which controls when visitors see your changes. The toolbar displays a status chip showing the current state:

  • Live on save -- The page does not use a publish workflow. Every saved change goes live immediately. This is the default for new pages.
  • Unpublished changes -- The page has been published before, but you have made changes since the last publish. Visitors still see the previously published version.
  • Published -- The page is live and your saved content matches what visitors see.

To publish your changes, click the Publish button in the toolbar. The page becomes live immediately.

To revert to the last published version without affecting what visitors see, open the overflow menu (⋮) and click Discard unpublished changes.

To stop using the publish workflow, open the overflow menu and click Turn off publishing. Edits then go live immediately again.

vihje

Use the draft/publish workflow when you want to prepare a page -- for example, for an upcoming event -- and only make it live at the right moment. Build and preview the page, then click Publish when you are ready.

  • Managing Pages -- Create pages, set URLs, and manage site navigation
  • Appearance -- Set site-wide colors, fonts, and branding
  • Files -- Upload images and documents to use in the editor
  • Creating Forms -- Build forms you can embed on pages