STYLE GUIDE

HOW TO EDIT YOUR WEBSITE

Divi (Your CMS) Basics

Divi is a unique theme in our collection. Differing from every other Elegant Theme, Divi is built on a page builder platform that we designed and developed from the ground up. Using Divi’s drag and drop builder you can create beautiful layouts with ease and control over every part of your site.

The builder uses three main building blocks: Sections, Rows, and Modules. Using these things in unison allows you to create a countless amount of page layouts. The basic hierarchy of these elements is as follows:

Sections

The most basic and largest building blocks used in designing layouts with Divi are Sections. These are used to create the top-level areas in your website. There are two types of sections: Regular, and Full Width. Regular Sections are made up of column rows and Full Width Sections are made up of full width modules. See more about rows and modules below.

Rows

Rows sit inside of Sections and you can place any number of rows in a section. There are many different Row Types to choose from. Once you define a Row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.

Modules

Modules are the visual elements that make up your website. Every modules that Divi has can fit into any column width and they are all full responsive.


Divi library

What Is The Divi Library?

The Divi Library is your ultimate web design toolkit. Here you can store your favorite layouts, sections, rows or modules for later use. Whenever you save an item to your Divi Library, you can access it easily from within the modal window when adding a new layout, module, section or row to the page. Save yourself hours of design time by creating collections of your favorite module combinations. Why not save all of those customized modules to your Library so that you can use them in the future without having to re-create them!

The Divi Library is more than just a collection of saved layouts. Each library item can also be made “Global.” Global modules are synced and mirrored wherever they are placed. Whenever a Global module is altered, it updates automatically on all of the pages you have added it to! In this sense, Divi becomes more than just a page builder, it becomes a website builder. For example, you could create a Global section that is added to the footer of every page on your site. Update that Global Section once and have the footer of your entire website updated instantly.

Modules in the library can also have their settings selectively synced. For example, if you have customized a module heavily using the Advanced Design and Custom CSS tabs, you can save the module to the library while only saving the settings in these two areas. If his module is made Global, your Advanced Design and Custom CSS settings will be synced, but the General Settings (containing your module content) can be different on each page the module is used on.

  • On the left hand menu, you’ll see Divi – hover over and you’ll see the Divi library. Here is where any layouts, modules or sections are saved for easy addition to your page.  You can edit any layouts here to make it easier to reuse (not recommended for anything currently saved).
  • Sean has populated the Divi library with many of the layouts you’ll need.  Always reference these pages as some of the setting have been pre-populated specifically for your design.
  • To add these to a page, under a section, click +Add from library and all of the saved items will appear

***TIP! You can copy (CTRL+C) and paste (CTRL+V) in Divi!  It’s great to have the content styles open, and you can copy an entire section/row and paste where applicable on your open page.


Quick Access To Divi Builder Functions

Whenever you right click on something inside the Divi Builder, whether it be a Module, Row or Section, you will get a list of different actions that can be performed. These actions include: Rename, Save to Library, Undo & Redo, Disable, Lock, Collapse & Expand, Copy & Paste, and Preview. You may be familiar with many of these functions already, and they have been added to the Right Click controls for your convenience! This way you don’t have to dig into the module settings to access commonly-used features. Some of the functions, however, are unique to Right Click, and are only available when right clicking. These include: Copy, Paste, Lock, Collapse and Disable.

Copy & Paste

Copying and Pasting is another function that is only available via Divi’s right click controls. You can copy and module, row or section from one area, and then paste it into another area. You can even copy and paste items from one page onto another page. This can save you a tone of time, and it can often be much more convenient than saving items to the library (especially when you only want to re-use that item on a new page once).

Preview

The ability to Preview items within the builder has been added to Divi’s right click controls for convenience. When choosing to preview an item, you can get a quick look at the appearance of a specific element within the builder, instead of having to preview the entire page on the front-end.

Rename

Any Module, Row or Section can be given a name. This name appears in the builder, and it can be used to identify the item on the page. When editing big pages, this can help you organize elements within the builder. For example, if you have 20 different text modules on the page, you might want to give each of them a name so that you know what they are before opening up their settings window.

Save To Library

The option to save an element to the Divi Library has been added to Divi’s right click controls for convenience. Using this feature you can save items to the library without having to open up the relevant settings box.

Undo & Redo

Any action you take within the Divi Builder can be undone, and any undo can also be re-done. Undo & Redo controls, which are also available using the undo and redo button at the top of the Divi Builder interface, can also be accessed when right clicking.

Disable

Disabling is an option that is only available via Divi’s right click controls. Any Module, Row or Section can be disabled. Once an item is disabled, it will no longer appear on the page on the front-end of your website. However, the item will remain active inside the Divi Builder interface. Disabling is a way to remove things from the front-end without actually deleting them in the builder. They can then be re-enabled in the future. Items that have been disabled appear at 50% opacity within the builder to signify that they have been disabled.


Editing Instructions

  • How to edit pages:
    • Click All Pages
      • Click Add New button to create a new page
      • Click page name to edit an existing page
      • Click save draft button if you do not want page to go live yet
  • How to change the background color of a module:
    • There are a couple ways you can alter your background.
    • 1: Transparent/white
      • In the section settings, click transparent background, or turn this to on.
        • This will also override anything else.
        • Make sure the inner shadow button is NO.
      • 2: Blue:
        • In the section settings, scroll down to background color and enter #203D7B
      • 3: You can give your background the line pattern (unique to divider sections)
        • In the section settings, where it asks for a background image, select “upload image”, search for patter_1.jpeg, and select this.
    • Content Editor (WYSIWYG)
      • Type content directly into the wysiwyg in HTML Fields Tab or copy/paste from word processor with ease
      • When copying/pasting, ALWAYS use the clear formatting button!
      • Use special characters button for all special characters.  If not, the coding may be different.
    • Font Styles Selection
      • Different font styles, including headers, are chosen from the Format drop-down menu
      • Block Quotes In Content Editor
      • Highlight text to be put into block quotes
      • Select block quote button
    • Links
      • Highlight the word/s which you want to create as a link and clicking on the insert/edit link icon.
      • Enter the destination URL directly into the field or performing search.
      • For internal links, insert page url only (eg: /about).
      • For external links, insert the entire url (http://www.website.com) and click Open in a New Window/Tab box. For telephone “click to call” functionality add tel:phonenumber, and email insert mailto:email@email.com
      • To add a CTA Link, highlight the link, and in the format menu select CTA Link
      • To break a link, highlight linked text and click Remove Link button (broken chain)
    • Inserting Jump Links
      • The home page of your website is constructed with jump links. i.e. each menu link brings you down the page to a specific anchor point.
      • Insert a full width divider page module, insert the desired text, and then on the ‘Custom CSS’ tab at the top insert a name for the anchor point into the CSS ID field. (for example howitworks)
      • To link to this anchor point from a menu item, go to Appearance>menus to begin editing. Insert a menu item or edit an existing it menu item but make sure it is a ‘Custom Link’. In the link field insert a url of /#anchorname to link to the anchor point. (for example /#howitworks)
      • If you are inserting an anchor point within a content editor window (like the directory at the top of this page), select Insert>Anchor point. Highlight the text you would like to jump to via the link, Insert the anchor point, and label it. (for example editingwebsite)
      • To link to that anchor point, highlight the desired text and insert> link > #anchorname. For example #editingwebsite.
  • Inline Images
    • To add an in-line image, place your cursor on the area where the image should appear, and click Add Media button above wysiwyg
    • Click on the little chart symbol to open the media library
    • Scroll to find an image or search using field in top right corner, select it, then click Insert Into Page button
    • Upload and find the image on your computer (EDIT ALL IMAGES IN IMAGE EDITING SOFTWARE BEFORE UPLOADING TO FILEBIN PLEASE) and upload. Then select the image and click insert.
    • Once the image is in place, click on image to reveal edit toolbar. Choose an alignment and add vertical/horizontal space if necessary.
    • Click Update
  • SEO Settings
    • Search Engine Listing Tab
      • Enter Title tags (max. 70 characters)
      • Enter Meta Description (max. 140 characters)
  • Add a sidebar:
    • You can add any modules (just like you regularly would here) i.e. Text, video, testimonial, and so on!
  • How to add sub-navigation to a page:
    • Saved in the library for you is a standard interior layout with left navigation. Make sure to use this as the spacing is styled.
  • How to edit the Media Library
    • Click Media > Library > Add New
    • Drop files into window or click Select Files button
    • To Edit Images or other Media you may view as a list or Media Grid View
    • Inside the Media Grid, media items are displayed in a thumbnail grid for ease of navigation. Click any media item to edit the image directly; however, we recommend that you use photo editing software like Photoshop. In this view, you may also edit the image metadata or media item metadata.
    • Media library can be filtered by type or date and is searchable by title.
    • To add a PDF:
      • Upload the PDF into the library
      • Once uploaded, you’ll see a link on the right menu.
      • Copy the link, and insert the link over text (as it states above) and open this in a NEW TAB.
  • How to add/update Menus:
    • In order to build your menus you will need to update the menu in WordPress.
    • In left menu, click Appearance then Menus.
    • In the Edit Menus tab, choose the menu you would like to edit from the drop-down menu and click Select.
    • Edit Menu Name in field, if desired.
    • Drag and drop each item into the order you prefer and/or click the arrow on the right of the item to reveal additional configuration options.
    • Click red Save Menu button.
CONTENT STYLES

Header 1 Page Title Example 50/60 (1.2)

Header 4 style, for optional intro highlight type copy. Should only be a few lines long, and let the reader know what they’re about to get into. 19/32 (1.7)

Example paragraph text style. This is what your standard paragraphs will look like throughout the entire site. Certain areas may have special styles, but this is your standard copy size. Paragraph links are styled like this so that they are easy for users to find. You also have the ability to BOLD text as well as emphasize text. You can also insert links to download things in your content, ‘Example Document Title’ (PDF), like this. 15/25 (1.7)

Below this paragraph you’ll find examples of all the other styles you’ll have at your disposal. You also have a technical page that lists all important information on image sizes, fonts, and colors.

Header 2, Used for New Sections 35/40 (1.14)

On this page you’ll find examples of all the styles you’ll have at your disposal. Once your site is complete, you’ll also have a technical page that lists all important information on image sizes, fonts, and colors.

  • This is a bulleted list.
  • You can also do a numbered list (bullets will change to numbers).
  • You can also create lists inside of a list.
  • Just like this!
  • We highly encourage the use of lists to make your content easier for the user to scan and digest quickly.
  • Most users on the web are task-oriented, so the easier the better.
  • Long paragraphs can be cumbersome and intimidating. Write for the web!

Header 3, Used for New Sections 26/32 (1.23)

It’s important to also mention that this is just a reference page. We would never encourage you to use all of these styles on one page, all at once. Rather, this is your guide to all things possible. This page is your point of reference for all the tools in your tool-box.

Images can not only be attached using the sidebar feature on the right, but they can also be inserted into the center content area like the image to the right has been. You have the ability to align the image to the right or the left, or insert an image that is the full width of the content area, having no text on the left or right of it. Don’t forget to put a bit of padding on it, so the text doesn’t butt right up next to it.

You can also indent blocks of copy using the blockquote feature and they will look like this. Because we’re not sure this feature will always be used for actual quotes, we’re aren’t adding in any quote mrks or things of that nature. If you are actually quoting someone, you can type in the quote marks manually. “Just like this.”

This feature can span multiple paragraphs. By default it will not be italic, like this example is. That style is maunally applied in the WYSIWYG as well and we encourage using it. Essentially, adding the blockquote style in just indents the text and adds the line you see on the left-hand side.

These interior styles are also available when creating content for other pages, like writing a blog post, a news article, etc. These same styles will apply to your headers and body copy. For the most part, the same can be said for any open content areas in the sidebar, home page, contact page, and so on.

Header 5 Style Is Used on Bio Pages for Related Links 18/24 (1.3333)
Header 6 Style Shouldn’t Be Needed Often 16/20

Above me is an example HR. Besides the hearder 6 below, that’s our last example element. Thanks so much and happy creating!

STYLE GUIDE

Images, Colors, & Font Specs

Please reference the list below whenever you’re creating new images for your site. You should find a size for all possible images you’ll need/use.


Image Sizes

  • Full Screen Homepage Header Image: 1024 × 683 – min/1920 x 1080 – max
  • Case Study Headers: 1024 × 450 – min/1920 x 844 – max
    These will always pull from the center of the image unless set otherwise, so know there will be slight cropping if using an image taller than 450px.
  • Project Brief Headers: same as above.

Font Specifics

  • H1 – Montserrat, Ultra Bold • 64/85px
  • H2 –Montserrat, Ultra Bold • 45/52px
  • H3 –Montserrat, Bold • 28/36px
  • H4 –Montserrat, Semi-Bold• 24/32px
  • H5 –Montserrat, Semi-Bold • 20/24px
  • H6 – Montserrat, Semi-Bold • 20/24px
  • Paragraph Text –Montserrat, Regular • 14/24px
  • Link / Button Color: #37c64e
  • Link / Button Hover: #333333
  • Main Nav Font: Montserrat, Regular ALL CAPS • 12px • Letter Spacing: 2px

Site Color Values

#000000 • BLACK
#FFFFFF • WHITE
#37c64e • F4D GREEN
COMPREHENSIVE IMAGE STYLE GUIDE

The Big Picture

Finding the perfect image sizes for your Divi website depends on three main factors:

  1. aspect ratio: the height and width of your image.
  2. column layout: the maximum width of your image.
  3. responsiveness: the changes made to the dimensions of your image on different screen sizes.

In the sections below I’ll show in detail how an understanding of these three factors can be used throughout Divi, resulting in perfect image sizes for any use case.

Divi Image Optimization Guidelines

Use Divi’s Image Aspect Ratio (16:9, 4:3, 3:4)

Aspect ratio expresses the proportional dimensions of the width and height of an image or screen. The number on the left of the colon represents the width (x axis) and the number on the right of the colon is the height (y axis). The two most popular aspect ratios are 4:3 and 16:9. These should look familiar to you if ever adjusted your TV screen or monitor settings before. The 4:3 aspect ration is the standard screen size for older TV’s and monitors and has a more box-like display. The newer high definition televisions and monitors today have the 16:9 aspect ratio which has a wider display. The 3:4 aspect ratio is useful in Divi for displaying portraits.

Divi was built with three aspect ratios in mind – 16:9, 4:3, and 3:4. For this post, I will be basing all recommended image dimensions on these aspect ratios. If you haven’t already done so, you can check out Divi’s image templates to see the standard sizes and aspect ratios recommended for your images.

Note: There are useful aspect ratio calculators out there that may help you find the right image dimensions as well.

Optimize Images Before You Upload

It is always best to optimize (resize, compress, crop, etc…) your images before uploading them to WordPress. Also try your best to keep all of your image file sizes between 60kb and 200kb. That way you aren’t slowing your page load time down too much. For a complete guide on how to optimize your images, go here.

Don’t Forget SEO

When it comes to reading images, search engines rely on the image’s filename, ‘alt’ text, captions, file type, file size, etc… This info is placed in the img tag which displays your image. Make sure you are adding this info to your images whenever uploading a new image to your media gallery.

Additionally, the Divi Builder allows you to add ‘alt’ text and title text from within certain modules. Keep an eye out for these when using certain Divi Modules.

From what I have researched, Google doesn’t read background images automatically since they are not wrapped in an img tag. Background images are displayed using CSS and are mostly used purely for design purposes.

File Formats

In general, most images on the web are either in JPEG, PNG, of GIF format. JPEG’s are good for most situations because of its compatibility, use of color, and small file size.

JPEG’s should be used for all of your full color photographs like featured images and background images.

PNG is also a very compatibile format for the web.  PNG’s are great for smaller images with a lot of detail.  The PNG format also supports transparent background capability which is perfect for logos and graphical elements.

GIF’s are good for small images with limited color.  GIF’s are unique because they can be animated, which is sometimes useful.

Image Dimension Guidelines Based on Divi’s Column Layouts

The following guidelines for image dimensions are based on Divi’s default layout settings. This includs a content width of 1080px and a gutter width of 3. Changing these settings may require you to adjust the dimensions of your images slightly.

The general rule of thumb is to have your images be at least as wide as the column in which it sits. Here are the dimensions you need to have for your image according to each column layout.

This doesn’t address the height your images need to be. So, here is a list of dimensions according to the 4:3 and 16:9 aspect ratios. This is helpful to keep your images at a width and height that scales appropriately for mobile.

The following image dimensions follow the 16:9 aspect ratio standard

1 column: 1080 x 608
¾ column: 795 x 447
⅔ column: 700 x 394
½ column: 510 x 287
⅓ column: 320 x 181
¼ column: 225 x 128

The following image dimensions follow the 4:3 aspect ratio standard

1 column: 1080 x 810
¾ column: 795 x 597
⅔ column: 700 x 526
½ column: 510 x 384
⅓ column: 320 x 241
¼ column: 225 x 170

Image Dimensions for Different Divi Modules

Image Module

When using the image module, you can simply follow the 16:9 and 4:3 layout to choose what image size you need for each column layout.

For example, if you are using a 4 column layout with a 4:3 aspect ratio, you would insert an image that is 225px by 170px for each column.

The upside to using the specific sizes for each column is that it gives you the exact image size you need without wasting image file size which may slow down your page load time.

The downside is that it doesn’t fill the column width on smaller screens like tablets. When the screen size drops below the 1080px breakpoint, the 4 column layout changes to a 2 column layout. This 2 column layout has room for an image size with a width of 370px. So if you want the image to fill the column width on tablet displays, you may want to start with an image size with a width of 370px instead of the 225px width.

Here is what a 4 column layout with 225px by 170px images looks like on a 2 column tablet display:

That looks pretty good, but if you started with an image that was 370px wide you would get an image that fills the column width on the 2 column tablet display like this:

So if you are looking to have your images fill the maximum width of the column on all devices, I recommend the following sizes for each column layout when using the image module.

For 4:3 aspect ratio:

1 column: 1080 x 810
⅔ column: 770 x 578
¾ column: 770 x 578
½ column: 770 x 578
⅓ column: 770 x 578
¼ column: 370 x 278

For 16:9 aspect ratio:

1 column: 1080 x 608
⅔ column: 770 x 433
¾ column: 770 x 433
½ column: 770 x 433
⅓ column: 770 x 433
¼ column: 370 x 208

Slider and Post Slider Background Images

Slider background images should be at least the width of the column that it sits in. So deciding on an image size is pretty straight forward. Just use the guideline for image sizes for each column width.

The height of your slider background image will be determined by the content of the slider, so you may need to adjust the height of your background image.

The following image dimensions follow the 16:9 aspect ratio standard:

1 column: 1080 x 608
¾ column: 795 x 447
⅔ column: 700 x 394
½ column: 510 x 287
⅓ column: 320 x 181
¼ column: 225 x 128

The following image dimensions follow the 4:3 aspect ratio standard:

1 column: 1080 x 810
¾ column: 795 x 597
⅔ column: 700 x 526
½ column: 510 x 384
⅓ column: 320 x 241
¼ column: 225 x 170

And if you want the slider to span the width of columns on mobile devices use these guidelines:

For 4:3 aspect ratio:

1 column: 1080 x 810
⅔ column: 770 x 578
¾ column: 770 x 578
½ column: 770 x 578
⅓ column: 770 x 578
¼ column: 370 x 278

For 16:9 aspect ratio:

1 column: 1080 x 608
⅔ column: 770 x 433
¾ column: 770 x 433
½ column: 770 x 433
⅓ column: 770 x 433
¼ column: 370 x 208

Fullwidth Slider Background Images

Recommended minimum width: 1920px

The width of your fullwidth slider background image is always determined by the browser width. Based on standard screen sizes we recommend that your images are at least 1280px wide. But for larger monitors, a safer bet would be to use an image that is 1920px wide.

Again, with sliders, the height is always determined by the amount of content, so you may need to adjust the height to fit your needs.

Slider and Post Slider Featured Image

Slide featured images will only appear in sliders that are in ⅔ column, ¾ column, or 1 column widths. We recommend that your slide images are at least this wide in order to adjust for desktop and mobile devices.

1 column: 450
¾ column: 330
⅔ column: 320

Note: A browser width that is less than 768px will hide the image and just show the post excerpt.

Images in Lightbox Displays

If you are using the lightbox feature with your image, you may want to use a larger image. Usually 1500 x 844 works well for a good full screen image in lightbox display for large monitors.

Blog Module Featured Images with Fullwidth Layout

Image width: equal to the size of its column width

Adding featured images to your posts to be displayed using the Blog Module is pretty straightforward. The featured images should be as wide as the column it sits in. For example, if you are using a blog module in a two-thirds column with a right sidebar, you would need to use a featured image at least 700px width since that is the width of a two-thirds column in Divi.

Don’t forget that the featured image will also be used on your single post template (the page that displays your full post after you click on the post excerpt). So, make sure your singe page template is also using a two-thirds column to display your featured image.

1 column: 1080
¾ column: 795
⅔ column: 700
½ column: 510
⅓ column: 320
¼ column: 225

Blog Module Featured Images with Grid Layout

Width: Equal to the size of the single post column width (default 795px)

And, just like with the Blog Module Fullwidth layout, the featured image needs to be large for your single post display. What is great about the Blog Grid layout is that Divi uses a smaller version of the featured image uploaded to the media gallery (with a width of 400px). Since this smaller image is created and displayed automatically, there is no need to worry about your page loading an image file size that is too big for the grid column.

Porfolio Module Featured Images (Fullwidth and Grid Layout; Standard and Filterable)

Width: equal to your single post column width (default: 795px)

When you click to view your portfolio item from the grid layout, the featured image will span the width of the content section. Just like for the Blog Module,

Just like for the Blog Module, Divi creates a smaller version (400px wide) of the portfolio featured image to be used for the Portfolio Module grid layout. This is helpful for reducing file size and keeping your page load time down. So, when creating a new portfolio item, it is important that your featured image be at least as wide as the column of your single portfolio post template.

Blurb Module Image

Maximum width: 550px

The blurb image follows the same rule of matching image width with column width, with the exception of the 1 column, which has a max width of 550px instead of the normal 1080px. Therefore, a safe bet would be to insert images with a max width of 550px. Here are the image widths for the Blurb Module in each column layout.

1 column: 550px
½ column: 510px
⅓ column: 320px
¼ column: 225px

Gallery Module Images (Slider and Grid Layout)

Recommended dimensions: 1500 x 844

Since the gallery module images open in a lightbox display, I recommend using an image that is big enough to fill the browser window when viewing the image in lightbox (somewhere around 1500px wide for large monitors).

For the grid layout, Divi creates a smaller version (400px wide) of the gallery. So, the large image file size reserved for lightbox won’t be displayed on the gallery grid. This is helpful for reducing file size and keeping your page load time down.

For the slider display, it is important to try and keep all of your images the same width and height since the height of the images will change as you go through the slides.

Person Module Image

Recommended Dimensions

Width: 600px

For the person module, it’s time to introduce the aspect ratio 3:4 which is a great size for portraits. Here are the recommended person module image sizes for each aspect ratio:

3:4 – 600 x 800 (recommended for portraits)
16:9 – 600 x 338
4:3 – 600 x 400

Responsive Functionality

A person module image on a 1 column layout will be displayed on the left side of the content at 320px.

When the screen size is less than 767px the image spans the width of the content area at a max width of 600px.

The following gif shows the person module using a 600 x 800 image (using the 3:4 aspect ratio) on different screen sizes.

Post Title Module Featured Image

Width: equal to the column width

The Post Title Module displays the title of your current post, and optionally the post Featured Image. You can choose the placement of your featured image to be above the title, below the title, or as a background of the title. Whatever your selection, the image will still span the width of the content section. So if you are using a 1 column layout for your Post Title Module, 1080px width is ideal for your featured image.

Testimonial Portrait Images

Image size based on module settings

By default, Divi converts your portrait image to a 90 x 90 size and a 90 border width displaying it as a circle. So if you are keeping the default settings, I would recommend your image dimensions be exactly 90 x 90. You can get away with having really large images without a 1:1 aspect ratio but this will be a lot of wasted file size that will slow down your page load time.

You can customize the dimensions and border radius of the portrait image from within the Advanced setting of the Testimonial Module.

When changing these settings, make sure that you keep the width and height the same and the border radius at 100 if you want to keep the circled images looking good.

General Guidelines for Background Images

When using a background image for your module, the background image will always need to be at least as wide as the column in which it sits. Simply follow the guidelines for Divi’s column widths:

1 column: 1080
¾ column: 795
⅔ column: 700
½ column: 510
⅓ column: 320
¼ column: 225

Here are some modules that need background images to match width of its column:

Portfolio Module
Filterable Portfolio Module
Call to Action Module
Post Slider Module
Post Title Module
Slider Module
Text Module

General Guidelines for Fullwidth Background Images

If using a fullwidth section background image, these images will expand to the full width of your browser. That means you should make these images at least as wide as most larger monitor displays which is around 1920px.

The following modules would require a 1920px width background image:

Fullwidth Header
Fullwidth Portfolio
Fullwidth Slider
Fullwidth Post Title
Fullwidth Post Slider
Fullwidth Image

Also, it is important to note that for all of these modules, the height of the background image is determined by the amount of content within the module so you may need to adjust the height of your images as needed.

Fullwidth Header Module

Fullscreen Background Images

Not to be confused with fullwidth background images, the fullscreen background image refers to the setting on your Fullwidth Header Module that allows your header to span the full size (both width and height) of your browser window.

Since most monitors follow the 4:3 and 16:9 aspect ration and will only be 1280px or 1920px wide I recommend the following dimensions for fullscreen background images:

4:3 – 1280 x 960 (recommended for portraits)
16:9 – 1920 x 1080

Fullwidth Header Module Logo Image

The fullwidth header module allows you to place a logo inside the header content area.

There are no standard image sizes for logos. As a general guideline, I would suggest keeping the logo large enough to see clearly on large desktops but small enough to fit smaller devices like smartphones.

Divi’s theme logo is 93 x 43 which gives you a good idea.

Fullwidth Header Image

Recommended dimensions: 510 x 288

In addition to a logo, the fullwidth header module allows a header image to be displayed in the header content area. By default, the header image will be displayed on the right column of a 2 column layout. Since the image sits in a ½ column, a 510 x 288 image makes the best sense for most situations.

Changing the Text & Logo Orientation option in the Module’s General Settings will allow the header image to be displayed on the left column or centered if you prefer that setup.

You can also adjust the vertical alignment to bottom, if you want your image to hug the bottom of the header.

Final Thoughts

As I mentioned before, there is no one perfect standard image dimension for all websites and screen sizes. However, understanding the Divi column layout and how each module displays certain images will allow you to create dimensions that work perfectly for your Divi site.

I hope this serves as a helpful resource for your future projects. I look forward to reading your feedback in the comments.

Cheers!