{"id":12932,"date":"2022-03-31T16:32:16","date_gmt":"2022-03-31T23:32:16","guid":{"rendered":"https:\/\/membermouse.com\/?p=12932"},"modified":"2024-09-18T12:53:51","modified_gmt":"2024-09-18T16:53:51","slug":"elementor-membership-plugin","status":"publish","type":"post","link":"https:\/\/membermouse.com\/es\/marketing\/elementor-membership-plugin\/","title":{"rendered":"How To Build Your Site With MemberMouse & Elementor"},"content":{"rendered":"<!-- wp:paragraph -->\n<p>Design is one of the most important stages of building a membership site. Whether you're starting from scratch or have an existing website, you want to create a beautiful, enjoyable, and functional experience for your members.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We know this because we get questions nearly every week from our customers about how to style the core elements of their sites \u2013&nbsp;things like checkout pages, member dashboards, content delivery areas, and more.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>While MemberMouse is an incredibly powerful membership tool, it's essentially design agnostic. That means it works \"behind the scenes\" to handle everything that goes into running a membership site and lets your WordPress theme determine how things look. And unless you're a WordPress developer or have some serious design chops, it can be frustrating to get your site to look exactly the way you want.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>That's why page builders have become so popular. These are wonderful tools that allow you to build visually, rather than with code. And out of all the page builders on the market, <a href=\"https:\/\/membermouse.com\/elementor\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Elementor<\/a> is definitely one of the most prominent.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(Don't worry if you use Divi \u2013&nbsp;we have <a href=\"https:\/\/membermouse.com\/integration\/membermouse-divi-layout-pack\/\" target=\"_blank\" rel=\"noopener noreferrer\">the perfect thing for you<\/a>)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To help you build a site that looks great and works well, we created this in-depth tutorial video. In it, we'll show you how to build your site using Elementor and MemberMouse. You'll learn how to use the core functionality of both tools so that you know how to make them work for your business. We're really excited to share this with you and hope it helps make designing your site much less of a headache.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ready to dive in? Click play on the video below.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https:\/\/youtu.be\/EAZ1DZh0fG4?feature=shared\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/youtu.be\/EAZ1DZh0fG4?feature=shared\n<\/div><\/figure>\n<!-- \/wp:embed -->\n\n<!-- wp:paragraph -->\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/sigybc5eik.jsonp\" async=\"\"><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async=\"\"><\/script><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<div id=\"section-highlights\" class=\"section-content-area\">\n<h3 class=\"title-budicon\"><i class=\"budicon-task-love color-blue\"><\/i> Video Overview<\/h3>\n<table class=\"table table-detail\">\n<tbody>\n<tr>\n<th class=\"column-timestamp color-dark\">0:00<\/th>\n<td>Intro &amp; Overview<\/td>\n<\/tr>\n<tr>\n<th class=\"column-timestamp color-dark\">2:50<\/th>\n<td>Building The Member Homepage With MemberMouse<\/td>\n<\/tr>\n<tr>\n<th class=\"column-timestamp color-dark\">13:34<\/th>\n<td>How To Work With Member Data SmartTags To Create A Personalized Experience<\/td>\n<\/tr>\n<tr>\n<th class=\"column-timestamp color-dark\">24:42<\/th>\n<td>How To Use The Member Decision SmartTag To Dynamically Display Content<\/td>\n<\/tr>\n<tr>\n<th class=\"column-timestamp color-dark\">46:52<\/th>\n<td>How To Design A Checkout Page<\/td>\n<\/tr>\n<tr>\n<th class=\"column-timestamp color-dark\">54:00<\/th>\n<td>Wrapping Up<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<!-- \/wp:html -->\n\n<!-- wp:heading {\"level\":3,\"className\":\"title-budicon\"} -->\n<h3 class=\"wp-block-heading title-budicon\"><i class=\"budicon-star color-blue\"><\/i> <strong>What You'll Learn In This Video<\/strong><\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In this over-the-shoulder tutorial, we'll show you how to combine the power of MemberMouse and Elementor. After you watch it, you'll know how to use the powerful features of MemberMouse and design a site you love. In this example, we'll start by building a member homepage from scratch.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2022\/03\/1f12ab21-member-homepage.png\" alt=\"member homepage example\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Plus, you'll see how you can use MemberMouse SmartTags \u2014 like the <a href=\"https:\/\/membermouse.com\/docs\/member-data-smarttag-mm_member_data\/\" target=\"_blank\" rel=\"noopener noreferrer\">Member Data SmartTag<\/a> &amp; <a href=\"https:\/\/membermouse.com\/docs\/member-decision-smarttag-mm_member_decision\/\" target=\"_blank\" rel=\"noopener noreferrer\">Member Decision SmartTag<\/a> \u2014 to personalize your members' experience and dynamically display content. It's pretty fun stuff (in our humble opinion).<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>And in the second part of the video, we'll also take a look at how you can design a checkout page that matches the look and feel of your site:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2022\/03\/ffed4966-membership-checkout-page.png\" alt=\"membership checkout page example\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Below, you'll find more information and resources about some of the key concepts we cover in the video. If you get stuck or have questions, we're here to support you. Just leave a comment below in this post and we'll help you out as soon as we can.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3,\"className\":\"title-budicon\"} -->\n<h3 class=\"wp-block-heading title-budicon\"><i class=\"budicon-browser-tick color-blue\"><\/i><strong> How To Use The Member Decision SmartTag<\/strong><\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>At <strong>24:40<\/strong> in the tutorial, we show you how you can use the Member Decision SmartTag to dynamically display content based on whether or not someone owns a particular product.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As we mention in the video, <a href=\"https:\/\/membermouse.com\/docs\/member-decision-smarttag-mm_member_decision\/\" target=\"_blank\" rel=\"noopener noreferrer\">here's the link to the support article<\/a> with all the information you need to put these features to work on your site.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Here's an example of the code snippet you'd paste into an HTML block to implement this on your site:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\n\n<\/pre>\n<!-- \/wp:preformatted -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">\n\n<\/pre>\n<!-- \/wp:preformatted -->\n\n<!-- wp:paragraph -->\n<p>Just be sure to update your bundle ID number to match the bundle you're working with.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3,\"className\":\"title-budicon\"} -->\n<h3 class=\"wp-block-heading title-budicon\"><i class=\"budicon-doodle color-blue\"><\/i><strong> How To Customize Your Checkout Page<\/strong><\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>We often get asked about how to make a MemberMouse checkout page conform to the styling of your theme or page builder. That's why in this section (at <strong>46:52<\/strong> in the tutorial) we show you how to make any checkout page match the look and feel of the rest of your site. And the good news is that all you need to do is copy and paste in one tiny code snippet into the section you want to change in Elementor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2022\/03\/277b5aa6-elementor-css.png\" alt=\"elementor css example\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the CSS Classes section, simply paste in this code snippet like I do at <strong>50:25<\/strong> in the video:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><code class=\"color-orange\">elementor-widget-text-editor<\/code><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>This will override the default checkout page styling and ensure your checkout pages matches the design of your site.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3,\"className\":\"title-budicon\"} -->\n<h3 class=\"wp-block-heading title-budicon\"><i class=\"budicon-two-thirds color-blue\"><\/i><strong> Where To Find All The Core Page Templates<\/strong><\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Depending on the version of WordPress you're using, you might not be able to directly insert all the different MemberMouse Core Page templates from your content editor:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2022\/03\/ac441cda-membermouse-core-pages.png\" alt=\"membermouse core page templates\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>This isn't a problem, though. All you'll need to do is visit the page below to find all of the templates you need:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><a href=\"https:\/\/membermouse.com\/article-categories\/templates-core\/\" target=\"_blank\" rel=\"noopener noreferrer\">All MemberMouse Core Page Templates<\/a><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>From there, you can simply find the page template you want to work with, copy it, and paste it into the HTML block you're designing in Elementor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3,\"className\":\"title-budicon\"} -->\n<h3 class=\"wp-block-heading title-budicon\"><i class=\"budicon-notes-tick color-blue\"><\/i><strong> Wrapping Up<\/strong><\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Thank you for checking out this MemberMouse and Elementor tutorial video. We get how overwhelming it can be when you first start to build your site. If you have any questions about what we've covered here, please let us know in the comments below. We love helping people build powerful and profitable membership sites and would be happy to assist you.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<div id=\"section-resources\" class=\"section-content-area\">\n<h3 class=\"title-budicon\"><i class=\"budicon-book color-blue\"><\/i> Additional Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/membermouse.com\/docs\/member-data-smarttag-mm_member_data\/\" target=\"_blank\" rel=\"noopener noreferrer\">Member Data SmartTag<\/a><\/li>\n<li><a href=\"https:\/\/membermouse.com\/docs\/member-decision-smarttag-mm_member_decision\/\" target=\"_blank\" rel=\"noopener noreferrer\">Member Decision SmartTag<\/a><\/li>\n<li><a href=\"https:\/\/membermouse.com\/docs\/using-1-click-purchase-links\/\" target=\"_blank\" rel=\"noopener noreferrer\">How To Use 1-Click Purchase Links<\/a><\/li>\n<li><a href=\"https:\/\/membermouse.com\/elementor\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Elementor<\/a><\/li>\n<li><a href=\"https:\/\/membermouse.com\/hello-theme\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Hello Theme<\/a><\/li>\n<li><a href=\"https:\/\/membermouse.com\/generatepress\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">GeneratePress<\/a><\/li>\n<\/ul>\n<\/div>\n<!-- \/wp:html -->","protected":false},"excerpt":{"rendered":"<p>En este video tutorial en profundidad, le mostraremos c\u00f3mo construir y dise\u00f1ar su sitio de membres\u00eda usando MemberMouse y Elementor.<\/p>","protected":false},"author":20918,"featured_media":12971,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_strive_checklists":"\"\"","_strive_active_checklist":"","_strive_post_notes":"","footnotes":""},"categories":[81,117,116,35,73],"tags":[],"class_list":["post-12932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","category-mm-dash","category-mm-features","category-strategies","category-wordpressux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/posts\/12932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/users\/20918"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/comments?post=12932"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/posts\/12932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media\/12971"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media?parent=12932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/categories?post=12932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/tags?post=12932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}