Rows and Wrappers – PageCells Responsive Framework

Each of the Header, Layout and Footer sections are made up of Rows that can be given their own style attributes. Wrappers can be added to combine groups of Rows that can also be given their own style attributes.

Rows

Rows divide the page into separate regions that can be styled as a unit. Without any style attributes, a Row is a plain HTML <div> element that extends the width of the screen. Rows appear as green dashed boxes on the Theme Options page.

Adding Rows

Click the Plus Icon on the top right of each section to add a new Row to that section.

Positioning Rows

Once a Row is added to a section, you can drag the Row to change its position on the Theme Options page. Rows can be dragged across sections or simply repositioned in the same section.

Deleting Rows

Click the red Trash Can Icon on the right side of the Row to delete the Row. An alert will appear to confirm that is really what you want to do.

Row Options

Click the blue Wrench Icon next to the Row Name to open the Row Options panel.

Name

The Row name is used to identify the Row on the Theme Options page. It has no other purpose except to make the Row easier to find amongst other Rows.

Outer

This option adds an additional surrounding <div> around the Row that can have its own style attributes. This is useful if you want the inside part of the Row to appear one way and the outer part to appear differently.

Row CSS

Click the green Paintbrush Icon next to the Row Name to open the Row CSS panel.

Center Page

This style sets a maximum width and centers the Row on the page. Rows with the center page style are shown on the Theme Options page with a vertical teal bar on each end. This style is ENABLED by default.

Pad L/R

This style adds padding to the left and right of the Row. Rows with the Pad L/R style are indented on the Theme Options page. This style is ENABLED by default.

Clearfix

This style forces the Row to clear any floated items it contains. This ensures that any background styles can be rendered, and keeps other items from being affected by floated items inside the Row. This style is ENABLED by default.

Flush

This style removes the automatic margins from any items it contains so that they meet each other with no space between them horizontally or vertically. This style is DISABLED by default.

Top Margin

This menu lets you apply a margin to the top of the Row. PageCells uses a set of commonly used margin values to make the page render consistently.

Classes

You can add additional CSS classes to further style the Row. If the outer option is enabled, these classes are applied to the inner part of the Row only. See Helper Styles for description of pre-configured PageCells Helper Styles. You can also create your own classes using the Child Theme Configurator.

Outer Classes

You can add CSS classes to style the outer part of the Row. It is only used when the outer option is enabled, and are applied to the outer part of the Row only.

Selector

This option lets to specify your own unique identifier for the Row. This is useful when you need to identify the Row for jQuery or other JavaScript plugins.

Wrappers

Wrappers allow you to create groups of Rows that can be styled individually as a unit. Wrappers can be nested inside other Wrappers. Wrappers appear as solid dark pink horizontal brackets on the Theme Options page.

Adding Wrappers

From the Layout Items panel on the top right of the Theme Options page, drag the Wrapper Icon over to the section where you want the Wrapper to appear. PageCells will automatically close the Wrapper based on the options you set for that Wrapper.

Positioning Wrappers

Once a Wrapper is added to a section, you can drag the Wrapper to change its position on the Theme Options page. Wrappers can be dragged across sections or simply repositioned in the same section.

Wrappers can be nested inside other Wrappers. Wrappers cannot overlap. PageCells will automatically close the Wrapper so that it does not overlap another Wrapper.

Deleting Wrappers

Click the red Trash Can Icon on the right side of the Wrapper to delete the Wrapper. An alert will appear to confirm that is really what you want to do.

Wrapper Options

Click the blue Wrench Icon next to the Wrapper Name to open the Wrapper Options panel.

Name

The Wrapper name is used to identify the Wrapper on the Theme Options page. It has no other purpose except to make the Wrapper easier to find amongst other Wrappers.

Wrap

This option lets you set the section after which you want the wrapper to close.

This Section

The Wrapper will automatically close after the last row of the same section where the Wrapper began.

Next Section

The Wrapper will automatically close after the last row of the section following the section where Wrapper began.

All Sections

The Wrapper will automatically close after the last row of entire page.
Wrappers cannot overlap. PageCells will automatically close the Wrapper so that it does not overlap another Wrapper.

End

This option lets you close the Wrapper before the last Row of the section. The value represents the number of rows before the last row to close the Wrapper.
Wrappers cannot overlap. PageCells will automatically close the Wrapper so that it does not overlap another Wrapper.

Wrapper CSS

Click the green Paintbrush Icon next to the Wrapper Name to open the Wrapper CSS panel.

Center Page

This style sets a maximum width and centers the Wrapper on the page. Wrappers with the center page style are shown on the Theme Options page with a vertical teal bar on each end. This style is DISABLED by default.

Pad L/R

This style adds padding to the left and right of the Wrapper. Wrappers with the Pad L/R style are indented on the Theme Options page. This style is DISABLED by default.

Clearfix

This style forces the Wrapper to clear any floated items it contains. This ensures that any background styles can be rendered, and keeps other items from being affected by floated items inside the Wrapper. This style is ENABLED by default.

Top Margin

This menu lets you apply a margin to the top of the Wrapper. PageCells uses a set of commonly used margin values to make the page render consistently.

Classes

You can add additional CSS classes to further style the Wrapper. See Helper Styles for description of pre-configured PageCells Helper Styles. You can also create your own classes using the Child Theme Configurator.

Selector

This option lets to specify your own unique identifier for the Wrapper. This is useful when you need to identify the Wrapper for jQuery or other JavaScript plugins.

Tutorial

In this video we discuss Rows and Wrappers and how they control the layout, full-width versus page-width designs and different ways to apply styles to achieve the results you want using the PageCells Responsive Theme Framework.

Need More Help? Contact Us!

Maintaining our reputation for excellent support is very important to us, so please do not hesitate to ask any question about this or any of our other plugins, large or small. You can also use the Child Theme Configurator Support Forum on WordPress.org. Don't forget to give us 5 stars!