User Guide

Mesh User Guide

Table of Contents:

1. Getting Started
2. Creating Pages with Mesh
3. Add a Section
4. Customize Columns to fit your content
5. Media & Background Images
6. Advanced Options

Getting Started

Installation

• Click Add New under Plugins in your WordPress install.
• Search for Mesh: Multiple Content Sections in the directory.
• Click Install Now and activate the plugin.

Or

• Download the latest plugin version from WordPress.org
• Click Add New under Plugins in your WordPress install.
• Click Upload Plugin and select the zip file containing the plugin.

Setup

Once installed & activated you can click into the Mesh options in the sidebar to configure your settings.

CSS Settings

• Choose whether or not to enqueue CSS with Mesh.

Post Types

• Select which post types you want Mesh to be active on.
• Pages are selected by default.

Creating Pages with Mesh

Mesh adds content in the form of Sections (rows) and Columns.

Add a Section

When you first arrive to a new page, you will see a message saying you have no Sections. Click the Add a Section button to add your first Section.

New Sections, by default, are 1 Column and set as Drafts.

• Section Titles will display as an H2 before your other content (Placeholder titles, ie. “No Section TItle”, will never display on the front-end).

  It is recommended that you give all Sections a Title, if you don’t want the title to display simply uncheck “Display Title”.

• Select your desired column layout (1 - 4) from the Columns drop down and you will see that many content editors populate into your Section.

• Your Section will remain a Draft until Published.

  If you Publish a Section and need to hide it again you can revert it back to a Draft.

• Delete any unwanted Sections by clicking Remove

Add as many Sections as you need per page using the Add Section button in the top and bottom bar.

Easily Expand and Collapse all Sections with the options in the top and bottom bar or toggle each Section separately with the arrows on the top right of each Section.

Reorder your Sections vertically by selecting Reorder Sections in the top or bottom bar, then drag the collapsed Sections. Click Save Order once you are happy with your new arrangement.

Customize Columns to fit your content

Add Titles to each column, or leave blank for no title.

• Column Titles appear as H3’s at the top of your column.
• The placeholder titles, “No Column Title”, will never show on the front-end.

Reorder Columns horizontally by clicking & dragging the “gripper” in the top left.

• Appears on layouts with 2 or more Columns

Adjust Column widths by clicking & dragging the bar between Columns.

• This is available on 2 and 3 column layouts only.

An Offset adds blank space to the left of a Column.

• Select the desired amount of Offset from the dropdown on each Column.
• Once selected, the Offset is visually represented by a grey stripe pattern on the left side of your column.
• Offsets are limited by the number of Columns in your Section, ie: a 1 Column layout can be Offset the most but a 4 Column layout does not allow for any Offset.

Media & Background Images

Add a background image to a single Column or an entire Section.

• Set Background Image links, located under More Options, will open the WordPress media selector.

  Select or upload media and click Select Background to set.

• Once set, a thumbnail of your selection will appear.

  To edit, click anywhere on the image thumbnail to reopen the media selector.

  To remove, click the X icon in the top right corner of the thumbnail.

All Column content editors allow for the same features as the main WordPress Content area.

• Add Media or Media Gallery.
• Add a Form.
• Visual Editor text formatting
• Text editor code shortcuts

Advanced Options

CSS Class allows you to add custom selectors for styling purposes.

• Add a class to either a single Column or an entire Section.
• This works really well with Jetpack’s Custom CSS feature!

Collapse Padding will remove the space in-between each Column in a given Section.

• Check off this option to apply per Section.

Equalize calculates which Column in your Section is the tallest and matches the other Columns to that height.

• Check off this option to apply per Section.

Push/Pull is a responsive option that reverses the order in which Columns will stack on smaller screens.

• Available only on a 2 Column layout.