Extra and 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

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>

Extra Theme

Change Extra Theme Footer Credential

Login to your WordPress dashboard, navigate to “Extra » Theme Options” and click the “Integration” tab.Extra theme option integration tab
Look for the section called “Add code to the < head > of your blog”, and copy & paste the following jQuery code to the section.

<script>
var year = new Date();
year = year.getFullYear();
jQuery(function($){
    $('#footer-info').html('© <a href="#" target="_blank">Your Site Name</a> ' + year + '. ' + 'All rights reserved.');
});
</script>

6. Video Tutorial

Topics	Link
Header Layout	elegantthemes.com/marketplace/header-layout-pack
Footer Layout	elegantthemes.com/marketplace/divipot-footers-layouts-pack
Footer and All bn	youtube.com/watch?v=L_wgZVHMPEo&t=941s
Image Carousel	Wow Divi Carousel Lite – Divi Theme and Divi Builder
How to add divi carousel module free	youtube.com/watch?v=L7tdJxeHiDo
Divi vs Elementor Professional	youtube.com/watch?v=9QtERH1UXlE
Footer form Layout	youtube.com/watch?v=p9fXhWIYvYs&t=283s
Contact Us Page Configuration	youtube.com/watch?v=uo2nW8SLgbw
Google Map	youtube.com/watch?v=9WNzgWyxwc0 youtube.com/watch?v=9WNzgWyxwc0&t=234s
Full Width Slider	youtube.com/watch?v=VC3o3d7jc98
Full Width Slider	elegantthemes.com/blog/divi-resources/how-to-create-a-fullscreen-slider-with-divi
Responsive Slider Text	youtube.com/watch?v=TZ-hM-JJqlg
Responsive Slider Image	youtube.com/watch?v=GBJhkAhGKjE
Divider	youtu.be/yir1FXF5Sxk
Megazine Theme	elegantthemes.com/documentation/extra/category-builder
Extra	youtube.com/watch?v=v9AXJ15FK54
Extra Blog	elegantthemes.com/blog/divi-resources/divi-vs-extra-how-to-choose-which-is-best-for-your-website