Download

Building Beautiful Layouts: Complete Tutorial

Written by

in

Overview

This comprehensive tutorial guides you through creating stunning, professional layouts using DesignSetGo blocks. Learn proven techniques for building hero sections, feature grids, testimonials, pricing tables, and complete landing pages.

Part 1: Hero Section

Creating a Modern Hero Section

A hero section is the first thing visitors see. Here is how to create an impactful hero:

Step 1: Foundation

  1. Add a Section Container block
  2. Set minimum height to 600-800px
  3. Add background gradient or image
  4. Enable “Constrain Width” for content width control

Step 2: Content Structure

  1. Inside Section, add a Row (Flex Container)
  2. Set alignment to center both vertically and horizontally
  3. Add heading (H1), paragraph, and button group
  4. Use spacing controls for proper rhythm

Step 3: Enhancements

  • Add Blobs Block for decorative background elements
  • Apply Block Animations (fade in, slide up)
  • Use responsive controls to adjust for mobile
  • Add Icon Button for primary CTA

Part 2: Feature Grid

Three-Column Feature Layout

Structure

  1. Add Grid Container block
  2. Set columns to 3 (desktop), 2 (tablet), 1 (mobile)
  3. Set gap to 30-40px for breathing room

Feature Cards

  1. Add Group blocks for each feature
  2. Inside each: Icon block + Heading + Paragraph
  3. Apply consistent padding (30-40px)
  4. Add subtle background color or border
  5. Use hover effects via Transform extension

Tips

  • Keep icons consistent in size and style
  • Use brand colors for icon accents
  • Limit to 3-6 features for maximum impact
  • Add animations with slight delays for stagger effect

Part 3: Testimonial Section

Slider-Based Testimonials

Setup

  1. Add Slider Block
  2. Set autoplay to true with 5-6 second intervals
  3. Enable navigation arrows and dots
  4. Set slides to show: 1 (mobile), 2 (tablet), 3 (desktop)

Testimonial Card Structure

  1. Quote text (larger font, italic)
  2. Star rating using Icon List
  3. Author name and role
  4. Optional author image

Styling

  • Use background color for cards
  • Add quotation mark using Blobs or custom CSS ::before
  • Maintain consistent card heights
  • Use subtle shadows for depth

Part 4: Pricing Table

Side-by-Side Pricing Cards

Container

  1. Use Row (Flex Container) or Grid
  2. Set equal-width columns for pricing tiers
  3. Add consistent spacing between cards

Pricing Card Elements

  1. Plan name (Heading)
  2. Price display (large, bold)
  3. Icon List of features (checkmarks for included)
  4. Icon Button for CTA
  5. Optional Pill for “Most Popular” badge

Differentiation

  • Highlight recommended plan with different background
  • Use Transform extension to scale featured plan 105%
  • Apply border or shadow to emphasize
  • Add Pill badge for “Best Value”

Part 5: FAQ Section

Using Accordion Block

Setup

  1. Add Accordion Block
  2. Set icon position and style
  3. Choose between allow multiple open or single open
  4. Add 6-12 common questions

Content Guidelines

  • Write clear, specific questions
  • Provide concise but complete answers
  • Use formatting (bold, lists) in answers for readability
  • Group related questions if using multiple accordions

Part 6: Contact/CTA Section

Final Call-to-Action

Layout

  1. Section Container with bold background
  2. Centered content using Flex alignment
  3. Compelling headline and subtext
  4. Prominent Icon Button or Form

Form Integration

  1. Use Form Builder blocks
  2. Keep fields minimal (name, email, message)
  3. Style submit button to match brand
  4. Add privacy policy text

Complete Landing Page Checklist

  • Hero with clear value proposition
  • 3-6 feature highlights
  • Social proof (testimonials, logos)
  • Pricing or product details
  • FAQ section
  • Strong CTA
  • Mobile-optimized (test all breakpoints)
  • Fast loading (optimized images)
  • Accessible (proper headings, alt text)

Performance Best Practices

  • Optimize all images (use WebP format)
  • Limit animations (2-3 per viewport)
  • Use lazy loading for below-fold images
  • Minimize custom CSS and inline styles
  • Test on slow connections

Responsive Design Tips

  • Start mobile-first, enhance for desktop
  • Test on real devices, not just browser resize
  • Adjust spacing proportionally across breakpoints
  • Stack columns vertically on mobile
  • Increase touch target sizes on mobile (min 44px)
  • Reduce text sizes appropriately for small screens

Accessibility Checklist

  • Use proper heading hierarchy (H1, H2, H3)
  • Add alt text to all images
  • Ensure color contrast meets WCAG standards
  • Make all interactive elements keyboard accessible
  • Add ARIA labels where needed
  • Test with screen reader

More posts