Design & Webmastering Notes

    • Drop Shadows on Images
    • Constraining Row Heights
    • Subtleties when Creating Links
    • Link to pages with the database tool (and use relative links if you can’t)
    • Creating Anchor Links (Links on the same page – use CSS ID e.g. IndustryStrength)
    • Best practices for links
      • (external in new tab, relative for internal)
      • link, then bold, use style, not editor for color changes, when possible – the little blue paintbrush)
    • Optimizing for mobile: see phone images. Use old phone. 3 choices: Shrink all / use Divi versioning / clone.

 

Image Styling

Photos on the site (not logos and artwork) are styled with a subtle drop shadow. On white backgrounds it appears that the top of the image is attached, and the bottom is lifted a tooch – similar to a post-it note. Choose the Design tab, scroll to Drop Shadow, and then select the option at upper right:

Linking Subtleties

A.

B. Below are best practices for linking to a .pdf, Word doc, etc. 1. Try to always open in a new tab. 2. Removing the domain name from the link (kill https://coloradocleantech.com – leave the “/” and everything after it) is a best practice but the world doesn’t end if you don’t. Some tools & plugins rely on a local link to work, but nothing will immediately break if you don’t do it.

Image Styling

Photos on the site (not logos and artwork) are styled with a subtle drop shadow. On white backgrounds it appears that the top of the image is attached, and the bottom is lifted a tooch – similar to a post-it note. Choose the Design tab, scroll to Drop Shadow, and then select the option at upper right:

Constraining Row Heights

Divi has a feature in row settings (rows are turquoise in Divi) to unify row heights. But it often doesn’t work, so you need to set each module (gray in Divi) to the same height. Below you’ll see that the row toggle isn’t doing its job:

The workaround when the row setting doesn’t work

Click on each module and assign a Min Height that’s tall enough for all. This is in the Design tab under Sizing. If you recycle an existing row or module, or use the pre-styled layouts we made for you, you’ll have these heights already set. But these may be too short or tall, and you may need to readjust the height value.

In the example below, two are set to 600 pixels and one is not set. Really tall images (or lots of text) will force you to reset them all, and really short images will give you too much whitespace.

Need More?

This doc goes over it. Scroll down to Using Column Equalizer.

Pin It on Pinterest