MyListing Club

Style Single Listing Blocks for MyListing

Building better MyListing websites. One guide at a time.

Table of Contents

Overview

Our Style Single Listing Blocks for MyListing guide shows how to easily make your blocks unique, and for this guide, we will be working with merely CSS to accomplish our styling.

Example 1: Two Blocks of Equal Width

In this example, the goal is to have two blocks appear at the top of the Listing, with both having a unique style compared to all other blocks.

The Listing Type we are working with is configured to have a single column layout, so our two blocks will appear with a 50/50 layout above the other blocks.

Listing Type Set Up

  1. Listing Types > Edit Listing Type > Single Page > Content & Tabs
  2. Add a Tab if you haven’t already done so
  3. Edit your Tab
  4. Set the Tab layout to Single column

Add Blocks

  1. Add two blocks to your Tab
  2. Edit each block
  3. For the Custom Block ID, add “color-block-id” for the value
  4. For the Custom Block Class, add “color-block-class” for the value

Note:  Anytime you set an ID or Class within WordPress, you can name it whatever you want, as long as it is unique.

Add CSS

In short, our CSS Package applies the following style to these blocks.

  • Background set to a purple gradient
  • Heading text set to white
  • Icons set to match the overall branding
  • Only apply the style on devices with a viewport of at least 1024 pixels (e.g. iPad Landscape)

Example 2: Contact Form Block

In this example, we are styling the Listing Contact Form block so it stands out from the other blocks.

These steps apply, whether you are using the default MyLisitng contact form field (Contact Form 7), Elementor Pro, or using another forms plugin.

Listing Type Set Up

  1. Listing Types > Edit Listing Type > Single Page > Content & Tabs
  2. Add a Tab if you haven’t already done so
  3. Edit your Tab

Add Blocks

For these steps, we are assuming that like us, you are Replacing Contact Form 7 with Elementor Pro.

If you are sticking with Contact Form 7, simply added the Contac Form block.

  1. Add the Shortcode block to your Tab
  2. Edit the block
  3. Paste in the shortcode from your Elementor Pro form
  4. For the Custom Block Class, add “contact-form-block” for the value

Note:  Anytime you set an ID or Class within WordPress, you can name it whatever you want, as long as it is unique.

Add CSS

In short, our CSS Package applies the following style to these blocks.

  • Background set to a teal gradient
  • Heading text set to white
  • Fields set with transparency to allow the gradient to show through
  • Button set to match the overall branding

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)