INSYNC Launchpad
  • 👋Introduction
  • MODULE 1
    • For WIX Developers
    • WIX Studio Basics
  • MODULE 2
    • Layout & Responsiveness
    • Dynamic Content & CMS
  • MODULE 3
    • Animations
    • WIX Studio Effects
    • CSS Basics
  • MODULE 4
    • Basic OnPage SEO
    • Mobile Optimization
  • 📝INSYNC TEST
    • Introduction
    • Test Details
Powered by GitBook
On this page
  • Grid-Based Layouts
  • Advanced CSS Grid Techniques
  • Stack Layouts: Simplifying Alignment
  • Responsiveness: Making Websites Adapt to Any Screen
  • Breakpoints
  • Fluid Design Principles
  • Sizing and Sizing Parameters
  • Pixels (px)
  • Percentage (%)
  • Viewport Width and Height (vw, vh)
  • Auto
  1. MODULE 2

Layout & Responsiveness

PreviousWIX Studio BasicsNextDynamic Content & CMS

Last updated 4 months ago

Grundlagen vom Richtigen Layouting von Elementen und Responsiveness Sizing & Sizing parameters...

Grid-Based Layouts

  • What It Is: WIX Studio’s grid system is a flexible tool that helps you structure your design with precision.

  • Why It Matters: Grids allow you to align elements consistently, making your website look professional and balanced.

  • How to Use It:

    • Define grid columns and rows to divide your page into sections.

    • Place elements within the grid for consistent spacing and alignment.

Watch this video to understand the basics of the WIX Studio Grid System:

Advanced CSS Grid Techniques

Once you’ve mastered the basics of layouting with WIX Studio’s grid system, it’s time to dive deeper into advanced CSS grid techniques. These methods will allow you to create more complex, dynamic, and visually engaging layouts that go beyond simple rows and columns.

Watch this video to understand the Advanced CSS Grid System:

Stack Layouts: Simplifying Alignment

Stack layouts are one of the simplest yet most powerful tools in WIX Studio for arranging elements vertically. They’re perfect for creating clean, organized designs that automatically adapt to content changes and varying screen sizes.

Watch these two Videos to understand the Basics behind the Stacking System of WIX Studio:

Responsiveness: Making Websites Adapt to Any Screen

Responsiveness ensures your website looks great on desktops, tablets, and mobile devices. WIX Studio provides several tools to help you achieve this:

Breakpoints

  • What They Are: Specific points where you can customize how your layout looks on different screen sizes (e.g., desktop, tablet, mobile).

  • How to Use Them:

    • Set unique styling rules for each breakpoint.

    • Test your design on various screen sizes to ensure it adapts seamlessly.

Fluid Design Principles

  • Avoid rigid, fixed-width designs. Instead:

    • Use flexible grids and layouts.

    • Prioritize relative sizing (like % or vw/vh) over fixed sizes (like px).

Watch these two Videos to understand the Responsiveness Basics of WIX Studio:

Sizing and Sizing Parameters

Understanding sizing units is crucial for creating responsive layouts. Here’s a breakdown of the most common units and when to use them:

Pixels (px)

  • What It Is: Fixed units for precise measurements.

  • When to Use It: For small elements where absolute precision is needed (e.g., borders, icons).

Percentage (%)

  • What It Is: A relative unit based on the parent container’s size.

  • When to Use It: For flexible layouts where elements scale with their container.

Viewport Width and Height (vw, vh)

  • What It Is: A relative unit based on the size of the viewport (browser window).

    • 1vw = 1% of the viewport width.

    • 1vh = 1% of the viewport height.

  • When to Use It: For designs that need to adapt dynamically to the user’s screen size (e.g., full-screen sections).

Auto

  • What It Is: Automatically adjusts based on the content or parent container.

  • When to Use It: For elements like text or images where natural sizing is ideal.

Watch this Video to understand the basics behind advanced sizing and sizing parameters: