Starter Sites

This is the area where I document the entire process of building and enhancing the Starter Sites, including links to MyListing Resources created as part of the process. Documenting everything provides better customer service compared to simply selling a product.

Customers can better understand what I’ve done and easily undo or make changes as desired. Those looking to replicate a Starter Site by piecing together the various components can greatly benefit from these notes as well.

In addition to these built notes, please see the free educational videos so you don’t miss anything.

The Canvas Starter Site came from the idea of creating a MyListing website that was void of niche-specific elements that might influence customers into thinking the Starter Site could only be used for a particular type of directory. A blank canvas, if you will.

Developing the idea further, I built Canvas in a way that empowers customers to easily take a site, make it their own, and launch without having to rely on a developer. 

Everything has been implemented modularly, and customers are not required to use anything I’ve implemented. Customers can easily return to the MyListing defaults, if desired.

• WPCodeBox (Included and Licensed) is configured to apply code snippets responsibly, with performance and modularity in mind. Code snippets are only applied where they should (i.e., Conditional Loading) be rather than loading them across the entire website.
• Perfmatters (included and licensed) is configured with base settings for performance optimizations that I feel are “safe” for most MyListing websites.
• System Fonts have been implemented, which can be one of the most significant factors for speeding up your MyListing website, as they require no download time by the browser. As a bonus, they are great-looking fonts.
• Elementor Containers are used exclusively, boosting website performance by reducing the overall weight of web pages compared to Elementor’s older ‘Section/Column’ elements.
• WooCommerce High-Performance Order Storage (HPOS) is enabled by default, providing a more scalable and reliable system for managing orders.
• Listing Type revisions have been reduced from 15 (default) to 5, reducing database bloat.

The highly-regaurded Simple Cloudflare Turnstile plugin (free) is installed. This is the plugin I use for all websites under my management.

All you need to do is configure the easy-to-follow settings for connecting it to Cloudflare (free). It even provides a Light or Dark Mode when displaying any messages to users, which is nice since the Starter Sites come in both Light and Dark Mode.

Placeholder Images

The Club’s Starter Sites can literally be used to build any type of directory, regardless of the particular niche (e.g., fitness, weddings, etc.). As such, I chose to mostly use placeholder images rather than “real life” images that will be replaced anyway.

Replacing the placeholder images (or any images) is super easy.

1. Identify the image you want to replace from the front end of your website.
2. Right-click on the image to inspect it, and your browser will give you the exact dimensions of the image.
3. Ensure your new image has the correct dimensions, it’s optimized, and then upload it.

Instant Images

The Instant Images plugin (free) is included. It allows you to easily pull in free, high-quality images from providers like Unsplash, Pexels, and more, without leaving your website.

Mobile Mockups Images

Throughout the Starter Sites, you’ll see mobile mockup image placeholders. Please watch the How I Create Beautiful and Performance-Optimized Mockup Images tutorial video for more information.

Code Snippets are included to provide enhanced functionality and beautiful design.

If you don’t want to use a particular code snippet, it’s not a problem. Simply toggle off or remove the corresponding code snippet and let the default styling/functionality of the MyListing theme take over.

WPCodeBox (Included and Licensed) is configured to apply code snippets responsibly, with performance and modularity in mind, which provides many benefits over other code snippet methods.

• Performance: WPCodeBox can replace multiple plugins, load code snippets conditionally (i.e., only where they are needed), etc.
• Search: Easily find the code snippet you’d like to adjust by searching folders for keywords.
• Folders: Code Snippets can be placed in custom folders so you can easily find them, just like you can organize files on your computer.
• Easy Troubleshooting: Easily toggle on/off individual Code Snippets to identify which one is implementing faulty code, applying a particular design, etc.
• Autocomplete: WPCodeBox helps you write your code. Start typing, and you will be given hints about what should come next.
• And More!

MyListing websites have elements that appear on every page and some that are likely to appear on multiple pages. Global CSS Packages were created to style those elements with optimization and ease of management in mind.

If you were to look at the Global CSS Package, the elements below reflect the elements addressed from top to bottom.

• Color Scheme (See ‘Color Scheme’ section for more info.)
• System Fonts (See ‘Performance’ section for more info.)
• Hide Content From User Roles (See ‘Multi-Vendor Marketplace’ section for more info.)
• Miscellaneous MyListing Fixes/Enhancements: Inaccessible Fonts, Modals, Bulleted Lists, etc.
• Miscellaneous WooCommerce Fixes/Enhancements: Buttons, Messages, etc.
• Required Field Asterisks (e.g., *)
• Header (See ‘Header’ section for more info.)
• User Dashboard Menu (See ‘Header’ section for more info.)
• WooCommerce Mini Cart (See ‘Header’ section for more info.)
• Direct Messages: (See ‘Header’ section for more info.)

The Canvas color scheme consists of shades of black, white, and the accent color, showing people that a MyListing website can look great without overly-complicated color choices. As a byproduct, it’s super simple and fast for customers to change the colors to match their branding.

Once the color scheme was defined, it was implemented using Elementor Global Colors and CSS Packages. 

Elementor Global Colors

All colors defined within Elementor are included in the Canvas – Style Kits (free), a subset of the Canvas – Starter Site Kits. I pulled out the color-related settings to make it available as a free download to anyone with a Club account.

CSS Packages

All colors defined using CSS are included in the Canvas – Color Scheme CSS Packages (free), a subset of the Canvas – Global CSS Packages. I pulled out the color-related CSS to make it available as a free download to anyone with a Club account.

Dynamic Colors

Instead of having the massive administrative overhead and potential for making mistakes that comes with managing individual color codes, like HEX (e.g., #000000), RGBA (e.g., rgba(0, 0, 0, 1)), etc., CSS variables are implemented to provide a more powerful and scalable approach.

MyListing uses the CSS variables approach as well for colors such as the accent color. The color you specify as your accent color within the MyListing theme options gets applied throughout your MyListing website using CSS variables.

Using CSS variables makes it super easy and fast for Starter Site customers to change the colors to match their branding. An update to a single CSS variable changes the corresponding color of elements across the entire website.

Starter Sites are available in Light Mode or Dark Mode. If you buy a Starter Site, they are fully configured in the chosen mode.

CSS Packages

If you’re looking to replicate an entire Starter Site or portions of one, the CSS Packages (Light Mode and Dark Mode) used to build Canvas are available.

Elementor Templates

If you’re looking to replicate an entire Starter Site or portions of one, the Elementor Templates (Light Mode and Dark Mode) used to build Canvas are available.

Creating a responsive typography framework within Elementor (and the WordPress editor) simplifies and enhances your web design process. With a fluid typography framework, your font sizes automatically adjust, ensuring each text element scales proportionately across all screen sizes.

Elementor-Based Content

Global Fonts are configured within Elementor to ensure consistent, fluid typography. Any adjustments made to the Global Fonts are automatically applied across the entire website to any Elementor widget that has it’s text-based settings configured to use Global Fonts.

All Elementor typography settings are included in the Canvas – Style Kits (Free), a subset of the Canvas – Starter Site Kits. I pulled out the typography-related settings to make it available as a free download to anyone with a Club account.

WordPress-Based Content (i.e.,The Block Editor)

All WordPress typography settings are included in the Canvas – Fluid Typography CSS Package (Free).

MyListing Typography Fixes

MyListing uses a default text ‘Base’ (i.e., text size) of 10px, while the default Base for browsers and most other themes is 16px. Because of this, proper REM < > PX conversion isn’t possible, and MyListing websites have accessibility issues unless you implement a tiny bit of CSS, which I provide below.

html { font-size: 16px !important; }

One of my absolute favorite tools for designing with responsive fonts is Type Scale (Free). Once you fire it up, you’ll notice that it defaults to a ‘Base’ of 16px. I wonder why that is? 😉 The proper “base” is already implemented on Canvas.

Elementor Templates provide ready-made content and design in just a few clicks.

• Compatible With Any Elementor Website
• Easily Imported Into Websites With Just a Few Clicks
• Available in Light and Dark Mode
• Built Performance and Design Best Practices
• Mobile Responsive

Every Starter Site page has been saved as a template, providing customers with a fresh copy of the original design should they wish to clone it for use elsewhere or revert to a page’s original design.

Starter Site Kits

Rather than downloading each Elementor Template separately, customers can purchase a Starter Site Kit to get all of the templates in a single download.

You can quickly put your website into’ Coming Soon’ mode using Elementor’s built-in option (Elementor > Tools > Maintenance Mode), so there’s no need for a separate Coming Soon/Maintenance Mode plugin.

You have the full power of Elementor Pro (Included and Licensed) to design your ‘Coming Soon’ page as you’d like.

Starter Site customers have many options when it comes to ‘Coming Soon’ templates. 

1. Use one of the Coming Soon templates included with Canvas.
2. Using Elementor, create your own ‘Coming Soon’ template from scratch.
3. Import a premade template from Elementor’s template library.
4. Import a pre-made template from another third-party resource.

Email Capture

The Coming Soon templates include a form designed to capture email for those interested in learning about your business before it launches or getting notified once it launches. Configure the form with your preferred newsletter email solution, use the form for something completely different, or remove the form altogether.

I used my favorite favicon maker (free) to create a quick favicon. Had this been a real-word website, I likely would have properly implemented a favicon.

Logo

I’m using a text-only “logo” for Canvas, which is automatically added to a MyListing website if you don’t define a  ‘Site Logo’ (Theme Tools > Theme Options > General > Site Logo).

You can do a lot with a text-based logo, using CSS to assign styling, a unique font, and more. Don’t always get hung up thinking logos must be images and reap the benefits of some performance gain.

Specific dimensions don’t apply to those who want to use an SVG-based logo since an SVG will already scale and be performant.

If using a format other than SVG and you’re using MyListing’s default header, your logo height should be 160px. MyListing’s maximum header size is 80px, so you double that value to get the needed image height. The width of the logo comes down to personal preference but can also be impacted by the number of elements you’re trying to fit into the header.

WooCommerce Menu

By default, MyListing implements a WooCommerce menu (i.e., MyListing Dashboard Menu), a full-width, horizontal menu that appears on non-mobile devices. The only way to customize this menu (menu items, layout, etc.) is to create a custom menu, but luckily, WooCommerce makes this super easy. 

I created a custom WooCommerce menu (WordPress Dashboard > Appearance > Menus), chose which WooCommerce endpoints to show, and added custom menu icons for each endpoint. MyListing doesn’t provide a way to style the icons added to this menu, so I added some custom CSS to help with that.

User Dashboard Menu

This is the mobile version of the ‘WooCommerce Menu,’ which has different styling rules. MyListing does not provide a way to style any icons added to this menu, so I added some custom CSS to help with that.

WooCommerce Mini Cart

Custom styling has been applied to this feature, giving it a clean, consistent, modern look. MyListing does not provide a way to style the item counter when the header is scrolled, so I added some custom CSS to help with that.

MyListing Direct Messages

I replaced the default ‘no messages’ icon with a custom image (No Results Icon – 80 x 80) and added some other custom styling to match the overall branding and enhance the overall appearance. MyListing does not provide a way to do this.

Direct Messages CSS Packages

Direct Messages CSS Packages are available if you only want the design elements for the Direct Messages feature and not all the other elements mentioned for the header.

Miscellaneous Highlights

• Mobile Menu Call To Action: Unlike all other mobile menu items, this item (i.e., button) is centered by default, and the menu doesn’t look cohesive. I applied some CSS to address this.
• Current Menu Item: Unique styling was added to highlight which page was active in the menu, which isn’t possible with MyListing by default.
• Last Submenu Items: Unique styling was added to some of the essential menu items (All Listings and Logout) that appear last in the submenu list.
• Submenu Icons: MyListing hides these icons by default. The Unhide Submenu Icons in the Default MyListing Header code snippet is used to unhide the icons and style them.
• Dark Mode Mobile Menu: Significant time was spent ensuring that the dark mode version of the mobile menu looks excellent, from the different backgrounds to the links and icons.

Global Styling

The Global CSS Packages provide the styling of all header components in one download.

The resources highlighted here cover exciting new opportunities for the MyListing header. In short, you now possess a strong foundation to unleash your creativity in terms of its functionality and design.

The Starter Sites included Mega Header Templates that are inactive, but customers can activate them with just a few clicks. Mega Header CSS Packages were created to enhance the overall design and overcome some limitations introduced by Elementor and MyListing.

Check out the walkthrough video for more info.

Template Highlights

• Full Width or Boxed: The template is two templates in one. You can choose the full-width version or the boxed version that matches the width of your content.
• Sticky On Scroll: The header will stay at the top as users scroll down the page.
• Dynamic Direct Messaging Icon: Dynamic Content for Elementor (Included and Licensed) is configured on Elementor’s HTML widget (i.e., MyListing Direct Messaging widget) to hide the direct messaging icon unless the user is logged in.
• Dynamic Menu Cart Icon: Dynamic Content for Elementor is configured on Elementor’s Menu Cart widget to hide the cart icon unless the customer has items in their shopping cart.
• WordPress Menus: This template will look for three menus (Header—Explore, Header—Platform, and Header—Account).

CSS Package Highlights

• MyLisiting Direct Message Icon: The default icon has been replaced with a cleaner-looking icon that matches the design of the cart icon.
• MyLisiting Direct Message Counter: This counter is designed to match the design of Elementor’s Menu Cart counter.
• MyLisiting Listing Promotion Products: A bug within MyListing prevents this particular product type from registering with WooCommerce/Elementor as other products do. So, CSS is needed to overcome some design limitations.
• WordPress Menus (Last Menu Item): The last menu items (All Listings, Get Started, and Logout) have unique styling. This was done by assigning the ‘headernavlastitem’ CSS class to these menu items and applying the CSS to that class.
• WordPress Menus (Icons): All menu items have CSS applied for better spacing between menu text and icons. This was done by assigning the ‘headernav’ CSS class to these menu items and applying the CSS to that class.

The Mega Menu Popup Templates could be triggered by a CTA (button, icon, etc.) in your header area to act as your entire header navigation. However, I see this more as a complement to your header by triggering it from one of your menu items.

Once you have this template in hand, you can get creative and manipulate it for all sorts of uses throughout your website.

By default, the MyListing Direct Messaging feature severely lacks features. This puts the website owner and their users at risk regarding privacy and other downsides.

The Direct Messaging Admin Center Add-on for MyListing (Included and Licensed) was developed to address this. I now feel comfortable recommending the Direct Messaging feature to clients and customers as long as they use this add-on.

• GDPR & Privacy Compliance
• Conversation Monitoring
• Customizable Auto-Reply
• Reduce Website Bloat
• And More!

The default MyListing Footer is not customizable unless you’re talented with CSS, willing to work with WordPress widgets (WordPress Dashboard > Appearance > Widgets), and you have a lot of extra spare time on your hands.

Footer Templates were created with Elementor Pro (Included and Licensed), giving the website owner a ton of flexibility regarding design, functionality, and display conditions.

Display Conditions

Using Elementor’s Display Conditions, the footer templates are set to be hidden during the ‘Add Listing Flow.’ This is one less distraction for listing owners while adding their listings to the platform and offers a slight performance boost by not loading the footer elements.

By default, the side navigation displayed on the ‘Add Listing Submit Form’ bleeds into the footer as the listing owner scrolls to the bottom of the form. That issue goes away since the footer is no longer present.

“Logo”

Elementor’s Heading Widget has been configured to dynamically pull in the site name. See the ‘Header’ section for more information on how I approached the logo.

Copyright

Elementor’s Text Widget and the ‘Current Date Time’ dynamic tag, the copyright date dynamically displays and updates, with the copyright symbol prepended and the site name appended. The site name text is not dynamic and needs to be manually adjusted.

Navigation

To comply with SEO best practices, the native WordPress menu system (WordPress Dashboard > Appearance > Menus) is used for the ‘Footer – Platform,’ ‘Footer – Explore,’ and ‘Footer – Legal & Sitemap’ menus.

The menus are added to the footer using Elementor’s WordPress Menu widget, and the corresponding menu is selected. Starter Site customers can easily adjust their menus within the WordPress Dashboard rather than needing to edit the Footer template.

Email Capture

The footer template includes an Elementor Pro (Included and Licensed) form configured to capture email for those interested in your business before launch. Configure the form with your preferred newsletter email solution, use the form for something completely different, or remove the form altogether.

Regarding the text above the form, the site name is dynamically displayed using the ‘Site Title’ dynamic tag with ‘Subscribe to the’ prepended and ‘newsletter for our popular platform’s latest news and offers.’ appended.

These pages are displayed when a visited page no longer exists. Website owners need something to help users get back on track and not feel like they’re using a broken website.

Often, you see a ‘Back to Home’ button on 404 pages, but I wanted to do something different for this site, which is to configure the button to take the user back to the previous page they were on before they hit the 404 page.

The default MyListing 404 Page is not customizable unless you are talented with CSS, and even then, you’re extremely limited in what you can do regarding design and functionality. Therefore, custom 404 Page Templates were created with Elementor Pro (Included and Licensed).

The Starter Sites have a Welcome Popup Template that displays on the Home page with a message regarding how the Starter Sites are loaded with features and link to information so potential customers don’t miss anything.

Starter Site customers seem to enjoy this template, custmizing it to welcome their users. If you don’t want to use this template on your website, you can set it to draft mode or delete it entirely.

MyListing website owners may need to confirm a visitor’s age before allowing them to consume the content on their website. In such cases, using an Age Gate Popup Template is an excellent way to get the confirmation.

Miscellaneous Highlights

• Dynamic Heading: The website’s name is dynamically appended to ‘Welcome to’ (e.g., ‘Welcome to Canvas’).
• ‘Yes’ Button: If clicked, the user is taken back to the page they were on when the popup appeared.
• ‘No’ Button: This button is not configured, so the website owner will want to configure this button to redirect to somewhere other than their website. I’ve configured this button to open the link in a new browser tab and to make it a ‘nofollow’ link for SEO purposes.
• Prevent Closing Before Confirmation: The popup is configured so users cannot use the ESC key to exit it before confirming their choice of ‘Yes’ or ‘No.’
• Terms & Policy Links: Links to these policies are added via a text widget, and the website owner can easily adjust or remove them.
• Display Conditions: The Display Conditions are configured to show the popup once, immediately upon page load. In short, the popup will never be shown again once the user interacts with it the first time. These settings are easily adjusted, and some powerful options are available.

MyListing Dashboard CSS Packages have been created to make the MyListing Dashboard beautiful and modern, down to the most granular details. 

No Results Message

By default, when no results (Listings, Promotions, Bookmarks, etc.) are shown, MyListing displays a 40 x 40px “frowning face” icon and some text that reads “You do not have XYZ.”  The icon is unprofessional, so I replaced it with a custom image (No Results Icon – 80 x 80) placeholder that Canvas customers can easily replace with their branding.

Custom Listing Promotion Modal With Educational Component

By default, when a listing owner uses the ‘Promote’ action from the listing card, they are presented with a very basic design with no education regarding Listing Promotions. The Promote Listing modal has been custom-designed and includes a link to an educational page (e.g., Support) where Listing Owners can learn more about ‘Promoted Listings.’

Listings Endpoint

MyListing applies a default image (white map pin on a black background) as the logo for Listings in the MyListing Dashboard. The default image gets overridden once a logo is added to a listing or the website owner implements a custom ‘Default Map Marker’ image. I’ve added a custom placeholder image (Listing – Default Map Marker – 84 x 84) so Canvas customers can easily replace it with their branding.

Miscellaneous Highlights

• Custom Styling of All Endpoints
• Custom Stat Box Styling
• Custom Animated Bars Styling
• Custom Listing Card Styling
• Custom Listing Promotion Modal Stying and Education Link Embed
• Custom Promotion Card Styling
• Custom Bookmark Card Styling
• Numerous Fixes to MyListing Design Inconsistencies
• Combined the Billing Address and Payment Methods WooCommerce Endpoints

Custom Elementor Dashboard Templates were created. They can be used to Fully Customize the MyListing Dashboard With Elementor, giving you the freedom to add the functionality and design you’re looking for.

To complete the overall design, MyListing Dasboard CSS Packages style the WooCommerce Endpoints (i.e., MyListing Dashboard).

The Starter Sites use the default MyListing Login/Registration experience. Below, I’m simply making it easy for you to make some extra customizations.

By default, we are limited in what we can do regarding the design and functionality of the login and registration process. So, I created a guide to help website owners and builders Completely Customize the MyListing Login / Registration Experience for FREE!!!.

If you follow the guide, you will have the full power of Elementor Pro (Included and Licensed) to customize the design and functionality of MyListing’s Login/Registration experience.

Templates are available for the Login Pages and Register Pages.

Contact Pages are more than just a form or email address; they’re a vital bridge between you and your audience, assuring visitors that there are real people ready to help They build trust by offering direct communication with your business, showing you’re accessible and transparent.

These pages can also be a hub for important information like phone numbers, physical addresses, or social media links, enhancing your credibility. Don’t underestimate the role of contact pages in turning curious visitors into loyal customers, and that’s why Contact Page Templates are available.

The Starter Sites have Contact Form Popup Templates that users can quickly trigger from an Elementor popup, a link, or other types of CTAs.

Contact Form Popup Trigger

On Support Pages, there is a Contact Form Popup Trigger Template that automatically slides in from the left, consisting of an icon that, when clicked, brings up the contact form. The template’s display conditions can be easily adjusted so it appears when/where desired.

Contact Form Popup via a Link

Triggering an Elementor Popup from certain widgets (buttons, icons, etc.) is done by simply specifying the popup, but it’s a little trickier when using a pure text-based link. Below are the steps to call a popup from a link.

1. Elementor Popup Template > Settings > Advanced
2. Open By Selector > a[href=”#contactsupport”]
3. Use #contactsupport as your link.

Contact Form Dynamic Content

• Sender Name: Dynamically fill in the ‘Display Name’ of the logged-in user.
• Sender Email: Dynamically fill in the logged-in user’s email address.
• Recipient Email: Dynamically send messages to the site admin email address.
• Subject: Dynamically fill in based on what the sender selects from the ‘Subject Dropdown.’
• From Email: Dynamically send from the site admin email address.
• From Name: Dynamically fill in with ‘New message from <sitename>.’

The Bug Report Popup Trigger Template, when active, appears at the right of the screen and remains sticky as the user scrolls up/down.

It consists of an icon that, when clicked, can trigger the Contact Form Popup Templates, link to a Support Page, etc., and using Elementor’s Display Conditions, you can easily adjust the template so it appears when/where desired.

Any business that sells products and services should have a Support Page to educate its customers. This benefits the customer and prevents the business owner from repeatedly answering the same questions.

The Support Page and Support Endpoint Page templates include real-world support information for listing owners.

Style 1

For this template, I thought it would be interesting to lay out Listing Features in a way that matches the content and layout of the MyListing Product Package and Pricing Tables. The ‘Listing Features’ area of the support page is linked to when someone clicks the ‘Plan Features’ link within the Pricing Page tables.

Style 2

For this template, I used an Elementor accordion to display the Listing Features. The ‘Listing Features’ area of the support page is linked to when someone clicks the ‘Plan Features’ link within the Pricing Page tables.

The Support Endpoint Templates can be used anywhere on the website, for support, or otherwise repurposed for other pages. 

What I’d like to highlight is the ability to use these templates and Fully Customize the MyListing Dashboard With Elementor. Users can stay within the WooCommerce menu system (i.e., MyListing Dashboard) and browse custom pages you add to your website.

By default, MyListing’s Blog Page template is very basic, and you must rely on code customizations to adjust the design and add functionality.

To overcome this, Blog Page Templates were created using Elementor Pro (Included and Licensed), giving customers the full power and flexibility of Elementor to build Blog Pages any way they want without requiring custom code.

Miscellaneous Highlights

• Featured Post Block Templates
• Recent Posts Block Templates
• Newsletter Block Template
• ‘Read More’ Links: CSS is used to make the links appear as buttons. (Elementor does not provide a way to do this.)
• Recent Posts Heading: The Elementor Heading widget is configured to dynamically inject the Site Name (‘Canvas’) before ‘Recent’ and after ‘Posts.’

Loop Grids

This exciting Elementor feature allows you to display the same content type (e.g., posts) with entirely different designs. Looking at the various post sections, you’ll notice that every card has a unique design, and this is made possible with the Loop Item Templates.

Category Sections

The Category Section includes the Elementor Taxonomy Filter widget configured to filter all posts by category and has a horizontal design, so users can scroll through the filters horizontally on mobile.

Tags Section

The Tag Section includes the Elementor Taxonomy Filter widget configured to filter all posts by tag and has a vertical design to give customers another option.

Single Blog Post Templates have been built with Elementor Pro (Included and Licensed) to open up significant design and functionality capabilities. Elementor’s Display Conditions are configured to apply the template to all blog posts, making them dynamic.

The bulk of the blog post content (Featured Images, Headings, Paragraphs, Galleries, etc.) is added to posts using the WordPress Block Editor, whereas the Elementor templates are used to style the content, add special elements, etc. This approach is best practice.

One mistake people often make is creating each individual post with Elementor. This introduces issues with performance, maintainability, and more. If each post is created differently, imagine the work it would take to adjust the fonts, colors, etc., should a change need to occur.

Single Blog Post Process

1. Create a post using the WordPress Block Editor (don’t edit the post with Elementor).
2. Publish the post.
3. The applicable Single Blog Post Template will automatically apply to the blog post, adding design, functionality, etc. to the post.

By default, MyListing’s archive templates are very basic, and you must rely on code customizations to adjust the design and add functionality. Using Elementor Pro (Included and Licensed), customers have the full power and flexibility of Elementor to build archive pages without requiring custom code.

Post Category Archive Templates apply to all Blog Post Categories, while the Post Tags Archive Templates apply to all Blog Post Tags. Using Elementor’s Display Conditions, customers can easily adjust which taxonomy (e.g., Categories, Tags, etc.) the templates should apply to.

Do you want to apply an archive template to one category and a different template to another? No problem! Customers can create additional archive templates that apply to all posts, posts in a specific category, posts with a particular tag, etc., by simply cloning an archive template and adjusting it as desired.

Dynamic Elements

• Archive Page Title: Pulls in the name of the corresponding category (e.g., Category 1) or the corresponding tag (e.g., Tag 1).
• Recent Posts Heading: Pulls in the name of the corresponding category (e.g., Category 1), with ‘Recent’ prepended and ‘Posts’ appended (e.g., Recent Category 1 Posts).
• Recent Posts Grid: Pulls in the most recent Category 1 or Tag 1 posts but can be easily configured to limit by term (e.g., category, tag, etc.), author, manual selection, etc.
• Category & Tag Post Grids: Pulls in the Category 1 or Tag 1 posts but can be easily configured to limit by term (e.g., category, tag, etc.), author, manual selection, etc.
• Taxonomy Badge: Each post “card” within the post grids has a badge that displays the post’s terms (e.g., categories, tags, etc.), with the badge being populated by different Loop Item Templates to provide various options and inspiration.
• Taxonomy Badge (Tag Archive): Each post “card” within the post grid has a badge that displays the post’s terms (tags in this case), which are populated by the Loop Item Tags.

Static Elements

• Button Menu (Category Archive Template): Requires manual entry of child categories.
• Featured Post: Requires manual selection of the desired post.
• Newsletter Sign-Up Form: Requires a newsletter solution, configuration as a contact form, or whatever else you dream up.

Miscellaneous Highlights

• Featured Post Block Templates
• ‘Read More’ Links: CSS is used to make the links appear as buttons. (Elementor does not provide a way to do this.)

The Product Package contains all of the WooCommerce products included in the Starter Sites.

• Listing Packages (Listing Subscriptions)
• Listing Subscription Group (Listing Switching)
• Listing Promotions
• Category Products
• Vendor Products

Listing Subscriptions

Listing Subscriptions are far superior to MyListing’s default Listing Packages, as they allow Listing Owners to upgrade/downgrade their plan without any manual intervention.

By default, MyListing does not provide the ability to sell subscription-based products, let alone Listing subscriptions. To sell Listing Subscriptions, customers need to use the official WooCommerce Subscriptions plugin.

Starter Sites include the latest version of WooCommere Subscriptions, which will allow customers to sell subscriptions for several months before needing to purchase a license. Listing Subscription functionality has been fully implemented.

If customers want to use MyListing’s default Listing Packages instead of Listing Subscriptions, it’s super easy to switch. It’s just a matter of changing the corresponding WooCommerce product type from ‘Listing Subscription’ to ‘Listing Package.’

Whether you go with Listing Subscriptions or the default Listing Packages, these products define more than just pricing for MyListing websites. They define the Listing plan names, listing duration, listing features, etc.

The Pricing Table Switcher Add-on for MyListing allows easy toggling between monthly and annual pricing.

Default Product Image

Depending on your business, you may not need a unique image for each product, and that’s where a default product image can save you a lot of time. The default product image can be set within WooCommerce (WooCommerce > Settings > Products> General > Placeholder Image), which gets applied to all products by default unless a product has a specific image assigned to it.

WooCommerce Products CSS Packages

WooCommerce Products CSS Packages enhance and fix design inconsistencies within WooCommerce Product-related elements (e.g., WooCommerce Messages, WooCommerce Subscription Switching, Single Products).

By default, MyListing’s Products Archive (i.e., Shop Page) template is very basic, and you must rely on code customizations to adjust the design and add functionality. Using Elementor Pro (Included and Licensed), customers have the full power and flexibility of Elementor to build archive pages without requiring custom code.

Currently, the Products Archive Template applies to the Shop Page. Using Elementor’s Display Conditions, customers can easily adjust which Product Archives (All, Shop Page, Product Categories, Product Tags, Product Vendors, etc.) the template should apply to.

Do you want to apply an archive template to one product category and a different template to another? No problem! Customers can create additional archive templates that apply to all product categories, specific product categories, etc. by simply cloning an archive template and adjusting it as desired.

Dynamic Elements

• Page Title: Pulls in the Site Name (e.g., Canvas) and appends ‘Store’ (e.g., Canvas Store).
• ‘Listing Packages’ Grid: Pulls in all products under the ‘Listing Packages’ Product Category, sorted by title, in ascending order. It applies to MyListing’s default ‘Listing Package’ product type and the ‘Listing Subscriptions’ product type.
• ‘Canvas Products’ Heading: Pulls in the Site Name (e.g., Canvas) and appends ‘Products.’
• ‘Canvas Products’ Grid: Pulls in all products under the ‘Default Category’ Product Category, sorted by title, in ascending order.
• ‘Popular Vendor Products’ Grid: Pulls in all products under the ‘Vendor’ Product Category, sorted by popularity, in descending order. The sort by popularity option lists the highest-sold products first, and any products with the same sales count are then ordered by Product ID.

Static Elements

• ‘Listing Promotions’ Grid: Requires you to enter the details of your Listing Promotion products. See the ‘Listing Promotions’ notes in this section for more information.
• Newsletter Sign-Up Form: Requires a newsletter solution, configuration as a contact form, or whatever else you dream up.

Listing Promotions Section

This MyListing ‘Listing Promotion’ product type cannot be used with Elementor’s ‘Products’ widget at this time. So, it’s impossible to make this dynamic as I did with the other product grids. I’ve opened this bug report/feature request with the MyListing developers.

For now, if you wish to use the Listing Promotion cards, you must manually populate them with the details from your Listing Promotion packages. You should also be aware of some other essential things.

• The ‘Add to Cart’ buttons are configured to automatically add the Listing Promotion product to the customer’s cart. The important part is that the buttons need to be configured with a Product Name and Product ID that match your Listing Promotion products, and I cover this in the walkthrough video below.
• Using the Create Unique Redirects Based on the Purchased Product code snippet, the Listing Promotion products are configured so the customer is redirected after checkout to the Listings area of their MyListing Dashboard. The idea is for the customer to then click the ‘Promote’ button on their listing card and then use the Listing Promotion they just bought to promote their listing.

Listing Promotions Block Templates

Here are the Listing Promotions Block Templates for those who don’t need the entire Shop page.

CTA Grid Block Templates

Here are the CTA Grid Block Templates for those who don’t need the entire Shop page.

By default, the only way MyListing website users see pricing is once they start adding their first listing. This is not a good user experience, so the Starter Sites give you the resources needed to create a better experience.

Identical Pricing and Add Listing Pages

Front-facing Pricing Pages allow users to view the costs of adding a listing before getting into the ‘Add Listing Flow’ (i.e., Add Listing Page / Submit Form).

Instead of having to create custom pricing tables, MyListing’s ’27 > Package Selection’ Elementor widget is used to expedite the table-building process. This has the added benefit of producing tables that look identical to those found within the ‘Add Listing Flow.’

Since we are not using Elementor templates for the pricing tables, we need to style them with code, and that’s done with the Pricing Page CSS Packages.

Unique Design Flexibility

Leveraging the power of WPCodeBox (Included and Licensed), customers can easily assign a unique, separate design between the elements that are part of the ‘Add Listing Flow’ (1. Front-facing Pricing Page, 2. ‘Add Listing’ Page, and 3. ‘Submit Form’) if they choose.

Pricing Table Switcher

By default, there isn’t an elegant way for MyListing website owners to display monthly and annual pricing within the pricing tables that are part of the ‘Add Listing’ process. The Pricing Table Switcher Add-on for MyListing was developed to address this and significantly enhance the customer buying experience.

Pricing Table Verified Badge

The Listing Package 4 (Monthly and Annual) WooCommerce Product is configured to pull in a custom-colored ‘Verified Badge.’ Check out the Change the Color of the Verified Listings Badge guide to learn how to easily adjust the badge with your branding.

If you are going to allow users (i.e., listing owners) to add listings to your website from the front end, which is typical with MyListing websites, a dedicated page with the ’27 > Add Listing Form’ Elementor widget added to it is required. Unfortunately, this presents a not-so-flattering design with the Flipping Boxes seen on most MyListing websites.

In addition to the ‘Add Listing’ page, I use a ‘Get Started’ page with direct links for adding listings under a particular Listing Type. This way, the core ‘Add Listing’ page on the front end of the website is never seen by anyone.

The ‘Get Started’ page serves as a starting point for creating an account, searching for existing listings that can be claimed, adding listings, etc. Building a ‘Get Started’ page with Elementor Pro (Included and Licensed) opens a world of possibilities for design and functionality.

Add Listing CTA Button

Most MyListing websites lack ‘Get Started’ pages or other educational pages, and potential listing owners’ only starting point is the ‘Add Listing’ CTA (Call to Action) in the header area (button or menu link). This can lead to users getting lost and frustrated, with more questions than answers.

As the website owner, you need to take advantage of critical opportunities to educate and provide more value to potential customers. As such, I’ve adjusted the settings of the ‘Add Listing’ CTA (Theme Tools > Them Options > Header > Call to Action) to point to the ‘Get Started’ page with a button label of ‘Get Started.’

Reverting to MyListing Defaults

Customers who want to return to using the default ‘Add Listing Flow’ for MyListing can do so easily. Adjust the Call to Action button settings in theme options so the button points to the ‘Add Listing’ page and bypasses the ‘Get Started’ page altogether.

Get Started Page – Style 1

Elementor Nested Carousel

Of particular note is using Elementor’s ‘Nested Elements’ feature and ‘Carousel’ widget to create slides for each CTA (Join, Claim, List, etc.). Rather than a set of static CTA boxes, this allows website owners to create movement, add multiple widgets to each carousel slide, and provide a lot of content in less space.

• Join: Links to the MyListing Login/Register page (/my-account/).
• Claim: Triggers the ‘Claim Listing’ popup.
• List: Teriggers the ‘Add Listing’ popup.
• Approval: Links to the ‘Listings’ Endpoint of the MyListing Dashboard.
• Reach: Links to the ‘Reach Further’ page.
• Repeat: Triggers the ‘Add Listing’ popup.

Claim CTA

Triggers the Claim Listing Popup Template, where users can use MyListing’s ‘Quick Search’ to search for published listings on the platform and then claim them. By default, ‘Quick Search’ doesn’t work within Elementor popups, so the Allow MyListing Quick Search in Elementor Popup code snippet was added.

Within the popup, there is text that includes a link to trigger the Add Listing Popup Template in case there are no published listings for the user to claim. By default, there isn’t a way to close an Elementor popup that triggers another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

To add/remove Listing Types for your website, edit the Elementor Shortcode widget within the popup. If you use Elementor’s Navigator feature, I’ve labeled the widget as ‘ML Quick Search.’

List CTA

Triggers the Add Listing Popup Template, where users can start adding a listing to the platform.

Within the popup, I added text that includes a link to trigger the Claim Listing Popup Template in case the user wasn’t aware that they might have published listings on the platform that they could claim. By default, there isn’t a way to close an Elementor popup that triggers another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

When editing the Listing Types, the important thing is to adjust the ‘Link’ field of the Elementor Icon Box widgets to include your website’s URLs.

Reach CTA

Triggers the Reach Further Page, where listing owners can learn ways to leverage the platform.

Get Started Page – Style 2

Elementor Nested Tabs

Of particular note is using Elementor’s ‘Nested Elements’ feature and ‘Tabs’ widget, allowing website owners to drop any Elementor widget into each tab and display a lot of content in a smaller space.

Join CTA

Links to the MyListing Login/Register page (/my-account/).

Claim CTA

Triggers the Claim Listing Popup Template, where users can use MyListing’s ‘Quick Search’ to search for published listings on the platform and then claim them. By default, ‘Quick Search’ doesn’t work within Elementor popups, so the Allow MyListing Quick Search in Elementor Popup code snippet was added.

Within the popup added text that includes a link to trigger the Add Listing Popup Template in case there are no published Listings for the user to claim. By default, there isn’t a way to close an Elementor popup that triggers another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

To add/remove Listing Types for your website, edit the Elementor Shortcode widget within the popup. If you use Elementor’s Navigator feature, I’ve labeled the widget as ‘ML Quick Search.’

List CTA

Triggers the Add Listing Popup Template, where users can start adding a listing to the platform.

Within the popup, I added text that includes a link to trigger the Claim Listing Popup Template in case the user wasn’t aware that they might have published listings on the platform that they could claim. By default, there isn’t a way to close an Elementor popup that triggers another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

When editing the Listing Types, the important thing is to adjust the ‘Link’ field of the Elementor Icon Box widgets to include your website’s URLs.

Reach CTA

Links to the Reach Further Page, where listing owners can learn ways to leverage the platform.

Explore CTA

Triggers the Explore Popup Template where users can search for listings on the platform. When editing the Listing Types, the important thing is to adjust the ‘Link’ field of the Elementor Icon Box widgets to include the URLs for your website.

Bookmark CTA

Triggers the Bookmark Listings Popup Template where users can get a quick education on where and how to bookmark listings. There is a placeholder image added to the template, with the idea of displaying a screenshot to show the bookmark feature of MyListing. The button links to the ‘Bookmarks’ area of the MyListing Dashboard.

Connect CTA

Links to the MyListing Login/Register page (/my-account/).

Shop CTA

Links to the Shop Page.

Get Started Page – Style 3

Elementor Nested Carousel

Of particular note is using Elementor’s ‘Nested Elements’ feature and ‘Carousel’ widget to create slides for each CTA (Join, Claim, List, etc.). Rather than a set of static CTA boxes, this allows website owners to create movement, add multiple widgets to each carousel slide, and provide a lot of content in less space.

• Join: Links to the MyListing Login/Register page (/my-account/).
• Claim: Drops the user down to the ‘Claim’ section.
• List: Drops the user down to the ‘List’ section.
• Approval: Links to the ‘Listings’ Endpoint of the MyListing Dashboard.
• Reach: Drops the user down to the ‘Reach’ section.
• Repeat: Drops the user down to the ‘List’ section.

Claim CTA

Drops the user down to the ‘Claim’ section, where they can use MyListing’s ‘Quick Search’ to search for published Listings on the platform and then claim them. To add/remove Listing Types for your website, edit the Elementor Shortcode widget. If you use Elementor’s Navigator feature, I’ve labeled the widget as ‘ML Quick Search.’ 

List CTA

Drops the user down to the ‘List’ section, where they can start adding listings to the platform. When editing the Listing Types, the important thing is to adjust the ‘Link’ field of the Elementor Icon Box widgets to include your website’s URLs.

Reach CTA

Drops the user down to the ‘Reach’ section, where listing owners can learn ways to leverage the platform.

Add Listing Page (/add-listing/)

If you are going to allow users (i.e., Listing Owners) to add listings to your website from the front end, which is typical with MyListing websites, a dedicated page with the ’27 > Add Listing Form’ Elementor widget added to it is required. The ‘Add Listing’ page can be named anything you want, as the only thing that matters is the ’27 > Add Listing Form’ widget being present on the page.

1. Create your Add Listing page.
2. Edit the page with Elementor and add the ’27 > Add Listing Form’ widget.
3. Edit the ’27 > Add Listing Form’ widget.
4. Add your Listing Types to the widget.
5. Save changes.

Since I use a Get Started Page with direct links for adding listings under a particular Listing Type, the core ‘Add Listing’ page is never seen by anyone on the front end of the website. Instead of the Flipping Boxes seen on most MyListing websites, I provide a custom flow that opens up design and functionality opportunities.

MyListing Pricing Tables

The ‘Add Listing’ page serves an additional purpose other than declaring which Listing Types can be added during the ‘Add Listing Flow.’ It also outputs the MyListing pricing tables.

To design the MyListing pricing tables, you’ll need a custom solution. To overcome this limitation, the Pricing Page CSS Packages style the tables to look identical to the Pricing Pages (i.e., the front-facing pricing page) to provide a more cohesive experience.

Custom Headings

Loco Translate (included and free) is used to change MyListing’s default ‘Choose a Package’ text on the ‘Add Listing’ page to have the exact text found on the front-facing pricing page. I wrapped the text in Loco Translate with CSS classes to ensure the typography perfectly matched the front-facing pricing page.

Add Listing Page CSS Packages

If you want to style more than just the pricing tables, the Add Listing Page CSS Package is responsible for designing all the elements mentioned above.

Complete Overall Design

The Add Listing Flow CSS Package provides the entire ‘Add Listing Flow’ (Add Listing Page and Submit Form) design in a single download.

Submit Form CSS Packages

Submit Form (/add-listing/?=<listing-type>/)

The ‘Submit Form’ is the form listing owners use to fill in their listing details, constructed by building the Listing Type fields.

If you allow users (i.e., listing owners) to add listings to your website from the front end, which is typical with MyListing websites, styling the form is essential to clean up some loose ends and ensure it matches your branding. Additionally, it’s critical to add opportunities for support and education to the ‘Submit Form.’

You’ll need custom solutions to adjust the design and functionality of the MyListing ‘Submit Form,’ and I’ve outlined my approach below.

Custom Headings

Loco Translate (included and free) is used to change the ‘Your listing details’ text at the top of the ‘Submit Form’ to read ‘Build Your Listing’ followed by ‘Need Help? Click Here.’ on a separate line. It’s also used to turn ‘Click Here.’ into a link that triggers the Contact Form Popup Template should the listing owner need to send a support request.

The text in Loco Translate is wrapped with CSS classes, so the typography can be easily styled with CSS as part of the Add Listing Flow CSS Package.

Single Listing Character Counter

MyListing includes a feature for defining the number of characters a text-based field (Title, Description, etc.) can use, but there’s no ability to show the number of characters in use, which can frustrate the listing owner and possibly cause them to abandon their listing submission.

The Single Listing Character Counter Add-on for MyListing provides a better user experience, letting listing owners know how many characters they have used before they hit the submit button.

Image Upload Fields

Using the description area for image-based fields, a ‘See Image Guidelines & Tips’ link is included that triggers the corresponding Image Upload 101 Popup Template. This way, we can avoid adding a bunch of helper text to the description area, prevent the Submit Form from being too long, and avoid overwhelming listing owners with too much information all at once.

Each popup includes a button that triggers the Contact Form Popup Template should the listing owner need to send a support request.

By default, once a listing owner saves their listing, they only receive a message stating “Listing Saved Successfully,” which leads nowhere unless they know how to navigate to their dashboard and resume the listing. This provides a bad user experience.

To provide a better user experience, a quick solution is to use Loco Translate, along with the How To Use Loco Translate With MyListing guide, to wrap the ‘Listing Saved Successfully’ text with a link back to their Listings area of the MyListing Dashboard, as shown below.

<a href=”/my-account/my-listings”>Listing saved successfully</a>

An even better solution, as I’ve done with the Starter Sites, is adding more context for the customer, as shown below. The CSS to style this output comes from the Add Listing Flow CSS Packages.

Listing saved successfully! <a href=”/my-account/my-listings”>View/Edit Listing</a>

Miscellaneous Highlights

• MyListing Endpoint Menu (Analytics, Listings, etc.): Hidden during the Add/Edit Listing phase, as it’s a distraction, takes up unnecessary space, etc.
• Text-based Fields: Styled with CSS so it’s easier for listing owners to see where to input text.
• WP Editor Fields: The ‘Link’ and ‘Unlink’ options are hidden from the TinyMCE Toolbar, using CSS, so listing owners could still take advantage of some advanced formatting options but not add links.
• Checkbox Fields: Styled with CSS to appear as radio buttons to avoid the typical checkboxes on MyListing websites.
• Location Field (Dropdown Map Pin): The map pin icon shown in the dropdown when an address is entered is styled to match the website branding (i.e., accent color).
• Location Field (Lock Map Pin and Enter Coordinates): Using Loco Translate, these links are styled to appear as actual links, which isn’t the case by default.
• Location Field (Locator Icon): Styled this with CSS to match the website branding (i.e., accent color).
• Location Field (Coordinate Input): Styled with CSS so it’s easier for listing owners to see where to input the coordinates. I added a colored background (like for other text-based fields) and styled each coordinate input (latitude and longitude) as individual boxes. Without this styling, the input isn’t super clear and can confuse the listing owner.
• Location Field (Add Location Button): Styled with CSS to match the website branding (i.e., accent color).
• Work Hours Field (Add Hours Button): Styled with CSS to match the website branding (i.e., accent color).
• Work Hours Field (Copy to Selected Days button): Styled with CSS to match the website’s button styling.
• Single-Select Fields (Inconsistency Fixes): MyListing displays an icon next to results for single-select fields but not multi-select fields, so I also removed them from single-select fields. Additionally, the developers chose to use an icon (circle with a checkmark in the middle) that isn’t the greatest.
• Multi-Select Fields (Bug and Inconsistency Fixes): To resolve a design bug with MyListing, I styled these fields to match the styling of single-select fields.
• Menu and General Fields (Inconsistency Fixes): Styled to match the styling of other fields (Location, Work Hours, Social Networks, etc.) with a similar delete option.
• Side Navigation: If you compare my custom design in this area to typical MyListing websites, it becomes clear how I approached this differently. One aspect of particular note is that the active menu items match the styling of the section headings.

Complete Overall Design

The Add Listing Flow CSS Package provides the entire ‘Add Listing Flow’ (Add Listing Page and Submit Form) design in a single download.

The Starter Sites use the default cart and checkout page templates that come with MyListing. The Cart Page CSS Package and Checkout Page CSS Package improve the overall design and fix some inconsistencies found on these MyListing pages, eliminating the need to configure custom cart and checkout pages with Elementor.

The Starter sites are designed to work for any type of directory and consist of all kinds of Listing Types, rather than those for a particular niche. Customers can use the existing Listing Types as is or easily clone them and make adjustments for use within their particular niche.

MyListing Worksheets

The MyListing Worksheets were used to create the Listing Types. If you want to see precisely how I structured the taxonomies, fields, advanced search, etc., it’s all right there for you to reference (and even copy) from the worksheets.

Single Listing Character Counter

MyListing includes a feature for defining the number of characters a text-based field (Title, Description, etc.) can use, but there’s no ability to show the number of characters in use, which can frustrate the listing owner and possibly cause them to abandon their listing submission.

The Single Listing Character Counter Add-on for MyListing provides a better user experience, letting listing owners know how many characters they have used before they hit the submit button.

Listing Sharing

Have you ever visited a listing and clicked the ‘Share’ Quick Action? If you haven’t, you should. It’s not pretty! The Enhanced Content Sharing Modal Add-on is included and it modernizes the design.

When it comes to the ‘Mail Share Option,’ MyListing’s default pre-population of content in the email also requires improvement. The How to Adjust the Mail Share Option for MyListing Single Listings guide will help you improve this area.

Single Listing Contact Forms

Contact Form 7 has been replaced with Elementor Pro forms, and Single Listing Contact Form Templates have been created.

• Multi-step Form
• Progress Indicator
• Auto-Populated Fields (First Name, Last Name, Email Address, etc.)
• Privacy Policy & Terms Acceptance
• Privacy Policy & Terms Links (Open in New Tabs)
• Dynamic Message Contents (Recipient Side)

Want to use MyListing’s default contact form setup using Contact Form 7? No problem! It’s as simple as installing the Contact Form 7 plugin and taking the steps MyListing would typically require to use forms within Listings.

Similar Listings & Competitor Blocking

Listing Type > Single Page > Similar Listings

This feature is enabled and configured to increase the value of the higher-priced Listing Packages. “Competitor Blocking” has been implemented by leveraging MyListing’s built-in ability to display ‘Similar Listings’ based on the Listing Package purchased. In short, listing owners would need to buy Listing Package 3 or 4 (Monthly or Annual) to block their competitors’ listings from appearing within their listings.

Open External Links in New Browser Tab

Single Listings have some elements, like the Restaurant Menu block items, General Repeater block items, etc., that are external links, and there’s no way to ensure they open a new browser tab without custom code. The Open Single Listing Block Item Links in a New Browser Tab code snippet resolves this issue, assigning a ‘Block Class’ of ‘extlinknewtab’ to select Single Listing blocks with external links.

Miscellaneous Highlights

• Global Listing Type: The Global Listing Type searches/filters across all Listing Types. When users visit the Explore Page, the Global Listing Type is the default Listing Type selected, and this Listing Type can also be accessed from the primary navigation menu using the ‘All Listings’ menu item.
• Quick Actions & Tooltips:The Single Listing Quick Actions & Tooltips CSS Packages completely modernize the MyListing ‘Quick Actions.’
• Booking: See the ‘Booking’ build notes to learn about this feature.
• Google Reviews: See the ‘Google Review’ notes to learn about this feature.
• Multi-Vendor Marketplace: See the ‘Multi-Vendor Marketplace’ notes to learn about this feature.
• Review Listing Quick Action: To improve the user experience, I customized the icon styling and adjusted the background color for the ‘Review Listing’ submission message area.
• Countdown Block: Centered the block heading and better styled the countdown timer.
• Social Network Icons: Added some custom styling for hover and non-hover states.
• Reviews Tab: To improve the user experience, I customized the icon styling, adjusted the background color for the review submission container (form), and adjusted the message input.
• Mobile Optimized Table Blocks: Table data often looks wonky on mobile devices because there’s not enough space to display the label and value on the same line. I’ve addressed this issue with CSS.
• Embedded Weather: The ‘Hike’ and ‘Park’ Listing Types dynamically display current and upcoming weather conditions based on the location field.
• Embedded Trail Maps: The ‘Hike’ Listing Type dynamically displayed the AllTrails navigation map based on the ‘AllTrails Embed’ field.
• WP Editor Links Removed: For the reason outlined in the Remove the Link Options From Listing Types Fields that Use the WP Editor guide, listing owners won’t be able to insert links. To revert back to MyListing defaults, it’s as simple as removing the file I mentioned in the guide.

Complete Overall Design

The Single Listing CSS Packages give you all the Single Listing styling in a single download.

Cal.com (free) has been implemented to provide inspiration, education, and the initial configuration needed to jumpstart implementing this solution. With all the premium features of Calendly and then some, Cal.com has been dubbed the “Calendly Killer” throughout the tech world.

Another cool thing about this solution is that it’s open source, just like the software in the WordPress ecosystem (WordPress Core, Themes, and Plugins). Depending on how you integrate Cal.com with your site, you may not need anything more than a simple embed code.

Please note that Cal.com is an external booking solution you must procure for yourself. I’m simply informing you and giving you a jumpstart with this excellent solution that can add significant value and monetization options to your MyListing website.

EmbedReviews has been implemented to provide inspiration, education, and the initial configuration needed to jumpstart the implementation of this solution.

Club members get sub-accounts for their listing owners for up to 70% off, and if you retain at least one paying sub-account, you get a FREE EmbedReviews Pro account ($30 /month value!).

Depending on the MyListing website, providing the ability to embed Google Reviews is a great upsell to your customers. Sometimes, it’s a deal-breaker for listing owners who rely heavily on reviews to get customer leads.

Many “free” solutions are floating around regarding embedding Google Reviews. Still, they seldom work, and the teams behind them have no real incentive (unless there is a ‘freemium’ model in play) to develop new features, stay on top of security, provide quality support, etc. Would you be willing to jeopardize your reputation for a solution that might not endure over time?

Light and Dark Modes

EmbedReviews allows you to create widgets with different stylings that perfectly match your other website elements. For instance, website owners have the ability to switch their embedded widget between Light and Dark Mode simply by flipping a switch.

Google Reviews are displayed on Starter Site Home Pages and within Single Listings.

WooCommerce Product Vendors

By default, MyListing does not provide the ability to sell products on behalf of vendors as part of a multi-vendor marketplace. To sell vendor products, customers need to use the official WooCommerce Product Vendors plugin.

WooCommerce Product Vendors is the only multivendor marketplace solution officially supported and recommended by the MyListing developers.

Starter Sites include the latest version of WooCommerce Product Vendors (unlicensed), which will allow Starter Site customers to sell vendor products for several months before needing to purchase a license. Multi-vendor marketplace functionality has been fully implemented, and vendor-related products are included in the MyListing Product Package to give customers a head start.

MyListing website owners can take a commission for any vendor’s products sold on their website and upsell their Listing Packages to allow vendors to include a store within their listings. See the Build a Marketplace with MyListing and WooCommerce Product Vendors guide to learn more.

Vendor Store Template

Using Elementor, Vendor Store Templates have been created that dynamically apply to all Product Vendors. MyListing website owners can easily customize these templates using the flexibility of Elementor Pro.

Using WPCodeBox, the WooCommerce Products CSS Packages have been conditionally applied to the Vendor store pages.

Hidden Vendor Registration Form and Vendor Endpoint

The Vendor Registration form is hidden from the header navigation for those not logged into the website, and the Vendor Dashboard endpoint is hidden unless the user holds a vendor role (Vendor Admin or Vendor Manager).

Custom Login/Register Experience (Optional)

As part of the optional custom Login/Register experience for this Starter Site, those with a WooCommerce Product Vendor role (Vendor Admin, Vendor Manager, or Pending Vendor) can be redirected to any place on your website after they successfully log in. This is highly customizable, and the settings are easily changed to fit your needs.

• Vendor Admin and Vendor Manager: These are the possible roles the WooCommerce Product Vendors plugin gives to those who register as vendors on your website. Users with these roles are currently redirected to their store on your website after successfully logging in.
• Pending Vendor: The WooCommerce Product Vendors plugin gives this role to those registered as vendors on your website but awaiting approval. Currently, no redirections are set for this role, but you might consider redirecting to a custom landing page for your pending vendors.

Enhanced Design

WPCodeBox (Included and Licensed), allows those experienced with CSS to enhance the design of the WordPress Dashboard, including the WooCommerce Product Vendors Dashboard.

Vendor Registration Page Design

These pages are so basic that templates aren’t warranted, but you’ll likely want to tidy up the design of these pages with the Vendor Registration Page CSS Packages.

Listing Previews refers to elements (Listing Feeds, Quick Views, etc.) on a MyListing website where Listings can be previewed before clicking the Single Listing view. The Listing Previews CSS Packages are responsible for designing these previews.

Miscellaneous Highlights (All Listing Types)

• Custom Featured/Promoted Badges
• Custom Head Buttons
• Cohesive Design of Header Items
• Quick View Minor Visual Enhancements

Expert Listing Type

I’m often asked if I have (or if I’ve seen) some excellent designs for situations where the headshot within a listing is a focal point. Now, I’ll have some good news for folks, as I designed custom Listing Previews that apply only to the ‘Expert’ Listing Types.

The footer area of the Listing Preview Cards has been brought up within the primary area of the cards (Header Buttons, Content, etc.) to give the Listing Preview Cards a more cohesive appearance. This was done with CSS, so customers can easily undo this design if they choose or apply it to other Listing Types.

• Custom Card Height
• Cohesive Card Design
• Custom Footer Category Design
• Custom Footer ‘Bookmarked’ Icon Design

Default Explore Page

The Starter Sites have a main/default Explore page (/explore/) where all listings can be searched and filtered. This page also provides access to the Global Listing Type.

Listing Type Explore Pages

In addition to the default Explore page, there is an Explore for each Listing Type nested under the default Explore page (e.g., /explore/experts), where all listings for that particular Listing Type can be searched and filtered. Separate Explore pages have advantages regarding performance and give you the flexibility to do more with your Explore pages, such as assigning unique Explore templates, custom map skins, displaying ads, etc.

Listing Type Navbar

The Explore page Elementor widget (27 > Explore Listings) is configured on the default Explore page to display the available Listing Types using a Navbar. On most MyListing websites where the Navbar is used, the Navbar is centered on the screen with some very basic styling applied.

For enhanced design and positioning, the Navbar is placed at the far left of the screen and incorporates unique styling within the individual Navbar items, such as Listing Types, to create a more modernized look.

Want to change the Navbar back to center, go back to the default Navbar design altogether, or something else? No problem! All that’s needed is a very simple and quick change to the CSS.

Listing Comparison (Listing Preview Cards)

By default, when Listings are chosen for comparison, MyListing applies a box shadow around the Listing Preview Cards that doesn’t match the website’s overall branding. CSS is used to add a box shadow that matches the website’s overall branding in the light mode version, and for the dark mode version, a solid border that matches the branding has been added.

Want to change the Listing Comparison design back to the defaults or something else? No problem! All that’s needed is a very simple and quick change to the CSS.

Default Map Marker

MyListing applies a default marker image (white map pin on a black background) that shows up everywhere there is a map (Explore pages, Listing Location Block, etc.). You can override MyListing’s default marker image by specifying a custom image of your own on a per Listing Type basis, which is done using the ‘Default Map Maker’ option within Listing Types. 

The custom marker image is also used as the default logo for Listings in the MyListing Dashboard’s ‘Listings Endpoint.’ If a logo is added to a Listing, it overrides the default marker image.

Miscellaneous Highlights

• Custom Explore Tab Menu Styling
• Custom Explore Tab Taxonomy Styling
• Custom Event Date Selection and Work Hours Button Styling
• Custom Checkbox Styling

Complete Overall Design

The Explore Page CSS Package gives you all the Explore Page styling in a single download.

XML Sitemaps are for search engines, whereas HTML Sitemaps are for humans to use for navigation.

WordPress includes a basic XML Sitemap but lacks what’s needed to be effective and should be replaced. SEOPress Pro (Included and Licensed) takes over XML Sitemap duties, providing the required features.

To go along with the XML Sitemap, the Starter Sites include a Sitemap Page (i.e., HTML Sitemap) using Elementor’s Sitemap widget to pull in Pages, Posts, Listings, Categories, Regions, Store Products, etc. You can easily configure the sitemaps to pull in other information as well.

Another option, if you don’t want to use/build your page with Elementor’s ‘Sitemap’ widget, is to use the SEOPress HTML Sitemap feature. Once you turn it on, you can embed the provided shortcode into any page and adjust the design, whether you want to use Elementor or the WordPress Site Editor.

Listings Sitemap

By default, the Listings post type is locked by the MyListing developers, so it cannot be shown in an HTML Sitemap. The Unlock the Listings Post Type code snippet in place to address this issue.

HTML Sitemap Placement

Users should be able to access your HTML Sitemap from your website’s footer and the Starter Sites are set up that way.

Region Pages are essential for SEO (Search Engine Optimization) and the overall user experience for MyListing websites where listing locations are important. They keep users on your website and give them proper pathways to find region-specific content.

Highly Custom Permalinks

While MyListing offers some flexibility with the permalink structures and automation of that structure, from an SEO standpoint, there are still shortcomings. If you want to specify a Parent/Child taxonomy relationship in MyListing URLs, you’re out of luck without a custom solution.

Permalink Manager Pro (Included and Licensed) has been implemented to address this issue.

Enhanced Region Permalinks

By default, any time a user clicks on a Listing Region icon or name within the Listing Preview Card of a MyListing website, they are taken to an Explore page. If they are already on an Explore page, that page reloads and filters Listings for that Region. Since Explore pages have extremely thin content and, therefore, limited SEO value, there are better approaches regarding SEO in this area.

Permalink Manager Pro and the Enhanced Region Permalinks Add-on for MyListing have been implemented to address this issue. This solution combo lets you get granular with your permalinks and automate that process, allowing you to set up custom Region Page links, which is critical for SEO and provides a better user experience.

Miscellaneous Highlights

Custom Parent Region and Child Region Pages have been designed and implemented, and here are some of the general highlights.

• SEO-Friendly Heading Assignments (H1-H6)
• Child Region pages include a link to the corresponding Parent Region pages.
• Listing Feeds that are dynamically populated with Region-specific listings.
• Listing Feed designs are pulled from the Listing Previews CSS Packages.
• MyListing’s Listing Feed Widgets (Carousel and Grid) have design flaws by default, and I’ve fixed those with a combination of CSS and Elementor Listing Feed widget adjustments.
• Multiple CTA (Call-to-Action) widget designs to choose from.
• Recent Posts Block: A Recent Posts Block is configured to pull in blog posts and customers can easily adjust the Elementor ‘Posts’ widget to pull in from the desired source (Posts, Pages, Listings, etc.), the desired ‘Include By’ (Term, Author, etc.), and so on.
• Weather Forecast: The Weather Widget website (free) is used to create a light and dark mode version of the widget for each page, and it’s super easy to customize a weather widget that matches your brand/website and embed it on your website using Elementor’s ‘HTML’ widget.
• Region Icon Lists: There is a section at the bottom of the pages using Elementor’s ‘Icon List’ widgets to add columns of clickable links. The idea here is to link to Region Pages or other areas of the website that help the user experience.

Bulk Region Page Creation

If you want to add Region Pages in bulk, it’s easy to do with LPagery (Bulk Page Creator) and chances are most people can get away with the free version.

Page Region Connector

By default, MyListing website owners must edit each Region Page and each Listing Feed on that page to specify the desired region. The Page Region Connector Add-on for MyListing removes that burden by dynamically configuring Listing Feeds with regions, saving tons of time and labor costs.

Listing Category Pages are essential for SEO (Search Engine Optimization) and the overall user experience. They keep users on your website and give them proper pathways to find category-specific content.

Highly Custom Permalinks

While MyListing offers some flexibility with the permalink structures and automation of that structure, from an SEO standpoint, there are still shortcomings. If you want to specify a Parent/Child taxonomy relationship in MyListing URLs, you’re out of luck without a custom solution.

Permalink Manager Pro (Included and Licensed) has been implemented to address this issue.

Enhanced Listing Category Permalinks

By default, any time a user clicks on a Listing Category icon or name within the Listing Preview Card of a MyListing website, they are taken to an Explore page. If they are already on an Explore page, that page reloads and filters listings for that category. Since Explore pages have extremely thin content and, therefore, limited SEO value, there are better approaches regarding SEO in this area.

Permalink Manager Pro and the Enhanced Listing Category Permalinks Add-on for MyListing have been implemented to address this issue. This solution combo lets you get granular with your permalinks and automate that process, allowing you to set up custom Category Page links, which is critical for SEO and provides a better user experience.

Miscellaneous Highlights

• SEO-Friendly Heading Assignments (H1-H6)
• Listing Feeds that are dynamically populated with Category-specific listings.
• Listing Feed designs come from the Listing Previews CSS Packages.
• MyListing’s Listing Feed Widgets have design flaws by default, and those are fixed with CSS and Elementor Listing Feed widget adjustments.
• Multiple CTA (Call-to-Action) widget designs to choose from.
• Recent Posts Block: A Recent Posts Block is configured to pull in blog posts and customers can easily adjust the Elementor ‘Posts’ widget to pull in from the desired source (Posts, Pages, Listings, etc.), the desired ‘Include By’ (Term, Author, etc.), and so on.
• Region Icon Lists: There is a section at the bottom of the pages using Elementor’s ‘Icon List’ widgets to add columns of clickable links. The idea here is to link to Region Pages or other areas of the website that help the user experience.

Bulk Category Page Creation

If you want to add Region Pages in bulk, it’s easy to do with LPagery (Bulk Page Creator) and chances are most people can get away with the free version.

By default, MyListing’s Author Archive (i.e., Author Page) template is very basic, and you must rely on code customizations to adjust the design and add functionality. Additionally, incorrect messages are displayed, and there’s the inability to display basic things like blog posts (which are crucial to authors).

Using Elementor Pro (Included and Licensed), customers have the full power and flexibility of Elementor to build archive pages any way they want without requiring custom code.

The Author Page Templates provide completely dynamic author pages regarding their design and content.

They currently apply to all authors, but using Elementor’s Display Conditions, they can be easily adjusted to determine which authors the template applies to. Want to apply a template to one author and a different template to others? No problem!

Customers can create additional Author Page Templates that apply to all authors, a majority of the authors, specific authors, etc. by simply cloning an Author Page Template and adjusting it as desired.

Dynamic Content for Elementor

Dynamic Content for Elementor (Included and Licensed) plays a major role in displaying dynamic data for the author pages. This plugin provides MyListing website owners with numerous design and functionality options for their entire website, and I have only begun to explore the full potential of this powerful plugin.

Dynamic Elements

• Author Name and Photo: Elementor’s ‘Author Box’ widget pulls this information from the author’s user account.
• Author Bio: Elementor’s ‘Text Editor’ widget pulls this information from the author’s user account.
• All Posts: Dynamic Content for Elementor’s ‘Dynamic Posts’ widget pulls in posts from the author and uses the Loop Item – Categories Template to apply the design to the post block.
• Latest Posts: Everything here is the same as with ‘All Posts,’ but with a special mention, which is to say you’ll want to configure this particular post grid to pull in the latest posts using a recent period (days, weeks, months, etc.). This is easily done, and the ‘Dynamic Content for Elementor’ plugin makes it possible.
• Listings: Dynamic Content for Elementor’s ‘Dynamic Posts’ widget pulls in listings from the author, and the design for these elements is done directly within the ‘Dynamic Posts’ widget.

Encouraging listing owners to sign up for your higher-tier Listing Packages should be one of your top priorities regarding monetization.

The Reach Further Page shows listing owners use your platform to its fullest so they can reach more customers. This page is reached from the Get Started Page and the footer (direct link or sitemap link).

Reach Further Page Redirects

The Starter Sites are configured to redirect to the Reach Further Page based on specific products that have been purchased. Listing Packages 1, 2, and 3 are configured so customers are redirected to the Reach Further Page after checkout, in hopes they see the value in signing up for Listing Package 4.

Redirection is accomplished using the Create Unique Redirects Based on the Purchased Product code snippet, and with this in place, website owners can set a unique redirect on any product they want, not just Listing Packages.

Miscellaneous Highlights

• Listing Promotions: Current and prospective customers receive real-world education and steps for promoting listings.
• Google Reviews: Current and prospective customers receive real-world education and steps for embedding Google Reviews into their listings.
• Product Store: Current and prospective customers receive real-world education and steps for turning their listings into a marketplace.
• Booking: Current and prospective customers receive real-world education and steps for embedding Cal.com booking calendars into their listings.
• Verified Badge: Current and prospective customers receive real-world education and steps for getting their listings verified.

The How It Works Page serves as a comprehensive guide with visuals, whereas the Get Started Page provides a more concise and direct approach.

Claim Listing CTA

Triggers the Claim Listing Popup Template, where users can use MyListing’s ‘Quick Search’ to search for published listings on the platform and then claim them. By default, ‘Quick Search’ doesn’t work within Elementor popups, so the Allow MyListing Quick Search in Elementor Popup code snippet was added.

Text is included with a link to trigger the Add Listing Popup Template in case there are no published listings for the user to claim. By default, there isn’t a way to close an Elementor popup that calls another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

To add/remove Listing Types, edit the Elementor Shortcode widget. If customers use Elementor’s Navigator feature, the widget is labeled as ‘ML Quick Search.’ 

Add Listing CTA

Triggers the Add Listing Popup Template, where users can start adding a listing to the platform. 

Text is included with a link to trigger the Claim Listing Popup Templat in case the user wasn’t aware that they might have published listings on the platform that they could claim. By default, there isn’t a way to close an Elementor popup that calls another Elementor popup, so the How to Close an Elementor Popup That’s Used to Open Another Popup code snippet was added.

When editing the Listing Types, the important thing is to adjust the ‘Link’ field of the Elementor Icon Box widgets to include the necessary URLs of the website.

The default home page template is what potential Starter Site customers are going to see the most. So, I feel it’s important to mention there is a pretty big challenge that comes with building a home page that could work for any niche (e.g., directory type).

Hopefully, I’ve lived up to the challenge, but please keep in mind that the idea behind the Starter Sites is not to be niche-specific (e.g., Fitness, Weddings, etc.), but rather to be unopinionated and easily transformed into any type of directory.

While I specifically mention the default home page, having the same understanding for all of the home page templates is requested.

Basic Search Form

The ’27 > Basic Search Form’ Elementor widget has been added, and only the Global Listing Type has been specified.

The idea is for users to use a single form to search across all listings., and since these forms cannot be designed with Elementor, Basic Search Form CSS Packages were created to enhance their appearance and address shortcomings.

Single Listing Enhanced Keyword Search

By default, MyListing cannot search an entire listing’s content using the ‘General Search’ (wp-search) field. The Single Listing Enhanced Keywork Search add-on for MyListing addresses this limitation so that users can find any information within a listing.

Popular Category Icons

The idea is to provide an elegant way to inform people about popular categories without taking up too much space. For the icons, Elementor’s ‘Icon Box’ widgets were used rather than the ‘Icon’ widget, as this gives website owners more flexibility.

Dynamic.ooo (Included and Licensed) adds tooltips to the icons. With a couple of mouse clicks, customers can easily apply tooltips to any Elementor-based widget using this powerful plugin.

Miscellaneous Highlights

• Listing Feeds: Listing Previews CSS Packages provide the design since MyListing doesn’t give you a way to design the feeds through the ’27 > Listing Feed’ widget.
• Reach Further Nested Carousel: Enabling Elementor’s ‘Nested Elements’ feature unlocks a special ‘Carousel’ widget that can nest multiple widgets within each “slide.” The Reach Further Section – Nested Carousel leverages this feature to show the ‘Reach Further’ information using limited space.
• CTA Cards Section Template
• Featured Regions Section Template

Basic Search Form

The ’27 > Basic Search Form’ Elementor widget has been added, and all of the Listing Types from the Starter Sites have been specified. This is the more traditional way of configuring this form, and it’s what most people are used to seeing when looking at MyListing websites, but the design is much more modern than what you’re used to seeing.

Since these forms can’t be designed with Elementor, Basic Search Form CSS Packages were created to enhance their appearance and address shortcomings.

Single Listing Enhanced Keyword Search

By default, MyListing cannot search an entire listing’s content using the ‘General Search’ (wp-search) field. The Single Listing Enhanced Keywork Search add-on for MyListing addresses this limitation so that users can find any information within a listing.

Listing Feeds

For this particular page style, Listing Feeds weren’t used, but they can be easily added and optionally styled with the Listing Previews CSS Package. This is a unique approach because not everyone needs Listing Feeds and some people want a MyListing website that doesn’t look like everyone else’s.

Content Switcher

Sections 1 and 3 have a content switcher built with Elementor’s ‘Tabs’ widget. The switchers can be configured as desired, but what’s outlined here are the thoughts behind how they are currently configured.

For the Section 1 switcher, Listing Feeds have been added to each side of the switcher, under Tabs 1 and 2, and styled with the Listing Previews CSS Packages. The idea here is to display the top-rated listings on one side and the latest listings on the other.

For the Section 3 switcher, the idea is to help with the user journey by essentially adding the Get Started Page contents. In Tab 1 (List), there are CTAs to guide listing owners, whereas in Tab 2 (Explore), there are CTAs to guide both listing owners and regular users.

Basic Search Form

The ’27 > Basic Search Form’ Elementor widget has been added, and all of the Listing Types from the Starter Sites have been specified. This is the more traditional way of configuring this form, and it’s what most people are used to seeing when looking at MyListing websites, but the design is much more modern than what you’re used to seeing.

Since these forms cannot be designed with Elementor, Basic Search Form CSS Packages were created to enhance their appearance and address shortcomings.

Single Listing Enhanced Keyword Search

By default, MyListing cannot search an entire listing’s content using the ‘General Search’ (wp-search) field. The Single Listing Enhanced Keywork Search add-on for MyListing addresses this limitation so that users can find any information within a listing.

Listing Feeds

To achieve the design, the Listing Previews CSS Packages are needed, as MyListing doesn’t give you a way to design the feeds through the ’27 > Listing Feed’ widget.

Animated Gradient Heading

The hero section includes an animated gradient heading using Elementor’s Animated Headline widget. This widget doesn’t allow for gradient design, so CSS was added to the widget (Widget > Advanced Tab > Custom CSS).

If the ‘Animated Headline’ widget is going to be used throughout the website, the best practice is to use a code snippet solution for maintainability and performance. Otherwise, the CSS added directly to the widget can be left where it is.

Gradient Headings

Gradient headings are placed throughout this template using Elementor’s ‘Heading’ widget. This widget doesn’t allow for gradient design, so CSS was added to the widget (Widget > Advanced Tab > Custom CSS).

If the gradient headings are going to be used throughout the website, the best practice is to use a code snippet solution for maintainability and performance. Otherwise, the CSS added directly to the widget can be left where it is.

Carousel

Elementor’s ‘Carousel’ widget is used in Section 4, and each carousel slide increments the accent color to match the gradient heading design.

Listing Feeds

The listing feeds in Sections 1 and 3 are styled by the Listing Previews CSS Package.

MyListing websites rely heavily on Transactional Email to communicate order confirmations, password resets, and account alerts. Setting up transactional email correctly is essential to prevent email from ending up in SPAM/Junk folders or not being received entirely.

For your convenience, MailPoet is included as the recommended transactional email solution with a generous free plan to get you started. MailPoet needs to be configured by following the MailPoet for Better MyListing & WooCommerce Email Marketing guide.

Communication Pages

For those wanting to use MailPoet for non-transactional email (e.g., newsletters, product/service communication, etc.), custom pages (Email Subscriptions, Email Subscription Confirmation, and Email Subscription Updates) have been added and assigned within MailPoet.

The MailPoet Template Pack provides all of the custom MailPoet pages in a single download.

MailPoet Template Pack Instructions

1. Download the template pack.
2. Extract the templates from the pack.
3. Import the templates into your website.
4. Create each communication page by simply importing the corresponding template into the page.
5. Configure MailPoet with the page assignments.

MailPoet CSS Package

The form on the Email Subscriptions page needs some design help, and that’s provided by the MailPoet CSS Packages (free).

Affiliate programs are essential for businesses looking to boost sales and brand awareness without a hefty upfront cost. They create a network of partners who promote your products, reaching audiences you might not access alone.

Every time an affiliate drives a sale, they earn a commission, making it a win for both sides. This system encourages affiliates to push harder, knowing they’ll benefit directly from their efforts.

For businesses, affiliate programs are a smart, cost-effective strategy because you only pay for actual results. By tapping into affiliates’ diverse reach and creativity, you can expand your market presence and enhance your credibility.

Affiliate Program Page Templates are available, which include real-world content and custom design that matches the overall brand.

Partnerships are essential for growth and success, as they provide access to new markets and broaden your reach. They assist in cutting expenses, enhancing productivity, and contributing diverse skills.

Partner Page Templates are available, which include real-world content and custom design that matches the overall brand.

Want to run a sale? That’s where the Sale Page Template comes into play, which includes a countdown timer, FAQ section, and custom design that matches the overall brand.

Running viral giveaways can explode your brand’s reach fast. They encourage shares, boost engagement, and attract new followers. People love free (or discounted) stuff, making them more likely to interact.

You can grow your audience and customer base without spending on ads. Plus, it builds excitement around your products or services. Do you want to increase your signups or gain more traction on social media? A high-energy giveaway can deliver serious results.

RafflePress is available to Starter Site customers, as well as the Giveaway Campaign Submission Page Template.

Testimonial Block Templates

Newsletter Block Templates