Divi WordPress Theme

If you've ever created an e-commerce site or membership site with Divi, you've probably encountered the challenge of matching the design or your Divi site with the account pages generated by your plugin to manage the membership or ecommerce features. These account pages (also called front pages or reserved pages) deal with things like ...

the account information of a member
history of purchase
recording
S & # 39; identify
and more…

Most account pages for third-party plugins like WooCommerce use shortcodes (or have shortcodes available) to generate this type of plugin-specific information. In this tutorial, I'm going to share some tips on how you can use Divi Builder to design these front-end account pages by taking advantage of these shortcodes.

Stealth Eye Shot

Here are some examples of customizable account pages that you can create with Divi.

 preview "width =" 880 "height =" 1312 "class =" with-aligncenter size-full wp-image-70323 "/> </p>
<h2> General Tips for Account Page Design </h2>
<h3> Theme Customizer Settings </h3>
<p> <img src=

The first step in customizing these account pages is to set the default styles for the Divi theme in the theme's Customizer, because these pages normally inherit these style settings. The content of these pages normally includes text, form fields, links and buttons. The theme customizer can make sure that you have the correct typography settings to stylize the text and links in these pages, but the form fields and buttons may require a custom CSS.

Use Shortcodes to view account pages as much as possible

Normally, plugins will provide the user with an option to deploy account information using a shortcode rather than using the designated account page generated by the plugin. This allows users to have more flexibility in organizing page content on their site and also allows this content to work on page builders like Divi.

For example, if you are building a site with WooCommerce, you will have designated WooCommerce pages to manage the account information. One of these pages is called the My Account page. The content of the page is deployed using the short code

Login

.

So, if you wish, you can use this shortcode on another page or in a module using Divi Builder. All you have to do is add the shortcode to a module using Divi Builder and add the other design elements you want to the page.

Depending on the plugin, your front-end account pages may not be able to deploy the Divi Builder as with WooCommerce. But, that does not necessarily mean that there are no shortcodes available that will help you build a custom page by yourself.

For example, when using MemberPress, each time you create a new membership, the plugin automatically creates a registration page for that membership. These automatically generated registration pages can not deploy Divi Builder. But you can, however, use a shortcode to generate a registration form for that membership. So you just need to create a new page, add the shortcode of the registration form to a text module using the Divi builder and finish creating your page. personalized registration.

Sometimes you may need to look a little further for a user-friendly Divi solution for designing these pages. But in most cases, there is a short code to help you.

This is the basic strategy for designing these types of pages with Divi.

Use Shortcodes in text modules for more design options

Normally, I suggest adding shortcodes to a code module in Divi, but not in this case. Shortcodes that generate account information contain headers, body text, and links that can all be customized using the Text Module Design option.

The best way to check if this content can be designed by the text module is to test it. In some cases, you may not be able to see the design changes in real time using the visual constructor as usual. You may need to first save the settings and display them on the online page to see the effects.

If you are familiar with html, you can even do a quick inspection of the shortcode output using your browser's development tools to see if your text has any headers (h1, h2, etc.) that you can target.

Tip: To inspect an item on your Chrome page, right-click the item and select "Inspect".

Once you know that a header is deployed by the shortcode, you can target it with the Text Parameters design module.

You can do the same for links.

Customize a layout to hold your shortcode

Now that you have the option of using a shortcode in a text module, you can design the rest of the content of the account page with any custom layout you want with Divi Builder.

If you need help with this, check out these steps to use a divi layout for your website .

Depending on the layout package used, you will need to find the layout that best fits your needs for shortcode content.

In general, I was looking for a blog page, a contact page or a layout. These layouts usually have a standard header that can be easily adjusted and a full-width content section that can easily contain a shortcode.

Preferably, you will want to use an existing text module so that the contents of the shortcode inherit the design of the existing module.

For example, here's how to use the Coffee Shop Layout Pack to create an account page for WooCommerce.

Copy the existing shortcode to the My WooCommerce Account page. Deploy Divi Builder and then Visual Builder to edit the My Account page. Open the Settings menu and select Load From Library and
select the Coffee Shop - About the layout in the list of predefined layouts.

 select about page "width =" 880 "height =" 859 "class =" with-aligncenter full-size wp-image-70324 "/> </p>
<p> Change the contents of the header to say "My Account" instead of "About Us" (You can use the online editor for this.) Very easy things.) </p>
<p> Then delete all the contents of the layout, except for the first and second sections and the footer section. </p>
<p> <img src=

Login

.

 add the shortcode "width =" 880 "height =" 830 "class =" with-aligncenter size-full wp-image-70327 "/> </p>
<p> Update the settings of the Design tab as follows: </p>
<p> Orientation of the text: left </p>
<p> under the text tab of the unordered list <br />
Unordered List Font: Oswald <br />
Weight of font from unordered list: light <br />
Unordered List Font Style: Upper Case (TT), Underline (U) <br />
Unordered List Underlined Style: Solid <br />
Text Size of Unordered Lists: 32px <br />
Spacing of the letters of the unordered list: 2px <br />
Unordered list line height: 1.8em <br />
Unordered List Style Type: None </p>
<p> Dimensioning: 100% (default) </p>
<p> <img src=

This is a great example of how you can target the content of your shortcode. Since WooCommerce uses an unordered list to display vertical navigation for account information, I can target the unordered list from the text module's settings. So cool!

There are limits

Unfortunately, there will be times when some pages can not be designed with Divi. Normally, this is because the plugin uses custom post type archives. A good example of this is the WooCommerce product page.

As this is a custom publishing type, the page template can not deploy the Divi generator. We also can not use short code to display the product page. Therefore, we are limited to what we can control with Custom Theme Custom CSS.

Memberpress account page design with Divi

MemberPress login page

You can designate any page you want to be your login page in MemberPress Options. Once you have selected the page to be your MemberPress login page, a shortcode becomes visible each time you edit the page.

Simply copy this shortcode, deploy the Divi Builder and you're on your way.

Account Member Account Page

Just like the login page, you can designate any page as your MemberPress account page. However, the necessary shortcode for account page information is not easily found in the MemberPress options. I had to find it in their list of available shortcodes .

Sometimes the shortcodes you need will not be easy to find, so you may need to look a little harder.

Thank you page for membersPressPress

The MemberPress thank you page you designate can be any page with any content. So, no design restrictions here. You can use the Divi Builder as usual.

Setting the page as your MemberPress thank you page simply tells MemberPress that it is the page to which you want to redirect users after the registration.

WooCommerce Page Design with Divi

WooCommerce generates its own set of WooCommerce pages automatically when you install the plugin. These are the following:

Shop - which is a placeholder for a post-type archive for your products.
Shopping cart - using short code

Your cart is currently empty.

to generate basket contents
Commander - who uses the short code
to display the information.
My account - which uses short code

Login

to display specific customer information related to their account.

As I've already discussed how to create a My Custom Account page earlier, I'll leave you some useful design tips for each of these WooCommerce pages.

Let's first take a look at the basket page. This is what it looks like before doing anything.

If you update your global accent color, the links and buttons on the Shopping Cart page will match the color scheme of your layout. And, if you update the typography settings in the Theme Customizer, the headers and body text must also match.

But we can do a little better than that in a few clicks. Now go change your shopping cart page. Copy the short code

Your cart is currently empty.

. Import a layout from the Divi library and add the shortcode to one of the text modules inside the layout. Make sure there is a row to a column so that the contents of the basket can be displayed. Then delete all sections, lines, and modules that you do not need.

Here's an example of what this shopping cart page looks like using the Fashion Layout Pack.

Purchase page and archive pages

You can create a custom shop page for your WooCommerce view using Divi's Shop Module. However, since this page will not share the custom publication type archive from the default store page, you will be forced to use the post-type archive page template if you want to search for products by category, for example.

Pages of the product

Product pages can not be designed with Divi but must at least inherit theme customizer settings. You can also add custom CSS to the Theme Customizer to target the items on this page.

How to Design Easy Digital Download Account Pages Using Divi

Here's where you set the default front pages used by EDD to manage your store. The following pages will be created automatically for you and will be accessible under your wordpress pages.

Payment Page - is entitled "Order"
Success Page - is titled "Confirmation of Purchase"
Transaction Failed - the title "Failed to Transact"
Purchase History Page - is titled "History of Purchases"

Note: These pages all use shortcodes to deploy the information for the page. So you can use the Divi Builder to customize each of these pages and insert the shortcode anywhere in a Divi module. This will allow you to keep your design consistent throughout your site.

payment page

You can use the shortcode on the payment page

Your cart is empty.
to design your custom payment page using Divi Builder.

This is an example of a payment page that uses the blog layout of the Digital Price Arrangement package. Due to the dark background, I had to give a white background to the line containing the text module with the shortcode.

Transaction Page Failed

Any page may be referred to as the Failed page of the transaction. EDD will simply redirect the user to this page if ever a transaction fails at the checkout. Just create any page with the content you want using Divi Builder.

Here's an example using the same blog layout from the digital pricing layout pack:

Purchase History Page

You can use the shortcode to create the Purchase History page with Divi Builder. Here's an example of what this page would look like using the blog layout from the Digital Pricing Layout pack:

Although the purchase history page has code that can be used with Divi Builder, the built-in feature of clicking the link to view the list of items purchased will break the layout.

The login page

The login page is not created automatically for you because it uses the default WordPress login. But you can create your own login using the code

Log into Your Account

Lost Password?

..

Here is an example of a login page created using the Digital Payments Layout pack blog layout:

 login page "width =" 880 "height =" 693 "class =" with-aligncenter size-full wp-image-69819 "/> </p>
<p> To create the Purchase Confirmation page, you can repeat the same process of adding the blog layout to the page and add the text module with the necessary shortcode instead of the module of blog. </p>
<p> Here is an example of the Purchase Confirmation page (or success page): </p>
<p> <img src=

More information on easy digital download pages

EDD also provides purchase shortcodes for every product downloaded. This allows you to create a custom page with Divi to present your product by adding this purchase shortcode to a text module on the page. This feature is a bit more flexible than WooCommerce products.

Here's an example of a product page using the purchase code:

 product page "width =" 880 "height =" 760 "class =" with aligncenter with full-size border wp-image-70328 "/> </p>
<h2> Final Thoughts </h2>
<p> Even with Divi, you sometimes need plugins. That's why it's important to know how to merge the power of Divi (as a design tool) with the power of third-party plugins. So if you are building an e-commerce site with WooCommerce, a membership site with MemberPress, or if you have a challenge integrating account pages with the Divi Builder, keep an eye on these shortcodes. </p>
<p> My goal in this article is to help you optimize Divi Builder as a design tool when working with third party plugins. But for the CSS lovers out there, you can opt for a complete child theme approach to these account pages. In most cases, this is only one way to control all aspects of the design. </p>
<p> Let me know if you have had similar experiences with the use of Divi with other plugins. I would like to hear them. Let me know in the comments below. </p>
<p> Cheers! </p>
<p> The article <a rel= How to create custom account pages for WooCommerce, EDD, Memberpress and more with the Divi Builder first appeared on Elegant Themes Blog .