Download

Quick Start Guide

Written by

in

Getting Started with DesignSetGo

Welcome to DesignSetGo! This guide will help you create your first layout in minutes using our powerful block library.

Overview

DesignSetGo provides 47 custom blocks organized into categories:

  • Layout Blocks: Section, Grid, Row – containers for your content
  • Interactive Blocks: Accordion, Tabs, Slider, Flip Cards, and more
  • Content Blocks: Icons, Pills, Counters, Progress Bars, Dividers
  • Form Builder: Complete form system with 11 field types
  • Block Extensions: Enhance ANY WordPress block with animations, custom CSS, and more

Finding DesignSetGo Blocks

There are three ways to access DesignSetGo blocks:

  1. Block Inserter: Click the + button in the editor toolbar
  2. Inline: Type / and start typing a block name
  3. Block Collection: Look for the “DesignSetGo” collection in the block inserter

Creating Your First Layout

Step 1: Add a Section (Container)

  1. Click the + button to open the block inserter
  2. Search for “Section” or find it in Layout Blocks
  3. Click to insert the Section block
  4. The Section provides a vertical stacking container for your content

Step 2: Configure the Section

With the Section selected, use the sidebar settings:

  • Layout: Set minimum height, constrain width to theme content size
  • Colors: Add background colors or gradients
  • Spacing: Adjust padding and margins
  • Background: Add background images with controls for position, size, and attachment

Step 3: Add Content Inside

  1. Click inside the Section to see the + button
  2. Add any WordPress blocks or DesignSetGo blocks
  3. Try adding a Heading, Paragraph, and Button

Using Grid for Multi-Column Layouts

  1. Insert Grid Block: Search for “Grid” in the block inserter
  2. Set Columns: In the sidebar, choose 2, 3, or 4 columns (or custom up to 12)
  3. Add Items: Click inside grid areas to add content
  4. Responsive: Set different column counts for desktop, tablet, and mobile

Grid Example: 3-Column Feature Section

  1. Insert a Section block
  2. Inside, insert a Grid block
  3. Set columns to 3
  4. In each grid cell, add:
    • Icon block (choose from 500+ icons)
    • Heading block
    • Paragraph block

Adding Interactivity with Accordion

  1. Insert Accordion: Search for “Accordion” block
  2. Add Items: Click “Add Accordion Item” or insert manually
  3. Configure:
    • Choose icon style (chevron, plus, arrow, caret, triangle)
    • Set colors for headers and content
    • Enable single item open or allow multiple
  4. Add Content: Click inside each accordion item to add content

Using Block Extensions

DesignSetGo extensions work with ANY WordPress block, not just DesignSetGo blocks!

Adding Animations

  1. Select any block (core WordPress or DesignSetGo)
  2. In the sidebar, find the Animation panel
  3. Choose an entrance effect (Fade In, Slide Up, Zoom In, etc.)
  4. Set duration, delay, and easing
  5. Save and preview on the frontend

Making Groups Clickable

  1. Select a Group or Section block
  2. In the sidebar, find Clickable Group
  3. Enable and enter a URL
  4. The entire container becomes clickable while preserving inner links

Common Workflows

Hero Section

  1. Section block → Set min-height to 500px
  2. Add background image
  3. Enable vertical centering
  4. Add Heading + Paragraph + Button inside
  5. Apply Fade In animation to each element with staggered delays

FAQ Section

  1. Section block → Add heading “Frequently Asked Questions”
  2. Insert Accordion block
  3. Add 5-10 Accordion Items
  4. Fill in questions as titles, answers as content
  5. Customize colors and icons

Contact Form

  1. Insert Form Builder block
  2. Add Email Field, Text Field (for name), Textarea (for message)
  3. Add a Button (Submit)
  4. Configure email notifications in sidebar
  5. Set success/error messages

Design Tips

  • Use Sections for vertical organization: Think of sections as full-width page areas
  • Constrain content width: Enable “Constrain Width” in sections for better readability
  • Leverage Grid for responsive layouts: Set different column counts for each device
  • Add spacing: Use padding/margin controls for proper whitespace
  • Be consistent: Use the same colors and spacing throughout
  • Test responsively: Always preview on mobile, tablet, and desktop

Keyboard Shortcuts

  • / – Quick insert (type block name)
  • Cmd/Ctrl + Shift + , – Previous block
  • Cmd/Ctrl + Shift + . – Next block
  • Cmd/Ctrl + Shift + D – Duplicate block
  • Cmd/Ctrl + Alt + T – Insert before
  • Cmd/Ctrl + Alt + Y – Insert after

Next Steps

Ready to build? Start with a simple section and experiment with different blocks to discover what DesignSetGo can do!

More posts