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.
      • Adjusting Heights
      • Hiding Email from bots: There is a plugin installed that hides emails from most bots. But for it to work (on your free version) craft any email link in the text editor, not using the divi module link tool. The free version isn’t smart enough to hide module links.

 

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.

Adjusting Height

You probably already know that the spacing on any Module, Paragraph, or Section can be adjusted vertically with a click & drag, or manually in the Design>Spacing>Margin/Padding settings. Horizontal adjustments can cause issues on mobile or small screens, so avoid and/or test your results. The gray area below is being dragged:

INSIDE a module is a little different. You’ll need to adjust the Line Height and also accept that modern Web design theory creates a relationship between multiple lines of text. The idea is to avoid those weird line spacing issues you see in something like Word, and separate lines in ways that the Design Nazis want. To do this, click the Design tab, then click one or both blue brushes, and play with the Line Height below and maybe above the space:

You can actually choose negative numbers, but the results probably won’t make you happy.

Pin It on Pinterest