Genesis Geek

Genesis child theme tutorials

  • Home
  • Why DWB?
  • Videos

Make a group of 5 widget areas in a web page in a grid layout

September 22, 2015 By Philip Gledhill

In this Dynamik Website Builder tutorial video we will…

  • Make five widget areas
  • Place these widget areas in a grid layout, using Genesis Column Classes
  • Place this grid layout in a web page using shortcodes

The steps we go through in the video

  1. Make “Widget Areas 1, 2=(50%) | 3=(full width) | 4, 5=(50%)”
  2. Add Calendar to “Widget Area 1, 2, 3, 4 and 5”
  3. Add classes one-half first etc.
  4. Single rows need first class!
  5. Go to PHP Builder → Create all 5 Shortcodes → Copy
  6. Paste Shortcodes into page
  7. Make page full width using Genesis Layout Settings
  8. Paste short paragraph of text before widget areas

This is not a page template. But, it is a simple way to add widget areas to a web page. And to layout those widget areas in a grid.
In future videos we’ll reuse this widget area grid layout.
We’ll put it inside a self-contained web page template and inside a hookbox.

Filed Under: Video Tutorials Tagged With: Make a group of 5 widget areas in a web page in a grid layout

Dynamik Skins

ipad-skin-sidebar

See 12 good looking starter skins...

See the skins

Dynamik Website Builder needs the Genesis Framework to run.

The Genesis Framework

Some of the links on this website are “affiliate links.” This means if you click on the link AND purchase the item, I will receive an affiliate commission. However, I only recommend products I use myself and genuinely believe will be useful to others (honest :-)

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis and StudioPress are registered trademarks of their respective owners.