How to Make Website for Church, Mosque, Religious Organization, Charity NGO with WordPress & Bosa

hello friends i am nishik and today in this real teach you how to create a website for religious organizations for a church or for a mosque using wordpress now you'll be using only free resources to create this website like we'll be using a free theme free page builder and only free plugins and also this website is 100 mobile and tablet friendly now before you proceed further before we see how to create this website let me first show you a very quick demo of the website that will be creating so this is the website that we'll be creating in this video and again let me remind you we have used only free resources to create this amazing website with all these different features that you see on the screen with the donation feature with the events feature you can create different events you can create different campaigns with all the different features this is done for all free now the page that you see on screen is your home page and in this if you see at the top we have our header this is a transparent header you can have a regular header or you can even have this transparent header now at the very top you have the top bar here you can display your phone number email address your address or if you want you can even type in some text so if you're creating this for a church or for a mosque for a masjid or for a temple or for some other religious organization or religious places you can have your respective details over here then after that you can also enter different social media pages so if you have a facebook page twitter account instagram page you can add those links and these icons as well then we have the main header at the left hand side in the main header we have the logo so you can replace this with your own logo then we have the menu we have created and we have added different pages as you can see we'll be creating the home page i'll show you how to create the about page then as i said earlier we'll also see how to create events we'll create a events list page and we'll also see how to create the events detail page then we'll be creating some other pages like the volunteers page campaign page campaign list page you know all these pages blog page shop page contact page all these pages will be created then in the header we have this donate now button so when somebody clicks on this button they will be redirected to some payment gateway you can integrate any payment gateway with this website i'll show you how that is done so based on your country you can select some other payment gateway and you can integrate that with your website so whenever somebody clicks on that they'll be redirected to this page they can increase or decrease the amount that they want to donate they can click on update and after that they can simply enter their card details and they can donate to your website or basically they can donate to your organization let's again come back to this page now the very first thing that we have or the very first section we have is the slider section so this is a slider section i'll show you how to create this slider and then we can you know redirect our users to different pages then when you scroll down if you have no partnership with different charity organizations or brands or sponsors you can showcase their icons over here then after that we have the icons box section you can see we have three options over here if somebody wants to become a volunteer they can click on this button and they will be redirected to that page wherein they can you know sign up for an volunteer then if somebody wants to donate they can simply click on this button they'll be redirected to that donation page if somebody wants to partner they can click on this button and they will be redirected to that particular page then when you scroll down we have this section you know you can display different counters over here so 15 000 volunteers so whatever your number is how many sponsors branches or boards you have or how many people you have helped all those details can be entered then we have a subtitle a title some text and you can also add these details now based on your organization or based on your whatever type type of website you are creating using this video you can you know update the details related to that then when you scroll down we have the campaign space so we can run different campaigns for example this is one campaign that i'm running financial help for poor families so we have raised around seven thousand dollars remaining ten thousand dollar expiry date you can enter all these things if somebody clicks on donate now they can they can donate it or if somebody wants to see you know more details about this campaign they can click on program details then they will see the detail page you can have the title at top then when you scroll down you have the you know image the main image for the campaign the title the progress bar how much money or how much percentage of money you have raised the goal detail about this campaign some you know related images your main goals everything then at the right hand side we have this donate button if somebody wants to donate they can click on the button and they can you know enter whatever amount they want for example this amount they can click on next enter the detail and in the next step they can enter their payment details or card details and they can make the donation then after that we have the you know more campaigns options so if somebody wants to see some more campaigns they can see that and if somebody wants to contact you they can simply fill in this form and click on contact okay so this is the single campaign page this is how your single campaign page will look like let's again come back to the home page then we have few more things if somebody wants to contact you they can fill in this form you can also give some video so if you have any video related to your organization you can you know integrate that video somebody clicks on this button that video will show up so i have integrated my video my most famous video how to create a free e-commerce website then when you scroll down you'll see the events page so basically we can create different events so if there is any lecture in the mosque or if there is any sermon in the church or whatever it is you can create an event for that or if there is any program or if there is any event or any program in this particular place then you can create an event for that people can see the details related to that timing place everything again if they want to see the details they can click on view detail now they will see the event details page so again title at top some image and after that you know you have this these text more details about the event where it is when it is all these details location you can also integrate google map and again because this is all related to donation we will always give this button if somebody wants to donate they can click on this button okay again let's come back to the home page let's see some more things then when you scroll down you can also enter your volunteer details okay so this is how that thing will look like you can also add different blog posts and this blog post will help you to get some extra traffic through google search results and with that i'll also show you how we can add different audios and videos for example in in mosques in masjids we have friday lectures and we have some other you know lectures weekly lecture monthly lectures so if you want to integrate that if you want to upload that i'll show you how you can upload it like this as you can see let me decrease the volume so if somebody wants they can simply you know see this audio as you can see this audio is playing and after that if they want to download the audio you can do that thing as well if you want you can integrate or you can embed your youtube videos as well in this page i'll show you how that is done and even if you have any live thing going on if you're doing some youtube live i'll show you how to integrate that thing as well on this page so basically i'm trying to include every possible thing that a church or a mosque does then after that you can see some more details about the author if somebody has some questions some comment they can comment it over here and at the right hand side we have some widgets related to that now this is how your page will look like now we have completely seen the home page now let's see the about page now this is how your about page will look like again i'm saying if you want to change the text for example if you if you're not doing anything related to clean water you can change the icon you can change the text and you can type in something else whatever you're doing okay this is just you know simple demo of how your about page will look like all the content all the text will be changed by you based on your you know based on your programs or based on your activities we have seen the events detail page let's see the even list page so you can create this event list page this is how it will look like okay if somebody wants to see all the events in one page they can come to this page then we can also create a volunteer page so in the homepage which is displayed three main volunteers okay or three main members in this page you can display all the members that are connected with you and then we have some more page we have seen the campaign detail page let's say the campaign list page so this is how your campaign list page will look like so here you can list all your campaigns in one place okay then we have the blog page as well so you as i said earlier you can create blog post as well and there are many different styles for this for example you can display your blog post in slider you can display it like this you can display it like this in grid form list form you know all these different options are given to you then we have the contact page as well so if somebody wants to contact you they have this page if they want they can see your exact location on google map they can see your address phone number email address obviously if you want them to see this thing you can enter those details or if somebody wants to contact you they can simply fill in this form and submit and this form will be submitted you will see this message and if you want you can reply them then at the bottom we have our footer and all okay so this is the page that we'll be creating and also one more thing this website is also 100 mobile and tablet friendly let me show you so as you can see if you see this website in a mobile phone this is how it will look like your your menu if your top menu will be like this okay your top this is your top menu then we have your icon or your logo then you have the menu this is how it will look like now everything else has adjusted based on the device size as you can see so it is 100 mobile and tablet friendly as well and creating this website is also super easy there's no coding or anything required over here you don't need to know any html css php python anything like that this is all simple drag and drop so anyone can watch this video and create this website now if you like this demo website and if you want to create this website make sure to watch the complete tutorial and before you proceed further make sure to also subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video share with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubt any comments any sessions for me you can always leave them in the comments section below now let's start creating this website price now to create any kind of website whether it's a religious organization website an e-commerce website a simple blog or a business website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example blogdude.com youtube.com google.comsheik.com all these things are different domain names so we'll also have to register a new domain name on the internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser url bar and they can land on your website now the second in the most important thing is your website's hosting hosting is basically a server or a computer wherein your entire website is saved so if you see this website including all the different pages all the different campaigns the database of this website in fact this entire website is saved in a computer and that computer is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live now hosting is the most important thing about your website because everything related to your website is directly or indirectly dependent on your hosting so your website speed your website's performance the user experience on your website and even your website's ranking in google search results is totally dependent on your hosting so if you selected a good and reliable hosting your website speed and performance will be amazing you will get better ranking in google search results and other search results and with that your website will also be 100 secure so for anybody to attack or hack your website it will be almost impossible and obviously in contrast to that if you select a bad hosting a cheap or crappy hosting your website will load very slow it will not get better ranking in different search results now there are literally thousands of different hosting products available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that you can simply do one thing open a new tab and type in blogdude.com a2 now this link is also given in the video description below so you don't have to type in this thing simply click on that link and you should be redirected to this page now this is the hosting that will be using a2 hosting now this is the only thing that you need to purchase if you already have a hosting you don't even need to purchase this thing as well but this is the only thing that you need to purchase your hosting rest everything whether it's a theme whether it's plugin page builder everything will be free this is the only thing that you need to purchase now here as you can see there are four different plants now the main difference between these plans is how many websites you can create or host with these plans so for example if you see this startup plan with the startup plan you can host one website and with other plans with drive turbo boost and turbo max plans you can host unlimited websites now what does this mean so today you're creating this website this charity website or this religious organization website you can create this website if you select this startup plan but if you want to create another website maybe for another church or for another mosque you cannot do that with this plan start a plan you'll have to either purchase a new plan or upgrade your plan to drive plan or some other plan and obviously if you select any one of these plans drive turbo boost or turbo max you can create unlimited websites which means that you can host all your websites in one single plan you don't need to purchase multiple plans to host multiple websites then after that if you see some more options some more features related to the hosting over here here we get unlimited ssd storage so there is no limit on how much storage you can use there is this is unlimited so you can basically store unlimited data on your website and this is ssd storage now the great thing about data hosting is that they only use ssd and nvme storage or ssd or nvme servers to host your website now most of the other hosting providers they use the hdd storage or hdd server to host your website now when your website is hosted on ssd server which in this case as you can see we are using ssd server so when your website is hosted on ssd server your website will be 30 to 40 times faster as compared to other hostings now with this you also get free and easy website migration so if you already have a website with some other hosting you want to migrate to a2 hosting in the next step i'll show you how you can do that you can do it for free we also get free automatic backups so your website will be backed up every single day automatically now this is very useful because if something happens to your website you have your automatic backup you can easily restore your website now if you hover over key features and growth features you can see you get few more options many more features like you get free ssl certificate free website builder also free no website staging and you can also choose your own server location now you can choose any one of these plans and you can still create the same website now if you're planning to create only one website you don't plan to create any other website in next one year then you can start with the startup plan you won't have any problem at all so if you just want to create this website for your church or for your mosque just go with the startup plan or if you want to host multiple websites and you want even more resources then you can go with the drive plan so select this plan and click on this drive button get right button now once you do that you will be redirected to this page here you have to either register a new domain name or you have to use your own domain so if you have not already registered a domain name you can select the third option register a new domain type in some domain name that you want to register for example if i want to register nayshik.com i can type in a shake and from here from the domain name extension list i can select dot com dot in dot net dot u as hundreds of different domain name extensions are available now normally what i recommend is i recommend to always register your domain name on this website namecheap.com so you can register your domain name on namecheap.com and in the next step i'll show you how you can link this domain name with a2 hosting so suppose if you want to register naya sheikh you can type in layer check from here and for example if i want to register nayshik.com so i i'll type in ashik.com and click on search now if this domain name is available for me it will tell me that this is available if it is not it will tell me that this domain name is not available and it will give you some suggestions like nayshik.one.rt.io.com hundreds of different domain name extensions are available here as well now if it is available you can click on add to cart and you can add this domain name in your cart now the reason i use namecheap or i prefer namecheap is because here you will get domain names for very cheap and also the renewable cost is also very low and this is very useful when you're hosting or when you're using multiple websites so you can use your website purchase your domain name from here and you can link it with a2 hosting so if your domain name is available click on this add to cart button and purchase this domain now once you purchase this domain name you can simply copy the domain name from here okay whatever domain name you have purchased come to this website a2 hosting and instead of this option register new domain name use this domain or is use this option use my own domain okay so i want to register ninja shake so i'll delete this much and over here i'll type in dot com so i have registered this domain name on name chip and i want to use this with a2 hosting okay so i'll type in my domain name and extension and click on use this domain and in the next step i'll show you how you can link your name chip domain with a2 hosting now here you have to select the billing cycle so by default 36 months is selected and obviously the higher cycle you select the higher you know billing cycle you select the more discount you get so if you go with 36 months for three years you will get a lot of discount if you go with 12 months you will have to pay 9.99 per month basically ten dollars per month if you go with three years you just have to pay six dollars per month for two years you know around eight dollars per month so you can select any one of these options whether you want to go with one two or three years select this option scroll down now you have to select your server location now this depends based on your location so because i'm from india i'll select singapore location so people from india from asia they can select this singapore location people from europe they can select amsterdam from us they can select any one of these name servers okay so i'm selecting singapore now don't take mark anything from here at the bottom because this will cost you some extra money so don't take mark anything just click on continue now once you come to this page click on this checkout button at the right hand side you will be redirected to your checkout page and here you have to enter your basic details so for example your first name last name email address phone number your address all these basic details if you have a gst number you can enter that thing so that you can get tax credit then after that you have to choose some password for your account so type in some password and under confirm password type in the same password now make sure to remember this email address and password so whatever email address you enter here and whatever password you set over here make sure you remember that because this will become your login credentials so whenever in future you want to log into your a2 hosting account you will have to enter this email address and password so make sure to remember that now you can scroll down and after that you have to select the payment method so if you want to make payment through credit card debit card or your atm card you can select this option you can also make payment through paypal and skrill these two options are also given now obviously most of you guys would be using credit debit card enter your card details and after that click on complete order first tick mark this thing i have read and agree to terms of service and click on complete order now before that one more thing uh if you see there are only few types of cards are accepted with your visa mastercard american express discover these kind of cards now if you're watching this video from india most of the people in india have a rupee card now rupe is a domestic card which is not accepted anywhere outside india so if you have a rupee card you cannot make the payment over here you have to upgrade your card to visa or a mastercard so make sure you have a visa mastercard or american express discover any one of these cards okay and after that enter your card details and click on complete order now once you click on that complete order button and make the payment now you have to come to this website my.a2hosting.com and over here you'll see this button secure client login click on that now enter your email address and password which you have selected in your previous step and click on login now once you log into your account you will see this page now the very first thing that i want to do is i want to link my name chip domain with a2 hosting so for that first of all log into your namecheap domain now once you log into your account you will see all the domain names that you have registered if you don't see them you can click on domain list from the left hand side you'll see those domains now for example i want to use this domain fam dot in i want to link this domain with eight hosting so i can select this domain click on this manage button and over here you will see all the name servers okay you will see these name servers delete these default name servers from here okay then after that come back to your a2 hosting account click on this account details button now you'll see your name server so here just copy your name server number one come back to this website enter under name server number one similarly copy your name server number two and turn the line to copy your name server number three enter under line three and finally copy your name server number four and enter under line four once you do that you will have to click on this link this save button okay this check mark click on that link or that icon this will save this thing for you now once your domain name is saved as you can see it can take up to 24 hours to link your domain name with a2 hosting so by that time we can do few more things we can actually come back to our account we can click on this login to cpanel link from here or you can do one thing come back here also you'll see this button cpanel login click on that button now you'll be logged into your cpanel your a2 hosting cpanel this is how basically it will look now the very first thing that you have to see is whether ssl is installed on your domain name or not so you'll see at the right hand side you'll see your domain name primary domain besides this it should say dv certificate and besides your domain name you should see this lock pad now if you see this thing it means that ssl is successfully installed on your domain name or if you don't see this thing don't worry you can you know install ssl certificate by yourself so you can just click on the search bar search for ssl select this option ssl slash tls status now here you can see auto ssl is already running so it already runs and all automatically installs ssl on your domain names so as you can see wherever you see this green mark it means that ssl is installed on these domains now for you if it is not already running you will see a button which says run auto ssl click on that button and it will automatically install ssl on your domain name hardly takes around four to five minutes now again come back to your cpanel and now we can install wordpress on our domain name so for that again click on this search bar search for softaculous app installer you will see these options of tagless app installer select this button now you have few apps over here like as you can see joomla you have wordpress you have woocommerce you know many different options are given now we want to use the regular the plain woocommerce so what you can do is from the left hand side you'll see this search bar over here you can search for wordpress you will see the very first one click on that wordpress and now click on this install now button now the very first thing that you have to do is you have to select your domain name on which you want to install wordpress so in this example i'll select this domain message2.net.com then after that under choose protocol make sure https is selected for you now here there will be two options http and https make sure you have selected this http s1 as for secure then after that you have your site settings so on the site settings you can give your website some name so for example you can give your website some name and you can also describe your website okay then at the right hand side you have admin account so under username and password something is already set for you if you don't want this thing can delete it type in your own username and password okay hide this thing and type in your own password then after that also delete this email and type in your own personal email address okay now these things are also important these admin account details username and password is also important because in the next step whenever you want to log into your wordpress dashboard you will have to enter this username and password now once you do this thing go ahead at the bottom and click on this install button now wordpress has started installing on your domain name this is a very small process hardly takes around 10 to 12 seconds as you can see it is automatically already completed now you'll get two links once it is completed if you click on the first link it will basically open your website so this is how your website is looking right now if you open the second link if you click on the second link this will open your dashboard so this is how your dashboard should look like now this page this dashboard page is the most important page of your website because you will be controlling your entire website from this page so whatever you want to do on your website for example if you want to change your website style if you want to manage payments manage comments if you want to add a new post new product everything will be done from this page and whenever you want to land on this page you can simply type in your domain name after that put a forward slash wp hyphen admin you will land on this page now whenever we install wordpress on a new domain name there are few basic things that we have to understand and there are few basic settings that we have to do so first let's see them now first of all under dashboard you will see few widgets we don't want them these are not really useful so you can click on screen options and you can untick everything from here all right now the left hand side you have a few more options if you click on post now this post option will be useful to create different blog post one is already created for you as you can see one demo blog post is already created for you hello world later on in this video we'll see we'll delete this thing and we'll create our own blog post then we have the media option so whatever media file you have on your website whatever these images videos icons these media files you have on your website you can see all of them over here under media library you can manage them from this page then we have the pages option which will be used to create different pages so two pages are already created for you so in future when we want to create the about page home page blog page those pages will be created from here then we have the comments option so whenever there is any comment on your website on or any page or any blog post you will see all those comments in one place if you want to approve or improve them you can do that you can reply them you can even delete those comments then we have the appearance option now this is a very important option now if you see your website right now this is how it is looking now this style this appearance of your website is because of this theme 2021 theme there are three themes which are already installed for you and 2021 this theme is already activated for you and this design of your website is because of this theme now if you just go ahead and activate some other theme for example let's go ahead and activate the 2019 theme again if you come back to your website and refresh it you'll see your website design is completely changed just by activating some other theme so this is basically what a theme does a theme changes your website style and appearance now you should always have only one theme installed and activated so all these extra themes you can click on that and delete this thing okay click on this theme and delete it now we won't be using this 2019 or 2020 theme we'll be using some other theme that is also a free theme that team will give us this beautiful design okay now after that we have the plugins option click on that here also you'll see a few plugins will be automatically installed for you you can go ahead and delete them now we have just seen that theme is the design of the website and plugins now what is a plugin a plugin is basically kind of a software or an add-on that adds extra features and functionalities to your wordpress website for example right now we don't have any no donation feature any payment gateway option we have not integrated any payment option on our website we don't have this campaign feature and all so all these features will be added by different plugins so later on in this video you'll see we'll be adding different plugins and those plugins will add all these features on our website so that is basically what a plugin does then at the left hand side you will see settings click on that now if you want to update your site title and description or your website name and description you can do it from here you can also update your email address and after that under membership make sure you tick mark this thing anyone can register very important make sure this is tick mark then you can change your time zone based on your country i'm from india so i'll select this kolkata time zone now click on save changes again now under settings click on permalinks and by default day and name will be selected for you i would recommend you to select this post name and after that click on save changes okay once you do that thing again come back to your dashboard and with this we have completed all the basic wordpress settings risk now let's do one thing let's install all the required theme and plugins so let's start with the theme so to install a new theme we'll click on appearance from the left hand side click on this add new button to add a new theme now under this search option you have to search for charity now here you have to select this theme bossa charity if you don't see this thing you can actually do one thing search for bossa charity okay so you will see the regular bossa theme we have to install this one as well so install this bossa theme and after that once you install this bossa theme you have to search for bossa charity as well or bosa whatever or however it is pronounced okay so bossa charity now search for this one now you'll see this one install both the themes now the first theme the bossa theme was the main theme this is kind of a child theme now we have to come back to themes and we have to activate all the themes first we have to activate this one okay this is the main theme as you can see and then we have to activate this charity boss's charity theme now we can delete this 2019 theme select this thing and delete it from here now it's time to set up this theme so we have to click on this button get started with bossa charity now as you can see once you click on this button it will install and activate few plugins for you as you can see the name of those plugins quirky advanced import key on tool set elementor and these themes and these plugins basically now once that is done you will see this page now first of all let's do one thing let's click on plugins let's see what all plugins are installed in activity for us as you can see these all plugins are installed and activated for you now we need one more plugin in fact we need two more planes from here so we can click on add new now we just search for s i n a okay enter this text you will see the first plugin uh signer extension for elementor install this plugin now once it is installed don't activate it right now we need to install one more plugin after we install that one up we can activate both of them now search for contact plugin the very first plugin you will see it will be contact form 7 install this one as well and once both these plugins are installed you can come back to plugins and now we can activate both of them so tick mark contact form 7 and this extension plugin go to bulk actions activate and apply so both these plugins will be activated for you okay and now if you come back to your website and refresh it again you can see the style of your website is again changed okay obviously it looks very different but we'll see how to create a website like this step by step now let's start with the home page let's first create this home page so for that you have to come back to pages click on pages from the left hand side delete this sample page this is not required delete it and now add a new page click on this add new button now because we are going to create our home page let's give it a title of home so under title type in home and we also have to select a template so under template at the right hand side you'll see this is your template select element of full width and publish this page now this page is just a regular page if you open this page in a new tab as you can see this is how this page will look like now this is just a regular page this is not your homepage we have named it home but just by naming it home it does not become your home page we have to set this page as our home page if you see if you click on your website name as you can see i redirected to some other page and if you again come back to this page the home page here at top it says website name slash home so as you can see it is just a regular page it is not your home page so again come back to your dashboard and we have to set this page as a home page so for that we'll hover over settings and click on reading now select this option your home page displays the second one a static page and under home page select the home page that you have just created and click on save changes once you do that again if you come back to your website and refresh it as you can see you're still on the same page but that slash home is gone and if you click on this title you again come back to this page now again come back to pages and here also as you can see now besides your page it says front page which means that this page is now set as your home page now we can edit this page to design this page we'll be using the elementor page builder so click on this button edit with elementor now you should see this screen this is how your elementor screen will look like now first let me explain you what you see on the screen and after that we can proceed further so elementor is a page builder which will help you to design your website so we don't have to code or anything we just have to use these elements which are given at the left hand side so we can use these elements to create a website and how that is done if you see any page whether it's the home page about page any other page you can always see that your pages are divided into different sections for example if you see this this is your first section the slider section then we have the second section we have this brand section then we have the icon section then this and then so on so as you can see we are dividing our website in different sections now to create a new section you click on this plus button and you select how many columns you want in that particular section so for example if you want three columns you will select this three column option now maybe if you want to use button if you want to add button you can see when you when you add any columns and anything at the left hand side these settings will change if you again want to come back to elements you have to click on this nine dots icon click on this icon you will again come back to this elements page if you want to use button drag and drop button over here and now as you can see we have added this button and whenever you use any element again at the left hand side you will see settings will change now here it says edit button so this setting is all related to this button now every element will have three options content style and advanced so whatever element you're using it will always have three options for example let's use this icon element if i drag and drop icon over here you can see you will see this icon if you click on this icon again this will also give you these three options content style and advanced so all the elements have the three options now on the content you just change the content for example if you want to change the icon you select some other icon we will select this icon click on insert icon under style obviously you change the style for example you change the color or if you want to change the size rotation all these things will be changed from here okay basically the styling of this content you can rotate it like this and under advance you can add some padding margin you can add motion effects if you want to add any in animation as you can see you can add these animations you can change the background positioning responsive all these things so we are going to use this elementor page builder to design this website now let me do one thing let me delete everything let's start from scratch okay now let's create our first section which is the slider section so to create this section we'll come back to this option and we'll plus we'll click on this plus button add a single row single column and inside this thing we'll add this slider so again come back to elements click on this nine dots icon and search for slider element okay you should see this one signer banner slider drag and drop this element over here now sometimes you might not be able to do that as you can see when i drag and when i try to drag and drop it over here it does not work now the reason is because i know we are using this header and that is going above that header so just for now we can do one thing and even if you try to click on this thing this is not working because it is going beyond header so to fix this thing you can use this option navigator option if you see at the bottom left corner of your screen navigator click on that now here this will give you this navigation now if you click on section as you can see you have the edit section at the left hand side now i just want to do one thing i want to go to advanced under edit section and over here i want to add some margin at top just for now because you are not able to you know click on this section so what i'll do is at top i'll add maybe 150 pixels okay now as you can see this is come below now we can use this thing we can add anything under this option so again if you search for slider use this one sign up banner slider drag and drop it over here now as you can see here you're able to do that now this is the default look of this slider let's open the first option first we have to upload some image now let me do one thing let me delete the second one we just want one first let's play around with the first option and after that we can duplicate the first one and create our second slide first thing we need over here is this image now there is a link given in the video description below if you click on that link i have given you all the images for absolutely free so if you click on that link you will be redirected to my website blogger.com in fact you will be redirected to one of the post so whenever i create a tutorial i always create a blog post like this so once you click on that link which is given in the video description you will be redirected to a similar blog post and at the end of this thing at the bottom you'll see download free images you have to click on this blue download button now once you do that thing you will download a zip file now you have to right click on that zip file and click on extract files this is not a zip file that is the reason why i'm not getting that option basically you have to unzip that file or extract that file once you extract that file you will see this media folder and inside this folder as you can see i've given you all these images for free so that you can use this on your website now if you don't want to use these images if you want to use some other images maybe your website with the charity or whatever you're creating this is not these images are not required or these images are not suitable for your website or for your needs so you can do one thing you can go to this website unsplash.com and another website is pixels.com now these two are free websites so in from these websites you can use and you can download free professional high resolution images so whatever your need is for example if you're searching for church maybe you're creating this website for church but if you don't have a good picture so you can search for church over here and now as you can see you will get so many professional images related to that if you're searching for charity you can search for charity again as you can see so many you know free professional images are given to you if you're searching for africa for example as you can see hundreds of different free images and if you see this image this is the image that we are using on our website okay if you scroll down we have used this image over here okay so you can download these free images from here if you're searching for mosque let's search for mask as well as you can see all these beautiful professional high quality images for absolutely free so you can use these images you just need to click on these images so for example let's see let's let's suppose that we want to install or we want to download this one so you can click on this and you can click on download free or if you want to download different size you can click on this drop down icon and as you can see we have large size medium size small size whatever size image you want you can select that thing if you want medium size you can select this this image will be downloaded for you as you can see it is downloaded for you so you can use these websites for free professional images similarly you can go to pixel and you can do the same thing over here okay so let me cut that thing again come back to this page now because i've given you these images you can just use those images click on choose image and upload the image that you want so i'll go to media and i'll upload all the images at once so we don't have to do it one by one i'll just select everything click on open now once you upload all these images you can now select whatever image you want so we want to use this image for example so we'll select this and click on insert media as you can see the background images change you can do a lot of a lot more things we'll see that under styling first let's add all the content not the title the title if you see at top here it says donate to contribute so i'll type in the same thing over here under title we'll type in donate to contribute as you can see at top then after that we have this subtitle and here it says let's build the better world together or whatever you want you can type in that thing i'm just copying and pasting everything from this demo website so again i'll copy this thing come back to this website this is our subtitle so it will come under subtitle replace it with this text and at the bottom we have this description so copy this one as well again come back to your website and paste it under description okay so this is what we have okay so as you can see this is how it displays now we can control this button one and button two so button text one primary button text here it says donate fund so instead of learn more i'll type in donate fund now the second button says read more okay so i'll select the secondary button which is so here type in read more okay now we'll see the link and everything later on because we have not yet created any donation page or read more page so or basically a donation page or about page so we don't have that option we'll add the links later on then after that we want to align everything at the left hand side so under alignment select left everything align to the left hand side now primary button now here if you want some icon for the button for example if you want to let's select this icon okay this crown icon you can select any you can see this icon is now displaying so if you want any icon if you wanted to display this thing at the left hand side you can do that thing as well you can increase or decrease the spacing of this icon so everything can be done from here okay i don't want this icon so i'll just delete it like this similarly you can do the same thing for secondary button now the slider settings if you want to do something for example we are using overlay so overlay is on if you off this thing so under only what happens is we add some overlay or at top of this image at top of this image we want we add some color as you can see this is the color that we are adding we are adding the black color but we are decreasing the you know transparency if you want to increase the transparency now as you can see everything is not dark black if you decrease the transparency this is how it will look like so that is what we are doing okay you can increase or decrease the transparency by default i think it is zero point eight okay so it is eighty percent i guess so as you can see zero zero zero zero eight zero if you increase or decrease this thing at the end of this thing whatever you see that is the percentage so i'll keep it at eight zero okay now come back now if you want dots at the bottom for example if i add one more slide if i just duplicate this slide now as you can see it will add this dots at the bottom it will also add these arrows now i don't want any dots so i'll make the dots off i do want arrows so i i don't want to make that thing off i'll just change the style of this arrow okay like this one now again let me go back to slides and delete the bottom one i just wanted to you know duplicate this thing just to show you this arrow and dots we can cut that thing now come back to style let's start styling this thing now the very first thing that we want to do is we want to add some height so for this i want to add 800 height okay now as you can see this is how it will look like then you can add some padding from all the sides so let's do one thing from top let's add 260 pixels so that we don't have to add that you know extra padding under uh under the row that we have added at the beginning now at the right hand side i want to add 470 okay because here as you can see we have a lot of space at the right hand side then at the bottom i want to add 220 and at the left hand side we want to add 150 so you want to add this left side 150 spacing padding basically now because we have this thing now we can click on this edit section uh earlier at the very beginning we added this margin we don't want this margin at top now we can cut this thing we can make it zero and we can go to layout we can make it full width so under content with select full width and under column gap select no gap okay now as you can see this is hundred percent full width now let's again come back to slider so click on this slide now it's time to style this title so select this title here as you can see this is how your title is looking everything is capital letter everything is uppercase okay as you can see donate to contribute and we have some different styling so we'll select this option we can change if you want you can even change the color i don't want to do that select typography click on this pencil button to edit the typography now for the font family you can keep it at default or you can change the font family as well now i want to change this font family to pop-ins so i'll select this option and search for poppins okay the default also is poppings but for you if it is not popping so you can change that thing to poppins then we have to change the size of this thing it is very big i don't want this big as you can see the title over here is very small on our demo website so i'll change this thing to 16 pixels and as i said earlier we want to make everything uppercase so under transform we want to select uppercase then after that if you come back you will see under margin bottom we have added 15 okay so make sure it is 15. now let's see the subtitle select this option third option subtitle now again you can change the color if you want select the typography now if you see the style of this subtitle is totally different okay the font family is different so first let's change the font family select this option we don't want poppins we want play fair display if you search for this option you will see play fair display we want this font family over here we also want to increase the size of this thing so instead of 30 let's make it 66 and we want to make it bolder so under weight select 900 now as you can see very dark very bold if you select 100 it will be very light we want to make it 900 as you can see there is no line height so let's add some line height as well so instead of pixels for line height i want to select em so click on the second option em and under this option type in 1.2 so basically 1.2 em this is how it will look like now select your description so again if you come back you will see your description select this option this also we want to make sure that it is poppins so select this option font family and type in pop-ins over here okay this already pops as you can see because it did not change so the default font families pop-ins now i just want to increase the size a little bit instead of 16 let's make it 17 and i don't want this boulder i want to make it a little bit lighter so weight will select 300 okay this is how it should look like now select the button so we have two buttons primary and secondary first select the first one primary button now here if you want to change the text color you can do that we want to change the background color we don't want this blue color we want this orange color so what i'll do is i'll right click over here just to see the color code click on inspect so as you can see the background color is ffa026 i'll copy it paste it over here okay like this and i'll do one more thing i'll add this color in my global color so that next time when i want to use this color i don't have to type in this thing i don't have to remember the color code and all so for that you can click on this plus button add global color and i'll give it a name of orange okay click on create now we can also change the typography so select this typography let's increase the size of this do 16 because as you can see this was very small so let's make it 16 let's make it a little bit bolder at 600 we don't want any line heights to make it zero make sure there is no line height or anything which you just make it zero we want to add padding so if you see padding option it should be over here as you can see padding let's add padding of 13 from top and bottom so if you add 13 as you can see from top and bottom and 32 from left and right okay so this is how it is looking now i think we can do one thing we can go back to typography and change the line height to maybe 25 okay so that we have this you know a little bit bigger now we also want to do one more thing we want to make it rounded okay like this one so for that we have to increase the radius you'll you'll see this radius so here type in 50 under radius this is how you will see this design now if you want to do one more thing if you want to change the hover style for example when somebody hovers over this button for example if you bring your mouse cursor to this button the background color changes to some dark you know orange color so for that you can click on this option at top you'll see just below typography normal then we have the hover select hover and select background color okay select this classic option and we have already added this orange color so i'll click on this globe icon add this orange color and make it a little bit darker okay so maybe i'll select this color code now if i hover this as you can see it becomes darker so you can have this style if you want now let's select the secondary buttons to select the secondary option again for this also change the typography to the same thing make it 16 pixels 600 width a little bit bolder and for line height we can make it 25 and for padding also we have to do the same setting because both the buttons are very similar so under border radius we'll make it 50 then we have the padding again 13 32 so 13 from top and bottom and 32 from left and right now we don't want this style for this one we want you know this style as you can see the background is transparent we just have this border so for that we'll do one thing we'll select the background which is this background color as you can see select this to make it transparent you have to select the second option the bottom option bring it at extreme left so that it becomes transparent let's see okay it is at top this one okay select this background and bring it at left as you can see now this is transparent we also want to add borders so select this option border type make it solid and maybe not one let's add two pixels okay this is how it will look like now for this also if you want to change the hover style so when somebody hovers with this thing it changes to this orange color we can do that thing as well again go at top select hover select background type color click on this globe icon select the orange color border for border also we want to do the same thing as you can see when somebody hovers over this background color changes border color is still white so for border also we have to change that thing uh here it is border color as you can see select this globe icon select orange now when somebody hovers with this as you can see we get this style so this is how this is done now the final thing is left in this slider if you see at the bottom you will see nav and dot so this arrow and dots first let's add one more slide so that we can see those arrows here it is okay now let's style this navigation okay so we'll come back over here if you see the arrow here is this we have our transparent background color and the color of the border and the icon is this orange color okay that is the style so we'll select this background color we'll make it transparent like this then we'll select the arrow color and we'll make it orange now if i say this thing as you can see this is background is gone we have orange arrow now we also want to add border so we'll select border type solid we'll add maybe two pixels let's see how it looks okay like this we can do one more thing for border also we wanted circular or rounded so we'll increase the radius okay now next radius nav previously radius make it 50 okay for next also for previous also now if you see we have this style okay this is how it looks like now you can simply go ahead go to content and select the second option and just change the content so once you style this thing you can simply go ahead and change the content for example instead of this if you want some other maybe if you want this image will select this image similarly if you want to change the title or anything you can go ahead and change the title change the description subtitle everything can be changed from here all right so this is how it is done now click on update so whenever you do any changes on your website always make sure to click on this green update button now let's create a second section so for that again we'll come back over here at the bottom click on this plus button to add a new section and here let's see again we need a single row single section so we'll add a single section single column now in this we want to add the brands option or brands elements so search for brand you should see this one sign up brand carousel drag and drop it over here now this will give you this default icon so you can click on this okay you can click on this option click on youtube maybe i don't want this maybe let's delete bottom three i don't want youtube so i'll select this option and i'll add my own brand over here you can add a brand link as well so if somebody clicks on this thing they will be redirected to that particular page okay so if somebody clicks on this icon they will be redirected to that link so if you want to add any link you can click on that thing let's add another item click on add item let's add maybe some other option second option similarly add item add one more option add more option if you want so we have around five so let's add one more click on this plus button okay select this option now how many do you want to display so if you scroll down you will see this under carousel settings how many do you want to display so maybe if you want to display four or if you want to display three uh at a time you can select that option as well whether you want to make it auto play hover on you know if we want to pause this thing on hover so when you hover this thing it will pause mouse drag touch drag we want to use these options if you want to make it centered you can select the center option now it's time to style this thing go to style if you see over here the styling and everything is simple we just want to change the background color of this thing and the background color is this color f8faff so we can come over here we can select this edit section this six dots icon at top edit section select that thing go to style change the background type select this background type and change and basically paste in this color again let's add this color i'll name it bg color because we'll be using this color as well many times so select this option we can do one more thing we can add some padding at top and bottom so for that come to advance and let's add padding at top so maybe 50 pixels at top okay this will add this padding at top of 50 pixels if you want to select this option if you want to add more options instead of 50 if you want to add 70 or anything like that you can do it again click on update and make sure to update this space save this page now let's create this section so for that again we'll click on this plus button add a single row and column now very top we have this title okay we have a subtitle and then we have a title for that we'll use this cena title search for title select this option sign a title or cena title now the title over here the subtitle is this so we'll copy the subtitle okay this is basically the title actually and this is the subtitle okay paste it under this option now if you want you can also add description we don't want to do that go to style first let's change the style of title so here as you can see the color is different style the size and everything is smaller and everything is capital letter or uppercase so we'll select the typography we can change the transform to uppercase okay so everything is capital we want to make sure that thing and after that we want to change the size of this thing this is very big we want to change the size of this thing to 16 instead of 32 we want to make it 16. we don't want this much line height as well so you can delete the line height if you want all right and then we have the color we want to change this color to this orange color so select this option now we have the subtitle which is this so for this we want to use we want to use that play fair and a font family search for that playfair display we want to increase the size to 46 and we want to make it bolder so weight will be 900 and you can change the line height to 1.2 em make sure you have selected em at top now if you want you can also change this color so this is not this black color this is this looks black but this is a little bit different as you can see the color code is 25283a so if you want you can use this color as well i'll select this option paste in this color as you can see very dark blue color i'll add this color in the global color and i'll name it dark blue click on create okay so we have the title and subtitle now select this row edit section change the background color again so go to style change the background color and we have already added this color in the global color bg color select that thing as you can see the background color is changed if you want you can also add some padding at top and bottom so here as you can see at top we have added this space and it bottom very little space so go to advanced at top padding we want to add 60 bottom we just want to add 10 pixels okay this is how it is done now let's add this section so for that again come back to this option and add three different columns okay because we want three different options over here now first of all we have this icon over here so we'll click on this option we'll search for icon element drag and drop it over here whatever icon you want for example here we have the users icon so if you click on this thing search for users you have this icon select this click on insert you can change the style go to style change the color to this orange color if you want some other color you can do that now size we want to make it 65 a little bit bigger so change the size to 65 then we have this setting so i'll copy this thing come back drag and drop this heading at bottom okay paste in this heading make sure it is center line go to style change this color to this dark blue color and change the font family to playfair display okay this one if you want you can also change the sizing and everything we want to change this thing to 25 and weight will be 900 so bolder and if you want you can also add some line height of 1.2 then we have the text which is this copy this thing come over here drag and drop this text editor paste in whatever your text is okay go to style make it center align the color of this thing will be you know this one three eight three eight three eight okay again i want to add this color okay description color maybe okay i'll want to name it this thing or if you want you can just name it with the color code okay so it was three eight three eight three eight okay so click on create now again change the typography select pop-ins instead of roboto roboto is the default font family over here so we'll select pop-ins and we want to increase the size to 15 and 400 rest everything is good so we want to keep it at least then we have the button so for that we want to use this button so we'll drag and drop the button element so drag and drop it over here in fact i think we wanted to do one thing we wanted to add a section in this and after that let me explain you what i wanted to do so we can do one thing when you add these three columns inside these columns you can add in a section like this okay and when you add in a section it will give you two more columns inside it delete the second column okay like this right click on this edit column delete it again we want to add only one column and we want to add everything in that so for this also we don't have to go back we can use these elements as well let me show you how just you know drag and drop this inner section over here we don't want two columns we just want one so we can right click on this column delete it now bring everything under this inner column okay title we have the heading first then we have this description then at the bottom we have this button okay this will give you more styling options i'll explain you when we when we change this style as you can see we are adding border we are giving a lot of different styling over here so this will help you with that now for the button first of all we want to make sure it is center aligned and the button says join us now now go to style and change the typography again instead of roboto we want to make sure that our font families pop ins and change the size to 15 and make it 600 okay just a little bit more bolder then after that we want to make sure that this is circular or rounded so border radius will be 25 or 50 you can change this thing and we also want to change the padding so padding of this will be 16 from top and bottom and 22 from left and right and obviously the background color will be this orange color because we are using this color everywhere this is like our primary color okay and now this thing will be useful the reason we have used this inner column is that we can use this option edit column so select this inner column click on this edit column and let's add a border first so go to border go to style add border border type will be solid with will be one okay and whatever color you want so maybe we want this orange color but we want to decrease the transparency because right now if you see this is very dark we want to make it very lighter like this one so we can decrease the transparency so select this color and make it maybe 25 percentage let's see okay like this okay maybe 30 percentage let's make it 30. right this is how it is looking we also want to make sure that our corners are a little bit rounded so that is five and we want to change the border radius to five not 50 because that will make it very circular just five and now let's add padding here as you can see at top of this thing at top of this we have some space at bottom of this button we have some space and a little bit space from left and right so let's add that padding so go to advanced and let's add padding of 40 from top and bottom and 30 from left and right now once you do this thing this time you have to select this outer column so if you we have we have selected this edit column inside now as outside that thing you will see this edit column click on that go to style let's change the background color to this white color as you can see uh this is the white color background so we'll go to style select this option change the background color to this white color right now you cannot see the difference but if i click on this option edit section and change this background color to this color bg color that we have added and now as you can see this white background color is working like this okay so this is how it works now here also we can do one thing we can add this you know little bit of radius so we can select this outer column go to border add this border radius of 5 now go to advanced and add padding of 10 from all sides okay and if you want you can add some margin at bottom so let's add 15 pixels margin at bottom just a little bit now go to the main section again edit row edit section the main row and let's add some more padding at bottom so maybe 100 100 or 110 pixels at bottom we want also want to make sure to add some padding at top over here so let's select this option maybe at top we want to add 20 pixels okay or maybe 30 pixels now once you do this thing you can do one thing you can right click on this outer column and click on copy or maybe let's do one thing right click on this or outer column and duplicate this thing this is to save some time again right click on this outer column and duplicate it now for these empty columns right click delete right click delete with the formatting is a little bit changed let's fix this thing now hide it all right okay so we are not seeing this piece okay i think what we did is we did not wanted to add that color in the outer back in the outer column so if you select this outer column don't add this background color over here clear it select the inner column and you can add this background color in the inner column okay white background color okay if you want you can also go to advanced and add some margin maybe let's add 10 or 15 pixels margin from all sides okay so this is the style that we wanted again i'll delete these options and duplicate this one okay so that we save some time we don't have to style it again now we just have to change the thing so instead of this icon maybe we want this dollar icon so we can select this thing okay so maybe if i want maybe this icon i'll select this thing change the text to donate to support okay change the button text to donate now type in donate now and obviously as i said earlier we'll change the i will add the link later on once we create all the pages after that we can add the link similarly you can do the same changes to the third column now click on update and update this page and now let's go ahead and create our next section which is this about us section so to create this section again we'll come back over here and we'll add two columns this time because as you can see at the left hand side we have this thing at the right hand side we have this text and all now the left hand side we just want to upload a single image so i'll search for image element drag and drop it over here now choose the image that you want to here you can select whatever image you want so i've given you this image as well if you want to use this image you can use it select this go to style make sure under width you have selected 100 okay and after that you can also add border radius so let's add border radius of 20 just so that we can make these corners rounded okay like this so here as you can see these corners are now rounded now below this thing we have this counter and here as you can see we have four counters so to add this thing we have to again come back to this option drag and drop this inner section now delete this column we just need one column so delete the second column and inside this thing we need to add the counter element so search for counter element and select this counter element drag and drop it over here now here as you can see it says 50k plus volunteer 15k plus volunteer so starting number will be zero ending number will be 15 okay and after that we also have a suffix so 15 k so we'll type in k plus so k plus okay 15 k plus and after that and instead of cool number we'll type in volunteer all right like this now we can style this thing with style text color as you can see is white everything is white so first let's do one thing let's change the background color to this orange and after that we can change the text color and everything to white so select this option select this inner section okay edit section click on this six dots icon now here we want to first do one thing we want to bring this thing at top so we'll go to advanced and under margin top we will type in 75 and before 75 type in minus so make it minus 75 and now as you can see this is gone top just like this one okay so minus 75 pixels at top margin then after that come back to layout and make sure we have selected no gap under column gaps now select this edit column select this option edit column option go to style give this this background color select color and this background color and now let's add some margin and padding so go to advanced first let's see the margin so left and right i want to add some margin so that as you can see we have some space some gap both at left and right so let's add this margin only at left and right so maybe 25 pixels both left and right now let's also add some padding so that as you can see we have some space at top and bottom so padding will be only at top and bottom 25 and after that we can also add some border radius to make the corners rounded so we'll go to this option style we'll search for border and under border radius you can type in 20 25 any number like that okay now we have this thing again come back to counter now we can change the text color and everything change the text color to white and after that typography now this font family will be playfair so search for playfair display because as you can see this is the style for this number we don't want this big so we can change the size to 42 and we want to make it bolder so 900 and line height will type in 1.4 now let's select the text so select this title again change the text color or title color to white change the typography to pop-ins so let's add pop-ins now reduce the size to 14 pixels and make it a little bit bolder at 600 now let's go to advance now here we want to do one thing we want to go to positioning and we want to and we want to change the width to custom then after that under custom width will select percentage and we'll make it 25 like this now the reason i'm doing this thing is because i want to place four different options over here so i'll change all the width to for 25 pixels so that we can place four options in one row now if you also want to place this border you can come over here and you can select this border option okay select this border and at the right hand side we want border only at right so we'll select maybe one pixels right and you can change the border color so in this example as you can see we have this kind of color okay you can change the transparency as well if you want so maybe we want to make it a little bit transparent maybe 50 percentage okay let's see okay like this now once you do this thing you can now right click on this and you can duplicate it multiple times to save some time like this okay now as you can see this is how it is looking we don't want border for the last one so we'll select the last option we'll go to style i will go to advanced actually will you know remove this border model none now you can click on the second option and you can change the text to 380 plus sponsors so we'll type in 380 plus and the text will be sponsors okay now similarly you can go ahead and change these text as well and after that you can click on update now at the right hand side we have this title so very first thing we have a title we have a subtitle title and some text and after that we have a icon list and then we have some button so for this we'll again come back over here we'll search for title sign a title drag and drop it over here first we have the title which is about us then we have the subtitle okay which is this and then we have some text which is your description okay and everything is aligned left so we'll select alignment left now go to style first we have the title option so we'll change this thing to pop-ins i think it is already poppings because this is the default option so we don't need to change that thing decrease the size to 16 and make it 600 if it is not then select this option we also want to change the color to this orange color okay then select the subtitle and change this option change this font family to playfair display now increase the size to 46 make it bolder at 900 weight you can also change the line height to 1.2 so as you can see the settings are very similar we have seen the same settings even at top now finally we have to select description and over here we have to you know select this thing change the size to 15 pixels and make it a little bit lighter at 300. now below this thing we need to insert this inner section and we need to divide this thing by default it is 50 pixels 50 50 percentage both the columns i want to make the left column wider so i'll select left column click on edit column go to column width make it 60 percentage okay so this is 60 percentage and this will be 40 percentage now once that is done first we need to insert this icon list so we'll come over here we'll search for list and here as you can see icon list drag and drop it over here i just want one for now now we need to change the icon color to this and we need to change the styling of this text as well now first of all let's copy this text or whatever text you want whatever list you want to create enter that thing we already have this check mark if you don't want this icon if you want some other icon you can click on that and change the icon now let's let's add some space between this thing so for space i'll add 12 pixels space between these two options now select the icon change the color of the icon to orange and you can also change the size if you want just a little bit bigger maybe 15 pixels or if you want to make it bigger you can type in 30 or whatever number you want now select the text change the color to this dark blue color and after that i don't think it is dark blue color okay it is dark blue color and after that we can change the typography it is roboto we want to make it pop ins so select pop-ins font size will be 15. now we can go to content and we can duplicate it multiple times so if you want more options now you can just go ahead and change the text so select the second option change the text and you can do the same thing for all the other options now the right hand side we have this text for this also we'll use that title option so search for sign a title you can drag and drop it over here now the title says 28 okay then after that we have the subtitle which says years of experience okay so here the subtitle is different and then we have the description so subtitle is yours and we have the description of experience all right select this option for the title if you see we are using the playfair option playfair font family so we'll go to style change the typography to play fair okay play five display change the size to 52 we want it bigger and we also want it bolder so 900 then we have this option subtitles so select your subtitle this is also playfair so we'll change the font family to playfair decrease the size to 20 make it 600 and also line height for this will be 1.2 and finally we have the description which will be poppins so it is already popping so we don't need to change that thing make it 15 and 400 okay a little bit lighter now once you do this thing you can click on this column option edit column so that we can give this background color and we can add some padding now go to style now enter that orange color as your background color like this and after that you can do one thing you can also go to border add some radius 20 maybe okay to make these corners rounded you can also add some padding and margins so we can go to advance we can add some margin of maybe 10 pixels from all side and to add some padding you can go ahead decrease this thing maybe we want 10 pixels at top and 15 at bottom or maybe 25 at bottom 25 at top okay it all depends on you however you want this thing to look like now we can click on this text and change the color to white okay i think it is yeah here it is white so we can change all the color titles subtitle all these colors to white okay description also white now click on update again then finally we have this button now for this button we can save some time we can copy on any one of these buttons so i'll do one thing i'll copy this button paste it over here at the bottom not under this just outside this option okay outside this now make it left align and change the text to learn more or whatever you want okay you can also add some link and all now if you want to add some space over here as you can see if you go to advance we can add some spacing at top so 30 pixels maybe space at top so that we have some you know some distance between this section and this button you can also change the padding and size of this button so you can go to style you can select this option you can increase the size maybe a little bit okay and you can also change the padding so by default it is you know 16 22 you can make it maybe 18 32 basically 18 from top and bottom and 32 from left and right this is how your button will look like you can update this thing and finally one more thing we need to do these settings for the row for this section and add some space at top and bottom so select this section okay edit section click on this edit section main row basically go to advanced and let's add some spacing so maybe 120 padding top and bottom so that we have this space both at top and bottom all right now we can finally update this page let's see so this is how it is looking if you want some more space i think here we have some column gap so if you want some more column gap you can come over here you can make it narrow as you can see or if you want wider you can select wider now as you can see this is how it will look like so it all depends on you you can increase or decrease this space if you want to go even wider you can select that option as well i want to go back to default i just wanted to show you that you can do it like this now click on update then we have our next section which is this donation campaign section now we have created most of the things so everything after this will be just copy paste for example if you see this title and subtitle this is very similar to the title and subtitle that we have created at top now we can just use them and i'll show you how you can edit them and reuse it so for example we can copy the sign a title we can drag it drop it to here we can paste it over here basically this is how it is looking let's let's do one thing actually don't paste it cut this thing first we need to add two columns here we have one column and at the right hand side we have another column so click on uh add a new section two columns left column will be wider so we'll select this and we'll make it 60 percentage and right one will be 40 percentage then we will paste in that thing over here okay this subtitle and title over here now the title over here says recent campaigns okay so this is our title as you can see we don't need to style it anymore we can simply copy the text styling is automatically done we can delete the description we don't want this description this is how it will look like maybe we can decrease the margin at bottom now the right hand side we have this button and similarly we'll again copy this simple button paste it over here change the text to view all campaigns so let's type in that thing now we want to place this button at the bottom here as you can see so we can select this column and we can select this option vertical alignment we can select bottom okay like this and you can also change the alignment instead of left if you want right alignment like this okay select this button and make it right alignment then we have this campaigns that we have created so for that again we'll add a new section at two different columns or if you want to add multiple columns maybe three four columns you can do that thing as well now here the very first thing we have is this image so we'll click on this plus button will add an image at top so let's select that image upload it i think this is the one that we have used select this click on insert media now we want to add some radius to this to this image so we'll go to style select border radius maybe 20 pixels below this thing we have the title so we'll copy the title okay whatever your campaign title or name is you can copy that thing now first time when we are doing all these things we have to do it manually but after we create this design after we create everything all the design basically the home page everything else will become automatic this is the only thing that we have to do manually now search for heading and drag and drop this heading at the bottom paste in whatever your title is go to style change this thing change the color to that dark blue color if you want change the typography to play fair select this option size will be 26 pixels and will make it bolder at 900 now we want to add some space at left so that you know this image and this uh this text aligns perfectly okay so for that we'll go to advanced we'll add some margin first let's add top margin of 10 just a little bit uh space from top and now at the left so that we can align it properly so at the left hand side we can add 20 pixels margin then after that we have another column in our column so we'll again go back to elements drag and drop this inner section so that we can have three columns now in this case also i'll delete the right column i'll just use that positioning option that we have created over here okay like this so we'll come over here we want to add this option we want to add a simple text and after that we have another text for this we can use the china title so we can come search for title drag and drop the signer title over here first text is raised okay so this is your title and after that we have this money how much money you have raised that will be a subtitle we can change the alignment to left because here as you can see this is left aligned now go to style first we have title select this thing uh it is default which means it is automatically popping no need to change that thing or decrease the size to 14 and make it lighter at 400. now select subtitle okay and under subtitle we want to change this thing let's see we have this font family so we'll change the font family to play fair we'll change the size to 20 pixels and this will also be bolder like this and we don't want this much space so we'll make it 1.2 em for below title i think we have a lot of space we don't want any so we'll delete the margin bottom for title now for this also just select this advanced option go to uh positioning and make it custom width and percentage for this we can make it 33 because we want three in one row so we can make it 33 pixels here also if you want to add any border or anything you can go to advanced and you can add a border at the right hand side maybe okay so at right side maybe we want two pixels border okay first make sure okay this border radius not this one uh select border type solid and only at right side two pixels okay and you can add any color you want you can make it transparent if you want let's see okay it's less transparent maybe let's select something like this let's see again let's make it even more and you can also increase this thing instead of five instead of two let's make it five or maybe seven so that it is displayed properly here now you can see this thing then after that we can do one thing we can simply duplicate this thing three times and again for the last one we don't want any border so we can select this option go to border make it none now if you see properly this this is getting connected to this border so for this we can do one thing we can add some margin so select the first option and add margin right 20 okay so this brings the border over here select the second option do the same thing margin right 20 i don't know if you can see this thing but this was earlier touching this thing and now we it is come like this okay this looks much better now below this thing we have this progress bar so we can drag and drop the progress bar let's see bring the progress bar over here drag and drop the progress bar at the bottom and one more thing we also want to make sure that this is also aligned properly so we'll select this thing go to advanced and let's add some padding over here so maybe for top we want to add 10 pixels just to add some space at top then 0 at right 20 at bottom and left for top also we added 20 for this also we are adding 20 so that everything is aligned like this now select the progress bar now the progress bar the title says uh inner thing says raised fund okay so inner text will be raised funds we don't have any title so we'll delete the title now if the if you have raised maybe 100 or 80 percent you can type in that number so this is how it will show like now go to style the color instead of blue we want this orange color again so we'll select this orange color you can increase or decrease the height you can change the border radius like this then we have the inner text you can change the style of the inner text select this one change the typography we have pop-ins 13 pixels and you can make it bolder at 600 and similarly for this also we want to add some padding at left 20 pixels padding so that everything is aligned properly now in this case we also want to add padding at right because as you can see this this stops over here this does not go till the end so here we also have to add some padding at right maybe we will add 30 pixels at right okay so this is the one then after that we have these two buttons so for that again we'll use the inner option in a section drag and drop it over here now we can change the width of this thing so for left left column will be 40 and right column will automatically be 60 percentage okay like this now let's do one thing let's again just copy this button from top paste it over here like this we don't want this space at top so we can go to advance delete this 30 pixels padding at top now for the second button let's see we have used it over here but i don't think we can copy this thing it will copy the entire slider so we'll have to use this button we'll have to create this button very easy we can actually do one thing copy it paste it over here like this first of all let's fix this left button so here it says donate now everything is fine just change the text to donate now now the right button select this thing here it says program details so we'll change the text to program details now let's change the style so if we will go to this option we'll change the background color okay select this thing we'll make it transparent and the color is orange and also the border color is orange so we'll select text color we'll make it orange we'll select border type solid maybe two pixels okay and this will also be orange like this and when you hover over this thing as you can see this is the design uh the text color becomes white and the background becomes this orange so we'll select our text color becomes white background color becomes orange like this okay so we have this hover effect now we can update this thing as well select this inner section now go to advanced let's add some padding 20 at top and 28 left also we don't want any gaps so we can go to layout and select column gaps no gap now once you achieve this thing you can finally select this column okay select edit column now we can add border we can add this radius we can also add all these options so first of all let's go to style at this border maybe one pixel okay this orange color border let's also make this border you know rounded like this so 28 okay this is also a little bit transparent so we'll make it at 60 70 percentage maybe let's see okay even less maybe this much okay you can keep it at this select this option now go to advanced let's add margin of 20 pixels okay this is how it will look like it will add 20 pixel spacing from all sides now let's set the padding so for padding we'll add 15 at top 10 it right 30 at bottom and 10 at left this is how it will give you you'll get this design basically okay as you can see we'll fix this button later on as i said you earlier now once you complete this thing you can simply duplicate this thing okay and now you can delete the last empty column and with this as you can see we have completed this thing now for the second option you can just go ahead change the image change the title and everything now click on update finally select this main option main row and let's see what we have let's add some space at top and bottom so select padding top and bottom maybe 100 or 110 pixels okay a thousand okay not for this one not for this one uh select padding top 100 for this then select this column and for this will add bottom 100 okay this space so bottom 100 for this top 100 for this now click on update maybe top 100 is not required as well we'll select this we'll delete this thing because we already have this space at top so only padding bottom 100 for this section all right now let's see the next section which is i guess this contact section so for that again we'll come over here we'll add two columns uh at the left hand side again we have this simple title and all so for that again we'll go at top we'll simply copy this thing come over here at the bottom paste it over here okay so this will save you some time now i think you can just go ahead and change the title this is your subtitle okay and i think we can also change this thing and i want to do one more thing below the subtitle we want to add some space so subtitle select this thing a bottom we want to make maybe 15 pixels right now below this thing we have this option okay so we'll have to again use this inner section left will be only 15 percentage with and right will be 85 so the left hand side we want to use this button so for that we'll come back and we'll search for this sign a width option okay you will see if you search for this sign a video option you can drag and drop it over here this is how it will look by default now if you want any animation you can select this thing for example here as you can see we are using this wave animation so we want to use this wave animation you can enter the video link that when somebody clicks on that clicks on it that video will pop up so for that we'll do one thing go to youtube if you want any video you can simply go ahead right click on that video and click on copy link address come over here and let's edit this thing click on pencil button enter that link and you can change the title if you want we don't want any title we are not using any title now if you want to change the icon you can do that thing as well we want this icon we don't want to change this thing now let's go to style style this thing now if what color you want you can set this thing so we want to uh i don't think we have any color we are not using any background color so we'll make it transparent then after that for the icon color we want to make it orange okay like this we don't want let's see what happens when we hover this okay so when we hover this the color becomes the icon color becomes uh white and background becomes orange so select this option hover icon becomes let's see what happens okay so this becomes orange and the icon color becomes white better okay now again come back to normal now for the font size this is bigger we want to decrease this thing to 20 okay now and for all the other things with height and line height this should always be same if you're making it 50 everything else will be 50. i want to keep it at 65 okay so all three will be 65 right now as you can see you cannot see everything properly because uh we don't have anything in the background once we complete this thing we'll add something in the background and we'll also add an overlay so everything looks much better then after that we have in fact let's let's before we add this title before we add the setting let's add that background so we'll select this edit section go to style and we'll add this background image let's see what image we have we have this image so select this and click on insert media let's change the position to maybe center center okay and size will be cover let's add overlay to this background so that we can read these text properly so select this option maybe we have black color i guess so add black you can increase or decrease this thing you can also change the uh you know overlay style if you want you can select multiply if you want you can select normal and you can increase or decrease this overlay opacity okay so i want to keep it maybe at 0.5 now once we have this thing we can select this title and we can change the color of subtitle and description to white now let's add this text play short video so we'll copy it use the heading normal heading drag and drop it over here paste in this text and i think okay okay we did not add this a border color okay in this icon come back let's see border color here it is border type select solid and maybe two pixels yeah now it is looking better now select this text go to style change the text color to white right like this and let's change the styling so select typography now we don't want roboto we want popping so we'll change the font family to pop ins 16 pixels size 500 weight and maybe 1.2 line height okay and we also want to make sure that everything is in middle so we'll select this inner section we'll select vertical align we will make it middle now let's add some space and top and bottom so select the main row we added all these things where we did not add this piece so go to advanced uh for padding top and bottom we'll add maybe 120 pixels okay both at top and bottom and finally at the right hand side we want to add this contact form so for that we have to go back to our dashboard you will see contact at the left hand side select that option now here we have created this contact form you can do one thing you can edit this thing again go to that file that you have downloaded this media file we have seen these images now inside this media file you'll also see this pages folder open that and in that you'll see this contact form okay the title is just contact form open this thing copy everything cut this file now come over here delete everything now whatever you have copied paste in that thing and click on save now you'll see this shortcut this blue thing copy this shortcode come over here search for shortcode element drag and drop it at the right hand side enter your shortcode now this is how your contact form is looking right now to style this thing go to advanced now the css id type in this thing bossa hyphen ngo hyphen callback hyphen form okay you can see this thing on your screen as well now let's finally add this background color and make it transparent so we'll select this thing edit column go to style and add select this background option select background overlay add this color orange color and change the overlay to maybe 0.4 okay now let's add some padding go to advanced top and bottom will be 60 and right and left will be 30 like this now click on update and with this you have also created this section our next section is this events section so we'll again add a single row single column let's copy this thing this title paste it over here okay make it center align this is our title this is our subtitle okay paste it like this and after that we have to again create this thing so for that again we'll add a new row we want two columns so we can select two columns now inside this thing first of all we want to select this option we want to add this option we'll add a inner section inside this option now we can increase the width of the left column to 80 percentage and right will be 20. so this thing will be empty right inside we want to use this thing we just want to add the date so whenever this event is so for that again we'll use the sign a title drag and drop it over here so if it is on 15th may so we'll type in like this okay make it center align go to style for the first option let's change this style to this play fair okay like this and we don't want any bottom margin so we'll delete this thing you can increase this size of this thing if you want and 15th it says okay 15th then after that for the bottom one also you can design that thing we are not going to do that because we have seen that thing multiple times now select this thing edit section go to style change the background color to this orange color similarly and go to border add some radius now you can select this text change the color to white sub title also change this color to white okay now below this thing we have this option we have the title so for that we'll use the regular heading drag and drop it over here at the bottom in fact i think okay before that thing we also have this space as you can see uh below this thing we have this nice big space so we can do one thing we can search for space here it is drag and drop this space between them 50 pixels if you want know even more you can add 60 70 pixels as well now select this heading this is the title for example we'll select this thing type in the title go to advanced change the color okay we'll change the color later on because we have to add this white color so for before that let's add all the typography thing so the font family will be poppins let's change this thing to poppins size will be 25 and 1.2 line height then below with this thing we have this icon list this is similar to this list that we have created at top uh it is just inline this one is just inline list let me show you so if you again search for list you'll see this icon list drag and drop it over here very similar but instead of this you can instead of the default you can make it inline so this will become like this now the first option is we have the clock icon and we have the time of the event so we'll change the icon to clock okay maybe this one and we have the time of the event 8 a.m to 12 30 p.m whatever the timing is then the second option we have the marker icon and we have the location so we'll select the marker icon okay map markup maybe this one select this and change the text to whatever the address is now you can go to style let's add 15 space now go to icon make it a little bit bigger maybe at 15 change the icon color to this orange color i guess yeah orange color text is white will change the text later on now select the text color will change later on just do the typography thing so it will be poppins now again for to save you some time as well you can do the same thing with just like we did with the colors we added the global color you can also add global fonts as well click on this thing and we'll select pop-ins over here to save you some time so next time is when you want to make anything poppings just like that you can click on this then and you can select pop-ins okay after that you can also change the line height you can change the size and everything so we'll make it 13 pixels okay rest everything looks good and if you want to add some space you can go to padding maybe 10 at top and 20 at bottom okay space at top and bottom then we have this text this simple text copy it use this text editor paste in your text go to style change the color to maybe this dark blue color go to typography if you want to make it pop ins by default it is roboto just click on this globe icon make it poppins and if you want to change the size you can go ahead and change it by default it is 15. now let's use this button we have already added this button i guess at top here is copy this paste it over here at the bottom change the text to view details okay as you can see style and everything is good maybe yeah the rest everything looks good now we can select this option uh select this column outer column edit column go to style add image in the background so as you can see we have this image in the background we'll add this image this is the one click on insert media uh you can change the position maybe center center size can be cover okay now we can add some padding we can add overlays to select overlay add black color overlay over here maybe you can increase or decrease this overlay by default is 0.5 you can make it 0.6 0.7 let's add some border radius as well 20 pixels and now let's go to advanced add margin of 15 and you can also add some padding so for padding what i want to do is for top i want to add 20 right also 20 now for bottom i want to add 50 and left 40 okay so you get this design now select this text now we can change all the color to this white color select this text as well for text white color for this text change this thing to white color okay rest everything is good you can update this thing and similarly you can simply duplicate this option and delete the last option okay now for this if this if this is some other event you can click on now once you have created the design you just need to change the text click on this thing maybe it is on 27th so we'll type in 27th maybe december okay so as you can see once you have this thing designing this thing becomes pretty easy similarly if you want to change the timing and everything you can do the same thing now select this row let's add some padding at top maybe 100 pixels then after that let's also add padding at bottom okay select this one 100 pixels okay with this we have completed this section as well update this page now below this thing okay we i think we also want to yeah we also want to change the background color of this so select this go to style change the background color to this bg color that we have already used select this thing as well now select this option go to style change the background color to this bg color for both these sections now below this thing we have this section volunteers section so for that again we'll actually do one thing we'll copy this entire thing paste it over here we don't want this space at top because we already have this bottom space so we'll delete this thing change the title and subtitle okay click on this all right okay meet our team this is our title and below this thing we can add this simple you know volunteers thing that we have created and for that again as you can see we need three columns so we'll add another row three columns very first thing that we need is this image so we'll come back search for image drag and drop it over here now upload whatever your image is maybe let's upload this one click on insert media now we'll style let's add 20 pixels border radius now below this thing add in a section we just want one single column so delete the second column right click and delete first we have this title subtitle thing okay so for that again we'll come back search for sign a title drag and drop it over here now the title now the title will be you know whatever the position of this person is then the name of this person okay so maybe this is the name of this person not under highlighted text this will be under subtitle and some you know few things about this person okay under description now you can make it left line go to style first we have the title so the color of this thing is this orange color change the typography to pop in series already poppins let's change the size so instead of 32 let's make it 15 and let's make it normal which is 500 now margin bottom we don't need this much maybe only eight okay or if you want you can even make it zero then after that we have the subtitles select this option and this will be playfair so we'll change this font family to playfair instead of 24 let's make it 23 and 900. we wanted boldo and line height will be 1.2 now for this margin bottom we can increase this thing to 10 or even 15. then finally we have the description now in the description we want to change this thing to poppins which is already def whenever it is default it means it is poppins and i just want to make it lighter at 300. now once you do this thing go to advanced and again select this option positioning with will be custom and percentage will be 80 percentage then after that we want to use this social icons so for that if you search for social you should see signer social icons bring it at bottom now whatever icons or links you want for example if if you want facebook link you can search for facebook icon here is as you can see similarly if you want twitter you can search for twitter icon here it is and if you want linkedin or youtube whatever you want you can search for that thing as well and obviously you should also remember to change the link so instead of linkedin.com whatever your complete link is similarly for twitter twitter.com and whatever your username is you can change the color and everything so go to style and you can change the font size you can change everything basically from here now with we don't want 40 we want 35 and as i said earlier everything else should also be 35 or whatever the same number now change the background color to transparent icon color should be orange and we also want border so border type solid and this color okay and however effect we want to change this thing so select hover and here when you hover this thing as you can see we have this style so the color becomes white and the let's see okay so background color becomes this color and icon color becomes this white color like this okay and border color also becomes this orange basically okay now once you do this thing again select this option we can actually do one thing display it will not be inline it will be block now go to advanced select positioning change the width to 20 percentage okay should uh actually i think we have to bring it just below this thing okay now it looks much better so this is 80 percentage this is 20 percentage now select this column and again as you can see we have to change the background color and also go to style change the background color to white color whatever color you want okay you can also add some padding you can add some border if you want solid border one pixels maybe okay this color whatever color you want you can go to advanced let's add margin from left and right maybe 15 pixels and padding of 25 from all sides now select this section edit section in a section and add negative margin at top maybe 120 negative so that it it comes at top like this and now let's add padding of 25 top and bottom and 15 left and right okay we can also i think okay we can also make this thing go to border and maybe 25 border radius okay for column also select column go to border border radius okay so you have this thing now you can again similarly duplicate this thing multiple times like this and you can delete these empty columns like this okay now for the second person click on this thing change the image maybe this person then go ahead change the name and everything so styling remains same so you just have to change the content now select this option main row change the background color okay to this color and padding bottom will be 100 pixels all right okay and finally for the home page we have this section so for that we can do one thing we can copy this section for title paste it over here because as you can see the styling is very similar this is the text this is our title this is a subtitle and then your button you can change the text and everything of this button and below that thing we want to display blog post now we have not yet created any blog post so first we have to do that so to come back to your dashboard and click on post we have this hello world delete this thing this is a dummy blog post to create a new one click on add new now let me open a single blog post so that i can show you how it looks uh if i select this thing what happens after you die very interesting topic so this is the title we'll add our blog post title and after that whatever your answer is you can type in that answer at the bottom okay so whatever the answer to this question is now the right hand side click on post you can change the template you can add some categories so for example this is in a masjid in a mosque and this is a friday lecture friday kudba as it is called so i'll add a new category friday khudban now whenever there is another lecture on friday i'll always select this category you can also set a feature image like as you can see this featured image is set at top so we can set some featured image i'll select maybe let's select this one click on set feature image now if you want to integrate audio as i said earlier i'll show you how to integrate audio video and all those things so you can select one thing you can click on this plus button and search for audio select this audio now upload your audio file so i'll click on upload and i think i have this thing as you can see this audio file is present over here now once you upload this thing this is automatically integrated for you you can play it if you want as you can see so and if somebody wants they can even download this thing now how to integrate youtube videos we have already seen that thing so if you go to youtube channel whatever video you have maybe i want to integrate this one so i'll right click click on copy link address come over here again click on this plus button search for youtube select this option and just paste in your link it will automatically embed it click on embed this video is embedded now if there is any live video going on you just have to copy the link of that video so whenever you go go live on youtube if you click on this thing click on go live so whenever you go live on youtube you'll get that link you have to just paste in that link just like we paste the you know youtube link so steps are all same if you publish this thing let's see how it looks click on view post this is your title friday goodbye as you can see text you have your audio you have the video embedded so this is how easy it is to do this thing so this is how you can create your blog post it could be in different categories and after that we have to search for blog you can use either sign up blog post or a post carousel both the options can be used if you want to use this one let's bring it over here at the bottom you can change the style if you want the grid style if you want the list style you can change that thing how many posts you want to display two three you can change that thing as well and then what all you want what all you don't want to show so i want to show categories maybe and i want to show whatever you want to show you can just make it on okay we want to show thumbnail maybe okay you can select this thing or if you just want the grid style you can select that thing as well maybe if i want to display three uh three block post in a row so i can make this thing three and update this page okay so it will display three blog post if you want you can use this post carousel as well bring it at the bottom you will get this design as you can see how many want to display whether you want to display thumbnail whether you want to display the grid style okay this is the grid style we have the uh thing then we have the list style as well so whichever style you want you can use that thing let me delete this thing maybe we want to use this one okay now similarly select this option let's add some space at top maybe 150 or not 150 maybe 75 and at the bottom let's add 100 now finally with this we have created our home page we can update this thing now i purposely created this homepage and made this homepage so big because i wanted to cover everything so within the home page you have learned every designing thing based on this website okay based on this website we have seen how to design events we have seen how to design you know campaigns we have seen how to design forms everything is seen in one single page now all the other pages we don't have to worry about that we won't be you know designing them and creating them from scratch i'll give you all the files pre-made files you just have to import them on your website but because you know all the designing process because you have seen this home page editing the entire website becomes very easy for you now before we proceed further whenever you create any page you should always see how that page looks on a mobile phone to make sure that your website is 100 mobile friendly and to see that thing you will see this thing you'll see this link you'll see this icon at the bottom left responsive mode click on that and select mobile phone now as you can see this is how your website is looking on a mobile phone let's see from top now if you see this slider section it looks really bad so let's fix this thing for mobile phone click on this thing slider option go to style and this subtitle is looking very big so select subtitle and decrease the size now similarly i think we can also decrease the size of description okay let's make it maybe 12 okay this is how it is looking we can go to advanced we can actually select this uh select this navigator click on this navigator select section at top go to advanced and let's add some padding at top for mobile phone maybe uh let's add 75 pixels at top okay now as you can see or maybe 100 pixels at top so this is how it will look like this is looking much better now similarly for this also for this brands option if you select this option maybe for mobile phone we just want to display one in a row so we can go to carousel settings make sure you have the mobile icon over here select one okay now it will look much better it will automatically you know show you that animation this icon will change like this now for this if you want to change the style maybe this text is looking very big on mobile phone so we can come over here select the subtitle and change the text to maybe let's see 20 20 pixels maybe okay or if you want to make it bigger maybe 25 pixels okay so you can see as you can see rest everything looks good for this also uh we made it 25 percentage for mobile phone we can make it 50 percentage so select this thing select this button go to positioning and we had made it 25 select custom and go to percentage make it 50. now we can copy this thing paste style right click on the second option don't paste just select this option paste style similarly for this option as well paste style and this also paste style now as you can see for mobile phone this is looking so much better now for this also you can go ahead you know change the subtitle size to 25 okay select this button let's make it let's bring it in middle okay so as you can see you can make it 100 mobile and mobile friendly like this for this also if you want to fix anything for example for this one uh we can do one thing we can select this option for everything we added this left option okay we added a margin left 20 pixels for mobile phone that is not required so we can make it zero select this entire thing go to this option padding make it zero okay similarly select this option make it zero select these buttons go to this option and let's let's first select this option inner row make everything zero and now you can uh decrease the size if you if you want both the buttons in the same line first let's come to style and change the size of this button so typography instead of 16 let's make it maybe 12 and padding also we can change for mobile phones so instead of 18 we can make it mute 20 12 24 okay so 12 top and bottom 24 left and right okay and for we will do the same thing for the second button we'll click on that change the text to 12 change the padding to 12 24 okay now we can select this button uh click on edit section make it 50 percentage select the second button edit section make it 50 percentage width okay or if you want uh first we can make it 40 because this is a little bit smaller and this for the second or maybe 40 let's see 44 and second one will be 56. okay now as you can see this is looking much better now you can copy this thing and you can paste in the same style for example you can uh just copy it like this and you can paste in the same style for these options as well okay rest everything is looking good you can click on update and this is how you can make your website mobile friendly as well now you can cut this thing come back to desktop again and with this we have successfully completed our homepage you can now come back to your dashboard now let's create a next page which is your campaigns list page so as you can see under pages if you see campaign list okay so a page wherein you can display all your campaigns in one place okay so as i said earlier for the homepage we have seen everything so as you can see the design is present over here we have already seen this design now i don't even have to design this thing i'll show you i'll just give you the file you can import it on your website click on add new now you can give it a title of campaigns or campaigns list whatever you want change the template to elementor full width and publish it now click on edit with elementor and open the file that you have downloaded so inside that pages folder you will see there are so many different files and you will see campaigns list we have to import this file so come over here click on this uh this second icon add template go to my templates and import this file so click on this import select file and select the file under media pages campaign list open it now once it is imported you just have to install it on your website so as you can see it is imported now click on insert and this page will be inserted for you so this is the title and everything all the designing everything is automatically done for you if you want to change something uh in this campaign you can easily do that because we have seen this thing in complete detail when we are creating the home page now if you want to change this image click on this change this title click on that and so on now update this page again come back to your dashboard i'll show you how to link all these different pages first let's create all the other pages now click on pages add new now let's create a single campaign page now maybe suppose if you're creating a single campaign page for this campaign okay financial help for poor families so if somebody clicks on program details they will see this page so this will be the title now again template will be elementor full width publish it click on edit with elementor and similarly do the same thing click on add template go to my templates and import this one as well click on select file and select campaign single here it is as you can see single campaign select it open it and again once it is imported for you just need to insert it on your website so click on this insert button this will be inserted for you so as you can see you can again go ahead change these text whatever you want or however you want okay now click on update now we also need to integrate that donate button but we'll do that later on first let's create all the other pages let's come back again let's create our volunteers page so click on pages click on add new give it a title of volunteers this will also be elementor full width publish it and click on edit with elementor now again add template go to my templates import this volume to your template this is the one volunteer page import it now select this insert option insert this page all right so as you can see this is also done we have seen this page as well click on update again come back to your dashboard let's create the events list page and events single page click on add new this is the events list page template will be elementor full with publish it edit with elementor add template go to my templates import this events list template okay now once it is imported again insert it and whatever the title and everything is as you can see we have already seen the design and everything so this is how it looks like update it again come back to your pages again come back to your dashboard basically now suppose if you're if you are now creating you know a page or detail page for event so suppose if somebody wants to know more about this event okay maybe let's say one day online fundraiser they can click on view detail so once they click on view detail which page they will see so first i'll copy the title okay come back pages click on add new at the same title template will be elementor full width publish it so once they click on this view detail page they will see this page that we are going to create now right now so click on add template my templates import the even single page okay events single once it is imported just insert it so once they click on that button they will see this page and here you can have this thing in more detail okay as you can see we have the time we have everything we have the location if you want to change the location click on this pencil uh icon whatever the location is for example if it is mumbai you can type in mumbai with it will automatically get that location you can zoom in zoom out okay all these things can be done all right you can change the timing if you want if you want to change the timing select this thing change whatever the timing so this thing is created you just need to you know use this template to create more options again come back to your dashboard now let's create our about and contact page so click on pages click on add new let's create our about us page under template again this will be elementor full width publish it edit with elementor and again import your page so let's import the about us page okay here it is import this thing or insert this thing on your website and based on your website based on your team you can click on that thing and you can change it so if you want to change the icon uh best education you can change this thing change the image we have seen everything in the home page okay now click on update and finally let's create our contact page click on pages add new let's give it a title of contact okay or contact us if you want edit with elementor and similarly click on add template go to my templates and import this contact page template as well okay contact us template now insert this one as well okay you have this thing again you just need to click on this pencil button add in your own address i'll click on this thing change this thing and enter your own phone number address email address now under this contact form if you see that it says contact form not found you can go to your dashboard and again just click on contact and make sure you copy this shortcode and paste it over here then it will display this contact form okay again come back to your dashboard we also need to create the block page so click on pages add new give it a title of blog don't need to do anything just publish it and set this page so just like we set the home page we also have to set the block page so however our settings and click on reading and under post page select this block page click on save changes with this we have created all the pages now let's see the link so we i've shown you that if you want to create another you know campaigns for let let me show you one more campaign list so if you go back to campaign list if i want to create a page for maybe this campaign send child to school for education so i'll again go back to pages i've shown you this thing but i'm showing you again because i want to show you that donate button thing now you can click on add new and you can give this title so whatever the single campaign page you're creating template will be elementor full width click on publish click on edit with elementor now because we have already imported this single template list we can simply click on add template go to my templates and we have all the design now we just have to use these designs that i've given you and you can create as many campaigns and events as you want so we want single campaign inserted now this is the campaign detail this will uh instead of financial help for poor families you can type in save child send child to school for education how much money you want you can say you can change all these things then after that we want to add that button over here okay that donate now button so there are many different payment gateways available now you have to choose which payment gateway you want to use i'll show you two options i'll show you stripe so stripe is for international payment gateway and i'll show you one more thing a razor pay razor pays only for india but if you're from any other country and if there is some other payment gateway on your uh which is available or which you want to integrate with your website you can go to that payment gateway create a button and after that these steps are same so whatever payment gateway you're using these steps are almost all same so in this example if i'm using razer pay i can go to the dashboard for razer base so it is dashboard.razerpay.com so whatever payment gateway you using just go to the dashboard of that payment gateway and log into your account now once you log into your account you will see your dashboard now every single payment gateway will have the you know button option that you want to create payment links or payment buttons so in razor pay as you can see we have this payment links you can click on that thing and you can click on skip and get started you can create your new button click on create payment link then after that you can select standard payment link or upi payment link whatever you want you can select this thing for example if you want standard payment link how much money you can select for example if somebody wants to donate 500 okay payment for what so this will be the title this payment is for child sent child to school for education you can give your details if you want to be notified via sms or email okay then after that you can also set up you can also set expiry and all then after that click on create payment link this link will be created for you just need to click on copy you can copy this link come over here and let's add that button so let me do one thing let me use this button over here we have already seen how to design this button and all let me very quickly do that thing i'll change the text to donate now okay typography let's make it poppins increase the size to 16 okay change the background color to orange make it 50. so you can do something like this you can also change the padding now you can do one thing you can go to content and because we have the link you can just paste in this link over here and click on update now if you see this thing if you open this page let's cut this thing now whenever someone comes over here they can see this donate button if they click on this donate now button they will be redirected to this page and they can now make the payment they can select whether they want to make payments from card net banking wallet upi whatever payment gateway they want to select whatever payment method they want to select they can select that thing and they can make the payment so as i said you every single payment gateway has this option if you go to pay you money cc avenue raiser pays try paypal every single payment gateway has this option i've shown you one option let me show you another option if you go to stripe dashboard so if you're creating an account with stripe you you can go to dashboard.stripe.com login to your account and steps are also pretty simple as you can see creating a button is also very simple now on stripe also when you log into your account you will see payments option and we have many more options if you click on more you will see that we have some more options i know as you can see payment links option is given you can click on payment links and you can create a new link click on add new now we if you want to add a new product click on add new product name is let's copy this name again okay send child to a school for education okay this is our name you can add some description you can upload an image and how much money you want so maybe 500 one time you can also make it recurring monthly and all if you want you can give some advanced features as well and after that you can click on add product and this is how easy to do this thing now this is the payment page and this is how your confirmation page will look like and you can also allow your customers to adjust quantity this is how it will look on a desktop and this is how it will look on a mobile phone okay now once this is completed you can click on next and finally click on create link this link will be created for you you will get this link is as you can see click on copy this link come over here maybe instead of this if you want this stripe link update this page and let's come back let me show you this thing again refresh it now if you click on this link donate now link or donate now button now you're redirected to stripe and as you can see people can increase or decrease the quantity if they want okay they can enter the card details and they can make the payment so this is how it works so similarly you can go ahead and create different pages for different campaigns and you can add these buttons if you want you can just use one single button one single button link on all or different pages or if you want you can create different buttons for different you know campaigns now let's fix the links so if you again come back to your dashboard let's open our home page in a new tab so when somebody clicks on donate now nothing happens when somebody clicks on read more nothing happens because while we were creating the home page uh we had not yet created any campaigns or anything now we have created so we can fix this links click on edit with elementor and now when somebody clicks on donate fund they can you can redirect them to some page so we can select this primary button maybe i want to redirect them to uh the campaign list page so i'll search for that if you search for campaign list let's see as you can see this is the campaigns list page select this thing it will automatically copy the link when they click on read more maybe i want to re redirect them to the same page so secondary options same thing then we have this option when if somebody wants to become a volunteer we want to redirect them to the contact page so if they click on join us now they will be redirected to the contact page so select this contact if somebody wants to donate uh you can either just copy the link uh this payment link over here you can just copy and paste in this link so once they click on this link they will be redirected to that payment option or if you want again you can redirect them to a certain campaign page or the campaign list page similarly if you scroll down if if somebody wants to learn more this is the about section so if they click on learn more they'll be redirected to your about page so that they can learn more about you okay now this is the single campaign page and all first of all view all campaigns once somebody clicks on view all campaigns we want to redirect them to the campaigns list page now this is the specific campaign as a financial help for poor families we have created this page so go to pages as you can see financial help for poor families so when somebody clicks on donate now i want to get the donate uh now button i want to get the link for that thing so i'll go to this option and maybe this is the link for that option okay so i'll copy this link so we're just considering that this might be the link for this campaign okay so i'll come over here and paste this link under donate now under program details i want them when once they click on program details i want them to be redirected to this page financial help for poor thing so we can search for that this page name and here as you can see at top select this thing click on update once they click on this thing they will be redirected to that page okay similarly for some other campaigns as well you can do it now for events we have also seen we also created single events page so as you can see we have created one day online fundraiser maybe this is the one one day online fundraiser so once they click on view details i want to redirect them to that page so i'll type in that thing one day online fundraiser and update it okay so once they click on view detail they will be redirected to that single events page all right and with this we have completed this thing as well if you go back to your home page now if somebody clicks on donate fund they will be redirected to the campaigns page okay again come back if somebody clicks on join now they will be redirected to the contact page they can fill in this form and they can join you as a volunteer and or anything now for the campaign if somebody clicks on donate now you can redirect them to this page so they can make the payment or if they click on this option let's come back so if they click on this option now program details they will be redirected to the single program page financial help for poor families okay so this is how this entire process works you have to do the same thing for campaigns as well go to campaigns listing page here also click on edit with elementor and link these campaigns with those specific single campaign pages so here also financial help for poor families go to program details and search for that page link it with that page okay send a child click on program details search for this page that we have created send child to school for education so when somebody clicks on this page they will be redirected to that when somebody clicks on this button they will be redirected to the single campaign page okay so you can fix like this again come back to our home page now only the header and footer is left so first to create header and footer we'll have to start with the menu we have not yet created any menu so come back to your dashboard to create a new menu hover over appearance and click on menus let's create a new menu give it a name of main menu now what all links you want so maybe we want the home page about page campaigns page contact page events page and volunteers page okay and what i'll do is i'll add a custom link url will be hashtag and under text i'll add pages okay and i'll bring it over here campaigns will be oh here you can rearrange them like this then events will be over here now for all the other things for about page home page everything i'll bring them under pages like this okay contact page volunteers page i'll bring them under pages and i'll take my primary at the bottom click on save changes now again if you come back to your website refresh it now as you can see you have a proper menu over here now let's see the footer so at the bottom we don't have anything we have to add a photo like this so for that again come back to your dashboard now under appearance click on widgets and select this option footer one two three and four so under footer one we have this simple text okay this is the text so you can simply come over here copy this thing open footer sidebar one click on plus and search for text you can select this option paragraph and you can you know first of all add this thing this is your text and if you want to add this title you can click on this thing let's okay just you can paste in this title and text like this this is your footer one let's add the footer to so this is your footer to latest post we can come over here click on this plus button search for latest post bossa latest post select this one you can give some title this is our title latest post okay how many you want to display maybe you want to display only three and you can select these options left image right image you can select that thing then we have the contact info now this is also text for this you will see i think we have yeah footer contact open this file copy everything from here okay come back to this page open footer three plus button select custom html and paste in everything over here okay like this now you can do some changes for example the first text is lorem ipsum so this is this text so instead of this you if you want something else you can type in that thing then we have the domain name we have the email address info domain.com instead of this if you want your own domain name you can type in your own email address basically okay now you're at something dot com okay then after that similarly for these things as well okay to become a volunteer you have to enter this email so instead of this email just type in your own email address then after that we have the tags so go to footer four click on this plus button search for tags select tag cloud okay now you can update this page so this is your footer then after that we also have a sidebar so if you open a single blog post let's open this single blog post you can see at the right hand side we have this sidebar so to create this sidebar we want to use widgets and use this one right sidebar now by default it will all automatically give you a few options we don't want them so you can select them click on three dots and remove these options so first let's remove all of this very quickly right now now we can do one thing we can start with search so search for this element search element now however the design you want you can select that design maybe if you want this design you can select this thing the you know placeholder says search like this then after that we have you know this option the post option so we can again click on this plus button and search for latest post okay bossa latest post and left image the title over here says most viewed or if you want some other title you can type in that thing then after that we again want the same thing bossa latest post but this time this style will be different we want full image okay and you can give some other title maybe recent post now let's see click on update and this is how it will change and finally we have to do some customization for example we want to change the header and all so for that you will need to click on this customize link at top now here let's start with the header so at the left hand side click on header and select this style option now whatever header style you want you can select this thing if you don't want this top header space if you see this is your top header space if you don't want it you can just go ahead and click on select this option no top header that space will disappear i do want this thing i want to enter my email and all so i can scroll down and here as you can see if you want to enter your phone number enter your phone number enter your email okay then after that enter your address like this now it will display everything with this icon you know automatically then if you want to display your button like this donate now button you can select this option and button text will be donate now and button link you can just copy this link paste it over here this is how it will look by default if you want to change the style you can go ahead and do that thing so let's see so you can change the background color you can change all these different colors from here if you want to change the text color okay whatever color you want to change you can select those colors from here if you also want to change the hover color if you hover over this as you can see we have this blue color so maybe instead of this blue color we want this orange color some other color you can set that thing as well okay like this and let's see some more things if you want to make it circular you can you know increase the border radius and all now click on publish again come back let's see elements media and we have responsive we also want to display our social icons at the right hand side so for that you have to go to social media under elements whether you want to enable or disable it thing and under social links you have to enter all your social links you need to get your font awesome icon in your link so as you can see we have this link you have to go to fontawesome.com let's go to that website now for example if you want facebook icon you can search for facebook you can get the icon here as you can see if you want this icon click on this and you will see the name is fab as you can see this is the name this much okay so you have to paste in this ring not this much only this much okay fab fa uh hyphen facebook this is the only thing again if you see this darker text that is the code then after that your link whatever your facebook link is as you can see it has already started displaying over here okay you can also change the style and everything similarly if you want to add more links you can add more social link now if you want twitter link for example again come back over here search for twitter now as you can see if you want to maybe this one you can select this this is fab fa twitter so i can actually copy this text paste it over here instead of facebook fab fa twitter now you'll also see twitter icon as you can see so you can add these icons like this then you have the site identity option here you can upload your logo if you want so this is your logo for example if you want you can upload your logo it will replace this logo and once you upload your logo you can always disable your site title and tagline so that it does not display over here okay now from here you can enter your site icon or your fav icon come back we have the colors option or you can change the primary color hover color for example hover color i want to change this thing to this color okay primary color also can be changed all these colors can be changed side skin now the default skin if you want default skin if you want some other skin you can change that thing site layout you can change that thing okay these are not really important but you can do them then we have this sidebar we don't have anything to do let's see the footer okay footage is working properly blog post single block page then i think we have the blog home page let's see the blog page everything looks good just the block page i think we have to see one more time if you open the blog page okay now on the blog page everything is showing all these styles so this style also the grid style also and even this carousel style if you want to and at top if you see this uh this uh no slider style also if you want to disable this slider style for example just disable it like this this slider will disappear okay similarly after that we have the featured post which is this so whatever you want to disable disable you can just go ahead latest post if you want to disable it just disable it like this that will be disabled okay so if you want all style or only single style you can have only that one single style okay and with this we have successfully completed this tutorial i hope you guys find this tutorial helpful i hope you have learned something new now if you like this video if you want to watch more videos like this make sure to subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video share with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any sessions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 13,179

Keywords: wordpress, create a website, create a website for free, make a website, masjid website, church website, church website wordpress, mosque websites, bosa charity, bosa charity theme, how to make a church website, how to make a church website for free, how to make a mosque website, how to make donation website in wordpress, how to make donation website, how to make ngo website, how to make charity website, how to make charity website in wordpress, how to make a fundraising website

Id: acu1io9HMgo

Length: 145min 42sec (8742 seconds)

Published: Sun Dec 05 2021