Intro

Pinpointe offers several methods to control the horizontal and vertical space between modules and columns in its Drag and Drop Campaign Builder.  You have the option of using horizontal spacers for both modules and elements within modules (text, images, buttons, etc), vertical gutters for columns and vertical padding for module elements such as text and images. We will discuss each method in greater detail below. 

Spacers

Shown below is an example of a simple campaign made up of two modules, a single column of text with a title followed by a two-column module consisting of images, title and text. You will note the horizontal space separating the top title from the upper edge of the top module, the horizontal space between the various module elements and the space between the last two text blocks and the bottom of the second module. 

By clicking on the top module (outlined in blue) and placing the cursor on the spacer element at the top, we can see the top module spacer is set at a default height of 25px. Also note the small white horizontal "grab bar" below the "25". By placing your cursor on this "grab bar", you can drag it up or down, decreasing or increasing the spacer from a minimum of 10px to a maximum of 100px. You can actually reduce the spacer to 0px using a different method but when using the "grab bar" you are limited to at least 10px so as to allow the "grab bar" to be visible. In the image immediately following, you can see the same default spacer at the bottom of the module.  

To complete the illustration, the same default top and bottom module spacer also exists in the second module:

By placing your cursor on a spacer, you will bring up a small control module on the left called, "Spacer Options". In the image immediately below, the spacer is set to the default value of 25px. Using either the slider bar or the "+ / -" icons, you can increase the spacer to the maximum of 100px or reduce it to as low as 5px (as opposed to using the "grab bar" which only goes as low as 10px). 

The third option available to control the height of top and bottom module spacers is to use the primary control panel, "Module Options", that appears whenever you click the small grey gear icon in the green square to the left of any primary module. At the bottom of the control panel is a section entitled, "Spacing". In this example, we have opened the "Module Options" panel for the single column text / title module in our campaign template. Please note the two top controls, "Top Spacing" and "Bottom Spacing". Again, using the sliders or the "+ / -" icons, you can control the height of the spacers with one notable exception: using these controls will allow you to reduce the spacer's height to 0px. Since the top and bottom module spacers may NOT be deleted, this effectively provides the same result. 

NOTE: There are also horizontal "element" spacers that you can add to your template (see below). These are used to add horizontal space between individual elements within a module. Unlike the default module spacers, you CAN delete an "element" spacer; however, if present, they can only be reduced to a minimum of 5 px using the "Column Options" panel that will appear when you click on an "element" spacer. 

Gutters

Gutters are used to create vertical space between a primary module's content and the right and left edge of the module itself. This is known as "Outer Spacing". In modules with two or three columns, you can also control the vertical space between the columns themselves. This is called "Inner Spacing".

By the clicking the grey gear icon in the green square on the left of any module, you will bring up the "Module Options" control panel. At the bottom of this panel you will find the "Spacing" section. If the module you have selected to edit is a single column type, you will only see the "Outer Spacing" option. If the module is a two- or three-column type, you will also see the "Inner Spacing" option. The value range you may select is 0px to 50px. 

By setting both the outer and inner gutter spacing to 0px, you can create a tiled look with images. Below is an example using three columns:

Padding

Creating vertical space with padding is a little different than gutters. Think of a column as a container than holds images, text, buttons, etc. A gutter is the vertical space between a column and the outer edges of the template or another column. Padding is the vertical space of an element within a column and the column's own internal boundaries. Clicking on any element within a module will bring up the "Column Options" control panel on the left. Here you will find the control for padding. Using either the slider or the "+ / -" icon, you can set a padding value of 0px to 50px.

The easiest way to illustrate this is with an example using a single column of text and title. 

In the image below, the background of the column has been changed to yellow to better see the effects of padding. The outer spacing of this module has been set to 40px, resulting in fairly wide grey vertical gutters on either side of the single column. The padding value, however, has been set to 0px, resulting in the text completely taking up the full width of the column. 

In this next image, we can see the effects of changing the padding value to 40px. We can see that the column itself has not changed width but that the text within in the column has been narrowed. 

Mixing spacers, gutters and padding can allow for some interesting contrasting color combinations in the design of your campaign template.