Using Layout Builder

Set Template Width

Use the slider to set overall theme width. It’s possible to select only numbers divisible with 12. Sparky uses 12-grid flexible system, so width must be divisible with 12, because we can’t divide pixels.

By default, Sparky uses fixed width, but you can also enable fluid width. If you are using the fluid width, fixed width parameter is ignored and your site always uses the entire available screen space. If fluid width is set to ON, Sparky will still use 12-grid system, but in this case grid widths are represented in percents, not in pixels as in fixed width case.

Make Site’s Layout

Entire layout that you create will be wrapped inside DIV with class .sparky_home on home page or with class .sparky_inner on all inner pages. This allows you to make different styling for home page and inner pages easier, if you need to.

All widget positions are shown as widget blocks (small rectangles). What widget positions will be shown here, it’s defined in file theme.xml. You can alter Sparky’s default widget position names by editing this file. Layout has rows and each row can hold 1 to 12 columns.

To make a layout of your new site, do the following:

  1. To start, click “ADD ROW” button to make some rows.
  2. Drag a widget block into the row and adjust its width (click on its right edge and move left).
  3. Drag the second widget block into the remaining space and so on…
  4. If you need to move a widget block left/right, click on the arrows in the blocks lower left corner.
  5. If you need to remove a widget block from the row, drag it back to the un-assigned widget block.

Each row that you create will be a DIV element with full screen width with class .sparky_full. To add ID or class or of the row, enter it in the left side of the row.

Inside DIV.sparky_full, there’s DIV.sparky_main which has the width of the theme.

Inside DIV.sparky_main, there’re DIVs with widget positions. Each of those DIVs has class .cell and class .mp_positionname. So, you can style each widget position by using this unique class. Inside DIV.cell.mp_positionname, there’s DIV.cell_pad which allows you to add desired padding for each widget position.

Set Paddings and Margins

The last four options represent the global settings for paddings and margins. This can be overridden for certain rows if you add class to those rows and then set different paddings and margins in style.css file.

Video Tutorials

The first video explains how to create a simple website layout using Sparky’s Layout Builder. We will make the header area with logo, the content area with and with right column, and the bottom area with 3 widgets in a row.

The second video in this chapter will show you how to populate your new WordPress site with widgets.