Download

First Block Tutorial: Creating a Hero Section

Written by

in

Step-by-Step: Your First DesignSetGo Layout

In this tutorial, you will create a professional hero section with a background image, centered text, and a call-to-action button – all using DesignSetGo blocks.

What You Will Build

A hero section with:

  • Full-width background image
  • Minimum height of 600px
  • Centered heading and subheading
  • Call-to-action button
  • Smooth fade-in animations
  • Mobile-responsive design

Prerequisites

  • DesignSetGo plugin installed and activated
  • A post or page in edit mode
  • A background image ready (at least 1920px wide recommended)

Step 1: Insert the Section Block

  1. Create a new post or page (or edit an existing one)
  2. Click the + button in the top left to open the block inserter
  3. Type “Section” in the search box
  4. Click on Section (Stack) from the DesignSetGo blocks

What is the Section block? It is a vertical stacking container that provides full-width backgrounds and constrained content width – perfect for hero sections, feature areas, and page sections.

Step 2: Set Minimum Height

  1. With the Section selected, look at the right sidebar
  2. Find the Dimensions panel (may need to expand it)
  3. Set Min Height to 600px

This ensures your hero section has substantial height even before content is added.

Step 3: Add Background Image

  1. In the sidebar, find the Background Image panel
  2. Click Select Image
  3. Choose an image from your media library (or upload a new one)
  4. Set Background Size to “Cover” (covers entire area)
  5. Set Background Position to “Center Center”
  6. Enable Background Attachment: Fixed for parallax effect (optional)

Step 4: Add a Background Overlay

To make text readable over the image, add a dark overlay:

  1. In the sidebar, find the Color section
  2. Click on Background
  3. Choose a dark color (black or dark blue)
  4. In the same panel, look for opacity controls
  5. Set opacity to around 50-60% for a subtle overlay

Note: Depending on your image, you may need more or less overlay opacity.

Step 5: Enable Content Centering

  1. With the Section still selected, find the toolbar at the top
  2. Look for alignment options
  3. Click Align items center to vertically center content
  4. Click Justify items center to horizontally center content

Alternatively, you can use the Layout panel in the sidebar to set vertical/horizontal alignment.

Step 6: Add Heading

  1. Click the + button inside the Section
  2. Type “/heading” and press Enter (or search for Heading block)
  3. Type your headline: “Build Amazing Websites”
  4. With the heading selected:
    • In the toolbar, set heading level to H1
    • Set text alignment to Center
    • In the sidebar under Typography, increase font size to 48px or larger
    • Set text color to White in the Color panel

Step 7: Add Subheading

  1. Press Enter to create a new block below the heading
  2. Type “/paragraph” or just start typing
  3. Enter your subheading text: “Create professional layouts with our powerful block library”
  4. Center align the text
  5. Set text color to White
  6. Adjust font size to 18-20px for readability

Step 8: Add Call-to-Action Button

  1. Click + to add a new block
  2. Search for and add the Buttons block (WordPress core)
  3. Click inside to add text: “Get Started”
  4. In the sidebar:
    • Set button alignment to Center
    • Under Link, add your destination URL
    • Choose a background color (bright accent color)
    • Set text color to contrast with background
    • Adjust padding for a larger, more prominent button

Step 9: Add Spacing Between Elements

  1. Select the Section block again (click on it in the List View or outline)
  2. In the sidebar, find Spacing
  3. Set Block Spacing (Gap) to 24px or 32px

This adds consistent space between the heading, subheading, and button.

Step 10: Add Animations (Optional but Impressive!)

Make your hero section come alive with entrance animations:

Animate the Heading

  1. Select the Heading block
  2. In the sidebar, scroll down to Animation panel
  3. Enable animations
  4. Choose Fade In Up effect
  5. Set duration to 800ms
  6. Set delay to 200ms

Animate the Paragraph

  1. Select the Paragraph block
  2. Enable Fade In Up animation
  3. Set duration to 800ms
  4. Set delay to 400ms (starts after heading)

Animate the Button

  1. Select the Buttons block
  2. Enable Fade In Up animation
  3. Set duration to 800ms
  4. Set delay to 600ms (starts after paragraph)

Step 11: Test Responsive Design

  1. In the editor toolbar, click the Preview icon
  2. Select Preview on Mobile
  3. Check that:
    • Text is readable
    • Spacing looks good
    • Button is easily clickable
  4. Adjust font sizes or spacing if needed for mobile

Step 12: Publish and Preview

  1. Click Update or Publish
  2. Click View Page to see your hero section live
  3. Refresh the page to see animations play on load

Customization Ideas

Now that you have the basics, try these variations:

  • Add a video background instead of an image (use Background Video extension)
  • Use gradient overlay instead of solid color
  • Add Icon Block above the heading for visual interest
  • Create a two-button layout (primary + secondary CTA)
  • Add shaped divider at bottom using Divider block
  • Change animation effects to Zoom In, Slide In, or Bounce
  • Make section clickable using Clickable Group extension

Troubleshooting

Background image not showing

  • Ensure image is uploaded and selected
  • Check that background size is set to “Cover”
  • Verify min-height is set (600px recommended)

Text not visible

  • Add or increase background overlay opacity
  • Ensure text color is set to White (or contrasting color)
  • Check that overlay is dark enough

Animations not playing

  • Animations only play on the frontend, not in editor
  • Ensure animations are enabled in Settings → DesignSetGo → Animation Settings
  • Check that each block has animation settings configured

Not centered on mobile

  • Verify text alignment is set to center
  • Check that Section alignment settings apply to all devices

What You Learned

Congratulations! You have successfully created a professional hero section. You now know how to:

  • Insert and configure Section blocks
  • Add and customize background images
  • Use overlays for text readability
  • Center content vertically and horizontally
  • Add and style text and buttons
  • Apply entrance animations
  • Test responsive design

Next Tutorial Ideas

  • Create a 3-column feature grid with icons
  • Build an FAQ section with accordion
  • Design a testimonial slider
  • Construct a contact form with validation

Keep experimenting! Try combining different blocks and see what creative layouts you can build.

More posts