Mark Brand Boutique

Mark Brand Boutique

Menu

Free resources for photographers & creatives

How to Space your ProPhoto 7 Columns Like a Pro

Get the pro secrets and tips on adding spacing between your ProPhoto 7 columns with step-by-step instructions.

Use column borders for white space

The easiest method to add space between columns in ProPhoto 7 is the column border settings. Adding a column border that matches the background creates the appearance of white space between the columns.

End result, ProPhoto 7 columns with border color spacing

Alright, let’s get started. Login to your WordPress site and open the ProPhoto 7 customizer.

1. Add a new block with two (or more) columns

2. Add a text module to each column

  • Pro Tip: apply text fonts and defaults before you begin customizing the theme to reduce edit time and increase efficiency.
  • Pro Tip: if you don’t know what to write use a Lorem Ipsum Generator to fill the area so you can see what the text would look like in the space.

3. Add Color to the column background

  • Pro Tip: hold down the shift button on your keyboard and click each column in the block module window to select all the columns at once. When multiple columns are selected you may make changes to the column and it will apply the same changes to all columns selected.

4. Add a column border

  • Pro Tip: select all the columns at once to add the column border at the same time (hold down shift and click to select multiple columns).
  • Pro Tip: the border color should be the same color as the background color of the row to create the appearance of white space.
  • Pro Tip: the border column width should be a minimum of 10px to give the appearance of white space. Use any spacing desired.

5. Add padding to each column

  • Pro Tip: select all the columns at once to add the padding simultaneously (hold down shift and click to select multiple columns).
  • Pro Tip: a column spacing between 5%-15% works great for most setups.

Use the outline property to add appearance of a column border

What if you want each of the columns to have a visible border AND have column spacing? To achieve the look of equally spaced columns with borders in ProPhoto 7 we will need the help of custom CSS.

End result, ProPhoto 7 columns with border color spacing and custom CSS

6. Follow steps 1-5 above to create columns with border pacing

  • Pro Tip: the row background and column border color can be any color so as long as they match. This is what gives the appearance of white space.

7. Copy the CSS code and paste into each columns’ “Custom CSS” dialog box

  • Pro Tip: select all the columns at once to add the code simultaneously (hold down shift and click to select multiple columns).
  • Pro Tip: change the outline offset to any number desired. The smaller the number the closer the outline will be to the text. The larger the number the closer the outline will be to the next column (reducing the spacing between columns).
  • Pro Tip: change the outline width, outline color, and outline style to your preferred styling. Learn more about the outline property options available.
& {
outline: 1px solid black;
outline-offset: -25px;
}

8. Optionally change the column background color

  • Pro Tip: if you change the background color of the columns you need to change the column border color to match

Read more ProPhoto tips and tutorials

Read More
Add a comment...

Your email is never published or shared. Required fields are marked *

    Popular Posts on the Brand Blog

    Read More

    Free Downloads & Resources

     

    Checkout our free downloads and resources for photographers and creatives

    Mark Brand Boutique

    Mark Brand Boutique serves photographers, videographers and small business creatives in all 50 states and worldwide.

    secure payments by: