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.
Stealth Eye Shot
Here are some examples of customizable account pages that you can create with Divi.
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
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.