Designing a Website | Start Your Business With Envato Tuts+ [Episode 3 of 5]

Designing a Website | Start Your Business With Envato Tuts+  [Episode 3 of 5]

Show Video

In this course, you are going to learn creating a business plan, designing a logo, designing a website, making a promo video, and marketing your new business. Here we go. [MUSIC] Being yourself is amazing. Hey everybody, welcome back to this channel.

You're watching Start Your Business with Envato Tuts+. A five-part YouTube series for you if you want to start a business, if you want to have a side hustle, if you want to earn some money, or if you just wanna be your own boss. This video is right for you.

My name is Dory. I guess we know each other now. I'm a Tuts+ creator, and I'm also gonna be a good team player, walk you through all the process, help you to set up a holistic, coherent-styled online presence for your business.

A holistic, coherent-styled online presence is not even one thing, it is a system. It will at least include five key elements, your business plan, your logo, a website, a promo video, and a general marketing plan. All of these elements, they're interconnected with each other, while each of them has a specific role to play. Each video of our five-part video series will cover one specific topic. In our last two videos, we have made our business plan and made our company logo.

If you're feeling a little bit lost here, I highly recommend you to watch our last two videos. Okay, today is a big deal. >> Get me out this crazy thing. >> According to our market research, it is the number one challenge that a lot of newbie entrepreneurs found so, so, so, so afraid of, including myself, it is [SOUND] making a website. [SOUND] [MUSIC] Making a website can be very, very challenging, especially if you have never had any website building experience.

No, no, no. I guess, nowadays, a lot of website building tools have been made very, very user friendly, but they're still very hard to use. Building a website can still be a time-consuming, labor-intensive project.

That's why a lot of people still prefer to hire someone to get this job done. That's a great idea, but it can be very expensive. The cheapest one I know, in my experience, charged as $5,000 for one single website. However, I just firmly believe if sometimes we cannot change the difficult level of a single fact, then try to change our mindset.

It sounds very theological, sometimes it works. The website that we're going to make here is what I call a functional website. We'll only focus on solving one single problem, which is making a good structure for our business. Let me explain. Having a good structure is actually very, very important. Even if you finally decide to hire someone to help you to build a website, you will still need to tell them your business and service structure, because only you know the system.

The process of building a functional website can help you to visualize that structure, plus maybe you can get a website. So instead of thinking about building a website as the goal that we have to achieve to launch our business, thinking about building a website as a tool. >> What it is? [MUSIC] >> What's the difference between tool and goal? This is not a linguistic game, okay? They will give us different mindset. That mindset will eventually determine how we accomplish building our website. Most noticeable, it will change our intention.

I got this idea from one of my favorite management thinkers of this generation. His name is Adam Grant. He's a top rated professor from Wharton University and also holds consultant appointment to so many big names, Google, Facebook, Apple, Microsoft and more. Check out his work, he's great.

Adam suggests task management is not about productivity, it's about intention management. What we intend to do changes how we think and what we focus on. Once Adam just talks about his research on how many people can really accomplish their New Year's resolution. He just mentioned, when we are trying to achieve something, be careful about using the word goal. Because goal can be a sugar-coated expression for the word obstacle, which may establish an invisible adversarial relationship between ourselves and things we're trying to achieve.

How can we make things better? >> What? >> Adam just suggest that the mindset of being a learner actually make us humble, make us curious, make us focus on how can we improve. [SOUND] So I just got this idea. Why don't we use the experience of building a website as experience or a tool that we could use to learn our business, to learn ourselves, to improve our business model, and to make a good structure? I noticed that as a startup entrepreneur we all have problems in structuring our business model and our system and our framework. But when we are talking about website, we always tend to prioritize how to make it look great, or how can we give our user the best user experience. Those are important, but before we make our website sensational, we need to make it functional.

I guess people will value the content itself more. So let me show you my creative handbook website. >> Dory Show. [MUSIC] >> I guess it's time to show you my website.

[MUSIC] Very exciting, welcome to Here you will find a creative approach for building a friendly relationship with digital world. In general, the overall style of my website really follows my mood board.

It's filled with bright color yellow, emitting the energy of creativity and excitement. [SOUND] The big brand icon that we made in our last video looks very striking right in the middle. It really suits my company identity. [MUSIC] While you scroll down the page, you can see those animated words and columns. I think it adds fun to the user experience.

There are five main contents on my website, Home, Theory, Service, Course, and Contact. Now, let's have a closer look at each one and I will explain why I structure my website in this way. [MUSIC] First, Home, aka, landing page. [MUSIC] The first page, of course, is my landing page. In my landing page, I just put my core statement here, a creative approach for building a friendly relationship with digital world. It's the core message that I wanna give people, so I just put this right here.

When people just enter, they will read it loud. And I guess they will immediately get this website is something about creative, something about Having a relationship with digital world or doing something online, if that makes sense. Under the primary statement, I just got my second statement. Live a focused life.

Use digital wisely. This is just some beliefs or some faith that I believe, so I wanna share with my users. I put my logo, big brand logo that we made in our last video. I just put it right here. This just suits my overall style, and people will understand.

Maybe they can start to have their own imagination. This website will call for your brand, revitalize your creativity. Hopefully, people can get that message. Scroll down, these are just some general message. I feel the function of the homepage just to give people a quick overview about who you are and what you are doing. The creative content for brands, a handbook for you.

This is just a summary of what kind of service we will offer. If people are just happy with here and they just feel they've already get what they wanna get, and they can contact us directly. Do you think that will happen? Final section, I got my footer.

Discovery, causes, service, and social, basically just a direct link to the destination that I want people to arrive. [MUSIC] Let's just move to next section. Next content is theory. It is equivalent of about.

Some people call this about. You can put your company history or your company background here. It can also talk about the founders. Here, I purposely used the first person to introduce my business, because I feel my business is a very creator-based business. So it just used me, Dori, as a first person to introduce my business. Here, I just got the creative handbook values three principles, intentional learning, purpose driving, educational and relatable content, basically just a core value of this brand.

It's kind of a cultural thing. In this section, I actually purposely used the word theory instead of about. As I mentioned before, having educational content is big part of my business.

So I just wanna create that academic vibe, and I just feel like theory sounds more academic. I don't know, yeah, I just like it. Yeah, let's just move to next section.

>> Yes, sir. >> Service actually took me the most time to design. I was struggling about how can I organize and putting my service into different category.

Feel like overall, service should be the most important section because this is a place where we tell people what we have and what we offer so that you can buy or purchase. Working on this part really helped me to define what kind of service that I can offer to people. After closer think, I just decided to divide my business into two part, one to B, business, one to C, individual customer.

To business, I have this content marketing service. We offer branding and content marketing service. Just help your business to create their brand story, deliver their brand story in a way that engaging and compelling. And to customer, for people who wants to upscale on more digital skills. We make handbooks for your happy digital life. I mean, this is a really important section overall.

And I would highly recommend you to have a closer think how you organize your surveys. You need to give your audience or your potential customers the clear guidance about what you offer. Terms and conditions, we got this, this, and this, so you can take away, pay the money, and done. >> [NOISE] >> Next section is about course. As I mentioned, I feel like online course is a big part of my service.

So here, I just wanna highlight a little bit more. So I just put course in a separate category. So for people who wants to learn new skills, they can just clearly see what kind of course they have. Of course, at this moment, I only got one course, which is to start your business with Envato Tuts+.

In a short time, I will upload more. We will have a lot of courses where I will give you a lot of options. And here, I've got my creative handbook promo video. I actually don't wanna show you here. Let's just keep it secret because actually, this is a content that we're going to talk about in next video.

Please don't watch it, okay? I will tell you all the detail in our next video. Okay, cool, and my final content is contact. Here, we got my address, email contact. Those are just some mock-up one and don't worry about at this moment. If you want us, don't hesitate to contact us.

We are here 24/7 right for you. [MUSIC] Yeah, I guess that's just a general overview about my website. I really think I did a great job. Overall, I think it really follows the style that I've made in my mood board. Visually, it's holistic, coherent styled presence.

In terms of content, of course, some part, I can improve a little bit more in future, but I won't worry them too much. It's a good structure for me at this moment. I think building a website and maintaining the website is different thing. And we can't, we really can't making the best perfect website at the first place.

That's why a lot of established company, they still got this period where they just shut down their websites. Notice, this website is in maintenance because this is an ongoing thing. The purpose of having this website at this stage is just to give myself a clear structure about how I plan to structure my business. Without further say, let's just dive into Nail it. [SOUND] >> Nail it. [MUSIC] >> In general, there are four stages in my web building process similar to my logo making workflow.

Stage 1, planning. Understand why I made a website. Clarify how to define my website. Then determine what I want to show on my website.

Once I've cleared off those questions, I will move to stage 2, research. Look for inspiration and my creative assets. Stage 3, making my WordPress website by using a drag and drop web builder tool Elementor and my Envato WordPress Template. >> I love you. >> Final stage, user experience.

Unfortunately, we won't cover this stage in this video, but I would highly recommend you do it in your own practice. Simply ask a few friends to view or have a play. Their feedback is valuable. Okay, before we just dive into making our website, first, let's just make a plan.

Here, I will tackle three questions. The purpose of my website, the function. The structure of my website. Purpose, talk about why, why do we need a website? Function, it's about how, how we make this website, how we define this website. The structure is what we finally will get.

Understand why, then we know how to do. Finally, decided what we can get. Why do I need this website? I feel like my business is an idea-based business. I have to have this space that just talk to people, my idea, what I'm thinking about, principles, theories, concepts.

I need have a central station that have all of the information. About my idea, about my business so that people can just go to and check out all of the resource. Understand that this purpose is very important.

It would directly impact how I define the function of this website. I feel like the role of my website is a 24/7 customer service. Well, normal people will just say, creative handbook, what is about creative handbook? They can just go to my website and I got all my information here.

Understand that, then I would know how to structure my website. Dory, your website is not about generate sales, it's about to give people the clear guidance about who you are and what you were doing. Priority of making this website is just to give people this information. Are we clear about this? I can move to the next. [MUSIC] Finding inspiration for building your website comes in super handy with Envato Elements.

Instead of swimming on the Internet forever, we can head to Envato Elements directly. Let's go to Elements. [MUSIC] Web templates, and then site templates. Here you can view thousands of templates designed by world class web designers. [MUSIC] Here, we also have a WordPress category, [MUSIC] From themes, plugins, to template gains.

Only you can think of it. [SOUND] Once I've done all of those preparations, I think now I'm ready to jump into WordPress and start to build my website. Because of the duration of this video, I probably wouldn't be able to give you a very detailed instruction about how I make my website.

You guys probably don't wanna watch me building website for two hours, right? That would be boring >> No, Dory, watching you can never be boring. [MUSIC] >> [LAUGH] Lets just start to make a website. [MUSIC] Now let me introduce you the easiest way to create a WordPress website without any UI/UX or any coding knowledge you can make it. Let's welcome Envato Elements Template Kits, your best a team player for building a professional premium WordPress website with Elementor. Template kits will show websites over your style while allowing you to customize everything.

Full freedom, full customization, and no coding, no design skill needed. So does it work? In short, find your template kits for your need on a Envato Elements. [MUSIC] Using Elementor, drag and drop those pre-made blocks straight onto your site.

Easily twist as a template to suit your needs. You can drag, switch, and combine all the content blocks. Just like play LEGOs, really fun and satisfying, right? Okay, let's just jump into a real world practice and I will walk you through how I made my creative handbook website by using Envato Elements Template Kits.

I will give you a step by step overview from start to finish. [SOUND] First step, get a domain and web hosting. [MUSIC] The web hosting site that I am using called HostGator. Get started. It will bring you to choose a plan.

As a beginner, I think we will only need the most basic one, which is the Hatchling Plan. Let's just select this one. [MUSIC] Here we can register a custom domain, [SOUND] let's type my creative handbook. [MUSIC] If a domain is available, it will indicate free. My one says, Unavailable, because I've registered. Once you're happy with your domain and registration, simply follow the steps to fill out those questions and complete the billing.

First step, we're done, [SOUND] [MUSIC] Okay, once we've had our custom domain, I think now we're ready to install our WordPress. HostGator has made it a one click Install. We can just simply click Install.

[MUSIC] [SOUND] Yes, click here. Now, I guess, you must have arrived here. There are three things to notice here, okay? First of all, please double check your domain name.

Make sure it's a one that you just registered, and it's using the correct URL. Second, we will need to complete site setting. Fill out your site name and site description. The site description is very important. Let me give you an example. Let's just go to Envanto Tuts+, [SOUND].

And then this is a site description. [MUSIC] Next thing you will need to fill out this area. Please remember your admin password, okay? Now we can install. [MUSIC] [SOUND] I think we are done [SOUND]. [MUSIC] Now let's just go to visit our site.

Click here. [SOUND] Okay, a theme genuinely will determine the overall style of your website. Theoretically, you are free to use anything that you want. However, since we are using a template kits here, some template kits at some things might not be compatible with each other. So here I would suggest you to play safe and use the universal Elementor theme, okay? It's called Hello Elementor. Let's go to Appearance > Themes.

Here we go. [SOUND] In most cases, I think it will be here already. But in case it doesn't pop up automatically, you can go to Add New Theme, then type Hello Elementor, then to add it here, okay? And now let's just click Activate, [SOUND]. [MUSIC] Step four is to download and activate plugins. [SOUND] A plugin is like a downloadable software that we could download, then it will add extra functions or features into our website. Here we will need to add two plugins, one is Elementor and another is Envato Elements.

Let's click Plugins > Add New. Here let's type Elementor, and then press Return to Search. [SOUND] Here it is, let's install. [MUSIC] Once it's done, click Active, okay? It'll jump to this page, that means it's done. [MUSIC] Now repeat the same process for adding Envato Elements. [MUSIC] [MUSIC] Elementor and Envato Elements, they are best friend.

They are kind of coffees and cookies, peanut butter chocolate, they always work together. They will make our website building process much quicker, much easier, and much nicer. So make sure now you just download both Elementor and Envato Elements, okay? Let's just move to next. [MUSIC] Step five is to connect WordPress to our Envato Elements account. It's very simple. Let's click Elements.

Okay, here, we got a short video to show you how to connect. You can watch it, but now we are going to skip this, okay? On the upper right corner, it says Connect Elements Account. Let's do it. I've already have an account for sure, so I will just sign in.

Once I've signed in, the system will give me a token copy of this token. Then go back to WordPress. Paste the token here. [MUSIC] Now, account connected. [MUSIC] Step Five +, Upgrade to Elementor Pro. Why I say Step Five + is because this is a totally optional process.

It will need extra cost for sure. The reason that I would recommend you to upgrade to Elementor Pro is because a lot of premium templates, we will need to use a feature from Elementor Pro. Do you remember when I just showed you my website? I got that very active, excited, and mentioned popping, pop pop, pop up.

Those are the functions you will need to use Elementor Pro. So here, I just show you how to upgrade. Let's click Elementor, go Pro.

Choose a plan. Now, follow the process to finish your payment. Once your payment is done, you can get this zip file.

Let's download it, then go back to WordPress. Go to Plugin > Add New. Here, we will need to choose Upload Plugins. This step is a little bit different from what we did before, right? Then drop your zip file here, install it, and that's it. [MUSIC] Step six, download Envato Elements template kits.

Click Envato Ellements, there are three options, premium template kits, free template kits, and premium photos. Let's just have a look at those free ones first. [MUSIC] There are some good ones actually, [MUSIC] I think I really like this one, this tulip tea part. Imagine if you have a tea house business, you can just use this one.

This one looks also nice. [MUSIC] Okay, I think I will stay here too long, okay? Now, I will just show you my work. As I mentioned, I used a premium template kit, okay? It's called Socially, this one [SOUND]. Look at her. She's very yellowy, of course, I like sunshine colors.

I think it's just right for me [MUSIC] First, install kit, [MUSIC] The view kit. [MUSIC] Okay, inside the kit, there are so many templates. You're free to import all of them, but I think for me, cuz I only have five contents, I think they're a little bit too much for me. So I've decided I will only import the ones that I feel useful to me. I think I will need this one, this one, this one, then I just import them all. Bang, bing, [SOUND] attention please, these templates can only be tested with the Hello Elementor WordPress theme.

And this is the reason why I lead you to install Hello Elementor theme in the step three. It can be a hectic process if you just download the wrong thing in the first place. But now, we don't need to worry about it, cuz we've already download Hello Elementor theme. You are welcome [SOUND]. We can go back to our WordPress and click Templates. See, this has the templates that I have just download.

They're happy and safe. [MUSIC] Next step is to insert templates into our WordPress. Inside of this step, we would need to do two things, one, create pages, two, insert templates, and this is how we do that.

[MUSIC] First, let us go to our WordPress dashboard, go to Pages. Here, you can see there's a homepage there, that's the one I just created. Now, I'll show you how to add more pages, okay? Under the Pages, let's click Add New. Now, I will add maybe About, okay? [MUSIC] Within templates, make sure you select Elementor full width, okay, then publish. [MUSIC] Now, we can just go back.

Let's refresh. [SOUND] See, my About is here. Now, let's just repeat until you add all of your pages. [SOUND] Once we've add all of our pages, now I'll show you how to insert our templates. It's very easy.

Let's just choose a random one. Maybe we'll just edit Service. Click, choose Edit with Elementor. [MUSIC] Click this folder icon, [MUSIC] Then My Templates. These are the templates which is imported, simply insert. [MUSIC] Boom, now you know what I'm going to say? Yes, repeat the process.

It's incredible. I know some content is not right, but it is a website, a proper website. [SOUND] Next step, we will need to edit our menu. Okay, why do we need this step? Because we just did a lot of things, we create the pages, we make those changes, we download a lot of templates, and we also insert our templates. But our WordPress website, she doesn't know it, we need to tell her. Hello WordPress, I have created some templates, please notice, connect them together.

Allow me to use them, it will make you look good. And this is why we need to edit our menu. It sounds very technical, but it's actually very simple to edit. Let's go to Appearance, choose menu, select all of your pages, then add to menu. [MUSIC] Welcome to the final step, which is to customize our website. This process probably will take us some time, but I think we've done enough for today.

So if you want to know more about it, please check out your eBook. I will put more useful links and useful learning resources for you, so that you can check out when you're free and play around. [SOUND] Another cool thing about template kit is there's no need for us to edit the navigation, because the templates have done everything for us, and it will automatically make our site mobile, tablet, PC responsive. So it's really cool.

I hope you guys can make some time for yourself and make a website. We're done for today. I hope you guys had fun. Today is a big deal and we did a big, big thing, cuz making a website is not easy. I just hope after today's video, you can just give yourself some encouragement, find out some confidence. If you want to know more things about WordPress or how to use Elementor, don't forget to check out my eBook.

I just put some extra learning resource here, don't forget to check it out. You can make a website. The next video gonna be a big thing, we are going to make our promo video. There is another type of promo video that I didn't cover in our previous part.

In terms of this type, okay, you don't need to have storyline, you don't need to have a lot of information, you don't need to present a problem, solution, you don't need to share value. So what do we need to have? [LAUGH] [MUSIC] The launching [LAUGH]. I can't wait to share you guys my promo video ideas. I hope you guys had fun with me today, I am Dory. Thank you so much, guys. If you found this video is useful or you loved it, enjoyed it, please click the like button or just leave your comments below.

It will mean a lot to me, to my personal work, and my Tuts+. Love from Tuts+, bye for now. [MUSIC]

2022-08-03 06:20

Show Video

Other news