Fit

As I build out Starter Sites, I document the process here in ‘Build Notes’, which provides several benefits. This makes the building of Starter Sites take longer, but I feel it provides better service than simply selling a product.

• Starter Site customers can better understand what I’ve done and easily undo or make changes as desired.
• People can learn how to replicate certain parts of a Starter Site or replicate an entire Starter Site.
• Links to any resources (Product, Guide, etc.) that are part of a Starter Site build are provided.

My approach to these builds empowers you to take a Starter Site, make it your own, and launch it. You will not be reliant upon me (Ryan) or another developer.

• Everything is modular. Don’t like something? Simply remove it, and you’re back to the default MyListing design, functionality, etc.
• No unruly custom development. You won’t have to track down custom code, and you won’t have to rely on a developer for anything. What little custom code I add is centralized within the WPCodeBox plugin (licensed for you), where you can easily manage everything from one spot.
• Reduced plugin reliance. You won’t be overwhelmed by plugins that you need to maintain and educate yourself on. I give you the core solutions that provide a solid foundation to build upon, with performance, SEO, and more in mind.

You will get a complete picture of this Starter Site between the walkthrough video, viewing the live website, and these notes.

A lightweight and lighthearted 404 Page was created to show the business/brand’s personality and to ease any tensions that may arise from users having difficulty with the website due to broken links.

Complete the Overall Solution

• Fit – 404 Page

This is one of those areas of a MyListing website where people often ask for help customizing, and rightfully so. Have you ever looked at the default Author pages? They are very basic, with limited functionality.

While I set out to make the Author page look and function better, I had no idea how big of a rabbit hole I was about to go down.

In the end, I put a lot of work not only into the design but also ensuring that Author pages were highly-dynamic to make it easier for website owners while allowing Authors to not only display their posts but also Listings on the platform.

Author Page Highlights

• Mobile Responsive Design
• Dynamic Data (Company Name, Job Title, Certifications, LinkedIn Link, and more.)
• Dynamic Visibility
• Custom Post Grids (Posts and Listings)
• Custom CTAs
• Gradient Elements
• Custom One-Line Subscribe Form
• and more.

Complete the Overall Solution

• Fit – Author Page
• Fit – Profile Page
• Completely Customize the MyListing Login / Registration Experience with Actions Pack for Elementor
• How to Build Custom Author Pages for MyListing Websites With Elementor

I created a few different Post feed designs using the Elementor Posts Widget. These feeds pull from placeholder Categories I added to show a real-world example of how things could be laid out for navigation and SEO purposes.

There are minimal differences between the Blog Page template and the Blog Category Page template. Just something to keep in mind when you think about which templates you need to download.

• The Blog Page includes links to Category pages to view all posts under that Category, while the Blog Category Page has those links removed for obvious reasons.
• The ‘Popular Topics’ CTAs at the top of both templates have different headings since we deal with Categories on one and Sub Categories on the other.

 Blog Page & Blog Category Page Highlights

• Mobile Responsive Design
• Dynamically Added Post Title
• Gradient Elements
• Custom Social Share Design
• Custom CTA Design
• Custom Post Feeds
• Custom Newsletter Subscription Form
• SEO-Friendly Heading (H1, H2, …) Assignments
• and more.

Complete the Overall Solution

• Fit – Single Blog Post
• Fit – Blog Page
• Fit – Blog Category Page

The default MyListing Cart page template is used, and CSS is applied to improve the overall design. Depending on the particular project, this approach potentially eliminates the need to configure a custom Cart page with Elementor.

• Light and Dark Modes
• Gradient Buttons, Gradient Rating Starts, and more.
• Loco Translate is used to “translate” ‘Coupon code’ to ‘Enter Coupon…’.
• The coupon code entry has been centered, providing a more cohesive design.
• Added a border and spacing between Related Products and Cart Totals for a more apparent distinction.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, Cart pages can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to the Cart page. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Complete the Overall Solution

• Fit – Cart Page (Dark Mode) CSS Package
• Fit – Cart Page (Light Mode) CSS Package

The default MyListing Checking page template is used, and CSS is applied to improve the overall design. Depending on the particular project, this approach potentially eliminates the need to configure a custom Checkout page with Elementor.

• Light and Dark Modes
• Gradient Buttons, Gradient Coupon Entry, and more.
• Loco Translate is used to “translate” ‘Click here to enter your code’ to ‘Click here’.
• The coupon code entry has been centered, providing a more cohesive design.
• Improved Coupon Code Entry Design.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, Checkout pages can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to the Checkout page. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Complete the Overall Solution

• Fit – Checkout Page (Dark Mode) CSS Package
• Fit – Checkout Page (Light Mode) CSS Package

Using Elementor’s built-in ‘Coming Soon’ feature, you can easily use the included custom-designed ‘Coming Soon’ template and eliminate the need for a Coming Soon/Maintenance plugin.

Complete the Overall Solution

• Fit – Coming Soon Page

Code Snippets are included to provide custom styling (i.e., CSS) and custom functionality (i.e., PHP, JavaScript, etc.), and all snippets are implemented in a responsible, performance-minded, and modular fashion. I could save a ton of time by cutting corners, but that’s not my style.

• Responsible: Unlike some designers/developers that add ‘!important’ declarations to their CSS to force it upon you, I spend the extra time to ensure these declarations are only used when necessary. I even take the time to report the overuse of ‘!important’ declarations in hopes developers will clean up their code so it’s lighter and follows best practices.
• Performance: All code snippets are only applied where they should be. This keeps the potential for conflicts to a minimum and keeps you from adding unnecessary code bloat to your website.
• Modular: All code snippets are modular. They can easily be toggled ON/OFF for testing, troubleshooting, removal, etc.

Rest assured that these code snippets do not create any reliance on me (Ryan) or a developer. 

Not feeling a particular design or function? No worries. Toggle OFF or remove the code snippet and let the default styling/functionality of the MyListing theme take over.

CSS & CSS Packages

Any CSS added to this Starter Site is applied in one of two ways.

• Elementor Templates: This CSS is added directly to templates (Advanced Tab > Custom CSS) in some cases, which has several benefits. When customers obtain a template, the CSS is included, saving time and reducing the number of downloads needed to recreate aspects of this Starter Site. Placing CSS directly into templates helps with performance, reducing the overall CSS added to the site.
• CSS Packages: This CSS is added WPCodeBox and is grouped together logically with performance and management in mind. Rather than applying CSS to the entire site, WPCodeBox’s ‘Display Conditions’ feature is used to apply CSS only where needed, which speeds up page loads.

Code Snippet Management

Most every code snippet added to this Starter Site is applied using WPCodeBox, which provides many benefits over other methods of applying code snippets.

I use WPCodeBox on every website I build, and it’s one of my favorite plugins.

• Overall Performance (Reduce Plugins, Conditional Code Snippet Loading, and more.)
• Code Snippet Management (Cloud Repository, Searching, Code Snippet Folders, and more.)
• Code Snippet Troubleshooting (Easily toggle ON/OFF code snippets to identify faulty code.)
• and so much more!

All Starter Sites include a licensed copy of the WPCodeBox plugin. If you wish to unlock the ability to use the Cloud Repository and sync your code snippets between your websites, you will need to purchase your own WPCodeBox license.

MyListing Website Care clients get WPCodeBox for FREE, while MyListing Club members get 25% OFF WPCodeBox.

As MyListing website owners/builders, we are limited in what we can do regarding the design and functionality of the Login/Registration process. So, I set out to do something about that.

Please look at the Completely Customize the MyListing Login / Registration Experience with Actions Pack for Elementor guide for full details.

What You Will Gain

• You will have the full power of Elementor to completely customize the design and functionality of MyListing’s Login and Registration experience, including custom forms, URL redirections, Social Logins, unique pages for Login, Registration, Password Recovery, and more.
• Registration options, like user verification, adding custom fields, and URL redirection, will open up to you.
• You can fully customize the Social Login experience by adding more login providers (LinkedIn, Twitter, etc.), using custom buttons, applying overall custom styling, and more.
• You can eliminate plugins and/or code snippets that provide URL Redirection functionality (general login, login by role, registration, etc.), plugins for User Verification, and more.

Notes

• Customer: This is the default MyListing role, and users with this role are currently redirected to the Explore page after successfully logging in.
• Subscriber: This is the role MyListing gives those who have signed up for a Listing Package/Listing Subscription. Users with this role are currently redirected to the Reach Further page after successfully logging in.
• Vendor Admin and Vendor Manager: These are the possible roles the WooCommerce Product Vendors plugin gives out to those who have registered to be a vendor on your website, and users with these roles are currently redirected to their store on your website after they successfully log in.

Complete the Overall Solution

• Fit – Login Page
• Fit – Register Page
• Fit – Lost Password page

Typically, this is one of the core pages of a MyListing website, as it provides the functionality and design you configure within the Search Forms area of a Listing Type.

• Light and Dark Modes
• Gradient Headings, Buttons, Active Indicators, Proximity Slider, and more.
• Taxonomy Card Gradient Overlays and Custom Hover Actions
• Custom Checkboxes
• Custom Image for ‘No Listings Matching’ Scenarios
• Custom Map Control Styling
• Custom Map View / List View Button
• Improved Checkbox Layout on Mobile Devices

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, Explore pages can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to Explore pages. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Complete the Overall Solution

• Fit – Explore Page (Dark Mode) CSS Package
• Fit – Explore Page (Light Mode) CSS Package
• Fit – Listing Previews (Dark Mode) CSS Package
• Fit – Listing Previews (Light Mode) CSS Package

The default MyListing footer was replaced with a custom footer built with Elementor Pro, giving the website owner a lot of flexibility regarding where and how to display a footer using Elementor Display Conditions.

Elementor footer templates are far more powerful, flexible, and easier to work with compared to the default options that MyListing provides.

• Gradient Menu Items (Active and Hover)
• Apple and Google Store App Graphics
• One Line Subscribe Form

Complete the Overall Solution

• Fit – Footer

This page serves as a starting point primarily for new users of a MyListing website, whether signing in or signing up, searching the platform for existing Listings they might want to claim, learning how to gain more exposure through Listing Promotions, and more.

If you look at a MyListing demo website, for example, you’ll see that without this page, the only starting point for potential Listing owners is the ‘Add Listing’ CTA (Call to Action) in the header area (button or menu link).

This leaves a MyListing website user needing guidance. You, as the website owner, need to take advantage of key opportunities to educate and provide more value to potential customers.

Building a ‘Get Started’ page with Elementor opens a world of possibilities for design and functionality.

One thing of note here is the ‘Claim Listing’ CTA, which calls up the ‘Fit – Claim Listing Popup’. At the time of this writing, a code snippet is required to get the MyListing Quick Search to work within an Elementor popup.

• Mobile Responsive Design
• Custom CTAs
• Gradient Elements
• Custom Claim Listings Search (Popup and Section)
• Device Mockup Inspiration
• Real World Upsell Content (Promoted Listings, Google Reviews, and Product Store.)
• and more.

Complete the Overall Solution

• Fit – Get Started Page (Dark Mode)
• Fit – Get Started Page (Light Mode)
• Fit – Claim Listings Popup
• Allow MyListing Quick Search in Elementor Popup

I went with the default MyListing header and added some CSS to spruce things up, such as the gradient Quick Search elements, gradient styling of nav items (hover and active, mobile menu customization, and more.

To get users into the ‘Custom Login / Registration Experience’, the Login/Register links route to the custom Login page and custom Register page.

• Mobile Responsive Design
• Dark Mode Mobile Menu
• Gradient Elements
• and more.

Complete the Overall Solution

• Fit – Global CSS Package
• Fit – Dashboard Menu
• Fit – Login Page
• Fit – Register Page
• Fit – Lost Password page

The main highlight of this page is the Listing Feed Carousels. I used some CSS to give the Listing Preview Cards a clean look and used a code snippet to autoplay the feeds.

• Custom Listing Feed Carousels with Autoplay
• EmbedSocial Google Reviews
• Mobile Responsive Design
• Gradient Elements
• Real World Content
• and more.

Complete the Overall Solution

• Fit – Home Page
• Fit – Listing Feeds CSS Package
• Listing Feed Carousel Autoplay

Like the ‘Get Started’ page, this page serves as a starting point primarily for new users of a MyListing website.

I think of this page as where people go first before they decide they are ready to “Get Started”.

Perhaps this page and the ‘Get Started’ page could be combined since there is a bit of redundancy. For now, I see this page as more of a step-by-step guide, whereas the ‘Get Started’ page is more of an abbreviated version that gets right down to the point.

One thing of note here is the ‘Claim Listing’ CTA, which calls up the ‘Fit – Claim Listing Popup’. At the time of this writing, a code snippet is required to get the MyListing Quick Search to work within an Elementor popup.

• Mobile Responsive Design
• Gradient Elements
• Custom Claim Listings Search (Popup)
• Call Outs to the ‘Fit – Contact Form Popup’
• Device Mockup Inspiration
• Real World Content
• and more.

Complete the Overall Solution

• Fit – How It Works Page (Dark Mode)
• Fit – How It Works Page (Light Mode)
• Fit – Contact Form Popup
• Fit – Claim Listings Popup

This refers to elements (Listing Feeds, Quick Views, etc.) on a MyListing website where Listings can be previewed before clicking into the Single Listing view.

Aside from adding custom design, one of the goals here is to provide a better experience on smaller mobile devices, specifically for the Quick Views feature.

Another unique design element is the “merging” of the Listing Preview Card and Preview Card Footer, giving more of a cohesive appearance that some try to achieve with 3rd party plugins.

• Light and Dark Modes
• Quick View Mobile Responsiveness
• Custom Promoted and Featured Listing Badges
• Listing Preview Card and Preview Card Footer “Merge”
• Gradient Bookmarked/Favorited Action
• Loco Translated ‘Add to Comparison’ to ‘Compare’.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, Listing Previews can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to areas where Listing Previews may show up, such as Explore pages and pages where the Listing Feed widget is used. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Complete the Overall Solution

• Fit – Listing Previews (Dark Mode) CSS Package
• Fit – Listing Previews (Light Mode) CSS Package

The MyListing dashboard has been designed to provide a cleaner look, clearer calls to action, fixes to existing design flaws, and unique styling down to the most granular details. Loco Translate is used to give the text a unified look.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, the MyListing Dashboard can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to the MyListing Dashboard areas. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Analytics Endpoint

• Custom Stat Box Styling
• The ‘Views” and ‘Unique Views’ boxes match the colors of the corresponding ‘Visits’ chart.

Listings Endpoint

• Custom Stat Box Styling
• Custom Listing Cards
• Custom Listing Card Actions (On Hover)
• Custom Listing Promotion Modal w/ Educational Component
• Using the Child Theme, a custom ‘marker.jpg’ image was created, which serves two purposes.
  • Acts as the default Listings logo for the Listings endpoint.
  • Overrides all map marker images to apply consistent branding.

Promotions Endpoint

• Designed a custom ‘dark mode’ card.
• The promotion package link and icon have a matching gradient.
• Unlike the default design, less emphasis is placed on canceling a package by removing the focus on the cancel button.
• Used Loco Translate to change the button text from ‘Cancel Package’ to ‘Cancel’.

Custom Listing Promotion Modal w/ Educational Component

By default, when a Listing Owner uses the ‘Promote’ action from the Listing card, they are presented with a very basic design and very limited info about what Listing Promotions entail.

For this Starter Site, the Promote Listing modal has been custom-designed and includes a link to an educational page (e.g., Platform 101) where Listing Owners can learn more about ‘Promoted Listings’.

Favorites Endpoint

• Designed a custom ‘dark mode’ card.
• Used Loco Translate to change all instances of  ‘Bookmark(s)’ to ‘Favorite(s)’, including the page UR/slug.
• Used Loco Translate to change the action text from ‘View Listing’ to ‘View’ and ‘Remove Favorite’ to ‘Remove’.

Orders Endpoint

• Custom Design to Match Branding
• Gradient Title Underlines

Subscriptions Endpoint

• Button Spacing Fix
• Gradient Title Underlines

Account Endpoint

• Added a code snippet that merges the ‘Address’ and ‘Payment Methods’ with the ‘Account’ endpoint to provide a cleaner dashboard.
• Loco Translate makes the ‘Change Password’ placeholder text make more sense to the end user.
• Remove phone number and email icons to provide a consistent and more professional look.

Complete the Overall Solution

• Fit – MyListing Dashboard (Light Mode) CSS Package
• Fit – MyListing Dashboard (Dark Mode) CSS Package

If I were using this Starter Site myself or implementing it for a client, additional performance optimization steps would be taken.

Without knowing what a customer will do (CDN, web hosting, plugins, etc.) after purchasing a Starter Site, it’s just not practical to try and account for everything.

I’ve added as much performance optimization value as possible while still feeling like I’ve provided “safe” settings.

Code Snippet Conditions

All code snippets are implemented in a performance-minded fashion by only applying them where they should be rather than loading across the entire website.

Listing Type Revisions

Using the MyListing Child Theme, Starter Sites have their Listing Type revisions reduced from 15 (default) to 5 to reduce storage in the database.

Perfmatters Base Configuration

The Perfmatters plugin is included with every Starter Site, and I’ve configured it with base settings that are a safe and a great starting point for 99% of MyListing websites.

System Fonts

Switching to a system font stack can be one of the most significant factors responsible for speeding up your MyListing website, as system fonts require no download time by the browser, and as a bonus…system fonts look great!

I like to build custom, front-facing Pricing pages so that MyListing website users can see the costs associated with adding a Listing right away without going through the ‘Add Listing Flow’.

Rather than design custom Pricing tables, I use the ’27 > Package Selection’ Elementor widget to get a jump start on the tables. This has the added benefit of producing tables that look identical to those found within the ‘Add Listing Flow’.

Well-documented and organized CSS was used to round out the design.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, a CSS Package was created and applied to both the Pricing Pages (Front-Facing/Info and MyListing’s Pricing Page) and the Submit Form (Add Listing Page).

This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

The CSS is modular. If you only want to use the CSS for Pricing Pages and not the Submit Form, or vice versa, I made it super easy to pull out the CSS you don’t want.

Pricing Page Highlights

• Nearly identical Pricing pages were designed to provide users with a seamless and cohesive experience.
• 4-column Pricing table layout.
• Each Pricing item has a unique and custom design to reflect the gradient colors of the website’s branding.
• Each Pricing item has independent hover styling to invoke the gradient branding colors.
• Custom Background Image
• Custom Verified Badge (Fit 4 Package)
• Loco Translate is used to inject and style the heading of the default MyListing Pricing page.
• and more.

Submit Form (Add Listing) Highlights

• Custom Background Image.
• Custom Side Navigation.
• Gradient Buttons, Icons, and Map Pin Icon.
• Submit Form animations have been disabled.
• Loco Translate is used to change the ‘Your Listing Details’ heading to ‘Build Your Listing’ and insert a link (‘Need Help? Click Here.’)
• Loco Translate is used to replace the ‘All in “XYZ”‘ wording for the ‘City’ field (Type = Term Hierarchy) to read ‘Choose a city in “XYZ”. This was done to get around the issue where Term Hierarchy fields now force you to choose a child term.
• The ‘Need Help? Click Here.’ link calls up the ‘Fit – Contact Form Popup’ template so that Listing Owners can submit questions.
• Onboarding Experience Field
• and more.

Complete the Overall Solution

• Fit – Pricing Page
• Fit – Contact Form Popup
• Fit – Pricing Pages & Submit Form CSS Package
• Fit – Listing Packages

The Pricing Table Switcher Add-on for MyListing has been added to give customers more options and jumpstart website owner sales so they can generate more predictable income.

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.

Without this add-on, customers might not know that you have additional pricing options unless they scroll down the page. With this add-on, customers can instantly toggle between monthly and annual pricing options.

Have something other than monthly or annual pricing options? No problem! You can adjust the add-on to match the wording on your particular MyListing website.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, the code snippets that make up this add-on are applied only to the ‘Add Listing’ page.

This approach helps with optimization by only applying the code where it needs to be applied rather than the entire website.

Complete the Overall Solution

• Pricing Table Switcher Add-on for MyListing

This package includes all of the Woocommerce-based products used to build the Fit Starter Site.

MyListing website owners that use the WooCommerce Subscriptions plugin will be interested in this package, as it assists with upgrading/downgrading Listing Subscriptions.

• Listing Subscription Products
• Listing Subscription Group Product
• Listing Promotion Products
• Fit Store Products
• Fit Vendor Products

Complete the Overall Solution

• Fit – Products Package
• Fit – Pricing Page CSS Package
• Fit – Pricing Page

SEO (Search Engine Optimization) & User Experience

These pages are important for SEO (Search Engine Optimization) and the overall user experience, keeping users on your website and giving them proper pathways to find region-specific content.

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

Also, by default, any time a user clicks on a Region taxonomy icon within a MyListing website, they are taken to an Explore page. There are better approaches to SEO, since the Explore pages have little-to-no SEO value in terms of ranking, and they offer very thin content.

I use Permalink Manager Pro and the MyListing Add-on for Permalink Manager Pro to address these issues.

This solution combo allows you to 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.

I’ve designed and implemented Parent Region and Child Region pages for you to use or pull design elements from.

• Dynamically Populated Headings (H1, H2s, and H3s) for Region-specific info.
• SEO-Friendly Heading (H1, H2, …) Assignments
• Child Region pages include a link to the corresponding Parent Region pages.
• Product placements created with Elementor Pro CTA widgets that link to Region-specific offers.
• Listing Feeds that are dynamically populated with Region-specific Listings.

CTAs (Calls to Action)

I’ve designed variations for you to pick from, which include band-coded CSS to apply gradient options that are not yet included with Elementor Pro.

Where applicable, I’ve dynamically populated the titles of the CTAs based on the page title using Elementor’s dynamic tag option. For example, the ‘Illinois’ Gym CTA has the word ‘Illinois’ brought in automatically, and then I’m spending the word ‘Gyms’ to it.

• Fit Partners:  Pulls up a contact form popup.
• Fit Merch:  Links to the Shop page.
• Gym Special Offers: Links to the Explore page and automatically filters by all Gyms in that Parent or Child Region.
• Coaches Special Offers: Links to the Explore page and automatically filters by all Coaches in that Parent or Child Region.
• Classes Special Offers: Links to the Explore page and automatically filters by all Coaches in that Parent or Child Region.
• Explore State: This button appears on the Child Region pages and links to the Parent Region page.

General Design Highlights

• Heros are designed by filtering the Explore page for a location and producing screenshots.
• Icon lists provide the functionality of listing out Neighborhoods, Cities, etc., and an underline effect has been applied that is not yet a feature of the Icon List widget.
• The Unlock the Ability to Tag WordPress Pages code snippet is used to allow the manual assignment of the ‘Region Page’ WordPress Tag to all Parent and Child Region Pages.
• Listing Feed designs are pulled from a custom ‘Listing Previews’ CSS Package assigned (conditionally) by WPCodeBox, using the ‘Region Page’ taxonomy Tag mentioned in the previous bullet point.

Complete the Overall Solution

• Fit – Parent Region Page
• Fit – Child Region Page
• Fit – Contact Form Popup
• Fit – Listing Previews (Dark Mode)
• Fit – Listing Previews (Light Mode)

 Shop Page Highlights

• Mobile Responsive Design
• Custom Product Grids
• Custom CTAs
• Custom Slider
• Gradient Elements
• and more.

Complete the Overall Solution

• Fit – Shop Page
• Fit – Listing Packages
• Fit – Single Product (Dark Mode) CSS Package
• Fit – Single Product (Light Mode) CSS Package

The WordPress Block Editor adds core content elements (Featured Images, Headings, Paragraphs, etc.) for each post.

To complete the building of blog posts, a template has been designed with Elementor. Using Elementor’s Display Conditions feature, the template is dynamically applied to blog posts.

The WordPress Block Editor is extremely powerful and lightweight, but no worries if you prefer to build entirely with Elemento. All you need to do is take the built template and use it as your starting point. Simple!

 Single Blog Post Highlights

• Mobile Responsive Design
• Dynamically Added Featured Image
• Dynamically Added Author
• Dynamically Added Post Title
• Gradient Elements
• Custom Social Share Design
• Custom CTA Design
• SEO-Friendly Heading (H1, H2, …) Assignments
• and more.

Complete the Overall Solution

• Fit – Single Blog Post
• Fit – Blog Page
• Fit – Blog Category Page

 Single Listing Highlights

• Light or Dark Mode
• Custom Packages and Booking
• Google Reviews Embed
• Multivendor Marketplace
• Optimization
• Custom Quick Actions
• Custom Gradients
• Field Helper Text
• Custom Single Listing Contact Forms
• Gallery Cover Nav Arrows
• Custom Profile Menu Design
• Custom Term “Buttons”
• Gallery and Bonus Gallery Block Cohesive Layout
• No Reviews Custom Image
• Feedback Field
• and more.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, the Single Listings can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Google Reviews Embed

Following my own How to Embed Google Reviews on Your MyListing Website With EmbedSocial guide, I can demonstrate this solution on a MyListing website that’s available to the public.

With EmbedSocial. you can flip a switch and be in either Light or Dark mode. Since I’m defaulting to a Dark mode look for Single Listings, it was nice to have the switch available.

EmbedSocial also allows you to add your own custom CSS to the widgets. So, whether you go with the Fit Starter Site in Light Mode or Dark Mode, you’re good to go without much effort.

Club members get 60+% off this extremely powerful solution that helps website owners easily add another revenue stream and/or add more value to their Listing Packages.

Packages and Booking

I’ve made it super simple to generate another revenue stream for your website using the WooCommerce Product Vendors plugin (included with the Starter Site) and my Build a Marketplace with MyListing and WooCommerce Product Vendors guide.

You can have vendors register for an account, add their products to their own Listings, Listings you create/manage yourself, etc., and take a % of each sale.

There are many ways to approach this. As I mentioned, you could take a % and then charge little or nothing for Listings. Or, you could charge for the Listings, and the vendor takes 100% of the profits when their products sell on your website.

You’ll need to get creative with the final piece of the booking process.

One option could be to link to external websites and their booking system. If you do that, you might want to keep an eye on the analytics (i.e., button clicks) of your Quick Actions, CTAs, etc., so you know how much traffic you’re bringing folks. Otherwise, you could have an agreement/contract where you get paid regardless.

Another option is to use a booking solution on your website. I’ve implemented the FREE Calendr solution to show you how that might work for you.

• Dynamic Cover Booking Link (For the Coaches Listing Type, the Listing title is automatically added to the link.)
• Cover Booking Link to ‘Packages’ Listing Tab (Booking links open the ‘Packages’ tab within the Listing.)
• Booking Quick Action Tooltip (Automatically populates the Listing Title in the tooltip.)
• Booking Quick Action Link to ‘Packages’ Listing Tab (Booking Quick Action opens the ‘Packages’ tab within the Listing.).
• Packages Tab (This tab uses the MyListing repeater field/block to display the Coach’s packages within their Listing.)
• Packages (These are vendors’ products on your website that automatically put their products in a shopping cart for your users.)
• Booking Form (Listings with the ‘FIT 4’ Listing Subscription Package get access to the Booking Form field, where they can add their Calendr link.)

Multivendor Marketplace

Leveraging the WooCommerce Product Vendors plugin, I’ve set up a ‘Merch’ tab (i.e., Store) and added some demo vendor products to show you how this could work for your website. This is just the tip of the iceberg regarding how you could use this solution to generate revenue for your business.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to Single Listings Post Type (job_listing). This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Listing Type revision governance has been implemented to limit the number of revisions from the default value of 15 down to 5. This can easily be adjusted or removed altogether if you choose.

Quick Actions

Custom Quick Actions have been designed to give a cleaner and more modern look.

• Tooltips
• Share Options
• Reviews
• Report Listing

Gradients

Custom gradients have been applied to highlight important areas and add a nice design flair while not overdoing it. Gradients have been applied to the elements below, to name a few.

• Verified Badge
• Items Counter
• CTAs
• Quick Actions
• Work Hours
• Get Directions
• Icons
• Underlines
• Packages
• and more…

Field Helper Text

• For fields where text is involved, helper text is included in the description to help guide users toward SEO best practices.
• For fields where images are involved, helper text is included to let users know the maximum image file sizes that can be uploaded, image compression steps, and recommended image resolution.

Single Listing Contact Forms

Contact Form 7 has been replaced with Elementor Pro forms. For this Starter Site, I thought it would be interesting to show how to build a multi-step form with Elementor Pro that sits inside the Listings.

• Gradient Progress Indicator
• Auto-populated Email Field
• Auto-populated Message Field
• Privacy & Terms Acceptance
• Privacy Policy & Terms of Use Links (Open in New Tabs)
• Gradient Buttons (Next/Previous/Send)

Complete the Overall Solution

• Fit – Single Listing (Light Mode) CSS Package
• Fit – Single Listing (Dark Mode) CSS Package
• Fit – Gym Listing Type
• Fit – Coach Listing Type
• Fit – Class Listing Type
• Fit – Single Listing Contact Form (Light Mode)
• Fit – Single Listing Contact Form (Dark Mode)

The default MyListing Single Product template is used, and CSS is applied to improve the overall design. Depending on the project, this approach potentially eliminates the need to configure Single Product Templates with Elementor.

• Light and Dark Modes
• Gradient Buttons, Active Indicators, Product Ratings, and more.

Light and Dark Modes

While Dark Mode will be the default, with the flip of a switch, Explore pages can be switched to Light mode! If you change your mind, no problem; flip the switches again, and you’re back in Dark Mode.

Optimization

Using WPCodeBox’s ‘Conditional Loading’ feature, CSS Packages (Light or Dark) were created and applied only to the Single Product post type. This approach helps with optimization by only applying CSS where it needs to be applied rather than to the entire website.

Complete the Overall Solution

• Fit – Single Product (Dark Mode) CSS Package
• Fit – Single Product (Light Mode) CSS Package

WordPress includes a basic XML Sitemap, but it lacks what’s needed to be effective and should be replaced. I’m assuming that WordPress’s thought here is that something is better than nothing, for those that don’t know that an XML Sitemap is needed.

SEOPress (included with all Starter Sites) takes over XML Sitemap duties, providing the features needed.

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

To go along with the XML Sitemap, I created an HMTL Sitemap Page, using Elementor’s Sitemap widget to pull in Pages, Posts, Listings, Regions, FIT Products and FIT Vendor Products.

SEOPress also provides an HTML Sitemap feature. Once you turn it on, you can embed the provided shortcode into any page and adjust the design as needed, whether you want to use Elementor or the WordPress Site Editor.

Complete the Overall Solution

• Fit – Sitemap Page

This page works hand in hand with the ‘Get Started’ and ‘How It Works’ pages, further educating current and potential users of your MyListing website.

Support pages, when done right, can save website owners a ton of time by answering questions that might otherwise get asked over and over again. 

“How do I change my password?” “Can you elaborate on what features are included in my Listing Subscription?” “How can I upgrade/downgrade my plan?”.

It’s more efficient to answer a question, thoroughly, once, rather than repeatedly.

You should also think of this page as part of your sales material, giving customers good reasons to stay on your platform, upgrade their plan, run promotions, and so on.

This page includes real-world content based on my years building MyListing websites for myself and my clients.

• Mobile Responsive Design
• Color Coordinated Navigation
• Custom Horizontal Shape Divider
• Custom Accordions
• Call Outs to the ‘Fit – Contact Form Popup’
• Real World Content
• and more.

Listings

• Features: This section breaks down what is in your different pricing tiers, helping people decide which plan to sign up for. Current customers also refer back to this page once they get going on your website to see if they are taking full advantage of all the features available to them, and that’s why it’s super important to be thorough. The thoroughness of this section can lead to plan upgrades, reduce support questions by acting as an FAQ, and more.
• Management: The difference in this section is that we are helping people understand how things function. There is a sales component here, too, as we talk about priority in search, how subscriptions can be upgraded, and so on. Again, thoroughness is key.
• Promotions: This section is all about upselling. You’re letting them know what happens when they spend more money outside of what they are already paying you to add their Listings.
• General: This is a catch-all section for questions that don’t necessarily fall into a specific category.

Account

• Access: This section covers logging in, registration, account access, and similar topics.
• Management: This section covers what users might do once logged in, registered, etc.
• Privacy: This section covers everything related to privacy, like linking to the privacy policy, how users can completely remove themselves from your website, and so on.
• General: This is a catch-all section for questions that don’t necessarily fall into a specific topic.

Billing

• Payment: This section covers how people pay for anything you’re selling on your website, whether it’s Listings, products, services, or something else.
• Orders: This section covers anything order related, like past order access.
• Subscriptions: This section covers everything related to subscriptions, whether it’s Listing Subscriptions, Membership Subscriptions, etc.
• General: This is a catch-all section for questions that don’t necessarily fall into a specific topic.

General

• Platform: This section answers questions about your business, its offerings, and so on.
• Partnerships: This section covers forming partnerships with vendors, sponsors, etc., to create additional revenue streams and add value to your customers.
• Vendors: This section covers everything related to vendors selling their products and services on your website.
• General: This is a catch-all section for questions that don’t necessarily fall into a specific topic.

Complete the Overall Solution

• Fit – Support Page
• Fit – Contact Form Popup

After purchasing any Listing Package, customers are automatically redirected to the Reach Further section of the Get Started page, where they can get some brief info for Listing Promotions, Google Reviews, and more.

With the help of the Create Unique Redirects Based on the Purchased Product code snippet, the foundation is in place for MyListing website owners to create any custom redirect flows they would like.

The main takeaway in this section is it’s time to get on board with using REM instead of PX for mobile responsive fonts.

Responsive Design

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 until you implement a small bit of CSS, which I provide below.

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

One of my absolute favorite tools (it’s FREE, by the way) for designing with responsive fonts is Type Scale. You’ll notice that once you fire it up, it defaults to a ‘Base’ of 16px. I wonder why that is? 😉

For this Starter Site, the proper  ‘Base’ is already in place and ready to go for you.

Any custom CSS I have added to this Starter Site regarding setting a specific font size (which isn’t much since it’s mostly done with Elementor) will be done with mobile responsiveness in mind, using REM values over PX values. Any Elementor-based content will use REM.

I recommend Type Scale when you start to think about replacing PX with REM to get in tune with a more modern approach to mobile responsiveness for fonts.

Accessible Design

While there’s no official ADA-enforced minimum-size font for website use, it’s usually recommended that you use at least a 16px font for the body text.

As I mentioned above, Type Scale defaults to a ‘Base’ of 16px, so when you use that tool, you’re ready to punch in your desired Google Font, font weight, etc., and be well on your way to meeting accessibility guidelines when it comes to fonts.

Pro Tip

Using Type Scale’s ‘Base Size’ feature, you can drop any PX value and easily convert it to REM.

This is not only valuable in terms of getting that PX to REM conversion but also for those that, for some reason, don’t want to adopt REM and instead are more comfortable with PX values.

Fit Typography Scheme

• Font Family: System Fonts
• Base/Body Size: 16px/1em/rem
• Scale: 1.333 (Perfect Fourth)

By default, with MyListing, when a user is logged in, they will see a drop-down menu underneath their user name (i.e., User Dashboard Menu).

Once they click on a menu item within the User Dashboard Menu (ex., My Listings), they are then taken to the actual MyListing Dashboard, where they will again see the User Dashboard Menu horizontally at the top of the screen.

I have replaced both of the items mentioned above.

The typical MyListing User Dashboard menu has been replaced with a custom Elementor Pro popup to unlock a world of possibilities for design and functionality. 

Since the horizontal User Dashboard Menu is no longer needed with the custom dashboard popup in place, I hid it.

• The User Dashboard Menu (popup) is invoked when a user is logged in and clicks on their user name within the header area.
• Dynamically-populated content like the logged-in user’s avatar and user display name.
• The menu items pull from a menu created with WordPress and use MyListing’s shortcode feature to add icons from the library.
• Custom CSS was added to create a unique gradient that flows from top to bottom across all icons, treating them as one cohesive gradient.
• Hovering the menu shows custom styling for movement, highlighted backgrounds, icon opacity changes, etc.

Complete the Overall Solution

• Fit – User Dashboard Menu
• Fit – Global CSS Package

While the design for this page is very similar to the main Shop page, there is one key difference aside from the noticeable difference in that Product Grids pull products that the Vendor has added to their store.

The critical difference I eluded to above is the dynamic population of the Vendor’s name. For every Vendor page you assign this template, the Vendor’s name will automatically populate the heading that appears just below the main ‘Store’ heading.

Want the Vendor’s name to appear above or beside the ‘Store’ heading (or not at all)? No worries. Just edit the Elementor Heading widget pulling in the dynamic content, and you’ll quickly see how it’s done.

All of this vendor stuff is also made possible by the WooCommerce Product Vendors plugin. Please see the ‘WooComerce Product Vendors’ tab for more info.

Vendor Shop Page Highlights

• Mobile Responsive Design
• Dynamic Store Page Titles
• Custom Product Grids
• Custom CTAs
• Custom Slider
• Gradient Elements
• and more.

Complete the Overall Solution

• Fit – Vendor Shop Page
• Fit – Shop Page
• Fit – Listing Packages
• Fit – Single Product (Dark Mode) CSS Package
• Fit – Single Product (Light Mode) CSS Package

• WooCommerce Product Vendors has been implemented.
• UiPress is installed (not active) for those that want to take the design and functionality of the WordPress Dashboard to another level.

Build a Marketplace with MyListing and WooCommerce Product Vendors

Custom Login/Registration Experience

As part of the overall custom Login/Registration 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.

• Vendor Admin and Vendor Manager: These are the possible roles the WooCommerce Product Vendors plugin gives out to those who have registered to be a vendor on your website, and users with these roles are currently redirected to their store on your website after they successfully log in.
• Pending Vendor: This is the role the WooCommerce Product Vendors plugin gives to those who have registered as a vendor on your website but are awaiting approval. Currently, there is no redirection set for this role, but you might consider redirecting to a custom landing page for your pending Vendors.

This is highly customizable, and the settings are easily changed to fit your needs.