Images that are inserted into the content of web pages and blog posts can be given spacing, border lines, and other settings which affect how they look in your content.
Images which are added to your layout instead of your content area are managed separately – see our tutorials for the Graphics module or for ProPhoto Tiles if your layout contains images that are not part of your page/post content.
Your ProPhoto page layout will include a WordPress content module which you can edit to find the controls for each of the following image styling options:
Spacing between images
To edit the spacing between photos you have inserted as center alignment and full size, you can follow these steps:
- Edit your layout and click to edit settings for your WordPress content module .
- In the popup, click the Content styles side tab.
- Click the Image appearance view for image settings.
- Drag the sliders for Margin above post images or Margin below post images to achieve the spacing you want.
As mentioned above, this setting only applies to images that are aligned center within posts/pages. If your images are aligned left, right or none, you may see additional spacing (more on this below).
Trouble removing gap?
Additional space between images can come from unseen HTML markup in your page editor in WordPress, such as <div> or <p> tags surrounding your images. And if your images are not using center image alignment, you may also notice different spacing - such as when photos are inserted with none, left, or right alignment. Since images with left or right alignment must allow text to 'wrap' near the photo, they will have added margin to the side and below the photo so text does not come right along the photo edge. See our tutorial about Setting image size and alignment if you notice unexpected spacing between photos inserted into posts and pages in WordPress.
Image border lines
To edit the border applied around photos you have inserted, you can follow these steps:
- Edit your layout and click to edit settings for your WordPress content module .
- In the popup, click the Content styles side tab.
- Click the Image appearance view for image settings.
- Adjust the different border settings to achieve the border appearance you want, including:
- Post image border width
- Post image border color
- Post image border style
Image height constraint
Images which appear in the content of your posts at full size will scale to fill the width of your content area. Tall photos in portrait orientation may not always fit the height of the screen without appearing outside the window, so you can turn on image height constraint to prevent photos from growing taller than your device can show at one time. To edit the border applied around photos you have inserted, you can follow these steps:
- Edit your layout and click to edit settings for your WordPress content module .
- In the popup, click the Content styles side tab.
- Click the Image appearance view for image settings.
- At the bottom of the screen, click to toggle the option for Constrain post image height and find the adjustments below.
Click to view an example of tall photos being limited to a percentage of the screen height in this video clip:
When height constraint is enabled, you can set the image height constraint to be a percentage of the window height or window width.
Rounded corners
To apply rounded corners to photos you have inserted, you can follow these steps:
- Edit your layout and click to edit settings for your WordPress content module .
- In the popup, click the Content styles side tab.
- Click the Image appearance view for image settings.
- Near the bottom of the settings area, adjust the slider to add rounding to corners.
Click to view a demonstration in this video clip:
Per-image Pinterest pin it buttons
You may use a WordPress plugin for Pin It buttons, or the built in Pinterest feature.
Comments
0 comments
Article is closed for comments.