Divi is one of the most popular WordPress themes, and we’ve created this layout pack to make it easy to use Divi and MemberMouse together. Installing the layout pack takes only a couple of minutes, and when you’re done, you’ll be able to point, click, and edit your MemberMouse site with one of the most popular point-and-click theme builders available. This article will explain how you can install this free Divi Layout pack and be on your way to easy customization.


Why Divi?

We know that building a beautiful membership site takes time. And we know that time is money. When you choose Divi as your theme, you can edit your pages with ease, and quickly get a good look and feel in place. In addition, this layout pack makes your MemberMouse core pages responsive, which improves the user experience for your mobile visitors.


Important Concept:

The “Divi Layout Pack for MemberMouse” replaces your default MemberMouse Core Pages with modern, responsive Divi compatible pages that look good with any style membership site. After importing the Layout Pack into Divi, you import each layout into its respective core page.



What's Included 

The pack includes layouts for every Core Page as well as an additional layout for a Product or Membership Options page.

  • Checkout page
  • Confirmation / Thank You page
  • Error page
  • Forgot Password page
  • Login page
  • Logout page
  • Member Home page
  • My Account page
  • Redeem Gift page
  • Reset Password page
  • Save-the-Sale / Cancellation page
  • Membership Options page (non-core page)



[ DOWNLOAD DIVI LAYOUT PACK FOR MEMBERMOUSE ]



Setup Instructions


Here are the exact steps you need to get up and running with this Divi Layout Pack: 


1.)  In order to use the Divi Pack, the Divi Theme will need to be first purchased and installed on your site. If you do not have the Divi Theme yet, it is available from Elegant Themes here.


2.) Download and Unzip the Divi Layout Pack for MemberMouse.


3.)  Within the unzipped files, find, then copy and paste contents of the custom.css file into Divi > Theme Options > Custom CSS. This provides structure and design to the template pages.

4.) Copy and paste the following line of code into Divi > Theme Options > Integration > Add Code to Head:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">

5.) Import the JSON file into Divi > Divi Library > Import & Export.

Please note that this is a large file and depending on your server configuration, the server may stall out during import. If your import attempt results in a timing out of the server, please contact your host or check their documentation to increase upload_max_filesize and/or post_max_size. 


6.) Next, you will want to take a preemptive step to find your MemberMouse Core Pages before continuing to step 7. In order to easily identify your core pages, please navigate in the WordPress admin to Pages. Using the dropdown filters near the top of your screen, select Show only Core Pages, and this will provide a list of all your MemberMouse core pages needed in step 8.



7.) Deactivate MemberMouse Plugin. This step is required to stop the functionality of some of the core pages while using the Divi editor.


8.) Go to each MemberMouse Core Page from step 6 and import the respective Divi Layout Template using the Divi builder > Browse Layouts > Your Saved Layouts.


9.) Once you have completed the import for each page from step 8, reactivate MemberMouse Plugin.


10.) Use a test user to check and see that pages still work as expected with the new layouts applied. 



How to Edit or Remove a Template 


This video walks you through three examples of editing that you may want to do to the templates:

  1. How to edit, remove or add template blocks
  2. How to edit, remove or add SmartTags using the Divi Builder
  3. How to remove layout pack templates


After loading the page layout, you can continue to make any edits on that page as you would normally with Divi. For example, if you want to change SmartTags or other text in a section, just double click on that text and make your edits. After you are all done with loading the layout pack and making your edits, you can click the "save" button in the bottom right hand corner of the screen.


If you go back to the original code for a core page and want to remove the layout pack formatting, you can use the standard MemberMouse Core Page Templates. To insert a template, you can either copy and paste the code found in the Templates Folder, or go to the MM Templates dropdown above the WordPress content editor, select the Core Page Template you would like to use, and click the  icon.



Additional Resources

Elegant Themes: Importing & Exporting Divi Builder Layouts & Library Collections 

https://www.elegantthemes.com/documentation/divi/library-import/


Elegant Themes: Getting Started with the Divi Builder

https://www.elegantthemes.com/documentation/divi/visual-builder/