Website Sections

Sections are the content blocks that make up your pages. Each page can contain multiple sections arranged in any order. Website Studio offers a wide variety of section types organized into four categories: Content, Layout, Dynamic Content, and Interactive.

Section Categories

Content Sections

Static content blocks where you control the text, images, and layout.

Layout Sections

Structural elements for visual spacing and separation.

Dynamic Content Sections

These sections automatically pull live data from your TimelyChurch database.

Interactive Sections

Sections that provide interactive features for visitors.

Adding a Section to a Page

1. Open a page in the page editor (Website Studio > Pages > click a page).
2. Click the Add Section button.
3. A modal will appear showing all available section types organized by category.
4. Click the section type you want to add.
5. The section will be added to the bottom of the page and you will be returned to the page editor.

Tip: Sections are always added to the end of the page. You can reorder them afterward using drag-and-drop.

Reordering Sections

Sections can be reordered using drag-and-drop:

1. In the page editor, find the drag handle (the horizontal lines icon) on the left side of each section card.
2. Click and drag the section to its new position.
3. Release the mouse button. The new order is saved automatically.

Editing a Section

1. In the page editor, click the edit (pencil) icon on the section card.
2. You will be taken to the section editor with three main areas:

Content

The content area changes based on the section type:

• Hero sections have fields for heading, subheading, background image (upload or URL), and primary button text/URL.
• Content sections have a heading field and a body content area that supports HTML.
• Dynamic sections (Events, Staff, Groups, etc.) have heading and subheading fields. The actual data is pulled automatically from your database.
• Giving sections have heading, subheading, description, button text, and an optional give URL.
• Contact Form sections let you choose between the default contact form or a form from your Forms module.
• FAQ sections let you edit individual question-and-answer pairs.
• Beliefs sections let you edit individual belief items with title, description, and scripture reference.
• Testimonials sections let you edit individual testimonials with name and quote.
• Next Steps sections let you configure individual step cards with title, description, URL, and icon.
• Sermon sections have heading, subheading, and call-to-action text/URL.

Settings

Settings vary by section type but commonly include:

• Section is visible -- Toggle whether the section appears on the public page.
• Height (Hero) -- Choose from Small, Medium, Large, or Full Screen.
• Alignment (Hero) -- Left, Center, or Right alignment for text.
• Number of items to show (Events, Groups, Announcements, etc.) -- Control how many items display.
• Columns (Staff, Groups, Gallery) -- Choose 2, 3, or 4 columns.
• Padding -- Control vertical spacing: Small, Normal, or Large.

Hero Image Overlay Controls:

• Overlay Darkness -- A slider from 0% to 100% controlling how dark the overlay appears over your background image.
• Overlay Color -- Pick the color of the overlay (default is black).
• Background Blur -- A slider from 0px to 20px to blur the background image for better text readability.

Background

Every section can have a custom background:

• None -- Uses the default page background.
• Solid Color -- Pick a specific background color using the color picker.
• Image -- Upload an image or provide a URL. When using an image background, you can configure overlay darkness, overlay color, background blur, and text color (light or dark).

1. Click Save Changes when done.

Live Preview with Device Switcher

While you are editing a section, the right side of the editor shows a live preview of the rendered section inside an iframe. The preview updates automatically as you change content and settings.

At the top of the preview card you will find a device switcher with three buttons:

• Mobile -- Constrains the preview to 375px wide, matching a typical phone.
• Tablet -- Constrains the preview to 768px wide, matching a typical tablet.
• Desktop -- Lets the preview use the full available width.

Tip: Always sanity-check your sections in mobile width. Hero text, button placement, and column counts often need to be adjusted to look right on phones.

Toggling Section Visibility

You can quickly show or hide a section without deleting it:

1. In the page editor, click the eye icon on the section card.
2. The section will toggle between visible and hidden.
3. Hidden sections show a "Hidden" label and will not appear on the public page.

Duplicating a Section

1. In the page editor, use the duplicate action on a section card.
2. A copy of the section (with all its content and settings) will be inserted directly after the original.

Deleting a Section

1. In the page editor, click the delete (trash) icon on the section card.
2. Confirm the deletion when prompted.

Important: Deleting a section permanently removes it and its content. This cannot be undone.

Section Container Widths

Each section can be configured with one of three container widths:

• Full Width -- Content spans the entire page width.
• Container -- Content is constrained to a standard maximum width (default).
• Narrow -- Content is constrained to a narrow column, ideal for text-heavy sections.

Next Steps

• Customizing Design -- Learn about themes, colors, and fonts
• Staff Directory -- Set up your staff/leadership page