A brief guide in creating mock design using Divi Theme Grid System

Notes for creating mock design using Divi Theme Grid System:

1. If not necessary, don’t use fonts that are not google fonts. As much as possible, use google fonts only.
2. If your are not sure if your design is possible to be created using Divi Theme, please feel free to ask to our Backend Developers so that we can avoid any further problems.
3. Always check your design to be grid optimized, meaning you should check if the elements of your design are fit/aligned to the grid.
4. Use the Divi Theme Grid System we provided to you just to make sure you are using the right measurement for the grids.
5. If you’re having trouble on doing proper or good spacing you can just use the default spacing of the Divi Theme. You can check it on their website http://www.elegantthemes.com/preview/Divi/ Just screenshot the website then paste it on photoshop then measure it using marquee tool. Default spacing of Divi Theme is very good in any aspect.

The Layer Mask


Layer Masking


Layer masking is an essential tool of Photoshop. It is very handy in many ways:


  1. You can use layer masking to any layers, groups or smart objects.
  2. You can use it when erasing parts of the layer then you can turn it off or delete the layer mask on an object if you want to remove the effect that easily.
  3. Layer masking can also preserve the original pixel of a layer by using it.
  4. You can also use gradient on layer mask to create a perfect straight fading effect without hassle.

Smart Objects


Smart Objects has 2 purposes:

1. Convert an image to a smart object in order to retain it’s quality even when you size it down then you want to revert it’s size back to the orginal.

2. Select two different layers and convert it to a smart object. It will result of having 1 single layer after that. But you can double click the smart object icon on that layer in order for you to edit the smart object with separate layers.

Audio Player using Divi Theme

In using Divi, you don’t have to look for any plugins to add audio player to your site.

Divi theme already have this feature to have an appealing layout of the audio player, this is the Audio Module feature.
Full instruction of the Audio setup is below:

Source: http://www.elegantthemes.com/gallery/divi/documentation/audio/

WP Engine Migration

Download WP Engine Migration Plugin
Install the plugin on your WordPress install that exists on your current hosting provider
You will need 5 pieces of information to complete the migration:

  • Your Email
  • Destination URL
  • WP Engine SFTP Host
  • WP Engine SFTP Username
  • WP Engine SFTP Password

Start the migration