WordPress

Web Design for Newbies

by Andre H

Table of Contents

What is Thrive Content Builder

Designing a Website with Thrive Content
Builder Steps 1 - 14
Designing a website with Thrive Content
Builder - Steps 15 -21
Bonus Material
What is Thrive Content Builder

CREATINGWEBSITE.ORG
HOW TO MAKE YOUR OWN WEBSITE WITH THRIVE CONTENT BUILDER
 BY ANDRE HENDERSON
WWW.CREATINGWEBSITE.ORG

In this ebook I will walk you through the step by step process of how to design your
very own website using Thrive Content Builder. From the newbie to the experienced
web designer this ebook will take your website design to another level.

If you have any questions or need help with any aspect of your website please send
me an email to info@creatingwebsite.org and I will be happy to assist you.

Thrive Content Builder for Newbies
In this short but powerful eBook I will walk you through the process of how to create an
outstanding website using the visual editor Thrive Content Builder.
So, what exactly is Thrive Content Builder?
It’s a Click-to-Edit Front End Builder for
Your building a website.

Thrive Content Builder is a very simple click to edit visual editor: if you would like to edit
something on your webpage all you have to do is click on it.
With this type of technology, it makes a huge difference in how you create a website. It
makes the creation of your website much easier, the production of your website much
faster and takes the quality of your website to another level.
Thrive content builder is a drag and drop interface which means even if you are a newbie,
you can design a very nice website. This plug in will make the time that you spend
designing your website fun and exciting.

What you see is what you get

When it comes to visual editors there are plenty out there, but there are some features that
set Thrive Content Builder apart from the rest.
Thrive content builder is a What You See Is What You Get visual editor. Other visual
editors claim to be What You See Is What You Get, but it is more like What You See Is
What You Might Get.
 When you are dragging around abstract little boxes that represent your layout and
your columns, then what you see is not what you get.​
If you're looking at a user interface that's cluttered with labels, borders, outlines,
buttons and extra white space, then what you see is not what you get.
If your editor is on a completely separate screen from your actual web page, then
what you see is most definitely not what you get.



Not in Thrive Content Builder, the page you are editing looks exactly like the page the
visitors to your website will see. Another good thing about editing in Thrive Content
Builder is the changes you make to your website are visible immediately. So once you
save your adjustments and hit the preview button, you will see your actual website.

By the time you have finished building your website, thrive content builder would have
saved you a lot of time.

Thrive Content Builder is built for

Marketers
With features that will take any website to another level, there is no reason why you
wouldn’t want to use this visual editor to build your email list.
Here are some of the nice features that come with thrive content builder:

Conversion boosting buttons and call to actions:

You can easily add large attention grabbing buttons and call to actions to any one of your
post or page. You can choose the color, size, link and many more options.

Add Social proof with the testimonial element:
Testimonials are one of the most powerful elements you can add to your website. You can
create a testimonial in thrive content builder in seconds. You can choose from testimonials
with pictures or you can choose without pictures, it is up to you.

Reveal your call to action at the right time:

With this feature you can choose the amount of time before your purchase button or other
elements will appear on your webpage.

Content Boxes:
With this feature you can highlight important parts of your content. This feature is good
for feature lists, review summaries and to highlight a text that you would like to stand out.

Customizable, Responsive content tables:

Have you ever tried to create a pricing table in WordPress? Yes, I know it can be quite a
task, but with thrive content builder you can create a pricing table in a matter of minutes.

Countdown Timer
Do you have a special offer on your website that will only last for a limited time? Well
with this amazing feature you can add a countdown timer to your post or website with
ease.

Click to tweet box:

With this amazing feature you can boost your social shares with the click to tweet box,
which makes sharing your post as simple as a click.


Responsive Videos

Have you ever had the task of trying to add responsive videos to your post or web page?
You search in the plug in section, but just can’t seem to find the right one. Well, with this
feature you can add responsive videos to your post and website in a few clicks of the
mouse. Yes, it supports YouTube and vimeo. Oh you have a custom html video embed, yes
it supports that also.

Table on Contents
Want to add a table of contents to your blog post that is quit long. Well you can also do
that with a few clicks of the mouse.

Lead Generation Element:

You can build your email list with a plethora of opt-in forms to choose from. The cool
things about these opt-in forms are they can be place on any webpage, have a set time to
appear on your webpage and can be activated with the click of a button.

This visual editor is filled features and will get your results:
Styled bullet point lists
Responsive video elements
Visual html table builder
Customizable content boxes
Feature grids
Content tabs & Toggles
Responsive google maps embeds
Dynamic countdown timers
Opt-in forms
Easy table of content builder
Custom HTML & CSS

Here are some more reasons to use Thrive

Content Builder:
You can create nice layouts with Drag and Drop Ease:
This visual editor makes it easy to create any layout you can imagine, using the custom
layout and the drag and drop.


Another cool thing is that all columns and layouts that you create are mobile responsive,
so your site looks good on any device.
As long as you design your website with a responsive theme, all the content on your blog
or website, will be 100% responsive. Which means that your website and blog will look
great on any screen. So whether your website is being looked at by a mobile phone or a
computer at home, your website will always look great and have a lasting impression.

Add animation events to your website:

We know that movement attracts attention. Well with Thrive Content Builder, you can add
animations to images, buttons and more.
Not only that, but with the Event manager feature, you can create animations, trigger
lightboxes and so much more.

This plug-in also comes with a full suite of

landing pages:

Yes, even after mentioning all the features that we just covered there is more. This plug-in
comes with a bunch of landing pages that you can implement into your blog post or
website.
Now if what we have covered so far has not convinced you to try out Thrive Content
Builder, then let us let you know about one more thing before we actually teach you how
to design a website using Thrive Content Builder.
When you purchase the plug-in it also comes with landing page. Yes, this plug in even
comes with conversion optimized landing page templates.
That means not only can you can create nice content in your WordPress post and pages,
but you can also build some nice landing pages and customize them to your heart’s desire.

Let’s design a Website

Now we have just explained to you some of the features of thrive content builder, yes I
said some because there are more, but we don’t want to make it to complicated because
this eBook is for newbies.
But let’s put all the features aside, this amazing visual editor brings that joy back to
creating a website. Why because with this visual editor everything is instantaneous and
you don’t have to spend all kinds of time struggling with technology. There is just
something about creating your own website with Thrive Content Builder.

Many successful business men agree that a vital part of keeping your business ahead of the
rest is the speed of your implementation. How long does it take for your business to go
from an idea to actually implementing that idea? The faster you can go from having an
idea about your website to implementing it the better your chances are at staying ahead of
the game.

Thrive Content Builder will not only save you time, it will also help you to stop being
distracted because you are wrestling with technical stuff. With Thrive Content Builder,
you can build the pages your business needs quickly and with quality.


If I can explain it in just a few words: It is fun creating a website with this plug-in.

So with that in mind lets design a simple website with the plug-in. I will be using the
vantage theme to build the website.
Enjoy.

In order to start designing your website, you must have Thrive Content Builder plug-in
installed on your WordPress website.
 Click here to purchase a copy of Thrive Content Builder
After you have purchased the plug-in you can install it by following these directions:
Go to your Dashboard > Plugins > Add New > Upload Plugin > Browse for your
Thrive Content Builder file > Install now > Activate Plugin

Designing a Website with Thrive Content

Builder Steps 1 - 14

Step 1: Log into your Dashboard and select page:

Step 2:
Select add new page:

Step 3: Give your new page a title and hit save draft:
Step 4: Select edit with Thrive Content Builder

Step 5: Select Thrive landing pages and select choose landing page
Step 6: Scroll down to big picture video page select it and click on the green
button labeled load landing page:

Step 7: Delete material on page by selecting the red X’s on each item.
(Do not delete the yellow line at the top)


Scroll down page and select the rest of the template material:

You should now have a blank page with a yellow line going across the top of the page.


Step 8: Select the yellow section and choose background image:

Upload the image that you would like to use as a background image from your

. If you do not have an image choose one from the hard drive of your

computer by selecting .
Once you have your image uploaded choose your image
 and select

Step 9: Click on the image and select static image and full height image and then
save changes.

Select and depending on the image you have chosen your site should look
something similar to this:

Click preview to see how your site would look to visitors at this point.

Step 10: Let’s add some text to the image. Select Paragraph / Text element on the
right hand side of the editor.
Click and hold down the Paragraph/Text element feature and drag to the top of the picture
until the plus sign appears then let it go.
You should now have a line that says – “Enter your text here…”

Click on that area that says “Enter your text here” and type the desired heading for your
web page.

Don’t forget to click on Publish when you are done designing your website.




You can edit the text with the text element menu – Such as:
Color:
Bold:

Italic:

Underline:

Font Size:

There are many more features, but we will keep it simple since this is a tutorial for Thrive
Content Newbies.



After we had added our text our site now looks like this.


Step 11: Let’s now add an image to our webpage.

Select image on the right hand side of the visual editor and an image box will appear in
your website.

T
Then click on the image box that is labeled add image, hold it down and move to your
desired area. Click on the add image box and move it up until your mouse turns into a plus

then let go of the mouse button.


You should now see a line that looks like this on your background picture.

Now click on add image to choose an image from your media library that you would like
to insert.




Don’t forget to click on Publish when you are done designing your website.


We have selected an image that says CREATE YOUR OWN WEBSITE this image is in
.PNG format and from our media library. If you would like your image to be transparent,
make sure it is saved in .PNG format.

You can add as many images as you like. Just remember to make them .PNG if you would
like them to be transparent. We will now add some icons to the website.

Don’t forget to click on Publish when you are done designing your website.

Step 11: Adding image rows to your website
Click on Column Layout and select how many rows of icons you would like. We are
going to be selecting a 4 column layout which ¼ ¼ ¼ ¼.

Click on the layout of your choice, hold down the mouse button and slide the row layout
just underneath your picture.

Depending on the layout you selected you should a certain amount of rows available
underneath your picture.

Select image from the right hand side of the visual editor, hold down mouse button and

slide to the desired column.

(Don’t forget to delete the word column from your row.)


Step 12: Adding images to your row

Click on add image and select the images that you would like to insert to the columns
from your media library.

Step 13: Adding text to the top of image

Click on Paragraph/Text Element
Hold down and slide into the column box area above the image where you would like this
new text to appear.

Type in your desired text in the area that says Enter Your Text Here. You should now have
text above your pictures in the column.


Step 14: Adding a full width page section

Scroll down and click to the right of the visual editor where it says page section

Don’t forget to click on Publish when you are done designing your website.
Hold down page section and drag to the desired place on your webpage.
To change the background color, click on color of the page section row.

As in the previous steps of changing edit the text on a page, or change color of text or
change the size of text. You will do will use the same process to change the background
color of the page section.

To edit the text click on “This is the page section” and edit as you have done in the
previous sections.

We made our text say
“OUR MISSION IS TO TEACH YOU HOW TO CREATE A WEBSITE.”


Note: You may have noticed that when you scroll up or down the webpage your
background image stays in place. Pretty cool huh? That is because we have selected static
image. If you would like it to move up and down when you scroll just deselect static
image from Step 9.

Don’t forget to click on Publish when you are done designing your website.

Designing a website with Thrive Content

Builder - Steps 15 -21

Step 15: Adding a testimonial to your website

Click to the right of Thrive Content Builder where it says Testimonial it will expand and
then chose the type of testimonial you would like by hitting the plus button.
You can choose from Testimonials that have pictures or no pictures.


Editing the Wording:
You can edit the content of the testimonial by clicking on the wording in the testimonial
box.

Editing the Picture:

You can change the picture by clicking on the picture in the testimonial box and then
select choose testimonial image.

Edit the Font:
You edit the colors, size and font the same way we did before with the other text on our
website.

Click on the words in the box and the text element menu will appear.

Here is how the page looks with the testimonial added:


Don’t forget to click on Publish when you are done designing your website.

Step 16: Adding a call to action button
Select the Call to Action button on the right hand side of the Thrive Content Builder
visual editor.

The call to action section will expand giving you a choice of a call to action to choose
from. Select the call to action that you desire and click the green plus button next to it.
After you click on the green plus button your desired call to action will be inserted into
your webpage. If you would like to move it around just click and drag to the desired place
in your webpage.
AMAZING!!!

In order to edit any part of your call to action just click on the item that you would like to
edit and the general text element menu will appear.
Here is where you can change the font color, change the text, and even add a hyper link to
your Buy it now buttons.
In order to change the text of the button from Buy It Now to say Download Now. Just
click on the button text and have at it.

To add a hyperlink to your button, just click on the button itself and the call to actions

option box will appear enter your desired URL in the URL box and save
changes.

Step 17: How to add a fixed background image to your webpage

We are going to add a fixed background picture right above our call to action button.
In order to do that. Go to the right hand side of the Thrive Visual Editor and select page

section.
Click on the page section and drag and drop the page section just above the call to action
section.
Now let’s add the image, that will be the fixed image on our webpage.
In order to do that, click on the page section that you just inserted to your webpage and a
page section options box will appear.

Now select background image as we did in Step 9, but do not choose static image leave
that unchecked.

Go to your Media Library and select your image from there. Then

choose insert to post.

If you do not have an image, follow the same steps that we did in Step 8 starting from
upload the image. You will now have a fixed image on your webpage.

To change the height of the fixed image, just click on the image > click

and adjust the top and bottom margins.



Step 18: How to add a scrolling background image to your webpage.

In order to do that click on the page section and select background image as we did in Step
9, choose static image.

Go to your Media Library and select your image from there. Then
choose insert to post.
If you do not have an image you can follow the steps that we took in Step 8.
You now have a static background image on your webpage.
If you scroll up and down your webpage, you will notice that your background image
doesn’t move. Pretty Cool Huh!!!

You can add text to the page section by clicking where it says This is the Page Section
and typing your desired text. If you notice we have added the text that says Thrive Content
Builder Tutorial to our website.

Step 19 Adding a responsive video in our new page section area.

In order to do that click on responsive video to the right of the visual
editor.

Click on and hold down the responsive video selection and drag and drop into our new
page section area. It should look like this.



Click on add media and insert the URL of the video that you would like to insert into your
web page.

Click add media and your responsive video has now been inserted.
Ours looks like this.

You can edit and adjust the video by clicking on it and the responsive video editing box

will appear.

Don’t forget to click on Publish when you are done designing your website.

Step 20 Let’s add a footer to our webpage
Scroll down to page section on the right hand side of the Thrive Content Builder visual

editor and click page section .

Once you click it a new page section will appear at the bottom of your website.
Click on the text This Is A Page Section and type your desired footer text and click on

save changes. You can edit the text as we have done in the previous
sections. Refer to Step 10.

You can change the color of your footer background by clicking on the background of the
your new page section and your Page Section Options box will appear.

Here is how our footer looks.

You can add a hyperlink to your text by clicking on the text. The text element menu box

will appear.

Highlight the text that you would like to add the hyperlink to.

Insert the link destination in the box labeled URL

and then click the green insert button.

You can add as many links as you like to your footer. Just repeat the same process for each
link that you would like to add.
In order to change the size, color, or style of your text you can simply refer to STEP 10
which walks you through the process.

Click the Save Changes button at the top right of your visual editor.
You have now added a link to the text in your footer.


Don’t forget to click on Publish when you are done designing your website.

Step 21 – Adding links to your image icons
We will now add a link to the image that is at the top of your page.
This is a feature that you can add, if you would like to direct your visitors to another page
on your website or another place on the web.

In order to add a link to the image icon – Click on the image that you would like to add the
hyperlink to. The image icon box will appear.

Type the destination in the URL box that you would like your visitors to be redirected
and click on the green insert button.

and hit save changes at the top right of the editor.

Once your visitors click on the icon image they will be redirecting to the URL of your
choice.

Don’t forget to click on Publish when you are done designing your website.

Congratulations!!!
You now have a pretty decent website that you have designed on your own. Not bad for a
newbie huh?

If you have any questions or need help with any more features. Please feel free to contact
us by email at info@creatingwebsite.org or you can visit our Ask A Question section on
our website.

Bonus Material

Bonus Material: Adding a Countdown

Timer:
How to add a countdown timer. So you are having a limited time special and you want to
add a countdown timer. Here is how you do it.

Click on the countdown timer section on the right hand side

of your visual editor.

Choose your type of countdown by selecting the green plus button and a timer will be
inserted into your web page.

Drag and drop the time to the desired area of your website. By now I am sure you got the
hang of this.

Click on the timer and your Countdown Timer Options box will appear.

Enter the desired Day, Hours, Minutes and Seconds of your countdown and click

save changes.

You now have a countdown timer on your webpage. You can preview your timer by

selecting preview at the top right corner of the Thrive Content Visual Editor.

Bonus Material: Lead Generation feature

Select the Lead Generation option from the right hand side of your Thrive Visual Content
Editor and a Lead Generation box will appear on your website.

Click on the Lead Generation box and the Lead Generation Options box will appear.

Here is where you can connect your Lead Generation box to email services such as:
Aweber, GetResponse, and Mail Chimp.

Just click where it says Connect with service and follow the simple steps.
You can also edit your Lead Generation box features from here. Such as font colors, text
and font size.

Bonus Material: Adding Social Media
Icons
Select social share buttons on the right hand side of the visual editor.
Choose if you would like the custom design or the default design by
choosing the plus button next to your desired choice.

Once you click on your choice, the social media images will appear in your website.

To edit the features of the image. Click on the icon image you would like to edit and the
default social sharing options box will appear.

Then click on social options and the social options box will appear. Here is
where you can link these icons to your social media.
 Here is where
you can link your images to your social media. Such as Facebook, Twitter, LinkedIn,
Google and so much more.

Once you have linked your social media hit the save button and your social media
images will now link to the social media of your choice.

Bonus Material: Adding WordPress

Content
Click to the right side of your visual editor and select WordPress content

.
Once you click this option a WordPress editing box will appear that says insert WordPress

content click on that.

Once you click on the insert a WordPress editing box will
appear. Type your desired text in the box.

You can use this WordPress content box just like you would as if you are editing directly
from your WordPress website. To do this click you will click on the Add Media button and
select your image from your Image Library.

Your image will now appear in your WordPress content edit box.

Click save and now your image is inserted into your web page.
If you have experience with WordPress, then you will be familiar with the options in this
box.
If you are not familiar with WordPress, it’s ok – You can play around with this section.
You can add media, hyperlinks, text and much more.

Enjoy!!!
Extra Note: To duplicate any part of your website just click the green button and it
will duplicate that specific item.

Here is an example of the testimonial section being duplicated

Remember, if you are not satisfied with any content you can always delete it be selecting
the red X to the top right of the column.
These features alone can save a lot of time when you are designing your website.
Once again thanks for reading through this eBook. We hope that it has helped you
accomplish the designing of your own Amazing website.
Remember, if you have any question please email us info@creatingwebsite.org or visit
www.creatingwebsite.org and click on our Ask A Question section.
CreatingWebsite.org
Where our mission is to teach you how to create a website