Learn from scratch how to create an amazing website! In this tutorial we will work with free tools and free images! After watching this video you are able to create powerfull websites and even become a webdesigner for a living!
We will work with the free Phlox theme that has a lot of customisation options. We will also make use of Elementor. A free page builder with premium possibilites! See it for yourself in the first 7 minutes of the video! We can use professional images from pexels.com or unsplash.com
Demo website: http://elementor2018.com
Webhosting with 60% off: https://www.siteground.com/go/webhosting-with-discount
PHLOX theme: http://averta.net/phlox/wordpress-theme/
Elementor Page Builder: https://ferdykorpershoek.com/elementor/
Brief Overview of the tutorial:
0:00 Overview of the tutorial
7:10 The 4 steps to get up and running
7:37 Get a domain name and webhosting
11:09 Install WordPress
13:40 Clean Up The WordPress Backend
17:18 Create Pages for your Website
19:26 Create and Configure the Menu
23:27 Configure The WordPress Settings
24:20 Get the Sydney Theme
26:44 Custome the Phlox Theme
27:15 Get The Images I use in the tutorial
29:55 Download the Images I Use in this Tutorial
32:42 Add Google Analytics to Your Website
45:10 Download Elementor
Elementor
46:26 Edit the homepage using Elementor
46:42 The basics of Elementor
48:37 Get Free Stock Images from Unsplash or Pexels
49:13 How to Resize, Crop and Optimize images using WordPress (no Photoshop needed :))
50:40 Add and configure the background of a section in Elementor
52:26 Setup a header area with text and 2 call to actions buttons that animate
1:07:53 Adjust the header background. Add a gradient overlay.
1:09:13 How to use the shape divider in Elementor
1:10:36 Configure an Icon Box
1:13:14 Configure the Image Carousel
1:16:39 Use padding and margin to style your website
1:19:39 Duplicate Columns
1:21:31 Use the Video Element
1:23:23Create an about us section with background and floating text area
1:28:39 Create a testimonial sections
1:42:43 Create a section with animating images fullwidth
1:45:09 Create a section with a text and image about yourself (fullwidth)
1:48:46 Duplicate a section
1:49:36 Create a section with a video background and contact form
1:57:39 Add a button with an anchor link (link to a place within the page)
2:00:40 Configure a Image Gallery
2:07:09 Add a toggle element
2:11:44 Add a counter
2:14:25 Configure the progress bar
2:20:25 How To export pages and sections to a different page or website
2:23:24 Create a maps element
Portfolio
2:29:15 Install the portfolio plugin that comes with Phlox
2:29:51 Create a portfolio item
2:31:42 Configure the portfolio page
2:39:18 Configure the portfolio page even more
Blog
2:43:53 Create a blogpost
2:46:35 Paragraphs and headers within a blog post
2:49:05 Style your blogpost
2:52:46 Add images to your blogpost
2:55:33 Add custom CSS to your post/page/website
2:59:07 Add a recent post with thumbnails plugin
3:01:50 Optimize your images for Google (SEO)
3:07:53 Configure the blogpage
3:11:04 Blogposts and Comments
3:12:17 Create a gravatar
Footer Area
3:14:31 Activate the footer area
3:15:34 Add a Instagram widget
3:17:54 Add a Facebook widget
3:19:21 Add a Recent Post Widget
3:22:59 MOBILE FRIENDLY RESPONSIVE (THIS IS AMAZING ABOUT ELEMENTOR). Optimize your website for tablets and smartphones
3:31:18 More about Elementor Pro
Follow Up Tutorial: https://www.youtube.com/watch?v=FXcJOVtJkBo
How to create a website? In this video I show you step by step how to create a website! Creating a website is easy these days! Get a domain name and webhosting, install WordPress, create pages, assign a menu, get a free theme, install Elementor as page builder and build your pages one by one. Add a blogpage with blogposts, add portfolio items and optimize everything for Google! In 3.5 hour I will show you how to create your website from scratch! It is easy! Besides a domainname and webhosting you will create a free website with a free theme, free page builder and free stock images!
You can even install WordPress on your own computer using ServerPress. In that case you can create your website for free. No cost! Not even 1 dollar! But when you want a domain name and webhosting there are costs involved.
Well, goodluck! If you have any question, please leave a comment!
Thank You so much for this tutorial. How perfectly unselfish of you to take the time to help others.
You and your wife look beautiful together.
🙂
Hey Fredy, thank you for the valuable tutorial. I have a question at @12:33. Can I go and change my site name(not the domain) by going back to word press? also when I visited the site to check the output, pages in the menu are flickering and blinking . Please help.
what might cause social media icons not display at the top ?
Ferdy, Thank you SO much for this amazing tutorial. You made me like WP a lot better. Love your work man!!! all the best
Question: At 23:27 and even at 24:22, there is no search field. But, then when you change themes at 24:45, there is now a search field (and several other elements!). And then you comment on it later on (37:40) "We could have a search button at the right, but I don't want it. I have one already here. So I disable it." Where did the other one come from?
Hi Ferdy! thanks for this great tut. At 52:41, I can see you drag and drop the header in the row without any issue. When replicating this, the row I get after uploading the background picture becomes way smaller than yours which cause the Header text to be fragmented in 2 lines. Any idea of how to fix this?
Don't know if that has something to do with that, but when I upload the picture, the picture is full width but is not full height, thus I have to manually by increase the padding so that it is like yours.
Thanks again for your help! Axel
I'm beginer wordpress developer. plz suggest me, how can i improve worpress developing
very very thanks for your uniqe tutorials
Thank you so much for this tutorial!! I have a question. For example with the 'What Our Clients Say About Us' all the messages are about the same length, so they all appear on three lines. What if one review is longer then the other? The boxes would become of unequal size. What is a way to overcome this problem? Thanks in advance!
You are a great. Many thanks. Awesome tutorial.
awesome buddy!
first of all, i would like to thank Ferdy's tutorial, it is truly helpful, i follow it step by step, easy to catch and can build prof site with money saving.
i encountered a situation when using PHLOX theme, when it turns to phone view, the text in burger menu shows very small, barely seen, i tried to remove the theme and reinstall it, still not working.how can i fix it? http://www.meefmy.com
Elementor is so overrated, I prefer Themify builder
Very good and clear tutorial. One question…. when you created the menu you skipped the home button, because you liked an image (like the little apple on the apple site) better. But i did not see you do it. How can I make a home button with an image instead of the word "home"?
You are a CAPOOOOO!!!! GENIOOOOO! MAGOOOOO! TE SIGO COMO VOS A MESSI! JAJAJAJ I follow for than you to Messi. Jajajaja The Barça fall down to Liverpool! When he plays we "us" his country is not a "Magic".
This page is "respinsive"? Fix well in a SmartPhone? Thanks from Buenos Aires Argentina
Thank you for this tutorial! This is very helpful! God bless you and your beautiful family!
What is better, Phlox, Astra, or Oceanwp?
Bless you!!! It's so hard to find a tutorial for blogs and post pages. Thank you so much!!
Is this the free version of elementor or elementor Pro?
Thank you ferdy.How can a Swiper Carousel like a picture be built by Elementor?Please Help me.
https://ibb.co/dP1vcVP
like this: https://codepen.io/dannyb/pen/mVZbar
Thanks you Ferdy, very useful tutorial, I learned so much about WordPress, themes and self web development, you practically walked me through to creating my first personal website and blog that was on hold for so long
Love it when Dutch people speak English #nohomo
Hello, may I ask you why you using Astra in your website, while in this tutorial when I see the phlox theme seems to have a lot of options and features? Im just curious, what the reason was to select Astra instead of Phlox 🙂 Thanks
This is a great tutorial! Thank you, Ferdy! I've used your videos as a foundation for my own website business. Thanks to you, my websites are flawless, functional and are gorgeous to look at!
Just a simple suggestion, though…switch to NameHero for hosting. They have a no nonsense plans whether you're a beginner or a business professional. They offer the latest cloud tech for their customers and a plethora of videos that show you how to get your website or web business going.
Check them out and take advantage of their awesome spring promo: https://www.namehero.com/promo/220.php
Thanks ferdy i made a blogging website commerceducare.com wholly by watching your video only. Please review my website if there is any changes needed please tell me