THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLOSURE FOR MORE INFO.

Creating personal blogs or websites had been around since the modern era of the Internet. Some of us have started our personal portfolios years before and with the constant upgrades being born on the Internet, it is only natural that we are wanting to go with the trends to reel in more followers.

We will be talking about how to metamorphose your old, boring sites into a beautiful one outfitted to the current you. After all, our sites are our public showroom⏤our work and our brand.

Non-web designers would need to take online courses just to redesign their websites. While we can also hire web designers to do the job for us (especially if you have the financial resources to do so), doing all the work by yourself will give you a more personalized look and feel for your site. Add to the fact, that it is actually fun!

Join me on my journey to redesigning my website as well as teaching you the process step-by-step. I have chosen Divi as the main tool we will be using throughout the course.

To give you a sneak peek of my current blog https://theblogcreative.com/:

This course is for people out there looking to redesign their old blogs or websites. This can also be for the newbie bloggers.

I will be focusing on the WordPress Elegant Theme, Divi. More specifically with the modules, plugins, and templates. And as an illustration for this course, I will be using my own blog to show the step-by-step processes.

Tutorials for each Divi features will be shown along the way. The following features can be used for years on end, even with the constant updates of software and applications for web design.

Tools Needed:

Hosting: SiteGround

Divi Theme by Elegant Themes

What To Know Before Redesigning Your Website

Deciding on redesigning your old website can only mean that there is something lacking with it. But before you dive right into the process, assess first what is it that you want and don’t want.

Here’s a checklist:

• Enumerate the features and content of your site that is still working for you
• Enumerate the features and content of your site that no longer works for you
• Enumerate the features and content of your site that you still want to keep
• Enumerate the features and content of your site that you can now dispose
• Enumerate the NEW features and content that you plan to add when you redesign your site

Ask yourself, “What do I want my new website to do for me?” and “What’s not on my site before that I want to be present after I redesigned my site?”

Does your old site serve a great portfolio of yourself and your works? Does it scream “Yup, this is me!”?

I want my newly redesigned site to…

✔ express my three characters: Visionary, Crafty, and Authentic

✔ to create an optin form for my website so that people can join my mailing list and subscribe to my newsletters

✔ give focus to the products and services that I sell such as my online courses, ebooks, and freelance services

✔ gain more social media followers through my new, optimized website that also allows a more efficient line of communication with said audience

Establishing The Foundation Of Your Website

I understand the feeling of excitement towards redoing and redesigning our website. But going into battle without proper plans and strategies ahead will not guarantee you success. It is crucial to make some prior ideas of how you would want your final output to look like.

As a bit of an old soul, I prefer writing down my ideas on paper rather than mobile application or what not. As long as you hold off on doing the website without any plans ahead, we’re good.

As mentioned earlier, we should start by making a site inventory first. To define, a site inventory is a list of all the content that will be included on your website. It doesn’t matter if this list turns out to be draft in the end, as long as you have some generalized ideas of what you want, you can start.

In a navigation chart, you put in all the content of your site inventory but organized according to the main pages and secondary pages where they will be located after you’ve set up your site. A navigation chart is important so that you can provide an easier navigation for your visitors.

For example, you will see on my homepage all the links to the other pages. This is my navigation chart.

I don’t have secondary pages under my main pages though. I might add some in the future when my visitors and content continue to develop.

For my site inventory, as an example, let’s look into my About page. Here you will see some content like a welcome greeting to my visitors and “Why I created this blog” sections.

To sum it up, the navigation chart comprises all the content you have written in your site inventory.

Creating a site inventory and navigation chart ensures that your website has a substantial foundation for you to work on. It doesn’t matter if you’re site inventory and navigation chart will not be followed thoroughly as you redesign your website. It might change as you go along. But never skip this step. You can never really start with a blank paper as it will only result in muddled up ideas.

When you’re done with the two, you can start thinking about the look of your new website.

The Visual and Vibes of Your Site

After the vital process of making a site inventory and navigation chart, we can now proceed to the most awaited part: designing the look of your site.

Remember in our earlier lessons, we discussed about thinking of what we want and do not want to be included on our new website before starting on the design itself.

For now, let’s start with the color scheme.

Usually, we pick colors that are our personal favorites. But for some who would like to go out of the ordinary, one method is to think about the adjectives that you would want to describe your website.

For example, you want to your site to give off a girly feel (like mine) because that is your personality, you can choose feminine colors like pinks and purples. For the design, you can add florals and other feminine accents.

I picked colors that I like: pastel pinks and blues. It might be a little too feminine for other people’s taste but I personally would like my site to be a reflection of me. Besides, I feel like pastel or light colors give out a soothing effect and is very refreshing to the eyes.

I want my visitors to know about me even through the tiniest details in my site such as my color preferences.

For my fonts, I picked out google fonts for most of the content. It’s important to choose fonts that are readable. Your blog posts, contact information, etc. do not need to be in overly dramatic font styles. Otherwise, your visitors will tire of reading your blog and you might even lose some subscribers. I would suggest that you use only 2 types of fonts.

The only unusual font on my site is the logo. The words ‘The Blog’ is written in a cursive manner. Our logo should be eye-catching BUT again, not too dramatic. Something that would draw enough attention to it is enough. It’s also important for it to be in a font size that is a little bigger than most of the content so that it is emphasized.

Looking for Potential Themes to Use

Themes are the backbones of every web layout. It gives an overall aesthetic appeal to your site that adds some sort of bonus dimension to your content. In fact, it is what first catches the attention of your visitors.

I will now teach you how to pick a theme and preview them without making permanent changes.

Go to your WordPress Dashboard.

Appearance then Themes.

I am currently using a Divi child theme (see: How To Make A Child Theme) so it’s easier for me to make modifications that are not permanent. I am still in the trial and error phase and I highly recommend the same if you want to experiment for now and if you are not a techy person. This will save you time on redoing the entire site if you ever change your mind later on.

To preview themes, go to Elegant Themes. Scroll down to “Browse Our Themes”.

Since this course will be focusing on Divi theme, we’ll pick that for this demonstration. Click “Learn More”.

Click the “TRY IT FOR FREE” button”.

 

And you will get a full preview of how the Divi 3.0 works. You can play around for awhile so you can test out its features. It’s a FREE demonstration. (the only problem I’ve encountered here is that I cannot upload my images so I need to purchase the annual fee first.)

 

To get access to ALL of Elegant Themes’ themes and plugins, you must subscribe to them.

 

Checklist and Recap of Important Points

To refresh our memory, here are the steps we must take into account when deciding to redesign our website:

• Explore your old website one last time: Look for the things that you want to retain and what needs to go. What new features would you want to add to your new site? What are your goals for your new site that you didn’t get to achieve with the old one? These questions will be your starting point.

• Search for websites which you can draw inspiration for your new site: If you are not contented with the free demo in Elegant Themes, you can research sites that use the same theme that you picked. If you haven’t picked a theme yet, do the same. Research for sites that you find appealing and list down which of its features would you want to have on your site.

• Do your site inventory and navigation chart: Please, do not skip over this step. Starting your site without clear (or at least vague) plans will waste a lot of your time. If you can, create a timetable as well so you can tick off agendas for each day as you do the redesigning according to your site inventory and navigation chart.

• Visualize the look of your new site: You can start imagining in your head how would you want your new site to look like. The visual aesthetics include the colors, fonts, photos you want to include. The most important point here is to have your site be a representation of who you are. Feel free to list these down as well so you can look at it later.

• Create backups of your old website: For assurance, you might want to create backups. The tip here is saving your files in multiple places, online and offline, so you are sure that you will not lose data permanently. You might also want to install the latest version of WordPress and remove themes and plugins that are no longer needed. This lessens the clutter in your Dashboard.

• Download the theme from Elegant Themes: You can’t directly apply a theme from Elegant Themes into WordPress. You would need to download it first and verify that it is located in the Themes folder in your remote server.

• Use a child theme: This is optional but I highly recommend to do this if you are still unclear about your directions. And I guarantee that you will be making several changes again and again through the process. This is a wise decision so that you will not lose any changes and you can get them back if you want to take a step back from your progress.

 

Customizing Your Website

Putting Up Your Favicon and Logo

A favicon is the little icon in the tab of your website when it is open in a browser.

And your logo is your main graphic that represents your site.

To upload your favicon and logo:

Go to our Dashboard. Then Divi → Theme Options.

Go under the General settings. Upload your image files for the favicon and logo.

Make some modifications according to your preferences (optional). Scroll down and click Save Changes (the Save Changes button is also located at the top).

*Don’t forget to click ‘Save Changes’ every time you made some edits.

Fixing the Main Menu

Your main menu is the navigator of your site that’s why it is important to keep it neatly organized and properly compact for easier access to the different pages and posts you have.

Go to Dashboard → Divi → Theme Options.

Go under Navigation → Pages.

Here, you can check and uncheck the pages you want and not want to show up on our site.

Click Save Changes when done.

For a live preview of your site as you adjust settings, you can go to Theme Customizer located under Divi, still on our Dashboard.

 

You will be redirected to a page that looks like this:

 

Click on Header & Navigation.

• Header Format – how your header and menus will appear at the top

• Primary Menu Bar – settings for your main menus

• Secondary Menu Bar – settings for your sub-menus

• Fixed Navigation Settings – layout adjustments such as fonts, colors, etc.

• Header Elements – enable/disable social icons and search icon

You can adjust settings here whichever you desire.

 

 

Let’s now get started on our menus. To arrange the content for our main menus, go to Menus.

*Note: In menus, we can only arrange the pages we want to show up in each primary menu and which secondary menus are contained in a primary menu.

 

Click View All Locations.

 

Click Edit Menu.

 

You can add and remove pages, rename them, or rearrange them in any order.

 

If you want, you can add a child page under a parent page such as in my Creative Blog Shop under my Shop menu.

 

Also, make sure that you checked off your Primary Menu (found below the settings above, just scroll down) to make it active.

Setting Up Homepage or Any New Page

Your homepage is the front runner of your site once someone visits it. You would want to include the basic yet most beneficial content you can offer so that you can entice your visitor even just through your homepage.

Setting up your homepage is the same as setting up any page so I will teach you that.

 

To set up a new page, go to your Dashboard → Pages.

 

I already have all the pages that I want for now so I won’t be adding a new page. It’s easy enough. Just click the Add New button at the top (beside the word ‘Pages’).

 

When you click Add New, you will see something like this:

You can just input the title of your page and add some content. Hit Publish on the right panel to make your page active and viewable in your site.

Using the Divi Builder

Earlier, I taught you how to upload your logo and favicon plus setting a new page using the basic WordPress editor. We will not begin utilizing the functionalities of Divi. Remember that you can interchangingly use the WordPress editor with the Divi builder. You can just make two draft copies of the page you’re creating so you will not lose the old layout and content.

Divi Builder allows a drop-and-drag function for customizing your content. Just click the purple Divi Builder button to get started:

 

The Divi Builder looks like this:

 

To load pre-existing templates, hit the Load From Library button. (If your Divi Builder had an update and the Load From Library changed into Load Layouts. From there, you can just search up layout for various pages that you will be adding on your site.)

 

You can choose among their predefined layouts or you can load one from the library.

 

Let’s say we’re going to pick the ‘Coming Soon’ template. Click Load beside the template name of your choice.

 

The previously empty Divi Builder will now load with the pre-existing modules of your chosen template.

 

You can click on the three lines (Module Settings) on the upper left corner of any of the modules to make some customizations for your content to your new page.

Continuation in Making a New Page with Divi Builder

 

Going back, when setting up a new page, create a title for it first. Note that you would not really see the title of your page on your actual website.

 

Follow the same steps in the previous lesson, starting with clicking the purple Divi Builder button.

 

Load your chosen template, make edits, and when done, click Publish.

 

We want this page to be a static page and we want to make sure that it appears on our homepage.

Go to Theme Customizer under Divi on your Dashboard.

 

Click on Homepage Settings.

 

Select the new page you have created by its title or name from the drop-down menu. Also, make sure that you have the A static page option ticked off.

 

Click Publish at the top (or in some instances Save & Publish).

Fullwidth Slider

Every pre-existing templates come with different modules. I will be using a different template this time as the ‘Coming Soon’ template did not contain a fullwidth header module.

I am using the ‘About Me’ template for this demonstration.

Click on the three lines (Module Settings).

 

You can add new slides here.

 

Select a background for your fullwidth slider. It can be a background color, gradient, image or video.

 

My tip here is that you should NOT choose colors, gradients, images, or videos that are unpleasant to look at. These are materials that can be a little too bright (e.g. neon colors), images that are loaded with different elements, etc. Make sure that your background will complement well with the text color on top of it.

 

Click Save & Exit when done (if you feel like the setting you have made will be useful for other pages, you can choose Save & Add to Library so you can easily load the already adjusted settings instead of doing it all over again).

 

To show a sample of a “harmonious” background and text:

 

Light background with a dark text (or vice versa) is a perfect combination. It also helps that the background image that I have picked features a clean space in the middle with the elements on both sides.

General Settings and Social Media Links

For assurance, check your site’s settings from time to time. It contains basic information and settings of your site like site title, site URL, email used, etc.

In your Dashboard, go to Settings then General.

 

Consider checking your Permalinks as well (found under Settings).

Entering certain SEO keywords in your site’s URLs will help in gaining more traffic. Just be sure that you are using a URL that is not the Plain or Default one.

If you have social media pages for your site (some bloggers would link their personal social media profiles but some do not, like me), you may add their URLs so that they can check them out when it’s linked from your site.

To set up the URLs:

In your Dashboard, go to Divi → Theme Options.

Go under General.

 

Scroll down until you see the following:

Also, make sure that you have the social media icons toggled to Enabled. Click Save Changes when done.

Customizing the Visual Elements

And by visual elements, I am referring to the font styles, sizes, colors, background, etc.

Go to Divi then Theme Customizer.

I highly suggest you explore the options and settings in here. What’s cool is that you can see the changes LIVE on the screen beside it so you would be able to measure whether you like a setting or not. *The changes will not apply unless you hit the Save & Publish or Publish button at the top.

I will not be discussing this one in full view as they are pretty explanatory. I highly suggest exploring all of the settings. Besides, even if you make an error while playing around the Theme Customizer, none of the changes will apply unless you hit the Save & Publish button.

 

Continuing to Explore the Divi Builder

Blurbs

To make a blurb, go to your Divi Builder.

Click Insert Module(s).

 

Select Blurb.

 

You can add the title of your blurb, content, destination URL, icon, display image, and background.

Click Save & Add to Library or Save & Exit.

 

An example of blurbs on my site:

Portfolios

In your Divi Builder, click Fullwidth Portfolio.

Click on Module Settings.

You can edit the title, categories for your projects, number of posts that will display as well as the date, etc.

I currently don’t have any projects so I won’t be able to show you how it is done. But for you to be able to categorize them, of course, you would need projects.

 

You can create new projects or view existing projects (as well as categorized them) by going to:

Dashboard → Projects.

Image Module

This one is very similar to making a blurb.

Click Insert Module(s).

 

You can upload the image, link a URL to it, and edit the background.

 

For more options, you can go to the Design tab. In this tab, you can make some adjustments with the alignment, sizing, spacing, border, shadow, and animation.

 

Click Save & Add to Library or Save & Exit.

Testimonial Module

Testimonials are a great way to rake in customers and visitors in your site. If you are running your services through your site, you should put up former customer reviews of your services. That will convince your visitors (and potential customers) to avail of your services because you are credible and have good feedback.

 

Click Insert Module(s).

 

It’s better to use testimonials from people who have their own sites or social media profiles. In that way, they would be credible enough because they are real people. Using anonymous testimonials from anonymous people will not work much.

You can add the name of the author of the testimonial, job title of said author, company…

 

…content or the actual testimonial text (which I recommend to be of average length so that your visitors will not actually tire of reading through it)…

…links to the author’s own site or his/her company’s site, specifically if he/she has her own profile on their site…

…and you can also enable or disable the show quote icon and edit the background.

Click Save & Add to Library or Save & Exit.

IMPORTANT:

Only post testimonials that are permitted by the author. Also ask for permission for using their photo, linking their profile and company’s profile.

Newsletter Sign Up Form

Having a newsletter signup form in multiple pages of your site will work wonders. It may seem annoying to some but that is exactly what we are aiming for. We would want them to retaliate with our advances. It’s good to entice your visitors to put in their email in the form and subscribe. And the only way is to have your form appear in as many pages as you can put it.

In your Divi Builder, look for the Email Optin section. Click the Module Settings.I also want to point out the reasoning for the lime green color for the modules below as opposed to the gray ones. Light green modules in the Divi builder indicates that these modules are saved in the library by you. I have taught you earlier that if you want a module or whatever content to appear in multiple pages in your site (and you don’t want to repeat the steps for each page), you just have to click Save & Add to Library.

And having your optin form appear on multiple pages is paramount.

 

You just need to enter the details being asked. You can leave out some if you don’t want to have a title for your optin form just as I don’t have one with mine. You can also edit the success message after a visitor has hit the sign up button.

In the Email Account section, select your service provider from the drop-down menu and then select your mailing list. (This may be different for you as I already have my mailing list and the optin form initially setup prior to this course. If you are doing all of this for the first time, you will be shown options to subscribe to newsletter, background colors, text colors, etc.)

Click Save & Add to Library or Save & Exit.

I forgot to mention this earlier, but the eye icon in the Divi builder is a button for you to preview the modules, headers, etc. that you are building. It gives you previews for desktop computers, tablets, and phones.

Desktop computer preview for optin form:

Tablet preview for optin form:

And the preview of optin form in phones:

Some bloggers offer free gifts to encourage visitors to sign up for their newsletter. It is an effective way to convince them. But if you’re just starting out, you can offer free gifts later on when you’ve built up the content of your site.

Last tip for creating a newsletter optin form is testing it out. If you have a spare email, try entering it into your newly built optin form. After subscribing, check your email and see if you have received any notifications regarding your subscription. Confirm your subscription and see if it sends a success email.

 

 

About Pages and Number Counters

Creating an About Me or About Us page is also easy using the Divi Builder.

The About page is a crucial factor to reach out to your visitors. Giving a brief background of yourself of your company, what you do, and what are your achievements will persuade your customers to subscribe to your site and purchase your services. People are most likely to choose bloggers who have extensive portfolio and good history.

Dashboard → Pages → Add New.

Click on the Use Divi Builder button.

There exist pre-existing layouts for ‘About Me’ and ‘About Us’ pages.

Load either of the two.

You can just go ahead and edit the content in here. We have discussed them in the earlier chapters. We will now focus on the Bar Counters.

Bar counters are for numerical data that you want to present in your in site. For example, you want to show the number of products you have sold since you opened your site or the number of customers you have catered to.

Click on the Module Settings for the Bar Counters.

You can add in various bar counters such as:

If you want the data to appear in percentages, you can enable this:

Here is a preview (in desktop form) of our bar counters:

Contact Page

A contact form allows your visitors or clients to communicate with you through your site. The Divi builder has pre-existing modules for contact form.

Here is my contact form on my site:

Your contact form should be located on your Contacts page. We already know how to create new pages and there is also a pre-existing Contacts page layout. You can just load it.

The fields are the empty spaces which your visitors would have to fill out with their name, email, and their message. You can add in other fields but these three are the most common ones.

You can put the title for the contact form, a success message after your visitors input their details, etc.

Here is where you enter your email where their messages will be sent:

Enabling captcha and the option of redirecting the visitor after filling out the contact form.

Click Save & Add to Library or Save & Exit.

I don’t have social media accounts or pages linked to my site but to create social media module:

Click Insert Module(s).

Select Social Media Follow.

You can add in the social networks you have, an option on where the URL opens when clicked and displaying the follow button.

Sidebars and Widgets

Here is my sidebar on my site. My sidebar only appears on blog posts and not on all pages.

The ‘Subscribe to Our Newsletter’ optin form is from Bloom plugin. The only other stuff that I have on my sidebar are ads-like images that redirect you to my suggested resources for web design.

But to customize your sidebar, in your WordPress Dashboard, go to Appearance then Widgets.

You can just drag your available widgets and drop them on the Sidebar section.

 

Plugins and Footer

Bloom Optin Plugin

Bloom plugin has tons of optin forms for your sidebar, footer, or even pop-up forms. You can install the bloom plugin through your Dashboard though I would recommend you to download it from Elegant Themes. Make sure that the plugin folder is contained in the WP content on your server. Just like how we have downloaded the Divi theme earlier.

To preview your active and inactive plugins, go to Plugins in your Dashboard.

Since I have the Bloom plugin installed and active, it appears on my Dashboard. Click on Optin Forms.

It will show you your active optins and their corresponding details. You can edit, delete, duplicate, do some a/b testing with your optins through the icons on the sides. You can also create new optins with the New Optin button.

When creating a new optin, it gives you the option to choose what type of optin form you will be creating.

After selecting your preferred optin type, go ahead and fill in details, edit the design with a pre-existing template which you can customize, adjust display settings etc.

Click Save & Exit when done.

You can also check out the stats of your optins in the optin stats tab.

Creating optins also requires you to link an email account and mailing list/s.

Monarch Social Media Share Plugin

I have social media icons (courtesy of Monarch) on the left side of my site and it appears on almost all pages and posts. You can share my site or a specific post on your social media account when you clicked on them.

Since Monarch is also a plugin from Elegant Themes, you need to download it and make sure that it is installed on the remote server.

In your WordPress Dashboard, go to Tools then Monarch Settings.

You can manage where you want your social media share icons to appear, which social media networks you want to link, icon styles and shapes. *Don’t forget to save changes as you go along.

Display settings:

Footer

This whole dark gray area at the bottom of my site is my footer.

You always have a default footer at the start so I will show you how to customize it using the Theme Customizer.

In your WordPress Dashboard, go to Divi then Theme Customizer.

Go to Footer.

For my footer credits, go to Bottom Bar.

Scroll down Edit Footer Credits and enter text.

For the social media icons (even though they are not linked to any of my social networks) on the lower right corner:

Go to Footer Elements.

Check off the box.

Click Save & Publish or Publish.

 

Visual Builder

Divi 3.0 gives you the latest and most convenient way of customizing your website through its brand new feature⏤the Visual Builder.

With the visual builder, you can directly edit your site and see it live. Of course, your changes will apply only after you hit the Save button on the bottom right corner.

To enable the visual builder, you have to be logged in your WordPress account. Look for Enable Visual Builder button at the top and click.

You can now make edits directly to your pages or posts.

Don’t forget to save your changes!

Okay! So that’s it. I have shown you how to create the most basic elements of your site to get you started. Don’t fret that your site is still on the bare minimum with regards to the content. You can expand as time goes on and as you gain more and more visitors and subscribers.

You can also check out a related blog post for this, Create A Blog in 7 Days.

Happy blogging! ♥