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:
- Go to Divi → Theme Options
- The very first field is the logo – click on Upload to replace what’s there
- Upload the new file (or select it from your Media Library if it’s already uploaded)
- Click on the Set As Logo button (lower right corner)
- Save Changes
- The very first field is the logo – click on Upload to replace what’s there
- You may need to edit your header and/or footer template; if so, go to Divi → Theme Builder
- Click the pencil icon to edit the neon green header
- Click the gear/settings icon for the logo
- Click on the image to change it out
- Upload the new file (or select it from your Media Library if it’s already uploaded)
- Click on “Upload an image”
- Save
- X in the top right corner to exit
- 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).
- Go to Appearance → Customize
- Click on General Settings then Site Identity
- Under Site Icon, click on “Change image”
- Upload the new file (or select it from your Media Library if it’s already uploaded)
- Click on the Select button (lower right corner)
- 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.
- Go to Appearance → Customize
- Click on General Settings then Typography
- Change the Header Font and Body Font
- 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).
- Go to Divi → Theme Options
- Next to “Color Pickers Default Palette,” change out each color in the palette.
- Save Changes – this changes the easily accessibly palette so that you can select colors from your palette for various things
- Go to Appearance → Customize
- General Settings → Typography – change the Heading and Body Text Color if needed; change the Link Color
- Applicable only if you do not have a global header under Divi –> Theme Builder
- Header & Navigation → Primary Menu Bar – change colors
- Header & Navigation → Secondary Menu Bar – change colors
- Header & Navigation → Fixed Navigation Settings – change colors
- Buttons – change colors
- The Events Calendar → Global Elements – change colors
- Publish
- Edit each page on the site and change anything that’s left – that will will likely be things like backgrounds, icons, etc
- Edit the header/footer – go to Divi → Theme Builder
- Click the pencil icon to edit the neon green header
- Change what’s needed
- Save
- X in the top right corner to exit
- Repeat for the footer
