Build an Online Business Using the MyListing Theme

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.

To get started building this page, you create it and edit it with Elementor, adding the ’27 > Explore Listings’ widget to the page. See the subtasks below for a checklist of steps.

The above said, some MyListing websites do not use a dedicated Explore page and instead place the Explore widget on strategic pages, like Region pages, Category pages, etc. Either way, the below applies.

Advanced Form
This form appears on the left-hand side of the Explore widget, along with ‘Explore Tabs’ and filters. MyListing website users can use this form to find and filter Listings based on specific criteria defined within the form.

Listing Order
This functionality is seen at the bottom of the Advanced Search Form and appears as ‘Order By’.

Explore Tabs
These tabs appear above the ‘Advanced Form,’ and you can use a maximum of three at one time. They can provide an alternate (or additional) way of presenting data and filters. For example, instead of a text-based drop-down field for Categories, using the ‘Categories’ Explore Tab with images may be preferable.

—————————————-

27 > Explore Listings Widget

Note: The settings from Theme Options – Explore have an impact here as well.

Template
Each template presents a different look and feel, so it’s just a matter of choosing the desired template for your project. Here is an example of Template 1 and Template 3 from my Starter Sites.

• Template 1: Advanced Search Form (Left Column), Listings (Middle Column), and Map (Right Column).
• Template 2: Advanced Search Form (Left Column) and Map (Right Column).
• Template 3: Advanced Search Form (Top Row) and Listings (Bottom Row).
• Template 4: Advanced Search Form (Left Column) and Listings (Right Column).

Columns
This setting applies to the Listings, so it’s just a matter of choosing the desired setting for your project.

• One: This default setting displays Listings in a single column that occupies 450px of a 1600px desktop width.
• Two: This displays Listings in two columns, occupying 800px of a 1600px desktop width, leaving the Advanced Search Form width the same while shrinking the Map area. The Map can easily be expanded to near full-screen with the click of the Map icon.
• Three: Despite the title of this option, it displays Listings in four columns, occupying 1200px of a 1600px desktop width, leaving the Advanced Search Form width the same while hiding the Map area. The Map can easily be expanded to near full-screen with the click of the Map icon.

Enable/Disable Live URL Update
I recommend leaving this as the default setting to ‘Enable’ this feature. The main reason is that this makes it easy to get the dynamic URL needed to populate other website areas.

For example, let’s look at the Home page of the Basecamp Starter Site. If you click on one of the cards under the ‘Fuel Your Next Adventure’ section, you’ll see that it takes you to the Explore page with the dynamic URL already populated. To get the link for that card, here are the steps.

1. Perform a filter on the Explore page.
2. Copy the dynamic URL provided,
3. Paste the URL into the card.

Trigger Search On Map Drag
If you’re not allowing people to search by location using Map Services, then this setting should be disabled. If you want people to have the ability to search by location, be sure to add the Location and Proximity fields to the Advanced Search Form, configuring as desired.

While it’s not a setting within the Explore Listings widget, it’s also worth mentioning the option to search the map when dragging it, which is enabled by the user when they check the ‘Search as I move the map’ box.

Listing Types
This one is self-explanatory, but I wanted to mention it because it’s an easily overlooked setting, with website owners wondering how to get their Listings to show up on the Explore page. There’s not much to say here other than to add each of the Listing Types you wish to be searchable/filterable on the Explore page.

Display Listing Types As
We have two options (Navbar and Dropdown) here, and this setting only applies when you have more than one Listing Type to add to your Explore page.

• Navbar: This places tabbed navigation at the top of the Explore Listings widget, allowing users to quickly jump between Listing Types. This option is preferred if you want to reduce the overall length of your Advanced Search Form.
• Dropdown: This places a dropdown filter towards the top of the Advanced Search Form, just below the Explore Tabs. The dropdown cannot be moved with custom development, but in most cases, that shouldn’t be a big deal because selecting the Listing Type first is the logical move. This option is preferred if you want to keep the Explore page aligned at the top, directly under your Header, and maximize vertical space.

Default Filter Values
This feature is a great option if you building a page (Explore page, Region page, Category page, etc.) where you want to pre-filter Listings based on what the page is about.

For example, you could add the Explore Listings widget to a Region page for a particular city where you want to show the top Pizza places. In this case, you could use a ‘Restaurant’ Listing Type and a taxonomy (Categories, Custom Tax, etc.) of ‘PIzza’.

Please refer to the ‘Enable/Disable Live URL Update’ section above for the URL you can use for this setting.

Default Coordinates (Latitude and Longitude)
When there are no Listings to show on the map, this will be used as the default location. This is an important setting, especially if your directory serves a specific geographic region where you want to put coordinates for that region. Finding the desired coordinates is easy using Google Maps, as shown below.

1. Open Google Maps.
2. Enter the desired location.
3. Right-click on the location and the coordinates will be displayed at the top, with Latitude being the first value shown, followed by the Longitude.

Once you believe your coordinates are entered correctly, you can easily test by filtering your Explore page to the point where no Listings match the criteria.

Zoom Levels
These settings are more trial and error than anything since every MyListing project is different. You’ll want to play with these settings until you have the desired outcome. I recommend keeping an eye on these settings over time, as the desired settings may change as you add more Listings that populate the Map.

Categories/Taxonomies Tab > Item Count
This setting goes along with the ‘Explore Tabs’ mentioned above. It dictates how many terms to show under each of the tabs. What you have to weigh here is performance vs. user experience.

I don’t know at what point performance would start degrading, but that greatly depends on your website’s infrastructure, how many users are concurrently utilizing the Explore Tabs, and so on.

Since I host all MyListing websites (mine and those of my clients) on high-end hosting, I start by clearing out the default value and leaving it blank so all terms will show.

Overlay Type
This feature adds color over the top of the taxonomy cards shown within the Explore Tabs. There is an option to choose any solid color or a pre-configured gradient. Regardless of your choice, the color is shown with a 40% opacity and then a 95.5% opacity (i.e., nearly solid) on hover.

If you don’t like the gradient options as they are currently configured, you can use CSS to easily adjust the pre-configured options or create new gradients of your own.

For example, let’s say you choose ‘gradient7’ and you want to alter it slightly. If you inspect one of your taxonomies with the gradient overlay applied, you’ll see the gradient applied to the ‘gradient7’ CSS selector.

.gradient7 {
     background: linear-gradient(270deg,#c644fc 0,#5856d6);
}

Adjust the gradient values and add custom CSS to your site to reflect the desired change.

.gradient7 {
     background: linear-gradient(your-own-gradient values);
}

The other option is to target the taxonomies as a whole without specifying a gradient color in the ‘Explore Listings’ widget.

.listing-cat .overlay {
     background: linear-gradient(your-own-gradient values);
}

Club Store: Explore Pages