Divi Theme Customization and Optimization

Divi Theme Customization and Optimization

Divi Theme Customization and Optimization. Divi Theme has a Horizontal menu in WordPress leftbar

  1. Theme Option
  2. Theme Builder
  3. Theme Customizer
  4. Role Editor
  5. Divi Library
  6. Image & WordPress Layout
  7. Video Tutorial

1. Theme Option

1.1. Update Menu

  • Username : ••••••••••••
  • API Key : ••••••••••••
  • Version Rollback : Rollback to previous version

1.2. General Menu

1.2.1. General Tab

  • General Sub Menu
  • Performance Sub Menu
  • Logo: http://demo.xyz.com/wp-content/uploads/2021/08/200-Pixel.png (Reset) (Upload)
  • Fixed Navigation Bar : Enabled/Disabled 
  • Enable Divi Gallery : Enabled/Disabled
  • Color Pickers Default Palette : Select Color      
  • Grab the first post image : Enabled/Disabled
  • Blog Style Mode : Enabled/Disabled
  • Sidebar Layout : Right Sidebar / Left Sidebar
  • Shop Page & Category Page Layout for WooCommerce : Right Sidebar / Left Sidebar
  • Google API Key 
  • Use Google Fonts : Enabled/Disabled
  • Google Fonts Subsets : Enabled/Disabled
  • Enqueue Google Maps Script : Enabled/Disabled
  • Show Facebook Icon : Enabled/Disabled
  • Show Twitter Icon : Enabled/Disabled
  • Show Instagram Icon : Enabled/Disabled
  • Show RSS Icon : Enabled/Disabled
  • Facebook Profile Url : https://www.facebook.com/xyz
  • Twitter Profile Url : #
  • Instagram Profile Url : #
  • RSS Icon Url : #
  • Number of Products displayed on WooCommerce archive pages : 9
  • Number of Posts displayed on Category page : 6
  • Number of Posts displayed on Archive pages : 5
  • Number of Posts displayed on Search pages : 5
  • Number of Posts displayed on Tag pages : 5
  • Date format : M j, Y
  • Use excerpts when defined : Enabled/Disabled
  • Back To Top Button : Enabled/Disabled
  • Smooth Scrolling : Enabled/Disabled
  • Disable Translations : Enabled/Disabled
  • Enable Responsive Images : Enabled/Disabled
  • Custom CSS : Large Text Box
  • Save Change Button

1.2.2. Performance Tab

  • Dynamic Module Framework : Enabled/Disabled
  • Dynamic CSS : Enabled/Disabled
  • Dynamic Icons : Enabled/Disabled
  • Load Dynamic Stylesheet In-line : Enabled/Disabled
  • Critical CSS : Enabled/Disabled
  • Critical Threshold Height : Low/Medium/High
  • Dynamic JavaScript Libraries : Enabled/Disabled
  • Disable WordPress Emojis : Enabled/Disabled
  • Defer Gutenberg Block CSS : Enabled/Disabled
  • Improve Google Fonts Loading : Enabled/Disabled
  • Limit Google Fonts Support For Legacy Browsers : Enabled/Disabled
  • Defer jQuery And jQuery Migrate : Enabled/Disabled
  • Enqueue jQuery Compatibility Script : Enabled/Disabled
  • Defer Additional Third Party Scripts : Enabled/Disabled
  • Save Changes Button

1.3. Navigation Menu

1.3.1. Page Tab

  • Exclude pages from the navigation bar : Check/Uncheck Pages
  • Show dropdown menus : Enabled/Disabled
  • Display Home link : Enabled/Disabled
  • Sort Pages Links : post_title/ post_author/ post_modified/ post_name/ ID
  • Order Pages Links by Ascending/Descending : asc/des
  • Number of dropdown tiers shown : 3

1.3.2. Categories Tab

  • Exclude categories from the navigation bar : Check/Uncheck Categories
  • Show dropdown menus : Enabled/Disabled
  • Hide empty categories : Enabled/Disabled
  • Number of dropdown tiers shown : 3
  • Sort Categories Links by Name/ID/Slug/Count/Term Group : name/ID/Slug/Count/team_group
  • Order Category Links by Ascending/Descending : asc/desc

1.3.3.General Setting Tab

  • Disable top tier dropdown menu links : Enabled/Disabled

1.4. Builder Menu

1.4.1. Post type Integration Tab

  • Enable Divi Builder On Post Types : Post (Enabled/ Disabled) Pages (Enabled/ Disabled) Projects (Enabled/ Disabled)

1.4.2. Advance Tab

  • Static CSS File Generation : Enabled/Disabled (Clear
  • Output Styles Inline  : Enabled/Disabled
  • Product Tour  : Enabled/Disabled
  • Enable The Latest Divi Builder Experience  : Enabled/Disabled
  • Enable Classic Editor  : Enabled/Disabled

1.5. Layout Menu

1.5.1. Single Post Layout

  • Choose which items to display in the post info section: Author, Date, Categories, Comments
  • Show comments on posts : Enabled/Disabled
  • Place Thumbs on Posts : Enabled/Disabled

1.5.2. Single Page Layout

  • Place Thumbs on Pages   : Enabled/Disabled
  • Show comments on pages   : Enabled/Disabled

1.6. Ads

  • Enable Single Post 468×60 banner  : Enabled/Disabled
  • Input 468×60 advertisement banner image : Input Text Box
  • Input 468×60 advertisement destination url : Input Text Box
  • Input 468×60 adsense code : Input Text Box

1.7. SEO

1.7.1. Homepage SEO Tab

  • Enable custom title : Enabled/Disabled
  • Enable meta description : Enabled/Disabled
  • Enable meta keywords : Enabled/Disabled
  • Enable canonical URL’s : Enabled/Disabled
  • Homepage custom title (if enabled) : Input Text Box
  • Homepage meta description (if enabled) : Input Text Box
  • Homepage meta keywords (if enabled) : Input Text Box
  • If custom titles are disabled, choose autogeneration method : BlogName | Blog description
  • Define a character to separate BlogName and Post title : Input Text Box

1.7.2. Single Post SEO Tab

  • Enable custom titles : Enabled/Disabled
  • Enable custom description : Enabled/Disabled
  • Enable custom keywords : Enabled/Disabled
  • Enable canonical URL’s : Enabled/Disabled
  • Custom field Name to be used for title :seo_title
  • Custom field Name to be used for description : seo_description
  • Custom field Name to be used for keywords : seo_keywords
  • If custom titles are disabled, choose autogeneration method : Post title | BlogName
  • Define a character to separate BlogName and Post title : Input Text Box

1.7.3. Index Page SEO

  • Enable canonical URL’s : Enabled/Disabled
  • Enable meta descriptions : Enabled/Disabled
  • Choose title autogeneration method :Category name | BlogName
  • Define a character to separate BlogName and Post title : Input Text Box

1.8. Integration Menu

  • Enable header code : Enabled/Disabled
  • Enable body code : Enabled/Disabled
  • Enable single top code : Enabled/Disabled
  • Enable single bottom code : Enabled/Disabled
  • Add code to the < head > of your blog
  • Add code to the < body > (good for tracking codes such as google analytics)
  • Add code to the top of your posts
  • Add code to the bottom of your posts, before the comments
  • Complete the menu

2. Theme Builder

3. Theme Customizer

For custom width for Row:

.et_pb_row {
width: 80%;}
}

.et_pb_row {
width: 90%;
}

Slider Customization

Full width slider code:  

.et_pb_slide {
Height:100vh;
}

4. Role Editor

5. Divi Library

5.1. Divi Slider Customization

Content Setting:

Design Setting:

Animation > Automatic Animation Speed (in ms) = 2000, As law as fast

Example of Full Width & Height Slider

  • Divi slider slider image size for background: 1920px x 1024px (Full Screen) or
  • Divi slider slider image size for background: 1280px for full width or
  • Divi slider slider image size for 1 column: 1080px x 608px or

7. Image & WordPress Layout

7.1. Image Layout

  • Open In Lightbox: Image will open in a Lightbox when clicked
  • Image Overlay: After enabling, an overlay color and icon will be displayed when hovers over the image.
  • Overlay Icon Color: Define custom color for the overlay icon
  • Hover Overlay Color: Define custom color for the overlay.
  • Hover Icon Picker: Define custom icon for the overlay.
  • Remove Space Below The Image: Remove Space
  • Image Alignment: Can float the image left, right or keep it centered.
  • Always Center Image On Mobile: Set it
  • Use Border: Enabling/Disabling this option will place a border around your module.
  • Border Color: Affects the color of your border
  • Border Width: By default, borders have a width of 1 pixel. You can increase this value
  • Border Style: Select Solid, dotted, dashed, double, groove, ridge, inset and outset.
  • Image Max Width: By default, image max width is set to 100%. This means that the image will be displayed at its natural width unless the width of the image exceeds the width of the parent column
  • Force Fullwidth: By default, images are displayed at their native width.
  • Custom Margin: Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it.

7.2. Image Ratio for Divi

Standard column/widths are

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

Height depends on text size/ spacing

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

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

7.2. Table Layout

WordPress Table Structure

  • WordPress Table Start Tag: <!– wp:table –>
  • WordPress Table Start Tag: <!– /wp:table –>
  • WordPress Table Class Start Tag: <figure class=”wp-block-table”><tbody>
  • WordPress Table Class End Tag: </tbody></figure>
  • WordPress Table 1 Raw & 2 Cells, Start & End Tag: <tr><td></td><td></td></tr>

6. Video Tutorial

TopicsLink
Footer and All bnyoutube.com/watch?v=L_wgZVHMPEo&t=941s
Image CarouselWow Divi Carousel Lite – Divi Theme and Divi Builder
How to add divi carousel module freeyoutube.com/watch?v=L7tdJxeHiDo
Divi vs Elementor Professionalyoutube.com/watch?v=9QtERH1UXlE
Footer form Layoutyoutube.com/watch?v=p9fXhWIYvYs&t=283s
Contact Us Page Configurationyoutube.com/watch?v=uo2nW8SLgbw
Google Mapyoutube.com/watch?v=9WNzgWyxwc0
youtube.com/watch?v=9WNzgWyxwc0&t=234s
Full Width Slideryoutube.com/watch?v=VC3o3d7jc98
Full Width Sliderelegantthemes.com/blog/divi-resources/how-to-create-a-fullscreen-slider-with-divi
Responsive Slider Textyoutube.com/watch?v=TZ-hM-JJqlg
Responsive Slider Imageyoutube.com/watch?v=GBJhkAhGKjE
Divideryoutu.be/yir1FXF5Sxk

About Engr Kh Mashiur Rahman

He is Top Class Digital Marketing Expert in bd based on Google Yahoo Alexa Moz analytics reports. He is open source ERP Implementation Expert for RMG Industry. He is certified IT Professional from Aptech, NCC, New Horizons & Post Graduated from London Metropolitan University (External) in ICT . To Hire his service and Him Email- sales@autogarment.com, Cell# +880 1792525354

Similar Post

DreamHost cPanel Access and Security Management

DreamHost cPanel Access and Security Management Adding a domain >> Go to Manage Websites page …

Leave a Reply

%d bloggers like this: