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 section manually by using the minimum height scale option. Let me tell you that proper heights election plays a very important role in managing the whitespace and creating an engaging user interface. Now, next setting is column position. As we know that all sections have columns, so it is possible to adjust the alignment of the columns to top, middle, or bottom as per the design requirement. Also, there is an option to stretch this section to make it cover edge to edge while viewing the website on a wider screen. Next, let us explore settings under this tile tab. Usually the settings related to background, background overlay, border, shape, divider, typography and colors are listed under the style tab for the section columns and in fact for all the widgets. So let us start with the background settings. We can adjust the background for normal view and hover view. In the normal view, you can select the background from four different types, classic, gradient, video and slideshow. Let us understand the classic first, you have an option to choose the colors as the section background. So click on the Color window and the color palette will open in the color picker, you can scroll that wheel and choose the right set of colors for your project. But we have done this step already by saving the global color options. So we need to simply click on the global color option here and pick the color as the background for this section. That's why I told you earlier that when you save the color palette, you will save a lot of time. So in this way, you can set a solid color as your section background. Now, instead of a solid colored, you can also choose an image as this section background hover over the image box and you will find an option to Add Image. Click on it, and the image uploader will open, upload the image from your device and click on add. The image will be added to the background of the section. Adding an image to the background requires some decision and adjustments. Let us have a look at the same. Always tried to upload an image in their dimensions that are required. It means editing and image beforehand to match the dimensions of the section. In this way, you will not face the problem in cropping or magnifying the image in display. If the dimensions are not accurate, then after uploading they emerge, use the settings of labeled next, you can adjust the position of the image to center alignment options, top alignment options, and bottom alignment options. There is a very cool setting and that attachment you can select from the fixed option or the scrolling option. If the image size is small, you can select that repeat option to cover the section with repeated images. And finally, you can try to adjust the size of the image using some size settings in this that cover and contain options are the most useful. Now in all the settings, there is a default option. So in case if you get lost in the various settings, simply select default to get back to the original settings. The next type of background is gradient. A gradient is a fusion of two colors and you can mix the two colors to create amazing color composition for your section back down, you need to select the two colors acted location, adjust that type of blending and angles to match your requirement. The next type of background as video, it is a very good blend. You just need to enter the link of your YouTube or Vimeo video or even your self-hosted videos. And it will be added to the section background. To sell Foster Video, simply upload the file in the Media Library. You can adjust the start time and end time settings and also adjust the loop play options and playing the video on mobile. The video on mobile east to be taken special care as the screen dimensions are different and the video may zoom up. So please pay attention to the responsiveness settings if you are inserting a video in this section background. There is also an option for background fallback. It means you can select an image as the background fallback. Because in some cases, if the video is not able to render or play, then there must be a backup image to show in the background. The last type of background type is a slideshow. It shows the different images in slideshow format and that keeps sliding aspect that time and speed. You mentioned. It is a very commonly used features and you can apply it easily using the Elementor. Simply select the multiple images and select the loop option with this button, you can make the slideshow fast or slow by adjusting the speed and milliseconds. There are a few transition effects and you can adjust the transition speed as well. The options of background size and background position is also useful in case the dimensions of the image are different from the dimensions of the section. The Ken Burns effect is also a cool feature as it gets a growing view or decreasing view of the image. These are the background options for normal view. Let us see some settings for the hover effect. You can apply two types of background and overview, classic and gradient. The settings are the same as we learned earlier. Just the view of the background will appear while hovering. Next, let us learn the background overlay feature. You must have noticed the solid color overlay above an image like this. You can apply an overlay in the normal view as well as in the Harvard view. Let us learn them one-by-one. In addition to the standard editing options that we learned earlier, there is an option to adjust the opacity in terms of background overly. It ranges from 0 to one, with 0 being the minimum and one being the maximum. You can also apply the CSS filters and different blending modes as Marie or design skills. Try the settings for hover options as well as they are almost similar. Next setting under the style tab is adjusting the border. Again, it has the normal view and the whole overview. Under the Border Type, you can select the solid, double, dotted, dashed, and groove type of borders. Once you select the border type, you will get an option to select the weight of the border and direct. Now, this box contains four values. Top, right, bottom and left. That is followed by a box that links all of them together. So in case you wish to assign the same value to all the four directions, first, check the linking box, or if you wish to provide variable are different values. First, uncheck the linking box and then insert the values in top, right, bottom, and left boxes. Below that, you can select the color of the border from the same colored palette. Also, you can use the box shadow and you can also apply the border settings for hover effect. Next editing option is shape dividers. You can apply the divider to top and bottom parts of the section. It has so many creative types and I will suggest you to explore the different types in both top and bottom parts of the section. Last option is topography, but we will not change the settings here as we will be doing it individually for every text content that we add. Now, the next tab under the Settings is Advanced tab. It is a very important and very crucial when to understand and practice. And also let me tell you that the advanced settings are almost the same for every section column and almost all the Elementor widgets. It means if you are able to understand these advanced settings once you can apply it to all the sections, columns, and widgets. So what all it includes? It includes the advanced settings motion effect. So responsive settings attributes and custom CSS. Let us start with the advanced settings. The first option is the margin. Margin for the section could be adjusted for top and bottom left and right is disabled for the section settings as it is a district automatically based on the content vector. But you will get all the four directions, bottom, left, and right for the columns and widgets. Margin means the species outside the boundary of this section. Let me repeat it. Margin means the space outside the boundary of a section, whereas in binding, it is the space inside the boundary of a section for top, bottom, left, and right. Clear margin means space outside the section boundary, and padding means space inside the section boundary. You can smartly use the linking button to link the values together while adjusting, adjusting the values for top, bottom, left, and right is a very important practice and you will have to use this optional Lord. So get familiar with linking the values and linking the values and anchoring the values for top, bottom, left, and right. Then that is an option to edit the Z index or index for the section. It helps you adjust the order. If another section overlaps, then there are options to assign CSS classes ICSID, that are used for some specific purpose that we may discuss in the course ahead. Next is motion effects. As the name suggests, the setting has animation settings. You will get access to this cooling effect if you have subscribed to Elementor Pro or else, you can only use the entrance animation option in the free version. Go ahead and give this a try as there are so many cool effects to use by loading the section that responsive settings are also important. You're going to adjust the column position in a section for mobile and tablet. And you can rearrange them as per your requirement. Also, you can hide some sections or columns, specifically for mobile, tablet or desktop. This feature is quite often used because you have some sections that you have to display only on the desktop devices. And there are some sections that you have designed specifically for the mobile devices. So you can hide the sections and you can show the sections. It is very useful to use. So these are the important settings for a section. And if you are able to understand the concept still here, you will be able to adjust the settings for all, most of Aliyah that rejects while designing the web page. Now, let us also understand the settings for the column. In order to open the settings for a column, Harvard from the corner of a column and click on this pencil icon. It also has the same layout style and advanced steps in the layout settings. You can adjust the column width in terms of percentage. It is very useful when you have multiple columns and you want to assign the verdict to the different columns inside a section. And important setting is to adjust the visit space and it is anchored in pixels. If you remember, we entered 20 pixels as the default wizard space. Also, I would like to draw your attention here as the value box is MD and this does not mean that it is 0, means that it is the default value, which is 20 pixels. If you wish to make it 0, you can simply enter 0 in the box OT else, if you wish to assign any specific spacing value, you can enter that. Go ahead and make some experiments that will help you become a good learner. The style tab and the Advanced tab has similar options, just like a section. Feel free to explore them as well. So this is how you can manage the section and columns on a webpage. And vivant start learning the application of Elementor widgets from the next video. See you there.
34. Application Of Basic Widgets: As I had told you that we will be developing the webpage without any coding, simply using the drag and drop technique. And we have reached the stage where we will be learning it. Now in this blank canvas, after inserting a section and column, we need to drag the widgets into the column and use the different types of widgets, design the webpage. It is a very simple, yet effective way to develop modern-day web pages without the need of any coding from your end because Elementor is generating coats for you in the backend. So you just make use of the widgets of label to you and start building the web page. Now, let us discuss the different visits have labored to us in the free element or one by one, the widgets available and free Elementor are categorized into basic, ancient. And if you have the subscription of Elementor Pro, then you will get the probe deserts and site visits as well. Let us start learning the application of basic widgets in this lesson. The method to insert a widget is very simple. Simply click on the budget, hold the mouse key, drag, drag, drag and drop. Inside the column, you will see a flag blue rectangular shape that highlights the position where the widget is getting inserted. After placing the visit, you can click on the pencil icon and the editing options will open in the left panel. The first visit and the list is in their section. It is used to create nested columns within a section. So this widget is actually a new set of section with columns and you can use it to create complex layouts like this. Let us have a look at the video settings options of label for the inner section widget. Now there is a section and there are columns. So you're going to edit the settings for section like this and for a column like this As all the same as the section and column editing options that we discussed in the previous video. The same three main tabs, layout, style and advanced and the editing options are also the same. So we need not discuss it again here. But always make a smart use of intersection wherever required. I mean to say that if you want to insert a new column, you can simply insert it using the Add Column option. So do not use in their sections unnecessarily as they add up to the markup codes that we can easily avoid. Use intersections only to create complex nested layouts. All right. The next visit of labor and free Elementor is the heading. It allows you to create stylish title headings. Use this widget to add titles. Ask what the design and style that you created in the designing tool. Simply drag the widget to the section, tag the content. I just a style settings and adjust the position to master design. It is very easy. If we see the settings for this lizard, again, it has the same three main tabs, Content style and advanced. In the content tab, you will have to type the title. You can also type the content directly by clicking on the Heading box on the webpage. But I personally recommend typing the heading content in that title box under this Content tab in the editing panel, you will find the option called as dynamic tags here in the title. And you can use it only if you have the Elementor Pro subscription. But since it is very important. So let me show you an example how to use it. Dynamic tags are used to fetch content directly from the website or from the current page or post. And the best part is that it changes automatically as the base content is changed. For example, if you enter page or post title as a dynamic tag in heading, it will be fast automatically from the title of the page or post. And in case you make changes to the title of the page that will be updated here automatically. Let us see another example. If you entered current date and time as the dynamic tag. The date and time, we'll keep updating automatically here. That is very wonderful thing. This is the main advantage of using dynamic tax, and you have some extra settings for the dynamic tags. Click on the wrench icon. You can change the settings and assign the before and after text under the advanced option. You also get the option to assign fallback content here. Fallback option is used to display the default text in case the dynamic tag is not triggered due to some reasons, or if the title is empty. And the action options in dynamic tags vary for different settings, which means you may find more options in their dynamic tags for some other budget or other setting option like to show a pop-up on the click of a link. Keep in mind that you will get access to this dynamic tax option only when you subscribe to Elementor Pro. Now, below the title, you can insert a link, which means if a user clicks on the heading, he will be redirected to the URL. You will mention here, this link could be an internal link leading to a web page on your website or some external link. Also, there is a small gear icon to open the link options. It contains options to make the link open in a new tab and add nofollow attribute from the SEO point of view, you can leave the customer attributes here as it is. You can leave the size option here, assign the HTML tag as per the SEO plan, and adjust the alignment. These are the basic settings and understood by default. Just pay attention to one more thing here. You will find this small computer device icon near some options, and it represents vD. It represents that the alignment settings we're doing here is for computers. If you wish to change the alignment for the other devices. Simply click on the screen icon and the list will open the switch the device out of mobile and tablet. So you can make alignment settings different for the different device types. It is highly recommended to optimize your website design, to feel well on all the three types of devices. And you can make the optimization settings either at the section level or the web page level. Let me tell you one thing here very quickly. Let us suppose you're designing a webpage and as soon as your one section has designed completely, you can optimize it for mobile and tablet by changing the view from the bottom bar over here. This will be called as section level optimization. On the other hand, you can design the complete webpage and then change the view to mobile and then to tablet to make the optimization settings. This will be called as pH level optimization. Both the techniques are equally good and you can make a choice as per your convenience. But please keep in mind that you have to make your website completely optimized for all the three types of devices. Next, let us see the style tab. First option is to select the color of the herding. You can easily pick it from the global palette that we have sect. If you want to select some other color, you can use the color picker. Next, we have the topography settings and we know how to make changes to the topography. You can easily select using the global phones to save time. Next, you can adjust the shadows happenings for your heading and play around with the different blending modes. Next is the Advanced Settings tab. And it has almost the same set of options, but for the heading widget, like you can adjust the margin and padding, assigning the scrolling effects, mouseover efforts make it sticky or add entrance animation. You can adjust the background of the heading and the border of the headache. But there is one additional setting here, that is the position setting. First, you're going to adjust the width of the heading bogs by choosing between default, filbert in line, Ang, custom late. Here, the default is usually the full-width. And it means that when you insert the heading widget, it will cover the full width of the columns from left to right. And if you select the inland verdict option, the heading wizard will have read only can the content is available and there will be an empty space to add some other widget on the right. Yes. You will have to assign the inland vert to the other rigid as well. Then only it will be pleased here on the empty space of the column. This in lane. Or more precisely, by using the custom worked in percentage, you will be able to create nested and complex layouts easily in Elementor. You can make a very good use of desorption, especially on mobile phones. Next, you have the option of position here, and it includes default, absolute, fixed. If I choose absolute, I can place the elements freely on the page, but I wanted to make it clear that you must use this option only in rare designed cases where it is not possible to implement the design without this. Because this method is not considered good for the responsive website. And you may need to come up with lot many adjustments for devices that will consume a lot of time. The fixed position is used to fix the element to a specific position of the page. And no matter how much a visitor scrolls, this element will stay here only. Please use these two options very carefully and very smartly. Rest of the settings like responsiveness are the same. And you can hide this widget or different devices. And you can leave the attributes, certain CSS options. It's time to save the word guide, update the website, please, updated at least in every five minutes. Let us now learn the usage of the other widgets. Next one is to insert the image. So click on it, hold it, drag it, and drop inside the column. Here you can add an image by hovering over the place holder. Click on Choose image. You can upload an image from computed or insert an image that is already uploaded to the media library. Enter the alt text for the image from the SEO point of view and click on Insert media. Vow, the image is now inserted to the web page using this image widget. Very easy. Now let us edit the settings. Either click on the image or click on the pencil icon to open the Settings panel on the left. Let us discuss the editing options and the left mandible seemed three tabs, Content, style and advanced image we have already uploaded. You can use the dynamic tags to automatically insert the featured image, logo, or auto animate. Next, you can adjust the size of the image and alignment. Also, you can add captions, that is the text line to show below this image. The captions could be added either at the image in the media, ADD ODD else using the custom caption option here. If you select media file here, you will get an option to open it in the Lightbox Mode like this, or else you can under some URL to redirect the visitor to the link you mentioned, and either in the same tab or a new window. By adjusting the settings for the link. Under the style tab, you can adjust the image width and height. Also, you can adjust the opacity and some CSS filter settings, both in normal view and the whole overview. It can be used to create beautiful effects like these. Below that is the border setting to manage the border around the image and the very cool box shadow settings. You can also adjust the alignment, color typography and spacing settings for the caption text. The last tab is Advanced Settings, and it contains the same set of settings. But for the image widget, we need not discuss it again and again. Next wizard is the text editor. It is used to insert paragraphs to the web page. Again, same three tabs here, Content, style and advanced. In the content tab, add that text that you wish to type. You can add it by clicking here as well. Let me tell you that this is a powerful editor and you will get so many formatting options. You can add media to the paragraph from here and adjust that wrapping position like this. You can adjust the formatting of text, like making the text bold, italic, or underline. Also, you can insert bullets, numbered list, insert the link in the text, and even make it a full screen editor. You can toggle for more options by clicking on this button. Here you will get options to make the text strikethrough, insert horizontal line, change the color of specific words or phrases to highlight. Use blockquote. I can arrange the alignment, use special characters and increase or decrease the indent. You can assign dropped gap, the first alphabet of the paragraph and divide the content into columns. I must see it is a decent enough editor to insert paragraphs on the web page. Now under the style tab, you have the same set of texts, styling settings. And the Advanced tab also has the same set of settings for this text editor widget. Now, the next widget we have is the video widget, and it is used to embed videos. Do the web page. Let us see the settings under the content that you will find settings for radio and image awkwardly. Let us see the video settings first. Start that selecting the source. You can use a video hosted on YouTube, Vimeo, daily motion, or uploaded in your media like daily, or in fact, whichever place you have coasted. If you want to start that video from a specific clip, adjust the start time, the end time. Then there are a few other video options. You can adjust the autoplay settings, mute the video, loop, the playback to show or hide the player controls. If you are linking to a YouTube video, you can adjust the modest branding settings. And if you are using a Vimeo video, you will be able to adjust the player color as well. You can even adjust the statistic videos to show videos from the current channel or any random video. Next setting is related to image overlay. This will help you customize the thumbnail for the video. You can upload an image from the device and adjust the image size if you wish to display the Play button that you can make it. So if you wish to make the video play in the Lightbox Mode by popping up, you can select that as well. Next, under the style tab, you can adjust the aspect ratio to desire choice, along with some CSS filters to adjust the looks. And then you can customize the play icon with color and size. The advanced settings are the same for the video verdict. All right, the next widget is a button. It is used to add clickable buttons to the web page. Please pay special attention to the button widget settings because a button is the superstar of the website. Via it is a superstar because a button instance C, D, E, call to action. All right, let us see the settings for the button Vijay. The content tab has settings related to the button. The first one is the button type and adjusting register default colors based on the butter type, insignificant. Then you can insert the button text provided but the link, and it is the most important purpose of having a button on the website. Visitors should be redirected to some URL on the click of the button, or a pop-up must appear farther visitor to complete the action or to download some file like a PDF. Redirecting is easy by simply entering the URL and adjusting the settings. Opening a pop-up is possible by using that dynamic tags and could download a file. You can upload land in the media library like a PDF, copy the link, and paste it here in the URL. On that click, the file will open in a new tab, and from there the visitor can download it. If you wish to download the file directly without opening it in a new tab, then you will have to assign a custom attribute like download pipe sign. Finally, this will download the file without opening in the new dapp, then adjust the alignment. You can skip the potencies year for carbon. I can do the button. You can select an icon either from the eigentlich, very odd, you can insert a custom icon by uploading the design in SVG format. We have discussed the benefits of using an SVG instead of a PNG or JPEG for the icons because the SVG files do not blurred at all. So you can either use some pre-designed of liberal in the eigentlich Diddy or else upload the one you have designed using the Upload option here, adjust the icon spacing and you can provide a button ID to track the clicks in Google Analytics or Facebook pixel, that is the Advanced Analytics portion. Next, we have the style settings for the button widget. You can start by adjusting the topography and then you will get the option to adjust the colors for both normal view and the hover view. The colors for a button are very important and provide the accent color to highlight it from the rest of the content. Also, you can choose from a variety of Harvard animations for the button and also adjust the border settings. Next, you have to adjust the space inside the button. And for that, we have the padding settings here. Pay attention. It is important. Use it to make the button bigger, smaller, dollar, or violated. And the Advanced Settings tab for the button wizard also has the same set of settings letters. Skip it. Keep in mind that the button is diversity and v know how important it is due, make very good use of this visit. Next visit is divided. It is used to add horizontal line and differentiates to divide the content. And that the Content tab you can select from the different styles. After divided, adjust the width and percentage or pixels, adjust the alignment of the divider and add some element in the form of EXT or icon or a custom icon by uploading SVG and place it before the divided or after or in-between. Under the style tab, you can make adjustments for color and size, often divided as well as the gapping. The Advanced tab again has the same set of settings for that divided visit. Next is the spacer widget. It creates a block of space anywhere on the web page, you can fill this block of space with some color or an image. But this is not the only use of a spacer widget. You can use this widget to create custom shapes and use it on the website. When I'm sharing a link of the video below to help you learn how to make custom shapes using this space and reject all liked so forth settings. It has only two tabs. You can create an empty box with the spacer and adjust the height. The advanced settings are the same. Then you can adjust the margin by adding background border color, positioning, and the same settings. So apply your creativity while using the space of budget and do watch the video by clicking on the link below. Next widget is to add Google Maps to the other page. It is an easy way to embed Google Maps in your website. This is very useful for conduct pages so that your visitors can know where you are located on the map. Simply tied to location you want to show on the map and adjust the zoom into the area. You can also adjust the height of the map. The style tab has some CSS mentors, whereas the Advanced tab has the same settings. Next wizard is to insert an iBeacon. Keep in mind that icon's play a very important role in maintaining the balance of the website design. So make good use of the icons on the website. Simply select an item from the icon liability or upload the custom icon in SVG format. As I had told you earlier, that we prefer the icons in SVG and not PNG or JPEG. You can adjust the view for default, stacked and framed. Also, you can provide a link like we discussed before for the button and adjust the alignment under the style. You can adjust the color for normal view and the hover view. You can also make adjustments for size and rotation. The Advanced tab, again has the same set of settings for the icon vision. So these all are the basic widgets provided in the Elementor page builder. And you can use them to develop the sections, columns, and the entire design of the webpage. It is very easy to use, simple drag-and-drop and yet very powerful way to build modern day websites. I am sure you will be able to use all of them in developing the webpage as per the design that you have created in their designing tool. I know it will require a good amount of practice to become aware of all the vineyards and setting options. But once you have mastered, nobody can stop you from building a website, a pixel-perfect website, quickly and easily without any coding. Even learn more about the general budgets and approve budgets in the upcoming videos. Stay tuned.
35. Application Of General Widgets: We are using the Elementor budgets to develop the webpages as per the design that we have created in the designing tool. It is an easy and powerful process to develop without any coding. Now, let us learn the usage, often widgets every label under the general category. These budgets are actually just an extension of the basic widgets. Combining the different widgets into a common budget to speed up the process of developing the webpage. And along with that, there are some more creative budgets as well in this section, let us learn them one by one. The first visit of label here is the image box. It is used to add an image box that combines an image with a headline and text, which is often used in the feature section of the website. Simply chosen emerge into the title and description and you get the same set of settings like an image heading and description that we learned in the last video. Similar to the image box, we have the next widget called as the icon box. It is also commonly used to create the features section. It has all the same settings. Just you can use an icon instead of an image from the icon library or uploading custom SVG and adjust using the same set of settings. I'm not repeating that common settings again and again. I hope you are clear how to use the settings for the widgets. Next visit is to add star rating. Now using this widget, you can assign star ratings on the webpage. It can be used along with the testimonials and reviews. You can customize the star icon and a label for size, color, and topography. The content tab has settings related to the stars. The first option is to select the rating scale between 0 to five or 0 to ten. In the next option, you can assign value based on the scale. In the next option you can select the two versions of star icon. One is via font-awesome and the other one from Unicode. Choose the one that you like. Next, you can select the unmarked style from solid to outline. You can even add a title before the star rating like this and adjust the alignment by selecting left, center, right, or justified. Under the style tab, you can adjust the topography and color settings of title and start. Feel free to explore the remaining settings. It contains almost the same set of settings. Next wizard is to add image, get acyl. It helps in creating sliding image galleries to the page under the content tab. The first setting is related to image carousel. You can select multiple images by clicking on the plus icon. You can adjust the image size. And the next option is important. You can select how many images to show at a time and how many images to scroll. For example, if you selected three images to show and one image to slide, it will look like this. And don't forget, you have to optimize the settings for the mobile device and tablet as well. Then that is an option to stretch the image in case the dimensions of the image are not in order. Next, to show the navigation, you can select the arrows and dots. Only arrows are only dots. If you want to display the images in Lightbox Mode, you can select the media file and links and then press yes on the lightbox option. Or else you can assign a hyperlink 2D images and adjust the caption settings. In the additional settings you can control the autoplay feature, boson hover, boson, click on interaction, the autoplay speed, loop settings, animation speed and direction from left to right or right to left. The style settings contain the options to modify the colors and position for navigation, emerge and caption. Under the navigation settings, you can adjust the position, size, and color of the arrows and Dots. Emit settings contain the options for alignment, spacing, border type, and border-radius. Then there are standard settings for caption, like every other text widget. The advanced settings contain the similar set of options for the colossal widget. That's it. Next widget is the basic image gallery. It is used to add image galleries to the page, but not the sliding when heared. Setting options. Almost the same. Feel free to explore it. The next widget is to add icon list. It is used to create an easy to manage list of items with each item highlighted by its own icon. Let us start with settings under the content tab. The first option is to select the layout. There are two options and it default and enlightened. Next, you can type that different items in the list. An item contains the text and I can, along with a link option, you can create a copy of the item or deleted by clicking on this. Under the style tab, there are same set of settings for adjusting the list. I can end text and also there is an option to add a divider in between. The Advanced tab is also the same for the icon list of widget. Next visit is counted. If it is a cool one, it is used to add any metered numbered counter to the webpage. Under the content tab, there are options to adjust the counter. You can mention the starting number, ending number, prefix and suffix to customize the counter values. Then you can adjust the animation duration that will change the speed of counting and also show or hide the thousand separator is separated, could be a dot or a space. You can also assign a title, although it appears at the bottom of the counter like a caption. Under the style tab, you will be able to adjust the colors and typography for number and title. The advanced settings are the same. The next video is the progress bar. It is used to add fully styled any matrix progress bars to the web page. It contains the settings for the progress bar. First, you can mention the title of the progress BOD and assign a percentage to fill. It is optional to show the percentage value and the inner text, which is also called as the place holder text. Under the style tab, you can make adjustments for the gullet of the progress bar, height and radius. The typography and colors off the inner text along with the title, could also be changed. The advanced settings are the same. Next widget is to add testimonial sections. It makes your task easy by combining the content and emerge Nested layout in a single widget. This comes up handy to save time in making column layout adjustments. The first setting under the content tab is for testimonials. You can write the testimonial content and upload an image of your client along with the name, designation and Link option. Image position has two options aside, top, along with the alignment settings. Under the style tab, colors and topography could be managed for content, name and designation, along with the standard settings for image. The advanced settings are the scene. Next video is to insert tabs. It helps in dividing the content into tabs, either horizontally or vertically. Under the content tab, we have settings for the tabs. You can create a list of tabs that the option to copy and delete a tab. Here, you can select the type of tab between horizontal and vertical. Under the style tab, you have settings to adjust the width of the menu box, having that title and the border width, border color and background color. Next, you can adjust the topography settings for title and content. There is an option to adjust the active tab here, it means you can assign specific settings for the active tab that a user is accessing. Guarantee. The advanced settings are the same. The next two budgets are almost common with the same purpose, but with a slight difference in their functioning. These are accordion and toggle. The accordion widget is used to display text in a collapsed, condensed manner and helps in saving the space. With the accordion. Visitors can scan the item titles and choose to expand an item only if it is off their interests. As we see in an FAQ section. If we see the settings for an accordion, it contains the list of items with title and description. It also contains icons. You can make the active icon different here as well. You can also assign the HTML tags to the title from the SEO point of view. The style tab contains the settings for a guardian border, ankles, the topography and color settings for the title, description, and Eigen. The advanced settings are the same. Now, when we also insert that toggle widget, it serves the same purpose but with a little difference. Vetted that toggle widget, a visitor can see as many items as desired and all can be expanded at the same time. However, with the accordion widget, only one item can be expanded at one time. As you expand another recording I term the previously opened item automatically collapses. So that's the only difference between the accordion and the toggle reject. The settings for the toggle budget are the same as the accordion. Next wizard is to insert the social icons. It helps in adding icon links to your social media profiles. Under the content tab, you can make changes to the social icons list. You can adjust the icon and link along with options to edit the colors. You can select from a range of shapes like a rounded, square and circle. If you wish to stack it in lines, you can choose the number of columns and choose the alignment. Under the style tab, you can make changes for the color. There are two options to choose, the official color and the custom color. Well, both are frequently used in website designing and you can choose as per your design scheme. When you select the custom color, you can adjust the primary colored and the secondary color. Next, you can manage the size of the social icons by adding spacing and rows gap, you can insert a border as well. You can also assign an emission effect. Do the hover over the social icons. This is a cool one. The advanced settings are all the same for the social icons widget. Next wizard is to add alert box. Come on, everybody be alert. It enables you to display a colored alert box to draw attention to some important message and it disappears after the visitor takes an action on it. There are different types of boxes, just with different background colors, nothing significant. You can add the title and description of your choice here, the close button and to hide the alert is also optional. Under the style tab, you can make adjustments for the color and border and for title and description. The advanced settings are also the same. The next video it is SoundCloud. It embeds audio clips from SoundCloud to the website. You can enter the audio link, choose the player display, enable disable the autoplay option by like, download, share button comments, accounts, username, and control the colors. The next one is short code widget. So what is a short code? Is short code basically is a special tag that we enter into a page on WordPress that gets replaced with the assigned content when we view the live website. Let me tell you an example. If you have to embed a form created using third party plugin like WP forms, then you need to add the short code to embed it on the web page. Is short code is also used to embed APIs and visits like a Twitter widget on the webpage. It saves time and helps in adding specialized content. In an easy, we simply type the short code in a given field and click on Apply. Your content would appear on the website. The advanced settings are the same. The next widget is to add HTML code to the web page. Just like the inserted a short code, you can add an HTML, CSS, shortcodes, or JavaScript on the web page using this widget. Like if you have the HTML code for a form, you can insert it here to embed the form on the webpage. The advanced settings are also the same. Next is the menu anchor widget. It is used to create a page with internal scrolling navigation. It means that if a visitor clicks on certain element here will be automatically scroll to the other elements on the same page. It is used for same page scroll navigation. The process is simple. Simply insert the menu anchor wizard to the top of the section where you want to scroll the visitor. Give it a name. Now, edit that clickable element that will redirect on clicking in the URL field, enter the same name, but starting with a hashtag, that's it. The menu and get is created and the advanced settings are the same as usual. Next visit is to insert a sidebar. It helps in adding any of the teams sidebars that we might have created into the page. You will be able to edit the elements of a sidebar either by going to the Theme Customizer or element or team-building. By the way, adding sidebars to a business website is very rare nowadays. It is just commonly used in the blogging websites. Finally, there is a read mode wizard, but you can skip it as it is not that useful. So you have learned about the application of general widgets as well. And this is what all the gate with the free Elementor plug-in. These widgets are quite powerful and V are able to develop the webpage based on the web design very quickly and easily without any coding using all these widgets, you can develop all the parts of the pages of the website very easily using these visits to get access to the more advanced features and widget, you can plan to get the Elementor Pro subscription and vivid learn about the application of the probe widgets in the next lesson. See you there.
36. Application Of Pro Widgets: When you subscribe to Elementor Pro, you get access to the premium features like the team builder, pop-up bender forms and integration, mouse and scroll animation, global budgets, dynamic tags, and some 30 advanced widgets to create interactive web designs quickly and easily. So let us now learn about the widgets of labor in the Pro version of element of. Firstly, I would like to tell you what is a global budget? An element or a global budget is used to control the settings of a specific widget is displayed in multiple places on the website. It means if you want to use a widget across the different pages and edit all of them together advance. You can use a global reject. For example, if you want to use the same testimonial budget at the homepage products page and contact us page. Then give life to save the section as a template and inserted on all the three pages. But if you wish to make changes to this testimonial widget, you will have to edit all the three pages and it will consume unnecessary time. Here, you can make use of the global budget because you are using the same settings for the testimonial widget on all the different pages. So save that testimonial as a global budget and inserted on all the three pages. Now, if you wish to make changes, adjective visit at one page and the rest will be updated automatically because they are linked. Keep in mind that if you delete the global wizard, it will be removed from all the pages where it was inserted. And global wizard works for widget, not four sections. Some pros, some cons. All right. Let me tell you the process, how to create it. Create any global budget by simply right-click and save as global, enter a name, save. It will be added to this global budgets list near the elements. It has a yellow border instead of blue. Now, to insert this global wizard to any other place, simply drag and drop. But from this global widget list, if you want to edit the Global widget, click on the pencil icon and it will show that the visit is locked. You can click on edit and start editing the project. It will be updated at all the places automatically. And if you wish to edit only the visit on this page and not the others, you can click on unlink. It will become a regular budget and now made the changes only to this widget here on this page. So that is the concept of global reject. Now let us discuss the Elementor Pro Widgets. The first wizard is post. It is used to insert the post archive to the section of any page. In fact, you can show the archive of pages, products portfolio, or manually select what sections you want to display in an archive manner on a web page. It is it powerful and commonly used to display block poster archive on the homepage? If we see the settings for this project, then under the content tab, you can change the visuals by selecting the skin from classic guards and full content. Change the number of columns and post. But page you can choose to show the feature dimension and enable the masonry effect. By the way, masonry is a grid layout that uses all the space by reducing any unnecessary gaps between the images. You can change the image size. Sure hate the title and the excerpt. Metadata, lead modelling, badge, and Avatar settings. If you change the skin, a few options are changed, but they are just common ones and easy to understand. Next, in the query settings have advanced levels, customization options like choosing the source of content and including or excluding certain content categories or author. You can select the boast to show for a specific period of time and also manage the ordering sequence of the post. In addition, you have the options to customize the pagination elements like numbers and previous. Next, under the style tab, you will be able to adjust the visuals, layout, space, alerts, and typography for the image content, ANC, pagination, and the advanced settings are again the same. You can use them as per your requirement. Next is the portfolio widget. It is used to display the post pages and custom post types in an attractive think that able grid. It works almost the same way as the post budget. Just, you can add a filter bar so that the visitor can click on the filters to see the relevant post and custom layouts in an organized manner. The settings are all the same with just an additional option to enable and disable older filter bar under the style tab, again, you get the same set of options with Justin, additional setting for the filter, but nothing significant. And the advanced settings are also the same. Let us now see the next video, but it does the image gallery. It helps in adding the complex and beautiful image galleries on the web page. This is an advanced version of the basic GAL80 that we learned before. You can add a single gallery or multiple galleries with filter taps. You can choose the layout from grid, justified and masonry. You can manage the number of columns, spacing, link, and aspect ratio. You can make changes to the filter bar for labels, pointers, and animation. Also, you can customize the background overlay, title, and description. Under the style tab, you get settings for image overlay, content and filtered about, which are simple as we have learned, fought the widgets before, Advanced that banks are also the same. Next visit in Elementor Pro is a special one and it is to add forms. Using this, you can set up a contact form on the website to allow the visitors a simple way to get in touch with you. By the way, this is the most important budget, especially for landing pages. Under the content tab, you get settings for form fields, submit button action after submit, and some additional options give to form a name and add the fields that you want to show. The field type contains all the standard and commonly used fields in the form like text, email, telephone number, text area, radio buttons, checkbox, date, time, recapture, and mode. You can use as many fields as you want. Just make sure that the form filling process should be very smooth and easy for the visitor and should consume the least possible time. You can show or hide the label or required mark by enabling or disabling this option. Next, you can manage the settings for button like size, weight and alignment steps and Submit button. Now assign the action after form submission like sending an e-mail, redirecting the user to a thank you page, or adding the user to the e-mail marketing tool audience list. Here, the first email option is to deceive the submission deserts on your email ID. And email too is used to saying an automated e-mail on the successful submission of the form like an auto responder using Elementor. You can choose as many actions as you want here. Next, you can make the settings for the multi-step forms. By the way, to create a multi-step form, select steps from the list field type, and this acts as a divider for the step fun. You can add more fees and Dave will be displayed in step 2. Instead of submit button, you will find the next button in step one and the previous beta1, along with Submit and step 2. Multi-step forms are useful when you have more number of fields and you want to divide the form filling process into a more logical. And finally, under the additional options, you can edit the custom messages that are shown after submitting a form like the success message. Or the error message, field acquired message or invalid entry message. Under the style tab, you can manage the settings for fees, content, ang button for spacing, color, biography, and visuals. Pay attention to the steps styling as you will get options to stylize the inactive, active and completed step. Leaving the Advanced Options tab for you to try. Next widget is the login form. It makes it easy to create a custom login page instead of the default WordPress login page. Under the content tab, there are options to edit the form fields, button, and additional options for directing the visitor after login, logout login message and options to edit the label and place holder. Style and advanced options contain the same common settings. Next is the slides widget. It helps in creating simple slides that work perfectly fine. You can create sections slides with custom background, title, description, and button. Simply drag-and-drop them to change their position, duplicate, delete, or add a slide. When you click on a single slide, its options open up for background, content and style settings. You can create n number of slides, adjust the height, and in the slider options you can adjust the navigation, autoplay, boson hover, boards or interaction autoplay speed loop, and select a wonderful transition from slide or fade. Also, there is an option to assign content animation from different directions. Under the style tab, you can manage the visuals, space, color, and topography of slides, title, description, button, and navigation. The Advanced tab has the same set of settings. Now the next visit is Nav Menu. It helps him using the menus that you have created in WordPress and design them in whatever way you want. It means you can insert a navigation menu at any part of the webpage. Under the content tab, you can adjust the layout settings like horizontal menu, vertical menu, or a dropdown menu. Based on the layout you select, you will get options to edit the alignment pointer, animation sub-menu indicator, Anki settings for the mobile drop-down menu. Under the style tab, you can adjust the settings for the main menu drop-down and toggle button. Make sure you edit the settings for normal hover and active mode. The advanced settings are also the same. The next widget is the animated headline. It is used to create attention-grabbing headlines that either rotate or include the highlighted animation. You can create exciting headlines with eye-catching effects. Under the content tab, start with selecting the style of her name that are two styles have labeled. Highlighted and rotating. Highlighted text could be highlighted with some shape like circle or underline. That rotating texts could have the typing animation or clip, swirly and many other animations. In the next field, you can add before text, highlighted or rotating text, and the after text. You can also add links, adjust the alignment, and assign the HTML tags to this happening from the SEO point of view. Styling is easy. Under the style tab, you can adjust the shape and headlined visuals. The Advanced tab is also, as usual. The next visit is pricelist. It is used to create fully style catalogs and menus that include pricing. In terms of editing the settings, it is similar to the icon list, and I believe you can manage it easily by exploring the content, style and Advanced Settings tab. Next video is the base table. It is used to create stylish, advanced price tables that display the products or services. It is a good one and you can edit all the parts of this price table. Under the content tab, you can edit the header for title, description and HTML tag, then manage the settings for pricing, list of features, button, link, and additional info in footer. And finally, enable, disable the ribbon When options to modify the title and position. Under the style tab, you will be able to adjust spacing, colors, typography, and visuals for the header facing features, footer and ribbon. And they advanced, their tanks are the same. Next widget is a flip box. It is used to create animated boxes that flip to the other side. Monster visitor hovers over them. It means the section has a French side and a backside. And you can show different content on the front and the back. The front side can be used to create excitement and attraction to flip the section and the backside has a CTA to encourage action. If we see the settings, the content tab has settings for front, back and setting options. Under the front option, you can design the content and background in the convent option, choose a graphic element like an image or I can change the view type as default, stacked or framed, inserted title and description. And in the background option, you can change the section diagonal. Next, you can change the backside of the section, which is visible after the flip. And it has almost the same settings, but with the button that can act as a CTA. In the settings, you can adjust the height and radius of the section, assigning the flip effect, flip direction, and a 3D effect. In the style option, you can make adjustments for the front and the back for padding, alignment, position, border type, and settings related to the icon, title and description seem far the backside with additional settings to customize the button. And finally, you'll get the same set of settings in the Advanced tab. Next one is a call to action widget. It is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget Users and emissions and CSS effects to create user interactions that appear when the user hovers over the box. Here, under the content option, you're going to adjust the settings for image, content and Ribbon. Choose the skin type and adjust the position of the image. Content settings have almost the same set of regular settings. And in the ribbon, you can show a slanted text on the top-right, top-left. Under the style tab, there are settings for box, Content button and a benign Harvard effects. You can adjust the height, alignment, position, and padding after section with options to edit the width and height of the image. Then there are regular setting options for content and button. Under the ribbon option, you can change the background color, x colored, and distance from the corner, topography and shadow. And the advanced settings are also the same. Next widget is a media kit acyl. It is used to create a slider of videos and images. Visit includes three skins. Number one, get awesome. It is the standard rotating carousel skin that shows a customized number of image or video slides. But few. Number two is slideshow. It is a slider skin that displays one primary slide and small image thumbnails below. Number 3 is covered flow. It is a slider skin that shows a central slide in the front and two sites lights in the back. Inside each slayed, you can add the image or video and have it linked to its media file or an external link. The ghetto arousal can display a mixture of both images and videos, act ones. You can change this slide effect height and manage the thumbnail settings. In the original options, you can enable, disable the slider navigation, autoplay options, and image size and fit. Under the style tab, you can manage the visuals, spacing, color, and typography for slides, navigation, and laid box. The advanced settings are the same for the media can also reject. Next widget is a testimonial ketosis. It is used. Display is sliding carousel of customer testimonials in a variety of designs. It has the same set of settings and that the contents style and Advanced tab that you can now easily explore. Next wizard is to show reviews. It displays a sliding carousel of user reviews, although the sending options are same for this widget has failed, but you get one very beneficial feature here. You can insert an icon like a social media icon and provide the link either to the review or the profile of that the viewer. This really helps in building credibility and authenticity in the perception of the visitors. Very good line. Next is third table of content widget. It is used to insert headings in a section and the headings are fast automatically from the page content based on H1 to H6 levels of hierarchy. Although the processes automatic, you have plenty of control over what gets included and board gets excluded from the display. You can include the header tags to show and choose between the number or bullets. Under the additional options, you can enable word wrap to wrap text when column vector cannot accommodate long text on one line, enable disable the minimized box to force a click to expand the table of contents and enable disable the hierarchical view and to collapse the sub-items. Under the style tab, you can manage the same visual space, color, and topography settings for Box Header and list handy advanced settings are also the same. Next visit is a countdown timer. It enables you to add countdowns to your page without the use of any third party plugin. Customizing the timer is easy. Choose between the due date or evergreen timer, although there is no significant difference between them, you can change the view type enable disable the days, hours, minutes and seconds, show or hide the label and a custom label. You can set an action after the timer expires and choose between redirecting a visitor to some other page or high-tech Neymar or show some custom message. The style and Advanced tab has the same set of settings that you can easily manage. Next widget is share buttons. It adds share buttons to any page or post of the website. This budget is very important because if the visitors share this page with their connections on the social media, you will get more traffic and you get the fully control to customize the share button design and style. Under the content tab, add the networks and create a list. You can change the view type, show or hide the label, change to skin type, shape, number of columns, alignment. And target URL that denotes the current page or some other page or post to be shared. Under the style tab, you can manage the visuals and design of the buttons and the advanced settings are the same here as well. Next wizard is blockquote. It is used to embed fully style quotes. You can also set these as clicked to tweet go towards enabling users to easily share them on Twitter. Start by choosing the skin type, enter the content authored, enable or disable the one-click Tweet button, change the view type and skin of the Greet button, enter the labor and your Twitter username. You can adjust the style of the content button and border very easily and the advanced settings and also the same. Next we have some visits related to Facebook to increase the websites, Facebook engagement so that you can get more likes, shares, and interactions. The first one is to add Facebook button to the website. Using this, you can add a Facebook like Beta1 so that the visitors can like the webpage or post on the Facebook page directly from the website. You can choose the type of action between like and recommend. Layout, size, color, short, hide the Share button, and profile pictures. You can get likes for the current website page or enter the Facebook page URL in Guston. Since the styling follows standard Facebook alerts. So you don't get the option to edit the style. And the advanced step has also the same set of settings for this widget. Next wizard is to add Facebook comments. It is placed at the end of the post to allow the readers to easily comment using their Facebook account. You can choose how many comments to show and ordering. You can show the comments for the current post or some other one by anchoring that custom URL. Next widget is to embed Facebook post. It helps in easily embedding Facebook post videos or comments on the page of the website. You can choose to embed a boast video or comment. You can easily get the URL from the Facebook by right-click and copy URL method. Simply pasted here in the URL field. You can enable to show the full text of the post or adjust the settings for the video. Next wizard is to add the Facebook page on the website. Yes, you can add the Facebook page feed on the website itself. Simply enter the URL of the Facebook page here in the link field. And you can choose the layout options to show on the feed like timeline, events and messages. Enable disable the header, cover photo, profile photos, and adjust the height of the visit. The advanced settings are the same. The next budget is to insert a custom global template into the page. This template is usually saved and sync with the elementor library for the license account, you can make a search for the template name act simply inserted. If you wish to edit this template from the page itself, publish the page, and then you will get an option to edit the template as simple as it is. The final budget and Elementor Pro is Lottie. Latae. Widgets are small and limited elements which are rendered from JSON files. Simply upload or reference and external JSON file and adjust as desired. This widget enhances the interaction by showing animated content on the page. You can either create a Lottie using Adobe After Effects or use some pre-designed latae animations. Simply make a Google search, downloaded it to upload a media library, or else enter the URL for the external file and Elementor. We'll fetch it directly from there. Choose the alignment caption, anchor, link on click. Under the settings, you can adjust the trigger for animation, loop playback speed, start point, end point, and reverse. Later renderer be SVG. For crisp and clear visuals, you have some style options to manage the spacing and visuals and the advanced settings are the same. So these all where the probe visits that you get with Elementor Pro. Along with this, you also get some site visits with the element or team builder. Let us also see them here. The first one is site logo reject. It is a dynamic verdict that is used to insert the website logo. You wouldn't be able to change or replace the logo from here, but you can customize the visuals and design aspects up to a certain extinct. Next is site title widget. It is also a dynamic wizard that displays the site title that is assigned in the WordPress customizer. And here as well, you can adjust the design and visuals of the title. Next wizard is page title. It displays the page title that is assigned in the WordPress page editor. Next is Nav Menu. It is the same as the left menu that we discussed before in the probe digits. Next is search form widget. It helps in adding a search bar anywhere on the website. Next is the sitemap, which it, it creates a structured, organized and accessible SML sitemap of the website, which provides visitors and search engines and easy one-click access to the list of pages on the website. Next, you will get a widget for Yoast SEO breadcrumbs. Here you can insert the breadcrumbs to the web page. By the way, what is a breadcrumb? It is a type of secondary navigation scheme that reveals the user's location on a website. You must have seen this on an e-commerce store like this. Yes, this is a breadcrumb and you can add it by using Yoast SEO plugin, which is very useful for the on-page SEO settings of the web page. All right, so we are done with the application of deserts. And I believe that all these elements are basic, general and prove budgets are sufficient to develop the interactive webpage that engages the visitor and delivers a good user experience. I want you to spend a good time practicing all these budgets one-by-one for all the setting options that are available for every widget. Come on, take some time out and keep practicing. And still, if you need some more widgets to enhance the design capabilities of Elementor than there are lot many third party plugins that offered you more widgets to add the element of your choice. If you wish to explore, I recommend using the plugin set by Grochow blocks. That is a very good one to enhance the power of Elementor. But I won't recommend using more plug-ins on the website as it may slow down the loading speed and some of the free element or add-ons often give bucks leading to errors on the webpage. So be a bit careful in choosing the right set of add-on elements for Elementor. And most importantly, these visits are of no use until and unless you apply them to develop the design of the webpages that is ready in the designing tool, you have to use these basic general and prove widgets to develop all the web pages that you have already designed in Figma or Adobe XD. Simply knowing about the working of these widgets will not help. You have to apply the knowledge. So go ahead, use all these sections, columns, and visits to complete the development of all of the pages of the website as per the design that you have created in the designing. Good. All right, that's it to learn in this lesson and we will continue in the next video.
37. Setting Up The Menu: Now, you know how to develop a webpage using the element or widgets, and you already have the list of web pages, it is not time to create all the pages, complete the development and come up with the navigation menu. The first thing you have to do is to go to the reading settings here and assign the homepage and blog page. Select the static page option and assign the home as homepage and blog as post page. Click on save changes. Now hovered over the Appearance option and select menu. Here, you need to create a new menu by clicking on this. Give a name to the menu. I am calling it primary menu because it is going to be the main navigation menu for this website. In the menu settings, you have the option to automatically add a new page to this menu when created. But we usually prefer not to do this automatically. You can manually add pages to the menu as per requirement. So leave it unchecked. Then you have to choose the display location. Since we are creating the primary menu, select the location as primary menu and click on Create menu. You can add pages, boast, and custom links to the menu. Usually, you only need to add the pages and custom links. Under the pages option you have three tabs. Most recent view all iron search. You can click on View All to get the list of all the pages that you have created. Now, select the pages that you want to add in the menu and click on add to menu. This will add the pages to the menu. And here you can arrange the order of pages. Simply click, drag, drag, drag and drop. The order is changed. You can easily adjust the order by drag-and-drop. Now, how to create is sub-menu. To create a sub-menu, you'll have to drag the item a bit, right, and drop. That's it. Sub item is highlighted and it is now a sub-menu. You can even create more deep level submenu by dragging the item more right below the submenu item like this. Once you are done with the ordering, click on save menu to update and publish. Next is the concept of custom lengths. We use a custom link to create a menu option that may have an external link leading to some other webpage or to highlight a pop-up or just an empty link to organize the navigation menu processes. Very simple. Simply give the link a title or entered the URL. That's it. If you want to assign a blank link, then insert a hashtag symbol. There is one very important thing here in the menu setup. If you want to make a link open in new tab, how to do it, then? I don't see any option anywhere here. Okay. So how many of you have explored the screen options for every setting option in WordPress admin, area, hall, right? So here are the screen options to get the option of making a link open a new tab, you have to activate the option by going to the screen options. I hope you must have now understood that it is very important to explore all the options that are available on every setting. These from east to west to north to south. Spend some time exploring the WordPress admin area. You will enjoy it. Another thing here, you can create multiple menus to use on different locations, like in a footer or in some part of the webpage. So the processes seem, go ahead and start making the menus as per the requirement. And in order to customize the styling of this menu, we haven't learned the settings for header and footer in the next video. See you there.
38. Customizing The Header & Footer: We have learned how to develop the webpages using Elementor, and it's now time to learn how to edit the header and footer of the website. Keep in mind that the header and the footer remains the same for the entire website. So in order to edit the header and footer, you can make use of the team settings or as creative custom header using the team builder feature available in Elementor Pro. Let us learn the team options first as data available for free via using the Astra team. And it provides us some excellent features and flexibility to design the header and footer. Simply hovered over the Appearance option and click on Customize. This is the place where you can manage the team settings for different options like global values, header, breadcrumb, sidebar, and footer. Our desktop, you will find the name of the active team that we are using. The first option available to us is the global setting for typography, colors, spacing, and buttons. We do not need to use this because we have already done that required settings in Elementor. But if we want to use the team settings, you can assign the values here. Let us go back and the next option is the header builder. This is what we need to focus on in the Theme Customizer. It has the same functionality like Elementor, and you can easily assign the vertex to the primary header above and below header. Let us see them one by one. The first and the most important one is the primary header. You can adjust the height of the header and under the Design tab, you can manage the Bottom Border weight and color. Next, you can change the background color as per the design scheme of the website. And then you can manage the spacing via padding and margin settings. Then it is fully customizable. To see the list of available widgets. Click on the plus icon and v gate, a decent number of elementary widgets like account, then HTML, logo, primary menu, secondary menu, search bar, social icons, and custom widgets. You can easily develop the header by using these video. As for the design declared meant, let us place a logo at the left of the primary header. You can manage those settings of the logo from the left editing panel. These are the same settings like choosing the image for the logo, changing the site title, I'm choosing the site Eigen or fav icon. Next, under the Design tab, you can manage the typography for Site Title, Act, manage the spacing. Next, let us insert the primary menu on the right side. Click on it and the settings will open in the left panel. You can even manage the menu settings from here that we learned in the previous lesson. Create a menu, edit the menu, or change them in new locations. You can manage it very easily. Now, below this, you can manage the sub-menu worked and container animation, along with an option to enable item divided. Under the Design tab, you can choose the menu Harvard style hand. These are really good ones to use. You will find some more settings and alluded to the sub-menu container, the color settings for the menu links under normal hover and active mode, hydrography settings, menu spacing and margin. Everything can be customized as per the design requirement. Next, you can add a button and design it using the editing options. I'm sure you can now manage these general colors, typography, and spacing settings to develop the element. As per the design department. Usually we keep only these widgets in the primary header. You made it placed the button with social icons and you can even make use of the above header section. Let us place the social icons here at the right. In the carbohydrate section. You can manage the genital and design settings to customize the visuals. By the way, you can manage the height, colors, and spacing for the above header as well. Feel free to add the required widgets here or in the below header section. Well, one more feature that we get in the free Astra team is that transparent header. Yes, it is a very good one. In their transmitter antenna. The hero section starts right from the top of the beach and the header is placed above the hero section, which gives a modern look to the website. Click on Enable on Complete side and the options will open up. You can disable the transparent header on certain post AMP pages if required. You can also choose to enable the transparent header on both desktop and mobile, or desktop and only mobile. You can even use a different logo for the transparent her dead if required. Under the Design tab, you can adjust the bottom border, background overlay colored, and the color settings for the menu and other header options. But be very careful with the color settings by using a transparent header because the hero section will act as the background. And so you need to choose the color scheme with the right contrast to maintain proper visibility of the links. Click on Publish here at the top to save vt, it's not over yet. When you change the device state to mobile, you get some more widgets like the toggle button, Andy off Canvas section. You can customize the toggle button for glucagon field. And in the off Canvas settings, you can choose from the different Canvas appearance styles, position, and alignment. You can adjust the colors under the Design tab. If you wish to add more widgets in the off Canvas section, click on the plus icon and select the required widgets. So in this way, you can customize the header design using the Astra Theme Settings. And I must see that these settings are quite powerful. Once done, click on Publish and lexico back. Now, the next option in the customizer is to enable the breadcrumbs if required. Next, we have Settings and alluded to the blog and vivid learners in the upcoming videos. So let's skip it here. Next option is to manage the site BOD, and it is more of glass managed on the page level itself. So let's leave a kid. Next one is the footer builder. This is important. Just like Ve created the header, we can now easily develop the footer as well. Here also, you get the primary footer and above footer and a below footer section. Click on the primary footer settings and you can manage the number of columns, layout, width, and alignment. And under the Design tab, you can manage the colors and spacing. Same for the above and the below footer section as well. Now click on the plus icon to add the widgets to the footer. And I believe it is now an easy task to develop it. Then you have some empty widgets and let us see what all you can do that then. Let's start with number 1. Here on the left. In the settings, you can assign a visit to this visit section from a list of options. You can choose from archive, audio player, calendar categories, customers, DML, liability of safe sections, gallery emerge, modelings, navigation menu, list of pages, recent comments post RSS feeds, a search form, back load, ext, or a video. Well, some of these visit options are outdated, but still you can use the text and image and design the custom widget. Rest all important widgets like the social likens, the footer menu and copyright tag is already available to use. You can relax as the copyright tag contains the short code to automatically update the year. So you can design the filter with a simple drag-and-drop interface. And don't forget to optimize the folder for mobile and tablet as well. Also keep in mind that the header and footer will remain the same for the entire website. So design it accordingly. And these all are the Astra Theme Settings for the header and the footer. Now, let me tell you another simple way to create the header and footer for the website using a free plugin gondolas element off head that footed and blocks template by brainstorm force. Let us quickly install this plugin and here and that appearance given find the settings for this plugin. Click on it. Now click on add new. This is going to be a custom layout, will be injected to the theme. Give this layout our title. Now from the type of template, select folder. Then select to display on entire site. Now click on Edit with Elementor. Here, you can design the footer using the section columns, ang widgets provided by element odd. Yes, the same way as you develop a web page. This method might be more convenient to you as you are already comfortable using the element or widgets. The footer can now be easily developed as per the design requirement. And when you nor does the widgets area, you will find that this plugin has added some more widgets that are of use to create a header and footer. So you can utilize the power of Elementor here and create a wonderful filtered using this free plugin. By the way, you can create a header following the same process. Simply create a new custom layout and select the type as header and displayed on entire website. Now, designed the header using the element DOD widgets have liberal in the left panel. Make use of the header footer blogs and widgets to make the task easy and smooth. Come on, go ahead and give that a try. Designing your first header and footer font of factors website. So these are the free team and plug-in options that we can use to customize the header and footer. And if you wish to get some advanced header and footer designing options, then you need to subscribe to the paid ones like the Astra Pro or Elementor Pro. Astra Pro is an extinction of the Astra team. To enhance the capabilities of the free version. Using this, you will be able to create advanced headers like a sticky header or a mega menu. A sticky header is one that sticks to the top of the screen when a visitor school stone the web page, it is a good one to use as it provides quick access to the navigation menu without having to scroll up again and again. Next year. Advanced feature is a mega menu. It is an organized form of a large menu, or you can see a visual form of the menu. It is also quite effective in terms of impact and user interface. These are the two main advantages of using Astrup true for billing Header and Footer. And apart from this, you get some other features related to epigraphy settings, layout management for a single post and blogger gave speech Andy option to our custom layouts on the website, which basically means injecting custom HTML codes in different parts of the website and web pages. That custom inclusion and exclusion rules. The custom layouts are useful when you have to integrate your website with other tools like Google Tag Manager or facebook pixel. Overall, it is a good one to subscribe, but we have another premium option to create the header and footer and died this Elementor through. Well, Elementor is not just a beach builder, it is a very powerful team builder and a landing page builder with powerful customization options. Using this, you can easily design a custom header footer, single post page template, blog archive page template, searches and speech and edit 400 four page. You also get access to a huge liability of templates for the header unfiltered. And you can import these designs with just a single click. Well, there are so many features and benefits of using Elementor Pro, but in this lesson, let's focus on grading the header and footer. Only. The process of grading the iodine food or using Elementor Pro is almost the same like editing of the page. You can click on, Add New under the team builder options, select a template type as haggard, give it a name and click on Create. You can select the Templates here to save time or blue set to build from scratch. Now, just like the header footer blocks plugin, you can create a section, use the site widgets and other element or widgets to create an awesome customized header for the website. As you already know, you can customize every part of the section and please the desired widgets to develop the header, Asperger designed a glutamate. You can also stick the header using the stick option and adjust the negative margins to manage the transparent header effect. You also get some pointer options to highlight the menu in Elementor Pro. And you can also create and above heterosexual and below header section. Once done, click on Publish, click on Add condition. You can mention their display rules if required. Like we generally hide the header and footer on landing pages. Once done, click on Save and Close. That's it. A fully customized header is created for the website. Next, to create the footer, processes seem. Create a new layout, select folder, give it a name, design it, assign the condition, and save. That's it. If wanting in mind that while designing the Footer Bar, make sure you use the current date dynamic tag for copyright year to update automatically in the food desert. And one more thing, if you wish to create more advanced to mega menu for some website, then there is a powerful plugin called us inject menu by Grupo blocks. It is a big one, but you can use it to create a super awesome mega menu for the website. Like I said, you can customize the design of the website in whatever way you imagine. And that too, without any coding. So just go ahead and design the website in the designing tool and built it with Elementor using the simple drag-and-drop technique. That's it to learn in this lesson and we will continue in the next video.
39. Fundamentals Of A Blogging Website: So do you really want to become a successful blogger? There isn't a personal blog that you want to write or is it to support the business website or e-commerce store? Whatever be the purpose. The concepts we're going to learn in this lesson are applicable to both a dedicated blogging website or a blog to support the business website. Usually, we create a blog to provide fresh, unique, informational and engaging content to their visitors. Since the content we publish on a business website is static and not changing, we need to have a blog section on the website to keep providing the updating content so that the visitor is tempted to visit the website again and again for the new information, a blog is a very good source of traffic and the repeat visitors on the website. So make sure you follow the concepts to set up a blog to support the business website, or set up a dedicated blogging website. You can easily set up a blog by just following a few simple steps. Since you now already know the steps to buy a domain name, buying a hosting plan and installing WordPress. You also know how to install the themes and plugins. And themes and plugins are of use to you. Now, you have to just select the Add New boast option here, give a title to the blog post and start writing. That's it. We haven't been learning more about the blog archive page design and single post design in the upcoming videos. And in this video, let me tell you some fundamental concepts of becoming a successful blogger. The first step is to select the right topics for the block. It all starts with the topic research in your industry are niche. For this, I recommend you to stay updated on social media and make use of tools like Google drinks or exploring topics. You can also stay updated with Reddit or Cora to come up with the latest consumer discussions, impressed and questions. You can also use tools like BuzzSumo to come up with a trending topics. By the way, what does a blog post? A blog post is usually the long form of content. And there is a golden rule in the digital marketing industry that good content and great visuals together build a great long form post that is engaging for the visitor. So to write an epic blog post, you have to provide informative content that is valuable for the reader on a page that is beautifully designed using the right colors, forms, and spacing. You can also include a table of contents to ease up the navigation process and make a deliberate use of radios, data visuals, and infographics to engage the visitors. However, the biggest question for everyone who wants to get started with blogging is how to make money with a blog. There can be multiple sources of revenue. But if I tell you that two primary ways to make money than these are number one, the ads and number two, the affiliate marketing. Ads are generally the banner advertisements that are shown on the blog post. And you can register for Google AdSense to show these ads on your blog. You can earn money either through CPC, that is cost-per-click. It means you get paid for every click on the ad on your blog post. And the other one is CPM, that is cost per 1000 impressions. Here, for every 1000 impressions of the banner, you will get paid a certain amount. Next is very powerful line or does the affiliate marketing? It is the process of earning a commission by promoting other people's products. Just like you must have seen bloggers promoting hosting services like Blue Host n-side grown, and they provide you a link to buy the hosting plan. When a reader clicks on that link and buy the servers, the blogger gets a commission from the hosting company. So you can promote the products through text and adding a unique trackable link that is provided to you for the product. If a buyer clicks on the link and buy the product, you will earn a commission. That is a very powerful source of making a very good income, as it is very exciting process to educate the customer and promote the product. It is a win-win situation for all the three people involved. Like you get an opportunity to create quality content and educate the buyer about the most valuable products. The buyer gets complete information about the features and useful details. Comparison at a single page. If the buyer clicks on the link and complete the purchase, the company gets revenue. And so in return for your efforts, they pay you a commission. Trust me, it is a very powerful source of income and you can promote products on your blog very easily by sharing quality content, educating the visitors, and providing links in the form of text and banners. In order to earn money via blogging, you need traffic on the website. So how to get traffic? This is $1 million question. Let us discuss some ways to get more visitors to the blog. The simple way to make sure that people visit your blog is to make sure that they are aware that your blog exists. You can promote your blog on social media or via paid ads on search engines and social media, or optimized the blog for searching and rankings and some other ways. Let us start with social media. Social media interaction is important. You get an easy access to millions of people who in turn may shared her blog post with their friends and family. All you need is to share quality content that is useful for the readers and provide value to that knowledge. Ang time. Also, since you want them to know about you, you can make it easy to share your blog by placing relevant social media share buttons on the blog post. That is a trick here. It is seen that blog post between 100 to 2 thousand words gets the highest shared on social media. If you see it other ways, this can be validated because the more valuable and informative content you provide to the visitor, the better you will be engaged and encouraged to share the content. So tried to publish long-form blog post. You can also comment on related blogs. The key to this strategy is to make sure that your comment actually add something of value to the post. It works well when you're just getting started. And even the fewest of traffic is of value to you. Next are the paid ads. Paid ads are not the cheapest of methods, but sometimes it is the most straightforward way to get the initial traffic. Start running paid ads and make sure that people see your blog when they search for certain terms and browse certain topics, and don't forget to build the e-mail list by placing a subscriber form on the blog, you will always want that repeat visitors on the blog. Email marketing campaigns can be a consistent reminder of your blog. Simply prepared a newsletter, send it out to the subscribers, and soon you will see a great increase in the number of repeat visitors. Now, you must be wondering how important is SEO or search engine optimization to get traffic. Yes, that is the most valuable source of traffic for a blog. So what is SEO? It is the science of making sure that your content is visible first on a search engine results page and via CEO. Because people tend to choose the top results, the higher you are, the more likely they will click on the link to your blog. And if you want to know how many people are searching for the keywords related to your blog. Create a free Google Ads account to Keyword Planner and explored the keyword search volume across the different countries. This will give you a better idea about the search volume and the probable traffic that you can get on the blog. And if I tell you some simple tips to optimize the blog for SEO, it will start with the keyword search only. You have to come up with a list of keywords that people are searching related to the topic of the blog post you are writing. You can also come up with the list of high volume and potential keywords in your niche on industry and write a blog post related to those topics. You have to make sure that you use these keywords in the content, in the headings, in the paragraphs, and use it in the natural v. Du include the primary keyword in the post title and in the first few lines of the content body. Also use related keywords and do not try to do keyword stuffing. Keep only the appropriate keyword density. You can also use LSA terms in the content to make it more relevant. Next is to optimize the Meta titles and Meta descriptions. These are the titles and descriptions that a visitor sees on the search engine results speech. You need to make sure that you include the primary keyword in the title and in the description. Here, you need to explain what your blog is about and make it look attractive and valuable to the reader so that DEA, tempted to click on it. You can easily assign the Meta titles and Meta descriptions using the used SEO plugin for WordPress. You will find the settings for Yoast SEO on every blog post or webpage. Next, very important factor for blog SEO is the user experience. It is affected by several factors like the design and layout of the blog, navigation, loading speed, and responsiveness. Next factor is to analyze the competitors and keep a check at the top ranking competitors and tried to understand what they are doing better, you can get inspiration and ideas from the competitors. The last universal factor to success in the blogging is to deliver value. Whatever content you publish, either on the website or the blog, it should deliver value visitor that is the eternal but to success. And you can also repurpose the content, like if you have a distinct popular blog post, you can transform it to a YouTube video or a podcast episode, or presentation or info-graphics. Because it is validated that the topic and the content resonates well with the people. One more thing here, you can share your blog post on Reddit and Quora as world and try to make use of social media as much as you can. So that's it to learn in this lesson, and we will continue with more block settings in the next video.
40. Single Post Settings: In this lesson, let us learn how to create a blog post and how to design the single post page to create a new post, hover over the post option and click on add new. It is the same process as creating a new page. You can assign a title to the post and let us see the settings on the right. First is status and visibility. Here the options are the same and you have an additional option to stick a post to the top of the blog, like a featured blog post. Next, you can edit the permalink or URL. This can be edited after publishing the post as well. Next, you can add categories and tags. Do this post. Now, categories and tags are very important from a blog point of view. Let me explain it why categories and tags both help in structuring the content. Categories, helped to broadly group the post topics, while tax helped to describe the post in more detail. In short, categories are the most general method of grouping content on a WordPress site. A category symbolizes a topic or a group of topics that are connected to one another in some way. Sometimes a post can belong to many categories at the same time. However, it is perhaps not the best idea to assign more than two or three categories to one post. The point here is to have your content neatly organized in a way that makes accessing it easier for the reader. For example, a digital marketing blog can have categories like content marketing, SEO, social media marketing, web analytics, designing and board. On the other hand, tags are used to identify a piece of content by some specific keywords. Simply pick a few words that describe a given post in the best possible way. The main difference between categories and tags is the way you use them. The categories are meant to indicate the January of the post. And tags, on the other hand, go much more in depth and indicate the individual things that the post talks about. Therefore, you can use multiple tags with a single blog post. Keep in mind that categories and tags are represented by the term taxonomies in Wordpress. Next, you can add a featured image. And it is very important because it acts like a thumbnail in the blog archive page. Next, you can insert a post exert, which is basically a summary of the blog post and it is usually visible on the poster archive page. If excerpt is empty, WordPress automatically creates an excerpt using the first 55 words of the post. The next options work the same as for a page. Now, designing the single post page is an easy task as you can use Elementor to design the page as per your requirement. However, there are some settings related to the structure of a single post page, which is not that easy with a free team like Astra. To customize it, we need to go to the customizer from the Appearance option, select the blog option here, and select Single Post head. You can modify the structure of the single post using the theme settings. However, there are very limited options to customize the structure of the single post. Here, you will be able to adjust the vert and manage the order of structured and metadata of the single post page along with the topography settings. That's it. And if you use Astra Pro, then you will get a bit more options like to enable or disable the author info, auto load previous post, adjust the size of the feature to merge the color of the title and spacing of the container. But still, you are not able to customize the featured image position, and layouts, as we see in modern day blog post. So these are the limited options you get to customize the look and feel of the signal post using the theme settings. On the other hand, if we are using Elementor Pro, then you get more flexibility to design the single post layout. Let us see how you can design a single post with Elementor Pro. One thing here, before creating an element or template for single post, make sure you publish at least one blog post on the website. Hovered over templates option and select team builder or else simply click on Add New and select Single Post as the type of template. Give it a name here and click Create. Now, you will have an option to juice some pre-designed template. And these are some very beautiful up-to-date layouts that you can easily import. So simply click on Insert and it will be available to edit. And if you wish to create a template from scratch, you can definitely close the library and start designing the layout. The basic structure of a block consists of the head section showing the featured image, post title, author, NFO, and metadata like date, tags and categories. Make sure you have one blog posts published before creating this template. Now, click on the Preview icon here. The Ivan, and click on Settings. In the preview settings, select Preview dynamic content as post and type the post title to select. Click on Apply and preview. Now here we will start designing the post from scratch by using sections, columns, arranging the content in the required design by making use of the dedicated post visits like post title, that will fetch the post title from the one we selected to give us a preview while creating the template and others. You are free to design the poster template as whether design requirement using the widgets and once done, click on Publish, add the condition to include it on post, and finally, click on Save. The Post Template is created and now whenever you create a new single post, it will be displayed in this format. You can create separate templates for categories and authors if required. Elementor theme builder is very powerful and it gives you lot many options to customize the look and feel without any coding. Once the template is complete, we need to focus on designing the content of the single post. So let us now discuss some trending design ideas to design the single post page. First is to make use of Broca's Caps. You can do this very easily in Elementor. Select the text editor fade number tags, and select the drop cap option here at the bottom. That's it. It is a good way to start the post content. Next is to use the colored border. In fact, a singular colored border. It provides emphasis and it's great to use for quotes are particularly important aspects of the content. You can insert it either using the blockquote wizard in Elementor Pro Arte my grading a border only for the left direction of the section. You can also use the section background to lay emphasis to a particular piece of content. In fact, you should use a decent number of images and videos in the body content as it enhances the engagement of the visitor. And we also know that the post, which is in the long form, that is between 100 to 2 thousand words, that delivers the best performance and the best engagement for the visitor. So make sure you include the images, videos, infographics in your post, and create an engaging and high-quality content for the visitor. You can also use image shadows to stylize the blog page. It can be done under the style settings of the image widget. Next is to make use of the star text just below the main title of the post is used to give an emphasized start to the blog. Just insert a heading below the title. Next is to highlight the subheadings to appear creative and highlighted. It is useful in breaking down the monotony of convent reading. Make it appear creative by adding some background color. Also, make use of dividers in the content design by using the divider widget. Next option is to write a blog post title over a background image. Simply select a section background and place the heading widget on it. Next. And almost a compulsory style option is to use subscribed forms in the blog. It is important to build a mailing list and update the visitors about the new happenings, encouraging them to read the new blog post and visit your blog repeatedly. It can be done easily using the firm's Wizard of label in Elementor Pro. Next 10. Another important one is to have two actions in the post design, make it eye-catching so that you will get better conversions. There is even a dedicated budget to design call to actions and Elementor Pro. Next is to include social sharing buttons so that a visitor can easily share the blog with this community. This can be done easily by using the social share budget available in Elementor Pro. Another factor to consider for the ease of navigation and SEO point of view is to create internal links in the body content. You can easily add links to the texts in the text editor and adjust the settings to open it either in the same window or in a new tab. Lastly, always include the related post section at the end of the blog post. This can be done by creating a new section and adding a heading and subheading. Then place the post layout wizard and select the custom settings to modify the appearance of the post. So these are the tips and the design ideas that you can easily implement while designing the blog post. That said to learn in this lesson. And we will continue with the blog archive page settings in the next video. See you there.
41. Post Archive Settings: Once you have started writing blog post and design the single post page, you need to design the blog archive page is the page where the entire collection of blog post is listed. The archive page displays a list of paused and serves as the catalog for post. Now, to customize the look and feel of the postdoc gave page, let us start with the free options have labeled to us. Let us go to customize, select Blog, and select the art gave option. Here, you can adjust the width, structured ordering, and just a few Typography settings. That's it. No significant customization option of label in the free as a team. Next, you can try the Astra Pro version. Here you get some options to select the layout, number of columns, manage the spacing, enable the date box, manage the post excerpt size of the featured image colors, Paypal graphy, I'm spacing. But in order to fully customize the posts are gave beach. You need to use Elementor Pro, head over to templates, Agnew, select the archive dividend name and create. Here again, you can import some pre-designed templates to save time or else you can start creating it from scratch. You can click on the Preview icon, go to Settings, select a recent post as the dynamic content to preview the archive page. The processes same and you can create sections and columns and use the widgets to design that template. Once done, click on Publish, add the condition to show on all archives. That's it. You have designed a wonderful post archive page. And creating an awesome posts archive page is important if you want to have a strong impact on the visited. So go ahead, set up the blog for the business website or start your professional blogging site. That's it to learn in this lesson and we will continue in the next video.
42. Creating A Landing Page That Converts: At the start of this lesson, I want to ask you, what is the difference between designing a general web page and designing a landing page? Well, obviously there will be differences in terms of layout and content. But keep in mind that the most significant difference is in purpose and action. A landing page is the page where you sell products, get leads AND gate conversions. Landing pages are focused to specific actions and should have a clear messaging in the content. The goal of a landing page is to move website visitors down the sales funnel. Depending on the sales strategy it might generate leads that the marketing beam can nurture, get users to start a free trial of the product or convert visitors into prospects that the sales team can pitch. So let us try to understand how you can come up with an effective landing page in the minimum possible time using Elementor. The process of designing is almost the same as a regular webpage using the same widgets, sections, and columns. But what matters the most year are the fundamentals of designing the landing page. Keep in mind that you have just seven seconds to impress the visitor and converting orders, you will lose a potential customer. So try to design the landing page that has a very strong first impression. Feel free to add social proof in the hero section above the fold, if required. Always lead with action on a landing page, solve the visitors problem straight away. You can also make an offer. They can't refuse, offer them deals, instead deals, time-bound deals offered them discounts if good business model allows. But always keep and urgency factor or else the visitor may not take the action. You can also educate the visitors in some meaningful way. Don't highlight the features in stirred BM faces to the benefits that customers will get from your offer. And avoid too much information, we need to convince them to take action, but do not extend the length of the page unnecessarily. Do include social proofs as much as possible and provide a CTA after every step of messaging. You can also try the concept of problem agitate, and solution in the main content section. Start with the customer's pain points or problems, then highlight how annoying the problem is and then P's them with the solution. After this section, you can come up with their transition section. It does that transition from the problem to the solution within offered. 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 on what to do next. That's it. Reduce any sort of complexity and friction in the contact forms. Tried to come up with simple forms with the clear messaging. Most importantly, make sure the landing page is optimized for different devices. Well, I have quickly shared a lot of concepts and fundamentals. Now, you can experiment by applying these concepts while designing a landing page. For example, you can start a page with a catchy headline and sub-heading along with impactful image to have the first strong impression on the visitor. Tried to include as many social proof as possible, have a clear description with some offer and urgency element, along with a powerful CTA. You can highlight guarantee also if available. That's it. This could be the content plan for your landing pages. Now, let us see how to create a landing page in WordPress using elemental processes, simple and same. Let us create a new page, give it a title. Now, we generally need to disable the header and footer for the landing page as we don't provide much lengths to avoid distraction. So you can disable them from the Settings menu here in the right, if the header footer are created using team or else you can add exclusion rule in Elementor theme builder or header footer blogs plugin to hide the header and footer on the landing page. Now, edit the page with Elementor. The designing process is same as a regular webpage. So simply use the element or widgets and design the landing page. Make use of call to actions, foams, and timer if required. You can also make use of animations to emphasize some elements. And if you want to speed up the process of designing a landing page, you can use the pre-designed templates that I've labeled in the element or Template Library. You can preview the designs and import the complete landing page with just a click. Simply make the required customizations in text and graphics and your landing page is ready. Don't forget to integrate your e-mail marketing tool. If we are using burn with the Form Wizard to automate the e-mail marketing process. You can also create a reference library by taking screenshots of landing pages of label on a variety of websites and platforms like Behance, Dribbble, and aborts. These references will help you in getting inspiration and ideas. You can also explored that template options of labeled at and UE2. So creating a landing page is an easy task for us now, using Elementor. Along with the landing page, you must also create a thank you page. It is the page that loads up when the visitor submits the form? Yes. After submitting the form, the visitor shall be redirected to the thank you page so that you can start the lead nurturing process. You can also place the conversion tags on the thank you page to fetch the data of conversions in Facebook ads and Google ads. The process of creating and designing the thank-you page with Elementor is the same. I believe you can easily do it now. So that's it to learn in this lesson. In the next video, we're going to see two very important concepts that are related to landing page number one, using the pop-ups for lead capturing and integration of email marketing tool with Elementor forms for automation. See you in the next video.
43. Popup & Automation Tools: The main purpose of a landing page is to capture leads and get convergence. We can use the firm's budget of label in Elementor Pro and design simple and beautiful and very effective forms that have minimum fields, cleared labels and clear messaging. But what are popups? A pop-up is a small window that appears while browsing a website or on clicking a button. Pop-ups are helpful because they simplify that decision-making process for the visitor by increasing the visibility of the action step. So we can either use a form inline with the content by simply placing the object or else we can assign a pop-up on the CTA button. When the visitor clicks on the button, a small window will pop up and it will contain the form to capture the lead. This is the first thing. Let us see how you can create such a pop up using Elementor Pro. Go to templates, click on pop up, give it a name, and click Create. You can select some pre-designed pop-ups from the library or else create one from scratch. Let us create one from scratch. The first thing you have to do is to adjust the dimensions of this pop-up Canvas. To do this, click on Settings here at the bottom, and you will come to the pop-up settings. Here, you can adjust the width and height. Position enable disable the overlay and close button. You can also assign the entrance and exit animation. Then come to the style tab and change the background color. You can adjust the opacity here to have the transparent effect and show the landing page in the background. You can use the overlay as well and customize the close button. In the advanced settings, you can set the time, enable and disable the closing on, overlay or Escape key. The options are easy and I believe that you can now manage these things as per the requirement. Now designing the pop-up is again the same thing. Click on the grid icon to go back to the widgets panel. Simply insert a section with a single column or two columns and start adding the widgets as per the design of the pop-up. The most important widget to use here is the form visit. Setting up the form fields is as usual, but make sure you add that glues pop-up action under the action after submit for this pop-up. So once a visitor fills out the form on the pop-up window, the pop-up will close. Now published the pop-up and do not add any condition or trigger. Simply save and close it. Now come to the landing page and open the settings for the CTA button. Here in the link option, click on dynamic tags option, and select pop-up as the action. By clicking on this wrench icon, you can adjust the pop-up action to open and then select the pop-up by searching for the name. Once turn click on Update, you have successfully created a pop-up on the click of the CTA button. There is one more important thing here. Ideally, the visitors should redirect to the thank you page. After submitting the form. For redirection, You can add redirect in the actions after submit and enter the thank you page URL. So when a visitor clicks on the CTA button, a pop-up appears. The visitor fills out the form and when he submits, the pop-up is closed and the user is redirected to the Thank You page. On the thank you page, you can start the lead nurturing process and you can also place the conversion tags to get the data of conversions in Facebook ads and Google ads. You can use the same process for redirection for every lead capturing form, whether it is an inline form or a pop-up form. Well, we have some more types of pop up. The next type of popup that is important for us to learn for landing pages is the exit intent pop-up. An exit intent pop-up is triggered when the visitor moves the cursor near the close button or address bar of the browser. It is used to reengage their visitors before they leave. A well-timed pop up gifts you second opportunity to connect with the visitors, effectively doubling the chances of converting them. Let me explain you the process. If a visitor is not convinced by the content on the landing page, he will move the cursor towards the closing tag. What if you present them a pop-up ad this moment with a clear messaging and lead capturing form. To give a second thought to the offering. You can even provide him some additional offered to encourage conversion. This type of popup that appears when a visitor tries to close the page is called less VD, the exit intent pop-up. And keep in mind that it is going to be very important for your landing page. If we see the content plan of the exit intent pop-up, then it should have a CTA title that introduces the offer, followed by CTA text to explain the offer, then the lead capturing form, it discouraging no option encouraging submit button text and image to capture attention. A close veteran and the size of the buffer is preferred to be fullscreen with the mild transparent background. Keep in mind that this pop-up comes up and the visitor intends to leave the landing page without filling the lead capturing firm. Now, to create an exit intent pop-up processes seem. You just need to adjust the pop of width, height, position, and other settings. Design the pop-up. As for the content plan, click on Publish, add a condition, Jew singular. Then choose pages and search for the landing page title. So this pop-up will only be displayed on this landing page. Click on Next, and we will get options to choose the trigger. We want to trigger the pop-up on exit intent. So enable the option on page exit intent. Click on Next and you will get more settings to customize the trigger off the pop-up ang, segmentation. Click on Save and Close. That's it. You have created the exit intent pop-up for Lee capturing. Well, there are other types of pop herbs that are triggered based on time or scrolling activity or opt-in bars or interacting pop-ups. Although these are not recommended for the landing page, but you can definitely use any of the pop-up on any page of the website as per the design and strategy. And the process to create a pop-up is almost the same. You can simply assign the conditions and triggered as per the pop-up type. That's it. Now, the next thing we have to learn is the e-mail automation process. I will give you a quick overview of this process. Once a visitor fills out the lead capturing form, his details will be received to you on the e-mail. But we also want to put his details in the audience list of our email marketing tool. By adding the visitor in the e-mail marketing tool, you can send them an automated e-mail just after the form submission and even send them a series of emails as per the automation email sequence. Well, this can be done very easily using the Elementor forms. You can integrate the elemental forms with some of the popular e-mail marketing tools like Mailchimp, converted, drip, active campaign, GetResponse or me LED light. The process is simple. You need to integrate the e-mail marketing tool with element or by going to Elementor settings, integrations and adding the API key. You can find the API key in the e-mail marketing tool and add in the element or integration settings, then click on validate. Now, you can set an action after summit as Mailchimp, for example, and select the audience list. So whenever a visitor fills out the lead capturing form has details are added to the Mailchimp audience list. And you can automate the process of sending e-mails by creating an email sequence. You are free to choose the required email marketing tool as per the feature needs and your budget. Mailchimp is widely used convert good as preferred by bloggers and creators. File Miller Lite is the most economical one, but with a very good set of features. It depends upon your requirement, but make sure you use the e-mail automation process to nurture the leads. And VonMar saying, if you want to use some e-mail marketing tool which is not available for direct integration with Elementor forms, then you can use Zapier and create the automation process. Feel free to explore Zapier. It is a very powerful tool. With this, I would like to end this lesson and we will continue in the next video.
44. Google Tag Manager Integration: Moving further in the course, you need to connect the website with other analytics and marketing tools like Google and Facebook. So let us start the integration with Google products first. In this lesson, we will learn how you can implement Google Tag Manager on the website. By the way, voters Google Tag Manager. To understand this, let us first understand for tests a tag. Now, this tag is different from the one that we learned in blogging section. Well, Taxol snippets of code which are added to a website to collect information and send it to analytics and tracking tools. You can use tags for a variety of purpose like scroll tracking, monitoring forms on missions, conducting surveys, generating heatmaps, remarketing and retargeting campaigns, or tracking how people arrive at your website. They are also used to monitor specific events like file downloads, lakes on certain links, or items being removed from a shopping cart. Well, this was a bit on the technical side, but we all know that this data is very important for the digital success. So to make this task of adding tags easy for you, there is a Google Tag Manager. Google Tag Manager is a tool with a user-friendly and web-based interface that simplifies the process of working with tax. Instead of adding separate tags for Google Analytics, search console and Google arts conversion tracking, you just need to add Google Tag Manager code to their website and all the other Google products can be integrated by just using the Google Tag Manager. And less quotes on the website means what? It means the website will load fast, you will get faster loading speed. So let us see how you can set up the Google Tag Manager on the website. Make a search for Google Tag Manager. Here, click on get started for free, login with your Google account. Here, click on Create Account, give the account a name. Select the country. Next, give the first container a name. By the way, what is a container? A container sets the rules for a particular domain. So here you can assign the name as domain name for easy identification. Select the target as web. Click Create. You can happily accept the terms and conditions and if you want to read it, then you are free to read it. Click Yes. Now, here are the code snippets that we need to add on the website. There are two sets of quotes that we need to add. The first one is to be added in the Hague part of the page and the other one in the opening body tag. Although I have told you that we will be creating the website without any coding, vite and Saudi, You just have to paste these two set of codes on the website. And it is a very simple task. Let us see how you can add them to the website, copy the tag, and come back to the WordPress admin area. We will be using a plugin Header Footer and post injections, install it and activate. Now by using this plugin, you can add the courts to the website in the head part and body part for the entire website. You will find the settings for this plugin here under the Settings option. The code that we had copied is to be added into the head part of every page of a website. So simply paste the code here. Same, copy the next one, and paste it after the body tag and click on Save. Now, come back to the Google Tag Manager dashboard, click on submit to submit a container, you can assign a version name and click on Publish. Now to verify the activation of this tag, we will have to use a Google Chrome extension called us google Tag Assistant. Install it from the Chrome Store. Click on Enable and refresh the page. Now here you will see that the tag is fired and we have successfully integrated the Google Tag Manager that the website. So in this way, you can easily integrate Google Tag Manager with the website by using a simple plug-in. We will see how you can use Google Tag Manager to integrate Google Analytics, search console and conversion tracking tags with the website in the upcoming videos, stay tuned.
45. Google Analytics Integration: Integrating the website with Google Analytics is almost a compulsory step in the website creation process. But why? What is Google Analytics? Google Analytics is a free web analytics tool offered by Google to help you analyze the website traffic. It provides you the usage data of your website and helps in answering questions like, how many people visit your website? Where do the visitors live? What websites are sending traffic to your website? What marketing tactics driving the most traffic to the website? Which pages on your website are the most popular? How many visitors have you converted into? Leads our customers where they'd got converting visitor gun from and go on the website. How can you improve your website speed? Vd block content. Do your visitors like the most? So now let me ask you, do you want this data that can answer this questions? Tell me yes or no. Well, it's a very big yes. Everyone needs this data because data is bothered. You can analyze the current traffic and optimized their website, go the website traffic, improve the ROI and grow their reach business and whatnot. So we need to use Google Analytics and let us see how you can integrate Google Analytics with the website. The process now is very easy because you have already installed Google Tag Manager and you will be implementing the Google Analytics using the Google Tag Manager interface. Let us login to Google Tag Manager. And in the other tab, open Google Analytics. By making a Google search. Here, click on start measuring. You will have to create an account first, give the ensemble deliver name, scroll down and click on Next. Give the property or the website in name, select the reporting time got NC, click on Next, select the industry, business size, make the selections and click Create. Teach the country and accept the terms and conditions. Click Save again here, VD to set up the data stream. So click on web, enter the website URL and assign a name. Click on Create stream and copy the measurement AD. Now come back to the Google Tag Manager works BY screen and click on add new DAG. Click on Tag Configuration here, select Google Analytics GA for configuration is the measurement ID here. Next, click on that triggering and click on all pages. Give this a name and click on Save. Now again, we need to submit the changes. So click on submit, assign a new version name, and click Publish. That's it. We have added the Google Analytics tag in the Google Tag Manager and let us verify it. Open the website and open the Google Analytics so that we can check the real-time report and see whether the user count is changing or not. Yes, I can see the count of a visitor and V have successfully added the Google Analytics to their website using the Google Tag Manager. Now you can use Google Analytics to analyze their data and traffic on the website. Feel free to explore more about Google Analytics. That's, uh, to learn in this lesson and we will continue in the next video.
46. Search Console Integration: In this lesson, we will learn how to integrate Google Search Console with their website. So what is Google Search Console? Well, Google Search Console is a free platform for anyone with a website to monitor how Google views their website and optimize the organic presence. This includes viewing the referring domains, rich search results, highest traffic search queries and pages, submitting the sitemap, requesting for indexing and getting to know the headers on the pages. It is an excellent platform to analyze the organic data of the website. So to integrate Google Search Console, make a search for Google search console and click on start. Now login with the same Google account as you have used for Google Tag Manager and Google Analytics. Now, you need to select the property type, enter the URL of the website in the URL prefix option and click on Continue. They had said your website will be auto verified using the Google Tag Manager because you have already integrated Google Tag Manager on the website with the same Google account. If due to some reasons you are unable to verify the property using Google Tag Manager, then you can follow the secondary method. Go to the settings in Search Console, click on ownership verification, click on the HTML tag, copy the tag, and paste this in the Yoast SEO plug-in. Well, Yoast SEO plugin is essential to optimize their website for on-page SEO and you are definitely going to use it. Then go to the Yoast SEO genitals attains, click on Webmaster Tools, paste a verification code here and click on save changes. Now click on Verify and the property will be verified. So start using the Search Console and analyze the different data and reports available. We will continue in the next video.
47. Google Ads Conversion Tracking Integration: So I came to know that you are running Google ads and you want to drag the date of convergence and run remarketing campaigns. Is that right? All right, so what are conversions? All the valuable actions that a visitor takes on the website and that is valuable for your business are called us convergence. It conversion can be, for example, subscribing to a newsletter, downloading an app, or buying a product. Conversion tracking helps to measure that defined conversions and assign them to specific sources. In this way, you can find out whether a conversion resulted from digital advertising campaign, a social media post, or some direct visits to the website. But tracking the source is very important. In order to drag the reserves, you need to set up the Google Ads conversion tracking tag on the website using the Google Tag Manager. Let us see how to do it. Open both the platforms, Google Tag Manager and Google ads now create a new tag and Google Tag Manager. Click on add new tag. Now click on Tag Configuration here, select the Google conversion Linkerd tag. In that trigger option, select all pages. Give this a name and click on save. Please note that adding the Google conversion linger tag is a onetime process. You will not be required to add it the next time when you add a new conversion tank. Now go to Google ads and click on tools and settings and that measurement, you will find the convergence option. Click on it here, click on the plus icon to create a new conversion. Select website and fill out the conversion details by selecting the appropriate category. After this, click on Create and continue. Now for the tax setup, click on use Google Tag Manager. You will get the conversion ID and conversion label values. Copy that. Now, come back to Google Tag Manager and click on add new tag. In the tag configuration, select Google Ads conversion tracking. Here, paste the conversion ID and conversion level. Entering the conversion value and other details is optional. Now click on triggering and click on the plus icon here at the top right to add a custom triggered. If you want to assign the landing page view as conversion, you need to select the pageview triggered type and fire that triggered on the specific page views. Select the base URL, contains, enter the domain and slack for the landing page. Give it a name and click on Save. Give it a name here as well, and click on Save. Now to update the container, click on Submit, give it a new version name and click Publish. That's it. You've added the Google Ads conversion tracking and now you can track conversions in Google ads reporting my using Google Tag Manager, you'd need not insert goats again and again to the website. Instead, just create new tags and Google Tag Manager and keep a track of the different conversion events happening on the website. All right, so we're done with this and we will continue in the next video.
48. Facebook Pixel Integration: Facebook pixel is yet another embodied an indication that you should do on the website. So what is a Facebook pixel? The Facebook pixel is a gourd, beg you please on the website to collect data that helps in tracking conversions. You can use Facebook pixel for conversion tracking, retargeting at creating lookalike audience, optimizing the Facebook ads for conversions, optimizing the Facebook ad for value and gain more access to duels data and metrics. So let us go to Facebook business manager and create a new pixel. Here, select the earrings management option. Click on Connect a new data source, select Web and get started. Select Facebook pixel and click Connect. Enter the name and website URL, and click on Continue. Select to manually add the pixel code to their website. Copy the code, and you can create a new tag. And Google Tag Manager selected tag type as custom HTML. Based of the gourd. Click on Advanced Settings under the tag firing Settings select once per page. And in that triggering options, select all betas. Give this a name and click on Save. Now submit the container for updates and assign a new version name. That's it. Now to verify whether the Facebook pixel is triggering or not, we need a Google Chrome extension. Golda has Facebook Pixel Helper, install it from the Chrome Web Store and refresh the page. Here it is, the pixel is tracking data and we're done with setting up the Facebook pixel code on the website. Now, you can track the standard events or create custom events from the Facebook business manager to drag valuable data that sector learn in this lesson and we will continue in the next video.
49. Adding Chatbot To Website: They'll live chat and chat boards are a great tool to use on the website. It is very helpful in capturing leads or provide a live chat functionality to the visitor. Although there are so many useful check plugins have labeled for WordPress and you can use them as per the need of the project and budget. In this lesson, let us learn how you can integrate Facebook Messenger on the website for live chat functionality. Go to Facebook page settings, click on messaging here, locate the AG messenger to the website option and get started. Customize the Messenger Settings, colors, alignment, and enter the complete URL of the website. Click on Save and copy the code. Now, paste this code in the header and footer plug-in after the body tag and click Save, vowel. Facebook Messenger is ready on the website. That's it. Another plugin that I recommend to use for live chat is crisp. You can get it from the plugin slide day the installer it, and follow the setup process. That's very easy. Crisp has a mobile app as well to attend the visitor queries anytime and anywhere using the mobile phone. And if you wish to use some chalkboard to collect leads, you can give a try to collect and R-chart or opt-in chat as per the features and budget. I am sure you are not familiar with configuring a plugin to use on the website. Come on, go ahead and give it a try. I will see you in the next video.
50. Website Creation Process In A Nutshell: So you now know how to use Elementor and WordPress to develop the website at a pixel perfect website without any coding. You also know the fundamental concepts, structure of a webpage, UI and UX, color theory, typography, copywriting, graphic designing, templates and differences, branding and designing process, WordPress AG Elementor. If I asked you to create a custom website from scratch, will you be able to do it? If I ask you to create a website and just Verna, will you be able to do it? And if I ask you to create a single-page website, will you be able to do it? Obviously, yes, you have done that feed proud of yourself because you can now do it very easily. Just follow the step-by-step process as per the requirement of the project and you will be able to complete the website project very easily. Led me to refresh your learning and recall some of the steps that we had learned in order to create a custom website from scratch. Or they start with the research and understand the business. Take a good brief from the client and analyze the competitors to build a reference library. Then developed a branding guide and take feedback from the client. After this design, the complete website, starting with wireframe and then with visuals like logo images and content on Figma or any website designing tool that you prefer. Make sure you keep taking feedback from the client at all the different stages of designing. Once the design is ready, you have to just make the WordPress setup and use element or visits to apply the design and develop all the webpages. Integrate the website with all the important platforms and tools and make sure you optimize the website for responsiveness and speed. That's it. That's the process of creating a website from scratch. This process could also include designing the landing pages or setting up a blogging website. And you are ready to handle both. Next, if there is a client with a very low budget or less time, you can even create a website for him and just one arm. For this, you will have to use templates. You can make use of starter templates by brainstorm force, that is for Astra Theme or else the Elementor template library both have awesome design templates. You can also use the templates available at Envato elements. All these website templates are well structured and organized so you can import a complete website template, make changes in the content in terms of text and images and the website is ready for the client. Just one our next, if you wish to create a single-page website, which is although not recommended from SEO point of view. But still, if you happen to create it, the process is simple. Follow the same steps to create a custom website, but with just a single page, that is the homepage. And for the menu, you can use custom links that scroll down to specific options. For this, you need to assign the SSS ID to every section that you want to scroll by going to the Advanced option. Do not add any space between the id. Now in the Custom Link assigned the menu label, and in the URL, enter the homepage URL followed with the CSS id slug, starting with a hashtag, complete the menu, save it. And here is the single page website. When you click on the menu options, you will scroll to the sections down on the homepage itself. All right, so I believe that you are now ready with the website creation process and we will continue in the next video.
51. Load Time Optimization: The webpage you're trying to open as loading. Please wait, it is still loading. Oops, sorry for the delay, but it is still loading. Please wait. It has almost loaded. Just a few seconds or minutes or hours. And finally, Haidt is the page loaded completely. Whoever hate to ask quite fast, only half a minute to load. What do you think? I'm serious on this? No, absolutely not. An ideal website should load under three seconds to provide a good user experience. And search engines also take up the page load speed very seriously as a ranking factor. So it is very important for us to optimize the website for loading time so that the web page is loaded preferably under three seconds, or ADHD are most under five seconds. It is important to speed up the website loading to ensure a better user experience. Reducing the page load time, reduces the likelihood of users getting frustrated and raising the bounce rate. Although we are using Elementor to design the webpages and the codes are automatically generated in the back-end. This is something out of our control to optimize the courts. And we have to depend on the element or architecture for clean quotes. And let me tell you, Elementor has done decent enough to deliver a good page load speed. But there are a few things that we can control and optimize to improve the loading time for a web page. By the way, how to test the page load speed for a webpage, any idea? Well, you can use many tools, but the popular ones are GD metrics pinned on and Google PageSpeed Insights. So come on, go ahead and check the speed of the most famous websites using these tools. And these tools also provide you suggestions to improve the page load speed. Let us learn some concepts that you can apply to come up with a decent page load speed. The first factor is the location of the server. If you're using some shared hosting plan, then try to choose the server location closest to the target audience. It improves the delivery of data from the server to the browser. Next is to use a CDN. A CDN stands for content delivery network, and it refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. Keep in mind that a CDN does not store the content of the website and it is not a replacement of the web server. It only stores the cashier virgins and deliver it fast to improve the page load speed. Next is to update the PHP version on the server. Always manually upgrade to the latest stable version of PHP for improved speed and performance. Next is to use a lightweight team on the website like Astra. Also remove all the unwanted plug-ins from the website or remove the plug-ins that are causing the website to load slow. Next is to scale the images for appropriate dimensions and resolution as having the extra large image is of no use to us, and it will only slow down the website. You can also compress the image using tiny PNG or else use the plugin like optimal or a tuple W optimizer to compress the images you upload to Wordpress. Remember, reducing the image file size is a very important factor in improving the page load speed. Next factor is to use some caching plugin. Page caching works by creating a static HTML version of your page to serve the visitors, rather than forcing your server to generate the page from the database and PHP files for every single visit. A caching plugin usually provides minification, browser cache, and G zip compression, as well as some good caching plug-ins are light-speed cache and WPA rocket. Here, light-speed is a free one, but WP rocket is a premium plugin, but it delivers outstanding results as compared to the other cache plugins. However, stay cautious on using these cache plug-ins as they sometimes break the website. And we often need to clear the cache at regular intervals to maintain the design of the pages. Well, if all these factors are not able to bring up significant improvement in page load speed. Consider upgrading to a good host or a higher plan, or simply go for the managed WordPress hosting on Cloud. That will definitely help in improving the page speed and keep checking the PageSpeed data using GET metrics being norm or Google PageSpeed Insights. And don't stop optimizing your aim the speed under five seconds. That's it to learn in this lesson and we will continue in the next video.
52. Website Launch Checklist: They'll, they'll then, I know you are excited to launch the website, but I want you to make sure that you have not forget anything or do something incorrectly. With this thorough website launch checklist, you can be confident that you have ticked all the boxes and your website is ready for the short time. There are a series of common task that you need to perform to get every website ready to launch. It is basically the best practices that every website needs to follow. Let us see the list. Number one is to check for the homepage. Check whether you have correctly assigned the homepage as home in the reading Settings. Number 2 is to make sure that you have deleted all the dummy content and Lorem Ipsum that came with the templates or sample pages. In fact, cleaned the list of pages and post and remove all the unwanted ones. Next is to deactivate or delete the unwanted plug-ins. Next is to double-check the permalink settings for URL structure that is set to post name. Next is to check the admin email address as all the important communication and form submission data will be received on this e-mail. Only. Next is to check the time zone. Next is to check whether the search engine indexing is not blocked. Next one is to cross-check the comments settings. Next is to check the site title and description. Next is to check the fav icon or site icon. Next one is to check the forms for submission using some tests entries. Next one is to create a custom 400 four page. Okay, so what does a 400 four page is the page that is shown when the visitor enters some link that does not exist on your website. You can easily create this using Elementor team builder by going to add new template, selecting Error 400 four page, giving it a name, designing it, publishing it by adding condition 404 page, that's it. Next is to set up a redirection of old URLs to new URLs using the redirection plugin. This is an optional one and use this only if required. Next is to ensure that SSL certificate is valid and URLs have HTTPS as protocol. Next is to verify whether all the internal links are working fine and data no broken links. This is very important from the SEO point of view. For this, you can use a Chrome extension called as SEO money on. Next is to check for the SEO title and Meta descriptions. Well, you can easily set the title and description for each webpage using the Yoast SEO plug-in. Next is to test the visitor data in Google Analytics. Next is to submit the sitemap and Google Search Console for indexing the site. You can copy the sitemap length from the general settings of Yoast SEO, then selecting features, clicking on the question eigen near XML sitemaps, clicking on the link, see the XML sitemap. Here, copy the slug only and log onto Google Search Console. Click on sitemaps and paste the slug. Click on Submit. That's the process to request for crawling and indexing the website on Google. Next is to ensure the e-mail marketing tool setup and integration with forms. Next is to check for the setup of legal pages. Although it depends on the legal requirement and jurisdiction of the country or place you are working. But still it is recommended to at least have the privacy policy page on the website and updated on the privacy settings as well. Next is to check and optimize a website for performance by testing the load time on GT metrics or Pingdom or Google PageSpeed Insights. In case the load time is higher, you can follow the suggestions to reduce the load time that we discussed in the previous lesson. Next is to have a backup plan to keep a copy of the website in case something bad happens, make sure the backup should use is working. Next is to secure the website using security plugins if required. Next is to make sure you activate the license of premium plugins for auto update feature to work. And the final checkpoint is to best, best handed test a lot on different browsers and devices to ensure that everything is working fine. So this is the website launch checklist and you can use it for all the websites that you create. We will continue in the next video.
53. Benefits Of Using Elementor Pro Vs Free: Elementor is no doubt the best Page Builder plugin of label for WordPress. Elementor. It's free version, offers limitless design possibilities. Elementor Pro, however, empower skew with more professional tools that speed up your workflow and allow you to get more conversions and sales. So should you bake out your wallet and pay for Elementor Pro, or will you be just fine using the free version of elemental? Let us try to understand the benefits of using Elementor Pro. Elementor Pro is technically an add on for the free Elementor plug-in. That is, if you purchase Elementor through, you will have both the free element of plug-in and the element or Pro plugin active on your website. First benefit of Elementor Pro is it adds around 13 more visits to build the webpage. These widgets help you in making the webpage design more functional and eliminating the need to use many third party plugins. For example, the form widget lets you build customized forms, right from the Elementor interface. The slider widget lets you include performance optimized sliders. And the postvisit lets you display your latest post in a grid without the need of any third party plugin. I would like to pay special emphasis on the forms visit here. Contact forms are an essential part of every website since they are the engines for conversion and lead. Elementor pros forms wizard is revolutionary because the entire process of managing them is visual. Design your forms on the front end, then connect them to any automation marketing platform or CRM of your choice for just a few clicks. Also from the design point of view, you can add animations and scroll effects to the website designed for a stronger impact with Elementor Pro. Next, if you are running a WooCommerce based e-commerce store, you will love the addition of a variety of WooCommerce specific widgets. The next benefit with Elementor Pro is that you get access to the full template library. We all know that Elementor comes with a very large template library, but most of the templates are locked in the free version and element or pro analogs. Then with element or row, you can use every single page template and block that is labeled in the library. This will speed up the website creation process. Next, you get the team builder with Elementor Pro, and it adds powerful new functionality to the website. With the Elementor theme builder, you can use the same drag-and-drop interface to build your, the entire team, including the header, footer and post templates, which otherwise is very difficult to customize with the theme settings. Also, you get the pop-up builder with Elementor Pro, which is important to capture leads. It will help in increasing sales and conversions. You can design the pop-up using drag-and-drop technique, assign conditions and triggers along with advanced integrations. And if you are a partial coder, I know CSS. You can add custom CSS that free Elementor, but Elementor Pro lets you directly add CSS ties to individual widgets or sections. If you like to use your own custom CSS, then this is a very big productivity boost. Next is global visit in Elementor Pro, global budgets will save you a lot of time if you're planning to reuse the same visit on multiple pages. So to conclude, you can be happy with three element or if you want to design a basic website with good content using a flexible team like Astra, you will be able to access the pre-designed templates using the starter templates plugin by brainstorm force. You can plan to upgrade to Elementor Pro when you want to create complex designs and landing pages, are using WooCommerce to set up an e-commerce store. Or if you want team builder and Papa builder and access to all the premium element or templates along with global visit and dynamic tags. So the best part with Elementor is that you can start with free and upgrade step-by-step whenever you feel like upgrading. All right, so that's it in this lesson and we will continue in the next video.
54. Cost Overview: One more thing that you must be wondering that how much total amount of money you will have to spend in order to build a website. Well, to understand this, let us divide the total cost into two categories. First category is the required cost, that is the compulsory cost, which is impossible for you to avoid. It includes the cost for domain name and hosting plan. Next category is the optional cost. That is the cost that you can avoid if you are willing to sacrifice on features and functionality. This includes the cost for themes and plugins. Let us start with the first category. And in it, the first thing is the domain name. Well, a domain name is very economical to get. The cost of the domain name depends on two factors. Number 1, where you register your domain name. And number two, what domain extension you want to use. The cost of a domain name can start from $5 and go up to $50 as per the choice of DLD or extension. But in general, a $10 dot com extension is recommended for beginners and most of the business websites. Next is the cost for hosting plan. You will always get a special deal on the first year of hosting plan. And you can also buy it for a long-term to get more discount. In general, A2 hosting static plan costs around $80 for the first year, and Turbo Boost costs around 180 dollars. And if you're going with Cloud ways than a Digital Ocean server starts with $10 per month. So the basic compulsory required cost with a good performance hosting would be somewhere around $90 or six to 7 thousand rupees for the first year. Keep in mind that this is the cost for the first website. You can save a lot of money if you create multiple websites. If you're going with Cloud ways, the cost for one-year hosting would be little more than the A2 hosting startup plan. But here you have to make the payment on monthly basis. You wouldn't be paying the amount of friend. This might be a more convenient option for some of you. By the way, you get monthly payment options on A2 hosting as well. So it all depends upon your requirement of the type of server and resources. So this category one is that compulsory cost for creating the website. And this is the cost for creating the first website. If you wish to create multiple websites, then it is a more profitable situation for you because on the A2 hosting, Turbo Boost or DR plan, you can come up with a decent number of websites and the PR website hosting cost will reduce significantly. The next category is the optimal cost, and it is really optional. It is up to you to buy the themes and plug-ins as per the requirement of the project. If you take my opinion and if you want to save money on board the themes and plug-ins, then Elementor Pro makes a great option because it packs so much functionality into just one tool, Ang, at one price. For example, you will need the special functionalities like a landing page builder for creating conversion optimized pages. If form plugin for contact and registration forms, a pop up and email opt-in plug-in to go. The e-mail list is slider plugin to create the image and post sliders is social share button plugin to integrate social media, you will be getting all these with just one Elementor Pro subscription. Obviously, you can start with the free Elementor and upgrade to Elementor Pro based on the number of websites you want to create. Investing some $50 or a $100 or $200 on Elementor Pro is vert because you can get returns in the form of conversions, seals, and with the awesome features, you will be able to charge more from the clients. So this is an optional one, but a highly recommended one to invest for building professional websites. That's it in this lesson and we will continue in the next video.
55. How To Start A Website Development Business: There are thousands of people who launched new companies every year, but they don't know how to build websites for themselves. And there are so many running businesses and professionals who do not have proper branding and updated websites. Some of them might have website and some of them may not even have websites. So new guidelines all declines. So many, so many and so many lines are looking for a website solution. Every day. You can help them and come up with a full-time or part-time income. But if you want to succeed than usual, focus on some foundations to carefully craft the bart of serving clients and making money. And I'm very happy to share some concepts that are related to client handling and starting your own website development business. If you are working as a freelancer out of business, you are responsible for making sure that everything runs as it needs to. You have to make sure you come up with profit. You have to become really good at managing client relations and perhaps employee relationships. Do. You also have to balance that design work, that sales and marketing task, batching glides, sending proposals, gourds, finishing the project on time. And it is really an exciting task to work on new projects and with new guidelines to see them getting reserves from the marketing efforts. And yet that say. So. Let us see how you can set up the website development business. The first step is to pick a niche. You can obviously start by serving all the industries ANC blind apes. But we know that a jack of all trades can be a master of none. Tried to bury speciality is over time with specific type of blinds. Specific industries are specific website types. It is a fact that if you introduce yourself as a specialist of some industry, you will get a bigger response and a beggar pay for the project instead of presenting yourself as a general web developer. After all, your speciality will help that lines get better and faster reserves by the proven process that you will follow. So great to come up with a niche selection. Always make sure that the niche you are selecting should have a good score and good number of active nines and they can afford to pay for the kind of websites that you obeyed. Next, decide what all services you've been offered to the glans. Weather gear will be providing only website development or web design development or complete branding solution with consulting, without consulting, SEO, email automation setup, photography, videography. Make a list of Wharton solutions you will provide to the guidelines. Keep in mind that you must deliver value in whatever solution you provide. So Jews, the services you can provide efficiently or Basin tires to provide a one-stop solution to clients because glands usually preferred to assign a project completely to one agency, as it is easy for them to follow. Next is to set your goals. What is the vision and mission of the agency, or as an individual? What are the financial goals? What are the repetition goals? How many clients you want to serve in a month? What do you want to achieve in the coming one year or five years? Where do you want to see yourself have a plan for all of these right at the start. Next is to set the rate same charges. This is a bit tricky, but to come up with this, check the competitors and find out how much they are charging. Also, have a look at the expenses like your branding expense, marketing, ghost, software fees, hosting charges, themes and plug-ins, office round, employee salary. If you have some and taxpayer learns through beside the optimum cost of your service, then charging for the website may vary for project to project. But if you want your business to be successful and you want to feel good about the work you do. You have to make a profit no matter how big or how small the project is, then choose a name for the business that is easy to remember delivering and catchy, setup the legal requirements like getting licenses as body are operating region, and start creating your digital branding. At the very least, you must create a logo, font combinations, the lead ballot, image, style, and dawn of the content. Next is to build your business website following all the best practices that you have learned. Don't forget to include the sample websites to showcase the portfolio to the glans. Next, you can subscribe for some useful project management tools if required, like Trello or Asana, that helps in managing the project and boosting productivity. Next, gum up with a proposal document and contract agreements for the services you offer two planes. By the way, what is a website proposal? Well, it is a document that contains a description of the solutions that you will provide to the client along with the cost of the service and time duration. It is a very powerful and important step in solving website development lines because all the expectations are listed and solution is committed at certain cost and inserting Dame. So if I tell you what all do include in the proposal document, start with the overview of problems and then mentioned that proposed solution, that schedule and pricing. Your solution should look credible and Verde do declined for investing in the proposal with a CTA and make sure you provide the contact information. This is the ideal way to create a proposal for the client. Next, you may also use some pain tracking tools, bookkeeper drag of the time you have spent working on the project. Next, create an online profile for the business Lake having a Google my business account, facebook business speech, LinkedIn profile and profile YouTube channel I'm listing on Yelp. After this start finding declines and projects. Then you can always start this process with asking for reference from your family, friends, colleagues. There will be people around you who might need a solution and you just want to avert them that, Hey, I have a solution. This is the faster way to get started with getting Klein's. Next, you can get active on social media and groups to spread the message at each, be bigger network and aware them about your services. In fact, you can leverage multiple social media platforms like Facebook, linkedin, Instagram, and even Behance, Dribble to get new clients and projects. Please note that lyndon is a powerful platform to connect with the business people across the world. Make very good use of it because it has a huge potential of generating business for you. Next is to make use of freelance marketplaces like 500 upward freelancer or element or experts, look for the relevant projects, bid on them, and try to deliver awesome work to declines to build credibility and reputation. Keep publishing valuable content on the website in the form of blog post and lead magnets to start the funnel. This is the organic and a very solid way to build a client base. Never forget to publish testimonials on the website. Next, you can also run paid social media and search ad campaigns to get traffic on the landing page and try to get them into the funnel. However, it is going to cost you a good amount. But if you can manage that it does, it is good to go. And by the way, gold reaching is also not a bad idea. Prepare a database and try to outreach them via email, but make sure you research the problem and you are treating them with a better solution. Customized message. Never, ever use general messages in gold aging, always customize the emails. It will work for you. So you can follow these steps to start your website development business and start getting that lines. And let me also share some tips with you. The most important tip is that always tried to deliver the best value to the clients. Next, always be true to the work and give you a 100 percent to every project. Be creative, but always be disciplined. Always second worksheet you and stick to it. Create boundaries within your workspace as well as with clients. The weekends off and spend time with the people you care about. Shed you obligation name at least once a year, connect with and support other creative business owners who are in the same industry. And finally, if you want to succeed in the online business, you must keep learning and debating the knowledge by taking AP courses, reading blogs, and attending webinars. So manage your work life accordingly as people tend to keep this as optional, but date my words, it is not optional. Only if you keep learning, you will keep on learning. So in this way, you can set up a website development business and start earning money. I wish you all the very best and we will continue in the next video.
56. How Much To Charge For A Website: Pricing, the website development service is a bit tricky. There is always a decile going on in mind that whether I'm charging less or will decline paid this much for my work. Well, there are no strict rules in terms of setting up the pricing for a project, but we can learn some general methods to make this task easy. First of all, keep in mind that the overall budget of the project influences the final product. It facilitates how many features and functionalities you will be able to provide and how much time you will be able to spend on the UI and UX of the project. So the more the budget, the more the features and time for UI and UX, it is a simple rule. It is important to come up with right pricing because if you charge low, you will not be able to make profit. And if you charge more, you could lose the client to some competitor. We also know that the minimum required cost to build a website includes the cost for domain name and hosting plan. Whereas the additional features like themes and plugins are optional. Now, if we consider some factors to decide on the pricing, the first factor would be your skill level or experience. How much value you can deliver to the client in the project. If you have been working on website development for quite a good time and you have a very solid portfolio to showcase your work to the clients. It gets easier for the client to judge the quality and level of your work and accordingly justify the amount you are charging for the project. And if you are just getting started, then I'd recommend you to build at least a few sample websites to showcase as a portfolio of your work. Trust me, you will be able to get a decent price for the website if you have a portfolio to show. The next factor is the project time. Based on your work experience, you will be able to figure out how many are subproject will require to complete and you can get more clarity on how much to charge based on the time you will spend on the project. Next factor is the type of website. That is whether it is an information website or static website, or is it a landing page with conversion optimization and automation? Or is it an e-commerce store with payment is to be collected? Pricing depends on the criticality of functions on the website. Next factor is the niche you are working in. You are into making websites for doctors and medical professionals, then you may get a good value for the websites you burn. But if you are creating basic informational websites for some local vendors, you may find it difficult to charge high fund the project. Next factor is the scoping size of the project. Suppose if you are creating a website right from scratch with branding and research, the pricing will be higher as compared to updating a previously made website with some minor content changes. You also need to consider how many revisions you will allow before launching the website and what will be the yearly maintenance charges for frequent updation, incontinent. All these factors matter while finalizing the price for a website project. And if the client needs those extra airline features and functionalities and you have to take subscription of some dedicated plug-ins for that specific project, then feel free to charge high. Another important point to consider is the competition. Check how the freelancers and agencies are charging for the website development in your region or your niche and come up with the ideal pricing based on your skill level and features, functionalities that you are offering to the client. Keep in mind that the pricing varies as for the country and location you are working. At some places you might get a low price, and at some places you might get a good price even for a small project, it is based on the economic condition of that reason. So try to come up with the regional prices and finalize your one accordingly. And the last factor to consider is the value of the work to the client's business. Let me make it clear. It means to charge according to the value you will deliver to the business of the client. If the website, you can create valine great value to the business of declined, you can consider charging a higher price. And if the ROI for client is not significant, then you cannot get the premium price. You will just charge a decent price. So once you are done with the pricing, complete the proposal, and send it to the client. Don't forget to mention the yearly recurring charges for maintenance and hosting that the client has to pay every year. And then you are good at work. You are providing value. There will be no denial from the client side. So keep delivering value to the clients and your business will keep growing all the very best.
57. Course Recap: So it was really a wonderful time to spend with you. And I hope you must have enjoyed the course. If I tell you personally, I feel very happy to help people learn these marketing and branding concepts that help them build their career, grow their career, and grow their business. There is a sense of satisfaction in delivering training to people like you. So I want to thank you for spending your time on this course and I hope that I have delivered a good value to your career and growth. Now let me give you a quick recap of Waterloo concepts you have learned in this course. We started the course with defining the three steps to create a website that discover, design, and develop. Then we learned about goal setting because every website is created for some purpose. Then we discussed the foundations and basic concepts like what is a website responsive website, domain name, web server, some productivity tools to make notes, structure of a web page, header, main content area and footer. Then we learned the important concepts of UI and UX, the color theory, color palette, topography in phones, page layout. Then we learned about the copywriting principles and best practices to write headlines, main content for the homepage, blog and landing page. Then we discussed the graphic designing principles and learned the image and vector editing using Canva and graphic designer. After that, we started the step number one in website creation process, that is to discover. Here we learned the importance of understanding the business, products and services before starting to create the website, we learned the importance of understanding the customers and the market, how to take references and build a template library. Our next step, laws to design the website and it is very important to design the complete website. Before beginning that development using Elementor, he came up with the branding guide and used designing tools like Figma to design all the webpages for all the three devices, computer, tablet and mobile phone. Then we started the development step with understanding the domain name. And we also saw how to get a free domain name for the practice website. Then we learned about the hosting plan, how to get a free hosting plan for the factors website, and how to use DNS settings to connect domain name with the web server. After this, we installed WordPress, made some common Wordpress settings, install themes and plug-ins and begin with the webpage creation process. Then we learned how to use Elementor and design the webpages easily without any coding. Well, it was the most important part to learn in this entire website Mastery course. Then we saw how to build the header footer, setting up the menu for the flipside, setting up a blog and landing page. Then we learned how to integrate our website with Google Tag Manager, google Analytics Search Console, Google Ads conversion tracking, Facebook pixel and a chat bot. Then the revised the steps to create a custom website from scratch, to create a website in just one art, and to create a single-page website. Then we learned how to optimize the website loading time, came up with a website launch checklist and understood the benefits of element or through, along with the cost overview for creating a website. Then finally, I shared some tips on how to start a website development business and how to charge for a project from clients. So these all are the concepts and techniques that we learned in this website Mastery course without coding. I hope it was really and knowledgeable and practical goals for you. And I'm hopeful that you will apply all these concepts in your work and get a huge success. And don't forget, you have to complete the assignment and share the website link with me that I will review personally and give you feedback. Once again, I thank you for learning with me and all the very best. Do well.
58. What's Next: Congratulations, you are now completed with the course learning and now you must go ahead and create a practice website. You can share the link with me and I will personally review the website. Feel free to take feedback on every step of the development stage and keep layering the doubts as soon as they appeared. Once you are done with the first practice website, you can start building the other ones to build a solid portfolio to showcase to the clients. And once you have completed the steps to start the website development business, you can start taking projects. You can work full-time or part-time as an individual, as a freelancer, or you can build your own digital agency. And even after that, if you need any assistance from buy-side, I'm always here to help you. Not talking about the next few things. There are so many concepts related to the SEO, social media marketing, google Arts, email marketing, blogging, affiliate marketing, and lots more distant marketing stuff to learn for you. I will be coming up with more courses on all these helpful topics and I believe it will help you further to grow your career and business. So stay tuned and stay connected. I will be updating you with the new courses as they're ready for enrollment. All right, so thank you so much. And there is one last video coming up after this. See you there.
59. Share Your Feedback & Success Stories: All right, so I am now done speaking and now it's your turn. I want you to tell me how was the course experience. I request you to take some time and provide me feedback about the content and quality of discourse. If possible, please provide a detailed feedback so that I can understand what all things are working for you and bottle aspects need to be improved in the scores from my site. And if this course delivered value to you and transformed good careers, please share your story in the form of a short video explaining our journey before the course and after the course. I will really appreciate your feedback and support. Once again, I thank you and wish you all the very best for the work ahead. And I will be here always because you have lifetime access to this course. So wherever you feel like revising a topic, simply play the videos again and again and again, as much as you want. All the very best.
Rahul Arora, Digital Marketing Mentor
