Do you remember the last time you were at a dinner party or out with a large group of friends and you hear your name mentioned?

Your ears prick up! You get distracted in your deep conversation. You look around the room to lip read or see who may be staring at you…

3 seconds pass and you return back to the person you were talking with, as though nothing happened, compose yourself and continue talking.

But, the second your focus is back where it was, you hear your name again… this time you break conversation and make it clear you heard your name mentioned before the other person thinks you’re ignoring them.

Imagine if you could have little James Bond spy devices that could hover around the room and when your name was mentioned, it listened in and recorded the chat. Later that night you could go home, download the data and hear what someone was saying about you.

Moving on, what if I was to tell you that these devices already exist. Would you believe me?

Well, they do (sort of). In a different kind of format. An online robot type format.

They are little bots that check the web waiting for any mention of your chosen keywords.

And… one of those tools is called Mention and we tore the site apart for the next episode in our teardown series.

Mention is an amazing tool that lets you check the web for any keyword you want to follow. Once you set your keywords, it will alert you of any mentions on blog, social media, forums and more. Once you see a mention, you can jump in the conversation and be helpful, get customer feedback or simply thank someone for their comments.

In this episode, we worked through Mention’s main sales page and their pricing page.


Mention Archives

Here’s a look back over the Mention design for the last few years.

July 2014

Mention Teardown Sales and Pricing Page | Mention Landing Page Archive #1
Click to enlarge

October 2015

Mention Teardown Sales and Pricing Page | Mention Landing Page Archive #3
Click to enlarge

November 2016

Mention Teardown Sales and Pricing Page | Mention Landing Page Archive #2
Click to enlarge

We have changed the process of how we deliver the teardowns. Rather than you watching us build everything from scratch, we have gone ahead and built our templates beforehand.

We then chose some of the primary section of the pages and walk you through how they’re built using OptimizePress.

Also, to make your life super easy, we plan to give away the templates from now on!

Yes! You get them for FREE! Read on to learn where to download them.

The sections of the two pages are:

  • The hero section
  • The background testimonial
  • The comparison table

Here’s the video explaining how we built each of these sections in the templates.

Mention Sales & Pricing Page – Complete Teardown Video

[video_player type=”youtube” youtube_remove_logo=”Y” width=”560″ height=”315″ align=”center” margin_top=”0″ margin_bottom=”20″]aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj10MkZkZ1ZoUTR4WQ==[/video_player]

Time: 23.05
Our Template: CONVERSE

[feature_box style=”8″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

We highly recommend you get inspiration from other company’s websites. Don’t just copy a site and try to make it your own.


The Rough Teardown Guide

Here’s the rough guide for you folks who don’t want to watch the video, or only want to find a specific styling.

Hero Section (Sales Page)

Mention Teardown Sales and Pricing Page | Mention Hero Section

To begin, we will start by looking at where the image is placed. You will find it by going to the following location:

Colour Scheme Settings > Page Colour Settings > Overall Page Colour Options

You will see the image selected.

Mention Teardown Sales and Pricing Page | Mention Page Colour Options

Notice that a background colour is set, which you can keep as default or change according to your specific needs.

Next, we’ll look at the Headline settings. Clicking on the pencil icon will reveal the Advanced Headline Settings for your headline.

You will see all of the current settings for the headline. The current headline settings are listed as follows:

Effect: Clip
Static Text: Our Templates Are
Animated Text: Amazing, Contemporary, Converting, Optimized
Custom Font Settings: 45px, Theme Default, Bold, #ffffff

Clicking on the pencil icon for the button element will reveal all of the current styling settings for the button. Again, these can be changed according to your specific requirements.

Mention Teardown Sales and Pricing Page | Mention Text Styling

Lastly, if you wanted to insert a video background to this element, you can do so by clicking on the pencil icon for the row, then scroll down until you see the video background options.

Background Image Section (Sales Page)

Mention Teardown Sales and Pricing Page | Mention Testimonial SectionFor the background image, we’ve added a simple 2-column row, which you can easily set up by adding a new row in the LiveEditor.

For this template, we will go ahead and click on the row options, then scroll down until we see the Background Image.

You can also set the background image to be a parallax background image by clicking on the small checkbox.

Mention Teardown Sales and Pricing Page | Parallax Background Image Effect

We’ve also added a small feature box on the second column. Clicking on the small pencil icon for the element will reveal the content options, which you’ll be able to edit to your requirements.

Comparison Table (Pricing Page)

Mention Teardown Sales and Pricing Page | Mention Pricing Table

The pricing comparison table was built using the new OptimizePress PlusPack Element. To view how the comparison table was set up, install the CONVERSE template.

With the OptimizePress PlusPack enabled, choose the Comparison Table.

Mention Teardown Sales and Pricing Page | Mention Comparison Table

Choose your comparison table style.

Mention Teardown Sales and Pricing Page | Mention Comparison Table Options

And begin editing.

You will be shown a list of all of the settings that are currently set for the element, which again, you’ll be able to edit and modify to fit your requirements.

Well, that’s it for this teardown.

Download Converse

[feature_box style=”8″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

If you would like to download this template. Login to the members hub go to extra downloads and look for the Mention Templates.


Previous Teardowns

If you’ve missed any of our previous teardown videos, here are the links:

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#F3F3F3″ bg_color_end=”” border_color=”#CBD2D6″ border_weight=”1″ border_radius=”” border_style=”dotted” ]

Tell Us What You Think – Please Comment Below!

Thanks so much for reading this teardown post, Do you like this new format where we build it first and show you how the core elements are created? Please post any questions below.


    21 replies to "[Website Teardown #7] Mention Teardown Sales & Pricing Page"

    • Tristan Bailey

      Good work hear and nice and clear process.

    • Duka Xavier

      Hi @David_Frosdick:disqus!
      Thanks for the tutorial, it’s amazing, but the extra download don’t show up to me, even when I’m logged. And I put the background image on the Overall section but the parallax effect don’t work as shown on the video. Can you help me?

      • David Frosdick

        Did you reach out to our support team regarding access? @dukaxavier:disqus

    • Shawn Vougeot

      Thank you, David!

    • Greg Smith

      Do you have the css for the nav bar and logo effect?

    • Robson DCubo

      How do I put “part” of animated text in bold?
      I only found the whole text option

      How do I put the animated text in the middle of the sentence?

    • Yves

      Where are the templates downloads ???

      • David Frosdick

        Go to the members hub > extra downloads. Scroll down to Converse Template.

        • Graham English

          Maybe change the copy to be more clear because there are no “Mention” templates: “If you would like to download this template. Login to the members hub go to extra downloads and look for the Mention Templates.”

    • Marcos Eiras de Jesus

      Where are the templates downloads ???

      • David Frosdick

        In the members hub > extra downloads. Scroll down to Converse Template.

    • Damien Munro

      This is an awesome template! Thanks again. Loved the addition of the excel planning sheet.

      • David Frosdick

        You are welcome Damien. Anything to make planning a little easier 🙂

    • Timothy Conroy

      Another great teardown, thanks! The spreadsheet -that’s very helpful, thanks again…

    • Workout Anywhere

      Nice! Is the “monthly or annual” shift option something that can be done with the Comparison Table?

      • Scott Dolloff

        I’m interested in the monthly/annual toggle as well.

      • David Frosdick

        Yeah that would be nice! Something already on the list.

        • Workout Anywhere

          Very cool. Are those little popups around images possible? Or, is that one of those site tour plugins?

    • Damien Garber

      Nice! This is a good one.

Leave a Reply

Your email address will not be published.