How to Make a Professional Website For Free 2023


in this video, you will learn how to customize and build your own wordpress website step by step. We’ll go through every single step with you and make sure that you understand exactly what we’re doing.




Install WordPress

Now we need to install the platform we’re going to use to make it. The platform is called WordPress – it’s a content management system and super popular with a large community of users.

  1. Now that’re you’re logged in to your cpanel

  2. Scroll down to Software/Services section of the main page

  3. Click on the icon that says “QuickInstall”

  4. Click on WordPress on the left side menu

  5. Click Continue

  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details

  7. Click “Install now!”

Download and Install Theme

You can choose any theme template to customize on wordpress. But the one we’re using for this tutorial is the Sydney Theme. you are now on the “Dashboard” of your website. Now it’s time to start customizing our website! 

  1.  On the left side, find the Appearance link – hover over it and click “Themes”

  2. At the top you’ll see some tabs – click on WordPress.org Themes

  3. Then filter by clicking Popular and find the “Sydney” theme


Download and Install These “Other” WordPress Plugins

  • SiteOrigin Widgets Bundle (need to activate the social media widget)

  • Black Studio TinyMCE Widget

  • Contact Form 7

  • Easy Facebook Likebox

  • Polylang (if you want to have translations for your website)

  • Recent Posts Widget Extended

  • Simple Lightbox



Create Homepage and Blog Post Page

First we’ll create two new pages

  1. Go to your WordPress dashboard > Pages > Add New

  2. Title your first page Home or Homepage

  3. Go to the Page attributes on the right side and select Front Page in the Template drop down

  4. Push the publish button


Now create a new page for your blog page

  1. Pages > Add New

  2. Title your page “Blog”

  3. Push the publish button

Now that we have our front page and blog page for our wordpress website, we can create all the pages we need to and customize our entire wordpress website. Are you excited? I know I am. 

Modify Permalinks

The last thing we’re going to do is modify our links so we show the www at the beginning of our URL and also how our blog post links look.

  1. Go to your dashboard > settings > general

  2. Where it says wordpress address – type in www. in from of your web address

  3. And then where it says site address – type in www. in from of your web address

  4. Then click save changes

Now let’s change our permalinks for our blog posts pages

  1. Go to your dashboard > settings > permalinks

  2. Select the post name option

  3. Click save changes

Edit Our Slider Images on Our Homepage

Now if you want to add your own custom slider images to your wordpress website, you can doing the following steps:

  1. Go to your Dashboard > Hover over Appearance > Click on Customize

  2. Click on the Header Area tab

  3. Click on Header Slider

  4. Change your slider images and text to whatever you want

  5. Near the bottom of the page you will see a section for your button. You can add the URL you want to link that button to and the text you want in the button. If you don’t change the #primary for the URL then when someone clicks on the button it will skip to the next section of the homepage

  6. Make sure you click save and publish when you’re done editing

Add Custom CSS

We’re going to do this step now just to get it out of the way. It’s just some copy and pasting.

Now to add some additional customization to make you’re site really look professional.

Add the following CSS code by doing this:

  1. Go to Dashboard > Appearance > Custom CSS

  2. Paste in the following:

.widget_sydney_latest_news .roll-button {

 display: none;

}

body > .preloader{ display: none; }

.widget-area .widget {

 padding-top: 0;

}

.site-info {

 text-align: center;

}


#gallery-1 {text-align: center;}

figure.gallery-item {margin: 5px; width: 267px; display: inline-block;}


.roll-counter .numb-count { line-height: 0.5; }

Make sure you click Update Custom CSS

Customize WordPress Homepage

Time to Customize the Homepage

Now the fun begins. First we’re going to create our homepage and then create pages to link it all together. Let’s open a tab for our homepage

  • So go back to your homepage by going to Dashboard > Pages > All Pages > Click on Homepage (edit homepage)

  • This is where we are going to use the page builder to build our our sections

Create About Section

The first section that we are going to create is the Services section. To do this we first need to create some services.

  1. On the right side of your Dashboard go to Services and click Add New

  2. Title Your Service

  3. Add a small description if you please

  4. Go down to the service icon section and add whatever icon you want – there is a link there for shortcodes

  5. If you want to link the title of the service to another page, go ahead and type in a URL

  6. Add a category name to your service so we can “show’ these later – you’ll get what I mean in a little bit. Just click Add new category and type in “Type A”

Do this a few times to get at least 3 services but you can make as many as you want. Just be aware they will show up on your homepage and you don’t want to make the page look too messy.

After you’re done creating services 

  1. Go to your homepage (edit)

  2. At the top of the content section click Add Row

  3. Click Edit on the upper right of the new row

  4. Change the number of rows to 1

  5. Now click add widget and select Sydney FP: Services Type A

  6. Click Edit within the new widget

  7. Title it Our Services and make sure there is a “-1” in number of services you want to show

  8. Where it says “Enter the slug for your category or leave empty to show all services.” type in “type-a” (or whatever category name you used for the services)

  9. Now just click done

  10. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

Create Blog Post Section

Now if you want a latest news section – follow these directions. I think a blog is something every website should have, no matter what type of business or website you are running.

  1. Go to your homepage (edit)

  2. At the top of the content section click Add Row

  3. Click Edit on the upper right of the new row

  4. Change the number of rows to 1

  5. Click Save

  6. Now add widget and select the Sydney FP: Latest News widget

  7. Click edit on the widget and title it “Latest News”

  8. Now click done

  9. Push the Publish / Update button and go ahead and check your homepage to see it update if you want

** Nothing new may show up in this section since we haven’t created any blog posts yet. That’s ok. We will create them in a little bit! **

Create About Page

Before we create our first page, we want to go in and get rid of the header image that defaults for all the pages. So I want you go to go and do this:

First we need to create a new page.

  1. Go to your dashboard and go down to pages > add new

  2. Title the page About

  3. Create a row > edit row > set row layout to 1

  4. Click on Layout tab

  5. Add 40 to top/bottom padding

  6. Select full width

  7. Push Save

  8. Now click to add a widget and select the Visual Editor

  9. Add your page title “About Us”

  10. Just type in whatever content you want about your business or you or anything else – you can also format the font here

  11. Once you’re done, click done

Add Employees

To add a new employee: go to your dashboard and on the left hand side find Employees and hover and click add new employee

  1. Name your employee

  2. Scroll down to then bottom and input information about the employee

  3. Add a profile photo for the employee if you wish

  4. Then you want to create a custom category name for the employee so we can reference it

  5. Click publish

Do this over and over again to create your employees that you want to show up on the employee page.

Create Employees Page

Now let’s create our Team or Employee page

Go to your dashboard > pages > add new > and title your page Employees

  1. We need to create a new row and set the row layout to 1

  2. Then add a widget and select the Sydney FP: Employees widget

  3. Click edit and title it “Meet The Team”

  4. For number of employees, put in -1

  5. Click done

  6. Now click publish

The employee page shows all your employees. By default it just lays everyone out.

If you want to customize your team page and have the title at the top and a call to action at the bottom you must create a page and create a URL that is different than “Employees”

Also your employee section will us a slider that shows 3 employees per slide.

I like this layout that we have put together better since your visitors can still navigate via the header menu

Create Portfolio Projects

Before we can create our gallery or portfolio page. We need to create upload some gallery/portfolio images or projects.

You can add as many projects as you want. In the demo website, I add 12. I will walk you through how to add one project and you can just do this over and over again to create more projects.

  1. Go to the dashboard and hover over media and click add new

  2. Click upload files > select files > select images you want to upload

  3. When you are ready -> create a new page and title it “Image Gallery”

  4. Click Add Media

  5. On the upper left click Create Gallery

  6. Upload images you would like to include

  7. When finished, click the button to create gallery

  8. Make sure to publish this page


Create Contact Us Page

First we need to create a new page and title it Contact Us

  1. Go to your dashboard and go down to pages > add new

  2. Title the page About

  3. Create a row > edit row > set row layout to 1

  4. Click on Theme tab

  5. Add 50 to top/bottom padding

  6. Go to background image and select and insert a background image

  7. Go to row layout and select full width

  8. Push Save

Create Blog Posts

  1. Go to your Dashboard > Post > Click Add New

  2. Title your blog post whatever you want

  3. Type in whatever content you want and change the text formatting if you would like

  4. For format (on the right) I just leave it as standard

  5. Once you’re done you can add in a category for the blog post if you would like

  6. Add a image in the Featured Image section on the lower right if you want a thumbnail to show up on the homepage and blog post page

This is how you create blog posts

Once you create some blog posts, you’ll see them populate on your homepage and if you go to your blog page – you’ll see them there. We will put a link in your header menu for your blog page in a a little bit.

Translate Your Website

If you want to translate your website, make sure you have the Polylang plugin installed and activated

Step 33: Make Header Menu

  1. Go to Dashboard > Appearance > Menus

  2. Click create new menu and title it Header Menu

  3. Make sure Header Menu is selected in the drop down menu section at the top

  4. Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items

  5. We are going to add the following pages: Home, About, Employees, Portfolio, Blog, and Contact Us

  6. Click Save

Note you can click and expand any menu item and change the URL to a custom URL and the Label name to a different name (just make sure you click save after you update)

You can also add any pages you want that aren’t in the list by using the Custom option.

Modify Footer

Now this section you must be extra extra extra (and extra) careful.

If you delete one extra line of code – all your hard work will be wiped out. 

Follow this section carefully if you want to modify the header to show your website name.

  1. Go to your Dashboard > Appearance > click on Editor

  2. Click on Footer.php on the right

  3. Click the proceed button in the center

  4. Now delete everything you see

  5. Take the code below and wherever it says NYC TECH CLUB in red – change it to your web address and business name (two places you need to update – just two!)

<?php

/**

 * The template for displaying the footer.

 *

 * Contains the closing of the #content div and all content after

 *

 * @package Sydney

 */

?>

 </div>

 </div>

 </div><!-- #content -->


 <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>

 <?php get_sidebar('footer'); ?>

 <?php endif; ?>


 <a class="go-top"><i class="fa fa-angle-up"></i></a>


 <footer id="colophon" class="site-footer" role="contentinfo">

 <div class="site-info container">

 <a href="<?php echo esc_url( __( 'https://www.nyctechclub.com', 'sydney' ) ); ?>"><?php printf( __( 'Proudly created by %s', 'sydney' ), 'NYC TECH CLUB 2016' ); ?></a>

 </div><!-- .site-info -->

 </footer><!-- #colophon -->

</div><!-- #page -->


<?php wp_footer(); ?>


</body>

</html>

And click update file

Go to your website to make sure everything is still running ?

Now one last reminder. If you turned off your WP Super Cache or changed the settings. Go back and activate/update it. And then celebrate…because you’re done!
Tags

Post a Comment

Post a Comment
Previous Post Next Post