Dear reader, This is my first 4400-word article. I will keep adding/updating this. Bookmark this page. So if you find any editing errors, leave a comment and help me fix it, please. But, it is free of typos though and ‘Grammarly.com’ says so too.
I’ve written it so you can simply scan through without having to read the entire article. You can directly jump to sections. They are self-contained.
Also please share this article with someone who might benefit from it.
The main reason most people want their website to be redesigned with Thrive Themes is mostly for just one reason – Thrive Architect. They love the ability to make the edits for themselves and to add new pages themselves.
Your entire business’ productivity can potentially 10X or more when you switch from an old outdated setup where you have to wait for ages to make a simple change on your website.
Historically, you have always needed to ask your web developer to add new pages, or in some cases a full team – designer, developer, admin, etc. But now with the advent of modern day page builders, the game has changed. One person can totally put together a kick-ass landing page or even a full website in just a few hours.
So all you need to do is make a list of pages that you want to redesign using Thrive Architect first.
Using Multiple Page Builder Plugins
Remember this important point, just because you use Thrive Architect doesn’t mean that you cannot have other page builders installed.
And no! installing multiple page builders don’t slow down your website (at least not Elementor and Thrive Architect). Because internally, the plugin is used only if the page is built with that particular page builder plugin.
I have built multiple sites where both page builders I recommend are installed – Thrive Architect + Elementor. I have them both installed on this very site too.
Picking the right theme for using with Thrive plugins.
Good folks at Thrive Themes claim that their plugins work with all WordPress themes. Personally, I have verified that it works great with StudioPress themes or any Genesis child theme. I also recommend the Astra theme or GeneratePress. They both seem to be gaining a lot of popularity due to their speed and light-weight nature.
Two Modes of using Thrive Architect
There are two modes of using Thrive Architect to build pages.
Mode 1: From a blank canvas (without the theme header and footer), or
Mode 2: From a normal page where you still have your WordPress themes’ header, footer and in some cases even sidebar.
Advantages of Mode 2: The advantage of using it with your theme’s header/footer is that the page you build will inherit the styles from your themes. This is great for building branded landing pages easily. Also, you don’t have to manually set the font, color, sizes, etc. for your text, buttons and few other elements.
Advantages of Mode 1: The advantage of building a page on a blank canvas is that it is portable. You can simply export and import it to any website and it will look the same. But you will have to manually set the styling on each page. If you use the Thrive Architect’s built-in typography settings and create a few templates/symbols for common elements, you can reduce the amount of work and make the page maintainable.
A word of advice to newbies:
Avoid setting fonts, colors, sizes manually in multiple places throughout your page. Not only does it look bad, it is complicated to process if you use too many fonts (a common amateur designer mistake), also it is hard to maintain/change.
Instead, use the typography setting inside Thrive Theme Builder and simply use one of those choices. Use a maximum of two font families if you absolutely have to do it. If you are bad at design, stick to one font family and multiple weights of the same family.
The great thing about Genesis child themes is they are easy to customize with a little knowledge of CSS and WordPress coding (enough to find and edit the child theme’s style.css) Their code is so well commented I almost cried looking at how elegant their sample child theme was.
But this advice is not for the average DIY business owner. I don’t recommend learning CSS or anything. Instead, you’re better sticking to what your theme offers and focus on your business until you have enough money to hire a professional.
Word on updating:
Do not update frequently. Unless they explicitly claim it is a security fix or something. In my experience for the last few years, never once was there a security update. Their plugins are pretty secure.
But remember that Thrive Themes’ plugins and updates are a little buggy when they update. Especially when they release new versions. They don’t test it well enough and rather release and use users feedback to fix their bugs. I hate this practice, but the company hasn’t changed its attitude towards this.
Also, you do not want to be breaking your website and fixing it all day instead of building your business.
Thrive leads
How to organize your massive list of Thrive Leads lead groups? Thrive Leads lead groups.
If not arranged properly it can give you a lot of headache down the line. You can have multiple lead groups within which you can have multiple forms of opt-ins.
Here are the shortcuts to understanding Thrive Leads lead groups
- You can ONLY have one lead group active on a page. So never expect your 2-step ribbon from one lead group to appear along with your post footer opt-in from
- Arrange/sort them so that the most generic ones go in the bottom and the specific ones go in the top. What do I mean by this? If you have a lead group for just 1-2 pages/posts, those should be kept above lead groups that are designed to appear site-wide or for an entire category of blog posts.
That is it! These are the two most important rules to avoid all confusions with Thrive Leads lead groups
Don’t innovate on layouts unless
Never innovate on layouts. Don’t make your users and customers think (and solve puzzles) to engage with your brand/business. If something isn’t apparent in 3 seconds then it needs improving.
The only exceptions are:
- You’re building art – in any form. Perhaps it is a live installation. Maybe it is an art festival website and you want to do something to compliment the theme.
- Your end-users love solving puzzles and novelty for the sake of it. Perhaps you’re building a website for a game release. Or its a website for hardcore programmers who would appreciate and enjoy a command-line interface inside the website.
In any other case where the purpose of your website is to communicate, connect, convert (and delight) your audience, puh-leeze do not innovate on layouts and make your users stare long and hard at their screens trying to figure out how to use the fancy new website.
“Just look at the world’s top websites from the biggest companies used by billions of people every day and generates millions in revenue through them. How many of them are complicated? How many have innovative layouts? They don’t
from the book “Making Websites Win” by the famous Conversion Rate Experts
Pre-planning work before you start your website redesign
This part of the article applies to every type of website redesign job. It doesn’t matter if you use thrive themes or any other theme.
1) Retaining the SEO when you start your website redesign
1.1) Run a crawler/spider on your website
Okay, don’t worry. I’m not asking you to go near an actual spider. I’m scared of them and I know a lot of you are. No shaming in admitting.
A crawler is a software that can crawl through all the public pages on your website. This is important to get a list of pages that are accessible by Google and other search engines. The software outputs a huge list of all your search-engine accessible pages and all the pages linked through these pages along with technical on-page SEO details.
Important: check if your crawler can automatically read your sitemap.xml file. If you have specified non-linked pages directly on the sitemap.xml, you might have performed a manual crawl on those pages if your software doesn’t automatically detect that.
Recommend software: Screaming frog website crawler
There are various elements on your website pages that communicate important data to search engines. This is usually called metadata. This is partly responsible for your search engine optimization and contributes to your website traffic.
1.2) Hunt and export all your backlinks in a list
Backlinks are simply links mentioned on various pages on the internet that point to resources on your website. These are a major part of “trust signals”. The real world analogy would be people recommending your business to other people. It is extremely valuable, builds trust and eventually translates to business revenue.
You will need a professional SEO tool to do this. The good thing is that a lot of them give you a free trial. Some of the world-famous ones are Moz Pro, Ahrefs, SEMRush, Mangools.com, etc.
Also second thing, you will need to export linking sites from google webmaster console.
These lists are important as backlinks play a big role in how your pages rank in search engines. It is very important to pay attention to your most linked pages and the metadata on them.
Also, you will need a plan to set up redirects (also called 301s) for your backlinks. This will ensure Google doesn’t see a page missing error when following various backlinks for pages that you might modify/remove.
1.3) Export important pages from Google Analytics
“Important” is subjective to each business. But as a starter, you can safely assume you will need the following for most businesses
- List of pages that receive 80 percent of your entire traffic. You can do this by going to Behaviour > Site Content > All Pages and sort by sessions/users.
- List of all your product pages. If you’ve set up google analytics e-commerce tracking properly, this will be available under the conversion tab.
- An idea of how important mobile is for your website. It is assumed that everything is mobile now. While it is true for the majority of cases, I still come across sites where the users are primarily desktop-only. You can get this from device reports. Also if you have an e-commerce website, find out which devices your buyers use to make purchases.
Apart from this, you will need to sit and think about what other pages could be important. Because in some cases, low traffic pages might have a high revenue rate due to your visitor pathways. So you need to consider investing some time to learn how buyers, subscribers and converting visitors travel on your website.
2) Track other factors to help your redesign process
2.1) Make a list of all important private-pages
This is going to be usually manual. These are pages that are not accessible by search engines (maybe because you’ve intentionally hidden them using Yoast plugin settings, or they are meant to be accessible only by their links)
Usually, this includes pages built for your mailing list, membership content pages, or any page that can be seen only after signing-up or purchasing.
2.2) Make a list of plugins and shortcodes that are used by old pages
A lot depends on your current setup so I have explained a few setups that are very common.
If you have visual composer, make a note of all the pages that actually use visual composer. If you use a visual composer on some of your blog posts and you have a lot of blog posts, then it is going to be a bit of work to make this list.
It is very common for clients to want to get rid of plugins during a redesign. Plugins can become a living hell to update and maintain your website if setup wrong. When you want to turn off plugins or replace them, you need to take care of shortcodes supported by them.
A good way to track these down is to set up a clone of your existing website on a staging server and disable the plugins you are hoping to get rid of. Then manually check your old blog posts and pages to see if they render properly.
Not all plugins are visual. Some are used to facilitate/automate various internal operations and they will need to consider on a per-plugin basis.
Once you identify the shortcodes to get rid of, have a plan in place to re-write those parts.
2.3) Make a test plan
This might sound fancy, but you will write down the common use cases of how people use your website.
Common examples could be
- Subscription flow for your website
- Purchase flow for the website
- Mailing list automation(s)
- Course completion automation(s)
Once you have these ready, you can perform these tests on the new website at the final stage before making it live, to ensure a peaceful sleep during the night.
Thrive comments
There is a huge army of people and automated software (aka. spam bots) continuously running to invade your comments section. Also purely for their own benefit without adding any value to your website or your readers.
They are getting more and more creative every day. Take this example comment below
“I am not sure exactly, but I love the way you’ve written this article. Great work, please keep posting.”
This is a typical comment designed to stroke your ego. Cleverly kept generic so it can be left on any blog with a legit writer.
BUT, this is by a spam bot.
Why do they do this?
For a few reasons…
The most common one is for getting a link. Usually, such people clearly leave their website URL. This is so that they can have their website linked permanently from your comments section.
Even though comment links are not considered valuable for SEO, due to the nature of SEO itself the rules are not well known. In some cases, I have personally seen comment links help in SERPs of really niche pages. But it could be a coincidence.
(Nerd stuff: Comment links usually have a nofollow attribute, which makes them lot less valuable than normal backlinks)
Anyhoo.. on the other end of the spectrum though are your actual engaged readers who love to leave a comment. They add a lot of value (for other readers) with their feedback, questions, etc. to your website.
And moreover, a person who leaves a genuine comment has a higher chance of
- wanting to promote your content (given an opportunity), or
- wanting to buy your products or services.
This is where Thrive comments plugin comes in. My favorite feature is to simply turn off the backlinks by default. This prevents spam links from getting added, and even prevents people who are sleazy in leaving comments.
Preparing the site-wide styles
This is is perhaps the most important thing, if you want to save your time changing designs. Prepare a style-guide. Just a minimal one.
A style guide is a loose definition of a one-page guide which visually shows, how the most common elements of your website should look like. It serves as a single point of reference that everyone working on the website can go back to. It reduces the time spent on design revisions.
Here is an example style guide from https://dribbble.com/shots/1756868-Web-style-guide
IMPORTANT: There is no right/wrong way to define a style guide. The elements contained can decided based on your needs. Usually if its a brand style guide, it is extensive with a lot of rules and examples.
For a website style guide, you can keep things simple to start with. And you can evolve it as you keep making changes. As a starting point, you can use the list below. List contains the basic elements you will need in a website style guide
- Logo on white, black and colored backgrounds.
- Typography / Fonts
- Headings – H1 to H6
- Paragraph text
- Links
- Font Weights
- Font Colors
- Font letter spacing
- Font line spacing
- Buttons – primary, secondary and outline styles
- Colors – List of permitted colors
- Lists
- Bullet styles
- Ordered and Numbered
- Indents
- Icons styles
The above list is just a reference. There is no hard and fast rule about what needs to go in your style guide.
But, remember to have a central style guide that is accessible to everyone who makes changes to the website. There will be times when the styles defined in the style guide isn’t sufficient. When that happens, just add the new style in this document and continue working.
When maintained well, a good style guide will
- Save hours of your time
- Increase sales and conversions on your website, by giving a consistent user experience to all your customers across the website (and other channels if done right)
Make the homepage first
Okay, so when you start either a new website or redesign an existing website, always make your homepage first. In fact, you can design the homepage from everything you’ve put together in your style guide.
The home page becomes a great first implementation test for your style guide. Also, you will see what works and what doesn’t. (So be ready to make changes to the style guide you made before)
A great homepage should have as many of the following elements
- A great StoryBrand style headline about one of the following
- What can you solve for your customers?
- What promise do you make to your customers?
- A clear bold primary call-to-action that is visually distinct and easy to spot.
- A good low-risk secondary call-to-action that offers them free value in terms of content. This needs to be connected to your mailing list so you can contact them later.
- A easy-to-memorize tagline below the fold that describes two things
- What do you do?
- Who do you do it for?
- Testimonials and other social proof (certifications, awards)
- Additionally, a way for them to give feedback easily (this tip is from the book – Making Websites Win). You can easily implement this with a service like hotjar.com
Building the other pages
When you start building the pages, you need to make a decision. Do you want to use Mode 1 or Mode 2 (as described above)?
My personal preference is to use Mode 2 for the following reasons
- It allows less room for errors as the styles are inherited already
- Thereby enables clients to create beautiful pages with design skills
- I don’t have to recreate a header/footer in Thrive Architect and maintain two copies
- So most general website pages will be created in Mode 2
That being said there are reasons why you might want to use it in Mode 1
- When you create a template that might be used in multiple websites that belong to your business.
- When you want something distinct from the website’s existing style.
- You want to make use of Thrive Architect’s templates to create campaigns/automation fast. This can be webinar pages, mailing list pages, etc.
Key points to save (a lot of) time
- Keep an image optimization plugin installed as early as possible. (E.g. Shortpixel, Smush, etc). This saves a lot of time, space and generates more money for your business. How? Because images are the #1 reason why websites become slow. And we often forget to optimize/resize them before uploading. Slow websites mean, lost visitors. Lost visitors mean lost revenue.
- Redesign your existing pages, instead of re-creating them. This helps you retain your old permalinks (URLs) easily. Think about plugins like Yoast SEO. All those settings will also be retained. Otherwise, it would be a nightmare to record them and replicate them on the newly created pages (especially if you have a lot of them).
- For more technical tips on preventing most disasters and saving time when using thrive architect, click here.
Mobile Optimization Tip
It is a shame that after all these years, they still haven’t set up a default padding/margin to make mobile optimization easy. I really hope someday they fix it.
For now, every first-timer goes through disappointment when they preview their newly built page in mobile view. It looks ugly with text touching the left and right edges of your mobile screen.
To prevent that
- Always put all your content into one or more background sections
- Remember to set up a left and right padding for these background sections so they automatically apply to mobile as well.
Read the full post about this technique here.
Before making your new website live
1) Have a test process with a checklist
Amateurs and hobbyists do not test. If your business has customers dependent on it, you need a test plan or your visitors will be disappointed, confused and you will lose revenue/new customers. Depending on the amount of time and people available you can try to do as many things as possible from the following checklist.
- Top traffic pages from google analytics
- Important marketing automation pages
- Pages that you think are important
- All publicly crawl-able pages
- Test them using your browser’s tablet and mobile simulator
- Chrome
- Edge
- Safari
- Other browsers if any is popular among your visitors (you can get this from google analytics)
- Test them using the most common tablets and phones
- iPads
- iPhones
- Top Android devices
- Find most used mobile devices (again from google analytics) and test on those
- Test your purchase flow pages
- Test your marketing automation pages like mailing signup, confirmation nudge page, and confirmation success pages. If you have other automation like webinars, test those pages too.
2) Get performance benchmarks
Get an idea of how well your new website performs. Remember that you will still test using a staging server so things won’t be as fast as the production server. But some web hosting companies help you temporarily switch on optimizations on your staging so you can test.
Use the following websites to test your website
- Google page speed
- Pingdom
- Webpage speed test
- GT Metrix
These websites give you a lot of data. So you will need a professional to make sense of it. Sometimes it is not worth it to get everything higher (e.g. google page speed numbers don’t always reflect real-world effects)
Here are some basic recommendations that apply to most sites
- In general, always have your pages load within 2-3 seconds to have the best user experience and not lose revenue.
- Enable lazy loading for images, so the page doesn’t have to wait.
- Enable script minify/combine for HTML, CSS and JS
- Use a CDN to deliver most static resources. Cloudflare is a famous free CDN. MaxCDN is a paid option. A free Cloudflare account also takes care of many security threats and performance optimizations automatically.
3) Setup Google Tag Manager and Google Analytics
It’s 2019. There is no way you can survive without google tag manager and google analytics.
Google Tag Manager
The tag manager can help you save loads of time. Today every website has at least a handful of third-party code snippets inserted inside them. Esp from companies like Facebook, Google, Chatbots, Marketing platforms, etc.
Inserting and removing them can be a painful process. Some companies still have to ask a developer to insert and remove them. Not to mention testing after that.
Google tag manager makes this process so easy. You can do it all from a single portal, test before deploying within your own browser.
Google Analytics
Google analytics has become the default analytics platform whether you like it or not. If you prefer alternatives go for it. But make sure you have at least one analytics platform integrated.
Here is an odd-but-useful google analytics tip
- Use the annotations feature on google analytics to note important events. Eg. new site launch, marketing campaign launch, SEO optimization activities, new backlink gain, etc. These will be overlaid on your timeline so you can understand your data changes better. For instance, if you mark your website changes, it will be easy to track when the traffic started dropping and work on reversing it to see if you can get it back.
The most important thing of all
It is your web hosting company. It can leech your productivity and revenue without even your realizing it slowly like a latent virus. A great web host will help your site load faster, assist you in times of need and help you generate a lot of revenue. The best hosting companies have so much automation and technology setup to prevent security attacks/losses and accelerate your growth.
Siteground is an extremely reliable and fast web hosting company for all businesses. This website is hosted on their servers too. I’ve been with them 2+ years now
If your business is bigger and you don’t mind paying a bit more ($35-$50 a month), then I recommend WPEngine or Kinsta. Once you try any of these guys, you’ll never want to go back. Their support is top-notch.
I have personally tested all the above web hosting companies for my clients and can vouch for them.
(Disclaimer: Siteground link is an affiliate link, as I use them too. When you click and buy their plans, I might get a small commission. But your price will be same regardless of whether you click the link or not)
