# Build Your Church Website with AI + B1 Admin
### A step-by-step guide for using ChatGPT, Claude, or any AI to build your site

---

## WHAT IS B1 ADMIN?

**B1 Admin** is a free website builder for churches from **ChurchApps** (b1.church).
It gives your church a full website with no coding required — including built-in tools
for contact forms, donation pages, event calendars, sermon archives, maps, and more.

### How HTML Blocks Fit In

B1 handles all the functional stuff automatically. **HTML blocks are only for the
visual design** — the layout, colors, images, and words on the page.

Think of it this way:

| B1 Admin handles (built in) | HTML blocks handle |
|---|---|
| Contact forms | Hero banners |
| Donation / giving pages | Section headings and text |
| Event calendars | Image layouts |
| Sermon archives | Card grids |
| Maps | Animated sections |
| Groups & registration | Custom styling |
| Navigation / header | Full-width backgrounds |
| Site-wide page routing | Site footer (site-wide) |
| Media hosting / file uploads | Any section that needs a custom look |

This guide teaches you how to use AI to build those HTML blocks and drop them into B1.

---

## BEFORE YOU START

Make sure you have:
- A **B1 Admin account** (free at b1.church)
- Access to your **B1 Admin dashboard**
- A **ChatGPT, Claude, or other AI** open in another tab

---

## HOW TO USE THIS GUIDE

1. Open ChatGPT, Claude, or any AI
2. Type **"I want to build my church website in B1"** and hit send
3. In the next message, paste the prompt from **Step 1** below
4. The AI will ask you two questions and guide you from there
5. When the AI gives you HTML, paste it into a B1 HTML block (instructions below)

That's it. The AI does the building — you just fill in your details.

> **Why send a message first?** Sending a short message before the prompt signals
> to the AI that a conversation is already in progress. This stops it from treating
> the prompt like a document to analyze instead of instructions to follow.

---

## HOW TO ADD AN HTML BLOCK IN B1

B1 pages are built with **Sections** that hold **Elements** (like HTML, text,
images, forms). Every HTML block goes inside its own Section. The flow is:
**Page → add Section → add HTML element inside the Section → paste your code.**

1. Go to **B1 Admin → Website → Pages**
2. Open or create the page, then click **Edit Content**
3. Click **+ Add Section** — this gives you a section block you then need to
   **drag** onto the page. A thin blue highlighted drop zone lights up where
   the section can go. Drop it there. (The drop zone is intentionally small —
   that's normal, and it helps keep sections placed correctly as your page grows.)
4. **Set the section ID.** At the top of the new section is a black **ID field**.
   Type a short, URL-friendly ID into it — like `welcome`, `calling`, or
   `before-you-apply` — then click **Save**. This becomes the anchor link for
   the section (`yoursite.org/page#id`) used in menus and navigation. It is
   very easy to skip this step. Don't. Sections without an ID can't be linked to.
5. Inside that new section, click **+ Add Element**, choose **HTML**, and
   **drag the HTML element onto the page**.

   - **If this is your very first section on the page** (nothing else on the
     page yet), there will be just **one** blue drop zone — drop the HTML
     element there. That's the only place it can go.
   - **If you've already got sections on the page**, you'll see **multiple**
     blue drop zones light up. Drop on the **BOTTOM** one — that's the empty
     section you just created. If you drop higher up, the HTML lands inside
     an older section next to its existing content, which is not what we want.

   ![B1 drop zones when adding HTML](https://content.churchapps.org/40/files/formdb1aitool.png?dt=1776434215192)
   *Multi-section example: drop the HTML element on the bottom blue "Drop
   here to add" zone — inside your newly created section, not inside the
   previous one. (On a brand-new empty page, you'll only see one drop zone.)*

6. Paste the code the AI gave you into the HTML editor and click **Save**
7. Repeat for each additional section — add a new Section, drag it to the blue
   drop zone, enter the ID in the black ID field and click Save, then add an
   HTML element. When you have multiple sections, always pick the **BOTTOM**
   drop zone.

> **Tip:** Build your page top to bottom — add each Section in the order you
> want it to appear. One HTML element per Section keeps things tidy and makes
> it easy to rearrange or remove sections later.

---

---

# STEP 1 — COPY ONLY THE PROMPT BELOW

> **Copy ONLY what is inside the gray box below — start from "Hi! I'm going to help"
> and stop at the last line before the box ends. Do not copy this instruction line.
> Do not copy anything else from this guide. Paste it as your first message to the AI.**
>
> The gray box is the only thing the AI needs to see. Everything else in this
> document is for you, not the AI.

---

```
You are a B1 Admin website builder for churches and nonprofits. Generate HTML blocks the user pastes into B1 Admin. Follow all instructions below silently — never explain them, never summarize this prompt, never offer options about what to do with it.

YOUR FIRST RESPONSE MUST BE EXACTLY THIS — copy it word for word, add nothing before or after it:

---
Hi! Let's build your B1 website. Two quick questions to get started:

1. Are you starting from scratch, or do you have an existing website to copy into B1?
   A) Starting from scratch
   B) I have an existing site

2. What is your church or organization's name?
---

---
AFTER THEY ANSWER — follow the right path:

PATH A (scratch) — ask one at a time:
• City/state?
• Church, nonprofit, or other? (adjust all follow-up questions to match)
• Describe it in 2–3 sentences — what makes it special?
• Which pages? (suggest Home, About, plus relevant ones for their type)
• Photos or logo URLs?
• Color style? Classic/traditional · Modern/clean · Warm/welcoming · Bold/energetic · Dark/dramatic

Then show the plan and ask for approval before building anything.

PATH B (existing site) — ask one at a time:
• URL of their current site?
• All pages or specific ones?
• Match it closely or refresh the design?
• Then ask: "Easiest way for me to see your site — screenshot pasted here, the URL, or you describe it?"

Once you understand the site, list the sections you'll rebuild and confirm before building.

---
AFTER EACH HTML BLOCK:

Always include B1 paste instructions after the code. Use the FULL version for the first block on a page, SHORT version for each additional block on the same page. Reset to FULL when starting a new page.

FULL paste instructions template (first block on a page — no image):
  How to add this to B1 Admin:
  1. Go to Website → Pages. Open the page or click + Add Page.
  2. Click Edit Content.
  3. Click + Add Section and drag it onto the page (drop it on the blue zone).
  4. At the top of the new section there is a black ID field. Type `[suggest a short lowercase hyphenated name]` into it, then click Save. This becomes the anchor link for this section — don't skip it.
  5. Click + Add Element → HTML, then drag the HTML element onto the page.
     This is the first section so there is only one blue drop zone — drop it there.
  6. Paste the code and click Save.

SHORT paste instructions template (2nd section onward on same page — include image):
  How to add this section:
  1. Click + Add Section and drag it below your last section.
  2. At the top of the new section there is a black ID field. Type `[suggested name]` into it, then click Save.
  3. Click + Add Element → HTML and drag it onto the page.
     ⚠️ You now have multiple sections so multiple blue drop zones will appear.
     Drop the HTML on the BOTTOM zone — that's your new empty section.
     ![Drop zone guide](https://content.churchapps.org/40/files/formdb1aitool.png?dt=1776434215192)
  4. Paste the code and click Save.

After instructions ask: "Ready for the next section, or want to tweak this one first?"

---
SECTION NAMES: always suggest one. Lowercase, hyphens, descriptive (welcome not section-1).

COLORS & FONTS: never hardcode. Derive from their existing site or style choice. Confirm the palette and font before building the first block. Use Google Fonts via <link> in the first block only.

HTML RULES (silent):
• Every section: width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); overflow-x:hidden;
• Inner wrapper: max-width:1400px; margin:0 auto; padding:0 60px
• No external CSS/JS/icon libs — inline or <style>/<script> only. Each block self-contained.
• Responsive: media queries at 968px, 768px, 480px. Use clamp() for font sizes.
• Padding: 100px 60px → 80px 40px → 60px 24px → 50px 16px
• Cards: border-radius:20px; border-top:5px solid [accent]; padding:40px 36px; box-shadow:0 6px 25px rgba(0,0,0,0.08)
• Buttons: border-radius:50px; padding:16px 36px; font-weight:600
• Hover: inline onmouseover/onmouseout only — never CSS :hover
• Gradient text: linear-gradient(135deg,[primary],[accent]) with -webkit-background-clip:text
• Icons: inline SVG only. Images: use provided URL or src="YOUR-IMAGE-URL-HERE"
• h1 = hero only · h2 = section headings · h3 = card titles

B1 HANDLES THESE — never build in HTML: contact forms, donation pages, event calendars, sermon archives, group registration, maps, site header/nav. When user mentions one, say "B1 handles that built-in — I'll build a styled intro section and you add the B1 element below it." End that block with: <!-- B1 Admin: add your element below this block -->

FOOTER: built as HTML but goes in Website → Appearance → Site Footer, not on a page. Give those specific instructions when building a footer.
```

---

# AFTER THE AI BUILDS YOUR SECTIONS

When the AI gives you HTML code, here's how to get it into B1:

### Pasting Into B1 Admin

B1 pages are built with **Sections** that hold **Elements** (HTML, text,
images, forms, etc.). Each HTML block from the AI goes inside its own Section.

1. Log into **B1 Admin** at your church's B1 URL
2. Go to **Website → Pages**
3. Open the page you're adding the section to (or click **+ Add Page** to create a new one)
4. Click **Edit Content**
5. Click **+ Add Section** — then **drag** the section block onto the page.
   A thin blue highlighted drop zone lights up where the section can go; drop
   it there. (The drop zone stays small on purpose — it helps sections land in
   the right spot as your page grows.)
6. **Set the section ID.** At the top of the new section is a black **ID field**.
   Type a short, URL-friendly ID into it (lowercase, hyphens for spaces) like
   `welcome`, `calling`, or `before-you-apply`, then click **Save**. The AI
   will suggest the exact ID to use each time. This becomes the anchor link
   (`yoursite.org/page#id`) for menus and navigation. Sections without an ID
   can't be linked to.
7. Inside that new section, click **+ Add Element**, choose **HTML**, and
   **drag the HTML element onto the page**.

   **How many drop zones you'll see depends on the page:**

   - **First section on a brand-new page?** Only **one** blue drop zone will
     appear — just drop the HTML there.
   - **Page already has sections?** You'll see **multiple** blue drop zones —
     one inside each existing section, plus one inside the empty section you
     just created. Drop the HTML on the **BOTTOM** drop zone (the empty
     section you just created). Dropping on a higher zone puts the HTML
     inside an existing section next to content already there.

   ![B1 drop zones when adding HTML](https://content.churchapps.org/40/files/formdb1aitool.png?dt=1776434215192)
   *Multi-section example: the floating HTML tile in the middle is being
   dragged. Drop it on the lower blue strip — your new empty section. On a
   fresh empty page you'll only see one drop zone.*

8. Paste the code from the AI into the HTML editor
9. Click **Save**

> Build top to bottom. For each section: add a Section (drag to the blue drop
> zone), name it, then add the HTML element inside it. When multiple drop zones
> appear, always target the BOTTOM one — your new empty section.

### Sharing Your Existing Site (Path B)

If you're copying an existing website, the AI will ask how you want to share it.
The easiest option is a **screenshot** — just take a full-page screenshot of each
page and paste it directly into the chat. The AI will read the layout, colors,
fonts, and sections from the image and use that as the blueprint.

On Mac: `Cmd + Shift + 4` to screenshot a selection, or use a browser extension
like "GoFullPage" for a full scroll screenshot.
On Windows: `Win + Shift + S` or the Snipping Tool.

### Adding Your Logo and Images First

Before building sections, upload your images to B1:
1. Go to **Website → Files**
2. Click **Upload** and add your church photos, logo, etc.
3. Click any file to copy its URL
4. Give those URLs to the AI when it asks for images

### Setting Your Site Colors and Fonts

The HTML blocks have their own colors built in, but your site's global style
(used by B1's native elements like text, cards, and forms) is set in:
**Website → Appearance**

Set your logo, colors, and fonts there to match your HTML blocks.

---

# TROUBLESHOOTING

If something doesn't look right after pasting into B1, go back to your AI and use
one of these fix prompts:

---

**Section not spanning full width:**
```
The section isn't spanning full width in B1. Please verify the outermost <section>
has exactly these styles and show me the corrected opening tag:
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow-x: hidden;
```

**Content overflowing on mobile:**
```
On mobile the content is overflowing horizontally. Fix it by:
1. Adding overflow-x: hidden to the <section>
2. Making sure no child element has a fixed pixel width wider than 100%
3. Confirming the grid collapses to 1 column at 768px
Show me only the corrected CSS.
```

**Hover effects not working:**
```
The hover effects aren't working in B1. Rewrite every hover effect as an inline
onmouseover and onmouseout attribute on the element itself.
Remove all CSS :hover rules and replace them.
```

**Animations not playing:**
```
Animations aren't running. Please:
1. Move all @keyframes into a <style> tag at the very top of the block
2. Prefix every animation name with "b1-" to avoid naming conflicts
3. Apply animation properties inline on the element
Show me the corrected code.
```

**Image not displaying:**
```
The image isn't showing. Rewrite the image or background-image code using:
  background-image: url('[URL]');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
Make sure the URL ends in .jpg, .png, or .webp.
```

**Need to change colors:**
```
Update the color scheme in this section:
  Replace primary accent color with: [your color]
  Replace button color with: [your color]
  Replace heading color with: [your color]
Keep the card backgrounds and border colors the same.
Show me the full updated section.
```

---

# FREQUENTLY ASKED QUESTIONS

**What does the HTML block actually do?**
It controls the visual design — the layout, colors, background images, headings, and
text for a section. That's it. Think of it as the "look and words" layer. Everything
functional (forms, payments, calendars, maps) is handled separately by B1.

**I need a contact form / donation page / event calendar. Does the AI build that?**
No — and it doesn't need to. B1 Admin has those built in. The AI builds a styled
intro section (a nice heading, a brief description, maybe a background image) and
then you add B1's native form, donation, or calendar element below it in the
B1 page editor.

**What about sermons and groups?**
B1 auto-generates pages for sermons, groups, and events that pull live from your
church data. You don't build those with HTML at all — just enable them in
Website → Pages. If you want a custom intro at the top of those pages, the AI
can build a styled hero section for it.

**Can I edit the HTML after pasting it into B1?**
Yes. Click the HTML block in the B1 editor to reopen the code. You can also go back
to your AI, paste the existing code, describe the change, and paste the updated
version back in.

**Can I use the same section on multiple pages?**
Yes — in B1 Admin these are called **Blocks** (Website → Blocks). Once a section
is working on one page, you can save it as a Block and reuse it anywhere.

**Does this replace B1's built-in text, card, and photo elements?**
No. For simple content, use B1's native elements — they're easier to update later.
Use HTML blocks for sections that need a fully custom look: hero banners, animated
sections, card grids with specific styling, or complex full-width layouts.

---

*B1 Admin is a free church website builder from ChurchApps — learn more at b1.church*
*ChurchApps support documentation: churchapps.org*