Download Plugin

Getting Started with DesignSetGo: Build Your First Custom Layout

Written by

admin

in

Build Your First Custom Layout in Minutes

Ready to start building with DesignSetGo? This hands-on tutorial will walk you through creating your first custom layout using our container blocks. By the end, you’ll have a professional hero section with features grid—no coding required.

What You’ll Build

We’ll create a modern landing page hero section featuring:

  • A full-width background section with overlay
  • Centered headline and description
  • Call-to-action buttons
  • A 3-column features grid with icons

Prerequisites

Before starting, make sure you have:

  • WordPress 6.4 or higher installed
  • DesignSetGo plugin activated
  • A page or post open in the block editor

Step 1: Create the Hero Section

Insert a Section Block

  1. Click the block inserter (+) in the top toolbar
  2. Search for “Section” and select the DesignSetGo Section block
  3. The block will insert with full-width enabled by default

Add Background and Styling

  1. With the Section selected, open the Settings sidebar
  2. Under “Color” → “Background”, choose your brand color
  3. Set minimum height to 60vh under “Dimensions”
  4. Add padding: 80px top and bottom under “Spacing”

Step 2: Add Content with Stack Block

Insert a Stack Inside the Section

  1. Click inside the Section block
  2. Insert a “Stack” block (vertical layout container)
  3. Set alignment to “Center” in the block toolbar
  4. Add 32px gap between items in the sidebar

Add Your Content

  1. Inside the Stack, add a Heading block with your main headline
  2. Style it: 48px font size, white color, bold weight
  3. Add a Paragraph below with your description
  4. Style it: 18px font size, white color

Step 3: Create Button Group

Add Buttons with Flex Block

  1. Insert a “Flex” block inside the Stack (below the paragraph)
  2. Set justify to “Center” and gap to 16px
  3. Insert two Button blocks inside the Flex
  4. Customize button text and colors using Block Supports

Step 4: Build the Features Grid

Insert Grid Block

  1. Below your hero Section, add a new “Grid” block
  2. Set columns to 3 in the sidebar
  3. Add 32px gap between items
  4. Add padding: 80px top and bottom

Add Feature Cards

For each of the 3 columns:

  1. Insert a “Stack” block with 16px gap and center alignment
  2. Add an “Icon” block at the top – choose from 1000+ icons
  3. Style icon: 48px size, brand color
  4. Add a Heading (H3) for the feature title
  5. Add a Paragraph for the feature description

Pro Tips

Use Block Supports – Instead of custom controls, use WordPress native color, spacing, and typography controls in the Settings sidebar. Your layout will automatically match your theme’s design system.

Responsive by Default – Grid blocks automatically stack on mobile devices. Test your layout using the responsive preview in the editor toolbar.

Save as Pattern – Once you’re happy with your layout, save it as a reusable pattern: Options menu (⋮) → “Create pattern”. Use it across multiple pages!

Constrain Width – For content sections, enable “Constrain Width” in the Section or Stack block to respect your theme’s content width.

Next Steps

Now that you’ve built your first layout, try:

  • Adding animations – Use the Animation extension to fade-in elements on scroll
  • Interactive components – Replace the grid with Tabs or Accordion blocks for dynamic content
  • Custom icons – Upload your own SVG icons using the Icon block
  • Clickable containers – Make entire feature cards clickable with the Click-to-Action extension

Common Issues

Block not found? – Make sure DesignSetGo is activated and refresh the editor.

Styles not applying? – Clear your cache and ensure your theme supports block editor features.

Layout breaking on mobile? – Check that you haven’t set fixed widths. Use “Constrain Width” instead of custom width values.

Resources

What will you build next? Share your creations in the WordPress.org support forums!

More posts