In this video I’m going to tell you the best way to construct a site that looks simply like this, that I charge customers into $10,000 to make for them. In the event that you track with you’ll, have your own site underlying an evening regardless of whether you’ve, never done this. Howdy I’m Evan
I handle all the backend media work here at insightful box. We get a huge amount of messages, asking us how we begin and develop organizations and that’s. Why we chose to dispatch this channel to give you all the instruments and assets expected to succeed, at that point no one else is discussing on YouTube.
So I need to give you all the specific methodology that I use to fabricate 8 to 10 K sites, so you can guarantee you’ll, be getting the equivalent. Results track with as we experience the 10 stages. I’m going to construct a site for one of my monetary consultant customers, so you folks can see the arrangement in real life make a point to LIKE the video and buy in for more business building content.
All right, let’s, bounce directly into it. Our initial step is to get an area name for your site. This is the location of your webpage that ordinarily finishes in website that you type in to the head of your program to show up at a website.
Think of your area name as the location of your home. It’s, anything but difficult to recall, and you can pass it along to a pizza conveyance fellow, so they can discover you without any problem. To start with, we need to think about certain thoughts for your space name that you need to use.
This can be your business name. Your thought, your own name, it all – relies upon what your site’s for the money related guide customer. I’m building. The site for is clear, trail budgetary, so I’ll record a couple of varieties of their name also that I’ll, be utilizing a lot of like genuine addresses.
Domain names are special, so there’s, no copies. We have to check if the area name you need, is available to profess to check accessibility head to moment space search com to be sent to a page that will consequently check if your name is taken.
I’m composing, clear path comm and it’s. Taken in all probability, your top decision is taken and that’s completely. Alright first attempt some unique expansion types that are accessible. You can utilize code label web just as once for explicit countries.
Since clear path .com is taken. I’m going to attempt clear path. Monetary com to my inquiry and see that, it’s accessible once you discover one that works, record it, in light of the fact that we’re, going to guarantee it in the following stage, stage 2 site hosting.
Think of facilitating, similar to the plot your area name is alloted to. We need that establishment so as to really construct a site facilitating is offered by a huge amount of various organizations, however we need to keep things basic and simply suggest Bluehost.
This is the main advance that requires a buy and they are by a wide margin the most financially savvy stage accessible. They make things very simple to begin in addition to the area is free when you set it up with them here’s.
A truly significant key to your prosperity. Recollect that Bluehost uphold is accessible day in and day out to assist you, with anything identified with your site, make a point to incline toward them vigorously trust me here’s, the way to pursue Bluehost head to Bluehost, comm and click get started.
They’ll give you a couple of various choices, yet we truly just need to pick between the initial two select essential. In the event that you expect to just make one site or furthermore, on the off chance that you mean to make a lot of various sites, you can generally return and update this later next include the area name, we discovered together and hit next.
We need to set up your record either by filling in the data boxes or utilizing a Google account. Next, we need to choose a bundle. I’m, going to pick one year to keep costs as low as could reasonably be expected. Next, they’re.
Going to attempt to offer you some bundle additional items, I unclick. These. The just a single worth considering is space security assurance. On the off chance that you don’t have it, you may get a couple of spam messages, however that’s, basically it in the soul of sparing money.
For you all, I’m, not going to get it, yet it’s completely up to you last part, include your installment subtleties and hit submit once effective head to your email to confirm your record once you checked your email and signed In it kicks you off with the onboarding process.
First, include the name of your site and a brief slogan about what your site’s about. You can skirt the various strides, as we’ll be dealing with this ourselves. When you’re done, you’ll show up at the Bluehost dashboard.
This is your war room for dealing with your area and facilitating to see your new site open up. Another tab and type in your location. You’ll, see that it has an under-development page to keep it obstructed until you’re prepared to launch.
Sometimes the arrangement can be somewhat moderate, so try to allow it an hour or two to ensure everything associates appropriately stage 3. Picking a substance the board framework, you have your plot of land and you & # 39.
Ve got your location presently it’s an ideal opportunity to really fabricate a house on it with regards to a CMS. There’s, various decisions accessible, however we’re, going to utilize WordPress to deal with the entirety of the substance on our site.
It’s, the most well known web designer on the web, in light of the fact that it’s basically such a great amount of better than the opposition being 100 % free. It has a huge amount of additional items that give it endlessly more usefulness than any of these platforms.
Spamming you with commercials, it’s utilized by Star Wars, PlayStation Disney and a huge amount of other monstrous organizations. End, WordPress is what we’re, going to use to construct our site. Let’s, go into WordPress, so we can begin assembling your webpage head back to the Bluehost dashboard and hit the catch in the top right.
That says WordPress now, when it’s stacked, it may appear to be a ton, however it’s truly simple to master running down the left side is an assortment of alternatives to change the various pieces of your site. I’ll feature a portion of the significant ones.
Posts are the place you can include, or alter blog entries. Media is the place you can store pictures, and recordings pages are the place you can include your landing page about us or contact. Appearance is tied in with altering. The visuals of your site, similar to shading and text style modules, are programming that you can introduce legitimately into your site for included usefulness: clients, allowed you to include, and eliminate, who can really alter your protected first off.
We need to change your WordPress login subtleties. This is a different login. You utilize just to get into WordPress head to clients, click on your principle client look down to the secret phrase segment and hit include another password.
Let’s. Take a second to see how your site looks mouse over to the top, where it says your site name and click visit site. This will allow you to see how it looks behind that under construction page. Only you can see this until it’s.
Ready to be unveiled to the world, it’s fairly, simple, but remember by the end. It’s, going to look like this to get back from here to the wordpress dashboard click the dashboard button in the top menu.
This top bar is only available to you and lets you edit your site, while actually being on it step 4 import in a pre-built starter site. We can use a free plugin that allows us to import in a ready-made website that we can then customize to make it 100 % unique to install the template plug-in mouse over plugins on the Left, menu click on add new and once they’re Searched starter templates and click install now then activate once installed.
Click see library to view the library of designs we can choose from. First, we need to choose Elementor from the list of builders available. Elementor is the drag-and-drop tool. We’re, going to be using to actually move around the different things on our website.
First, we want to click on the filter and sort by free scroll through the list of options and click into any of them, to see a preview, try scrolling through yourself and find the one that matches your goals.
If you & # 39, re selling products choose an e-commerce one. If you want to start a blog choose the blog ones. I’m gonna choose this one for clear trail. Financial, since it’ll, be easy to edit into exactly what we need.
Don’t worry too much about the actual content on this template website. We just need a great base to get started so once you & # 39, ve found your choice, simply click import site and the plugin will start making all the necessary changes to make your site look exactly like it once finished.
You & # 39, ll, see a little celebration and you’re able to click. The link that sends you directly to this finish site looks great on my end, so I’m, not going to leave you at this template like wicks or Squarespace, or all these other tutorials.
Let’s. Talk about how to turn this template into your own unique website, step 5, creating a website blueprint before we can get to building your website. We first need to create a plan of attack to create our blueprint and we need to figure out what pages we want to have on our site and the content that should go on each one.
Let’s start by talking about the essential pages that every website should have. First is the home page, which acts as the central hub of our website. It needs a large hero section that quickly explains the purpose of the site, with an enticing image and further down needs to provide more details about what you do, why they should care and what actions the visitor should take by the time.
Someone reaches the bottom of your homepage. They should have a complete understanding of everything your website is about. Next, you should always have an about Us page that offers some details as to who you are and how you can help assist website visitors for most sites.
I build this includes a picture of the team or organization and maybe the office space. It should include some details explaining your background and experience and how it directly helps clients reach their result.
Finally, you should have a contact page that lets people reach out to actually talk to you. Not only should there be a forum, but should also include some details about what will happen after they reach out, so they feel confident, filling out that form or your visitors booking a meeting with you asking for a job signing up for a free offer.
Your contact page needs to make sure that they’re, informed and confident filling out their personal details. Depending on what site you’re, making you’ll most likely need some other pages to fill your needs.
Why reinvent the wheel, try researching some of your competitors and noting some of the pages they have on their site that you want to include on yours for the site I’m, creating for my client I looked around and noticed that many other financial Advisor sites have a testimonials page where they list some clients that they’ve helped.
So I’m gonna add the same thing. When you have your list of pages, you want to create head to your WordPress, dashboard and click. On pages on the Left menu, this is where you can add and remove pages of your site to add a new page, simply click add page at the top, and you can change the title and publish it to the world.
The template you imported already comes with a bunch of pre-made pages, so you’ll want to double-check. If any of the pages you want have already been made and remove any that you won’t be using on your site in the future.
Next, we want to change the menu of our site so that all the proper navigation is at the top mouse over appearance and click on menu from here you’ll, be able to add your pages to the top navigation on your website.
Select the pages you want to include and hit add to menu from there, you’ll, be able to drag and drop the pages in whatever order. You’d, like once: finalized click on save menu and check out the site to see your new layout with your website layout ready, you’re, almost ready to start building.
Let’s. Talk about some graphic design principles to make sure your website looks as professional as possible, step 6, creating a design plan. Choosing the right, fonts images and colors will make your website look very cohesive and extremely professional.
The best part is you. Don’t. Have to be Picasso to make out the perfect arrangement, we can use best practices to make all the decisions for us. First, you want to decide on the colors you’ll, be using on your site, colors carry with them certain meaning and emotions that people will automatically make.
When looking at your brand check out this brand color wheel to see the shades of colors and the emotions they’re, trying to communicate, find one that connects with the purpose of your site, then search on Google for the hex code to find the Shade you want to use a hex code.
Is the letters and numbers that you’ll, put on your site to get the exact shade of your main color? You can also search canva, color wheel and add your hex code to see some complementary color options for my financial advisor client.
I wanted to use a dark purple as it communicates creativity and wisdom, which helps show that they & # 39. Ll use that wisdom to help invest their clients money. Next, we want to pick a headline and paragraph font for our site, search for google, fonts and click on the first page.
You & # 39, ll, see a huge list of fonts here, click into one you like and see how it looks with some of the text from your website. The best part of google fonts is. They include some common pairings, so you can find one that a ton of other designers are using for this brand.
I want to communicate a professional style, so we’re, going to use this header and match it with the most common paragraph pairing below. Next, we want to plug these fonts and colors into the website, so they become automatic on any page.
You make to do that. We need to go back to your WordPress admin panel and click on appearance and then customize. This takes us to a panel that lets you change the design principles of the website, first head into global and change the base, colors that you want for the website.
Next, head back to typography and change your heading and base typography to match the fonts that you chose next, you want to be able to change the color of the buttons on your website. You can do this by clicking into the buttons section and changing the color here now.
Anything new you create will use these fonts and colors as default. Finally, we want to add a logo to our site if you click on the pencil next to the template logo. On the site you’ll, be able to swap out their logo with your own.
If you don’t, have a logo make sure to check out our free course, where I outline exactly how you can make your own logo for free. This is the exact same process. I charge clients one to three thousand dollars to do.
The last part of our design plan is figuring out. What pictures you want to include on your site, obviously taking all the pictures yourself is a huge ask and swiping them off. Google is actually illegal, so we want to find some free use resources where we can get some amazing high quality pictures for your website.
There are three main types of photos that you want to be, including on your website. Using all three will make sure your site is set up to succeed. First, you want to be including happy people who match who your website visitors are.
This gives them someone to empathize with, as they’re scrolling through the website. Second, are related photos. These might be the outcome of your service or a metaphor: you’re, trying to communicate.
Finally, you can use wallpaper images. These are more general and intended to cover large amounts of space to break out large chunks of white when it comes to finding free use, images and videos there’s, two main resources that I go to unsplash and pixels unsplash provides a huge library Of free use photos that are professionally shot, so their style is high quality and doesn’t come across as looking like stock photos.
Pixels does the exact same thing with free use. Video go through both of these and find photos and videos that match your website goals and download them to include them on your site, decide on your colors, fonts and images for your website and move on to the next step.
Let’s, get building. If you’re enjoying this video make sure to hit the like button subscribe and turn on the notification, though, is this helps our team and lets us know. You want more content, just like this step.
7 building your website to get started. We’re, going to be going in and building each of our pages using a drag-and-drop builder called Elementor. This allows us to visually edit everything, and since we have a plan, all you have to do is just follow the blueprint to start building with Elementor.
You first need to pick the page. You want to build on head back to the wordpress, dashboard and click on pages. Then click on home page and select edit with Elementor, which will open up the new editing tab.
Once it’s loaded, you’re, going to see the full page that we use to build our site on the left. You & # 39, ll, see the Elementor editor panel. This has everything you need to build your site and on the right, you’ll, see an actual version of your website, but now you’re, actually able to drag and drop around everything on the page.
No changes here are published until you hit the Update button at the bottom building. A website with Elementor is broken down into three steps. First, are the elements of the page? These are the text, images, videos, buttons and more.
You can add new elements from this button. Up here, the general tab allows you to edit the contents of the element, the style tablets, who change how it looks and the Advanced tab lets. You add, spacing around the element now step 2.
Each element is dropped into a specific column on the page. These are vertical columns where elements stack on top of each other to edit a column simply mouse over it and select it. You can change how much space a column takes up as well as the color of the background and add or remove padding as necessary.
Finally, each vertical column is placed within a specific section. These sections stack on top of each other to create a web page to edit a section simply mouse over the top and select it. You & # 39, ll, see a blue outline around the section you’re.
Editing from here. You can change its height. You can change the background image or color. It uses and change the padding of each section. So again there’s. Sections they’re, broken up by columns and inside each column, are the elements of your page now that you know how to use Elementor.
This is where your pre-made site comes in handy. We can use the pre-built sections from your site rather than doing everything from scratch, and we’re gonna edit them to make sure they look a hundred percent unique.
First, we’ll edit. The text we’ll, make sure they & # 39. Ll use the fonts that we chose well edit, the colors of the buttons and underlines that they match our brand color you and finally, we’ll, swap out the picture and voila a much more unique version of the exact same site we imported in You’re, not only limited to pre-made site templates either when you mouse over a section and select the plus, you’ll, be able to select the folder to see a list of pre-made templates that Elementor provides completely for free.
Similarly, you can select the a to see a list of Astra pre-made templates. We can use between these two folders and the pre-made site. You have you have more than enough at your disposal to build out every section of your site, never having to build one thing from scratch.
Now that you get how Elementor works, you have all the tools necessary to bring your blueprint into reality, go step by step and build out the different sections of each page. Until everything looks perfect here’s, a time-lapse of me building the website for the financial advisor client, I’m, simply using templates and matching my blueprint and adding everything in so it looks right sticking with these templates ensures everything is professionally Designed and matching it to your design rules ensures everything’s, unique once I finish a page, I update it and move on to the next one.
Just like that. I was able to build a website in under an hour, go through and build the site yourself using Elementor and all the different templates available, and you can move on to the next step as we get ready to launch your website to the world step 8 phone.
Optimization well, there’s, one more crucial step that we need to do and that’s to make sure your website works on phones, while your same might look great on your desktop computer. If you change the resolution, there might be a few things off, so we want to make sure to avoid that all the templates we imported in are designed to work on phones, so you’re, already 90 % of the way there.
The good news is Elementor allows us to edit our mobile view so that your website will look perfect on any screen. First, we want to go through our pages and note any issues we have when viewing them on different resolutions, open up your homepage and try changing the window size to different resolutions, scroll through and note any issues with the site, such as text that’S too, big or small, or strange padding around certain sections with your list of tweaks, we can hop back into Elementor and start actually making the changes.
When you head to the element or editing section of your page, all you have to do is click on the screen at the bottom to change the type of resolution you’re editing there’s, three modes here, desktop tablet and phone.
Any change you make in these settings only affects how they look on those devices, so you can custom tailor each one to look perfect. For example, here we’re, going to change the size of the text gloomy on phones.
We’re going to Center things as well. This section here is loading way too thin, so we’re, going to select it and change the padding so that it looks much better check out your website on a few different devices to make sure it looks perfect and move on to the next Step, let’s, get your site launched step 9 launching your site.
First, you want to do a final review of the site and make sure everything’s, good, to go, look for spelling errors or any issues with the site that you can quickly fix you. We also want to delete any pages or posts that you aren’t using in the final version of your website you, the next step, is to remove the under construction overlay on the site, simply click on under construction on the top bar and toggle.
It off in order to remove it from your site. If you refresh your site, the under construction overlay is completely gone, and people who put in the domain can now see your new site, give it an hour or two to update before you start sending it to friends, as sometimes it’s cached and Needs time to update fully just like that, your site is launched to the world.
Congratulations on building it yourself and making sure you set it up to succeed, step 10, the most important part of your site that most people get wrong. The most important part of determining the success of your website is the content that goes on it fact.
So it could have a huge impact head to the comments right now and let us know what topics we should make future videos on and we’ll, try to get on them as soon as possible. Again thanks. So much for watching [, Music, ], [, Music, ]