Quick Tips
Divi customisation tutorials and tips for WordPress users with medium to advanced WordPress ability
Woodswork have been using Divi by Elegant Themes since 2015, therefore we are experienced users and have great knowledge. In addition, we know the best way to build a website. So, get in touch if you need a white label service provider to help with your work overflow. In other words, if you have Divi customisation issues we can help.
How to add an alternative logo to a website on mobile view in Divi
Add an alternative logo on mobile Now and then for design reasons the logo on mobile may not be fit for purpose. With a small amount of CSS we can...
How to customise columns widths in Divi
Customise column widths in the Divi by Elegant Themes Although Divi gives us a great range of options for column configurations, sometimes you want...
How to create a vertical menu in the Divi menu module
Gravity Forms and how to add a shop products When we are creating custom footers in Divi we sometimes add a verticle menu of a select few pages in...
Creating a shop product in Gravity Forms
Gravity Forms and how to add a shop products For clients that only want to display a handful of products we offer a store using Gravity Forms. It is...
How to make Divi mobile menu scroll on devices
Let's learn how to make Divi mobile menu scroll on devices Why would you need to know how to make Divi menu scroll on devices? Most of the time the...
How to fix logo stretching on Divi updated sites
How to fix logo stretching in Divi sites since the 4.9.6 update It might be just a coincidence, but since the 4.9.6 Divi update on 06-10-2021 there...
How to customise the Divi Gallery module
Customising the Divi Gallery to suit your design Here we'll show you how to customise the Divi Gallery module. There are lots of options to do this,...
How to make a Portfolio grid 3 columns
You can add CSS to the install to change the default settings from 4 columns to 3 columns in the Divi Portfolio module. There is a great tutorial on...
Creating animation using Indesign
Creating an animated pdf in indesign is very simple. There is great video tutorial here by Creative Frontiers. Getting it to be available in a...
How to edit the READ MORE text on Divi posts
Sometimes we don't use an excerpt on a post. Like for example the image above is for recipes and no exerpt is shown so READ MORE makes no sense. In...
How to add font awesome
To add a Fontawesome font, login and copy your kit code.I have added it here... KITCODE <script src="https://kit.fontawesome.com/0902eed645.js"...
Forcing Placeholder Styles on Gravity Forms
Here is some CSS to over ride the styles of the Gravity Forms placeholder colour if it doesn't change using the Gravity Form Styles plugin... ...
How to centre the mobile logo
If you want to centre the logo on mobile view add the following CSS: /* CENTER MOBILE LOGO */@media screen and (max-width: 980px) { .logo_container...
How to create nicer cookie buttons using CSS
I have added the CSS below for changing the Cookie Plugin button colour. /** COOKIE BUTTON COLOUR **/.cn-button.bootstrap { color: #fff; background:...
How to make video autoplay in Divi
The video module seems to have less options to edit than if you add via the background on columns or sections. So add to the background via upload...
How to make anything sticky in with Divi scroll options
It's super easy to add a sticky element on scroll without using a plugin in Divi with the Advanced Scroll Options feature. This is available on...
How to customise product order in WooCommerce
This is a pretty quick fix on sites with few products.Not a fix for big stores. I tend to add them in blocks of ten or 20. We used Instagram Feed on...
Gravity Field Visibility
Sometimes a client wants all of the form fields to be visible on their notifications so that they know what information has not been provided. This...
How to change secondary menu alignment
You can easily move the section in the Secondary Menu to the right with the following CSS: /** MOVE SECONDARY MENU ITEMS RIGHT **/ @media only...
How to bottom align buttons on a row in Divi
This is easy to do with a little CSS and a class. Geno does a great tutorial here 1. Create a multi-column row within your section. 2. Open up the...
Adding extra elements with icons to Secondary menu
This is a great tutorial for adding extra Divi icons to the top bar. 1. Make another menu > save it as secondary > add the phone numbers and...
Change the color of JUST ONE WordPress menu entry
You can use CSS to make just one WordPress menu entry a different color so that stands out from the rest. It’s pretty easy to change the color of...
How to have hidden elements on a page before login
On login pages, where there is no redirect required to another page, I like to hide the content available until the user has logged in. I use the...
How to regenerate lost Divi Styles on WooCommerce Pages
Woo Commerce pages are sometimes cached in Divi and don't take on the Divi Child styles.This is easily sorted by the method on the post link below...
Turning off the auto slide up in the Divi Slider module
The Divi Slider module has the slide up automatically as default. It moves the content around. It's very annoying.See the pics below and the code...
Better layout for password protected pages in Divi
How to Use It Download and install the plugin by Divi Booster called Divi Password Box WW purchased Enable password protection on your page / post...
How to customise the spacing on the Divi Blurb module
The space between the image and content on the blurb module is way to big for most uses.We can easily tighten this using the following code added to...
How to create inline buttons in Divi
If ever you need to place buttons side-by-side in the same column, this tutorial is for you. To achieve this button layout, there are two steps....
Custom Products Tabs for Woo Plugin
To manage large amounts of text under tabs we used the following plugin...Custom Product Tabs for WooCommerce by Yikes Super easy works a treat! We...
How to display Woo Commerce Categories on a page
The Divi Shop module allows you to display the products in lots of different ways but it doesn't let you display the Categories. To do this...
How to add a custom Divi Header
How to change the woocommerce button text
Changing the Woo Commerce button test can be done easily using the following plugin direct from the Wordpress daashboard > Plugins > Add...
CSS to customise the Divi Login module
It's super easy to edit the login module using CSS added to the modules advanced fields. To remove the first column of text fields add this to the...
How to add a pin it Pinterest button to images
Use the following plugin to do this... JQuery Pin It Plugin I found a good prost on how to use it here... Station Seven We used Pin It on the...
How to fix a button to the bottom of the site window
I've been looking for an easy way to do this and I am seriously gobsmacked at how ridiculously easy this was. All I did was add a row to the Divi...
How to change the number of columns in the Divi blog grid
The Divi blog module has a full width setting and a grid setting. The grid has 3 columns by default. Sometime we want this to be 2 or even 4. It's a...
Adjusting the Divi dropdown menu
Out of the box the Divi dropdown menu is fine but sometimes there is room for improvements. The following snippets of CSS code will enable some...
How to add z-index for overlapping content
This is a great video on how to control the overlap of columns. Z-index tutorial by System 22 Instead of applying z-index to the module you need to...
How to embed an RSS feed
Head to Appearance > Widgets Add an RSS widget to the sidebar, create a new sidebar if you are already using the sidebar for posts or a cart. Add...
How to embed a Twitter feed
Adding a Twitter feed is super simple. Head to Twitter Publish Choose your preffered option from the selection under the header. Add your...
How to use SOS Simple Overlay Solution modals
After you purchase and load the SOS plugin head to the left side panel and click on SOS.You can import the 5 sample layouts SOS provide in the json...
Adding a CTA Button to the Divi Menu
To add a CTA button (Call to Action) is fairly simple. You just need to include a piece of code into the menu tab css options area: menu-cta Then...
How to customise the Divi hamburger icon
If using the Hamburger or mobile menu icon, especially in full width desktop view instead of a standard navigation menu, you will likely want to...
Divi Full Width Portfolio columns & images
Portfolios... Full width portfolios give you the hover over with text on top. But they come as 5 columns.Here is a great tutorial on how to use a...
How to hide unused shipping methods in WooCommerce
We don't always want to show all shipping methods. If you have a Flat Rate for most shipping and a Free rate over a certain $ value then having both...
Gravity Form Shortcode
These shortcodes help make inline tickboxes etc https://docs.gravityforms.com/list-of-css-ready-classes/ We used Instagram Feed on the following...
Adding GST to NZ purchases
Most of our clients charge overseas clients the gst and include it in the price. Recently 1 client asked for it to be on New Zealand purchases only,...
How to add a multisite in WordPress via WP Engine
WordPress Multisite is a feature which allows users to create a “Network” of subsites within a single install of WordPress. We can add a secondary...
How to change slider transitions in Divi
The default slider settings are not able to be changed within the module and are set to slide up which is really annoying. You can edit or remove...
Protected: How to position the Divi blurb icon on the right
Password Protected
To view this protected post, enter the password below:
Protected: Adding effects to menu items
Password Protected
To view this protected post, enter the password below:
Protected: How to make anything sticky in Divi
Password Protected
To view this protected post, enter the password below:
How to equalise columns in rows
Thre is a couple of ways to do this. It depends on the functionality you need. This will make the columns equal With the Equalise switch active in...
How to add buttons in a line
Adding buttons in a row is offten needed in CTAs. It's easy to do with the following CSS. Add the buttons you require in the row, they will appear...
Adding Rural New Zealand Shipping Zones
This is so much simpler than you would believe if you just have the right tips! It can be done with just a Flat Rate for the zones and a Free rate....
How to edit the colour of the Woo price filter
I don't mind purple but not in this case. To change the colour just add the following to the Divi CSS file. /** WOO PRICE FILTER **/...
How to add a default WooCommerce Sidebar
Sometimes you need a sidebar as default for your blog and your cart. I wanted to create a side bar that sets by default without applying to pages...
How to change the WooCommerce Sale badge colour
The colour of the Woo Commerce 'Sale' Badge is by default orange. This isn't a button so doesn't take on the accent colour automatically, and it...
How to vertically centre content in Divi
This is so easy it's ridiculous! All it takes is a tiny bit of code added to the CCS main Divi Style sheet. To vertically centre a text module in a...
Adding an Instagram feed plugin
We use the Instagram Feed plugin by Smash Balloon to integrate an Instagram feed. It is free but also has a Pro version available. To integrate you...
How to Get Around Divi Custom Font Errors
Adding custom fonts in Divi should be a simple excercise but sometimes it isn't. These restrictions are in place in Wordpress and are there to...
How to Standardise Portfolio & Gallery Thumbnails
Sometimes you have no control over the sizing of the images going in to a Gallery or Portfolio in Divi. If you are adding big volumes of supplied...
Adding a Facebook Pixel
To use Facebook pixel the code needs to be integrated into your WordPress website. The method of adding the code will vary, depending on the type of...
How to Add a Different Logo on Mobile View
Displaying a different logo on mobile devices in Divi can be done in a few easy steps. First add the following to your custom CSS area in the Theme...
How to Enlarge the Hamburger Menu Icon
The icon used for a menu instead of a full menu is often called the 'Hamburger'. This is used on mobile views. It can also be used if a menu is very...
How to Center the Secondary Menu
To center align Divi secondary menu (the one with the phone number/email/social) just add the following to your custom CSS area in the Theme...
How to Add a Facebook Feed Without Using a Plugin
Plugins are great but we can integrate Facebook without one. As plugins require updating and sometime registration costs we are better off in the...
How to Create Full Width Buttons
All you need is a little CSS Divi doesn’t currently allow you to make a button full width with just the settings inside the Divi builder. Luckily...
How to Create Mega Menus
Why would you use a mega menu? Mega menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the...
Do you need help with your WordPress website?
Head to our Articles for more ideas on how to improve your web presence. Our best practice tips and tricks will help you to improve your WordPress website knowledge. Not only that, the articles will get you started on the right track. Check them out, they’re jam-packed full of great advice on content creation, marketing and SEO.
Do you need extra help with learning the Divi basics?
At Woodswork we use the Divi content management system to build our websites. Utilising the Divi Builder enables your website to be edited by you in the front end. It’s a total WYSIWYG experience. That means, ‘What You See Is What You Get’. Check out our comprehensive training library for help getting started. Our tutorials have informative videos, supporting text and images.