Get Your Website’s Secret Design Code: Template Included

You know how some websites just look... good.

You tinker and tinker, but nothing you do achieves that look of professionalism.

It's like there's some design secret no one's letting you in on. And the truth is... there kind of is. And it's much simpler than you think.

More...

Consistency & Simplicity - Boring But Effective!

The design code outlined in the video above is a set of values you need to define and stick to on your website. The magic in the design code doesn't come from choosing the exact right shade of purple, or the cutest possible cursive for your headlines. It comes from the beauty of simplicity.

The fewer conflicting elements you have on the page, the more likely it is to look neat and elegant. While this lacks the allure of new age, cutting edge web design, for those of us without a design degree, 'neat and elegant' is a pretty good place to be.

The Design Code in Action

All we've done for today's remake is apply the design code. No, we weren't just feeling lazy. We just wanted to show you how dramatic an impact these simple principles could make.

Home Pro Circle's Before and After

Every website's design code will be different. How do you decide on the values? We'll take a look at the code we created for Home Pro Circle, and show you how you can choose the right code for your own website.

It has been brought to our attention that the original source for the funnel image used on the Home Pro Circle website is from Spiral Marketing. While we are not endorsing, are related to or in any way connected with Home Pro Circle, we want to make sure to give credit where credit is due for this image.


01

Choose Exact Color Codes for Your Site's Color Palette

  • Key Color 1:
  • Key Color 2 (optional):
  • Shade of Black:
  • Shade of White:
  • Additional Background Shade (optional):
  • Additional Background Shade (optional):

Home Pro Circle's New Color Palette

Key Color 1: #009A00​

Key Color 2: #007373

Shade of Black: #302E3B

Shade of White: #EFEFEF

Additional Background Shade: #151228

Additional Background Shade: #FFFFFF

Some helpful tools when creating your own color palette:

  • Paletton which will give your complementing colors based on a color code entered.
  • ColorPick Eyedropper, a Chrome extension, tells you the exact color code of anything you click on within your browser. Use this to find out the exact codes of the colors you're using on your site.
  • Pictaculous will give you a color palette based on an image you upload.

02

Choose Your Site’s Two Content Widths

  • Wide:
  • Narrow:

Home Pro Circle's New Content Widths

  • Wide: 1100px
  • Narrow: 960px

If you're unsure what content widths to go with, the two above are good choices for most websites.

An easy way to set this up with Thrive Architect is to use maximum content widths (see 3.20 of Shane's Quick Start tutorial for details on how to do this). You can apply maximum content widths to your entire page, background sections and content boxes.


03

Choose Your Site’s Main Font

  • Primary:
  • Secondary (optional):

Home Pro Circle's New Fonts

  • Primary: Source Sans Pro
  • Secondary (used on the buttons): Arial

If you like a font on another website, use the Chrome plugin WhatFont to find out what it is.

You can use any Google Font within Thrive Architect. Search through their directory for a font you like. You can even sort the fonts based on various criteria.

Applying the Code to Your Site

Create a design code for your own website/s. Download the fill-able design code worksheet below.

GET THE DESIGN CODE WORKSHEET

An interactive PDF to create you site's own code!

Your cheat sheet for good design on your site. Reference it when you're building pages, or send it to your developer so all their changes fit the look of your site...

Alternatively, copy/paste the code from this article to keep it in any format you like.

Make sure you save a design code for each of your websites, so you can refer back to it every time you make changes.

If you're using Thrive Architect, you're in luck. Applying your new design code should take less than 30 minutes:

Step by Step: Applying the Design Code with Thrive Architect

  1. Change the color codes of all the elements on your page to match your predefined color palette. You can save your new palette in favorite colors for quick switching.
  2. Set the maximum content width of your page (in Landing Page Settings) to the widest of your two chosen widths. Use background sections to create the narrower sections, changing the Maximum Content Width in Section Options to your narrower width.
  3. Change all the text to your chosen font/fonts (and make sure your font colors are from your new color palette). You can use any Google Font directly within Thrive Architect.

Will you be creating a new design code for your website? How you found any other useful design tips you'd like to share?

Let us know in the comments below!

Author: Stephanie Kelly

Stephanie is a slow traveler who loves anything that can be described as remote, country or outback. She dabbles in documentary making and seeks out unique experiences. With a passion for helping small business utilize the internet for growth, she enjoys demystifying the web for those who could benefit from it most.

113Comments

Thomas M Reply

Hey Stephanie, great video. The 2 width design is a new one to me and certainly adds a touch of class. I see you have values of 1100 and 960 pixels for desktop. What would you recommend on tablet and mobile mode?

    Stephanie K Reply

    Hi Thomas,

    Great question. With mobile and tablet it’s an entirely different ball game since the smaller screen sizes don’t allow for as much use of ‘free space’ for design purposes. Use of content widths in these situations leads to some pretty squeezed up text!

    I would recommend using the two content widths on desktop only, then using the principles in this tutorial on mobile optimization to guide your changes for the smaller screen sizes.

      Julye L Reply

      Hi Stephanie,

      I’m looking for the specific tutorial to set up the values of 1100 and 960 pixels for desktop. Could you provide me with the direct link please? Thanks!

      Amber R Reply

      I would like the answer for this as well. There’s a link to ALL the tutorials in the tutorial, but no the specific one.

      Stephanie K Reply

      Hi Julye,

      Take a look at 3.20mins of Shane’s quick-start tutorial (here’s a direct link) to set up the widest width on the page level, then you can use the max width function on either a content box or background section to set the smaller width. Here’s a tutorial on how to do that
      (at 1.30mins). Then just duplicate that section or box a few times to use through out the page so you don’t have to set the width each time. You can even save a blank page with these settings so you don’t have to set the widths with every new page.

John T Reply

Much needed! Thanks!

Helen R Reply

Thanks Stephanie, that’s a very useful post. I’m redesigning some sites at the moment and this has helped me get clearer on the design basics. Can you give any pointers on why and when to use the wider and narrower content widths please? I haven’t heard of this idea before.

    Stephanie K Reply

    Hi Helen,

    Since the principles are based purely on improving the aesthetics of the site, not conversions or optimization, it really is just what looks best on the particular page. I find it best to alternate between the widths, like you see in the Home Pro Circle example, but again, as long as you stick to the two main widths you can go wild!

Tom B Reply

Hey Stephanie… great post. Can you go a little deeper on your third point for fonts? I know it gets a bit more geeky than user level but it makes all the difference. :)

Specifically, headings and paragraphs. They look more professional when they are consistent. But the challenge is making all the changes as they are used each time.

My question is:
How do we change these SITE-WIDE?

Picking a font and having a code to follow is great… but changing them from the default each time you jump into write a post or create a page is so time-consuming and what is worse… leads to user error and inconsistency.

Not to mention when you want to change to a different font across your site… jumping into every content box is crazy… when it can be automated site-wide.

Where do we set these font basics:
– font type
– size
– line height
– colour

How and where do we define font specs for these basic building blocks:
– Paragraph
– Headings (h1, h2, h3… to … h6)

It is likely css and Thrive Themes has a few spots to add css snipetts.

Which place is best to do this site-wide?
And what are the code snippets?

This will be such a huge help.
Many thanks!

    Joellyn S Reply

    I second this request. I don’t know why there isn’t a master stylesheet that we can easily go to, instead of the manually changing settings page by page.

    I had to use custom CSS with a child theme. I’m still constantly fighting with it because Thrive’s CSS often overrides my settings, even when they are marked !important.

    It would be a huge step forward and a massive time saver to give users a single page where they could set the master settings for their site (p, h1, h2…, li, etc.).

    The default WordPress “Appearance > Customize” doesn’t cut it.

      Stephanie K Reply

      Hi Joellyn,

      I understand you’re frustration, it can be quite a pain mixing the theme with new page designs. A lot of the issues with Thrive CSS should be solved with Thrive Architect. The new templates don’t use any CSS, and new blank pages will inherit your themes style settings. We are also working on a new theme and with that, it will be easier to have a consistent style across everything on your site.

    Stephanie K Reply

    Hi Tom,

    We love geeky :)

    If you have a Thrive Themes Theme, there is a quicker way to change the default fonts. You can change your default header and paragraph fonts for your entire site. You can also change other appearance settings.

    If not, it depends how you’ve built the pages in the first place, but try going into Landing Page Settings when you open a page in Thrive Architect. You’ll see a ‘Landing Page Fonts’ drop down. From here you can change your default heading and body fonts. Again, depending on the way the page was put together, this could change all the existing heading and body text on the page, so you don’t have to go through text box by text box.

    For new landing pages, if you’ve used the Theme wide trick your new font should already be set. If you don’t have a Thrive Themes Theme, you can add all your preferred fonts in a new landing page (in Landing Page Settings), save it, then just start each new page with that template. That way all your settings will already be in place.

      Tom B Reply

      Hi Stephanie:
      Thank you for responding. Yes I have Thrive Themes! Love all the tools.

      Our headings discussion is not out of the woods yet as they say. Bear with me here as this is unclear in the forums as well. I’ve asked there too. :)

      There is confusion with several terms presumed to be the same thing but they aren’t: headings, headers and headlines are all different.

      To make things worse, headERS has two meanings. lol. (First, the top of a page like where the menu goes kind of header. And second, the SEO tag type for h1, h2, h3 to h6 kind of headers also known as headINGS. Confusing :(.

      I just looked at your first link. Going to Appearance/Customize/Fonts points me to changing headLINES. But… that is not the SEO tags referred to as headINGS/ERS specifically known as h1, h2, h3, h4, h5 and h6 headINGS/ERS (the second meaning of headers).

      Now that section also has settings for what is called Body Font. Is this for what is known in web design as Paragraph? (more below on that). So that does not help, good to know though and on the right track of system wide changes. Thank you.

      ~
      Now in that section there is another area a few items down titled headER at Appearance/Customize/Header. This is specific to the top of a given page where the menu is (first meaning of headER). Also not what is needed.

      What I am looking for is headINGS/ERS (or the second meaning of headER as in h1, h2 headER) for writing blog posts.

      This is very important for SEO. They say to only have one h1 heading/er on a post as the title… then use h2 headings and h3 etc for organizing your content… best practice is to not only organize content but put your keywords for that post or article into those h2 and lower headINGS/ERS.

      What is a mystery is this:
      – Where is the place to define and set up these all important h1, h2, h3 headings/ers at the user/editor level in Thrive Architect (TA)? Or…

      – Does it require css snippets to get’er done? :)

      I know there is a place to put site-wide and page specific css snippets in TA… but if there is a place in the editor that is more simple (and safer) all the better.

      If it is down to snippets… I’m up to geek out… but just need to know which it is?

      If geeking out, my question then is:
      What are those snippets?

      It will be a standard set of instructions every web owner needs to know… just like your Design Code for:
      01 Color Palette
      02 Content Width
      03 Main Font (Paragraph)
      04 H1, H2… (SEO HeadINGS/ERS)

      ~
      Next, your reference to landing page… is only a workaround at best and not addressing this site-wide h1, h2 mystery.

      ~
      To Wrap up:
      This headING angle I’m speaking of h1, h2, h3… to … h6 is a fundamental building block of web design. It is not only specific to blog posting but also content creation on any page of one’s site.

      As a matter of fact when using TA and in a text box there are only ever 7 items in the drop down menu for the paragraph icon… it is to the left of the Link icon in the pop up tool bar in every text box.

      They are always these 7 items:
      – *Paragraph
      – Heading 1
      – Heading 2
      .
      .
      .
      – Heading 6

      ( * Don’t forget the Paragraph, I’ve not mentioned it much to keep this simple. It may or may not be what I referred to earlier as Body in the Appearance/Customize/Fonts area. It is no less important. :)

      The key question is:

      Where are the site-wide settings to define these 7 text types?
      – What are the current Theme defaults?
      – Where/How do we define and change them?

      I’m not the best at this and can’t find it in the editor. I presume it is there or maybe it is just missing in the tool. (My guess is it is missing as it is so basic and obvious to the engineering/developers.)

      If it is missing… your Design Code article becomes so valuable!! Perhaps it will be the only place this information rests?!

      I appreciate your patience and help with solving this mystery! :)

      (PS. You can rev your blog post!! Do a, 2 dot oh version of your Design Code!! :)

      Hanne Reply

      Hi Tom,

      Let me try to make this clear(er) for you.

      In the customize tool of WordPress, you can change the “Headline Font” this is the one that is used by WordPress for the title of your page or blog post. This also is an H1 (heading 1)
      The “Body Font” is like you assumed what’s also referred to as “Paragraph”.

      Header is the area where you put your menu and logo.
      If someone talks about headers when referring to H1/H2 etc. They are mistaken, the correct word is headings.

      SEO tags H1/H2/H3 etc ARE headings or titles (it’s not something separate) the H1 just refers to the HTML code of that heading.
      So when Steph suggests to use one of two fonts maximum for your headings and body text this includes h1/h2/h3/…

      When you write a blog post, you should use the H2, H3 etc. and if you’re using Thrive Architect, you can find them in the inline text menu when you add a heading element or a paragraph/text element on the page: https://cl.ly/2d223d110b3o

      If you want to customize these other headings (H2 and smaller) and you are using a Thrive Themes theme, you can do that when you go to the menu “Thrive Dashboard” select “Theme options” and go to “Style and Layout Settings” here you can add custom CSS for all of your titles (to change colors etc.)

      That being said, our themes are designed to look good and clean out of the box, so you probably shouldn’t mess around with these too much.
      I suggest simply choosing one of the color schemes (in that same style and layout settings menu) and leave the default pick of fonts, sizes and colors as the designers made them :)

      One last note in order to be as thorough as possible, if you are starting from a (blank) landing page template rather than a normal WordPress page, you can change the font settings (paragraph and H1 to H4) without CSS (!) in the “page setup”, “landing page setup”, “landing page fonts”. https://cl.ly/0C3S1O2f0v1M

      Hope this helps :)

      Tom B Reply

      Hi Hanne:
      This helps! Thank you.

      One of the great things I like about the Thrive Themes is the table of contents function. That is the coolest… it uses headings to trigger it’s built out.

      My desire is to gently push a bit on the design side of font. To be clear, I love the Thrive philosophy of conversion-focused sites.

      “Pretty sites” don’t convert. They more often than not look messy and unprofessional as too many design elements get incorporated. Best practices on clean professional sites are usually fewer design elements are best. I get that.

      The challenge with a conversion focus is the sacrifice to design control.

      One of your major competitors has some basic user design-control of elements. The payoff is the creation of a unique/custom looking site… yet is still professional looking and not messy. They do a great job of incorporating these basic design control into the theme.

      I apologize for pushing the envelope here. The gains you guys have made from TCB to TA on the font front is great. :)

      The point is, once familiar with the themes, one can spot a thrive site a mile away as the look and feel is all the same.

      To those who care… font, the white space around it and it’s design elements are what create the look and feel of the site. Especially on a conversion focused site.

      A conversion focused site is not laiden with graphic design elements… it is basically just down to 3 things:
      – font
      – white space and
      – images.

      This area of font is all but sitting right there in TA…but it’s not quite there to easily and safely create a custom look and feel on a site-wide basis. I’m forced to get geeky with css vs a Thrive interface to make it easy, safe and consistent.

      ~
      Here’s a question… if a bunch of pages are created with the landing page approach you suggest above… and the default font selection used… how then in the future are those fonts changed? Each page and text box needs editing? or… site-wide with the WP customize tool?

      My understanding is the landing page approach overrides the WP setting as the given page was customized as it was built. That creates a ton of work to brand a site with 2 basic fonts.

      Hanne Reply

      If you leave the fonts in Thrive Architect to “inherit” it will take the fonts of the theme.
      If you change them (on landing page settings level or on individual elements) the fonts will not be changed when you use the customizer.
      Also, our new themes will be much more customizable (and fonts are part of that :) )

Jesse C Reply

I love you guys, but PLEASE simplify the Thrive Architect editor UI. Extremely cumbersome compared to Thrive Content Builder. I used to be able to edit anything within 2-3 clicks…. now I have to constantly scroll, fumble around with expand/dropdown menus, rescroll, then finally edit for every little property. Has literally tripled the amount of time it takes to edit a page…. and why? Just so it looks fancy? Terrible decision from a user perspective.

    Aart v Reply

    I agree with Jesse. More complicated. Nice features but not better in using it the easy way

    Nathaniel R Reply

    Agree. Even without the learning curve, the sliding up and down, opening a box then sliding or clicking to change a value, then clicking to close that selection, and then sliding back up to select another element … whew, thanks for giving us the Atomic 2 landing pages, etc. I may keep my sites to 4 pages and just using landing pages or blog entries. Sure do miss TCB …

      Stephanie K Reply

      Same with you Nathaniel, thank you for the detailed example. We are paying attention to these comments and are working to improve the usability of the interface.

    Joel Reply

    I couldn’t agree more with Jesse’s comments. In fact, I commented on something very similar to this in a previous TT blog article. It is my opinion that it is very tedious and difficult to constantly have to scroll up and down inside the TA editor panel. I suggested something as simple as making the scroll bar a little wider. Not a perfect solution, I know. But at least that way I could more easily “click-n-drag” up or down instead of overworking my knuckle and wearing out my mouse wheel as I have to do now. Unfortunately, Shane responded: “A wider scroll bar will not happen, no.”

    I’m sure he and his design team have their reasons, and I know that my “solution” wasn’t optimal. But what I do know is that using the TA editor panel is just not as efficient as it could be, making it a lot less useful and a lot less fun to use. Maybe with Jesse’s comments, the usability of the TA editor panel might get another look. I’m not complaining as much as just trying to provide some honest feedback on what otherwise is a great product.

    Stephanie K Reply

    Hi Jesse,

    Thanks for letting us know in this amount of detail. It’s actually really helpful when developing use cases for UI improvements.

    We are constantly working on improving Architect, and UI feedback is definitely appreciated :) (and hopefully we can get it to a less frustrating point for you soon!)

deshpandekaivalya333 Reply

Are you Serious about this???

Who goes this much above and beyond to provide in-depth guidelines, and value to their customers?

You guys Rock! I am Learning A LOT.

Even though I haven’t Bought any of your stuff (yet)
I will be investing into it pretty soon.
I am excited as hell to try everything out.

Thank you so much for everything.

Great Video! How do I get you guys to review my site!

    Stephanie K Reply

    Hi Kelly,

    If you are a Thrive Themes member you can submit your site for review in the Member Navigation menu within your Member Dashboard.

David D Reply

Hope on many more instructional videos to come from you Stephanie. Very well done, clear, excellent presence and setup.

4mythings Reply

–> “Change all the text to your chosen font/fonts (and make sure your font colors are from your new color palette). You can use any Google Font directly within Thrive Architect.”

Is there a place to set the default font for all new elements? How about to change the font for all existing elements, without having to edit each one?

Excellent post. Thank you!
How do you set up the widths in Word Press?

    Stephanie K Reply

    Hi Carol, if you’re using Thrive Architect you can find the instructions on how to do this in the article above (in the grey box). Otherwise it depends on what editor you’re using.

Hi Stephanie, thanks for your article and video, great, helpfull and easy to implement. Now a question: What is the best (most candy for the eye) font size for desktop, for tablet and smartphone respectively? Any informed opinion about that?

Thanks,
Demian

    Stephanie K Reply

    Hi Demian,

    As for mobile and tablet, I’m afraid I cant give you anything besides opinion (lacking the informed bit :), but for desktop it’s recommended you don’t go below 16px for paragraph text. Otherwise it can get difficult to read, and you don’t want to put any barriers like that between your visitor and your content. Other than that, it’s just sticking within reason, hitting that preview button and seeing what works for your particular site.

Frank M Reply

Thrive Architect has been eating my lunch. With Thrive builder, I clicked add new post. I then used that new post to set a new version or just plain new sales page up complete. That way if anyone went to the sales page. It was up and running. When the page was finished and everything checked out. i just copied all the code. Saved the code. Went to the sales page. Copied the code and saved it. Then hit select all, delete. I then pasted the new code in and hit save. The sales page was down only a very small amount of time.
With Thrive Architect, I created a sales page. Copied the code then pasted into a new page. I wanted to see how it came out before pasting it into the real sales page. Top and Bottom spacing was all off. I had set it up for desktop, tablet and mobil.
My offers have somewhat the same format. Title. Sometimes text underneath the title. 2 column layout with an image of the product on the left. Text in the right column giving benefite.
Plus a more details button I created.
Then the price at the bottom.
Sometimes the layout is title text below title or title, text below title and accordion for additonal images or benefite.

Had bright Idea.
Grabbed content box. Put the content box just above the title. Then moved every thing from the title to the price at the bottom into the content box. Set everything up for desktop, tablet and mobil and saved it. Now have content template for each version of my offers. The spacing stays the same. desktop, tablet and mobil all come out. Success at last.

When you have certain patterns of your offers that repeat. Put the whole pattern into a content box. Set the desktop up. set the tablet up, set the mobil u and save that as a content template.
Now a Happy Frank

    Stephanie K Reply

    Hi Frank,

    Sounds like you’ve figured out the system! Optimizing the content for all screen sizes before turning it into a content template saves a lot of time.

    Glad to hear you figured it out, we like our Franks happy ;)

Horst Reply

Greta. One more question:

How would you handle the 20/10px Rule for Side Padding Shane has shown in another Video with respect to site/section width?

    Stephanie K Reply

    Hi Horst,

    Side paddings are a little different to content widths, but they do effect the width. If you are consistent with your padding and widths for each section of the page (by consistent I mean setting your elements to the same width and adding the same side padding each time) it will all still line up.

    You can even build the side padding values in to your max width calculations. Say you want your content to be 1100 wide on desktop, but you’ll be adding 20px padding each side. You can set your max content width to 1060 (1100 – 20px each side) then use the side paddings to add the extra 20px of spacing each side. But again, the exact numbers don’t matter, as long as you are consistent with the widths down the page.

Ryan M Reply

what are the best font sizes?

    Stephanie K Reply

    Hi Ryan,

    Anything above 16px for the body text is best practice. Aside from that there, is no universal ‘best font size’ for a page. I’d imagine it’s a bit like comparing button colors. It’s not going to make too much of a difference as long as it’s done within reason (eg. one word a line is probably too large :)

Definitely always have this lingering feeling that something’s slightly off when designing a page, even though identifying it can sometimes be very difficult. But this post did gave a bunch of sparks:

1) For a while, I maintain a dozen of well-chosen colors to be used anywhere in the document. In some occasions, experimentation with 4+ colors can be very successful, but they can also be way off at sometimes due to lack of unity. Just because individual colors are all great doesn’t mean that they’ll work well together, and the before-after photo with your reviewed site confirms that thesis.

2) In general, I’ve found that using full-width background section gives a more professional feel, and if you experiment a bit you might realize that it’s a bad idea to stretch the content also to full width. In light of this, narrow content with full-width background generally gets the cleanest look.

3) A lot of time the design flaws are in the spacing of border and padding. Keeping them consistently the same is generally a good idea, and this is where getting used to duplicating content and loading content template can be very useful.

    Stephanie K Reply

    Hi Thomas,

    Thanks for sharing your experience. Very good points.

    Multiple colors can definitely work, but like you mention, it’s a pretty difficult to get right unless you’re a designer. That’s why here we just recommend sticking to one or two, it’s a lot safer/cleaner/less chance of color soup.

    Borders and padding are a great extra mention.

John Z Reply

sweet! thank you

acu.insights Reply

Thanks, this was very helpful!

Very nice tutorial. I learned a lot. Very actionable content.

Do you recommend the colors of post featured images, content boxes and other content templates stick to the sites color palette or is there more flexibility with these elements of a site?

    Stephanie K Reply

    Hi Len,

    Great question. It depends if you have a featured blogs section on your homepage. If yes, I’d recommend sticking to at least some sort of color scheme, but featured image color schemes are one of the few cases you’d be safe with more than two key colors. I would suggest using your key colors to find similar, complementing colors (by choosing your featured image colors in a tool like Paletton), noting them down and sticking with them. Authority Hacker’s homepage is a great example of feature image color schemes done well.

    For the content boxes and templates, on a blog post you have a little more freedom, but if it’s on your homepage or a landing page and you want to be sure it looks good, I’d stick with just the two key colors.

      Thanks Stephanie,
      Is there any way to adjust the color of a call to action widget beyond selecting “blue” or one of the other standard colors that don’t really match your palette? It would be nice if you could specify specific colors for these elements rather than selecting from a drop-down.

      Stephanie K Reply

      Hi Len,

      Sounds like you haven’t updated to Thrive Architect yet? That was a constriction of the old Thrive Content Builder. Now you can style your CTA boxes in any way you want, including choosing your exact color codes. Here’s how to get the new CTA designs once you’ve updated to architect.

Frank M Reply

Thanks. I downloaded the guide. I can implement it very easy on my sites. I found out about setting up content templates. When I set one up for desktop, tablet and mobil, I can also set the template up for professional looks.
Thank you

    Stephanie K Reply

    Oh good you got the guide. I’ve found it very useful to keep somewhere safe to refer back to when I’m adding or changing something on a site, I hope you do too :)

Mike H Reply

I wanted to weigh in on the UI comments, given you are monitoring feedback.

I LOVE the new UI. To me, Architect is definitely a step up from Content Builder.

    Stephanie K Reply

    Hi Mike,

    Thanks for the positive feedback, we appreciate hearing that side of things too :)

Hi Stephanie,
I’ve been delaying my site’s “makeover” for so long… Thank you so much for the tutorial. I’m positive I can make something nice with your guidelines.

    Stephanie K Reply

    Hi Irena,

    Best of luck with it. I’d love to see the finished product!

Hi Stephanie, can we set the 1100px width site-wide so that it applies to all pages that aren’t using a Landing Page template?

– Fiona

    Stephanie K Reply

    Hi Fiona,

    What pages in particular were you hoping to set the widths for? It depends on the page type. Most themes will have default width for the blog pages, and for that I’d recommend sticking to the default width. Other pages, it really depends on the page. The alternating content widths look great on homepages and landing pages, anything with a full width layout. In those cases you have to set the width per page, but an easier way to do this is create a blank landing page with all you preferred settings (including content widths), add it to your saved landing pages then just start each new page with that template.

Rhonda Reply

Hi Stephanie,
Thanks for a wonderful tutorial. I’m totally new to this, but this was easy to understand and gave me specific action steps to take, plus the template to do it. Now I feel that I can get started and not look like a total beginner.

    Stephanie K Reply

    Hi Bowen-Bells,

    This comment makes me very happy. It’s exactly what we’re hoping to achieve when we put out this type of content. Best of luck with it all and great to hear you’re taking action!

Awesome!
Thank you so much!

Joe P Reply

Great article, Stephanie. Thank you!

Great work! I love how you are using the 20:80 rule to teach basic rules that have high impact.

    Stephanie K Reply

    Exactly Michael, it’s these small changes that make most of the difference!

Ray L Reply

Like always very informative, thanks for the good info.
I will take a closer look at my websites ;)

Keep up the good work! (team)

Zane W Reply

Thank you, Stephanie. This video is very informative. I like the color pallet you’ve selected.

    Stephanie K Reply

    Hi Zane, Paletton and the original logo color were entirely to thank for that! Honestly, paletton makes it quite hard to make a bad color choice :)

Aliusha M Reply

Where´s call to action buttons in Thrive Architect????

Leigh Ann K Reply

I am having trouble with the DIY stuff. My website looks ok but I am not super happy with it. Do you have a service to help DIY beginners tweak the final look?

    Stephanie K Reply

    Hi Leigh,

    We do not have a service like that, but there are many sites (such as Freelancer and Fiverr) where you can hire a design to give feedback.

Santiago Naranjo Reply

Great job on this article. Simple but very effective! I utilized the 3 tools you mentioned here and cleaned up my site a bit. Let me know what you think: http://weddingsbysantiago.com.

    Stephanie K Reply

    Looks great Santiago! My suggestions would be to add more margins between elements so there’s a little more white space on the page. And add about 20px padding each side to the black transparent content boxes up the top.

Paul J Reply

Hi Steph, great video instruction. Thanks for that. I’ve got one question regarding font size: how many in maximum?
Cheers,
Paul

    Stephanie K Reply

    Hi Paul,

    There is no one size that is the maximum. I would say just use your judgement as to what you feel fits in with the page and it’s and content (and don’t go ridiculously large :)

      JuanPedro S Reply

      Aloha Stephanie,
      I think you misunderstood PaulJ’s question.
      He is not asking about the maximum font-size but much rather about
      the maximum number of different font-sizes on one and the same page.

      I would also be interested in this.
      Many thanks.
      JuanPedro S

      Stephanie K Reply

      Ah I see, thanks for clearing that up JuanPedro. You’re going to hate me for saying this, but again, it’s quite context dependent. It will change based on the number of different page sections you have, the format of those page sections and what other elements you have on that page.

      For a simple layout with only a few different sections (if you’re going with elegant simplicity) I’d suggest sticking with one heading size, two subheading sizes and a paragraph size. And then a smaller size for footer and caption text.

Derek W Reply

Hi Stephanie,
I’ve been building sites for nearly 20 years and still learning, thanks to you. Really useful info.

Mario Goncalves Reply

Appreciated very much and liked your video very much

Jay Cameron Reply

I appreciate your instructions. I am however a newbie to both website development and Thrive Themes, having recently become a member. Is there any way to pay for one on one coaching for 2 to 6 hours to assist with becoming familiar with Thrive Themes?

    Stephanie K Reply

    Hi Jay,

    We don’t have any coaching services, but this Getting Started page will help you get familiar with putting together a website and using Thrive Architect.

Philipp K Reply

Hi Stephanie, overall a great video which definitely goes into the right direction. However, I personally find that it not totally hits the spot.

Main critique is this:

I would always choose 2 colors and if possible 2 colors that go “hand in hand” like monochromatic, triade etc. Of course – as you said in the video – this really depends on previous decisions like colors in logo etc.

I am with you when it comes to shades of white and black, great advice.

In regards to fonts I also tend to have two fonts instead of just one. Sometimes I even use three. But I do not choose them randomly but use again a webtool that showcases “heading”, “content” and “button” fonts that go well with each other –> http://typ.io is an amazing tool (not affiliated :)

Nevertheless, amazing video (as always)

    Stephanie K Reply

    Hi Philipp,

    I’m not sure I understand your comment about the colors, we suggest you choose one or two colors and if you choose two you should use a tool like Paletton to make sure they go well together.

    We also suggest one or two main fonts, the second is optional and if you’re new at building websites it’s probably best to just go with one to avoid clashing fonts. But two fonts is an option and is in the design code.

    Great tool suggestion! Google fonts also has a tool like this, but the one you linked is much more visual.

Amber R Reply

Hi, Great tutorial (as always)! I’m wondering how to change the width design for a page that isn’t a landing page. In Shane’s tutorial he’s in a landing page, but not a normal page. I’ve been playing around with things, but can’t figure it out. Can you send me a link or tell me how to do this? Thanks.

    Hanne Reply

    Hi Amber,

    If you’re not using a landing page, quickest way is to set this max width per background section.
    You can see how it’s done here

Great tips, thank you. I’m having problems with TA. My testimonial boxes now look terrible on my pages and I’m having problems fixing them. I created a new one from scratch but I’m unable to save it to content templates. I’m also having problems adding colours to the testimonial inner box. Help! They were originally created with TCB.

    Stephanie K Reply

    Hi Joan,

    I’m sorry to hear you are having trouble. In order to get the best help on this I’d suggest posting in the support forum. As for the content boxes, you should be able to save them as content templates. This tutorial has some useful information on saving content templates in Thrive Architect.

      Joan B Reply

      Thanks, Stephanie. I can’t post in the forum because I don’t have full membership. I have one page where 2 images have completely disappeared, even though the image ‘box’ is still displayed in the editor. A long text box has also disappeared (even though both of these show up in the editor) This is so frustrating, I spent so long building this page and now it’s a mess. Can anyone help?

      Stephanie K Reply

      First I would try adding new image and text elements and seeing if they have the same issue (it might have been something to do with the conversion from TCB to Thrive Architect). If that doesn’t work it might be they are being hidden behind another element such as a content box or background section. Make sure the z-index of those disappearing elements and anything they’re contained in (columns or content boxes) are a higher number than the background sections. You can find more info on this here.

      Also try searching the support forum for existing tickets, someone may have had the same problem as you that has been solved.

Thanks, this will help tons at new job!

Jacob S Reply

I’m about to start using the Rise Thrive Theme. I know that I can easily control the fonts and colors, but how would I control the widths? Or do all Thrive Themes already have this concept built in?

    Stephanie K Reply

    Hi Jacob,

    There’s no way to control the width layout suggested on a theme level, but you can achieve this by setting the landing page width to your largest width, and using a background section to set your smaller width.

Mark W Reply

Hey Stephanie

When you add a Paragraph/Text element and the max width states “auto” I assume that is the width set up as the default – ie 1100px in your example.

Is there any way to “automate” the Narrow width site wide or do you suggest using a Background Element or Content Box set at that width and saving as a template then using that wherever required?

AND, is there anywhere to set a site wide max width of 1100 rather than remembering to change it in the Landing Page settings each time a new page is required?

    Stephanie K Reply

    Hi Mark,

    You are correct about the auto, text elements will assume the widths set by what ever element they are inside of, unless you tell them to do different.

    There is no automatic way to set the varying widths in your theme, but an easier way to systematize this is to create you own default template: to do this is create a blank landing page with all you preferred settings (including the largest content width), add a background section with your smaller content width, save the landing page to your saved templates
    then just start each new page with that template. That way you can just duplicate the background section for the smaller width sections, and the wider width will already be set.

Awesome, thanks for this! Great content.

Awesome, thanks for this! Great content.

Really helpful, Stephanie. Thanks for sharing this with us.

Cory Goneke Reply

Hey Stephanie. Good video.

Quick question about content widths:

Why is it advisable to do content widths based on pixels vs content widths based on percentages?

I generally always do a 90% and an 80% width. Would I be better off to pixel width instead?

    Stephanie K Reply

    Hi Cory,

    Great question. I cant think of a reason that percentages wouldn’t work instead. Percentages might even be a better strategy for instant mobile responsiveness.

David C Reply

Another great tutorial. I especially love the tips on the external tools like Palette.com, whatfont, and colordropper. Didn’t know about any of those tools. I would do it the old-fashioned way, using a color wheel in photoshop and trying different schemes. These tools really speed up the decision-making process. Thank you!

    Stephanie K Reply

    Hi David,

    One of our designers was trying to explain to me the other day how to use the color wheel manually. I’m with you, happy to stick with paletton instead :D It’s pretty amazing the tools that are available out there. It’s just a matter of finding them.

Interesting. That funnel image was pulled right off our website – me and my design team designed it. Nothing (not even the fonts) were changed. I guess copying is a sincere form of flattery, right? The original is here: https://spiralmarketing.com/services/funnelmanagement/

    Stephanie K Reply

    Hi Karl,

    That’s disappointing to see. While we encourage looking at other sites for design inspiration, blatantly copying elements is a huge no-no. I’d suggest taking it up with the owner of Home Pro Circle.

Hi Stephanie,
I am a new member to Thrive and I am currently building my website using the Squared Theme. I have developed my branding colors for my website; however, the Theme only allows me to choose from 1 of 6 colors. How do I put my own custom colors in the theme?

Thanks,
John