Transcripts
1. Quick Overview: Learning to create a website is definitely important. But what's more important is to learn it the right way. Simply knowing about WordPress and Elementor is not going to be enough. You need to know that three steps website creation framework. Hey, but what is this three steps website creation framework? I, my name is traveler neuron, and in this course, I will help you learn everything that is required to create an awesome website without any coding, using WordPress and elemental. The websites that you will create will not just be awesome InDesign, but david be super responsive so that they work properly on all the different types of devices. The best part of this course is that you will learn about the three steps website creation framework. Well, this is a system that is followed by the top web developers in the world. Before I give you a quick overview of the course, let me tell you that this is all going to be a practical course for you. You will be using free domain name and hosting account to create websites all by yourself. And I'm CIO that you will be creating some awesome websites. We will start the course with learning the basic concepts like more discipline website section of a web page. And then we will learn some important concepts like UI and UX. The colored theory typo there if we ANC the base layout settings. After this, you've been learned some headphone concepts that are related to copywriting and graphic designing. Yes, these are some additional things, but it is a very important part of this course. After this, we've been starved the three steps website creation process with step number 1, that is to discover and understand the market. The second step would be to design the website using a website designing tools like Figma and Adobe XD on in fact, any other graphic designing dual about final step would be to develop the website using WordPress. And I think my dog, without any coding. I will walk you through the free version of Elementor as well as the Pro version of elemental. You will be learning not just developing the webpages, but also how to set up a blog, how to create landing pages and indicating the website with Google Tag Manager, Search Console and analytics Jaguars and other things. Near the end of the course, I will share some of the most important set of practices like to reduce the load time of the website. And I will also share how you can start your own digital marketing agency, make websites for clients, and how much you can charge the clients. So if you are someone who wants to Monster the AGA feeding websites without any coding, using WordPress and end to make DOD. Along with some concepts like qubit, I didn't add graphic designing, then this is the goals for you. If I make sense to you, I want you to start right now.
2. Goal Setting & Preparation For The Course: The primary goal in this course is to learn how to create a pixel perfect website that is beautiful and design functional and use it optimized for devices like mobile and tablet with a fast loading speed. We will achieve this by following the three-step website creation process. Keep in mind that your aim is to create pixel-perfect websites quickly and easily without any coding. The purpose of this course may vary as per your expectations, but I assure you that if you follow these steps, your life can be transformed. A student can easily get a job or start freelancing after completing this course. A freelancer can provide website development service to clients. A working professional can start passive income, and an entrepreneur can create a website for his own business without paying huge money to any digital agency. Opportunities are many, and I'm sure you will grab it. I'm always here to help you in this regard and feel free to connect with me for assistance. Talking about the preparation for the course, I want you to set milestones. The first milestone could be the discovered mastery, where you will be able to understand the target audience and analyze the competitor websites effectively. Next milestone could be their design part that may take up some efforts, but I'm here to help you and guide you. Next milestone would be the development step, which is relatively easy once you are comfortable with the discovery design process. Wait. But what is the final milestone? The final milestone would be the application of whatever you have learned in this course. Yes. You will have to apply the concepts and complete a practice website. That will be a demo site. I will personally review that website and give you feedback about your work. So this is going to be a practical course and I will help you in setting up a practice website for free. You will be using a free domain and a free hosting account to set up your practice website and feel free to experiment on that website because it is going to be the learning ground for you. There were so many freeze in the past few sentences I spoke. So you are getting so many things for free. Feel good. The more you experiment on your practice website, the better will be your learning. Also, we will be using some tools for designing that. I will let you know step-by-step in the upcoming lessons. So I believe we are all set to start learning. And I will see you in the next video where we will start the foundations and learn some basic concepts and theories. Did you say something? Don't elect theories because they're boring. Or I know it might be a bit hard on you, but these theories and concepts are the foundations of your success, right? To enjoy them and deeply understand the concepts for better learning of this course. See you in the next video.
3. Some Important Productivity Tools: In this lesson, I want to tell you about some tools that can be used to make notes, strategies, and planning your learning showed you. This will help you a lot in organizing the concepts that you're going to learn in this course. For example, let us see the concepts that we discussed in the previous lesson in the form of a flowchart, a mindmap, in a list form, or in some text editor app like Grammarly. Let me give you a very quick overview of these tools. The first tool I want to tell you is draw dot io. This is used to create flowcharts and I use it to organize my marketing plan and strategies. It is free to use and it has an offline version as well that you can download and install on your computer. This is the blank canvas and you can insert shapes. Insert text into those shapes by double-clicking at the center, arranged them, and make connections. Feel free to add as many shapes as you want and arrange the chart in an organized manner. You can play with this style and text settings to make it look beautiful. And you can also adjust the alignment of the shapes. Feel free to explore more shapes and add pages to your document. Once you are done, you need not save it because the document is already getting auto saved. The next tool is mine, Mr. It is a freemium dual, which means it has a free version as well as a paid version. Here you can create mindmaps structures for brainstorming, notes, taking, project planning, and lots of other creative tasks. I use it to create syllabus and curriculum of my courses. The next tool is still low. It is used to create boards, lists, and cards to help you organize projects in a creative way. And it is a great tool to collaborate when you have a team of people. The last tool I want to tell you in this lesson is grammarly. It is a writing tool with the Writing Assistant that helps you write clear and free from grammatical mistakes. I am telling you about gravity because it is the traditional form of making notes by writing down whatever you have learned. Obviously, you can use any other text editing tool like MS Word. But if you want a writing assistant to help you with grammatical mistakes, then use Grammarly. Since you will be learning a lot many new topics and concepts, I want you to organize your learning so that it remains easy for you to devise by just scanning a flowchart or a document. I hope these tools will be useful for you and we will continue with the fundamentals of website in the next video.
4. What Is A Website: There are 4.7 billion people in the world who are using the Internet today. They are spending time on getting information, buying products, services, watching videos, engaging in conversation with people on social media, instant messaging, and large, small. So it is an opportunity for you to create a website and reach millions of people via Internet. Website, in the most general sense, is a form of web presence. You can share the content in the form of text, graphics, and videos on your website and connect with people around the world. Consider Internet as a market and a website is your shop. Customers can come in to get information and it is open 24 by 7. The best part is that a website gives you worldwide axis and you have no limitations to execute your ideas. Let us now understand that technically concept of a website. According to Wikipedia, a website is a collection of web pages that is identified by a common domain name and published on a web server. A web page is a unique page that contains information and content in the form of text, graphics, and videos. So if a company like in this time, Unilever wants to provide information about its products on the website. Is it possible to have all the information on a single page? No. That's phi a website contains n number of web pages that are categorized into menu item sub menu to provide meaningful information to the user in an organized manner. Next is domain name. If a user wants to reach your website, he has to enter some Weber dress in the browser. It is similar to someone who wants to reach your house. You should know you at how surges. So a domain name is a unique name that forms your Weber does. It is always unique and leads to specific websites. Just like if someone dies in mobile number, he's connected to you and not anyone else. Just make sure that your domain name should be relevant to your offering. And at the same time, it must be easy to remember and attention grabbing. The third and last element is a web server. A web server is a computer where the data, information, and content of a website are stored. It responds to user requests 24 by 7 on the World Wide Web. Whenever the server goes down, a user will not be able to access the website. Let us also understand the concept of hyperlink. Since there are a number of wages and a website, it is important to link all these pieces together and form a navigation menu. Or user can switch between multiple pages with the click of links. Usually, the first page of a website is called the homepage. And it is the most important web page in your website apart from the homepage. The other, basically just in a website are the about page, services, page, products, page, contact page, privacy policy page, et cetera. Each webpage has some specific information, and these web pages can be easily accessed by user from a laptop, desktop, tablet, or smartphone using a web browser. When a website is optimized for all these different devices, it is called as a responsive website. Let us now discuss the different types of websites. A website that we create can have different goals and purpose based on your idea. For example, the main purpose of a business website is to provide information about the business company or any individual who is doing a financial activity. By now, every business out there should definitely have a website. It is a widespread expectation. Every potential customers in the market will assume that if they make a Google search for any x business looking for more information, they will find your website. Next. E-commerce website is where users can shop and make purchases. It must have the essential features like in window display product browsing, filtering by categories, highlighting special sales, shopping card, wishlist, and payment gateway to make online transactions. The main purpose of an eagle must website is to make sales. Blogging website. They provide information by publishing content that is displayed in reverse chronological order, which means that the latest posts will appear first at the top. Similarly, you're going to also create a personal website, a portfolio website, entertainment website, news website, business directory website, forum website, social media of ABS, a digital download website, e-learning website and lots more based on your purpose and IDM. Since we are discussing the purpose of a website, I want to ask you one thing here. Please tell me what is a landing page? Come on. Go ahead and try to answer. Keep thinking. Keep thinking. I'm still waiting for the answer. Okay? So you are not connected to me live, so you will not answer. Is it? No, please don't take up this course like this. Please feel like you're connected to me live and try to answer. I'm telling you it will help you a lot and learning when a landing page is a dedicated web page with a very specific purpose. Unlike typical web pages, which I have many navigation options and encourage further exploration, landing pages are designed with a specific call to action. On a landing page, we want our users to take the desired action that we can consider as a conversion for us. For example, the Shopify landing page wants you to start free trial, and it is the only action of label on this webpage. Seems that by US, they want you to start a free trial and nothing else. You can even build a lead magnet in this way and provide some freebie in exchange of their email information. In this way, you can guide your website visitors to take specific action and fulfill a specific purpose as a part of your marketing or sales funnel. Personally, creating a landing page is my favorite task. What's your reading for your answer before the next video?
5. Structure Of A Webpage: If we talk about the basic structure of a webpage, we can easily divide a web page into three main sections. Numbered one is the header, number 2 is the main content area, and number three is the folder. Now, herder is the topmost section of a webpage and it is usually consistent for all the web pages in the website. It means that you have to design a head at once and the same adder will be visible on all the pages of the website. In the header section, you will find the logo and it is usually placed at the left are centered position. Make sure you link the homepage, do the logo. It means if a user clicks on the logo, he is redirected to the homepage of the website. Next, you will find a navigation menu in the header section. It is usually the primary menu of the website and helps the user in switching between the multiple web pages. The menu options can also have sub-menu to categorize the pages and provide a more logical navigation. Already trending navigation menu design is the mega menu. If you have a large website with multiple categories and subcategories than mega menu gun show the entire navigation into a single menu. It also enhances the visual display of the menu, thereby making it more attractive. You can also find a button at the corner of the navigation menu, and it acts like a call to action for the visited. By the way, let me ask you a question. What does it call to action? Come on, give it a try. Okay. So a call to action, or CTA is the desired action that we want our visitors to take on the website. It is usually highlighted to stand out from the other content and it guides the visitor with what to do next on the website. You can also find social media links in the header section to encourage visitors connect with the brown on the social media. Now to add more space to the header section and above hydrodissection and a below header section is pleased. They are also quite useful if there is more information to show At the top of the page. Lake, you can show the special deals with an urgency element, an important notices in the above header section. You can also plays the contact info and social media links in the section. The other one that is below a dissection that can be used to show the secondary menu or any additional information. It is your choice to display these sections on the entire website or some specific betas. Now let me tell you about some friending header designs. The first one is sticky header. It sticks the primary header at the top of the screen. Whenever a visitor schools down the webpage, it tells him providing a quick access to the navigation menu without having to scroll again to the top. Next Header design is set transparent headed. It looks very cool and give some modern field to the website design. I personally like this a lot. So this was about the first section of the webpage. Now let us discuss the next one. That is the main content area. It is also called as the body of the webpage. It is the most flexible section of the website and you have full freedom to design it aspart the purpose of the website. On a web page, you always want to show specific information related to the title of the page, like and about the space will have information about the profile and the Contact Us page will have contact details. But you can design it freely by using text, images, graphics, and videos to convey the information in the most effective manner. This main content area is designed by placing sections and columns. All the content like text, images, videos, and other elements are placed inside the sections and columns. Sections control the vertical area that is from top to bottom, and columns control the horizontal area that is from left to right. The first section of a webpage is called as the hero section, and it contains the hero image. It is the first content that a visitor sees on the website. We all very well understand that the first impression is the biggest impression. So all the websites must ensure that the hero section design should have a triggering impact and it should generate a sense of trust and credibility in the mind of the visitor. The hero section must degenerate and excitement to motivate the visitor to explore more content on the website and eventually take an action. After the hero section, you can insert various other sections aspart the content demands of the webpage. Like we usually find a short summary of the about page products, services, features, pricing, Media Gallery, and testimonials on the homepage. If you ask me about the length of a webpage, I would say that a web page can be as long as you want, but always tried to provide information in the shortest possible length because the visitors are always busy and VKC cannot afford to waste their time at all. Be as creative as possible so that it remains the easiest for the visitor to understand what you want to say. But in the least time, the last section on the web page is called as foolproof. The purpose of a website footer is to help visitors by adding information and navigation options at the bottom of the webpage. As visitors have a general tendency to quickly scroll the webpage and reached the bottom median. It is the ideal place to put the current year and the copyright symbol. However, you can also place the social Huygens secondary navigation menus, links to the privacy policy and other legal pages, disclaimer, contact details, email sign-up forms, and even a final call-to-action. So let me summarize of learning in this video. While creating a website, you have to focus on the three main sections in a webpage, the header, main content area, and the food. I recommend you to start with designing the header and footer first because they remain the same for all the pages of the website. And then start designing the main content area as it will be different for every webpage. We will learn more about the designing concepts in the upcoming videos.
6. UI (User Interface) & UX (User Experience): The header and footer are going to be consistent for the website, but the main content area is to be designed for every page. And designing is very important for the website. You need to have a clear objective for the website and design each webpage accordingly. It is very important. Otherwise, you will be lost in the designing ocean and it will become quite a frustrating task for you. So always plays an anchor before starting the design task. Always have a clear conversion goal for the website and design the web pages accordingly. It means deciding on the important actions that a visitor should take on the website. This can include making an inquiry on chat, sending an email, signing up for a newsletter, downloading an eBook, starting a free trial, exploring more content on the website or any other important action, aspart the marketing or sales funnel. Another reason to show clear and specific information on the webpage is the Internet competition. There are so many websites fighting for user attention. And the average time span of a website visitor is very short. Somewhere around seven to eight seconds. It means if a visitor visits your website and he does not find it to be engaging or compelling enough to explore more content. Simply close the tab and move away. So it is very important for you to design the website that is visually appealing, engaging, and usable to encourage visitors to spend time and take actions. If they take actions on the website, it will be considered as a conversion. Let us try to understand the process of designing a web page. It always starts by understanding the ideal visited. Come on, think about the visitor was going to visit the website. His expectations, his values, tried to simulate his interaction with the website. More Actions they will prefer to take. What type of content you will be interested in. Text, graphics, videos, how much time he will prefer spending on the website? How can you guide him to complete a desired action in the most easiest manner? How can you motivate him to take an action? Tried to set the benchmark for the overall quality of interaction between that visitor and a website. All this research will give you important feedback and data to help you plan the design of the webpage. Moving further, the designing process can be divided into two segments. One is user interface and the other is user experience. You start the designing process by selecting the colors, phones, images, graphics, and layout to make the website look beautiful and consistent. This is called as designing the user interface or UI. It represents the visual or graphical site of the website design. Next, you have to optimize the user interface design to enhance the experience of the visitor when they interact with the website. It is more or less a sense of fee. The visitor must feel comfortable while navigating the website, reading the content, watching the colors, videos, images, he must develop a sense of credibility. You have to embed them the motivation he needs to take actions on the website. He must believe that he's getting value from the website. This is called as designing the user experience or UX. If I explain user experience to you in just two words, it would be an easy and pleasant experience for the visitor on interaction with the website. User interface is actually a part of user experience. So to ensure you're getting the best results from the website design, it is important to focus on both UI and UX. Focusing on UI will help to make the website look beautiful, land consistent. Whereas focusing on UX will make the experience easy and enjoyable for the visitor. The three most important concepts to master in designing the user interface of a website is to select the colors, typography, and layout. And we will be learning these concepts in the upcoming lessons. By the name, you can start thinking about the ideal visitor of the website and tried to come up with market research. See you in the next video.
7. The Color Theory: Welcome to the void of colors. Colors are the first thing people notice when they visit the website and the color scheme can make a huge impact on both style and consistency. So what is a color scheme? A color scheme is the collection of colors that we need to choose for the website design. It is also called as a color palette. It can include as many colors as we want to use in the website. Each color can be used for a variety of elements throughout the website. You can divide your color palette into the primary colors, secondary color and accent color based on the application and usage. The primary color is generally the more dominant color in the website, and a secondary color is used to give a contrast effect. These colors are used in the section and column backgrounds, logo, navigation, and menu. The accent color is used to highlight the standard element, like a call-to-action button. If we choose the right colors in right combinations, we can engage visitors to spend time on the website and take actions. Colors also help in creating an emotional connection. But the challenge is that there are over 16 million colors to choose from. And randomly picking a color may not work well in a website design. So in order to choose the ideal colors for the website and make the right color combinations, let us use some signs and apply the color theory. Color theory is the science and art of using colors. It explains how we humans perceive different colors and the message that every color communicates. Let us start by understanding the color wheel. It is a powerful tool that can help you visualize relationships between colors. According to the color theory, there are three primary colors, red, yellow, and blue. These three colors form the basis of all the other colors. When we mix the primary colors, we get three secondary colors that are orange, green, and purple. And when we combine the three primary and three secondary colors, we get six tertiary colors. Now, whenever we start working on a website project, we need to experiment with multiple alerts and select the most appropriate color combinations. We can also use the concept of color schemes to come up with the right selection of colors. Let us now see the four main types of colors schemes. The first one, monochrome color scheme. It consists of various tints, shades, and saturation of the same color. Next is complementary color scheme. It is based on two colors from the opposite sides of the color wheel. Next is analogues color scheme. It consists of three colors that are next to each other on the color wheel. And the last one is triadic color scheme. It consists of three colors that are at the points of a triangle drawn within the color wheel. Usually, you can give preference to the complimentary and analagous colors schemes as they are effective and easy to apply that the good visible contrasts. But feel free to use any of these color schemes in your design. Moving further, we can also divide the colors on the color wheel into two categories. That is, warm and cool. Hues that contain higher amounts of yellow and red are considered warm colors. They evoke a sense of passion, happiness, energy, brightness, and action. On the other hand, Google Alerts contain higher amounts of blue and purple. They are considered more soothing and relaxing than warm colors and represent calm, peace and serenity. There are also neutral colors, like white, black, and gray, to balance out the color scheme and add contrast to design. Next, we need to understand the color systems because there are millions of colors and tanks to signs, we can assign a specific color code to represent every color. The three standard color systems that are used in designing tools and softwares are RGB, CMYK, and hex. The RGB color system is perfect for designs that are seen on screens. And the color-code is formed by entering a value for red, green, and blue between 0 to 255. The CMYK color system is ideal for printing design and it is also called as the forgone or system comprising of values for cyan, magenta, yellow, and black between 0 to 100. The last one, that is the hex color system is what willing to focus on. It is a six digit code which is formed by converting the RGB values. We will be using this system to select alerts for the website. Suppose if you know the RGB values of a color and you want to convert it into hex. Then simply make a Google search like convert RGB to hex and you will get lots of free tools to do it. Moving further, I would not like to take you in the depth of tints, shades, hue, saturation, and brightness in this course. But let me explain you the concept of contrast. Contrast is a crucial element of any website, especially when it comes to background color, and text. To provide a good reading experience on the website, it is the best to use a white background and dark text color. You can also experiment with a dark background and light colored text for some sections. This is how actually the light and dark themes work. Now, let us try to make the color selections and apply an effective color scheme. For your knowledge, some colors fight with each other and some colors become close friends. Colors that work well together, create a harmony, contribute to a pleasant user experience. So far our website project, you need to select the primary and secondary colors for the section and column background, logo, graphics overlays. The zinc alert for call-to-action and x scholars for headings and paragraphs. In order to shortlist colors for selection. We can also use the concept of color psychology. It tells about the influence of colors on people's behaviors and moods. To create a successful design, you need to be aware of the color meanings and understand how a color choices can influence your users by generating a specific emotional response. Yes, colored skin evoke emotions. Let us see some examples. Red is a strong, energetic gullet. It can be a bold statement color if you want to draw user's immediate attention. In fact, many food and beverage companies use red to evoke feelings of hunger. Undesired. Orange is a bomb and happy colored that remains many users of friendliness and doozy ASM and motivation. Using oranges that primary color can result in a highly memorable site that leaves visitors with a positive impression. Yellow is another one colored that symbolizes joy, happiness, and sunlight. When used strategically on your website, you can easily inject confidence and inspiration in your design, but do much yellow can die RDAs and even create NSAID. So it is preferred to keep it as an accent color. Green is a positive and gum colored, widely associated with Nature, Ecology and renewing energy. Blue is onboarded present intelligence, trust, Calmness, efficiency, and duty. It is a smart color and one of the most used colors on the web. But some of the world's biggest digital brands using it as the primary color. But bowl has long been associated with royalty, luxury and wilt, but it is also a mysterious and magical golden combining the energy of red and blue, it can be an excellent option if you want to convey a message of power and trustworthiness. Think is great for feminine products or sites with content specifically geared towards women and young girls. Black creates a sense of glass, glamour, power, dignity, and it looks velvet, almost all the other colors. It is excellent for website backgrounds as it sets up a sharp contrast with lighter, a biography. White is a popular choice for modern minimalist websites as it increases readability and bears velvet an eagle, and the use of whitespace creates a feeling of ugliness and late. So as seen in our examples, colors can have many meanings that resonate differently with each user. Therefore, it is crucial to have your target audience in mind when choosing the color palettes for website design. Let me also give you some pro tips here. Start with selecting a primary colors using the color psychologic concept, or your product or service are the industry you are working in. You need to think about the target audience and good emotional reaction on watching the color of the website. You can also research for some popular color combinations and shortlist. The choices make a leap Daddy of shortlisted colors in tools like Canva, Sigma, Illustrator, XD, or any graphic editing tool you prefer. Next, gum off with a secondary color and accent color by applying the concepts of color schemes like monochrome, analogous complimentary are triadic. You can make use of tools like Adobe color wheel, drank alerts, color homed, colored space, angularjs, and find some of the most trending color palettes and color combinations for inspiration. If you are not getting it right by yourself, you can make a Google search for the most popular and trending color combinations. You will get lot many ideas to take inspiration and select colors. You must also explored the design communities like Dribble, Behance and get some fresh ideas. Okay? So if you like some colored on any website and you want to use the same color, how do find the colorCode? You can use some Google Chrome plugin, like I'm using color pick eyedropper and I can easily find the color-code and use it in my project. It may take some time for you to come up with the right color combinations, but it is very crucial as the entire branding of the website depends on colors. Once you're done with the selection, update the palettes in your graphic editing tool, and start the designing process. Let me summarize the learning of this lesson. Galleries play a vital role in the website design and they can evoke emotions. You can rely on the color theory to come up with harmonious ballads and find the right color combinations. Hello, psychology is a powerful technique that can convey a variety of messages to users. Lastly, you should always research your target audience and test their gullet differences. Understanding the target audience is a very important step in the website design process. And that's why I'm repeating it again and again. Please make sure you understand the visitor. The more you understand them, the better you will create the website. Let us end this lesson here and we will continue in the next video.
8. Basics Of Typography: Do you know that phones are very important for the visual design of the website? Forms can create an impression for the visitors even before they start reading the content. So let us learn some concepts that are related to the art and technique of styling for marketing and arranging the phones, garlands, topography. Good paleography on our website makes the act of reading effortless for the visitors. Vile, poor topography, dance up the stairs of a. So it is important to use the right phones on a website that looks well on all the three types of devices that is computed, tablet and mobile phone. The first and the most important step is to select the right forms that are easy to read. But again, it is a challenge here because there are thousands of foreign families and typeface to choose from. To make the selection process easy, let us divide the phones into two categories. These are set of phones and sans serif forms. Thus set of phones have serifs or extra degradation at the end of stalks, also called Les feet or tails. Serifs work great in headlines and headings because they give a special accent to make it look standout. Some of the most known set of form families include phones like Times New Roman, Georgia, platinum, get him on and Cliff it displayed. Many brands and professional businesses often use setters for the logo and website when they want to appear more reputable, established, formal. But keep in mind that the set of phones are easy to read only when used for smaller quantities of x, like headings are global and not in the website paragraphs. On the other hand, the sans serif forms are without set. It means that there is no extra degradation at the end of each letter. They are used to convey minimalist design, modernity, and most of all, sheared simplicity. Since the reforms and the best choice to use in main-content body and paragraphs, as they are very easy to read on screens and even on smaller screens of mobile phones. Some of the most widely used sensitive forms include evidence, Roboto, Open Sans Source Sans Pro lacto, marked Sadat, and Proxima Nova. You can avoid using the handwriting forms, display phones and monospace forms, as they are not easy to read on screens, especially on smaller screens of mobile phones. To find the best phones that are available to use on websites. I will recommend you to spend some time on Google fonts. This is a wonderful tool and you will find a list of the most commonly used forms and common pairing combinations along with the preview. You can also check the phones that are used on other websites in the industry. Yes. You can check the phone family by selecting the text, right-click and selecting the Inspect option. Here you will have to select the element tab and click on computed, scroll down a bit to get the phone deleted information. You will find all the details about the phone that is being used on the website, like font-family, font-size, line-height, letter spacing, phone colored, and more. Alternatively, you can use a Chrome plugin to get the same details in an easy manner. Currently, I'm using Firm Finder to identify phones on any website. Awesome. Now, for our website project, you will have to select between one to three phones. You will be using phones for headings, subheadings, paragraph, and buttons. If you're using different forms for heading and paragraph, make sure that two phones pair well with each other. To make the selection process easy, you can also divide the phones into primary and secondary foods, and it is recommended to decide on the primary form first and then explode options for the second default. You can find that common pairing information on Google phones, or you can make a Google search to find out the trending font combinations. But make sure you do not use more than three phones and a website as a disturbs the user interface. Visual heirarchy. An important factor to select the right form for the website is to think about the visitors. What type of perception you want people to think when they see the website? Is it a bold statement or a professional and think it from the visitor point of view. I'm happy to repeat it again and again. But the more you understand your customers better website you will create. After selecting the phones, you have to ensure that you select the correct form, size, weight, line-height, and letter spacing as per the design requirement of the website. The first adding in typography is to apply. It means limiting the length of a line. You can have it on 45 to 85 characters, but line preferably 60 on a computer. If you want to provide a good reading experience. For mobile devices, you should go for 30 to 40 characters per line. I even recommend using the word counter plus plug-in for Google Chrome to count the characters by just selecting the text. Next is to choose the alignment from the left, center, right, and justified options. This will depend on the overall UA you're planning for the website. Next factor is to adjust the letter spacing, also called Les kerning. It is the space between two letters and it enhances readability, but I will advise to use it carefully. Next, adjust the line height. It is also called as leading. It is the amount of space between the two lines. Next is to select the phone size. And again, it depends on the overall UI that you are planning for the website. Just don't make it too small, otherwise have visited, we'll have to zoom in to read the content. In fact, make sure it is easy to read on all screen sizes. You can play with the font-weight to make it appear heavier or lighter. You can select the form color as bird design color scheme. Make sure you have a good contrast issue. It means having a light text on a dark background or a dark phone on a light background. After deciding on all these typographic factors, make sure you use the same styling in the entire website to deliver a sense of consistency and branding. Always try the best to maintain the visual hierarchy on the web page. Get into the mind of the website visitor and try to understand which words do you want them to notice first? And what is the most visually pleasing format to communicate those words? Remember, ease of readability is the primary goal we want to achieve by applying the concepts of a biography. All right, So you have learned about colors and topography, and in the next video, we will learn about the different layouts. See you there.
9. Page Layout: Let me tell you a fact. People don't visit websites for the design. They visit websites for the content. But it is important to present the content in a useful manner to engage the visitor and compel him to take actions. So website designing is all about making the content look easy and attractive to the visited. We know that the header and the footer is going to be the same for all it is. And we have to design the main content area for every web page. And to please the content, we use sections and columns in other page. The arrangement of content in these sections and columns can be done in numerous ways. So let us discuss some effective website layouts in this lesson. The first one, a single column layout. It presents the main content in a single vertical column surrounded by plentiful whitespace. The schooling experiences smooth in this layout and you can use crisp and clear images in a large size. This layout is very comfortable for the visitors and it works well on all their devices. It is recommended to use this layout and personal blog, minimalist designs and mobile friendly designs. Next is two column layout. It is formed by dividing the section into two vertical columns. The width of the columns can be split in desire to issue. It is recommended for pages that have two main pieces of content that share an equal level of importance. What else you can place takes on one side with an image on the other side to explain the content better. Next is a creative one. It is the asymmetrical layout. It means to distribute content of different sizes unevenly throughout the page. It is recommended to use on websites that have a wide variety of visual elements and content types, you might need to have several small items on one side to balance a large object on the other side. But be very careful in using this layout as you will have to strike that right balance between the larger sections and the smaller ones. But once done, it looks very good. Also, you need to use elements with high color contrast to add visual weight to specific parts of the design. Next is a fixed sidebar layout. In this layout, the sticky side bar containing the Navigation Menu stays in the same position on every web page, remains visible every time they use it, browse our schools down the page. Next is full-screen media layout. It essentially means using a background video as the hero image. It provides a very rich user experience and the impact is very high. It increases the visitors curiosity to scroll down and find out more about the business. Next is grid layout. A grid of cards layout is good for content heavy sides that display lot of items with equal heirarchy. It is recommended for an organized looking archive page, Media Gallery, or a blog with a clean layout. Next is box layout. This type of layout is often used on the homepage. Here, the hero section is a large, full-width box, having image or video as the background and followed by smaller boxes directly below it. Ideally, the number of these small boxes should range between two to five. It is an evergreen website layout and the elements guide the visitor to more details and explanations by clicking on the boxes. These were the common type of Leodes and now let me quickly tell you some best practices to attain some specific objectives while organizing the content in any of these Leodes. Many a times, you will need to make a section stand out from the rest of the content. Lake. You need to highlight the call-to-action button on the landing page. So you must use the whitespace. In fact, plenty of white space to make it stand out and highlight. Because by removing distractions, you can force the visitor to focus only on what is immediately visible. This is one very important thing. Do muster using the whitespace efficiently. Next is to play with size. Generally, people read bigger things first, proper hierarchy clarifies for the visitors the order of importance of the elements and size is the easiest way to create a hierarchy between elements. If you wish to create an easy to scan layout for a content heavy page that requires displaying all primary items with equal heirarchy apply the grid system. Grids can vary in size, spacing, and the number of columns. For example, let us have a look at the YouTube grid system. It is very well organized and contains four columns. Another important practice is to keep the important call-to-action or submission forms at the top or at the bottom of the webpage. As the westerners tend to remember, the first and the last items better. The final factors I want to tell you in this lesson is to divide the content into small chunks. Never show a big content all in just one block. Tried to divide it into smaller sections as it is easy to digest for the visitor. Easy, easy, and easy. Everything should be very easy and attractive for the visitor on the website. In fact, if you ask me to delete all the website designing concepts in two words, I would just say understand your audience well and make things easy for them. That's it. And I hope I am making the things easier for you to learn. Very good going till here. See you in the next video.
10. Copywriting For Website Part 1: In this lesson, let us learn some super-effective copywriting strategies. The strategies that we are going to discuss is not limited to just a website. You can apply these types disease to write a video script, block post outreach, e-mails, YouTube video descriptions, podcast descriptions, social media post and add copies. Copywriting is the practice of writing text in order to inform, inspired, or persuade the reader. Writing and engaging web copy is very important because Internet is a highly competitive place. The visitor does not find value on the website. We all know what will happen. He will move away from the website. And we never want this to happen with us. So for that, you have to write Diller headlines, subheadings, paragraphs, call to action lines, articles and stories on the website so that the visitor is engaged and motivated to take action. Before starting the copywriting process, you have to be cleared with the website objectives. You must be clear with the one single primary goal of the website. What do you want the visitor to do after he reads the website content? The better you understand the audience, the better you will be able to, right? Also, you need a clear understanding of the product or service. Know what it is, how it works, and how it compares to the competition. Also, you need to learn about the audience thoughts, fears, and desires. Then only you can write a copy that speaks directly to them. Now, I want to share the seven most important strategies that are used to write a highly engaging website content. The first strategy is to use a slippery slide. Yes, it is the same slide on which children play in the park. The short sentences and very short paragraphs have a slippery slide effect and it is very effective in web copywriting. We always want to make the visitor keep reading till the end. Let me show you an example for this. What is a sentences main job. Getting you to read the next one, then the next one after that. That's the slippery slide concept in action, making it hard for people to stop reading. Next is a very famous strategy called as the aida formula. It stands for attention, interest, desire, and action. A-i-d-a, or Aida. You can see it works very well for the sales page copy, social media post copy, and email newsletters. Let us see an example to understand this. The first line written here is, this is the most complete guide to landing pages online. This line creates a tension. Next, creating landing pages that convert super well. It is tapping on the desire to create landing pages that convert. Then in the line, you will love the detailed strategies in today's guide. There is an interest element as well. And finally, a call to action by writing, let's dive right in. The order is a bit upside down for the interest and desire in this example. But what matters is that you apply aida formula in the content. Next is to replace features by benefits. Okay. You didn't get what I mean, features benefits replacement. All right. I am telling you to remove the features on the website. Yes, removed them and write the benefits in place of that. This is a very powerful strategy because it resonates well with the visitor. Try to talk in a way that the visitor is getting benefitted. Don't tell why you are good. Tell them the benefits they will get by using your product or service. After all, his game is your gain only, right? All right. Next is to use strong and clear CTAs. You can place the CTA at every point in the message we are a new information is presented. Nevertheless, an opportunity to convert. Also, your customers are busy. In fact, they are very busy and they don't know what to do next. So you have to tell them what exactly to do next. All right, next is to show social proof. It is a true magic in copywriting. Anyone can say on the website, I can do this, I can do that. But if you can show that with data, testimonials, examples, case studies, reviews, statistics, you can really take the things to the next level and generate sales. It doesn't matter whether you have a long list of testimonials are just a few. You can show up that reviews about customers who are brilliantly satisfied or transformed by taking your services. Whatever the strongest form of social proof available to you use that. Next is crystal-clear. Usp. Usp stands for unique selling proposition. It means to answer, why should someone buy from you? Maybe you have got the best prices. Maybe you deliver faster than anyone else, or maybe you guarantee results. This is what makes you stand up from the competition. So make sure you highlight your USP in the content. The last is the sense of urgency. It is used to make customers act right now. Yes, we want them to take actions and take it right now. Some of the ways to create urgency are like limited time offer sealants on Sunday, don't miss out like this. It really works. Do give this a try. So these are some really powerful strategies and try to make use of them in whatever content you can pose. Now let us learn some practical methods like how to write the headlines, paragraph, and other content. We will start with the headlights in the website Copy always tried to write irresistible headlines. The headline of the website is the first impression that your content is going to make. It is this headline that makes the person decide whether or not he's going to stick around the website and explore more information or else he will simply leave your website and check Instagram. In the headline. You have to try to convince him that the content is useful. Tried to create an urgency, tried to show that the content is unique and ultra specific. Let me show you an example. You can also pause this video to read the examples slowly. So this is a headline for one of the articles and it is clearly showing that the content is useful, unique, and specific. Here is another example. This is how to write a super specific headlined. Now let me tell you some headline preferences. You can use numbers in headlines. You can also address to the reader or use how to headlines and question headlines. You can also create emotional headlines by adding emotionally-charged words in the headline, lake crazy now, fast, mistake, new, breakthrough, amazing, awesome. Alright. So the next concept to use and headlines is FOMO. Fomo. It is the abbreviation for fear of missing out. It triggers a very strong emotion in the visitors. You can use a phrase like limited time savings. It works brilliantly. Give it a try. Next, you can also use the concept of WIIFM. It stands for what's in it for me. It means we need not write headlines showing our experience. Instead, write headlines that answer the question in the mind of the visitor. Once again, I would like to repeat that these are the universal copywriting strategies. And you're free to use these strategies to write headlines for different web pages, blog post titles, email newsletters, social media post and add copies as well. Next is to write four paragraphs. It is also important because the first few lines decide whether the visitor will lead to content or not. So it must always start with a hook. Let us have a look at this example. Here it is starting with a hook leg. The stats are in, the reserves are undeniable. Email is still the number 1 way to drive sales online. This is a hook. You can also use mini stories to start the paragraph, right? A four or five lines story like this. Or else you can also complement the headline as visible in this example. Now, next is to use the rule of three in copywriting. What does this rule of three? Try to highlight the three main steps in content, like showing three testimonials on the homepage, three examples for some concept or three main sections in a blog post. You could have easily gone with five steps or seven steps. But I want you to focus on the rule of three because the convent appears like knowledgable, well-being, both simple and catchy. It is very easy to digest for visitors. There is some magic about the number 3. Yes, yes, yes. That's why I had divided the website cation process into three steps. Now you know my secret of writing scripts. Next is to follow a good structure for the web copy. If the content is one long point, break it down into subheadings to make it easy to read and logical to understand. Next is to write like you talk. It may not be completely applicable in a website copy, but try to use this hack in the email newsletters, blog post and social media post. Next is to use short sentences. Yes. Keep them as short as possible and apply the slippery slide concept. It will help the visitor to read more as short sentences are easy to read and understand. Next tag is to write for one person. Don't write content in a generic tone, write it in a personalized tone as if you are talking to that specific reader. Next is to use active voice in copywriting. You will have to get back to the English grammar book if you have forgotten the concept of active voice that you learned in fourth or sixth grade of schooling. But using active voice is very helpful in cooperating. Next is not to use big words, because if the words are hard to read, the visitor will not read it. Next is to write for schema's. Yes, the people don't read content online, they skim. So use lots of subheadings and break the bigger content into smaller chunks and sections and always make use of the final takeaway lines. Now, the last thing I want to tell you in this video is that you have to write not only for the visitors but also for the search engines. So always try to integrate the target keywords naturally into the content so that your website gets high-ranking, thereby leading to more traffic and sales. Here, we have completed the copywriting listen Part 1, and we have the part two as well. Stay tuned as we have to learn a bit more about the copywriting process. See you in the next video.
11. Copywriting For Website Part 2: In this video, let us learn the step-by-step process to write a high converting website copy for the homepage About Page, service and product page and contact page. It is very exciting to convert the blank page into a highly converting content that generates leads subscribers and sales. The process starts with identifying the websites most important objective, because we always create a website for a specific purpose to get clarity on the purpose of the website, tried to visualize your customer's journey and come up with a call to action. Like if you have a service business, you will want the visitors to fill out the lead form. If you have a product business with a short buying cycle, you will be seeking a direct purchase. If you have a product business with a longer buying cycle, you might focus on email sign-ups so that you can engage leads in an e-mail nurturing process. Objectives can vary, but try to identify the van single primary objective on the website of her goal should be to get visitors from arrival to action as quickly as possible and in the most linear way possible. In order to do this, we want to minimize the number of pages involved in the customer journey. So you will have three options to decide how to use the homepage. Number one, if you offer a single product or service, you can use the homepage as the landing page for that product or service. Number 2, if the primary website objective is email sign-ups, use the upside down homepage strategy. Number 3. If the primary objective is anything else, use the homepage as a brand building page. Let us learn what exactly is an upside down homepage strategy and a brand-building page? The upside down homepage asks for the visitors email at the top of the page rather than at the bottom. The structure could be like the hero section, including a form for email sign-up. Below the hero section shows some social proof. If a label then tell a brand story that solves some problem. And again, you can ask for the e-mail address in exchange for the solution resource. In this way, you can get maximum email sign-ups on the homepage using the upside down homepage strategy. Next is a brand-building page. It is a classic homepage. Here, you should not try to sell the products or service. Instead, tried to build a brand perception and then take them for the specific product or service pages. To build a brand, you have to write the brand value proposition that tells via business exist and what is the core identity. Then you have to write the short brand story to describe the challenges or problems that your brand wishes to solve and tell them how it is solved. Finally, show the visitors some proof to build credibility for the brand. After this, you can redirect the visitor to the specific product or service page to take specific actions. Also make sure you have enough call to actions in the web copy. This is how you can write content for our homepage. Now, let us see how to write an About page and about pages always there in the website because people expect it to be available. A large segment of visitors may even put off the idea of buying the service from you if they did not find the about page on your website. Visitors generally visit the About page to verify whether the brand or person is genuine or not. Also, they want to connect well by knowing the vision, mission, purpose, or the business background. And sometimes if they don't understand your brand story at the homepage and want to know more. They will visit the About page. For more specialized websites like a B2B website, they want to check whether you have the experienced background or naught or heavy von any awards or certifications to make you stand out from the competition. While writing content for the About page. Always talked to establish credibility. Talk about what you have achieved and who you have worked with. You can also start with the vision and mission before starting the brand story, you can always be honest and straightforward as visitors prefer clarity. And finally, conclude the About page with a CDA. Now, let us see how to write for the services page. Instead of a service page, we can consider this to be the landing page or the sales page where we can provide an offer to the visitor. If you have multiple products or service, you can create separate pages for all of them. Talking about the content, you can start with the value proposition for the specific product or service. In order to do this, clearly defined the offer, specify who it is for, and differentiate the value. After this, you need to explain the benefits of your solution and then explain how you actually solve the problem. Here also provide as much proof as possible. Also tried to push visitors to contact you at every opportunity. Tried to include a CTA at any point on your page where the reader might be in a mental position to click. You can design CTA buttons to scroll that the reader down to n On page contact form instead of redirecting to a separate page. And if you are writing content for the product page in an e-commerce website, then you must include the product images, product details, Add to Cart button, product description, product or brand history. You might also like section and the review section. Next, let us learn to write the web copy for a contact page. This is probably the simplest page of a website as the visitor has already made up the mind to contact you. But if you want more leads, simply keep all the content above the fold. Leading to minimum scrolling. Include a short invitation addressing people to contact you. Provide as many options of labeled for a visitor to contact you like an inquiry form, email address, phone call, or Skype. Let us also learn how to write for a landing page. The sole objective of a landing page is to make the visitor data desired action, like signing up for a newsletter, starting a free trial, or downloading an e-book. This can be any specific action. So on the landing page, start with the headline that clearly shows the benefits for D will get, buy the product or service. Also have the social proof in the hero section itself, above the fold. Use whatever the most credible proof you have, like the places where you are featured or number of customers, or the names of big lines or whatsoever it is. But tried to include as much proof as possible. Then the main content area should follow the structure like problem, agitate, and solve formula. Start with the customer's pain, point out problems. Then highlight how annoying the problem is and then tease them with the solution. After this section, you can come up with the transition section. It is that transition from the problem to the solution. But when an offer and do place the CTA here for the visitor to take action because if the visitor is convinced, you need to tell him how to get started or what to do next. That's it. To write content for a blog post, you can start with writing and ultra specific headline. It gives clarity to the visitor what exactly is going to know in the post. The more specific you write the headline, the more clicks you will receive. Then start the paragraph with a shorter intro of not more than some eight lanes. In brochure prove that you can deliver on the headline from us. And also give a preview of what all they're going to know coming into the main content area. The post should include actionable tips, techniques, and strategies that people can use right away. This can include content in the expanded list form, case-study list of tools, the ultimate guide or the complete list Geyte. Use lots of examples to make the content easy to understand. And finally, give your visitors is CTA to take action. You can place some social proof for additional encouragement. That's it. So the copywriting lessons were a bit long, but they are worthy because good copywriting is going to bring leads, conversions, and sales for the website. We will end this lesson here and continue with graphic designing in the next video.
12. Graphic Designing For Website Part 1: Everyone is always excited for graphics and there is a very strong reason for it. And image is worth a thousand words. And image can trigger perceptions, emotions, and actions quicker than text. So it is important for you to use graphics and images in the website to build a strong visual communication with the visitors and tanks to some awesome free tools like Canva, creating graphics is now much easier than before. In this lesson, we will learn about the general process and fundamental concepts of graphic designing that you can apply to edit images and create graphics, not just for a website, but even for social media post YouTube, thumbnail, or any other graphic element, as these are the universal strategies. So let me start by telling you the general process and steps to create a graphic design. The first step is to note that required dimension or resolution of the graphic design. It is the size of the graphic in terms of width and height that is measured in pixels. Lake, if you want to insert an image in the hero section background, then you have to create the graphic and 11 for 0 by 600 pixels to cover the screen above the fold. The dimension for an Instagram post is 1080 by 10 Hz little pixels. And the dimension for an Instagram story is 0100 aids that all by 19, 200 pixels. So to use graphics in the website design, it is important to know the required dimensions. First. To know the dimensions, you can use a Google Chrome plugin called as page to LA Redux to quickly measure the dimensions on the screen of any section or column of the website. Next step is to select the right background. Your design converse would be a plane vite, empty box. And you can always start by putting up a background. It can either be a solid color or a gradient audit texture or an image. You can also use background overly vague. You insert a background over already existing background and adjust the opacity to get an awesome blended look. After the background, you have to insert elements to the design in the form of text, images and shapes. You have to complete the skeleton or a simple structure first containing the content, and then you start working on the phones, colors, spacing, and alignment. Once the graphic is ready, you can export the file and dark JPEG or PNG format to use on the website. The JPEG format is the most ideal to use on website as it is smaller file size and helps in making the website load fast. But JPEGs do not support the transparent background. So if you have a graphic that needs a transparent background, you will have to use the PNG format to export the file. Although you will get the options in the graphic designing tool, it serves to export the file in smaller file sizes. But if you don't find such an option in any tool and you want to reduce the file size, you can follow these steps. First, make sure the image resolution is not over scaled as the resizing the image to the required solution will reduce the file size automatically. Next step is to visit tiny PNG.com, upload the files and Download decompressed versions. This will help in reducing the file size, but always make sure you upload an image and the website in the least possible file size in just a few babies only. Now, let us also discuss some fundamental concepts for good graphic designing. First concept is emphasis. It means to decide what is the first piece of information that the visitor needs to know by watching the graphic. Next is to apply balance and alignment. You can design a symmetrical or asymmetrical graphic. Just make sure that the graphic does not look condensed or uneven. Next is to ensure the right color contrast to make the elements pop. Next is to use the concept of heirarchy. It is the arrangement of elements to draw attention to the key elements first. Next is to use lines and shapes in the graphic. Also, it is important to use icons to draw attention without much distraction. Next is to use the concept of repetition. You should not use different phones for every line in the design as it breaks the consistency. Next is to maintain proportion. Proportion can be achieved only if all the elements of your design are well sized and thoughtfully pleased. Once you master the alignment, balance, and contrast, proportion should be visible automatically. Next is movement. Movement is controlling the elements in a composition so that the eye is led to move from 1 to the next and the information is properly communicated to the audience. Next is to use the right colors to connect well with the audience. Next is whitespace. Whitespace is not sitting there doing nothing. It is grading heirarchy and organization. Managing the whitespace means to utilize the open space to bring attention to the elements that actually matter in your design. Next is typography. Obviously, the words we use in our designs that important, but also the forms we use to communicate those words. And finally, I will recommend you to use a real images of people as it helps in improving the conversion rate. Do give this a try. So these are the fundamental concepts that you can use to create a graphic design and vivid learn more about it in the upcoming video that is graphic designing part. To see you there.
13. Graphic Designing For Website Part 2: Once you are done with the fundamentals, it's time to get started with the application of concepts. Let us start with the images. In a website project, you will have to use a lot of images. But the question is that how can you get those images? From which website you are going to download the images? Are you thinking of making a Google image search and use those images in the website? No. We should not do it. As the images may not have permission to be used for a commercial project, and it may raise some legal issues for you. Let me tell you some very good website there you will get stock free and high-quality images to use on the website for free. Yes, you can download these images for free from portals like Pixabay, excels, and Unsplash. Although there are so many other websites as well to download stock free images, but these three are extremely good. Apart from this, I have one more option. You can download the images from free pic, but it is a freemium site. A freemium side is one on which some of the resources are available for free, while others are paid. The images with the ground Akan are the paid ones. And to get access to those images, you will have to buy the free pick subscription. Now, you must be wondering why to pay for a free pick subscription when VR getting the images for free from other websites? Well, it depends on the collection of images and it happens quite often that you need a specific image, but that does not belong to any free website. When we are working on website projects. And there is a need for some specific images. The even prefer buying the images from platforms like Shutterstock and Adobe stock. Here, we have to pay a very good amount of money for the subscription to get those specific images. But it is worked because we had at least getting what we wanted. Just make sure you download the images in that required resolution. And if the image resolution is large, you can resize the image to the required resolution using the technique we discussed in the previous video. And compress the file size by using tiny PNG or any similar image compression like phone. Many dinners and tutorials suggest using the WordPress plugins to compress images like E triple W image Optimizer. But I prefer to reduce the file size before uploading the image to the website. Helps in reducing the need of using an extra plug-in and keep our WordPress light and clean. After the images, you will need some vector illustrations to use in the website graphics. Now, what is a vector? How it is different from an image? A vector is an artwork built from Vector Graphics, which add images created with mathematical formulas. Cone to read. Don't worry, we're not going to discuss mathematical formulas here. It simply means you can enlarge a vector art to any size without affecting its appearance on making it look blurry in comparison to the images. So the images, also called lass raster artwork, will look blurry when we enlarge them or Zoom them. But a vector artwork will not blur on zooming in or enlarging even for a, a holding size billboard. I hope you are clear with the difference between a raster image and a vector image. Now where to get vectors and how do I get a vector? Which tool? Which software? Let me first tell you that you will get the free vector graphics from free pick. In fact, some will be free and others will be paid, and you can access them if you have a free pick subscription. You can also find vector graphics on other platforms and you can simply make a Google search for it. But I suggest you to start with free pick only. The vector graphic file is usually available in the format dot AI or EPS or dot SVG. These are all vector file formats. You can edit a vector using Adobe Illustrator. And it is the recommended tool to create vector graphics. But the Adobe subscription is a bit on the costly side. So you can make use of an open-source tool like Inkscape, or at least use a very economical tool that has gravity. Designer. Gavin designer is a decently powerful tool and it comes with a generous two weeks free trial as well. You can access it on the web or you can download and install it on the computer. Let me quickly give you a working overview of tools like Canvas, graphic designer and Adobe Illustrator. Let us go to Canvas first. This is also a freemium tool which has a free version and you can subscribe to the pro version for advanced features. Here you can sign up for a free account, and this is how the Canvas dashboard looks like. The Home section consists of quick design menu to select and start creating the design. Below the act, they'll be the list of designs that you created using Canva. These designs are saved on Canvas cloud and you can quickly access them anytime. Below that are templates or pre-designed graphics that you can import with just a single click. If you want to create a custom dimension design, then click on Create a design option and select Custom Size. Here you can enter the width and height in pixels. You can also observe that you can find the dimensions of popular graphic types by hovering over the title. The template library of Canva is very good and you can use it to save time while creating a graphic. You will also find a huge collection of photos and icons to use in your design on Canvas. If you have Canva pro subscription, then you can even download them and use on any other graphic editing tool. Let me create a hero section background for the website by selecting Create a design, clicking on Custom Size, entering the values 1, 1, 4, 0 by 600. Is in pixels, and here we have the blank canvas. Now, if we follow the steps as we discussed in the previous video, we are done with the dimensions. Now, it's time to select the background. You can choose a solid color, a gradient audit external, odd an image for the background. Simply click once on the blank canvas and asked the blue selection is highlighted. You can choose the color from this option. You can choose a color from the default colors or click on New Color option to explore mode. If you have the hex code for some specific alert, you can enter that here. If you want to insert a gradient, select the elements option from the left menu and then scroll down a bit to find gradients or else you can simply make a search for the gradients. Here are the different shapes with gradients and you can insert them into the canvas with just a single click. You will have options to insert a two-color gradient, auditory color gradient in so many different shapes. If we want the background to be a two-color gradient, select this rectangular one and inserted by clicking. Now adjusted dimensions by simply scaling across the corners. Don't worry if it is overflowing as the shift will be masked automatically to the dimensions of the canvas. Now, if you want to insert textures, then select background from the left menu. And if you want to use images in the background, click on photos and search for the desired image. Just make sure you do not insert a photo with the chronic and as it is available only to the Pro subscribers orders, your graphic will contain watermarks when you will export. Actually free photos are a bit difficult to find on Canvas. All right, I have got one and let me insert. Another thing to notice here is that you are inserting different elements and photos and all these are getting arranged in a hierarchy. This is the concept of Lear's in graphic designing. All the elements make up a unique layer and you can arrange them in different orders easily. This is really very helpful. Playing with the elements front and back again, front, again, back like this. Now, the next step is to use a background overlay. For that. Let us insert a shape and give a solid color. Do it. Now makes sure the shape is selected and then click on this transparency option. Here you can adjust the opacity by manually schooling the wheel and coming up with the ideal overlay effect. This is cool. Right? Now, you can insert text, images and shapes as per your requirement. Let us add some text to the graphic. You will find the text option in the left menu and click on it. You will get a library of commonly used form combinations and styles. You can select one here or else simply select the headings, subheading or body text. Here you can type the text and adjuster position by simply dragging it with the mouse. You can make changes to the styling of the text. Experiment with the Ford family font-size form colored bold, italics, alignment, bullet list, letter spacing, line-height. You can also give effects like shadow and curve. To the text. You will find some additional options by clicking on these three dots. You can make the text underline or uppercase, adjust the transparency, enter a hyperlink to the text, lock the layer, and create a duplicate of this text layer. You can also use Control Z to undo the action and use control C and control V to copy and paste. When you click on the text layer, you can also rotate the layer like this. Now, let me create a duplicate of this layer and change the phones. If you want to copy the styling of this text layer and apply on the other text layer. Simply select the copy style option and apply it. Using the position option, you can adjust the order of the layers like front and back. You can also adjust the alignment of the layered like top, middle, bottom, left, center, and right. You can also make a selection of the two layers by holding the Shift key and clicking on them. Here, you can group these two layers together and adjust the position to make it look uniform. If you have a look at the menu options on the left, you will find the option to select elements. The elements include shapes like lines, frames, grates, gradients and icons. Make smart use of lines and shapes in the design. You can make use of frames and grids to Moscow layer inside a shape like this. If you want to upload custom images to your design, you can select the Upload option to upload media to your Canva library. It is saved in the Cloud and you can easily access it anytime, anywhere. And Canada has a mobile app as well, so that you can access your designs on the mobile phone. Simply click on the image and it will be inserted. You can insert as many artboards or pages in the design by clicking on the plus icon or on Add a page. You can also preview the design and full-screen. You can change the file name over here. And once you are done with the design, you can click on Download to export it in multiple formats. You can check the different file type options have labeled here. And if you are exporting the designed for use on website, you can prefer the JPEG option as it gives the smallest file size. But if you're getting some major quality issue, then you can download the PNG one and then use tiny PNG to reduce the file size before uploading to the website. In fact, I recommend using tiny PNG to compress all the images that you upload on website, no matter it as a JPEG or PNG, because even at 10 percent saving in file size is helpful for us to reduce the page load time. This is how you can use Canvas to create graphics from scratch. Now you can experiment with importing the templates and you will see how much time can be saved by using a good template for the design. And when I close Canvas, the design such saved here in the library on the Canvas loud. Come on, please do some practice on Canvas. It will help you a lot. Now, we cannot exit vectors on Canva. To edit the vector artwork, you can use Inkscape or Adobe Illustrator or else grab a designer. Let me tell you the working of gravity designer. Vector editing is more or less a professional task, but let us give it a try to at least learn the basic editing. So let us sign up for a free account. All right, the account has been created. You need to verify the email and start working on the Garver. Design it. All right, Now here you need to start by entering the dimensions. And you can also start the free trial by clicking on this button. Okay? So this is the blank canvas, just like Canva. On the left, you will find the list of pages and layers. On the top, you have the options menu and on the right you have the styling options. You can start by selecting the page background color. By clicking on this option, you can select a solid color or the gradient. You will get some advanced options as well. Feel free to explore them and test every option if you want to dive deep in graphic designing to insert the text, shapes and elements, you have the options here at the top. You can insert a text layer by clicking this and drawing a text-box on the canvas, painted desired text, and adjust the styling by using the options on the right. You can experiment with the fields, borders, and effects. When you move an element by picking with the mouse, you will find snapping lines to guide you with the alignment. You can also use the pen tool by pressing edge or selecting from here and move around the document. You can zoom in and zoom out by pressing the Control key and scrolling using the mouse wheel. You can switch on and switch off the snapping rulers and grids. From this option, you can insert shapes and you can even use keyboard shortcuts to speed up the process. And you can place an image by using this option. In order to scale the image, you must press the Shift key advice that issue will change in resizing and images will look a bit odd. You can drag the elements with the mouse by holding the click. And the best part of using a vector getting software is that you can customize the shapes, size images, dropping everything very easily as per the design requirement. For selecting a shape, you have two options. One is pointed and the other is sub select point, that is the regular selection mode. But with the sub select, you can play with the corners and crop an element. The pen tool is a powerful tool and it takes some time to master it. But you can design illustrations and create freehand designs which are unique and creative. There are several options to manage the corners and create a custom design. It can be an open-ended shape or a closed one. We won't be going into the depth of the pen tool, the basic ON tool and freehand tool, but you feel free to be explored more about it. Another very important concept is off masking. When you have an image and a shape and you wish to insert the image inside the shape, just like we used grids in Canva. You can do so by dragging the image layer into the shape layer on the left-hand layers panel. If you want to bring it out, simply drag it outside the layer. You can also make a selection using the mouse and use the layer ordering to bring elements forward and backward. If you wanted to bring an element at the top of the layer, right-click, select, arrange, and select bring to front. These are the general settings and graphic designers. You can also explore the settings for Adobe illustrated on yourself. And it works almost in the same manner, but we'll have way more set of options and features to make advanced graphics. Now, let us see how you can create a logo in Canva or GAVI designer. Go to Canvas and make a search for logo. You will get more than 100 templates to choose from. If you find a suitable one as per your requirement, you can simply click on it and it will load in the Canvas. Now simply added the brand name and change the colors if you want. But I always recommend to start with a simple black and white logo and fill up the colors after you have selected the color scheme for the website. Export the logo design in PNG format. But there is a challenge here. Since you are using the free version of Canva, you wouldn't be able to get the transparent one here. So no problem. You can still download it with a white background. And now let us see how you can remove the background and make it transparent for simple graphics. First option is to go to remove Dark BG. Here you can upload the file and the tool will automatically remove the background for you. If you are satisfied, you can download it. However, you will be able to download only one file in full resolution. And for the next files, you can only download the preview version. The image quality is not sharp enough and the previous version. So for that, let me show you another way. You can go to photo p.com. Here, open the file from computer, and then click on Select option and click on magic kit. Here, you will have to make a few adjustments, but you can get a wonderful transparent background for the logo in the sharpened high-resolution PNG image. Once done, click on OK and then click on File option, click on Export As, and select PNG. Good logo is ready to be used on the website. Making a logo using Canvas is good, but it has limitations. If you have to change the colors are made changes to shape. You don't have that much flexibility. So to create professional logos, you must use. Vector Graphics and a vector editing tool, preferably Adobe Illustrator. But we're using graphic designer for the scope of this course. And let us open Graphic Designer again and create a blank Canvas. The first step in creating the logo should be to experiment wet form styles. If you're getting a satisfactory one by using this technique, then it gets a lot easier because you won't have to create much shapes. So play around with the phones, styling like italics, all caps, and try to come up with a collection. After analyzing the different options, you will form a better idea of the id logo for the website. Shortlist a few of them and then filter out more to come up with the final been. Now, you can add custom shapes to the logo. To come up with ideas. You can make a Google search and try to analyze the logo of brands and companies working in the same industry. If you find some common element like leaves are used to represent green companies, studentships and educational institute logo and so on. Once you have some ideas and options in mind, head over to free pig and make a search with some keywords. For example, if you wish to create a logo for real estate, you can make a search for buildings or simply make a search for real estate local. Three pig has a huge collection of vector graphics and you will find thousands of low options to choose from. If you find some suitable one, simply downloaded and open it using graphic designer. Now, the best part of a vector graphic is that it is completely customizable. You can select the Shape layers, and place in your logo art board. Here you can play around with the size, position, and alignment, and come up with the idea logo for the website. Always create some versions for the logo like full, short and minimal ones to use aspart, that requirement of the project. Once done, click on File option, click on Export, then click on advanced Export, select the canvas option, choose the format as PNG, and change the background to Transparent. Click on export. Your logo is ready to use. Another thing. If you have to export only the selection of layers, make sure you group the layers before exporting. You can also export the logo in PDF and SVG format so that you can use this file on other vector editing tools like Adobe Illustrator or coral draw. This is how you can create a logo. Next is to create an illustration image for the website. Here also we will make use of gravity designer and free pick, search for the required graphic with keywords on free pig and download the file open Graphic Designer and create a new artboard with the specific dimensions as per the requirement. You can measure the dimensions on a website using page ruler Redux. Like. If you want to place an illustration in fun off the columns in a two-volume structure, you can measure the width and height and create a design with the same dimensions. All right, so we have got the dimension and we have got the blank canvas, open the downloaded free pig file and ungroup the layers. Now make a selection of the required layer and bring it to the illustration art board. Here you can adjust the size, position, alignment, and colors, and finally, export the graphic to use on the website. Select the PNG and JPEG format as per the background to climate that Sage. Next is to design the icons. Icons are a simple and effective way to draw users into the content of your website. Icons are also used to draw user attention and direct them to some specific content. So to create custom icons, we will have to use Gavin designer yes. To access a huge library of predesigned icons you can visit flat icon.com. Here is simply make a search for the required Eigen and download it and SVG format. Now there is a reason to download it in SVG and not PNG. First, you can scale the ICANN without causing it to appear blood. Second, you can change the color of the eye again, directly from the website editor itself. It works well for the line items. So always upload DI comes in SVG format and not PNG. If you want to create a customer again using the one downloaded from flight Eigen, simply open the Eigen and graphic designer and make the desired changes. Here you can make use of the pen and basic onto create custom shapes as well. You can also change the color fill to a solid color or a gradient color. Once you are done with the editing, simply export the file in SVG and uploaded on the website. The final thing we have to learn is editing the images. The most recommended tool to edit images is Adobe Photoshop. But you can make use of the free tools like GIMP, ang photo B as well. The most important it just mean you have to do in an image is modifying the dimensions as per the need of the website. This can be done by creating a new document in the required size, placing the image, and simply exporting it in JPEG format. You can also do this in grabber, design it by a masking the image in that rectangle. If you want to improve the colors, then you will have to use either Photoshop or the free tools like GIMP and photocopy. Also, you can make a selection to cut-out a specific part or remove the background. Feel free to explore them as per your convenience. I will also be coming up with a dedicated course on content creation that will include in-depth tutorials to write content, graphic designing using dedicated tools and even video editing. But I believe that you have got a decent amount of knowledge about graphic designing that is required in the creating of a website. That's it to learn in this lesson, and we will continue in the next video.
14. Understand The Business: All right, So we are completed with the foundations and let us now take the first step to create the website. What is the first step? The first step we have to take is to discover. Here, we have to understand the business, understand the product or service, understand the market, competitors, and most importantly, understand the customers. If we develop the right understanding of the business and customers, then only we will be able to create a website that converts. I have been telling you to think about the purpose of creating the website. And now I want you to dive deep and come up with an outline for the website. You can divide the plan into four sections. The first is the business. It can be either an individual or a company. Second is the market. Third is the audience hall customers, and fourth is the website. You have to come up with answers to some of the questions. Let us start with the first one. That is the business. What does the product or service the businesses providing? It can be a physical one or a digital version, a professional service, or just an informational platform with useful content is available to read. Try to deeply understand the product and service. That is the first question you have to answer. Also, you need to go through the details like history of the business. Your speciality is your USP. That is unique selling proposition. This is a very important gland, figured out how the solution you are providing is going to benefit the customers. Finally, great to come up with the company values, the core messaging and the voice of the company to set up a tone for the content. How do you want to talk to the customers? Come up with an answer to all these questions. Next is to understand the market. Tried to come up with the target market, geography's and competitor websites, VOT funnel the competitors are using. Is it a direct sales approach or an e-mail nurturing process? What is the current industry trend? What is the design drained for this, the content tone, what is the sales funnel? Next? And most important thing is to understand the audience and target customers, right? To come up with the audience habitat, their challenges and pain points. Plan out the complete customer journey on the website, how many pages he will have to browse before reaching the action. The last step is to plan the website based on the answers of the previous questions. The characteristics of an ideal visited who was going to visit the website, figure it out for do they expect to find or what action they want to take on the website? What is the primary goal of the website? Is it information or sales or just leads? If you are grading the website for yourself, then you can spend time thinking about the answers for all these questions. And if you are dating the website for the client, send him that template and ask for the complete brief. It is a very important step in the process of website creation and it is followed to build brands. Yes. I want you to take up this task like you had building a brand and not just a website. After all, we create websites to grow the business. But if we do not follow the best practices, we may not get the desired results. If you are just starting up the business. Competitive research or websites that offer similar services will help you a lot in getting this brief. The more you learn about the business, the better you will be able to design the website and generate returns on investment. So once you are done with these questions, you are ready to proceed. We will continue in the next video.
15. List Of Webpages & Building A Template Library: After understanding the business, you need to come up with a list of pages required on the website. This will depend on the purpose of the website, customer journey, total number of products, services, and the funnel you wish to follow for the business. And the answers of the questions that we discussed in the previous video will help you a lot in planning the website. You can start by creating a sitemap structured like this and populate the list of pages. Create a sub-menu category or redirection pages under the main ones. The most important page in our website is the homepage. It is usually the default page. Visitor sees the first when he visits the website. In general, the content of the homepage could be structured in the way we discussed in the copywriting lesson. But if we are going to make a single-page website, then the homepage is the only page that you will need. Although I never recommend creating a single-page website as it is not at all good from the search engines point of view. Because if you have pages do not rank on Google, you will miss out on the whole lot of important traffic. In general, the basic pages to have on a website are the About page, the product page, or they'll still Services page, Contact page, the legal pages like privacy policy, terms and conditions and an error for 0 for page that is displayed when a user requests some pays that is unavailable or does not exist on the website, feel free to come up with the required list of pages for the website. And you can also search the industry and check modern pages are available on the competitor website. Next is to take a references and build a template library. You can take an offenses for the website by visiting the other websites, you can check what pages they're using, what color schemes they're using. How would they have arranged the sections and a whole lot inspiration. It is not like that. You can take inspiration only from the competitors in the same industry. You can take inspiration, design and content ideas from any website on the web. You can take inspiration for a single line, single section, single webpage, or for the complete website. Taking inspiration is not at all a bad thing because the more you observe different designs, the better will be your design output. I am asking to take inspirations, not copying the complete design or content into your website. If you wish to use completely ready design than there are so many pre-designed webpages and website designs available to download and use on a website. These are godless templates. Templates I've labeled for entire website, a single webpage, and even for individual sections. Since we are using Elementor, we get access to a huge collection of templates in Elementor itself, although some of them are free, while others are paid. By the way, Elementor is the Page Builder we're going to use in our website creation process. And it is a very popular WordPress plugin to design awesome websites without any coding, you can import the templates to use on the web page. Majestic click of the button. And since we will be using Astra Theme vivid, get some more website templates in the Astra starter templates plugin. This is also a wonderful collection of predesigned websites and the Betas. If you wish to explore more resources, I will recommend you to visit Envato Elements and with a small subscription fee, you will get access to a huge library of Elementor templates to download and use on the website. These templates are helpful in creating a website in a very short period of time, because you have to just edit the content and replace the images. That's it. The layout is fine, we're different and optimized. We use this technique to create a website and just were not for the client. There are so many other websites that provide free Elementor templates like tyler.com and feel free to explore mode by making some Google search. Another thing building a template library is not just downloading and importing the template. It is about creating a collection of sections and pages. Let us say if you like the hero section of any website, you can take a screenshot of it and save in the library. Don't forget to organize it or else you will end up creating a mess. If you'd like the About Us page of a website or some call to action section, or the layout of a contact form or just anything that is beautifully designed. Take a screenshot and save it to use as a reference for some future project. You can even take the screenshot of the mobile and tablet version of a website by going to the Developer Tools and selecting the device like this. Now, how to take a screenshot? I am using a very simple Google Chrome extension called as fire shot, and it is very easy to capture a screenshot. And you can spend time exploring the latest website designs on Behance, Dribble, or of arts to get fresh ideas for the project. You will find lot many collections across a variety of websites to get design inspiration. You can create an inspiration board on Figma or any website designing tool to create a library of designs. It is totally up to you how you create and manage your liability. But take my verts, it will help you a lot. So we're done with step number 1. That is the discovery. We're not aware about the market, competitors and our customer preferences. We have taken references and build a library and it's now time to finalize the content, typography, color scheme, layout, and the website design in the next step that is designing. See you in the next video.
16. Branding: Branding is very important for the website as it helps in building a perception in the mind of the visitor. It creates credibility for you in the market and also supports the advertising activities. Branding defines who you are and what your business looks like. Now, there are several factors that play a role in conveying the brand's personality. But if I tell you the four most important factors for the website, they are the logo of that website, color scheme, type, biography, and dawn of the content. If you maintain consistency in these four factors over the entire website, that the visitor will definitely get the sense of parenting and develop a positive perception by browsing the website. Now there can be two scenarios. One, you might be just getting started and there is no brand history at all, means no logo, no brand colors, nothing. Second could be that you are making a website for an already existing business that has some logo and even some old website. For such a case, you can plan a rebranding process if required, or else you can use the same logo and come up with the relevant color scheme and continue with the website design process. For the time being. I am considering that you are starting from scratch and we will start by creating a logo. We've already discussed the process to design a logo in the graphic designing lesson. Always start with some raw ideas and create multiple options as per the time and budget of the project. Don't worry about the colors till the color scheme is finalized. Simply give a black and white color to it. Just make sure you experiment with the phones and shapes and come up with the most ideal logo for the website. Then you have to finalize the colored scheme. This can be done by coming up with the preferred colors of the brand or by taking references from the colors of other brands. You can also make a Google search to know the most trending color combinations for any industry. It is recommended to start by selecting the primary colors, which are going to be the dominant colors that is used in high volume on the website. Then you need to select the secondary color that is used to complement the primary color wherever required. Then you need an accent color that is used to highlight some extremely important sections like a call-to-action button. The accent color must stand out to give extra emphasis to the element. Then you have to select the colors for typography. Always make sure you maintain a good contrast ratio between the heading color and the background color. In fact, any text and the background color on the website. Typographic alerts will include colors for heading, subheading paragraphs and call to action button text. Finalize all these colors before starting the designing process. Once you are done with the color selection, it's time to put colors in the logo. Next, you have to select the phones for headings, subheadings, paragraphs, and call to action button text. Come up with a complete list of styling options like phone family for every type of heading, font size, and font weight. Again, you can experiment here with different Google font options or take reference from some website, or even made a Google search for the trending phones to use on the website in some industry, but do make the complete list of phones and styling beforehand. Next is to make some content strategy, keeping in mind the values of the company. And accordingly, we need to adjust the tone of the content and images that are to be used on the website. For example, the values of a brand may include optimism, Fun, and eco friendliness. So you have to compose the content in a way that represents that every problem has a solution that's optimism. And also use some fun facts and show some care for the nature. Some brands showcase their trustworthiness, Some highlight their innovation, and some wants to deliver a sense of personal touch. It is a broad marketing topic, but I hope you must have got some idea about the branding in terms of values. So to conclude, the branding topic here, always maintain consistency in colors, typography, and tone of the content on the entire website and even on all other channels like social media, YouTube channel, and everywhere else on the web. In the next video, we will learn how to use a designing tool to create the website design before moving on to the development stuff. See you there.
17. Designing The Website: We've been learning about using Figma in this lesson. If you just want to create the design and don't form the functional prototype, then you can design for pages on gravid designer or Adobe Illustrator or Photoshop or whatever tool that is available to you and convenient to you. But I highly recommend you to use Figma or XD or Sketch only. Let us go to Figma and sign up for a free account. You can access Figma on the browser or you can install the app on the computer as well. It is completely Cloud-based, very easy to setup. And here is the dashboard. Now, let us create a new file, and this is the blank canvas. It is just like any other graphic editing dude. You can give this file a name by clicking here. Now, the first step is to get our votes or frames on this page. Click on the frame tool and from the right, you can select a device to get the dimensions for the frame. We want to create a responsive website. So we will be creating key frames. One for a computer, for tablet, and for a mobile phone. I am clicking on the MacBook here and a frame is inserted. I can change the dimensions of the frame from the right styling menu. I am keeping the width to 100, 400 pixels as a distinct default container width for our page builder inverters, you can press the Control key and use the mouse wheel to zoom in and zoom out. You can click and drag the canvas with the mouse. Let me insert a frame for the tablet and mobile phone as well. Change the name of the frame to homepage by double-clicking on the title. You can do this for the remaining frames as well. If you have some reference image for a website, you can click on this icon. Select the option, please stay image and select the file from the computer. You can place this near to the frame. And then if you want to take some inspiration, it is always here to help you. So we always start by creating the header and footer as they will be consistent for the entire website. Let me zoom in a bit. Yeah, that's fine. Select a rectangle by clicking on this option. Draw a rectangle using the mouse and let it come to the dimensions 1140 pixels width and 72 pixels height. You can adjust the dimensions from here as well and adjust the position and alignment. But wait, I've enlarged, give it the colors and content here. In the website designing process, it is always recommended to create a wireframe on a blog diagram first, that represents the layout and positioning of the content on the website. Yes. Simply create a skeleton in gray and white colored in client to come up with the content positioning. You can do this for all the pages that are required on the website and then start working on the visual elements. Putting the boxes and text is a simple task in Figma, just like graphic designer, you can please the elements change the color, adjusted dimensions, change the forms, alignments, hand positioning very easily. Once this wireframe is done. Tested whether it contains the desired sections to show all the information we want on the website or not. Once you are satisfied, proceed with the visual design. Let us now give this a color as per my branding gate. Now let us place the logo by clicking on drop-down of this icon and select Place Image, select a logo file and click to place it on the frame. You can adjust the size by holding the Shift key to maintain the ratio, drag it, and place at the appropriate position. Next, let us create the navigation menu. Since we are finalized with the list of pages, let us mention them in the navigation menu here. Click on that text, Reagan, and place the text. You can move the position with the mouse and they kept off the snapping lanes. Adjust the font family, font size and color of the text from the right scaling menu. Now, to create a copy, you can either press Control C and Control V, or simply holding the Alt key. Drag, drag, drag and drop the layer. It will create a copy. You can hold the Shift key while dragging to keep the alignment intact. You will please the different layers, the spacing between them is highlighted and you can arrange the alignment as well. So our header design is ready and next step is to design the filter. Let us take another rectangle and give it the dimensions 11, 400 pixels invert and fought 100 pixels in height. You can obviously change the height like this. Here you can place the secondary menu, navigation items and links to legal pages like this leads to social connection buttons and also please a newsletter subscribe form. The idea is very simple. You can use Figma in coming up with the design of every part of the website. Now since the header and footer are ready, let us group the elements by making a selection, pressing Control G, and it is grouped. Double-click here and rename the layer. Seen with the footer, double-click the name, that's it. The list of layers on the left are useful in arranging the heirarchy and often locating a group of elements. If the elements are grouped, you can click on this chevron to open the list of layers. Click on the individual layer and it is selected. Next is to create a hero section of the website. Again, thicker rectangle, give it the dimensions when, when Ford little pixels invert and I am taking 600 pixels height. Now please some background like solid color gradient or an image. I am taking an image. In this case, to replace the image, we will follow the same process, select an image from the device and click on the blank area to insert it. Now, we want to place this image inside that rectangle. So let us bring the image layer just above the rectangle and then select both right-click and select use as mosque. Now window double-click on that rectangle. You can adjust the position of the image. Don't forget to hold Shift key while the sizing to maintain the ratio. And Figma also gives you some image editing options here. And if you want to export this image to upload on WordPress, simply select the mask group, click on the plus icon here at the export option, select the format and what we need, we need a JPEG, save it. The image is resized aspart that required dimension to use on the website. We will have to use this technique a lot many times while exploiting the logos and icons to maintain the consistent dimension. Next, you can add some texts like headings, subheading, and CD. Let me add them quickly. Adjust their phone style as for the branding guide. So here the sample hero section is ready. Similarly, you can create the next sections and more sections and more and more. Keep designing and keep adding the sections you've aren't in the website. In this way, a beach should be designed in Figma first and all the content and layout experiments should be done here. Before moving on to the development part, you can create the design of this page for mobile and tablet as well, and then proceed with the designing of other pages by creating more frames. You can also collaborate with the team to work together on a website project, although there are some limitations in the free plan. Now, in order to see the preview, simply click on the play button here and you can get a preview of all the web pages that you have designed. Figma is not just a designing tool, it is in fact a complete prototyping tool where you can create a complete workable prototype of the design that links to best a website or an app. Before development, go to the prototype option here and assign link interactions like this. They're not also advanced features like leading a component and adjusting the visuals by assigning constraints. And lots more advanced stuff that is useful in website and app UI designing. If you have scope to learn more, feel free to explore more about Figma and prototyping. There are a few main advantages of gaining a design first before development. Firstly, you're going share their designs with the client to take feedback or to make changes. Next, it saves the hosting rental for the time consumed in creating this design for the website. Next, you will always have the version history. Like if you redesign the website in future, you will still have the old design saved here in Figma. And if the client asks for variations, you can our genes the page again and again on the website directly instead you can keep a copy of all the variations here, show it to the client and develop the one that is finalized. Next, you can zoom in and zoom out capacitor different pages for design consistency altogether, which is not possible during their development on the website step. Next, you can get a view of all the three versions that is computed mobile and tablet at the same screen, which is again not possible during development. Finally, I want to say that designing a website or a webpage on Figma will save your time because you have to experiment a lot with their designs and you are never sure about the final content and design. Eic does start. So if you jump medically do Elementor and start developing the website, it will be a tedious task to experiment with the look and feel and eventually take up a lot of time. I am repeating myself here. It is very important to design first because you can experiment with designs and observed that responds to each design, but just not possible with direct development. Another thing I want to clear is that you must be wondering that after reading the design and Figma, you have to just download InDesign and upload it on Elementor to create the website. But no, that is not possible. Figma is just a designing tool and you will be only able to export the image. And to develop the website, you have to follow the same steps again in Elementor and create the webpages to complete the website. However, once you develop a webpage on Elementor, that design can be saved and used. You can export the sections or the complete page to use on some other websites created with Elementor. We will learn more about this later in the course. So we are now ready with the website design. Always start with the wireframe, that is the block design and then complete all the visual elements before moving to the final state of development using Elementor. I hope you must have enjoyed this process and I will see you in the next video.
18. Fundamentals Of Domain Name: All right, so finally, we are here. We have learned all the basics and fundamental concepts. And we have also learned the first two steps that is discovered and design. Now it's time to start. The final step, that is development. And the first thing we're going to see is the domain name fundamentals. Then you are now familiar with voters a domain name, let me repeat it. A domain name is the unique web address for a website on the Internet, like google.com is the address of google, and Facebook.com is the address of Facebook. These web addresses are unique. It means if one's a web address is taken, you will not get it. Keep in mind, once a domain name is registered, you will not be able to get it unless it is being offered by a reseller. Yes, domain name reselling has also gained popularity, wherein people by popular domain names in advance and then sell them at a higher price based on the premium newness of the domain name. So if you don't want to end up paying a huge amount of money for a domain name. I will recommend you to register a domain name at the very earliest. That is the first fundamental concept of a domain name. That is, act very fast. Next, we have to discuss some depths to select the right domain name for the website. Let us start with it. Names have power. This is as true for a website as for anything else. It is important to choose a domain name that works for the business. It often creates an impression for the website. You can also include some keyword or just a niche word used in your industry to show relevance to the visitors. And most importantly, a domain name represents your brand. So if you already have a brand or creating one, choosing the right domain name is very essential. You can always start the process of selection by brainstorming. Because who else apart from you knows, urine, Frank, better? Think it from the customer point of view. Next, you can get some ideas and inspiration from business and domain name generators like brand bucket or domain. We'll come up with a raw list and answer the following questions. Do you feel good about the name? Do you like it? Are you confident when you say It? Does it feel good when you write it down or when you read it? Is it brand double? Is it unique, easy to remember and meaningful? Is it easy to read and spell? Does it pass the Google Fest? Go on Google. The name. Ideally, there should not be any other organization to pop up. If there are, you at least want to make sure they're not in the same industry or even in a closely related industry. We never want to get into the legal issues. Next, you're going to experiment with the new TLEs. Tld stands for top-level domain. It is basically the extension in the domain names like.com dot n dot, dot IO, dot store dot online. If required, you can go for country-specific TLD is like dot us, dot ibm dot FR to target a certain geographic area. Earlier, people used to prefer.com as it is the easiest to remember and relate to a website. But now it is common to find other TLEs in the domain name. It is up to you and definitely you can give the first tried to.com only. But if it is unavailable, you can think about the other options. And sometimes using a DLD makes the domain name more relevant to the business like I have used dot Academy for my website. It clearly represents that I am providing some sort of training on my website while making the selection of domain name. Make sure it is relevant to the business and brand. Make sure it is short and clear, creative, and easy to remember, easy to read and pronounce. Also make sure it is easy to type. Your visitors should be able to type your domain name without a problem. If you have to explain the spelling more than once to a visitor, it should be understood that it is complicated and you should not take any complicated domain name. It may lead to potential visitors to mistake your domain and end up on a different website. Also, avoid hyphens and numbers. Once you have finalized with the domain name, do not delay even as single second and registering it. Come on, heck, very fast. One more concept to understand is that of a sub-domain. So what is a sub-domain? A sub-domain is a part of the domain name that comes before the main domain name and domain extension. To understand this, let us understand the structure of a URL. A URL contains two parts that are protocol and the domain name. A protocol is a set of guidelines that a browser follows to send a request to the server, like HTTPS or HTTPS colon slash slash www, like this. Whereas a domain name consists of two parts. The TLD, that is top-level domain like.com gotten angry acidity. That is second-level domain like Facebook, Google or Rahula Rohde is sub-domain contains a second name before the SLD. For example, if Facebook launches a course, it can have a sub-domain, lake cores dot facebook.com, and this will be a sub-domain. A sub-domain is commonly used to logically separate website into sections, and every section is a separate website identity. You can use a sub-domain to launch a career site. If forum site for customer support, you may use subdomains to create blocks of different teams to all these sub-domain websites are unique and indexed separately on Google. And you have to install WordPress separately because these subdomains are unique identity. And in this way, you can use a single primary domain to create n number of subdomains to create different websites. So that's it to learn in this lesson, and we will learn how to register a domain name in the next video. See you there.
19. Steps To Buy A Domain Name: Let us now see the step-by-step process to buy a domain name. There are so many domain registrars available and you can proceed with registering the domain with any registrar of your choice. However, some key factors to consider while selecting a domain registrar could be, number one, the repetition of the domain that just rough. Number 2, the ease of purchase process. Number 3, the dashboard interface number for the TLD availability. And number 5 is pricing. I have kept surprising as the last factor because normally the pricing difference is never too much between the different domain registrars. And although there is nothing much to compare between the different domain registrars, I personally recommend you to purchase a domain either from Google domains. Good idea, named cheap. I personally prefer Google domains to purchase domains for myself and my Klein's. The reasons to prefer Google domains are the ease of use, clean navigation menu, the reputation of the Registrar, and fixed pricing model. Another advantage is that Google domains provide free privacy protection, whereas GoDaddy provides it as an add-on and charges a small fee for it. Also, I can integrate the domain name easily with other Google services like the G Suite. In fact, the only significant difference between Google domains, GoDaddy and Name Cheap is the fixed pricing model. Godaddy and named cheap offer discount deals on the first purchase of domain. But the renewal charges are somewhat higher. On the other hand, Google domains charge a fixed price for the first purchase and also for the renewables are hit. So it is up to you to decide whether you want a first purchase discount on GoDaddy or name cheap, and then pay a slightly higher fee on renewal years. Or you want to pay a fixed price Gately if you're registering the domain for one year, and if you plug two, registered the domain name for say, five years or 10 years, please compare the price difference before taking the final decision. There is one more difference. If you want to buy a premium domain name that is usually available at a premium price, then you must prefer GoDaddy because good ideas to largest collection of premium domain names. Some domain names which are Magnus sold out, are also packed and available for purchase from resellers. So if you have some preferred domain name which is being marked as sold, I recommend you to enter the domain and URL and do visit the site, wants to verify the availability of that domain name. Also, if you want to buy a domain at more economical prices, then you can also explore hosting there. Some domains with extensions like dot tech or dot XYZ or dot site out of level under rupees 100 or just one to $2 for a year at hosting it. So if you wish to get a domain name for your practice website, you can definitely buy one from hosting it. If you're buying this domain for just a single year, it's fine. But if you wish to renew the domain name, then do check the renewal pricing before purchase as there is a good play in it. Now, let us see the steps to buy a new domain name. Head onto Google domains, or good idea named cheap by making a Google search. Let me take you to go Ready. Here on GoDaddy, simply enter their desired name that you wish to purchase as your domain name. To check the availability. After clicking on search, you will get a list of domain names available in a variety of extensions like.com dot n, dot, dot, dot, dot, IU and mode. These extensions are called as TLBs. If the preferred.com is not available, you can choose from a variety of extensions. Feel free to explore and select a creative extension as it now works. Remember that three golden rules to select the right domain name for your website. Number one, try to choose the most relevant name that represents your business, brand, product, and service number to try to keep it as short as possible. Number 3, try to select a domain name that is very easy to remember. Once you have found a domain name of your choice, simply add the domain name to cart and proceed to checkout. The remaining process is as simple as placing an order on Amazon. You may be required to login or create a new account on GoDaddy. Simply enter the login credentials and you will be offered some extra services along with your domain name, which had basically the upsell services. You can happily skip them and proceed to make the payment. Once the payment is made, you will be able to access your domain name under the products lists. Congratulations, you have successfully registered a new domain name for your website. You can follow the same steps with Google domains name cheap and hosting it, the processes almost the same. So if the next video, I will tell you how to get a free domain name for the practice website. See you there.
20. How To Get A Free Domain Name For Practice Website: You can register a domain name easily using any domain registrar. And you can even explore a bit to find some very cheap domains like dot XYZ available on hosting it. It is very economical around rupees 100 or went to $2 for a year. But what if you want a completely free domain name? Yes, it is possible to buy a free domain name, but 50 LDs, like TK dot, dot, dot c, f, r dot d q. And it is usually free for a period of 12 months. You can register this free of cost domain name from the registrar called as free nlm. Frenum. Is that a discharge for domain names of the tiny island of Tokyo allow a remote and very sparsely populated country of around 1500 people in the South Pacific. It gives Domain Name Survey for free and because of that, it has gained popularity. In fact, dot t k domains are the fifth most registered domain extension in the world. And you can get one for your practice website. Although it is not compulsory to register for this free domain name because you can get a free sub-domain to create the practice website. A sub-domain is a part of the domain name that comes before the main domain name and domain extension. You can easily get a free sub-domain with the free hosting plan that we will be discussing in the next lesson. That is a far more reliable option for your practice website as it has very low chances of redirecting a user to a spam site. Nevertheless, it is up to you to register the free domain name with dot TK or uses sub-domain or buy some cheap domain name from posting it. What matters the most is that you take up one and start with the practice website. So in the next lesson, we're going to learn about the web server and hosting plans. See you there.
21. Fundamentals Of Web Server: Let us start this lesson with the fundamentals. So what does a web server and a hosting plan is server is a computer that connects other web users to your website from anywhere in the world. As the name implies, web hosting service providers have the servers, connectivity and associated services to host a website. Many hosting provider allocates space on a web server for an upside to store its files. The AD hosting your website. Web hosting makes to fight off a website like golden images available for viewing online. Every website you have ever visited is hosted on some server. The amount of space allocated on a server to a website depends on the type of hosting. The main types of hosting, shared hosting, dedicated hosting, VPS, reseller, hang, cloud hosting. They are differentiated by the kind of technology used for the server, the level of management provider, and the additional services on offer. Out of there different types of servers available. We are interested only in the shared hosting plan and the cloud hosting plan. Shared hosting is to paper for staying with a single web server is divided between n number of lines. Since a web server is very powerful in configuration, in basic website will only use a very tiny part of the cellular. So in order to utilize the web server completely and making the plants economical for buyers to host their website. Hosting companies provide shared hosting plans. The shared hosting plans simply shared the server between n number of users. All the users are allocated a specific configuration to your delays. Some companies optimize the shared hosting plans for WordPress. That is called last WordPress hosting. But keep in mind that WordPress hosting is not equivalent to Managed WordPress hosting. These are different services. Wordpress hosting is economical, but managed WordPress hosting offered some extra features, and hence, that is a bit on the costly site. So whenever you wish to purchase a shared hosting plan, always look out for the regular shared hosting or a WordPress hosting. If we see the advantages of a shared hosting plan, then number one, you have to pay less in order to get the hosting for your website. Number 2, some companies offered you great configuration even in shared hosting plan. And number three, you get access to the root files and easily manager website as per your requirement. However, there are some disadvantages to number one, shared hosting servers are often slow and it increases your website loading time. Number 2, data restrictions on using the resources and often your website is down after the resources are exhausted. Changing, odd.
22. Steps To Buy A Hosting Plan: Choosing the right hosting plan takes up a bit of study and the search. It is verde to spend time looking for the most reliable hosting plan for your website. And why not? Because a website is your asset, HER valuable asset that is going to stay for years to come. So it is very important to build this asset on a ground that is free from obstructions and dangers of issues like crashing, hacking, unreachable, and slow servers. I would like to ask you, how did you feel when you try to open some website AND gate gives you an edit saying that the website is not reachable do to annex reason. It annoys you obviously, and it forms a very bad impression in your mind. You may even created distrust for that website. Is it right or not? Tell me honestly. Now the same thing happens with every internet user. So in the process to create a beautiful website, it is very important to select a trusted, reliable, and solid hosting plan to place your website on the web. Since selecting the right Hosting Plan is an extremely crucial step, I will strongly recommend you to research totally before buying the plan. And if you want my opinion, based on my experience, I will recommend you to invest in A20 string if you're going with shared hosting plan and Cloud ways, if you want to go with cloud hosting, the services offered by these two companies are very good and they provide very good value for money. Now let me show you the process to purchase a hosting plan for the website. First, let's go to A2 hosting by making a Google search. Here, select the plan you wish to purchase and click on Proceed. You will be asked to enter your domain name if you have one, or you can use a sub-domain. Here in the A2 hosting setup, I will recommend you to use a sub-domain, because if you're going with some domain name, then you will be required to renew it compulsorily because that will be the root domain for the setup. So either you use some primary domain name that you are going to use for a long period of time while setting up the hosting account or else the best way is to use the sub-domain provided by A2 hosting here. Also keep in mind that you select the most appropriate server location based on the nearest location of your target audience. Rest of the process is as easy as making an online purchase. You can happily skip the ad on some level for up-selling, you will be asked to create an account. Go ahead with the same, make the payment, and that's it. You have successfully purchased a hosting plan for your website. Congratulations. Next is Cloud ways. Let us make a Google search for it. Here. Start with greening and account as usual, and I will try to share some coupon code with you so that you can get $30 predict that is almost three months free on Cloud ways. Do check the section below this video. Once the account is created, after all the verification process, you need to select the server and configuration. Here you have choices to select from digital ocean, Leinhardt, vulture, Google, and Amazon. All these servers are excellent and performance and you can select one based on the pricing, server location and your requirement. If you are just getting started, I even recommend using digital ocean over line art and culture cancer during the luteal phase. After selecting the server, you need to simply install the application, that is WordPress. In our case. That's it. There are some outstanding features of labor law on Cloud ways. Feel free to explore them. It is a very powerful hosting. In fact, a very powerful cloud hosting. Referring Cloud ways over any other host is important because of the ease of management, support, cloud performance, and scalability options like you can upgrade the server in just a few clicks. Also, the support is awesome at Cloud ways. Plus, you get a flexible pricing plan where you pay for resources as you use. If you want to make a comparison between the prizing, make sure you consider the renewal price in A2 hosting and compare it with Cloud ways to come at a better decision. Because usually in different host, you get a very heavy discount in the initial first purchase, but the renin prices are on the higher side. So we need to consider the renewal price because changing the host is not at all an easy task. All right, Lastly, if you wish to get a very economical hosting for smaller projects or for your practice website, then you can even prefer hosting that. The performance act hosting that is distinct and you will find the pricing to be extremely economical. The process of creating the account is almost the same and you will find that regular options, like the other web host, you will be able to easily install WordPress and SSL with just a few clicks. So if you want to save a lot of money and hosting by compromising with some of the features, refer hosting there. But keep in mind that the economic and products always come with limitations. Like if you compare a2 or staying with hosting, you will find that there is no clarity in the configuration and usage restrictions on hosting it. Lake, for example, you get free SSL and this hosting plan. But on how many websites that is not mentioned. So chances are that you may get free SSL, but only for one website, and you might have to pay extra for getting more SSL. It is the same with other economical hosting plans like GoDaddy and named cheap. You will get the plants at a super economical price, but there may be restrictions and lack of clarity. Also, the uptime reduces with the economical ones. So I will recommend you to make a list of such questions and clear with the customer support or the sales team before making the purchase. And one more thing, most of the hosting providers provide money-back guarantee if you're not satisfied with the services. Ec2 hosting in fact, offers a lifetime money-back guarantee that is quite unique in itself, but most other companies have at least 30 days to claim refund. So if you're not satisfied with the hosting plan, immediately claimed that a fine, and move on to the better host. Because of the need to build up our asset. We need to build a website on the strong ground only. Or else we may end up losing the business and customers. That's it in this lesson, and we will continue with the free hosting options in the next video.
23. How To Get A Free Hosting Plan For Practice Website: We all like the free things. So if I tell you that you can get a free hosting plan, you will get very happy. But before telling you about the free hosting plans, I want to alert you that never, ever use a free hosting plan for hosting a commercial or a client website, as these services are suitable only for practice websites and not for the professional ones. So if you wish to get a hosting plan for free without spending any money, then I have a few good options for you. There are some hosting companies that provide hosting plans for 0 charges. But again, I'm repeating that you can use such hosting plans only for the practice website as they're quite unreliable in service. And you may face many technical issues and downtime while hosting website on such three web servers. So in case you have to publish your website on a free server, I have shortlisted a few decent companies that will provide you free hosting plan. The first one recommended is extend hosting. And the other ones to give it a try is acute web hosting, bite host, goofy host, and infinity free hosting. Now, I expect that you will compare the features and benefits of all these men shared hosting companies and select the one which turns out to be providing the best value for your time. You may find lot many restrictions on usage limits and you may not even get a free SSL. But that will be fine as we are just creating this website for practice. Select any one of the above hosting plans to proceed. And the steps to set up this free hosting account is also the same. You will be asked to create an account first, submit your credentials, select a sub-domain, that's it. You're free web hosting account is ready. Now simply use a free sub-domain provided to you to enjoy the practice website or else you can use the custom domain or a free domain that you purchased from 39. To use a custom domain, you will need to update the DNS settings and we will learn about it in the next video. After that, you're going to install WordPress and create a website for free. And don't forget, you have to submit the assignment as well. You have to create the practice website using these three options and share the link with me so that I can share my feedback for your work. All right, so we will continue in the next video.
24. Connecting Domain & Hosting via DNS Setting: After you have purchased the hosting plan, you have to make very important setting to proceed. You have to update the IP address or the name servers of the web server to the domain name. Let us first understand why it is important. Whenever a user types the URL in the address bar of a web browser, browser knocks the door of the domain, not knock. Domain provides the IP address of the web server where the data of the website is stored. The browser Gonstead fetches the data of the website and presents it to the user. Now, if their domain name does not know the IP address of the web server where the data of the website is saved, then a web browser will not be able to present the web content to the user, and the result will be an error page. The IP address or name server. Often web servers can be assigned to your domain name via the DNS settings. You have to simply locate the IP address or the name server details provided by the hosting account. This is usually present in your service details or even in the welcome e-mail sync by the hosting company, simply copy the details and head on to the domain account. So let me login to the GoDaddy account and show you the process. After logging in, go to the product section where the domain is listed and tried to find a DNS settings option. Look for the field called last name servers. Simply paste the details here and update. Keep one thing in mind that some hosting companies provide name server details while some provide IP address. So if you want to update the name servers, the process will be like this. And if you want to update the IP address, then look for the DNS settings and update the IP address in the a record field like this. Now simply save the settings and you have successfully connected your domain name figure web host. It may take up to a few minutes or some several hours to update the DNS settings worldwide. You can check the same by visiting Portsmouth DNS.net or simply make a Google search for DNS propagation check. You will get the links. You can follow the same process to update name servers or IP address in Google, domains are named cheap or from whatever registrar you have registered the domain name. It works in the same way. All right, In the next lesson, we will login to the hosting account and learn how to use the cPanel. See you there.
25. CPanel: When you login to the hosting plan, you have to access the control panel in order to manage the website files and other important settings. There are different control panels, have labeling, different hosting plans, but the most commonly used control panel is the C panel. So what is a cPanel? Then? A C panel is a popular control panel dashboard that helps you manage the web hosting server using a graphical and human friendly interface. Using cPanel means you don't need that technical knowledge to manage the web server. Let us now see how a cPanel works. Well, this is the C terminal inside the E2 hosting account. It provides you so many options, but we have to focus only on marriage domains, managed subdomains, install WordPress, manage the website files, manage backups, managed PS3 versions, and manage email accounts. Feel free to explore the remaining options as well. Now, on the right, you will find the usage data and statistics as we are provided with the limited resource on any hosting plan. So I will always recommend you to keep an eye on the usage statistics to stay aware of your consumption of the sources. Let us start with domain management. You might have already provided a domain name when setting up the hosting plan. But if you used the sub-domain here, you can add that domain names from this option. When you have to add more websites to the hosting account, you have to list the domain under add-on domains. Simply click on Create a new add-on domain and type in the domain name here. Click on Save. It may take a few hours to install SSL on this add-on domain automatically. And you will have to wait for around two to four hours till the process is complete. Then only you will be able to install WordPress on this add-on domain within SSL. Next, if you wish to add subdomains to your existing add-on domain, you can click on subdomains and click on Create a new sub-domain, select the primary domain name and provide a sub-domain details that you wish to have and click Create. It will also take a few hours to install SSL and one stern, you can proceed to install WordPress. You will have to make the WordPress installation from the C panel itself by using the software Oculus App Installer, it is very easy. We will see the complete process to install WordPress in the next lesson. Next, after installing WordPress, if you have to access the root directory and files of the website, you can access it by using the File Manager option in cPanel. Just keep in mind that never experiment with the File Manager option. Because if you mistakenly delete some of the important files, then your website may crash or you may lose the Access to login to the website. Please be very careful in using this option. Next, you can take backup of the website using the back-office OUT option here. Next, you can also manage the PHP version of the server. You can update it to the latest stable version and it is used to improve the speed and functioning of the website. Make sure you always updated to the most stable and latest version. Next is to manage the e-mail accounts. You have the option to create and manage email accounts for the domain name that is also called as a webmail. It is like your business e-mail ID and it is a must to have nowadays, based on the hosting gland features, you will be able to create n number of webmail accounts to create a new VM mail, use this e-mail accounts option here in cPanel. Choose the domain and create a username and password. It is available to use instantly after creation. You can access this web mail directly from here or by using some email client app like Microsoft Mail or Apple Mail, or some third party app like blue mail, on both computer and mobile phone. There are so many other features and options of label with cPanel, but we have learned the ones that are useful for us. Let us now proceed to install WordPress in the next video.
26. Installing WordPress: Once you have added the add-on domain or sub-domain, and a few hours have passed, you can proceed to install WordPress on the domain. Let us select these of calculus App installer option. Here, select WordPress. You will be provided with an option to install WordPress. If you scroll down, you will find the list of all the WordPress installations that you have done on the web host. Also, this icon is the master or admin login. This is used in case you forget the login ID or password to access the website admin area. Also, you can click on the pencil icon to delete a WordPress installation. I want you to be very careful as it takes months and years to build up upside. And the same can be deleted in just a few seconds by clicking on this cancel icon. Alright, be very careful. Now let us move ahead and click on Install. You are now on the installation page. We will select the protocol first. A protocol is the starting name of a URL, and it is guided by the dot SCSS file settings. There are four options available out of which we have to ignore to and select one of our choice out of the remaining two options, we will ignore the HTTP versions as they are non-security protocols without SSL. You must have seen this morning of non secured connection in many websites, users tend to ignore or have a bad impression for such websites. Even it is harmful for your website rankings in search engine results page. And since SSL is freely available to us, we must ensure that we use it. Violins donation, always install and HTTPS version as it is secure and it is city presented by a green lock icon in the browser address bar. Selecting www in your URL is optional. Some people ignored it, while some people keep it, it is totally up to you. It will not create any difference in the functioning of your website. It is just for the sake of presentation of you. Might've a high personally prefer URL without www. Next, select the domain name from the list of domains. Have a label on your hosting account. Simply gift aside a title and a subtitle. I don't think much, do not bother. It can be easily changed afterwards as well. Next, assign a username that you remember and a password that nobody else apart from you can remember or guess, because it is the key of your asset. If it is hacked by someone easily and you will be in trouble. The way your e-mail ID and skip the advanced settings. Simply click on install now and wait for a few minutes. Take a deep breath. Relax. Okay, so now WordPress is installed on your domain, and here is the login URL. You can bookmark this URL as it can be used to login to the admin area of your website. Well, this is not the only way we have another way to login to the admin area of your website. Generally, for all Wordpress sites, the login URL is www dot your domain.com slash WP dash admin, and hit Enter. Here, you will be asked for the login credentials. You can either use your email id or username and enter the password, verify the capture, and proceed with login. They'll weld when you are at the WordPress admin area, and I am very happy to have you here. Let us have a look at the website from the visitors view and come back to the dashboard. So this is the place where you can easily edit your website and control how it looks, what it shows, and generate a business of millions and billions by building this website valuable. I hope you are enjoying this exciting journey and we will continue in the next video.
27. Common WordPress Settings: I always prefer starting up the website creation process with the cleaning activity. With cleaning, I mean to say that, let us first remove all the unnecessary plugins and teams that are pre-installed in our WordPress setup. Oh, what are these themes and plug-ins? Did I forget to tell you? No, I remember that. I have to explain these concepts and we will be discussing the same a bit ahead in this course. For the sake of this lesson, let us hover over plugins option and click on Install Plugins. You will find a list of pre-installed plug-ins. Simply select the plugins by clicking like this. And over here at the top and also at the bottom, click on the drop-down and select, deactivate and click apply. In WordPress whenever you have to install or uninstall a plugin, you have to activate or deactivate the plugin. First. You can do this process for each plugin individually, or you can select all the plugins and perform a bulk action. By the way, bulk actions really save a lot of time. So the unwanted plugins have been deactivated and it's now time to uninstall them. Follow the same process. Select the plugins I'm selecting all together this time. Click on Bulk Actions drop-down and select Delete option. Click on Apply. Gone. All the unwanted plugins are now deleted and our Plugin Directory is totally clean. Next, let us follow the same process for teams, but there is a twist here. It is not possible to delete all the teams present in our library. We require at least one team to be active. So let us keep the active team and remove the unwanted ones from our account. This we will have to do up one team at a time hall that above the theme image and click on Manage on the bottom right, locate this delete option, click on this, and your team would be deleted. Also, please note that an active team could not be deleted like this. If you wish to delete and active team first install a different theme activated, and then you can delete that team. Same process that we discussed right now. Come on, go ahead and delete all these unwanted teams one by one. Let us also clean the pre-existing sample pages. Hover over the pages menu and click on all pages, select all these preexisting pages and follow the same process to delete them. Now do the same with pre-existing, post. Another thing, click on the Dashboard home option and you will find a screen options. But then here at the top right, this is sometimes not visible to a user, but you may find some settings here as well. And in fact, some important settings. So to manage the dashboard home, you can select what information boxes you want to see and what to height. In this way, you can clean up the dashboard home as well. Also feel free to explore the screen options for other menu options in WordPress. Hooray, our website is now pretty neat and clean. Now let us do some basic WordPress settings, hovered over the settings menu and select Burma lengths. By default, the option which is selected is not required to us. So out of the so many options of labor, we have to select the option of post name and click Save. By the way, what is a permalink? A permalink is basically the URL of the web pages. And with this setting updated, we can now make the URL's look more relevant and easy to understand instead of the previous complicated structure. It is a very important setting and in case you miss it at the beginning, then also no issues. You can also do it later on, but never forget to update this setting ever. I always prefer to start my Wordpress settings for this only. Next common setting is updating the site title and tagline in case you have not mentioned it at the time of installing WordPress, or if you wish to change it. The title and tagline is usually visible over here on the tab. Select the general option under settings and update the information. You also need to update the time to show the correct time. Do the visitors. If you wish to change the e-mail address, you can update it here in the admin email address. You will receive an verification e-mail to confirm the changes for email address. Once done, click on save changes here at the bottom to update the settings. Next, you can customize the visual display of the WordPress dashboard by hovering over the users option and selecting the profile option. Here you can change the colors, change the display and author name assigned a profile picture, and update the website login password. Once done, click on update profile to save. Next, you can go to the reading option here and made sure that discourage search engines option is unchecked. It is important to uncheck this because it can block the search engines from crawling the website and your website will not be available on Google search. I'm finally, if you've won't be shared access of your website for editing purpose, either with your co-founder, business partner, or any team member, you must create a new user by going to add new user here, you can assign the username, email address, name, second, the login password, and assign a suitable role and click on add new user to share the access to edit the website. There are 700 rule options available, like an administrative will have access to all the features of the website. An editor can publish and manage post of multiple authors. And author can publish and manage his own post. A contributor can write the post but won't be able to publish it. And a subscriber can only read the content. Assigning the correct rules is important because a website is your asset and you should never take any risk in terms of security. Never ever share the super admin login details with uneven. All right, one last thing here is managing the updates. You will receive updates on WordPress themes and plug-ins on a regular basis. Make sure you update all of them for safety and performance of the website. Although these are the common settings that we update at the beginning, I will recommend you to explore each and every option available here in the WordPress admin area to get familiar with the whole lot of options, some of which will be used in the upcoming steps. That's it. We're done with the most common settings for WordPress and we're good to go ahead. We will continue in the next video.
28. WordPress Themes: It is now time to start customizing the website. You will be creating a site either for yourself or your client. We will start with installing the theme of our choice. Let us hover over the appearance menu and click on Theme option. Currently that 2021 team is installed and it is the default WordPress theme. By the way, what does a WordPress theme? A WordPress team is a tool to change the layout and design of the website. Themes customize the appearance of the website, including the layout, typography, color, and other design elements. A WordPress theme acts like an architectural structure for your website. It provides you the functionality to edit different parts of a webpage, lake header, main content or body area, footer, widgets, menu locations, and more. Choosing the right WordPress theme is very important because it lays the foundation of the website design. So what happens when you change a team after creating n number of pages and publishing content? Well, changing the WordPress team will not change the content. Pages, users or other information stored in the database, but the team changes how all that information is displayed to the website visitors. If we make changes in the team after putting content, then chances are that the design will be altered as for the team, and v may end up making n number of revisions, rearranging the design of the website. So be very sure, does start in selecting the right team for the website. The team you select must load fast with optimized courts. Have powerful design options like managing the layouts, header and footer styling options support typography and colors for different elements. Seo optimized and responsive to work well with all the devices. There are again, thousands of free and paid themes to choose from. But based on my experience, I have shortlisted two to three themes that I recommend you to use on your business website, personal website, e-commerce website, or in fact, any type of website that you wish to make. First one is Astra, the other one is ocean WP, and the last one is Hello team. Astra and ocean WP are premium themes. It means they have a free version and they also have the paid add-ons to enhance the functionality of the team. On the other hand, the Halo team is free, but it is a plain vanilla team and it is meant to be used with the Pro version of Elementor to make sense. Now, obviously, you can start with the free version of the teams. I will recommend you to use Astra over ocean WP as it is the most lightweight WordPress theme. And it works absolutely fine with all the popular page builders. So I will go ahead and click on the Add New button. Now in the search bar, I will type Astra. Here are the search results. Carefully select the Astra Theme and click on Install. So installation is in-progress, and here it is done. As I had told you earlier, it is always a two-step process. So after the theme is installed, click on activate to make Astra, our working theme on this website. Make sure you enable auto updates for the theme as there are regular updates provided by the creator and V must update it for performance and safety. In case there is some pending update, please check the updates option under dashboard. Since you are just starting up, I will recommend you to install Ocean WP as well to test the differences between the two teams. And if you wish to buy some verb proceeds from Envato market or Envato Elements. Make sure it is compatible with Elementor. Page builder we will be using to design our webpages. One more concept I would like to tell you, whenever we create a professional website, it is always recommended to use a child theme. A child team is an extension of your primary theme, and it is used for some strategic reasons. It is a theme that inherits the functionality and styling of another team called as the parent Team. Channel teams have recommended to modify the existing teams while still maintaining their design and code. Let us suppose you have put some custom codes in your theme files and there is an update. When you install the update, your custom codes would be reset and you have to insert them again. So to stay away from such an issue, we always recommend using a child team. Creating a child theme is very easy. Make a Google search for Astra team and click on this link by Astra. Here, give a name to this child team and click on Advanced option. You can also upload a thumbnail image to represent a theme and click on Download. Now you can upload this child team in WordPress and use it along with the parent as sub-theme by installing and activating. That's it. Your child team is activated and remember, do not delete the parent theme. It is mandatory to have the parenting installed in order to make the child team work for your website. That was all about the WordPress themes. We will continue in the next lesson and learn about the WordPress plugins. See you there.
29. WordPress Plugins: What if I ask you to use a smart phone without any mobile apps? The functionality of a smartphone is enhanced with dedicated apps like an instant messaging, social media app, music player app, email or video recording app, and lots more. Without such special labs, a smartphone is of no special use. Similarly, in order to improve the functionality and features of a website, they use plugins. Overall, plug inside the main source of special functionality for our WordPress website. And there is a huge collection of plug-ins for every task on WordPress. Like you have page builder plug-ins to design a web page using the drag-and-drop technique. You have header and footer customization plugins. You have SEO plugins, image optimization plugins, cache management plug-ins and lots, lots and lots more plug-ins for every special function. You can also make a Google search for the most recommended plug-ins to have on a WordPress site and even compare the different plugins before installing them. Now, although there are so many plugins available, but we must use them smartly, it is recommended to use the least number of plugins to keep the website light, clean, fast and bug-free. And always ensure you install the plugins from authorized developers to stay safe from unwanted bugs and errors. At the time of common WordPress settings, we had removed all the preinstalled plugins, and now it is time to discuss the most important plug-ins that we are going to use in our website creation process. Let us have a look at them one by one. The first and the most important plugin that we have to use is a Page Builder plugin. A page builder is a plugin that helps us to design a webpage without the need of codes. It imparts drag and drop functionality to the website editing from the front-end. This helps us to focus entirely on the content and design of the website without having to worry about the coding. It helps non coders like you and me create a beautiful website and that to ingest no time. Let us get a bit clarity on the part of quotes. Using a page builder does not mean that your website has no quotes at all. It does have quotes, but by using page builders, via not required to write those codes, we have to just design the web pages and page builder will automatically create codes for us. In the back-end. These peace builders have revolutionized web development in the past few years. There are so many Page Builder plug-ins now available for WordPress like Elementor, Beaver Builder, Devi, oxygen builder, breezy, Visual Composer. But they will be using the best one out of them. As per my experience, Elementor tons up to be the most effective Page Builder plugin for WordPress. Right now. It is the most advanced page builder with outstanding features and functionalities. The courts in the back-end are also clean and help in faster loading of the website. And there are a lot of templates available for Elementor to speed up the website creation process. Let us see the process to install a plugin hover over the plugins menu and click on Add plug-in option. Now type element or in the search bar, and you will get that is also down here. Select the official Elementor plug-in and click on Install. While installing a new plugin, make sure you install the official plugin as there will be so many different plugins available with similar names and extensions. Also, installing a plugin and WordPress is a two-step process. Now we have install elementor and weekend activate the plugin by clicking on this button. But wheat, I have one more plugin to install. This is a premium plugin and I have taken subscription of this for one year. It is Elementor Pro, and you will be able to download it from the Elementor website once you have purchased the subscription. Well, I am using Elementor Pro because it enhances the functionality and features of the free element or to a whole lot extinct. You get lot many features like the pop-up builder, the team builder, around 13 more additional premium wizards to use when designing the web pages. It is a very powerful plugin. In fact, a very powerful paid subscription of the free element of, and I highly recommend you to use it if you want to create professional websites for yourself or your clients. Now since I have downloaded the Elementor plug-in from the element or website and I have to upload it to my WordPress. I will click on Add New, and click on upload. Once it is uploaded and installed, we can now activate both the plugins together. Hover over plugins menu, click on Install plug-ins. Here is the list of installed plugins. All right, So we're just having two plug-ins on this side. Let me show you another website that has more plug-ins to understand this process better. The plugins which are installed but not yet activated, do not have this overlay color and blue border. Whereas the plugins that have been installed and activated will have the overlay and blue border. We need to select the plug-ins that are installed but not get activated. So here we have made the selection and now click on Bulk Actions, drop-down, select the Activate option, and click on Apply. That's it. We have arcuated multiple plug-ins and it saved our time. I'd recommend you to start the development process with just the essential plugins and always make sure you use the least number of plugins on the website. We will be installing the other ligands when we need them one-by-one in our website creation journey. But I hope you are clear with the plug-in installation process. Just like you receive updates for mobile lab. Similarly, you will be receiving updates for plug-ins as well. Wordpress plugin side now auto updated, but keep checking if any are betas mending by going to the Updates option under dashboard. If you are using some premium plugins, make sure the licenses active to receive the updates. And one more thing, let me deactivate the Elementor Pro plugin for now because it is a paid one. And I want you to get started with the basics first, that is using the free version of Elementor. That is it. For this lesson, we will continue in the next video.
30. Creating The First Webpage: Now, let us start creating the website from scratch and let us create the first webpage, hovered over the pages option and click on Add New Page. You can get rid of this popup by clicking anywhere in the open space. One important thing I would like to tell you is start the process of adding pages and post is almost the same. So if you want to create a blog post, you will have to simply select the Add Post option from here. But the rest of the process will be seen like reading a web page. Now, let us see the settings that we get by creating webpage. Here at the top, you have the option to provide title to the page like Home About Us products, services, conductors, privacy policy. This title is important for users to recognize the information of label on this webpage. Since we're just getting started with a website, let us create the most important webpage or the default page that we call as the homepage in the title, let me type in home. Next. On the right, you will find several settings and options. Some settings and options are WordPress default, and a few settings are added based on the team or some plugins that we're using on the website. And let me tell you that we are using as thrity theme in this course. If I minimize all the categories, then you will get a clear look of all the options that are available. So we can manage the status and visibility here. But mulling featured emerge discussion page attributes and a team settings. For this page. Let us see the options one-by-one. The status and visibility option allows to hide the page or locked up beach with a password. If you wish to showed you the publishing of a page or a post, you can assign the date and time and the page or post will be automatically published on schedule. Next, under the permalink settings, you can manage the slug of the URL Hall, right? So what is a slug? A slug is usually the title of the page or post that is optimized for the better understanding of the visitor. It is the extension that is pleased after the domain name in the URL. And if you wish to make any changes to the slug, you can edit it here from the permalink settings. Don't get confused with the previous permalink settings that I told you. This permalink sitting over here for this page is to edit the structure of the URL for this specific page only. All right, The next option is to add a featured image. It is very useful for a blog post and acts like a thumbnail image for the post on the archive page, and it is also displayed at the top of the single post page. Next, you can allow or disallow the comments under the discussion option. Next, you can use some layout or template for the page using the page attribute options. Here, you can also assign the parent category to a page that is useful in optimizing the URL structure. It is a very useful feature, commonly used in e-commerce websites to clearly show that category and subcategory in the URLs itself. Lastly, you have the team settings for the page. Here in Astra, you have the options to show or hide the sidebar of the page. It just the content layout, enable or disable the header, page title, featured image and footer for the page or post. The other theme options like transparent header should be a distinct from the customizer. So we can skip it here. Once you are done with the settings, you can click on Publish, and again click on Publish, and that's it, the pages created. If you want to disable this double-check for publishing, you can uncheck this option here. Now to edit this page, we are provided with a default block editor by WordPress. And this is the editing mode to design a page or post. But we will be editing the page using Elementor, which is the world's most advanced page builder. Creating web pages using Elementor is a very exciting task and we will be learning about the basics of using Elementor in the next lesson. See you there.
31. Setting Up Elementor For First Use: Welcome to the first lesson of Elementor, and let us begin the journey of creating awesome webpages and pixel-perfect website without any coding using Elementor, we will start with setting up the element or 4 first US and let us see some common settings. The first thing you have to do with Elementor is to click on the Elementor settings from here and make sure you uncheck that disabled default alerts and phones to enable the colorant phone settings using Elementor. Elementor is complete in itself to manage multiple settings. And so we do not want to use the Theme Colors index Phi. We are enabling the element or default settings. Here. We will be setting up the global values for colors, typography and spacing. And that will be applicable for all the elements and pages on the website. It means we will be setting up the branding guide colors. I'm folds here in Elementor to make the website development process easy and consistent as part of our design. Now, in order to edit the webpage, we will click on edit and come to the Settings option again. Here, click on Edit with Elementor. You will be redirected to this editing screen and the system main interface that we have to understand in order to create an awesome website. So this is the editing interface for Elementor, and I must say it is very easy and user-friendly. You have all the editing options here on the left paid and the editing canvas on the right. There is a button to hide the editing pane, and this opens the preview page. The preview mode, you will not be able to edit the web page as you can only preview it. In order to get back to the editing pane. Click on this arrow again, and you will get the editing options back. Let us start the setup with the options available on the top. By clicking on the hamburger icon, you will get options for Site Settings, team builder, and manage user preferences. We will see them one by one. Let us click on Site Settings first. Here, you have to mention the colors that you have finalized in the branding guide. Click on the primary color here and type the hex code of your color. This is now saved in the color palette. You can also rename the category if required. In the same way, update the secondary text and accent color with the brand colors that we have finalized in the branding guide. Even if you wish to add more colors to the palette, you can add them, renamed them, and also you can delete them. And if you want to remove a color or clear the color, click on this clear option here, it will revert back to empty. Grading. The colored valid is the first and the most important step of using eliminate or because it saves a lot of time by choosing the default colors with just a single click. Now go back to the previous menu by clicking here. Next is to set up the global phones. Here, you're going to assign the default typography settings for all the different types of phones like family heading, secondary heading, XT and XT and phones, assigning the global phone settings saves the style in the font-style palette here. And you will be able to easily assign this style with a single click. Clicking on the pencil icon will open the topography settings. First option is to select the phone family. You will get Google phones to select from this drop-down. Make a selection of the Ford family as per the branding guide. Next option is to select the phone size. You can either scroll that wheel manually or simply enter the value. There are four units of measurement, but we will go with pixels. There is another thing to notice here. If I delete the value in phone size that it is restored to the default value. You must be wondering that if there is no value in the box, it needs it a 0, but it is not like that in element or it will be 0 only if you mentioned 0 here, or else if you keep it empty, it will be the default value. This concept in mind, because it is going to help you a lot in the course. Our head next is the weight. This will make your text look light or bold. Then you can try that transform settings to make the text uppercase, lowercase, or capitalize. Next, you can make your text in italics from the style option. In decoration, you can insert headlines and what lines to the texts and even strikethrough lines that we can also adjust the line height. And let us be saying for the textContent, pay attention to the units of measurement and we have to use the pixels unit for every measurement. I want to ask you one thing here. Do you notice this little screen icon after some settings? Well, this icon represents that you can make custom adjustment in this setting option for different devices. Like if you wish to assign a different value of phone size for mobile phone, you can click on this icon, select Mobile, and assign the different value that will be specifically for the mobile device and the same you can do for a tablet. Here, the website design helps you a lot because we had already finalized with the phone size for every type of device and we don't need to spend time in experimenting with different Values at the development stage. Another thing, if you have to reset that complete typographic settings to default, you can click on this default button here. And once you are done that their Typography settings click on this pencil icon again, and it will highlight. In this way, you can save the global phones like daily. Let us now go back. Now click on typography. Here you can set up the typography for specific texts types like Heading 1, Heading 2, up to heading 6, the paragraph foods and a link folds. These settings are applicable when you place a new text box or Heading box or create a hyperlink in the editing campus. Defining the values here can save time and adjusting the topography again and again. So now you will be able to make use of the global colors and global phones that we just said in the previous menu. And that will save a lot of time in the development stage. By the way, once you are done with the settings, Clicking on the update button here at the bottom to save the changes. It is a good habit to save the work at least every five minutes. The next settings are related to the default button, images and form fields, but we will see to them in the widget lesson first and then later if we require, we can come back here to assign the default values. Below this, we have settings related to the site identity, background, layout, and light box. We will set up the site identity first. You can update the site name and description that is the same as site title and tagline from here as well. Next, you can upload the logo for the website. Make sure you use the right dimensions so that the logo appears impactful in the header. Next, you can upload the fairway can order site icon to display over here on the tab. A fav icon or cytokinin should always be designed in the ratio of what is to one, preferably 52 pixels by 500 pixels. Now, here is the page background setting. You can select from the classic ingredient options and use some colored image or a gradient for the page background. So if you want to create a dark colored website, you can select black colored as the page background. Assigning a page color here will apply the color to all the pages of the website. If you wish to customize the background for some specific page, you will be able to do it from the Settings icon here on the individual page editing. All right, now let us go back and select the layout option. Here you can have a look at the spacing, width and layout. These default settings work the best and there is no need to make any changes here. Just changed. Third, default page layout to Elementor full width as we are not using the theme settings. That's it. Next is the default light box settings. By the way, what is the light box? A light box pop-up is a window overlay that appears on top of a webpage like this. When a light box pop-up appears, the background is offered, dimmed and disabled, meaning that the site visitors cannot interact with the other content on the website. This draws attention to the light box itself. So you will be able to adjust our default settings for the light bulbs from displays, but it is not that important right now. Let us see if the changes we have made, click on Update, and now let us go back. You can skip the Custom CSS. It is not for the non quarters like you and me. And if you know coating, then you can definitely make use of this feature by subscribing to Elementor Pro. I'm finally, you can click on the additional settings option to go to the Elementor plug-in settings in the admin area in a new tab. Here, we have already made the setting at the start of the lesson at dynasty only required setting that we needed to make. And if you're subscribed to Elementor Pro, you can upload the custom phones and custom icons from these options available heat. We will skip that team builder option here, as it is of liberal in Elementor Pro. And we will see to it later in the course. Let us see the user preferences. Here, you will get the option to change the element or display. Currently, we are in the light mode and you can switch to the dark board as well. I know some of you will definitely light the dark mode as compared to the light mode. But let me continue in the light mode only in this course. You can manually adjust the paddle width also like this. And if you want to restore it default, you can enter some 300 pixels on. You can adjust the weight as per your preference. So we're done with the sector of Elementor for first use, and we will continue learning the basics of Elementor in the next lesson. See you there.
32. Basics Of Using Elementor: The editing panel of Elementor is very easy to use. It contains a list of widgets that are categorized into the basic and genital visits. If you're using Elementor Pro, you've engaged additional categories like the Pro and site widgets. We will learn about the usage of all the deserts in the upcoming lessons. But for now, let me tell you how to use the blank canvas in this lesson. First of all, the top row that is the header of the website and the last row that is the full brunt of the website bought. The header and footer cannot be edited or created from this editing Canvas. The settings of Header and Footer can be accessed from the customizer if you're using the team settings on from the element, our team builder, if you're using Elementor blue. So forget about the header and footer while you are on the page. Editing mode. Here only focus on the main content area of the webpage. You can insert a section by clicking on this plus icon and selecting the structure with different number of columns. By default, a section is always inserted with a single column. You can start with a simple structure as it can be customized later on as per your requirement. Here, the blue border line represents a section boundary or a section border, whereas the gray dotted line represents a column. You can add more sections above the section by clicking on the plus icon here or at the bottom. If you want to delete the section, click on there, cancel, I get here. Now to edit the settings of this section, you need to right-click on the dots here and click on Edit section. The editing options for this section will open in the left panel. If you have a look at the top tab, you will find the three types of settings. Number runners layout. Number two, his style, and number three is advanced. All the settings for sections, columns, and in fact, all the visits will have the three types of settings or the three setting tabs, late, Leon style and advanced. Always keep this in mind. Next, if you have to come back to the home screen of the editing panel, click on this grid. Eigen. Know my dad how deep you are into some setting. If you click on this grid eigen, you will come back to the home screen of D editing panel like this. Let us now see what other options I have labeled by, right-clicking on the dots here. Well, you can create a duplicate of this section. Next, you can copy this section and paste it in some other location, up or down anywhere on the page. Next, you can use the paste style option. It is like if you want to copy the settings of one section and apply it to some other section, you can copy and paste the state. It is very handy at times. And if you want to reset a section setting to default, click on Default state. Now, the next option is very important. You can save the section as a template. And we know that we can reuse that templates across different pages and different websites. So simply click on Save template, Give it a name, and click on Save. By the way, this is the element or template library. Here you will find a huge collection of predesigned blocks, pages, and a list of alerts that you might have saved. If you wish to insert a template on this location, you can simply click on Insert, and here it is. The template is inserted. Very easy. If you want to use Elementor blocks and templates, you need to register on element odd ones and create a free account. Then you will be able to insert the free templates. And if you have the Elementor Pro subscription, then you can insert the Pro templates as well. Now, if you wish to export our template, you can click on the three dots and click on Export. That template will be exploited in JSON format and you can upload it on a website by clicking on this Import option and uploading the file. If you want to access that templates, you can click on this folder icon here. Next, again, right-click on the dots and see what else remains here. Okay, The next one is Navigator. And here you can manage the order of sections and columns, just like we manage lyrics and the graphic designing tool. It is also useful in changing the order of sections and you can also rename it by simply double-clicking. Now, the last thing we have to learn about the element or editing panel is this bottom bar. Here, you will find the page setting option and you can change the title, status, and featured image for the blog post. These are the same settings that we did while creating the page. If you click on the stain option here, you will find that you can change the background type for this specific page. It has the same options like is solid colored or an image, or a gradient color. If you wish to assign some peach color, you can select one by going to style and selecting the background type as classical ingredient and select the color. Please note that this peach color is only applicable to this specific page. Next, you can enable the navigator from here as well. Then next is the history option. Here you will find a log of activities and you can easily revert back using the actions and revisions. The actions option will have a list of activities in the current session before the last update. And the revisions option will have autosave copies of some of the older versions as well before updating. Next option is to optimize the website for different devices. It is very important because we definitely want to create a responsive website that works very well on all the devices like computers, mobile phones, and tablets. You can easily select the desktop preview, tablet preview and the mobile preview from here, and optimized their website accordingly. Next, the IA gun is used to see the preview of the page and the update button is used to save and publish the web page. All the changes that you make on the website. It is published immediately once you click on this Update button. Also, I will suggest you to make a habit to save your work every five minutes. Near the update button, you will find an arrow with some more options. Instead of publishing the page did globally, you can save it as a draft and update once the design is completed. And also you get an option to save the page as a template. Now, if you save a template from this option, you will be able to save the entire page Act runs in a single template. So if you want to save a single section, you can save from the section settings like we saw earlier. And if you wish to save a complete page, you can do it from here near the update option. Both will be accessible in the template like lady. Now remember that you are in the editing mode here. And to see the preview, you can either hide the panel or click on the View Page option. Since vn using WordPress, you will always find the black bar at the top of the page there you had logged in to the WordPress. You can hydrate as well, but this is very helpful as you can go back to the dashboard by hovering over the title and clicking on dashboard. Or you can go to the customizer settings. From customize, you can see the pending updates, comments, add a new page, a new post, edit the page settings, or edit the page design with Elementor, you can also redirect to edit the custom layouts like header and footer from here itself. And if you wish to logout of the website editing mode, hover over the username and click on logout. This black bar is the shortcut to many settings and options. If you wish to exit through the dashboard of the admin area, click on the exit dashboard option. That's it. So this is how you can access Elementor and vivid learn more about the section and column settings in the next video. See you there.
33. Section & Column Settings: Then we use are designing tool. We can easily create a rectangle and place the content by a simple drag-and-drop. But arranging the information in such a structure on a webpage is a whole different game. You have to use sections and columns to manage the page layout. So what does this section and what is a column? Section is the area of the page where you can place columns to present the information in an organized manner. And by column, we mean a vertical block of content. You may require multiple columns across the width of the page. A section may contain one or more columns and you can adjust the structured as per the design requirement. Let us see how to manage those sections and columns on a webpage. We know how to insert a new section. Click on the plus icon and select a structure. You can select a simple structure and we can obviously customize it later. A section is represented by blue border line and column is represented by a gray dotted line. Now inside as section, there are columns to divide this section into 23 or whatever number of parts you need. In one section, there is compulsorily at least fun column. Another important point to note here is that columns would only be added from left to right. It means columns are used to arrange rejects and horizontal form. If you wish to add more area in vertical form, you will have to use sections as it works from top to bottom. Let us have a look at the section settings. Simply hovered over the top middle part and right-click on the dots. Now we can see the editing pane and left with settings having the three main tabs, layout, style and advanced. Under Layout settings for a section, we have drop-downs like these. The main settings of label, our layout and structure settings with a left-click on the Layout tab and it will expand. We will be discussing the main settings that are useful in editing a website. The first heading is content wit. It has two options to select, boxed and full vector. By default, we currently have boxed selected and via provided a scale to adjust the width manually as part of a requirement. You can scroll the scale left and right and decide the right weight for your section. Also, you can put the value in the box provided. Keep in mind that we will be following the design that we have already created in designing tool like Figma or Adobe XD. And we will be using all those dimensions and values here in Elementor. This is the development stage and we will be developing the page as per the design that we have already created in their design stage. The value that you will put here in the dimension is in pixels. You have to make changes to the Width settings with a bit of caution as if you have the smaller word, it will affect the display on screens and your website will end up showing shrinked. And in case you wish to get back to the default value that was available before manually adjusting the width of the section, you just delete the value in the box like this. We know that deleting the value will not make it 0. In fact, it will restore it to default. Also, you can select the full-width option to expand the section across the entire screen, no matter how wide the screen is. In short, you can lock the content width by putting some specific dimensions or else you can allow full-screen expansion by selecting full-width option. Next useful setting is height. Using this option, we can adjust the height of the section, making it higher to cover the entire screen, or make it small, or allow it to adjust itself based on the height of the columns and widgets inside the section. You can also adjust the height of the sect
Rahul Arora, Digital Marketing Mentor
