![[Website Teardown #7] Mention Teardown Sales & Pricing Page](https://www.optimizepress.com/wp-content/uploads/2017/02/Teardown-Mention-Blog-02.jpg)
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.
SALES PAGE: https://mention.com/en/pricing/
PRICING PAGE: https://mention.com/en/pricing/
Mention Archives
Here’s a look back over the Mention design for the last few years.
July 2014
October 2015
November 2016
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]
Site: Mention.com
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.
[/feature_box]
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)
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.
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.
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)
For 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.
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)
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.
Choose your comparison table style.
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.
[/feature_box]
Previous Teardowns
If you’ve missed any of our previous teardown videos, here are the links:
- Teardown – #6 – Grammarly
- Teardown – #5 – Slack
- Teardown #4 – Workable
- Teardown #3 – Zapier
- Teardown #2 – Shopify Free Trial Landing Page
- Teardown #1 – Aweber Landing Page
[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.
[/feature_box_creator]
21 replies to "[Website Teardown #7] Mention Teardown Sales & Pricing Page"
Good work hear and nice and clear process.
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?
Did you reach out to our support team regarding access? @dukaxavier:disqus
Thank you, David!
Do you have the css for the nav bar and logo effect?
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?
Where are the templates downloads ???
Go to the members hub > extra downloads. Scroll down to Converse Template.
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.”
Where are the templates downloads ???
In the members hub > extra downloads. Scroll down to Converse Template.
This is an awesome template! Thanks again. Loved the addition of the excel planning sheet.
You are welcome Damien. Anything to make planning a little easier 🙂
Another great teardown, thanks! The spreadsheet -that’s very helpful, thanks again…
Glad that helped Timothy!
Nice! Is the “monthly or annual” shift option something that can be done with the Comparison Table?
I’m interested in the monthly/annual toggle as well.
Yeah that would be nice! Something already on the list.
Very cool. Are those little popups around images possible? Or, is that one of those site tour plugins?
Nice! This is a good one.
Thanks Damien!