search shadow

Menu

Call to Action (CTA) Banners Follow

Avatar
Zach Johnson
  • Updated

How to Create CTA Banners

Brokerages will now have the ability to create CTA sticky banners with multiple design options and various website placements. Having this additional marketing tool will allow the brokerages to implement more targeted marketing messages on any page of their website to increase lead capture.

What’s New

Call to Action Sticky Banners

  • CTA Banners
    • New CTA Sticky Banner functionality
    • Six banner designs to choose from
    • Banner placement can be added to the top, under the hero image, the bottom of the page, and Left or Right side of the page.
    • Able to select what pages the banner will appear on
    • Only 1 banner can be on a page at a time
    • The banner will inherit the Font style and Button style from brokerage branding settings
    • Upload our own custom background image or choose one of our fourteen gallery backgrounds.

Available for: This functionality is for Brokerage offices and will be permissioned for Brokers, Admin, and Editor roles. Agents will not have access to this functionality on the agent website pages.


How to Access the CTA Banners

Website > Components > CTA Banners

mceclip29.png

Call to Action Banners Index Page

  • Displays:
    • Name, Active, Creator, Date Created, Pages, and Total Number of Banners
    • Hover over banner item and the Edit and Delete will appear
  • Search Filters:
    • Name, Active, Creator, Created Start, and Created End
  • Create button
  • Need a little help?
    • To get you started, we have included 6 sample banners (one for each design) that are not active. This way you can easily edit to make the banner yours and activate.
    • Feel free to edit, delete or create your own CTA Banners

      mceclip27.png

Create a CTA Banner

  • Click the Create button and enter in the following fields
  • CTA Info
    • Internal Name*
      • This is the name that you will see appear on the CTA Banner Index Page
      • This will not appear on your CTA Banner
      • Required field
    • CTA Headline*
      • This is a short attention grabber message that will appear on your banner
      • Recommended 25 characters
      • Required field
    • CTA Body Text
      • Add additions text details or url links to your CTA Banner
      • Recommended 10-25 characters
      • The fonts and button styles will be inherited from the brokerage branding settings.

        mceclip26.png
  • Display Phone Number
    • This box is checked by default
    • If uncheck, the Phone Label and Phone Number will be removed on this form
  • Phone Label
    • Customize your phone label (Call, Contact Us, etc)
    • Max 20 characters
    • Required field
  • Phone Number
    • Max 25 characters
      mceclip25.png
  • Page Path*
    • When the CTA button is clicked, the user will be directed to this page
    • Add either an internal form page or use an external URL
      • To access a local page, enter a backslash and page name (ex: /Contact)
      • For an external site, enter the full url with HTTPS (ex: https://www.go.proertybase.com/demo)
    • Required
  • Button Label*
    • If left blank, defaults to Contact Us
    • Required
      mceclip24.png
  • Layout Preview
    • Preview the CTA Banners styles
    • Sticky Banner Dimensions (Style 1-5): 1920 x 110 px
    • Side Sticky Banner (style 6): 325 x 200 px
  • Style 1
    mceclip23.png
  • Style 2
    mceclip22.png
  • Style 3
    mceclip21.png
  • Style 4
    mceclip20.png
  • Style 5
    mceclip19.png
  • Style 6
    mceclip18.png

  • CTA Style
    • Style 1 - 6
      • Select a CTA Banner Style
      • The fonts and button styles will be inherited from the brokerage branding settings.

        mceclip17.png

    • CTA Background Color (recommended)
      • Hex Color: Enter a Hex color code or use the Hex color picker
      • Hex Transparent Color: Adjust the transparency with the slider
        • To see the change on the background image, click off the slider and the image will adjust
      • Setting this color to white can create accessibility errors due to a poor contrast ratio and is not recommended
      • Remove Background Color link will remove the color and reset it back to white #fff
      • Setting this color to white can create accessibility errors due to a poor contrast ratio and is not recommended
        mceclip16.png
  • CTA Background Images (optional)
    • Upload your own
      • Upload your own custom background banner image
      • Sticky Banner Dimensions (Style 1-5): 1920 x 110 px
      • Floating Banner (style 6): 325 x 200 px
  • Choose From Our Gallery
    • Need a stock image for your banner, select one of 14 images in our gallery

      mceclip15.png

  • Remove Current Background Image
    • Easily remove the uploaded background image

      mceclip14.png
  • CTA Background Image Preview
    • Preview your uploaded background image or color and adjust transparency
    • To add transparency to your background color, allowing you to see an image behind it, you can change the transparency levels in the CTA Background Color menu above, using the slider to change your color to RGBA.

      mceclip13.png

  • Headline Font Color
    • Default to dark gray #434647
    • Hex color picker (optional)
    • Transparent slider (optional)
  • Content Font Color
    • Default to dark gray #434647
    • Hex color picker (optional)
    • Transparent slider (optional)
  • Button Font Color
    • Default to dark gray #434647
    • Hex color picker (optional)
    • Transparent slider (optional)
  • Button Background Color
    • Hex color picker (optional)
    • Transparent slider (optional)
    • If left blank, will default to the Brokerage’s primary color

      mceclip12.png
  • Position on Page

All banners are floating banners except the banner under the hero image

All banners can be closed and reopened by the user

 

  • Select one of the following sticky banner positions on the page (Style 1-5)
    • Top of Viewport
    • Under Banner
      • Fixed banner under the hero image
      • If there is no hero image it will display under the navigation
    • Bottom of Viewport
  • Select one of the following floating banner positions on the page (Style 6)
    • Bottom Left
    • Bottom Right

      mceclip10.png
      mceclip11.png
  • Add to Pages
    • Linked Pages
      • Select the pages you want this CTA to appear on.
      • Multiple banners can be active at the same time but limited to one CTA Banner per Page.
      • Search Results:
        • Type in the page name instead of scrolling through the dropdown
      • Select All:
        • Select all website pages; however, you may only home 1 banner per page.
        • Caution: Some sites have hundreds of pages and if the same banner is on every page, this could reduce the customer experience when visiting your site.
      • Total Selected:
        • The total number of pages selected will appear under the linked pages and the selection will be highlighted within the dropdown selections.

          mceclip8.png
          mceclip9.png

      • Make Banner Active
        • Active Checkbox
          • Check the box to make the banner Active
          • Uncheck the box to make the banner Unactive
        • Scroll to Top
          • This will take you quickly to the of the page
          • Click Create at the top of the page to Create your new CTA Banner

            mceclip7.png

CTA Banner website examples

  • CTA Banner placed at the Top of Viewport
    • The floating Banner is located at the top of the page below the navigation
    • This is an example of a solid background color with light transparency where your hero image will still be seen.

      mceclip6.png

  • All banners that have a closed state. When the X on the right side of the banner is clicked, a floating icon will appear in the same place as the X on the banner. The user can click the icon to see the banner again.

    mceclip5.png

  • When the CTA button is clicked, it can take the user to an internal contact form or to an external URL of your choice.

    mceclip4.png

  • CTA Banner placed under hero image (middle of page)
    • This fixed banner located under the hero image. If there is no hero image, the banner will display under the navigation.
    • This is an example of a Gallery Background image with a color and transparency applied.
    • The banner can be closed, and the Icon will be fixed on the page. The user can reopen the banner at any time.

      mceclip3.png
  • CTA Banner placed at the Bottom of Viewport
    • Banner located at the bottom of the page
    • This banner will stick to the bottom of the page when scrolling
    • This is an example of a Custom Background with a color and transparency applied.
    • The banner can be closed, and the Icon will float on the page. The user can reopen the banner at any time.

      mceclip2.png

  • CTA Banner placed at the Bottom Left or Bottom Right
    • Banner located at the bottom of the page and placed on the left or right side of the screen.
    • This banner will stick to the bottom of the page when scrolling
    • This is an example of a solid color with no transparency applied.
    • The banner can be closed, and the Icon will float on the page. The user can reopen the banner at any time.

      mceclip1.png

      mceclip0.png

Please See Our Video Below:

Related articles

Powered by Zendesk