In the guide we’ll be exploring the various capabilities and options that are part of the sections, rows and columns along with some neat tricks to add classic sections. What are those? Read on to find out.

There are now two different types of sections, rows and columns. As you go on and build new sites you won’t need to think too much about this. As you’d be working with the new V2 versions of sections, rows and columns. However if you are upgrading an existing site you will most probably have a mix of classic sections, rows and columns and new V2 sections, rows and columns.

What are the main differences between Classic and V2 versions?

The primary difference is the configurability of the V2 versions, V2 sections, rows and columns offer both more controls and customizable options. Whereas the Classic sections, rows and columns provide the same controls you’re already used to. In this article we’ll explore both more in-depth to help you make the right choice for your website.

All sections rows and columns will use a combination of the following:

Presets

First of all you’ll see the Apply Preset option, but just what is a preset? A preset is a pre-configured option pack of sorts. When you apply the preset all the controls are automatically changed to the specified value in the presets. Right now the presets represent each different stack. Providing quick starting points for getting your elements styled perfectly to match your stack. Apply a preset and then tinker to your hearts content.

Controls

All elements come with a range of different controls and the Content Area element is no different. While many of the controls are self explanatory in what they effect, we’ll cover the basics and any major points you need to be aware about in each article. Every article will also cover the basics such as Flexbox, Interactions and more!

Flexbox

Just what is Flexbox and what makes it so flexible? Flexbox is a layout mode intended to accomodate multiple elements on a page in different configuration layouts for a variety of screen sizes. It’s generally easy to work with once you get to grips with it and provides an array of configuration elements for start positions, end position and everything in between.

While Flexbox may seem daunting at first. Don’t worry! There are a range of multiple tutorials online and in all our builders we have multiple configuration options that means you never have to touch a line of code! So you properly understand Flex options, we’d recommend having a ready up over here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/102 on how exactly Flexbox works. While you don’t need to worry about the code side. It’s important to have a basic grasp of how Flexbox works to make the most of the builders. Or of course there’s always the trial and error approach.

Interactions

Throughout the elements you’ll see options for interactions, but just what are interactions? Interactions generally means when an element is being interacted with. Such as on hover. For example on a Background Color option you’ll have the Base option which is the main background color of the element. Then you’ll have the Interaction option, setting this to a different color from base will display a different color on hover.

You’ll also see interactions for icons where you can swap out icons on hover. Allowing you to configure different options for on hover. Making for some great effects with swapping out icons on hover.

Margins and paddings. EMs, REMs, Pixels and more!

With all the margins, paddings and other height and width based options, along with some sizing options. You’ll see the option to change the actual unit value. This means you might set one control to be 2.5 EMs such as the width. But then on your margin you might set it to be 50px. The available unit options are:

• REM
• EM
• PX
• % (Percentage)

Linking Sides

One thing you’ll see in common across multiple controls is the ability to link sides. This means that if you link sides on the padding controls, all the padding controls will be the same value. However if you unlink the padding controls, you can then control each side independently allowing for greater control.

If you have link sides on for the respective set of controls you will not see the individual options.

Particles

Many of the elements use what’s known as the “Particles Partials”. But just what are Particles and how can use them? Check out our great mini video series over on this KB article.

V2 Sections, Rows and Columns

Go ahead and click on Add New Section then click the magnifying glass to get to the inspector. This will show the section settings like so:

As you can see over classic sections, the V2 sections are filled with a vast array of options including controls you’d expect to find such as Font-size and background colors, along with more advanced options. For example under the Setup controls, check Advanced next to the Background control. That’ll then give you a range of more advanced background controls including:

• Background Lower Layer
• Background Upper Layer
• Background Parallax
• Background Border Radius

On the Background parallax options you can enable the parallax effect independently, for example if you only want to have the effect applied on the Upper Layer you can check that independently, set the size, the direction and whether to reverse it. This allows you to achieve more creative results, by setting the lower and upper layers to different values.

Manage Layout

Clicking on Manage Layout within a section will then display the layout settings like this:

This will allow you to, set the number of columns in a row, add a new row or delete a row.

Managing Rows

Clicking on the magnifying glass will then allow you to inspect the specific row and will display the available row options like this:

One of the most important options you’ll want to pay attention to is the Inner Container option and the Marginless columns option. Setting the Inner Container option to off, will allow your content to be full width in the row, rather than being constrained.

Elements

All elements will still work in a classic sections, for example a classic element will work in a V2 section. You don’t need to specifically only use the V2 elements, though we do recommend using them where possible, as they are more configurable and greater power. However if you just want to get something up and running quickly. The classic elements may be just what you need.

Adding a Classic Section

Working on a project that already only uses classic sections? Don’t want to confuse your clients by having two different types of sections, have no fear! You can still add a classic section. On the layout tab hold down the CMD key and you’ll see

Add Section

change to Add Classic Section like this:

Once you’ve added a classic section, you then continue configuring the sections as you always have. Though you’ll still have the new interface with the way of managing layouts.