Creative portfolio and blog creation in days free course

Creative portfolio and blog creation in days free course

Blogging gives you the priceless opportunity to share your story to the world. To put it simply, you are creating an online diary of your personal life or business, promoting it as your creative portfolio, as well as encouraging your audience to do the same. It is, perhaps, one of the best outlets of free communication.

Before you start building up the visuals of your blog, you must lay out the foundation. Identify the WHY’s behind the creation of your future blog. One way for this is determining the niche of your blog.

Going down to specifics allows you to have less competition in search rankings. It also lessens the “clutter” on your site, and makes it easier for you to gather a following of frequent visitors that are looking for specific interests that are same as yours. While it is okay to blog about anything under the sun, narrowing your specialties to a few creative portfolio makes it more convenient for everyone.

We have three main “ingredients” in order to create a blog:

1.Web Hosting

Web hosting services are like the landlords of the World Wide Web. They lease you a space for your blog or website or your virtual creative portfolio and just like a real estate contract, web hosting services offer you time-constrained “contracts”.

Ultimately, web hosting service enables your information to be distributed and available to the public through the Internet. A web hosting service allows you to have unlimited access for your site to be placed on the web.

2. Site Builder and Content Management System (CMS)

Site builders and CMS platforms are “construction” tools that let you build your own website, creative portfolio website or blog. The best example of this WordPress.

My blog https://theblogcreative.com/ is powered by WordPress. 

However, there are some downsides with free blogging sites such as WordPress. Since it’s completely free, you technically do not have any ownership of your content. Your blog can also be shut down by the admin when your blog’s content is ever deemed inappropriate.

3. Domain Name

Domain name is the URL of your website that your visitors type in to get access.

I highly recommend that you take the following pointers into consideration when picking your domain name

  • Your domain should be simple yet something that can capture attention so that your visitors will be able to remember it. However, stay away from words that are too fancy.
  • If you can, use your personal name.
  • Stick with using .com.net, or .org.

 

DAY 1 : Getting a Web Host, Picking and Registering Your Domain Name, and Installing WordPress

For a web hosting service, I am recommending you to use SiteGround. SiteGround is also recommended by WordPress itself. Their services include everything that you will be needing in cultivating your virtual creative portfolio or a blog in the long run.

SiteGround have some notable pros for those who choose it as their web hosting service provider:

  • Awesome Support. They offer 24/7 customer support for any issues that you will encounter. Their CSRs are highly responsive at the earliest time possible and monitors their customers’ comments and inquiries through various channels such as in the comment section, phone calls to their designated hotline, etc. Courtesy and also extensive knowledge of database solutions of their employees are also key points for SiteGround’s excellent customer service.
  • Secure. A lot of our personal information goes into our blog and creative portfolios that’s why it is only crucial to entrust your safety to a reliable web host. Cybersecurity attacks are common and can happen to anyone no matter how small or big your online blog is so we’d rather not wait for the time of getting victimized before acquiring a good web host. Some notable security features of SiteGround are: their malware scans for your site, a regularly updated web application firewall, and their HTTP/2 technology for their servers.
  • Fast. Speed is one of the top priority of any site owner. Let’s be honest that buffering sites drive us crazy! Every second count now and if we are faced with a loading screen for a measly three seconds, we’re out. That is why SiteGround always has the latest technology to back you up for speed problems. One of which is their own SuperCacher, that enables faster loading of your web content. They also have NGINX web server technology that speeds up the static content of your blog.
  • Affordable. SiteGround offers three plans for their web hosting services:

Since we’re just starting out with a blog or a creative portfolio, the StartUp plan is the most sensible choice. It gives you just enough features to enjoy and integrate to your fresh blog. Some suggest though for the GrowBig plan when using for WordPress. This is also a good choice at a good price point if you have a little bit more money to throw (and it’s just a $2 dollar difference than the cheapest plan anyway). SiteGround lists down what you will get for each of these plans.

  • Reliable. There are good reasons why SiteGround is suggested by WordPress. They have the most suitable features that every WordPress user needs as if it’s tailor-made for them. There are also countless of good reviews online for SiteGround averaging on 9 out of 10 star ratings. What we want for a web host is something that can continually cater to our blog’s needs as new updates are released in the market.

It’s easy enough to create an account with SiteGround and purchase a plan for web hosting. In their homepage, just click the ‘SIGN UP’ button.

Choose among the three plans and click ‘ORDER NOW’.

Select ‘Register a New Domain Name’ and enter your preferred domain. Remember the pointers when choosing a domain name. Click ‘Proceed’.

You will then be taken to final step where you have to fill out personal information as well as your payment details. You can see your total fee at the bottom. SiteGround also offers domain registration and some other extra services which you can just tick off. Click ‘Pay Now’ when done.

After that, you have to install WordPress through SiteGround. Log in to your SiteGround account and go to the Support section.

Select WordPress and fill out the information required and click ‘Submit’.

 

DAY 2: Configuring WordPress and Picking a WordPress Theme

When you finally finished installing WordPress, we can now start making some tweaks in it. In your WordPress Dashboard, go to the Settings tab and then General.

Make changes as according to your preferences for your creative blog. Note if the time zone is set correctly. If not, adjust it.

Click Save Changes when done.

We are now going to change our permalink structure. In the Dashboard, go to Settings then Permalink.

I have mine set on Day and name. For reasons of specificity, I would like my blog and creative portfolio visitors to easily track down my blog posts and images by the day they were posted.

Most people choose Post name instead because it enables a cleaner URL. However, since my blog’s niche is web design, an ever-changing industry that gets upgrades as time goes by, I want my readers to be able to view the most recent posts for their reference.

Next, go to Reading. Here, you will see options on what displays on your homepage, number of posts that appear, etc.

Make changes as according to your preferences. Don’t forget to click Save Changes at the bottom when done.

We will also be needing to delete WordPress themes or plugins that are no longer in use. This will help create space for customization because the more space consumed, the more the slow down the server.

To do that, go to Appearance then Themes.

I have actually minimized the clutter here before so it’s pretty empty right now except my active theme, a Divi child theme. I have two others but I’m keeping them here for now. My Divi theme is from Elegant Themes.

To delete inactive themes, simply click Theme Details then hit Delete at the bottom right corner.

For plugins, go to Plugins → Installed Plugins in the left sidebar of the DashboardCheck off the ones you want to delete and then select Delete from the drop-down menu. Click Apply.

If you have deactivated plugins, delete them as well.

To set up a plugin, just click the Settings option it. For this tutorial, let’s set up Bloom.

Bloom plugin takes care of my optin forms that appear on my sidebars, pop-ups, etc. 

Since I cannot do a walk-through of all my plugins (as it will take time, also we might not be picking the same plugins for our site), I highly suggest you take time to explore the settings for all your plugins. Trial and error won’t hurt.

To add a plugin, go to Plugins in your Dashboard. Click Add New.

Go to the Popular section to see the most recommended ones.

Click Install Now for the plugin/s of your choice. When it’s done installing the plugin, an Activate button will appear for you to enable the plugin for your site.

For recommendations, install Yoast SEO which will allow you to add title tags, keywords, descriptions, etc. to each of the post you create. For social media sharing, I am using Monarch. Social media sharing plugins enable visitors to your site to instantly share your blog and blog posts and the creative portfolio into their personal social media accounts. It’s a perfect way to gain more traffic to your site.

We will now be installing a fresh new theme for your blog and make some customization. Go to Appearance then Themes.

Click Add New.

Browse among the themes available.

Click Install.

You can also do a live preview of your chosen theme. Just click the Preview button.

You can make further adjustments with them after you have installed it and activated it as your active theme. You can use the Custom Editor (pictured below) to adjust settings while seeing the changes live.

To go the Custom Editor, go to Appearance then Customize.

The Custom Editor looks like this:

You can just explore the various settings in the Custom Editor until you get the look you are aiming for.

But since it’s rare for themes inside WordPress to be of limited options, most people opt for premium themes from external sites. I am using Divi by Elegant Themes.

Installing Divi is discussed in my Website Makeover Course (The Visual and Vibes of Your Site, Looking for Potential Themes to Use). When you have already downloaded it and had it installed, you can go back to the Custom Editor to make changes.

 

DAY 3: Creating a Blog Post, About Page, and Contact Page

Creating a Blog Post

Finally, we can start on creating our very first blog post. Our blog posts are the backbone of our blog and one of the “main attractions” besides our products and portfolio. For this tutorial, we will be using the generic WordPress interface.

In your WordPress Dashboard, go to Posts and then All PostsJust delete the default WordPress blog post title “Hello World!”. Go to Add New still under Posts.

This is how it looks like:

Add in the title for your blog post and the text on the corresponding blank sections. Formatting your text here is pretty self-explanatory. If you are familiar with MS Word or any other word software, you can easily use this.

For more formatting options, click the Toolbar Toggle button.

You can categorize this new blog post. The default category for new WordPress accounts is only ‘Uncategorized’ but since mine is all set up, I already have a bunch of categories made beforehand. you can set up posts for your creative portfolio as well. 

We can now get to customizing our SEO for this specific blog post. Scroll down to the Yoast SEO plugin. You can see the changes you make to your keywords and meta description live, just as how it will appear on search engine results.

You can also a feature image, just repeat the steps on how we uploaded an image for the content earlier.

When you’re happy with your first blog post, just click Publish. For preview, click on View Post.

About Page

Your site’s About page is one of the first things that a visitor will check out on your blog or your creative portfolio. A lot of online entrepreneurs hire content writers to create a highly-enticing About page that can transform a mere visitor into a committed customer.

Here are some tips when writing an About page:

  • Talk about the reason behind the creation of the blog/business blog/creative portfolioA good way to start is telling a BRIEF story about yourself and/or your blog/business blog/creative portfolio. Here, try to paint a very imaginative picture for your site visitors so you can exactly capture their attention.
  • Give empowering details. A good About page should only be encouraging. We want our visitors to frequent our blog from time to time and the key to that is capturing them once and for all, starting with your About page. People want something that they can relate to because that is what they will need.
  • Use factual information onlyContrary to some recent instances, creating pure fictional accounts of your life can lead to devastating results. People love to scour the internet for who’s who and if you ever try fooling them just to gain some extra limelight, it may backfire on you. Being genuine goes a long way.
  • Know your audience. People don’t want show-offs. They go for the ones who are providing useful service and inspiration to others. When creating an About page, make it seem like you are having a one-on-one chat with them. Put yourself in their shoes and think of what would they want to get to read on your About page and eventually, what would they get from being a frequent visitor/potential customer for your blog and creative portfolio.

From this point on, we will be using the Divi Builder to create the rest of our blog. Divi Builder just makes it easier for you to create the content of your blog through it simplified drag and drop functions that even novice bloggers can make use of.

To create an About Page, on your WordPress Dashboard, go to Pages then Add New. Click the purple ‘Use Divi Builder’ button.

The Divi Builder takes away the pain of manual customization and actually has ready-made templates that contain modules that you can assemble on your own.

Click Load Layout to see the ready-made themes and templates that Divi made. There are tons of choices so you will never not find anything that can fit your taste. Moreover, you have unlimited power to adjust the settings and make them more personalized.

Here you will see various layouts for different genres. In the search box, typed in ‘About’, so the layouts available for About pages show up.

They have preset ‘About Me’ and ‘About Us’ templates. Since this is a personal blog (you can always expand later, let’s say, when you hire a team to run this personal-turned-business blog), choose the ‘Simple About Me’ layout for now. Click Use This Layout.

You will then see that it has predetermined modules for this particular layout. However, you are given the option to remove (by clicking the ‘x’ button) and add modules (by clicking the ‘+’ button), rows, sections, etc. as you desire. This has special sections for the title (Fullwidth Header), the content (Text), and other elements that you can add in for your about page regarding your creative portfolio and the blog.  I will not be discussing this in full-length as this will take time but the best route of learning with the Divi Builder is through explorationThe Divi Builder is a highly functional and powerful tool so it is best to make the best of it.

You should also make edits on your Yoast SEO plugin at the bottom to earn higher ranking in search engines. Remember, your About Page will be one of the most-visited pages in your site.

The changes you make do not save and go live on your blog unless you click the Publish button. If you want to see how it looks like before you save your changes, click Preview.

Contact Page

Your Contact Page lets your visitors reach out to you. If you are doing a personal blog, this might be optional but can always be added when your followers grow over time. If you’re going to do a business blog or a creative portfolio, then this is very important for you to continuously build your network. You will be putting in your contact information where your visitors can send you a message or call you about what you are offering on your blog and the creative portfolio . I would recommend that you have separate email, number, etc. for your blog purposes, especially if it’s a business blog or a creative portfolio. In that way, it will be easier for you to handle these messages and not have them mixed up with your personal ones. You can also put in here your social media accounts if you have any.

The process is the same as how we did the About page (and will all be the same whenever you create new pages).

Dashboard → Pages → Add New.

Divi Builder → Load Layout. You just search for Contact Page and choose one in the premade Contact Page layouts from Divi.

Click on your preferred Contact Page layout and hit Use This Layout. Make changes and you’re done! Your Contact Page do not necessarily need sentences. Your contact information and for what platform they are being used.

 

DAY 4: Having a Mailing List and Linking Between Your Blog Posts 

Having a Mailing List

Having a mailing list allows you to keep track of all your subscribers and send them newsletters and updates regularly. Your blog and creative portfolio order cheap Sildalis http://windhampharmacy.com/ visitors are not guaranteed to visit all the time especially with the ever-growing population of bloggers. And if ever a visitor decides to subscribe, their name and email go directly to your mailing list. You will then be needing a mailing list provider.

I am using MailerLite. I am using it for my Freebie Library. And you will see that once again, I am advertising my products. It’s really a good way to “shove in” your products to your customers on any chance you have in order to get them to subscribe or purchase them.

MailerLite has tons of incredible features scoping from your mailing list, email marketing, etc.

They also competitive prices as well as a FREE subscription when you have 1,000 subscribers and below.

You just click the blue ‘Sign Up’ button at the upper left corner and enter your basic information:

Here is MailerLite’s getting started article to help their customers with setting up their account. What I love the most with MailerLite is that they give you the best services that you will be needing for having a strong and fully functional mailing list. They even have easy-to-follow video tutorials for the newbies that will help a ton for not-so-techie bloggers. You don’t have to hire a VA to do this for you because you can do this all by yourself with little time and effort.

Linking Between Your Blog Posts

Linking between your blog posts is a terrific way to drive more traffic to each of them. More often than not, your blog posts will be interrelated with each other and rather than rewrite similar sections or subtopics between two or more posts, you can just link them to the current blog post that you are writing, In that way, your visitors you will be obligating them to view the related blog post/s and thus upping the stats for the current post and the related post/s.

It’s easy enough to set up the links. If you are familiar with setting up hyperlinks in MS Word or Google Docs, this one goes the same for the WordPress editor.

Highlight the text referring to the related blog post.

Click the chain link logo in the menu bar.

Copy the URL of the blog post and paste it. Click the ↵ when done.

This technique is also a great way to showcase your readers that you have enough information about your niche and that they no longer need to go out and search for external resources.

DAY 5: Creating a Homepage and Having a Niche for Your Blog

Creating a Homepage

Your homepage or main page will be the front-runner of your blog so I cannot stress enough how dazzling it should be. It will be the first thing that your site visitors will see and this homepage should entice them to explore your site even more and eventually subscribe to you!

My homepage is filled with blurbs for various products and services that I am selling, links to my blog posts, and of course, optin forms. To put it plainly, your homepage should give your visitors a sneak peek of your blog.

Creating a homepage is done just as how we created our About page and Contact page earlier. You just search for a premade Homepage layout in the library.

But now, we will be utilizing Divi’s Theme Customizer that lets you make further changes and see them live as you make some tweaks.

In your WordPress Dashboard, go to Appearance then Customize.

This is what the Custom Editor looks like:

I discussed a little bit more of the Theme Customizer in Website Makeover Course (Customizing Your Website).

There is another extravagant feature of Divi — the Visual Builder. The Visual Builder lets you make changes on the site itself without the modules of the generic Divi Builder and the sidebar menu of the Theme Customizer. 

You just need the click the purple ‘Enable Visual Builder’ button at the top when doing a preview of your blog.

*See: Visual Builder from Website Makeover Course.

Having a Niche for Your Blog

When you are just starting out, you might want to start with one single niche. A niche is a specialized section (usually in the marketing industry) that has a special focus on the mother topic and all its subtopics. For example, The Blog Creative is all about web designing and the business that can sprout from that specific niche. Having a niche enables you to have a strong, close-knit, and a large number of following that falls in line with your specialty.

Your subscribers can also easily identify you and say “Hey! It’s that person who is really good with [insert your niche]!” They will be able to recognize you better as a master of your craft.

One technique to create an air of credibility for your blog is providing testimonials. Testimonials serve as great tools to encourage your followers not only to subscribe but also to buy your services and products. I gather as many testimonials as well as I can get from my customers from various social media platforms and the ones sent to me personally as they would be a big help for my blog and business to thrive.

Remember to advertise your services and products as much as you can. Let them know your latest releases and keep yourself updated as well with the best and freshest services you can offer just as how my Pinterest Branding Pins service is up right now (see what I did there?).

I chose a few of the testimonials I have received from my previous customers and posted them on my blog so I can show “supporting proof” of my skills for my would-be customers.

 

DAY 6: Creating a Newsletter Form

Your Newsletter Form is a mini section that allows visitors to enter their name and email to subscribe to your mailing list. They are famously dubbed as call-to-actions. By subscribing to your mailing list, they receive newsletters from your blog about new posts or updates which will then push them to revisit your site from time to time. Newsletter Forms can come in many different styles like static ones found in your sidebar or pop-up ones that appear whenever someone views a page or a post. The technique here is to have as much optin forms appearing on your site so you can relentlessly encourage your visitor to finally give in and subscribe.

I am using a plugin for all my optin forms — Bloom. You just download the plugin and activate it just as we discussed here.

In your WordPress Dashboard, look for the Bloom in the menu sidebar.

Click Optin Forms then New Optin.

Select the type of optin you want to create. For now, let’s create a ‘Widget’ optin which is a static optin placed at the sidebar. Note that we can create as many forms of optins throughout our blog so we can encourage our visitors to subscribe. Our other optins can be pop-up ones that appears only when someone views a blog post or a page on your blog and can easily close the pop-up whenever they want to. That way, the blog wouldn’t be too crowded with optin forms. I have all sorts of optin forms scattered on my blog.

It’s time to make some edits! First, create a name for your optin form. This name will not be appearing on the actual optin form but just for you to label it and have it distinguished from all you future optin forms. Also, select your mail provider.

Click the gray button ‘Next: Design Your Optin’.

Bloom has ready-made templates which you can customize according to your preference. Click one template and scroll down and click ‘Next: Customize’.

Here, you will be filling in the information on the text that will appear in your Subscribe optin form and also, edit the appearance. You can preview your optin form by clicking the blue Preview button or the one with eye logo. When done, click ‘Next: Success Action’.

Preview:

In the Success Action section, you can choose either a success message will appear or the visitor will be redirected to a URL when they subscribe. A simple “Congratulations! You are now subscribed to [insert blog name]” will do.

Click Save & Exit.

Your mailing list provider will do the job of distributing the newsletters regularly and now the job left for you is to create helpful and interesting content that will draw your subscribers to check out your blog whenever you newsletter notify them of new posts and updates. Remember that the reason they subscribed is the fact they loved a blog post or any content on your blog and they are expecting the same or even better quality content from you.

 

Day 7: Social Media Share Plugins and Redirect Links

Monarch Plugin

Having social media share buttons on your blog lets your visitors share your posts or any of your shareable content to their own social media accounts and hopefully, let their own followers know of your blog which can bring in more traffic.

I am using Monarch for the social media share buttons on my blog. Just install and activate the plugin just as we discussed. See Website Makeover Course (Plugins and Footer, Monarch Social Media Share Plugin).

Redirect Links

See how many external links I used in this particular blog post? That is what you call the art of redirecting links. I am endorsing those sites (SiteGround, MailerLite, Elegant Themes) because I know how helpful they can be with creating a blog. The Blog Creative owes a huge thanks to them!

And as a display of gratitude, we can do affiliate marketing. Affiliate marketing is a business referring other business for their services that the former acquired from the latter. This way, it is a win-win situation for both as they are earning customers and money from the connecting traffic they gain from each other.

I am using Pretty Links plugin to manage my redirect links. After you have installed and activated the Pretty Links plugin, it will appear on your Dashboard.

Click Add New Link.

Type in the Target URL (e.g. https://www.siteground.com/)

Type in the name of the site (e.g. Siteground) next to your blog’s URL in the Pretty Link section.

You can put in a title for the particular Pretty Link.

Click Create.

Now, whenever you mention a particular resource site included in your Pretty Links, instead of linking the site’s actual URL, you can instead put in the Pretty Link you have for that site.

With Pretty Link, you can track of every click and redirects to a particular Pretty Link that you created.

 

And there you have it! Within a week, you can set up a blog and the basic elements that you will be needing for it to skyrocket. Of course, you can always work more than a week in setting it up. Just know that what’s important is that you will be including your best facets into the content because passion fuels it harder more than anything else.

 

 

 

 

 

 

 

How To Create A Website For Non-Techie Bloggers

How To Create A Website For Non-Techie Bloggers

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 modulesplugins, 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: VisionaryCrafty, 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

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! ♥

 

 

Pin It on Pinterest