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, that 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.) Purchase and install Divi Theme.


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


3.) Copy and paste contents of the custom.css file into Divi > Theme Options > Custom CSS

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.) (optional)** Change upload_max_filesize and/or post_max_size by using Method #2 (Editing .htaccess file) in this link: https://bit.ly/315rlp8


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

7.) Deactivate MemberMouse Plugin

8.) Go to each MemberMouse Core Page and import the respective Divi Layout Template

9.) Reactivate MemberMouse Plugin


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



**Additional Information for Step #5 (optional) - 

When attempting to import the JSON file (1.5MB size) some users may receive an error that states the 'upload_max_filesize' is preventing the import, even though the file is under 2M. This is due to the way some servers look at files before they upload, if the file is close enough to the 2M limit, it will still throw the error. 


If you receive this error, then you will have to increase your server upload_max_filesize and/or post_max_size to allow more than 2M in order to install. In Step #5, we offer one method to change this locally by editing the .htaccess file. You may also choose to contact your hosting provider directly and ask them to increase this limit.



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 to 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 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/