Creating a Content Block

What You'll Build

A flexible content section with an optional icon heading, main heading, rich text body, and call-to-action button. Perfect for service descriptions, feature explanations, or any structured content.

Before You Start

• Plan your content hierarchy (what heading and body text you need)
• Decide if you want an icon heading (small label above the main heading)
• Have your button text and link ready if using a CTA

Step-by-Step Instructions

Step 1: Add the Body Stack Module

1. In the page editor, click the Add button where you want the content
2. Search for Body Stack
3. Click to add it to your page

What you'll see: A content panel with toggles to show/hide different elements.

Step 2: Configure Which Elements to Display

1. Find the Show/Hide Elements group
2. Toggle ON or OFF each element:
   • Show Icon Heading: Small label text with an icon (e.g., "Featured", "Services")
   • Show Main Heading: Your primary section heading
   • Show Body Content: Rich text paragraph content
   • Show Toggles: Expandable accordion sections (for FAQ-style content)
   • Show Button: Call-to-action button

What you'll see: Only the elements you enable will appear in your content block.

Step 3: Add Your Icon Heading (Optional)

If you enabled the icon heading:

1. Open the Icon Heading group
2. Enter your label text (e.g., "Our Services", "Why Choose Us")
3. Choose an Icon Type:
   • Font Awesome Icon: Select from built-in icons
   • Custom SVG: Upload your own icon file
4. Set the Icon Position (above, left, or right of text)
5. Choose Icon Color and Heading Color

What you'll see: A small labeled heading with your icon appears at the top.

Step 4: Enter Your Main Heading

1. Open the Main Heading group
2. Type your heading text
3. Select the Heading Level (H2, H3, etc. based on page hierarchy)
4. Choose whether to display in Uppercase
5. Set the Heading Color

What you'll see: Your main heading appears below the icon heading.

Step 5: Add Your Body Content

1. Open the Body Content group
2. Use the rich text editor to enter your content
3. You can format text, add links, and create lists
4. Choose your Text Color (black or white)
5. Select a Text Size (small, medium, or large)

What you'll see: Your formatted text appears in the content area.

Step 6: Configure the Button (Optional)

If you enabled the button:

1. Open the Call-to-Action Button group
2. Enter your Button Text
3. Set the Button Link (URL or page selection)
4. Choose a Button Style (Gradient, Primary, Secondary, etc.)
5. Select a Button Size

What you'll see: Your button appears at the bottom of the content stack.

Step 7: Adjust Spacing

1. Use the Stack Gap setting to control spacing between elements
2. Switch to the Style tab to adjust overall padding
3. Choose from preset spacing or set custom values

Common Settings

Setting	What It Does	Recommended Value
Show Icon Heading	Displays a small label above main heading	ON for feature sections, OFF for simple content
Show Main Heading	Displays the primary heading	ON for most content blocks
Show Body Content	Displays rich text content	ON for most uses
Show Button	Displays CTA button	ON when you want visitors to take action
Heading Level	Sets semantic HTML level	H2 for main sections, H3 for subsections
Stack Gap	Space between elements	Small (S) for compact layouts, Medium (M) for breathing room

Tips and Best Practices

• Use icon headings sparingly to highlight key sections
• Keep main headings clear and descriptive
• Break long content into shorter paragraphs for readability
• Use the Uppercase option for icon headings to create visual hierarchy
• Match heading levels to your page structure (H2 after H1, H3 after H2)

Troubleshooting

Problem: Elements are overlapping or too close together. Solution: Increase the Stack Gap setting to add more space between elements.

Problem: Icon heading looks too prominent. Solution: Make sure the main heading uses a larger heading level than the icon heading.

Problem: Content looks different from other sections. Solution: Check that Text Color and Heading Color settings match your page theme.

Problem: Button is not visible even though content says "Show Button" is ON. Solution: Expand the Button group and make sure you have entered button text and a link.