This trademarked image shows the Worship Times's WT logo in blue with Worship Times written below in green font.

Re-Branding Your Divi Site

Note that this article is for the Divi 4 editor. Colors are handled completely differently by the Divi 5 editor. You are on the Divi 4 editor if, when editing a page, you have two editors – a back-end wireframe editor and a front-end visual builder. You are on the Divi 5 editor if, when editing a page, you have various sidebars with lots of icons and options, as well as a top bar with icons/options.

To change the logo:

  1. Go to Divi → Theme Options
    1. The very first field is the logo – click on Upload to replace what’s there
      1. Upload the new file (or select it from your Media Library if it’s already uploaded)
      2. Click on the Set As Logo button (lower right corner)
    2. Save Changes
  2. You may need to edit your header and/or footer template; if so, go to Divi → Theme Builder
    1. Click the pencil icon to edit the neon green header
    2. Click the gear/settings icon for the logo
      1. Click on the image to change it out
      2. Upload the new file (or select it from your Media Library if it’s already uploaded)
    3. Click on “Upload an image”
    4. Save
    5. X in the top right corner to exit
    6. Repeat for the footer as needed

To change the site icon:

This needs to be a square/circle, so pre-edit your new logo to fit that (usually it’s just a graphic element of the logo, without text).
  1. Go to Appearance → Customize
  2. Click on General Settings then Site Identity
  3. Under Site Icon, click on “Change image”
    1. Upload the new file (or select it from your Media Library if it’s already uploaded)
    2. Click on the Select button (lower right corner)
  4. Publish

To change the fonts:

You have access to free Google fonts. If the new fonts you are using are not Google fonts, we recommend finding close matches – this is safer across all browsers. If you are wanting to not use Google fonts, then you’ll need to send ttf or otf font files to support@worshiptimes.org.
  1. Go to Appearance → Customize
  2. Click on General Settings then Typography
  3. Change the Header Font and Body Font
  4. Publish

To change colors:

Colors can get complicated, and you’ll probably have to manually edit every page. TIP: you’ll want to check your link colors especially, but also any background color you use with white text to make sure they meet accessibility standards. See https://coolors.co/contrast-checker/112a46-acc8e5 for an online tool that you can use. (There are lots of others).
  1. Go to Divi → Theme Options
    1. Next to “Color Pickers Default Palette,” change out each color in the palette.
    2. Save Changes – this changes the easily accessibly palette so that you can select colors from your palette for various things
  2. Go to Appearance → Customize
    1. General Settings → Typography – change the Heading and Body Text Color if needed; change the Link Color
    2. Applicable only if you do not have a global header under Divi –> Theme Builder
      1. Header & Navigation → Primary Menu Bar – change colors
      2. Header & Navigation → Secondary Menu Bar – change colors
      3. Header & Navigation → Fixed Navigation Settings – change colors
    3. Buttons – change colors
    4. The Events Calendar → Global Elements – change colors
    5. Publish
  3. Edit each page on the site and change anything that’s left – that will will likely be things like backgrounds, icons, etc
  4. Edit the header/footer – go to Divi → Theme Builder
    1. Click the pencil icon to edit the neon green header
    2. Change what’s needed
    3. Save
    4. X in the top right corner to exit
    5. Repeat for the footer