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.
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 )