Categories
Website Design

How To Make a WordPress Website (in 25 mins) Simple & Easy [Video]

Start here https://websitelearners.com/video/make-a-wordpress-website/#start Buy domain and hosting from Bluehost using the above link and get our Make a Pro Website WordPress course for Free Get Domain Name https://websitelearners.com/domain-checker/ Looking to make a WordPress website? You can make any kind of website like Blog, Ecommerce, Business, Entertainment etc. Learn how you can quickly make a WordPress website by following our simple and easy steps. So lets get started. Table of contents : 0:00 Intro 0:19 Pick a name for your site 1:02 Get domain name & hosting 3:53 Create an Account on Bluehost 4:58 Install WordPress 5:56 Launching your site 6:45 How to control your website 8:12 Build your website 8:30 Import the design 9:53 Choose a design 11:34 Edit the content 14:07 Changing Header 15:12 Creating a New Page 20:41 Adding the page to menu 23:26 Editing the page for mobile view ===== Part 1 : Launching Your WordPress Website ===== Now we’re going to make our website in 4 steps. 1. Pick a name for your website. Go to this link https://websitelearners.com/video/make-a-wordpress-website/ And then pick a name for your website and click Check Availability This will be the domain name for your website. Once it is available, you can now go to the next step. 2. Get Domain name & Hosting Domain name & Hosting are required for launching your website. Domain is the website name or address which is used to reach your website. Hosting is the place where your websites files get stored. Now click the Get Hosting & Domain button. And it will take you to the hosting & domain provider which is bluehost. Now click Get Started And then choose a plan based on your requirement. Once youve selected a plan, Next you need to enter your domain name which youve selected before and click Next Now fill up all the details, and select the period of your hosting validity. Enter the payment details and click Submit. Now youve got your domain and hosting. Now lets go to the next step. 3. Create an account on bluehost. To create the account, click Create Your Account. And create a password for login. Now you can login to your bluehost account with your domain name & password. Once youve created the account you can now go to the next step. 4. Install WordPress Once you install WordPress, you can start building your website. Now just click skip to install WordPress. Now to launch your website, go to bluehost dashboard and click Login with WordPress And click Launch your site. So! This is how you can launch your WordPress site, on the internet! ===== Part 2 : Customizing your default WordPress site into a Professional Website ===== You can do this in 2 steps. 1. Import a design. To import a design, first you need to install a theme. So to install a theme, Go to WordPress Dashboard Appearance Themes Add New Theme WordPress has thousands of themes. Find the perfect theme for your WordPress website. Astra is one of the most popular themes which has lots of pre-made website designs. Once youve selected your theme click Install & Activate. Now install a page builder which will help you to edit your design. We recommend Elementor which makes it easy to edit your pages. Next lets choose a design and import it to your site. So once youve got the design into your site, you can go to the next step. 2. Edit the content. To edit any page of your site, just click Edit with Elementor. Now you can edit any content on that page like changing the text, image or adding your own content. Once youre done with the changes, click Update to save it. Now if you want to change the logo or menu section, click the Customize option. Now if you want to create a new page, Go to WordPress Dashboard Pages Add New You can create your page using elements like text, image, video etc just by drag & drop. Also you can use a wide variety of blocks by importing it. And you can also import Page templates and start customizing. So this is how you can add a new page to your website. Now if you visit your website in mobile, you can see it is automatically optimised for mobile view. You can also customize your site for mobile view by changing the responsive mode to mobile in elementor. Thats it guys. This is how you can make a WordPress Website. —————————— The Tools we use: Get the best tools for your website https://websitelearners.com/tools/ Video Gear We Use https://kit.co/websitelearners/video-gear-we-use/ Our Video Editing Tool https://bit.ly/2Od546p Officially: We’re Hiring: https://websitelearners.com/careers/ Want your website developed by us? Email us your requirements to contact@websitelearners.com

Categories
Website Design

Integrate Chatbot in any website design using Tidio [Video]

Get 9+ Complete Responsive Web Design course 97% OFF – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=U_ROCK ——————- Full Course -https://youtu.be/pNcAuqInG6s ———————- Like our page – https://www.facebook.com/indiandesignr Join our group – https://www.facebook.com/groups/328971707545530

Categories
Website Design

How To Create Custom Header & Footer in WordPress [Video]

Elementor Plugin https://websitelearners.com/get/website-elementor Get Elementor Pro https://wl.tools/elementor-pro Get our NEW Course https://link.websitelearners.com/WordPress-Course Learn WordPress and create any Website in less than 7 days with our "Make A Pro Website" WordPress course. Learn how you can create a custom header & footer section to your website using Elementor. Lets say youve a website and instead of using the default header & footer of your theme, You can design your own header & footer section by following our simple steps. So lets get started. Table of contents : 0:00 Intro 0:53 Install Elementor Plugin 2:46 How to Create Custom Header 10:10 How to Optimize Your Design for Mobile View 11:42 How to Create Custom Footer 19:24 How to Import Premade Header & Footer Design Using Elementor Pro To create a custom header & footer, first you need to install a plugin. To install the plugin, go to WordPress Dashboard Plugins Add New Now search for Elementor Header & Footer and click Install & Activate. Once youve installed the plugin, in order to make the plugin work, You need to install the Elementor plugin on your website. To install Elementor plugin, click this link to download https://websitelearners.com/get/website-elementor Now to upload the downloaded plugin, Go to WordPress Dashboard Plugins Add New Upload Plugin Once youve uploaded the plugin, Click Install & Activate Now once youve installed both the plugins, first lets see how you can create a custom header. ===== Part 1 ===== To create custom header, Step 1 : Create a header block To create a block, Go to WordPress Dashboard Appearance Header Footer & Blocks Add New Now give a name to your block and select Header in type of template. Now select where you want to display the header and who can see it and click Publish. Step 2 : Design the header section To design the header section, Click Edit with Elementor And now you can select a layout to your header by clicking the plus icon. You can choose a background color by going to the style tab. And now can now design the header by adding elements like logo, menu, button etc. Once youve designed your header, just click Publish. And now youve successfully created your header. Now if you want to change the look of your header in mobile view, Go to elementor editing page of your header and change the responsive mode to Mobile. Now make the necessary changes and click Publish. All the changes done in mobile view will only be applied to mobile. ===== Part 2 ===== Now lets see how you can create a custom footer. To create custom footer, Step 1 : Create a footer block To create a footer block, like you did before Go to WordPress Dashboard Appearance Header Footer & Blocks Add New Now give a name to your block and select Footer in type of template. Now select where you want to display the header and who can see it and click Publish. Step 2 : Design the Footer section To design the footer section, Click Edit with Elementor And now you can select a layout to your footer by clicking the plus icon. Now you can start designing your footer by adding elements like heading, text, social icons, menu, lists, copyright etc. Once youve designed your footer, just click Publish. And now youve successfully created your footer. Now you know how you can create a custom header & footer to your website. Next lets see how you can import premade header & footer design instead of creating from scratch using Elementor Pro. To get elementor pro plugin, click this link https://wl.tools/elementor-pro Choose a plan, fill up the required details & make the purchase. Now download the plugin and install it to your WordPress site. Once youve installed the plugin, click Connect & Activate. To import the design, go to WordPress Dashboard Templates Add New Choose header/footer from the type of template & give a name to it. Now click Create Template & choose the design you want and click Insert. And the design will be imported to your site. You can also customize any element in the design. Once youre done with changes, click Publish. And now your premade design will be applied to your site. So thats it guys. This is how you can create a custom header & footer section to your website using Elementor. —————————— The Tools we use: Get the best tools for your website https://websitelearners.com/tools/ Video Gear We Use https://kit.co/websitelearners/video-gear-we-use/ Our Video Editing Tool https://bit.ly/2Od546p Officially: We’re Hiring: https://websitelearners.com/careers/ Want your website developed by us? Email us your requirements to contact@websitelearners.com

Categories
Website Design

The Job I Quit After 1 Day [Video]

Check out my COURSES! https://developedbyed.com/ Here is a fun story about my first ever job that I quit after 1 day. This story pushed me to start my own business and start working for myself. Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #job #money

Categories
Website Design

How to Make a Website [Video]

Create an account in Wix https://wl.tools/wix Hire an expert to write your website content https://link.websitelearners.com/30S4 Learn how you can create your own website using Wix. Lets get started! Table of contents: 00:00 Intro 00:54 Creating an account in Wix 01:40 Choosing a design for your website 02:34 Adding your content to the design 05:14 Publishing the site on the internet 06:35 Logging into Wix 07:27 Part 2 – Changing different parts on your site 07:40 Changing Menu 08:25 Changing Logo 09:58 Changing sites appearance in Google search results. 11:40 Creating a new page on your site 15:58 Changing the Appearance of elements on your new page 17:30 Optimizing your site for mobile view 19:50 Removing Ad on your site To create your own site using Wix, Were going to do 4 steps 1. Create an account in Wix To create an account in Wix, click here https://wl.tools/wix Sign up with your details and your account will be created. 2. Choose a design for your site Click Choose a template and choose any template you want. 3. Adding content to your site Now click Edit this site and you can change anything like text, images etc. To edit other pages, go to the page you want to edit and start editing. 4. Publishing your site on the internet. To publish, Click Publish Enter the name you want for your site Click Save & Continue So now youve successfully published your site. Lets say you want to make changes to this site later. To do that, Go to Wix.com Click Sign in and then log in to your site And now click Edit site and you can make the changes. === PART 2: Changing Different Parts of Your Website === 1. Changing the Menu. To change the Menu Click it and then select Manage Menu And you can edit your menu just by drag & drop. 2. Changing the logo. Click on the default logo Click Delete Now Click Choose Image & drag & drop the image you want. 3. Changing site Appearance on Google search results Go to Pages Home SEO Now you can change the site title and add the description you want. So this is how you can change different parts of your website. Next lets see how you can create a new page. To create a new page, Go to Pages Add Page Enter the name you want for your page, Now you can add content on this page like heading, buttons, images etc. You can also change the color of the text you want. Now you know how your website looks on desktops & laptops. But how will this site look on a mobile phone? To see your site on mobile view click on the mobile view and your site will be optimized automatically for mobile. Now to change your sites appearance on mobile view, just make the change in mobile mode. So this is how you can optimize your site for mobile view. So now, youve successfully created your own site and optimized it for mobile view. Now if you visit your site, you can see that you have an Ad for wix.com Now how do you remove this ad? So to remove this Ad, were going to do 2 steps 1. Upgrade your plan in Wix To upgrade, Click Upgrade Now and you will get different plans which you can choose. Choose the plan you want and Select the duration you want Now enter your details and then click Submit. So now if you go to your site and click Refresh You can see that you no longer have the Ad. 2. Get your own domain name Now if you see your site address it has some extra text. So to remove this extra text you need a domain name. As youve upgraded your plan you will get the domain name free for 1 Year. Once youve got your domain name, you can visit your site using the domain name. Now you can see the site youve built. So thats it, Guys! This is how you can create your own website using Wix. —————————— The Tools we use: Get the best tools for your website https://websitelearners.com/tools/ Video Gear We Use https://kit.co/websitelearners/video-gear-we-use/ Our Video Editing Tool https://bit.ly/2Od546p Officially: We’re Hiring: https://websitelearners.com/careers/ Want your website developed by us? Email us your requirements to contact@websitelearners.com Follow & Chat with us: ———————————- Instagram: https://www.instagram.com/websitelearners/ Facebook: https://www.facebook.com/websitelearners/ Twitter: https://twitter.com/websitelearners/

Categories
Website Design

Goeey Hamburger Transforming menu in website design -Website Design Tutorial [Video]

Get 9+ Complete Responsive Web Design course 97% OFF – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=U_ROCK ——————- Full Course -https://youtu.be/pNcAuqInG6s ———————- Like our page – https://www.facebook.com/indiandesignr Join our group – https://www.facebook.com/groups/328971707545530

Categories
Website Design

Typography 101 – Web Design For Beginners [Video]

Check out my courses to become a PRO! https://developedbyed.com/ Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #webdesign #design #ui

Categories
Website Design

How To Add Facebook Messenger Chat in WordPress Website [Video]

Get our NEW Course https://link.websitelearners.com/Word… Learn WordPress and create any Website in less than 7 days with our "Make A Pro Website" WordPress course. Learn how you can add Facebook Messenger chat to your WordPress website. Lets say youve a website and you want to give your visitors a way to contact you. You can do that by adding facebook messenger chat to your website, Which allows the visitor to chat with you in real time. So lets get started. Table of contents: 0:00 Intro 1:15 Create messenger chat for your website 4:09 Adding facebook chat on your website using elementor 7:20 Using messenger chat from mobile 8:36 How do visitors contact you as a Guest 10:00 Adding messenger chat using WordPress customize option. You can add facebook messenger in just 2 simple steps. Step 1 : Create messenger chat for your website To create the chat, Go to facebook.com and login to your account. Now go to Pages. If you already have a page for your website just click on it. If you dont have a page, create one before you go to the next step. Now once youre in your page where you can manage it, Just click settings Messaging Now you will have an option called Add messenger to your website Click Get Started right next to it. Now you will have a preview of how the chat looks on your website once you add it. You can also make the changes of the greetings and color of the theme. Next you need to enter the domain name of your website. Now once youre done with the changes, just click save and your chat will be created. Step 2 : Adding facebook chat on your website In order to add the chat on your website, You need to add the code snippet which is shown in facebook page, to your site. Now just go to your website and go to the page you want to add the chat. Now you can add the code from facebook in two ways. If you are having a theme which has an elementor to edit, you can go on edit with elementor. And click on Footer as youre adding the chat in the footer area. Now from the general section drag & drop the HTML element to the widget area. Now just copy the code from facebook and paste it the html field. To save the changes, click Update. And your messenger chat will be added to your website. If you dont have elementor, Go to WordPress Dashboard Appearance Widgets Now as youre are adding the chat in footer area, Just drag & drop the Custom HTML widget to Footer. Now give a title and paste the code which youve copied from facebook. Now click Save & Done. And your messenger chat will be added to your website. Now if the visitor wants to contact you, all they have to click the messenger icon, And they can either login to facebook and chat with their account, Or they can use the Continue as Guest option to chat as a guest. And you can reply to them back in real time. Now when a visitor visits your website in mobile and click on the messenger icon, They will be redirected to the messenger app on the visitors mobile. Thats it guys. This is how you can add Facebook Messenger chat to your WordPress website. —————————— The Tools we use: Get the best tools for your website https://websitelearners.com/tools/ Video Gear We Use https://kit.co/websitelearners/video-gear-we-use/ Our Video Editing Tool https://bit.ly/2Od546p Officially: We’re Hiring: https://websitelearners.com/careers/ Want your website developed by us? Email us your requirements to contact@websitelearners.com Follow & Chat with us: ———————————- Instagram: https://www.instagram.com/websitelearners/ Facebook: https://www.facebook.com/websitelearners/ Twitter: https://twitter.com/websitelearners/ If you have any doubts related to WordPress, Please mail us at contact@websitelearners.com

Categories
Website Design

Color Theory 101 – Web Design For Beginners [Video]

Check out my courses to become a PRO! https://developedbyed.com/ If you struggle picking colors for your design or illustration then fear no more because we are going to cover color theory for web design. We are going to cover the meaning of hue, saturation, brightness. How to pick a color based on it’s meaning and complementary colors. Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #ui #design

Categories
Website Design

How To Add Product Categories to Your Ecommerce Website [Video]

How to create an E-Commerce website https://youtu.be/8wA6uPEu9hM Get our NEW Course https://link.websitelearners.com/Word… Learn WordPress and create any Website in less than 7 days with our "Make A Pro Website" WordPress course. Learn how you can create product categories on your ecommerce website. Lets say youve an ecommerce website and youve different kinds of products in it. Now how do arrange each of them into categories? You can do that easily by following our 3 simple steps. So lets get started. Table of contents : 0:00 Intro 1:09 Create Your Categories 2:35 Add Products to Your Categories 5:35 Adding Categories to Menu 8:02 Add a Sidebar to Your Site 9:09 Display Categories on Sidebar 10:20 Changing Name for Default Category 11:44 Creating Sub-Category 13:25 Adding Products to Sub-Category 14:54 Adding Sub-Category to a Drop-Down Menu Step 1 : Create Your Categories To create categories, Go to WordPress dashboard Products Categories Now enter the name of your category & click Add new category. As soon as you click it, your category will be added. In the same way you can create as many categories as you want. Step 2 : Add Products to Your Categories To add products to your categories, Go to WordPress dashboard All Products Now here you will have all the products on your website. Now select the products you want to add to your category which youve created. Once youve selected the products, choose Edit in the bulk actions. Now select the category in which you want to add all the products youve selected And click Update. So now the product which youve selected will be added to the category. In the same way you can add all the products in your website to their respective categories. Step 3 : Adding Categories to Menu In the home page of your website, you dont have the categories youve created in the menu. To add the categories to the menu so that your customers can navigate easily, Go to WordPress dashboard Appearance Customize Now click on Menu Main Menu Add Items Product Categories Now select the categories you want to add to your menu and click Publish. So this is how you can add product categories to your menu ==== Bonus Part ==== Now lets say you want to display your categories on the sidebar of your website. So to display the sidebar, first you need to add a sidebar layout to your store page. Go to WordPress dashboard Appearance Customize Sidebar Now if youre using themes like Astra you will have the sidebar option under WooCommerce If youre using a different theme, then the sidebar option is under Default Layout. Now just choose the type of sidebar you want and the sidebar layout will be added on the page. Now to display the categories in the sidebar, Go to Customize Widgets WooCommerce Sidebar Add Widget Now in the search bar, search for Product Categories & Click on it. Once you click it, your categories will be added on the sidebar. Now if you want to change the default category name, Go to WordPress dashboard Products Categories Now just click on Quick Edit under the default category and then change the name you want. Now click Update and your category name will be changed. Now lets say you want to create a sub-category. Go to WordPress dashboard Products Categories Enter the name of your category Now under the Parent category choose to which category you want to add this subcategory. Once youve selected click Add new category. And now your subcategory will be added. Like we did before, you need to add the products you want to display in subcategory. So just follow the process in step 2 and add your products. You can also add this subcategory as a drop down in the menu by going to Customize option. Thats it guys. This is how you can create product categories on your ecommerce website. —————————— The Tools we use: Get the best tools for your website https://websitelearners.com/tools/ Video Gear We Use https://kit.co/websitelearners/video-gear-we-use/ Our Video Editing Tool https://bit.ly/2Od546p Officially: We’re Hiring: https://websitelearners.com/careers/ Want your website developed by us? Email us your requirements to contact@websitelearners.com Follow & Chat with us: ———————————- Instagram: https://www.instagram.com/websitelearners/ Facebook: https://www.facebook.com/websitelearners/ Twitter: https://twitter.com/websitelearners/ If you have any doubts related to WordPress, Please mail us at contact@websitelearners.com

Categories
Website Design

Latest CSS animation and Transitions Effect [Video]

Get 9+ Complete Responsive Web Design course 97% OFF – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=U_ROCK ——————- Full Course -https://youtu.be/pNcAuqInG6s ———————- Like our page – https://www.facebook.com/indiandesignr Join our group – https://www.facebook.com/groups/328971707545530

Categories
Website Design

Create Awesome Web Designs | Layout Design Tutorial [Video]

Check out my courses to become a PRO! https://developedbyed.com/ Today we will learn how to create any type of web design we want to using the basic principles of composition and layout. If you struggle creating designs for your website this will help you out. Also check out my typography and color theory tutorials before. Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed Follow me on: Twitch: https://www.twitch.tv/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ Stan Forebee, The Field Tapes, azula, Francis – Harbor https://chll.to/8438c1ad Swrn – Going Back https://chll.to/fdc0e8ca The Field Tapes, xander. – Flowers https://chll.to/12091dc9 #ui #ux #design