Divi Template

BGCC Site Image Sizes

Location Example Min
W x H
Max
W x H
Example 1 Col Size Example 2 Col Size Example 3 Col Size Example 4 Col Size Format Size PSD Template Image Library Screenshot
Global Club Logo 300 x 77 600 x 155 300 x 77 N/A N/A N/A png < 25 kb Download N/A View
Home Main Slider BG 1425 x 800 1920 x 1080 1425 x 800 N/A N/A N/A jpg < 300 kb Download View View
Home Main Slider Graphic 300 x 300 1000 x 600 max 1000 x 600 max 470 x 560 N/A N/A png < 300 kb Download N/A View
Home Intro Section BG 1425 x 400 1920 x 540 1425 x 400 N/A N/A N/A jpg < 200 kb Download View View
Page Section BG 1425 x 800 1920 x 1080 1425 x 800 N/A N/A N/A jpg < 200 kb Download View View
Page Feature Image Banner 1425 x 400 1920 x 540 1425 x 400 N/A N/A N/A jpg < 200 kb Download View View
Page In-copy Image Banner 238 x any 1140 x any 1140 x any 538 x any 338 x any 238 x any jpg < 50 kb Download View View
Page National CTA Image 445 x 365 445 x 365 N/A 445 x 365 N/A N/A jpg < 50 kb Download View View
Page CTA Hover BG 238 x 250 1140 x 250 1140 x 250 538 x 250 338 x 250 238 x 250 jpg < 50 kb Download View View
Page CTA BG 238 x any 1140 x any 1140 x any 538 x any 338 x any 238 x any jpg < 50 kb Download View View
Page Sponsor Logo 238 x 119 600 x 300 600 x 300 600 x 300 338 x 169 238 x 119 png < 25 kb Download N/A View
Page Team Photo 300 x 300 300 x 300 300 x 300 300 x 300 300 x 300 300 x 300 jpg, png < 50 kb Download N/A View
Page Gallery Slider Image 600 x 400 1000 x 667 max 1000 x any max 1000 x any max 1000 x any max 1000 x any jpg, png < 100 kb Download N/A View
Page Gallery Grid Image 600 x 400 1000 x 667 max 1000 x any max 1000 x any max 1000 x any max 1000 x any jpg, png < 100 kb Download N/A View
Page In-copy image 238 x any 1140 x any 1140 x any 538 x any 338 x any 238 x any jpg, png, gif < 50 kb Download View View
Page Icon Graphics 238 x 238 350 x 350 350 x 350 350 x 350 350 x 350 250 x 250 png < 50 kb Download N/A View
Blog Feature Image 825 x 344 1920 x 800 1920 x 800 1425 x 594 N/A N/A jpg < 200 kb Download View View
Blog In-copy Image 848 x any 848 x any 848 x any 400 x any 251 x any 177 x any jpg, png < 100 kb Download View View
Events Feature Image 1000 x 667 1425 x 950 1000 x 667 N/A N/A N/A jpg < 100 kb Download View View
Events In-copy Image 1170 x any 1920 x any 1425 x any N/A N/A N/A jpg, png < 200 kb Download View View

Intro Title

<h1> – Page title (55px, green)

Intro title requires page templates with a “banner” and a divi section with the class “.intro-block”. Does not work with page full-width templates. Click here for example of usage with this link that is not found.

Large Headers

<h1> – Curabitur blandit tempus porttitor. (55px, green)

<h2> – Curabitur blandit tempus porttitor. (40px, green)

Small Headers

<h3> – Curabitur blandit tempus porttitor. (22px, green)

<h4> – Curabitur blandit tempus porttitor. (20px, dark grey)

<h5> – Curabitur blandit tempus porttitor. (16px, dark grey)

Body Texts

<p> <Strong> <Italic> – Curabitur blandit tempus porttitor. (16px, dark grey)

<p> <Italic> – Curabitur blandit tempus porttitor. (16px, dark grey)

<p> – Curabitur blandit tempus porttitor. (16px, dark grey)

<ul><li> Unordered List (16px)

  • Unordered list 1 – default green button and text
  • <span>Unordered list 2</span> – use <span> tag for dark grey text
  • Unordered list 3

<ol><li> Ordered list (16px)

  1. Ordered list 1 – default dark grey text
  2. Ordered list 2
  3. Ordered list 3

Colour Values

BGC Brand Style Guide pg42

BGC Brand Style Guide pg43

Primary

BEFORE 31MARCH2021
Green – (HEX) #7AC142; // (RGB) rgba(122, 193, 66, 1)
Blue – (HEX) #00A4E3; // (RGB) rgba(0, 164, 227, 1)
Orange – (HEX) #FBA519; // (RGB) rgba(251, 165, 25, 1)
Yellow – (HEX) #FBEE23; // (RGB) rgba(251, 238, 35, 1)

Neutral

BEFORE 31MARCH2021
Black – (HEX) #000000; // (RGB) rgba(0, 0, 0, 1)
Night Rider – (HEX) #333333; // (RGB) rgba(51, 51, 51, 1)
Dim Grey – (HEX) #666666; // (RGB) rgba(102, 102, 102, 1)
Grey – (HEX) #888888; // (RGB) rgba(136, 136, 136, 1)
Dark Grey – (HEX) #AAAAAA; // (RGB) rgba(170, 170, 170, 1)
Gainsboro – (HEX) #DDDDDD; // (RGB) rgba(221, 221, 221, 1)
Whisper – (HEX) #EEEEEE; // (RGB) rgba(238, 238, 238, 1)

Custom Text Colour Classes

.txt-green – Green colour texts
.txt-blue – Blue colour texts
.txt-yellow – Yellow colour texts
.txt-orange – Orange colour texts