Tweak of the Week – Episode 2

In this tweak of the week we show you how to have a fixed width Divi Page in Desktop, but then make your site go back to a full width when you are in tablet and mobile modes.

This is a really great use of screen space and good for mobile usability. We have made it really simple to do by adding a video screencast, having step by step instructions AND making sure you can just paste in the code.

We recommend using a child theme to get started with this effect, as it is the best way to make tweaks to your code.

Let’s get started.

Watch the  video screen cast on youtube here.

Step 1: Open your WordPress website and go to the admin area. This is the domain/wp-admin location.

Step 2: Open your child theme editing page:
In the sidebar this is under themes > editor

Step 3: You should have a style.css file that can be edited.

Step 4: Open that file for editing. To do this you just click on the file.

Step 5: Paste in the code provided here:

Step 6: Save the file.

You are all done and ready to go.

You can also paste the code if you aren’t using a child theme in the Divi > Theme Options area using the custom CSS area as shown in the video.

This is our first tweak of the week.

Tweak of the Week – Episode 1 – An Introduction

I have been working on WordPress and Divi Builder for years now and have worked out all sorts of neat tricks in making your divi websites work better and be cleaner.

I often see sites that could really benefit from some of these simple tweaks so I decided to set myself a bit of a challenge to do a weekly video sharing some of these tweaks that make my life and my websites so much better.

In the first few we will focus on visual aesthetics but as time goes by I will continue to add more and more features to the sites to ensure that you can all learn from the snippets we have created in the over 100 divi websites we have built in the past 2 years.

Enjoy the video and keep an eye on the twitter for information on our tweak of the week series.

Divi Update 3.0.28 and 3.0.29

The latest Divi update brings a number of welcome fixes.

One of my favorites is the fixes is in the 3.0.28 release for the overlay areas in the front end builder. Sometimes when I was editing I found it impossible to click on certain targets because they were being blocked by a row or section.

There were 2 updates with a day of each other with this latest update. I am assuming this is because of the WooCommerce updates that were released from Automatic.

This means we have two full logs below to cover these 2 updates.

The biggest thing I can see in all of these updates is WooCommerce. Im really glad to see that because as a WooCommerce user for my own sites using Divi every improvement is really welcome.

Divi is not known for its friendliness to WooCommerce but Id like to see it become the best page builder for WooCommerce and Custom post types to position Divi to do deliver its awesomeness to the WooCommerce community and get some amazing growth.

Check out the change logs and enjoy the divine update 🙂


version 3.0.29 ( updated 1-18-2017 )

– Fixed a conflict with WooCommerce and PHP7 that made all products inaccessible in the WordPress Dashboard.
– Fixed some subtle alignment issues with the range slider controls in the Visual Builder.
– Fixed a bug that caused all fields to be “required” when building a contact form in the Visual Builder.
– Fixed a bug that sometimes caused broken layouts when loading rows from the Divi Library into certain types of specialty sections in the Visual Builder.
– Fixed button alignment issues with the custom sidebar creation interface.
– Fixed a bug in TinyMCE and the Visual Builder that caused a mismatch between TinyMCE’s Visual and Text modes after clearing a browser’s cookies.
* includes/builder/compat/woocommerce.php
* includes/builder/functions.php
* includes/builder/scripts/ext/widgets.js
* includes/builder/styles/widgets.css
* includes/builder/main-modules.php
* includes/builder/frontend-builder/assets/css/style.css
* includes/builder/frontend-builder/bundle.js

version 3.0.28 ( updated 1-17-2017 )

– Fixed a bug that made it impossible to type into the content area of the code module in the Visual Builder.
– Improved the mechanism for exiting the inline editor in the Visual Builder. After activated, pressing ESC or clicking outside the editable area will *fully* disable the inline editor.
– Improved the hierarchy of background image options in the Theme Customizer, adding clarity to each options dependency on each other.
– Fixed a bug with the Divi Portability System that made it impossible to export items from the Divi Library when they were added to a child category.
– Fixed some inconsistencies with the Divi Role Editor inside the Visual Builder.
– Add Row & Add Module buttons will no longer overlap in the Visual Builder when both the module’s parent section and row paddings have been reduced to 0.
– Improved the appearance of the audio shortcode when used inside of modules with inline editing capabilities.
– Font underline options for the login module will now work correctly for all text in the module.
– Improved compatibility with WooCommerce and fixed a permalink error that occurred in some situations when using the Divi Builder on WooCommerce page templates.
– Fixed an issue with custom meta content colors not being applied correctly in the blog module.
– Mobile row heights set in the Theme Customizer will no longer overwrite custom row heights set in the builder.
– Removed extra padding that was mistakenly added to all button modules when viewed in the Visual Builder.
– Fixed JavaScript error that occurred in the Module Customizer due to a WordPress 4.7 conflict.
– WooCommerce widget buttons will now use the Divi icon font correctly.
– Fixed a typo in the fullwidth header module help text.
– Google API Key will now appear correctly in the Visual Builder settings modal.
– Improved the appearance of the buttons in the Visual Builder settings modal during the opening animation.
– Improved some logic involved with the deprecated “Use Padding On Mobile” option which has been replaced with the builder’s responsive editing feature.
– Fixed a bug that caused draggable padding indicators to not appear when first hovering over rows inside of specialty sections.
– Product category filters are now available for all shop module variations.
– Mobile section height adjustments made in the Theme Customizer will no longer overwrite section padding adjustments made in the Visual Builder.
– When multiple instances of a single global module exists on a page, changes made to any copy will be automatically synced with the duplicates without saving or refreshing when using the Visual Builder.
– The contact form module now uses HTML placeholders. This fixes an issue with empty field values being included in emails.
* includes/builder/frontend-builder/assets/css/style.css
* includes/builder/frontend-builder/bundle.js
* includes/builder/class-et-builder-element.php
* includes/builder/main-modules.php
* includes/builder/frontend-builder/helpers.php
* includes/builder/compat/woocommerce.php
* includes/builder/framework.php
* includes/builder/frontend-builder/assets.php
* includes/builder/frontend-builder/helpers.php
* includes/builder/functions.php
* js/theme-customizer-controls.js
* core/admin/includes/class-portability.php

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation