GeneratePress Black Friday Sale Now ON! $59.99 $44

  1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Basics
  8. /
  9. StudioPress Flexible Layouts

StudioPress Flexible Layouts

Using the StudioPress Flexible Layouts Widget Areas in Altitude Pro Theme

Several StudioPress themes have special code that automatically lays out the Front Page widget areas in different grid styles. These layouts change depending on how many widgets you place in each widget area.

Get the theme used in this video

Video 1: A Basic Overview of Flexible Louts in Altitude Pro

Video 2: Using Genesis Featured Posts in a Flexible Layout

Video 3: Building a Flexible Layout using Text Widgets

For instance if you put three text widgets in Front Page 3 widget area the result looks like this…

3 Box Flexible Layout widget area in Altitude Pro theme using the StudioPress Flexible Layouts

This is the layout that is being used.

Basic 3 box flexible widget area in Altitude Pro

This image shows the 9 layout grids available in Altitude Pro theme by StudioPress

All 9 StudioPress Flexible Layouts grids in Altitude Pro

To change the layout grid being used all you have to do is put more or less widgets into that widget area

So if you put 3 widgets into the Front Page 3 widget area, you get the 3 box layout shown above. If you put 6 widgets in to the same widget area, the layout would change completely.

6 Box Flexible Layout in Altitude Pro Theme by StudioPress

The best way to learn how this works and to start understanding what happens, is to…

  • Pick any Front Page widget area.
  • Drag 9 calendar widgets inside it.
  • Then look at the layout in your web browser.
  • Remove one calendar widget.
  • Look carefully at the layout in your web browser again.
  • Make a note of how the layout has changed.
  • Now remove the calendar widgets one by one.

Each time you remove a widget, view your home page I your browser to see how it changes.

You really need to experiment and practice with this to understand how it works. But once you do understand how the flexible layouts work, you can build all kinds of good looking layouts in just a few minutes.

Why not watch the videos and then give it a try. You will learn some really useful skills.
Get the theme used in this video