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
S & # 39; identify
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.
- 1 Stealth Eye Shot
- 2 General Tips for Account Page Design
- 3 Customize a layout to hold your shortcode
- 4 There are limits
- 5 Memberpress account page design with Divi
- 6 WooCommerce Page Design with Divi
- 7 How to Design Easy Digital Download Account Pages Using Divi
- 8 Final Thoughts
Stealth Eye Shot
Here are some examples of customizable account pages that you can create with Divi.
General Tips for Account Page Design
Theme Customizer Settings
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 [woocommerce_my_account].
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.
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.)
Then delete all the contents of the layout, except for the first and second sections and the footer section.
Now, delete the second line of the second section (the one containing the three texts). This leaves you a row in the middle section with a row of a column containing a few text modules. This is a perfect setup for the shortcode.
In the text module that displays the title "Best Coffee", replace this with "Welcome to your account page".
All that remains is to add our shortcode to the text module below. Simply delete the fake text and replace it with the short code [woocommerce_my_account].
Update the settings of the Design tab as follows:
Orientation of the text: left
under the text tab of the unordered list
Unordered List Font: Oswald
Weight of font from unordered list: light
Unordered List Font Style: Upper Case (TT), Underline (U)
Unordered List Underlined Style: Solid
Text Size of Unordered Lists: 32px
Spacing of the letters of the unordered list: 2px
Unordered list line height: 1.8em
Unordered List Style Type: None
Dimensioning: 100% (default)
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 [woocommerce_cart] to generate basket contents
Commander – who uses the short code [woocommerce_checkout] to display the information.
My account – which uses short code [woocommerce_my_account] 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 [woocommerce_cart]. 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.
You can use the shortcode on the payment page [download_checkout] 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 [purchase_history] 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 [edd_login] ..
Here is an example of a login page created using the Digital Payments Layout pack blog layout:
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.
Here is an example of the Purchase Confirmation page (or success page):
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:
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.
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.
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.
The article How to create custom account pages for WooCommerce, EDD, Memberpress and more with the Divi Builder first appeared on Elegant Themes Blog .