Elementor for Beginners – Create a fundraising website with Elementor and GiveWP Video Tutorial DreamHost

Elementor for Beginners – Create a fundraising website with Elementor and GiveWP

Tutorial Hosting
And welcome back to another awesome WordPress and Elemental comprehensive course with me Ken now in this course we’re going to be building a real world donation website a fundraising website you can use it as an individual or an organization by the time we finish the course you will have a website that’s

Ready to launch a website that’s ready to start receiving Nations and without wasting any more time I want to take you on a quick tour of the website so you can have a look at what we’re going to build so let’s get started so first of all let me just refresh this landing

Page and as you can see it has those motion effects that I’m going to show you how to do we have this projects button that leads to this projects page we’re going to have a look at that but let’s first of all scroll through the landing page

So we have that section with this image carousel right here scrolling down here we have this section that has that fixed pattern background you’re going to see how to do that scrolling down we also have another fixed background section we’re going to see how to build all this then down here

We have a post grid that displays four of all the projects you have that need funding this is just to give the visitor quick links to these projects so they can click and go read more about them and then we have a nice footer that

Has some quick links and a sign up form so that people can sign up and stay in the loop on what’s happening in your world now if we click this all projects it will also lead us to projects so let’s just go to all projects and here we are so here will be

The list of all the projects you have that need funding and the potential donor can open up any project and see more details for example if we go to this one they can click this or read more and now they’ll be read directed to the page where they can actually make their

Donation here this is a detail of what the project is all about for example what you’ve been up to what you’ve been able to achieve and what you aspire to achieve down here we have a gallery of some of the photos you’ve taken of the project so if we click that it expands

The image and you can scroll through then we can close that down here we have the link to the previous project project and the next project going up here the donor can now click to donate they can see the name of the project a quick message to them and

Then amount that this project has raised so far every time a donor donates any money this amount is updated to reflect the additional amount the project has received we also have the goal here you can set this goal to be any goal you want you can also change the

Currency let’s click donate let’s assume I’m a Don I can input whatever amount I want here maybe let’s say $200 if it’s not listed here or I can select whatever amount I want here then click continue and this takes us to the payment form and in here we need to

Input our details because I’m I’m paying with PayPal I need to input these details so let me just input my details now I have the option to donate with offline donation or donate with PayPal so I can say pay with PayPal there we go but since I’m not making the

Donation I’m just going to close that I can also choose to pay with debit or credit card so I’ll just click that and that opens up this form for me to input my credit card details and pay now if we go inside the about page the donor can read about your

Organization what you stand for how the story began what led you to where you are today if we go to the contact page we have a contact form very beautiful we have an email and phone number well presented we have this map you can inut your specific location as the organization to allow

The donor to see where you’re located and if the donor has made any payments or donations if they click that they’ll be redirected to the place where they’re supposed to view Their donation history now the only thing they’ll be needed to provide is an email and it’s

The email they used to donate to your organization and once they input it here and verify they’ll receive a message in their inbox and once they receive the email they can click a link in that email and they’ll be redirected to this page and see the content or the

Dashboard they can see their donation history if they’ve been donating to your organization and your causes so now basically let me just go home so as you can see this is a live website that’s ready to start receiving donations it’s not just a demo website

By the time we finish we will have a website like this and you can start asking people on YouTube and social media to visit the website and donate to your cses so my name is Ken I’ve been teaching people how to build websites with Elementor for The Last 5 Years now

I’ve been teaching that mostly on skillshare and now it’s time for me to start teaching those skills right here on YouTube and so if you’re as excited as I am to get started if you want to learn how to build a real website with WordPress and Elementor without any

Coding skills let’s get started I can’t wait to meet you in the first lesson see you shortly so now that you’ve seen the website we’re going to to be building throughout this course it’s time to talk about how and where to get your web hosting and the domain name now every

Website you visit is stored somewhere online on a server that’s always available to the internet that’s why you’re able to access a website that’s in the Netherlands or the us or Mexico because it’s stored on a server that is always connected to the internet so that

Means every time you click a link that leads you to a specific website for example free pick let’s say free.com what the browser did was it sent a request for this specific page and this specific page can be accessed through this address or this URL and so

When it sent the request that request was received by the server that’s storing the free peek website and the freepick website is made up of many web pages but because this web page is represented by this specific domain name that server will return a response with the page you

Requested so that server is what a web host provides you with your web host provides you with storage space for your website and makes sure that your website is available to anyone who wants to visit it now the other thing you will need need is a domain name free.com is a

Domain name and this specific domain name is unique to free so no one else can have this same free.com the same way no one else can have your phone number your phone number is unique and it’s used to reach just you no one else so your website needs to have a unique

Domain name and people will use that domain name to access your website so now going back in here I’m at wordpress.org this is the official website of WordPress this is where you can download WordPress if you want to develop your website offline you can install WordPress in your system and

Work without the internet and build your website but what we’re interested in is the hosting page WordPress has a list of recommended web hosts and I recommend you take a moment and read this page as you can see they have three main recommended web hosts Blu host dreamhost and

WordPress.com but this doesn’t mean these are the only web hosts that you can use for your WordPress website there are other web hosts who are just as good if not better than these three so these are just WordPress recommendations but you will find out here by reading this that there are

Hundreds of thousands of web hosts out there the vast majority of which meet the WordPress minimum requirements WordPress decided to just make your work easier and decided to give you the top three that they recommend now personally I have used blue host and I long time ago when I started using WordPress I

Tried wordpress.com and you should not confuse wordpress.com with wordpress.org wordpress.org is the platform that is run by the WordPress Foundation because remember WordPress is open source and wordpress.org exists to provide you with remember with the WordPress download and everything you need to know about WordPress but now

When it comes to hosting there is a dedicated service called WordPress press.com let me just open it this is a platform that provides you with tools and hosting to build your website it’s like weeks if you’ve seen weeks you know that when you’re building a website on

Weeks you don’t need to think about where to get hosting because they host the website for you they just give you the tools to start building your website immediately but of course it has its limitations the same way weeks has its limitations when you compare it to installing WordPress yourself on a

Server when you install WordPress on a server somewhere you have more control to do many more things that you don’t have control over when you’re using a hosted service like wordpress.com but of course it’s a nice place you can try out if you want now at a personal level I use name chip

Especially when I’m just experimenting with some ideas before I commit to buying a dedicated web hosting for that specific idea so name chip has several Services right here one of them is this manage WordPress hosting and migration to WordPress but another service here is called shared hosting if I open

That we have this Stella Stella plus plan right here and I’ll I tell you why I like using this number one look at this unlimited websites that means if I have like 10 ideas for different websites I have 10 ideas maybe I want to open up an e-commerce shop I want to

Open up a Cosmetics shop I want to open up a personal blog maybe I want to open up a social Community maybe I want to create a forum those are five different ideas I can host all those websites under this plan without having to buy separate hosting

For each website I can have an unlimited number of websites hosted under this plan and I only get to pay this this fee per month of course this is the first year has a discount but then on the second year you will be paying 68.8 per year

But think about it if you have three ideas or four ideas for different websites and you want to see which one will work before you commit fully to getting a dedicated web hosting plan for it you can create the website under this plan create the four websites they will

Be live on the internet you can start sending people to that website through links on social media just link to the four websites and if one of the websites really catches on and start attracting a lot of traffic you can now decide now this website seems like it’s catching on

So let me get a dedicated web hosting plan for it separately and then you can just migrate it to the dedicated hosting because now it’s an idea that’s kicked off the rest can remain as experimental websites but they are still live online but the good thing is you’re paying for

One hosting plan you’re not paying different hosting plans for the different websites and of course because of those advantages that’s why I’m able to build a website like this this is the website I just showed you let me just go to the front end this is the reference website I

Built while preparing this course and I built it of course so I can so we can have have a website to look at as we work in the course now with that said this is one of the websites I have hosted under this plan and it’s under

This domain name vspa.com and now in this class we will be building our website and I’ll be using a different domain name which will be WordPress everything.com and it will also be under this plan so I will have those two websites demo websites under the same hosting that’s why I’m using this but

Now I’ve taken too much time talking about this I’m not trying to convince you to get this this is just me explaining the rationale behind what I use and how I work because maybe you might find it useful but remember you can always go here and try out these

Other web hosts they are also good go and try them choose the one you want and once you’ve done that let’s go back in here as you can see here we have domains name chip is one of the best domain name sellers on the planet you’ve seen their adverts everywhere on YouTube

And on different websites you can search for your website let’s say charity today.com let’s see how much that is all right charity today.com is the premium domain it’s $1,700 but we also have other cheaper domains charity today. today it’s up to you to get creative and

Buy a domain name that you can leave with a domain name that makes sense of course you want to use the name of your charity organizations or your startup if you’re looking for funds for technology projects and not not not charity you can also just use the name of your company my company

Today.com and as you can see yeah so just play around with this and then once you’re ready you can add to card but remember when we go back to Shared hosting when you buy this plan you get a free domain name so that means you have a chance to get a free domain

Name for the first year without having to spend this money that we’ve just looked at you won’t need to buy a domain name for the first year but of course you will have to pay for the domain name on the second year onwards and of course

I will leave a link in the description below this video player for you to go and buy any of these web host we’ve talked about including name chip and some of them might be affiliate link if you would like to support me and the work that I’m doing the best way to

Support me is to click on my affiliate links because you will still buy the service at the price that’s listed on their website but if you use the links I’ve provided I will get a small commission from your purchase and that will help me pay the bills and get the

Motivation to continue creating new courses so with that said that’s all about web hosting and how to get a domain name in the next lesson let’s see how to install WordPress once you get access to your C panel after you buy hosting so I’ll see you in the next

Lesson Peace So now that you’ve bought web hosting and a domain name it’s time to install WordPress and we install WordPress inside the C panel the C panel is provided to you by your web host so you will need to log to your C panel so let me log in right

Now like I said I use name chip so that’s why I’m logging in all right I need to verify this so they’ve sent me a verification code copy that paste it there submit there we go so I’ll go to hosting list every single web host will give you

Access to a c panel but every web host will have a different way of getting to the C panel so this is how to do it in name chip I clicked hosting and now here is go to C panel so I’ll click that I’ll be redirected to the C

Panel here we go so now we’re inside the C panel and every C panel regardless of your web host will look almost the same it will have most of these services and one of the most common ones is softaculous apps installer because it’s through the softaculous apps installer

That we can install different types of cms’s WordPress is just one of the cms’s that exist we also have jumla and all these others so I’ll click WordPress we’ll go inside softaculous directly to the apps installer and as you can see here this is a list of my current installations

And as I mentioned I only have one website active and this is a website installation so what I can do is install now that means I will now have two websites under one hosting plan so on this page right here I want to choose https www.v fx.com and once I click outside it

Will check if I have an SSL certificate if you don’t have an SSL certificate you can’t use https you can only use HTTP and that is considered unsafe you need to have an SSL certificate on your website the next thing of course is as I mentioned I also have another

Domain name under WordPress everything.com and that’s the one I will use because VFX port.com is already in use by this website so going back in here I will use WordPress everything and it will be www. WordPress everything.com and it will have no slash so I will not add anything

If you add something here your WordPress will create a folder and your homepage will be your domain name.com SL whatever you put put here and you don’t want that and then of course you can choose the WordPress version you want I’ll choose the latest 6.43 here we can give our website the

Name we want I will use um charity fund just like this one so charity fund and I will use a slogan right here help us make the world a better place and this Logan is what appears here as you can see here we have the

Name so this is Charity fund it will be instead of crowd funders it will be charity fund or the name of your website and then help us serve this is the site description so that those are the details for up here with that these are the login credentials for your WordPress

Website so if for example we want to log in to WordPress to the WordPress dashboard we won’t need to go through the C panel if we have these details so let me show you what I mean if I go to VFX pod.com login I can log to this website with

These credentials right here here so make sure you save them somewhere separate so you can remember them whenever you want to log in to your dashboard directly but you can always just log to your WordPress dashboard through the C panel and check these These are plugins that will be pre-installed together with WordPress

But you can choose not to because there are other options in the WordPress plug-in repository let’s go to Advanced you you can choose to have a backup in the default location your website can automatically be backed up once a day once a week once a month I’ll

Choose once a week and of course you can read this is the number of backups that are available at any given time you will always have two backups at any given time an older one and a newer one then of course if you want to receive the details once WordPress has been

Installed you can provide an email here I will not provide it and this will take 3 to 4 minutes but usually takes a few seconds do not leave the page until the progress bar reaches 100% And there we go so now this is our domain name WordPress everything.com

Or our URL or our address the equivalent of a phone number and this is the URL to our dashboard remember the login credentials I’ve just shown you they will help you log to this area so click that we’ll be redirected to WordPress this is our dashboard and

We can now start building our WordPress website using all these tools now if I switch to our reference website right here where is it this is our reference website if I go back to our dashboard it has many more tools and items and the brand new one has very few tools and

Features but by the time we finish the course it will look exactly like this because these are things we will add as we build our website to get a website that looks like this so with that said that’s how to install WordPress in the next level lesson let’s see how to install

Elementor because we’ll be building the website with our Dragon drop Builder the free version of Elementor so I’ll see you in the next lesson don’t go anywhere so now that we have WordPress installed let me just close down no let me drag this reference website so it can be on its own

Window and then let me switch back here and close these windows these tabs and now let me also close that and that so now we’re only left with our brand new WordPress installation and if I switch this tab we can look at our reference website so we’ll be switching between the two when

We get to this part we’ll switch to this website and we’ll look at the part we’re creating so we can have a idea of what we’re building and then switch back here and build it like I mentioned we don’t want to wing it we don’t want to build a

Website out of the Blues we want to have a website we can look at and say now let’s build a section that looks like this I think that’s an easier way to do this all right so let’s get to installing Elementor so let’s go to plugins add new

In fact before we add any plug-in let me just go to installed plugins and let’s remove these default plugins that are always installed whenever you install WordPress akismet and Hello Dolly select the two and then delete then apply okay all right so now we can say add new

Plugin we’ll be taken to the WordPress plug-in repository which has I think more than 50,000 plugins free plugins that you can use and in here we can search for Elementor there we go it should be the first result here with 5 million active installations in fact I think they have

More than 7 million installations but when a plugin is so popular on WordPress when it reaches 5 million installations word PR stops counting that’s why it says 5 million plus so here we go I’ll say install now and as it installs you will notice right here we also have other element

Related plugins these are plugins that are created by third party developers to add value or to add more features to the free version of element elor Elementor has a pro version that you have to pay for and a free version that provides you with several elements that you can use

For free to build your website and those elements are just awesome but they are limited there are other elements in the pro version that you cannot access without paying and that’s where these other add-ons come in most of the add-ons that are accessible through the pro version of Elementor are also a

Available through these other plugins so these are not affiliated with Elementor they are independent companies that create plugins and themes to enrich the WordPress ecosystem let’s go ahead and say activate to activate the element WordPress Builder and we’ll be redirected to this setup wizard now the first step here we have

Five steps the first step here in involves you creating an account on element.com but you don’t need an account with element.com to be able to use Elementor so you can just skip this stage here we can choose to continue with the hello theme this is the official Elementor theme created by the

Elementor team to work with element now that said there are other awesome WordPress themes that work very well with Elementor that are created by third party developers as well and you don’t need to use the hello theme because it’s Bare Bones I like using another awesome theme called Astro theme and we’ll be

Installing it in the next lesson so let’s go ahead and skip this this is the name you gave your website while installing WordPress so you can just say next or skip because you don’t want to change that you can add your logo now but you don’t necessarily need to do that here because

We will do that while building the website so let’s skip that and now in the final step you can choose to edit a blank canvas with the elemental editor or choose a professionally designed template or your own templates that you’ve built and stored in your machine

Or you can skip that so I’ll just skip but we’ll still be redirected to the element elor Builder Elementor will generate a web page this is the web page just to show us the Builder we’ll delete this generated page in a few minutes but right now we’re living in the age of

AI and so elementa also provides you with these free AI benefits you can write or edit text using a AI you can do all kinds of things I don’t want to go through this just read through it and just click continue now this is the page that was

Generated by the element Setup Wizard like I said we’re going to delete it so let me just go outside here by clicking that burger menu and then exit when you click this this popup will appear asking you where you want to be exiting to every

Time click exit I like going back to the dashboard so that will apply this is asking us if you want to leave without saving the changes we made to this page this is not a page we will use so let’s leave and now we’re redirected to the dashboard every time you click exit

You’ll be redirected to this dashboard so now we have Elementor installed let’s go to plugins Elementor is installed and we we are ready to move on to the next step see you shortly every WordPress website must be built on top of a theme because it’s the theme

That gives the website its overall or general appearance and we chose not to use the hello theme because I mentioned we have a better theme or a theme that I think is the best theme in the WordPress theme directory let’s go inside appearance themes and of course whenever you install

WordPress it will come pre-installed with the latest theme and the theme will usually have the name of the current year so right now the active theme is 2024 last year it was 2023 and the year before that it was 2022 so we will not use any of these we’re going to add

New and of course I mentioned we’re going to use Astra so I’ll go ahead and click install and then activate there we go so now the active theme is Astra as you can see down here this is just uh let me see they’re just telling us about the already made

Templates we’re not going to be using templates we will be learning how to build pages from scratch without using templates that someone else built so let’s go ahead and get rid of these older ones delete that let’s also get rid of that and now let’s just leave 2024

Active there we go so I mentioned that Astra is my favorite WordPress theme and if you want to find out why just go to Google and look for something like Astro theme review and of course you can go ahead and read and find out why it’s an

Awesome theme and if you go to the official page Astro theme WP Astra let me just open up their website testimonials Ben Pines the CMO of Elementary himself has given it an awesome review Astra is a simple fully customizable and fast theme that I can wholeheartedly recommend to all elementary

Users all right so now that’s all you need to see for now and this is how to install the Astro theme or any theme on the WordPress Marketplace in the next lesson we’re now ready to start working on the landing page so we we’ll get started with the hero section so don’t

Go too far I’ll see you shortly so now that we’ve installed Elementor and we’ve installed the Astro theme I think it’s a good idea for us to have a quick overview of the Elementor workspace so switching over to this place let me first of all close this window

Here all right now the moment we installed Elementor we got these two menu items these were not here before we installed Elementor now I won’t need to touch any of these settings here let me just click that I rarely ever need to use or change any of these settings so I

After installing Elementor I usually just go directly to building the website so we don’t need to change anything now I’ll go to pages and of course remember the elemental Setup Wizard generated one default page just to take us directly to the editor and this is that page so

We’re going to use this to view Elementor but when we installed WordPress we also got two default Pages generated by WordPress these two pages so I’m going to select those two and move to trash then apply that moving to trash is deleting them now we’re left with this Elementor

Page I’m going to click edit with Elementor in fact let me right click and open link in new tab that will leave this dashboard intact but we can switch to the page now this is how your editor will look the editor has this left tools panel if I Collapse

This these are panels made up of tools for easy access favorite W widgets you use okay got it now these panels contain different tools that you can use different elements that you can drag from here and put them on your website change their style and appearance as you

Build your website the first layout here contains the container now since I think last year 2023 Elementor switched fully to a container based system before the container based system we were using sections and columns now we’re using containers so if we click this these are different structures of containers they

Are pre-made structures that will help you quickly create different sections of your website so if you want a a SE section that has two columns for example if we switch here this is a single column of course as you can see but if we go here this is one column and this

Is another column so that would be a good section to use this on and for this section it would be a good idea to use this one so these are different pre-made structures that you can quickly click let me just click this and now we can add an element here

If I want to add an element all I have to do is click this it will bring up these panels and I can go to basic now this brings us to the second panel and this panel here has some basic free elements that we can use let me say maybe an image element

There and the moment you drop an element this area changes to the settings of that specific element and you can tell by the name up here this is an image element this says image and almost every element has three tabs the content style and advanced tabs they

Help you do different things of course style is all about the appearance and styling of your elements content is about adding the content that you want to display so if we want to add an image here to the elements I click choose image and I can select an image we’ll

See how to do that and for the advanced tab this is this has to do with margins and padding motion effects transform all these things we’ll see how to use most of these things the one the things that you will really need to use all right now when you have an

Element selected if I select this container this will will change to container so the moment you drop an element or the moment you select an element a different element these settings change to that selected element the active element so if I switch back to the image this changes to image and

If I want to add another element I’ll click this icon up here that will bring back the panels so we can add some Maybe adding text I can go back to the panels again add maybe a text editor and you drop an element the moment that pink line

Appears anywhere so I’ll drop it right there and now you have a double column container so if I if I go back in here collapse layout basic we have the pro panel and this is made up of elements that are only a available if you buy the premium version of Elemental and we

Don’t want to buy the premium version of element unless you have that money because we can use other elements provided by the third party Elemental related developers that we s and we’ll see how to do that now in addition to the basic panel that has free elements

We also have the general these are the basic and these are the general elements these are also free they are provided by Elementor the free version as well and there are many collaps that we have site these are also provided by element but they are pro we can’t use

Them unless we have the premium version single I don’t know what that is then we have W Commerce elements also premium you have to pay for them and work word press these are free you don’t have to pay for them now whenever we install an add-on that adds

Features to Elementor it will be listed down here so if we go back in here and say plugins add new Elementor Elementor if we install for example Royal element addon it will have a panel listed here called royal Elemental panels and we can expand it and see the elements it provides and

They will help us get some of the features that we can’t access from the pro panel we will be able to do many of these things without buying Elemental Pro so that’s just a quick overview of the elemental workspace and another thing I wanted to show you here is if

You hit control eye we can bring up the Navigator and this Navigator here provides us with a bird’s eye view of the web page so if I Collapse that and that and that you will notice we have this container here this is also a container and of course when I select it

As you can see it’s the one selected this and this are inside this one just the same way we have this and this inside this outer container as I select them they are getting selected right here on the Navigator as well and that’s a good way for you to be

Able to access a container or element just in case you’re unable to select it right here if sometimes we will try to select a container and we’ll be unable to select it because of the header we might see that as we progress and that’s when we can click the navigator to select

It finally we if we click this burger menu we have more settings up here and we have side settings theme Builder user preferences the one that I like using up here is user preferences this is a very important feature right here called editing handles if I hover over

Here if I want to do anything with this container here I have to right click and get these uh these options like delete or duplicate so if I want to duplicate this I have to right click then duplicate or if I want to delete it I

Have to right click and delete but a quicker way to do it is by bringing up editing handles go to user preferences editing handles and now that means if i h over this it will automatically show those extra options here and I can just hover over this and

Duplicate hover over this and delete so as you work with Elementor you will find that that’s a very handy tool and I suggest you activate it right now as we prepare to get started I think we’ve covered everything I wanted us to cover of course we’ll get to see other

Parts of this area as we progress we have this publish button this is to publish the page let me just click publish all right now we can preview changes by clicking this I icon and that’s how our page looks we have this History Section this history icon it shows us every single change

We’ve made since we started editing this page and we can jump back to a point in time when the web page looked different in case you don’t like the changes we’ve made up to maybe this point if we click heading heading added means it’s gone back to the point when we added the

Heading if we go back to container added it will go back to the point when we added the container everything else that came after is undone but everything before that remains intact it’s like jumping back in time through a wormhole or something of that sort now with that I think we have

Covered the elemental workspace but we’ll get to see other parts as we progress in the next lesson let’s now start by building the hero section this is the hero section and we’ll start by adding this background image so I’ll see you shortly so now we’ve had an overview of

The elemental workspace it’s time to add this hero image so switching back to our workspace here we are I want to go to exit let’s say leave and now let’s go back to Pages remember we said we’re not using this page so I’ll just trash it and now let’s add a new

Page click that let’s give it a name of course it’s our homepage now the first setting we need to change is template we want to change this to Elemental full width and that means our page will be running from the very end to the other end we want it to

To be full with now these template options I think are only available when you install Elementor if you’ve not installed Elemental you won’t see this option so Elemental full width then let’s go to the Astra settings those were the WordPress settings and Elemental settings let’s go to Astra

Settings when you install Astra you get access to these extra settings and what we want is full width once again specifically the Astro theme knows we want to have a full width web page and don’t worry about these changes container style these changes will only apply when the layout is set to normal

Or narrow normal or narrow but we’ve chosen full width so don’t worry about these select sidebar sidebar we don’t want the web page to have a sidebar so I’ll say no the same case applies to this these settings will only apply when the layout is set to normal we’ve selected no

Sidebar then let’s disable elements we can disable the Astra header the default Astra footer and the default Astra Banner let me publish that publish and now let’s view page I’ll right click that and open link in new tab let’s switch to that tab now we have a blank page completely

Blank if I go back in here close that and let’s enable these update that and let’s go back in here and refresh the page these are the things we’ve disabled because we’re going to build our own using Elementor so that’s why we’ve disabled those going back in here update

That so now refresh this blank page all right so now that we we have this page ready we can click edit with Elementor let me close the navigator and I’ll let’s add a structure I want to add this structure that’s running from top to bottom because as you can see everything is running

Downwards The Heading the description the buttons everything so this is a container now we can while this container is selected this says edit container let’s go inside style and let’s say background background type click that classic and select image I’ll go to the upload file so we can get

It from the computer select files and I want to go inside this folder I’ll share this folder that has all these images just in case you’re following along if you’re using your own images that’s also good so this is the image I prepared for the hero section open there you

Go I’ll click select and now the image there now this is an advertisement by Elementor they want us to install this plug-in but it’s paid you have to pay to get this service so close that leave the image resolution to full position let’s say Center Center let’s also say yeah let’s leave

The attachment to default repeat no repeat we don’t want the image repeated and let’s say the we want this display size to be covered in other words we want the whole image to occupy this space if we leave it at default some of the image will be cropped out so

Cover and now let’s go to layout let’s go to height minimum height let’s change this to VH View Port height and let’s say maybe I think 50% now let’s say 70% update that now you will notice we have a dark overlay here that allows us to see the

Text more clearly so let’s go back in here and while the container is still selected go to style background overlay expand that that panel background type let’s go to color black and now you can play around with the intensity of the darkness maybe up to that point 0.68 choose whatever amount you want

Then update and now you will notice we have this curve down here so going back here let’s go to border wait shape divider let’s choose the bottom type uh curve and then let’s say invert just like that update preview the page there we go we can also increase the height a

Little bit it’s still selected so layout viewport height 80% update that preview the changes there we go of course going back going back in here while it’s still selected style shape divider bottom you can determine the height of this effect to your satisfaction it’s not rigid it’s not fixed in one place so

Play around with it until you’re satisfied with where it’s positioned I think that’s it if you want to do the top as well which doesn’t make sense in this context you can do that but it doesn’t make sense for this particular context so let’s just remove the top curve uh let’s say none

For the top update that let’s preview the changes so that’s how to add the background image for the hero section in the next lesson let’s see how to add the text so I’ll see you shortly and welcome back so now we want to add this particular text right here

Now you will notice the text has this green color and this white color so how do we achieve that there are two ways to achieve that and I’ll show you how to do both of them so you can choose the one you want so going back in here

Let me just select a text heading so I’ll select that and drop it there let me go inside style put it in the center Center alignment and now while we’re still under style I’ll go to text color and change that to White and of course let’s go back to content

And I want to copy help us serve Humanity so copy that switch back here paste that in there if you’re typing you can also just type Humanity but don’t paste whatever your text right here don’t paste it like that because it will come with whatever pre formatting it had from where you

Copied it just like we have here so let me just get rid of all this you can paste whatever you want in here without any issues so help us serve Humanity now the first way to add this color here is by using CSS now I don’t expect everyone to know

CSS but let me just show you I’ll go here before the word span create those two brackets and type span then go to the very end two brackets then inside I’ll type a forward slash then span this span is an HTML element that selects whatever text is in between these

Two is now selected for us to do anything we want with it using CSS so in the first span right after the word span but before the bracket I’ll type style equals then double brackets then inside the quotes that’s after the first quote I’ll type color colum then I can paste whatever

Color I want in there now I want to go inside my assets this folder will be available to you right below this video player so you can download it and it will contain this color code document let me select this line Green Copy go back in here now remember we’re

Still inside the quotes were before the second quotes so I’ll paste that color in there and now whatever is in between the first span and the second span will’ll have whatever style we’ve added applied to it so that’s one way to do it now you will notice this is at the very

Top and we want it to be in the middle looking at this space and this space it’s almost the same so it’s in the middle of this container so going back in here we want to select this container remember this is a container based system and the good thing about

Containers is now that we have this container selected if we go to layout we have first of all we have Direction and we have justify content now as you can see we can justify content to the start that’s the top which is what we have currently we

Can justify to the end you can tell by the longer line being at the bottom like that or we can justify to the center just like that all right so now with that we can also go in here and select a text editor and drop it right there and when

We drop it let’s go to style text color change that to White and let’s align it to the center there we go but now remember we’ve used one method to change this color but I mentioned we have two different methods we can also use one of those ele

Elementor related addons that we saw while installing Elementor so let’s update this first preview the changes and that’s what we have now going back in here in fact I want to leave that intact let’s go to the dashboard I had this tab open and let’s go and we also have

Elementor searched so we have Elementor related results I think it essential add-ons for Elementor I might be wrong but let’s just install that we’re still going to use it anyway so let’s install it right now activate that advanced next view all I want to see if what I’m looking for we have fancy

Text dual color heading yeah this is what I’m looking for next next next just wanted to confirm that that’s the right plug-in Count Me In no thanks you can just allow the creator of this plug-in to get reports about crashes and all that so they can improve their plug-in close all these

Advertisements now going back here to our editor if I re refresh this page with contrl r and now collapse these panels you will notice now we have essential add-ons so one of the elements that comes with essential add-ons as we saw is dual dual color heading if I drop it right

There it’ll have those dual colors now we can type Humanity here just like that and before help us serve help us serve content settings let’s remove this text and let’s also remove that icon I think it’s where is the icon let’s delete the icon just like that so now going inside

Style while the dual color heading is still selected you can go to color and typography for the main color we can oh that’s the one we need to change to the green we wanted I still had this code copied so I pasted it in there and for

The second color we can make it white so let’s go ahead and delete this and you will notice I don’t have those editing handles appearing so let’s go back to user preferences and enable that now I can delete that now this has a huge margin below

Here so it’s pushing this text too far creating a huge space so while it’s selected I’ll go to Advanced margin bottom reduce that margin up to that point maybe 50 update that let’s preview the changes there we go another thing we want to do is now make it bigger so go

Inside style where this is selected color and typography typography let’s change that to monserat while that is still selected I’ll go to Weight 900 black and size let’s make it huge maybe up to that point update that and preview the changes there we go so now we’re starting to get something similar to

This and that’s how to add the text to the homepage to the hero section or any other section or container you want in the next lesson let’s see how to add and style these buttons so I’ll see you shortly hey welcome back so now it’s time to add our buttons and style them

You will notice these buttons have some Shadow which makes them pop from the background and we’ll see how to do all that so switching back to our workspace where is our workspace right here so going back to our editor I’ll click this icon to go back to the panels

Collapse essential add-ons and go to basic we have a button here here so I’ll drop that there and of course now we can duplicate duplicated because we need two buttons and now of course you will notice here they are side by side not stacked on top of each other so going in

Here how can we achieve that remember we’re saying we’re working with a container based system and one of the things we saw about containers is if I select this container here it has Direction settings so the items inside a container can go from the left to the

Right from top to the bottom they can go in reverse they can go upwards in Reverse with that Concept in mind we can go in here layout pick a container and drop it right below the text and now if we take these elements I’ll just hover over this and drag it inside there

That’s inside the container let me also pick this drag and drop it right below this other one now both of them are inside this container so now if I select this container this will change this will change to edit container and under Direction they’re currently in vertical

Column direction we want them to go from left to right just like that that’s the power of containers the other thing about containers is as we saw we can use justification right now they’re on the far left on the start they can go to the end or they can

Be in the center now they’re in the center and that’s what we want update that and let’s preview the changes there we go looking very awesome so now one of the buttons is supposed to be white and the other one green so let’s go back in here let’s select the first one while

It’s selected this will change to edit button so I want to go to style now first of all let’s go in here and change the text projects so while under content projects let’s go to style now under border radius let’s make 50 to give it that extremely rounded

Corner and let’s also go to the padding the spacing between the text inside this colored background the spacing between the text and the edges of the button so let’s break that link so we can edit each individual cell on the left we want to make it something like 60 on the right

60 on the top we can give it maybe 20 and that’s the bottom and the top 20 now let me just copy select this Co right click copy select this right click paste style so we don’t have to repeat the same on this we’ve just copied the The Styling the

The padding and the Border radius yes but we’ve not copied the text because that’s not part of styling it’s part of content so let me just select this and say uh what does it say our story there we go but now we need to go inside style while this is still

Selected and say color white but for the text color which was white also we need to change that to a dark color I want 1 a 1 a 1 a that’s a dark gray that’s almost black update that preview the changes there we go but now our buttons

Don’t have any Shadow and so they’re not popping from the background looking at these they have some nice Shadows so going back to our editor while this is still selected I’ll go to box Shadow the moment I select that it will bring up some Shadow maybe up to that point you still

Can’t see uh let’s make the vertical maybe 30 no that’s too much let’s say 15 yeah 15 let’s blur it and spread it out more so that makes this 10 let’s make it 10 let’s make this 20 and this 15 no the spread is too much let’s make it 10 as well let’s

Reduce this to 10 I think that’s okay eight so 8 10 10 selecting this let’s go inside style box Shadow so this was eight 10 and 10 update that and let’s preview the changes so there we go so now in our reference website they are both bobbing

Like that so let’s go back and give them some bobbing effect when you hover over them so while this is still selected on Hover this will reveal this these options hover animation we have many but I like Bob Bob just like that let’s re let’s create maybe um let’s select a different one

For this so Style overover let’s say pulse that’s pulsing but like I said I like Bob so I’ll select Bob update that preview the changes there we go so that’s how to create any button you want inside Elementor of course there are many more options but it’s up to you to play

Around with all of them to find out what they do so with that we’re done with the buttons in the next lesson it’s time to start working on the header in other words the Navar and the logo to allow people to navigate through the website and one thing you will notice from our

Sample website as I showed you when you start scrolling the Navar or header remains sticky and as I mentioned I will show you how to make it sticky like that so that it’s accessible from any part of the website so let’s see how to do all that in the

Next lesson don’t go anywhere except to drink some water he welcome back so now it’s time to create the header in other words the navigation area so switching back to our editor Let me just switch back here to do that we will need to use a plugin an elemental related plugin that

Has a few elements that are only available with the pro version of Elementor let me just show you what I mean so first of all let me just exit from this homepage editor this is the body area and we’re not building the header in the same place we’re building

The body the nav bar and the header is separate from the hero section the hero section is part of the rest of the body but the header and the footer are built in a separate area so that’s why we want to exit from here so I’ll click the burger menu then exit

And now we need to install a plug-in plugins no add new Elemental and it’s called elements kit element add-on Element kit element add-ons let’s install now and let’s activate that it’s now installed here it is so if we go to header and footer we’ll be redirected to

A setup wizard to first of all just set up the plugin we want to select Advanced and that’s because when we if we choose basic some of the elements here will not be available to us in the front end in the editor so if we select Advanced for

Example just look at one of these maybe widget Builder select Advanced as you can see now it’s been switched on that means the widget Builder will be available to us in the front end panels on the left side and so will many others here that were off in the basic setting so next

Step Next Step next same case share nonsensitive diagnostic data next save changes there we go so now if we go to the header and footer this is where we’ll have a list of all the headers and fers that are available to us that we’ve created but since we’ve not created any we don’t

Have any here so say add new I’ll say maybe my header and the naming convention doesn’t really matter you can also say my header or header what whatever you want this is called the camel case header of course it’s a header I want it available on the entire

Site now to be able to set conditions to to have it only on one specific page you need the pro version but you don’t need that right now then activate it that means now it’s available and visible on the web page or on the website if at

Some point you don’t want it to be visible while maybe you’re updating it or working on it but you want the website to still be active you can deactivate it so let’s save changes there we go so now it’s listed here and we can say edit this popup will come up again edit

Content will be redirected to the front end to a separate editor still have access to all the same tools so here we go remember we talked about if we go back in here we talked about the structures we have from Elementor and we said for example this

Has three columns the logo column this other column with the nav bar and this button so we can choose maybe this let me just go with this and because we have these hand bars we can just duplicate that so we have three columns now with a container selected we

Can always just resize these different columns all right we’re not able to edit that but we can do that manually by selecting each column maybe this should occupy 30% now let’s say 20% this should occupy maybe 30% 30% and make sure this is set to percentage because maybe if it’s M’s or

Pixels it might be misbehaving on you so percent and this of course should be 40% because 30 30 that’s 60 so this is 40% wait what’s happening here this should be 30 and this should be 30 all right so there we go now in here we want to add an image element I’ll

Drop it in there then choose image we want to add the logo so upload files select files and here is the logo I created for that select and there we go update that and let’s all right so now if we say preview the changes we’ll just see the

Header but we can’t see the page so let’s just go back in here let’s go to Pages home uh let’s view I right click open link in new tab so we can view it here so that’s what we have but of course we want it to look like this but

Before we make make it look like that let’s first of all in the next lesson add this Navar so I’ll see you shortly so now it’s time to add the Navar and the Navar is basically made up of menu items and these are the menu items home about projects contact each

Of these is a menu item so now switching back here one of one of the reasons we installed elements kit light is I mentioned we will have access to a few elements that are only available in Elemental Pro so if I Collapse layout basic if I go to Pro scroll downwards we

Will find nav menu and this is in the pro version of element so we can’t drag it here it only brings up a popup telling us to upgrade so now elements kit provides us let me collapse Essential Elements kit also has its own nav element under elements kit header folder

And here it is elements kit nav menu so instead of digging in by scrolling through all this you’ve noticed I’m just typing here so just type nav and that will bring every every single element that has the letters na a v inside of it so of course this is the elementer pro

Element which we don’t want elements kit nav menu is what we wanted so let me drop that in there and now once we drop it there these changes to edit elements kit nav menu now you will notice here we have select menu because we need a menu to show this

Because remember these are menu items so they belong to a menu so when we click this drop- down menu we’re supposed to see a list of menus that we’ve created but because we haven’t created any menu we need to do that right now so first of all let me say

Update so I want to go to the dashboard and if we go to appearance menus here we can create our first menu create your first menu below so let’s give it a name so my menu my menu and let’s make it the primary menu then click create

Menu there we go so once we’ve done that the add menu items section is now active before that it was faded out before we created the menu it was faded out because we didn’t have a menu to which we can add menu items now of course if I Collapse this

Panel you see menu items can be posts Pages custom links or categories or in some other themes we can also have many other types of me menu items right here but the menu items we’re going to use are pages each menu item will be a

Web page as you can see when we expand that one of the pages that shows up is actually the only page we have on the website home so if I click that I can say add to menu and now it’s been added to the menu if I say save

Menu now our menu has only one menu item if I switch back to our front end right here right click and reload this page that’s where we’re editing the header if I select the elements kit nav menu element now if I click select menu we have my

Menu and it will show the only menu item it has that’s home update that there you go so now it only makes sense that we need more menu items and because the menu items are web pages it means let’s create a few more pages so I’ll hover over pages right click on add

New page that will open up in a new tab do the same again and again so we have three tabs let me just close this now we have three tabs let me call this about and for now let me just publish without making any configurations right here we’ll do that later close

That we have the contact page publish and finally we have the projects page so close that and projects publish publish close that now if I refresh this page now we have more menu items here that we can check and add to menu and now here they are you can drag to

Rearrange so I’ll put contact there and about before projects save menu there we go now if I switch to our head editor right click reload now we have all the menu items displayed here but you will notice now it’s on the left and we want it on the

Right so if I select this element changes to that element horizontal menu position we want it on the right just like that now finally remember we also had a let me just close that and that remember we have this button right here so what we can do

Is let me go here and I want to go to Pages home right click and open link in new tab to edit with elementer now let’s go here the this is the homepage editor now you can see the header is showing up but we cannot edit it because this is not

The header editor it’s just the page editor but what we wanted was to right click this copy if I go back to the header editor I can click here right click paste and now we have the button pasted right there and we want to align it to the right

Now you will notice here we have too much spacing and we can’t just drag that I want us to do some math maybe this is 30% so that leaves 70% this can occupy 25 no this can occupy 50% and therefore this occupies 20% update that and let’s preview the

Changes there you go but now you will notice these are not aligned vertically the button seems to be a bit misaligned it’s a bit more elevated than the menu so going back in here let’s select this container align everything in the center vertically or Justify select this justify to the

Center and this justify to the center and we also want to reduce the height because it’s too tall so I’ll select this text Advanced break this link so I can edit the bottom alone just like that let’s also reduce the top 25- 25 update that and let’s preview the changes there we

Go so now if we go to the page editor and preview the changes that’s what we have so now you will notice we have a transparent background here on this header but on ours right now it has an ugly white background so how do we achieve this

Result that’s what we’ll be doing in the next lesson so don’t go too far so now we’ve created our header but it has this ugly white background that we want to get rid of and we also actually want to make it sticky so that when we’re scrolling it remains at the top like

That and the background changes to that black color so how do we achieve that going back to our Editor to achieve that we will need to use another Elemental related add-on which is very awesome so let’s go back inside our dashboard plugins add new and I want to add let’s say

Elemental uh yeah right here sticky header effects for Elementor so install now and let’s activate ated there we go sticky header effects for Elementor so now going back to our page editor no now let me just close that let’s go to our header editor and now let’s refresh this

Page in order to see the plugin we’ve just installed so first of all let me just select the container that’s holding everything the the header container and go inside Advanced collapse layout and one of the options now is sticky header effects and we got this immediately we installed sticky header

Effects so now we can enable sticky header effects and that gives us several options here uh the first option here is transparent header sets the header position to Absolute so no negative margin are needed so let’s switch that on and say update there we go so let’s preview the

Changes all right so of course you can’t see any change now let’s go back in here and go to pages and let’s go to the homepage and right click open link in new tab now that’s what we have now if I reload this page you will notice that’s keep

Uh ugly white background showing up for a split second and then disappearing and we don’t want that let’s have a look at what we have on our reference website this is the reference website if I reload you’ll notice we have this gradual nice fade in so let me just reload once

Again nice fade in so once again let’s do that here we don’t want that so let’s solve that first of all let’s also solve this problem here going back to our header editor and I want to push this to the other side header editor select the M elements kit nav menu go to

Style collapse menu wrapper open up menu item style item text color let’s change that to White update let’s say on Hover we want the color to be this color this green so paste that in there so on Hover it’s that green and when it’s active it’s also that green in other words when

We’re on the page on that specific page its link should be green just like here here all right so going back in here if I go to our results page and refresh this page at least now the menu is visible but we still have that jerkiness

Up here so going back in here first of all let’s select each element I’ll select charity fund advanc go to motion effects and we want the entrance animation to be fade in I want to do the same for the elements kit nav go to Advanced motion effects entrance

Animation fade in and the same case applies to the button or the button can also have a different motion effect motion effects entrance fading update that all right so now another thing we need to do is make this background image also fade in so in order to go to edit this page the

Homepage we can just go directly to edit with Elementor and if you want to edit the header we can go to my header so edit with Elementor that will open up the main page editor so now here we are I want to select this background container and now

As you can see I mentioned sometimes it might be unable to select it so I’ll hit control I to bring up the Navigator and I’ll select container now we’ve selected it if I go to Advanced motion effects entrance animation fading update that and let’s preview the changes

Now notice how it will fade in see that now we don’t have that jerkiness once again let me reload just like that so now we are done with the sticky header effects and we’ve also added some motion effects we’ll be adding motion effects to every element we add just to add some

Life to the website so in the next lesson let’s talk about global fonts I’ll see you shortly so now it’s time to talk about global fonts now let’s switch back to our workspace right here now first of all let’s just look at what we have on the reference website

You will notice here we have monat only on all the sections but right here on the website we’re currently working working on we have I think this is Roboto except this header that we set explicitly as monat now going back in here we can manually as we build the web

Page we can manually go to style typography and change that to monat and go to the button right here do the same style uh where is typography typography monat now if we’ll keep doing that for every element and we want to build a web page that has all these elements it means

We’re repeating ourselves if we want to use monat on the entire website without using other fonts we can just set monat as the global font and that means we’ll not need need to set the font again so that’s what I wanted to show you how to do so first of all let me

Add a text editor just so you can see this is still Roboto if I add another one this is Roboto style typography that’s Roboto so now what we want is to be able to just drop that text and it’s automatically monat not Roboto or whatever font you want it to be so going

Inside this burger menu uh site settings Global fonts now we can set the primary font monat spell that right as you can see the primary text has changed to to monat let me do the same for secondary monat I’ll repeat the same for text and finally accent monat now it doesn’t matter which

Element you’re using if it has some text it will be more so let me just update that and let’s go back to the editor and now as you can see this has changed to monat if I select that go to typography it should be monat

Wait no wait so let me just get rid of that Navigator this is already monad if I select this and go to typography it’s monat and if I now add a heading it will be monat as you can see it’s monat if I add a text editor it’s also

Monat so now we’re done with the global fonts or whatever font you set is the font you will continue using onwards you won’t need to touch that setting again size so let me just delete all this update that and now with that in the next lesson let’s go ahead and set

The homepage because if we preview the changes here and if I go to the header editor for example or if I go here and remove everything here if someone goes to our WordPress website do or dot whatever extension you chose they’re supposed to be taken to the homepage if I hit

Enter that’s not our homepage this is supposed to be our homepage so how do we set that another thing if we go here to the header settings I select this image and go to content we can set this to be a link to the homepage so under link content link

Custom URL let me just copy WordPress everything.com and pasted in there update that if I click preview the changes now if I hover over this it’s a link and if I click it supposed to take us to the homepage this page but instead it’s taken us to the default hello world page

Provided Bye by WordPress so let’s see how to set the homepage going back inside the dashboard let’s go to settings reading homepage displays a static page and that static page is the homepage so save changes and now going back in here if I click the

Logo it will take us to the homepage as you can see now your website.com now leads to the home page that you’ve built and that’s how to set the homepage we saw how to set the global fonts in the next lesson let’s now start working on

The rest of the body all these other sections so I’ll see you shortly and welcome back so now we’re done with the hero section it’s time to work on the rest of the sections that make up the body of the web page then after that we

Can work on the folder so let’s see how to create these elements so first of all let me just reload the page and as you can see see they’re just popping up one by one from the bottom of the page so let’s switch to our editor right

Here I want to go now we’re done with the header so I’ll just go ahead and close that so close that tab let me also close that so now we’re on the page editor all right so now of course right here we have these four icon boxes so let’s see how to create

Them going in here I want to select uh let’s see let me just start with this like that and I want to add an icon box so I’ll go in here and type icon and we’re looking for that icon box and as you can see these are two

People so let me while this is still selected this is icon box let me change the icon right here to let me say people this one here and the heading here says impact so this is still icon box settings title impact that changes in real time

Let me just copy this text that I generated with a AI you can also generate it right here WR with AI step into the but this means you need to connect to elemento.com to your element.com account let’s see exactly so if you want to use the AI capabilities you need to connect to

Element.com your element.com account now I will not do that let me just close that and pay this text that I generated using chat GPT what else uh as you can see right here we have more spacing while here it’s very minimal so let’s go inside style content and say

Spacing up to maybe that point 15 just like that let’s change the color of the this impact first of all let me select the typography and give it a weight of 900 let’s say 800 no 900 and let’s also change the color to this green copy that lime

Green no wait it’s supposed to be that black 1 a 1 a 1 a and on Hover Still Remains that color let’s go in here let’s collapse content and open up icon change to that green and now you will notice we have these shadows and an

Outline and when you hover it changes to a very light green so those are settings set to the column that’s holding them or this this container that’s holding the icon box so first of all let me just duplicate it three times then delete that last one I just want us to

Visually have four items we’ll delete these three and duplicate this once it’s styled so let’s select this first container here and let’s give it inside style let’s go to border and let’s make it solid so now it’s black we want to give it this light gray so I’ll just copy that light

Gray border color paste that in there as you can can see now it’s that light gray then we also want the border to have a border radius of 20 so if I select this as you can see now it has that rounded corner and we also want to make this

Border Pier so let’s make it five if I select this as you can see it’s five but we also need to increase the padding on the sides to push the content inwards and create more space so select it once again border we don’t have padding there let’s

Go inside Advanced padding let’s give it 20 while this is linked whatever change you make in one cell will apply to the rest so 20 just like that so now let’s select it once again go inside style border box Shadow and now let’s make this uh vertically let’s say

10 let’s also spread it out let’s make it spread but let’s make it less pronounced maybe up to that point click here just to have a look at it I think it’s starting to take shape we actually want to make let me select this light gray and the

Background is what needs to be that light gray so background color that light gray so that it stands out from this background and now for the Border why don’t we make it slightly darker so I’ll just drag this up to that point and let me select

This other one so we can see I think it’s better now let’s select these ones again I’ll go to border I want to go to the box Shadow and reduce the spread reduce the blurriness yes now let’s increase the spread slightly on however we can have a different level of spread we can

Spread it out more now if I select this right click copy select this paste style select this paste style select this right click paste style and now we need some spacing between them so select the container that’s holding them and under layout right below justify content we also have

Gaps between the different items let’s make it 20 update that and let’s take this container that’s holding them Advanced margin let’s reduce the top margin to push them up just like that 50 55 update that let’s preview the changes all right so I like I think I like the the animation on

Hover the Box Shadow animation but of course if you want to change it you can go in here under style go to border hover let’s go to box Shadow as you can see if for example you increase the blur on Hover it affects it just like that look at the

Rest do I like that better just play around with these settings select whatever box you want switch to hover open up the box Shadow play around with these effects and hover over it to see what’s happening but I like this effect that we have by default so I’ll just right click copy

Select this paste style that’s the hover effect I like and that’s how to add these icon boxes in the next lesson let’s see how to add this section right here so I’ll see you shortly so now we’ve created this section let’s just preview the page once

Again there we go and what we want to do is create this section right here but before we do that notice that on our reference page or reference website when we hover over each icon box the background changes color so that’s very easy if we go back to our

Editor let’s go and select the first one style background of course the background color is this light gray but on Hover we can give it a different color by clicking background type than color and you can give it any color you want so let’s say for example that green light

Green just like that so now it’s up to you to select the color you want I think I had created a very light green here copy that paste it there yeah then once you’ve done that let me just select copy select right click paste style select right click paste

Style select right click paste style and I think these spaces are too big so I’ll select the container go to layout let’s make what about 10 update that and let’s preview the changes all right I like that so now let’s move on to creating a section like this which is very

Easy going back in here to our editor I’ll select this double column section and while the container is still selected I’ll go to Advanced break that link and give it a top margin of 100 to give it that spacing fact Let me give it 200 no that’s too much 150

Yeah in here let’s add an image element and in here let me select that duplicate it because we don’t want to start creating another dual header right here when we already have this we can just duplicate that don’t repeat yourself drag that and drop it there and now while it’s still selected

Help us serve main color wait solid color 1 a 1 a 1 a let’s go back to content align it to the left like that title tag should be H2 I forgot to say that this should be H1 every single page on your website should have one H1

Heading and then for the major headings on your web page they should be H2 I’ll select this go to style typography let’s go to we want the title style typography here let’s make it 40 or maybe 45 let’s also reduce the line height spacing between the lines maybe up to that

Point next thing we want is some text of course you will add your own actual text for your website let’s drop that there and of course you will notice here it’s centralized within the div vertically so I’ll select this column this container go to justify content Center vertically we also need some double

Buttons so I’ll duplicate that container and drag this inside there then align them to the left so I’ll select the button right here go to style box Shadow let’s reduce that no wait left five let’s reduce the spread up to maybe that spot so that’s one select this style box Shadow

One then let’s also select let’s make them less pronounced in other words less Opa more more transparent like that so that’s 0031 select this go in here select transparency let’s make that 31 as well update that I also want to select this image go here go inside our asset folder this image

Here select that or in fact wait this is actually an image Carousel yeah it’s an image Carousel so I need to get let’s get rid of this image and let’s type carosel image Carousel like that in other words it’s some sort of slider so select all the images we want this is

One of them let’s select these other two enter hold down control select this one as well now with these three checked we want to create a new Gallery these three then insert Gallery slides to show let’s go and say one I think that’s all we need for now let’s also create some spacing

Between these two select that container go to layout let’s make it 20 update that and now you will notice right here the text all the text is a little bit positioned further on the left than the buttons so they’re not aligned and that’s because every container has some

Default padding when you add any elements to it so I’ll select this container and remove all the padding that means the buttons now are on the very edge of the container which is in line with this text body and this heading select let’s update and preview the changes awesome

I like that but now our heading is sticky but at the same time it does not have that black background so that means when we’re on the white section it will not be visible so if I duplicate that twice just to enable us to scroll further if we scroll further like that

Now we can see the links so we need to do something about that I’ll go to edit with Elementor my header select the container go to Advanced let’s go to Sticky header effects and we want to CH to enable the background color and let’s give it that 1 a 1 a 1

A and at the same time we also want to shrink the logo up to maybe 70 60% we also want to shrink the header to maybe 65% and if I switch to our example here notice that the background height reduces together with the logo in size

As you can see that’s what we want so let’s preview the changes and of course this is not what we want we want to click the logo to go to the homepage and now when we scroll let’s go to the preview page of course let’s remove these but at least

Our page is taking shape now let’s get rid of that we’ll update that a little bit later let’s get rid of that and that update that review the changes scroll notice the header is not really reducing in size in height so let’s just go back in here once

Again and what we want to do is select the container it itself and remove the padding update that preview the changes let’s go to the homepage let’s scroll just like that I think now it’s better so basically that’s how to create this section in the next lesson let’s

See how to create this section with this fixed background image like that so I’ll see you shortly so now we’ve created this image Carousel section now it’s time to create this uh let’s switch back to here we want to create this fixed background section so let’s go back to our editor

Uh let me just close down this and that going back to the editor I want to duplicate this by clicking that and that means it already has that top margin of 100 separating it from this other one now with that first of all I want to drag this

Container to this side drop it when that pink line appears and now it’s reversed select this image because remember it’s uh this other type of image so selecting this Carell in fact let’s get rid of it select that image element and then let’s go select this image right here open that

Select that awesome with the image element still selected I’ll go to style border radius let’s give it 20 that will give it that rounded corner like that and remember we duplicated this container so this container has all the settings including the gap of 20 we set

Earlier here so just like that but above and below we want to give it some nice breathing room just like that currently we don’t have that room so while this is selected go to Advanced let’s break the padding then bottom I think it’s 50 now let’s give it

80 and top let’s give it 80 so now it’s yeah now it’s looking good while it’s still still selected let’s go to style background type let’s select an image and we want to go to upload files select files and this is the image right here let me just drag this so we can

Have a preview so open that select that and now here we go but remember we have some few settings to change here position let’s say Center Center uh for the attachment let’s say before we do anything if we scroll it’s moving together with the image but if we

Say fixed we will be scrolling through it it will be acting like a background to that container it’s like we’re revealing what’s behind the container then for the let’s say no repeat and for the size let’s say cover just like that and now of course on our

Sample page here we have that light green background color you don’t necessarily have to have that let me try this light gray copy that let’s give it that color so now it has that slight Gray update that and let’s preview the changes scroll downwards there we

Go I think we need to make it slightly green just to keep the theme so select that paste that in there but I want to make it less screamy update that review the changes awesome now we could have done the motion effects later but I think we

Should do it now so let’s add the motion effects to these different elements so that they behave like these these are already animated as we saw let me just reload that page all right so let’s add those motion effects going back in here let me select this I’ll select this

First one go to Advanced collapse layout open up motion effects bouncing up I like bouncing up like that and we can set this to zero then the second one Advanced collapse layout motion effects default uh bouncing up but now for the animation delay we gave this zero now let’s give this maybe

200 it will take 200 milliseconds to get there then let’s move to this Advanced collapse l out motion effects bouncing up you can experiment with these others if you want 400 and then let’s select the last one Advanced motion effects bouncing up uh 600 update that let’s also

Select this text right here here Advanced motion effects let’s say bouncing left same case applies to these others as I said feel free to experiment select the button bouncing left no that’s rotate left so let’s go to bouncing left finally for that motion effects and for the image Carousel let’s

Go to Advanced motion effects bouncing right update that let’s preview the changes there we go all right so of course I will do the same for the rest I would expect now you understand how to do it so do that for the main text here on the hero section

And this other one I’ll just fast forward this section all right so now I’ve done that let’s just preview the changes that’s how mine are animating awesome so basically that’s how to add this fixed background image section in the next lesson let’s see how to oh wait

We can just duplicate this section right here let’s create this section because it’s very easy let’s just duplicate that well this is still selected go to style let’s remove the image background image let’s also remove this color select the color then click this clear button and now it’s clear let’s also remove this

Padding of 80 0 Z and now let’s carry this image to this other side like that of course it’s up to you to change all these details this is your contribution matters your contribution but now as you can see there is no way to continue writing the

Rest of the text in the initial color and so that seems to be a limitation of this plug-in so what we can do is use the other method I showed you earlier and that’s basically just adding a heading then typing let me just copy all these text paste it in here

Your contribution matters let’s go to style let’s make it 1 a 1 a 1 a let’s also go to typography give it a weight of 900 let’s make it 45 in size let’s also reduce this line height up to maybe that spot let’s get rid of

This so now with this selected go to content and contribution is the the text we want to change so let’s use span remember let’s open with span after contribution let’s also have inside the two brackets forward slash and span but the first span doesn’t have a forward slash

Then before the closing bracket right here let’s say style equals double quotations then inside the quotations color column space uh let’s copy this green copy paste it before the second quotation now in actual CSS code you’re supposed to finish that with a semicolon update that let’s preview the changes scroll

Downwards just like that I think that’s all for now for this lesson now we are done with all the sections up to this point wait we can also add this section before we move on to the next lesson to do this so this is

Very easy to do all we need to do is go back in here let’s duplicate this and then let’s drag it right below this other section when you get to the bottom here use your middle Mouse wheel to scroll while you’re still holding down the left Mouse

Button all right so here we go now we select the container style let’s replace this image with what image do we have here upload files I think uh this is the image open select exactly but now of course we need to have a background overlay which should be color black and

Let’s increase the intensity up to that point I think I’ll leave it at that of course now let’s get rid of this container now this container is still occupying 50% of the space left so let’s make it 100% select this go to style color typography change solid color to

White while it’s still selected let let’s go to content align it to the center select the text Here style color white select the container here justify content to the center update that preview the changes scrolling downwards there we go so we can scroll for because we don’t have any more

Content below there next in the next lesson now let’s see how to create our project here yeah so I’ll see you in the next lesson so now we are done with this section here now it’s time to create this current projects post grid this is a post grid so one thing I’ve noticed

Here is that we have just one button so going back to our editor where is is our editor here we are let’s go back in here and get rid of one of the buttons and now we’re well balanced now let’s also get rid of that now your button should read something

Different maybe this is learn more and you can provide the link right here so if you want it to lead to let’s just lead it to the about page we’ll take the U URL copy paste that there then let’s say about so that will open up the about

Page and if you want to open on in a new tab you can click that it says open in new window but it’s a Tab update that and let’s preview the changes so now if I scroll all the way to that section and click learn more it will

Open up in a new tab and here’s the about page and I know it’s the about page because if we go back to the dashboard and go to the pages whatever page we created is going to be our domain slash the name of that page you can tell by saying edit May say

Quick edit and as you can see here’s the slug whatever extension comes after here is the slag so about or contact for the contact if I click contact you can also go to the edit page and here we are the URL is WordPress everything.com slab now going

Back in here so now going back in here that’s that now let’s go back to create this stuff right here so going back to our page I’ll go to the bottom and let me duplicate this so that it has that margin scroll all the way to the

Bottom and now I just want to be left with one so delete that column or that container select this get rid of this button but leave the container and I want this container that’s holding everything to be 100% to occupy 100% of the width just like that update

That then let’s come here and say current projects so let’s use this we could have used this just by changing uh first of all let’s remove matters to us and then for the contribution we change it to projects current of course anything between span takes up whatever style

We’ve apply to it or of course just go here to style typography change this to 1 a 1 a 1 a and then change that to current project so whichever you want to use so with this I’ll go to style centralize select this go to style centralize it as well

Select this I think it’s bigger so under style typography let’s make it bigger like that but remember it’s still an H2 and now in here wait let’s first of all break whatever margin settings we had set on that doesn’t seem to be changing all right let’s just add that margin

Like that let’s say 10 and this one 10 now below here let’s add a grid type grid and we have a post grid by essential addons that’s the one we want update that now this looks a little bit weird so let’s go back to the back end and create an actual post

Because these are posts like if you were writing an article or blog post this would be a grid that would lead to different blog post or different articles but in our case they are leading to the detail page of a specific project so essentially what we’re doing is creating something like a blog

Post so let’s go inside posts I’ll click that and this is the hello world that’s showing up here in fact let’s say update and preview the changes scroll all the way to the bottom so that’s how that looks I want us to create a nice maybe

Two or three blog posts or three posts so I’ll right click open link in new tab same case applies to that so we have three I’ll just copy the names I had used right here so let’s go back to the homepage scrolling all the way to the bottom free medical paste that in

There and for now I’ll just hit publish let’s copy that go to the second one paste it in there publish copy that paste it in there and publish of course you would type your own actual project names now going back in here we have three projects okay let’s go to the first one

Here let’s set the basic configurations template we want full width we also want to go inside the as settings say full width no sidebar then disable these three elements here update that edit with Elementor there we go so now let’s start with let me just open this and see how it

Looks so first of all we have a double column container here so I’ll click this double column and of course remember we also have this top section right here we can go inside our homepage where we’re editing the homepage because this is the post we’re editing let’s go to

The homepage and I want to select this right click save as template let’s say page toop template so that we because we’re going to create several posts we don’t want to have to recreate it all the time to put it at the top of each post so save

That now it’s saved let me close that remember this is the home page editor let’s go back to the the post we’re editing now if we go to this icon right here add template we can go to my templates and here is the page top template let’s insert apply and here we

Are now I want to drag this and put it at the top but remember in the homepage it has a margin of 100 so right here we want to go to Advanced and remove that margin zero so it doesn’t have any margin at the top another thing let’s give it some padding

At the top so let’s give it maybe 150 for the bottom let’s give it 50 so that it has 50 between the top and the where the content starts let’s say 200 then let’s remove this container holding the button and I think that’s okay so now we can actually right click

And save this as the template we will use let’s just say page top page toop now we can delete page toop template because it has that margin and we don’t want to keep updating that margin now we can use page toop template and by deleting the other one it doesn’t

Affect this because this is a copy of that it’s not the same one we’ve deleted so while this is still selected let’s go to style background overlay I want to make it slightly darker like that update right here it says giving is caring so select this giving is

Caring let’s also select this text and remove part of it you can have a brief description that you want to have there on your real website let me remove that and I want to reduce this margin on the text Advanced break that margin reduce the margin like that update it all right so

Now once again control I I want to select this container it’s the same container as the one we saved so right click save as template so now I’m saving it once again because let me remove page top I’m saving it once again because we’ve made that edit to this margin and

We don’t want to keep making that change so now with that let’s select this new container below it we added this container before we added that with this selected let’s go to Advanced top margin 100 no wait we’ve not removed this link and then let’s give this a width of

70% of course now that means this is 30% select an image place it there select that let’s go in here upload files select let’s just say these two kids they need school fees as usual let’s go to style border radius and give it that rounded corner now we want to add some heading

Right below it so I’ll select that and duplicate it and right below the image but still inside this cont this container on the left we want to drop it right there while it’s still selected let’s go to style typography change this to 1 a 1 a 1

A and let’s go to cont content align it to the left and I want to take this text Let’s Help Ed and Jill go to school all right now we can also just use a normal heading copy that paste it in there 1 a 1 a 1 a monad already but let’s say

900 size 45 line height up to that point so let’s get rid of this okay while it’s still selected Advanced remove that link let’s say 50 all right let me just copy this text click that text editor drop it in there select this then I’ll hold control shift

V to paste without any preform formating from the other website so control shift V if you just contrl V if the text had some styling from the other website it’ll be applied here update that and now in here we will need to add this donation form right here but that’s something

We’re going to create in a later lesson while we’re still working on the website so we’re not going to create that right now we just wanted to have a post that we can display in the front end so now going back now that this is saved let’s just preview it for a second

All right but now because we had set these up here to slide in from the right they’re sliding from the right I think it’s better for them to slide in from the bottom so I’ll select the container that’s holding them Advanced collapse layout motion effects bouncing up update preview the changes

Exactly now I won’t save it once again but you would need to save it once again if you don’t want to keep making those changes all the time you save as template and then get rid of the other template that did not have that bouncing up otherwise you’re

Going every time you add the older one it’s going to be coming in from the right so here’s what it looks like the form you need to remove this the form will be coming in from this side so let’s go in here I think there is some problem here po all

Posts we’re editing free medical so let’s edit that let’s go to the exert let’s not allow comments or ping backs that means we won’t see this this section right here so let’s update that then reload this page scrolling down empowering pwds with love this is a link to the next the next

Post so let’s edit that do we really need that okay we I’ll I’ll find out how to get rid of that because I don’t really like this but think it also looks nice by the way looks awesome so with this created as our template I want us to go back to the

Homepage so I want to first of all close all these down all of these and now this is the homepage where we were editing the homepage let’s refresh the homepage editor now scrolling all the way to the bottom now here we are select the post post grid by clicking that edit icon

Right there and then we want to say post per page I want six I think it just wanted us to touch any of its settings for it to actually look more presentable now here we go update that and I think this lesson has become too long so let’s see how to

Style this in the next lesson because we don’t want to make it too long so see you shortly so now it’s time to start styling this post grid so first of all we say that the number of posts per page is six we’ve created only three posts so

If I go back in here we have only three posts uh let’s also go to layout settings and say we want three columns right now we have four that’s why we have this space so three columns update and on our reference website remember if I go home

Let’s scroll all the way to the bottom it looks presentable with some nice image the text looks awesome so let’s first of all add these images so to display an image for each post we need to add what we call a featured image so let’s go back

Edit and of of course under the WordPress settings if you scroll downwards you’ll find featured image let me select that and I think it’s these two kids awesome update that and now if we go to this homepage right here now first of all let me just preview the changes to the

Page scrolling all the way to the bottom wait what’s happening uh let’s refresh the page we want the changes we’ve made to take effect why isn’t it displaying let’s just select this once again I think I need to add a caching plug-in because I need to clear cash as

You work on your WordPress website sometimes your website might misbehave because of some stored cash I don’t want to go into details on what cash is but you’ve most likely come across that term and if you find your website is sometimes misbehaving even when you make some changes sometimes adding a caching

Plug-in might solve your issues so I want to go back in here we’ve already updated this so I want to go to plugins add new in here I’ll type cach and I like light speed light speed cach install Now activate all right now so here we are I

It’s installed but here’s an icon for it I want to purge everything purging is basically just getting rid of unwanted cached files so purge all caches successfully so I now want to refresh this with control shift R that’s what we call hard refreshing let’s see if we’ve solved that

Now let’s see what we have down here it’s it’s still behaving like that so let me just select it let me just say five here so enter all right so at least just making a change on any of these settings here makes it behave better when I was

Creating this other one here it wasn’t behaving like that so I don’t know what’s happening but it’s all good so let’s just save for for now uh update how many columns we said we want three columns I don’t want to show the author name uh let me just get rid of it

Completely let’s come here and say update let’s say grid post GD and I’ll just put it below the text without any container so it’ll just be freestyle so it’s now not in the container we were using initially so let’s go here and say six posts per page

So that means we will have a few more even below this then for the layout we want to have three columns update that and let’s preview the changes think now it should work as expected so scrolling all the way to the bottom there we go very good so the issue was

The container that was holding them now we want to do the same for these three so I’ll go back in here post I’ll right click open link in new tab and a quick way to right click and open link in new tab is just to press

The middle Mouse whe if I press that it’ll just open it in a new tab so going in here empowering pwds empowering all right so let’s go to featured image upload files here we are set featured image all right let’s update that let’s also say uh renewable energy set featured

Image select file uh here we go open that set featured image update that now they’re both updated so let me just close the two of them go back in here control shift R to hard refresh to reflect the changes we’ve done in the back end so going back down

Here here we go of course now like as I was saying if I select this layout settings I don’t want to show the author name this here I also don’t want to show the date but I want to show the excerpt of course everything else is okay but we

Don’t have any text now this giving is caring lorem ipsam is what you saw when we let’s go here if we click that to open it that’s this text it’s just picking an exerpt from what we have but the excerpt we want is this so I’ll select

This copy it then I’ll go back in here I think this is it pre medical yeah this is it so edit and right below the featured image we have the exerpt space so I’ll paste it in there update and now if we go back here let me just refresh this wait cancel update

That now let me refresh the page so it can reflect the changes we’ve made scrolling all the way to the Bottom now it has meet Ed and Jill two bright ambitious meet Ed and Jill two bright ambitious kids so going back in here while this is still

Selected we want to go to layout settings and we need to change excerpt words we can say we need 30 words so now that shows more of the exert exactly so now I’ll repeat the same process for these two but I’ll fast forward this section or maybe not but so let’s go

Back I’ll go back in here middle Mouse click middle Mouse click to open in a new tab and I want to grab these lurm iums from the from the reference website empowering copy that let’s go back in here below here I’ll paste that exerpt update then I’ll go and pick this other

One right so renewable energy oh all right I just repeated these because I did not want to spend time creating stuff because this is not a real website for me so I’ll just repeat uh under renewable energy I’ll just paste in the help Jill and Ed update that so now let’s close

Them go back here into the editor I’ll hard refresh control shift R but you can just control R I’m just hard refreshing because I don’t want to struggle with cash again scrolling downwards here we go so now before we finalize the styling let’s just scroll

And go down to see what we have that’s how it looks but we want it to look like this so going in here to our editor while this is still selected go to style uh we want to edit the Border radius of this box that’s holding the

Image and the text want to give it a border radius of 20 just like that let’s collapse that and go to the in fact let’s go back here border type say none we don’t want them to have a border then post greed thumbnail style border radius 20 just like that it’s already starting

To take shape by the way update next thing we want to do is add this box Shadow so well we’ll still under post grid style let’s go to box Shadow and it’s already appearing but we want to spread it out a little bit and blur

It but it’s too dark so let’s go in here and reduce the opacity just like that and we also want to change the background color I want to give it that very light gray so copy that like that it’s at least standing out a little more next let’s collapse post gri post

Grid and let’s go to meta style typography first of all let’s align it to the Cent Wait no that’s meta in fact I don’t even want to see let’s go to layout Avatar don’t show the Avatar that’s the image of the auth author go back to style post grid style typography

Yes that’s where we want to go align it to the center that’s the title and now the excerpt align it to the center as well let’s go to the read more button align it to the center as well for the read more button let’s also say a

Background type let’s give it that green so I’ll select this green and paste it in there and for the text I’ll give it a white color for the Border radius let’s give it maybe 10 yeah 10 is okay but for the padding let’s give it a top padding

Bottom padding of 20 and top padding of 20 for the margin let’s break that margin top up let’s give it something like yeah I think 20 is okay 20 no let’s say 25 I think that’s better collapse wait let’s make the text slightly bigger so typography size 16 16 is

Okay on Hover we can make the button black so background type 1 a 1 a 1 a like that collapse that now let’s go to color typography and spacing text color that’s I think that’s good the default color is good but for the let’s go to typography give it a weight of 9

900 let’s increase the size maybe 40 let’s inre decrease line height up to something like that update and let’s preview the changes now scrolling down there we we go so I think it’s now taken some nice shape this hover right here can maybe be green but I like the blue it’s

Complimenting the green but of course you will use your brand colors so I will just leave it at that uh yeah so oh let’s add this button right here because when I click this button on this reference website it will take me to the project projects page so let me just click all

Projects so just like that now you can view all the projects listed here so this button does a great job so all I need to do is go to the editor duplicate this remember don’t repeat yourself just copy stuff and paste them so let’s drop it right below when that line appears

There now it seems to have some settings now it doesn’t have some margin settings but so let me just break that margin give it maybe 50 that’s 500 50 then let’s go to content align it to the center Style color 1 a 1 a 1

A on Hover we want it to be that green background type yeah and of course while it’s still selected content the link here should be paste should go to projects update preview the changes scroll all the way to the bottom I think this spacing is too big update let’s say 80 update

That preview the changes scroll all the way to the bottom and now I think it’s much better now so we’ve created the current projects post grid now in the next lesson we’ll be creating the folder a footer like this so I’ll see you shortly so we want to create a footer

Like that so let me just go back to our editor of course remember we’re not creating the footer right here we’re creating it in a separate editor just like the header so I want to go to that burger menu and exit close that let me also close that

Now let’s go to elements kit header and footer add new my folder there we go now yeah let’s activate it and we don’t we can just go directly to edit content it’ll be saved automatically there we go let’s add a I think this is four columns so I’ll add

This and there we go so in here we’re adding an image that’s our logo and some text so going back in there drag some text right below that so let me select the image element select the logo the background is black our 1 a 1 a

1 a so background and the style 1 a 1 a 1 a let me select this text style White and as you can see this is occupying more width than these two so probably this is like 40% so I’ll select this container say uh 40% so this is

60% if I say this is 30% 30% that means these two will occupy 15 each so 15% and 15% just like that update that now in here let’s select some text heading quick links legal let me just say links so that it doesn’t jump over to the next line like

This then for I’ll select it style color should be white typography weight 900 next thing we want to do is add an let’s say icon icon list yes this is what we’re looking for so drop that icon list right there and you can edit here directly so I’ll just type

Projects or you can come in here directly and type contact now I’ll also change this to maybe a checkbox this one insert go back to projects check insert and about check insert that so the three of them all have the same icon now let’s go to style

Icon we want it to be white no let’s make it green copy that but on Hover it needs to be white so when you hover over it it changes to right we’ll do the opposite for the text the text will be white in normal and on Hover it needs to be that

Green awesome so first of all let’s also increase the spacing between the containers so selecting the container that’s holding these other containers layout Gap let’s say 10 now let’s say 20 update that and now instead of recreating another list right here and styling it let’s just duplicate that and

Delete this one all we need to do now is change the details legal we should say legal privacy terms of service terms of service and cookie policy let’s preview the changes and that’s what we have so now what I want to do another thing I want to do is push these

Downwards a little bit because as you can see they’re not properly aligned and also push this column to the right it actually its content and I’ll push it by selecting the container and then adding some padding on the left Advanced remove that padding increase the top padding and the left

Padding what’s the padding on top here 26 let’s make it 25 select this other one Advanced break that let’s make this 25 again so then in the same line update that let’s preview the changes I think now they’re better aligned now as you can see on our reference website we have this subscribe

To the newsletter or to the mailing list form they can Prov provide their email and then hit subscribe to create this form we will use one of the best form plugins on the WordPress directory on the WordPress plug-in directory and it’s called forminator so let’s see how to install and use it

In the next lesson because it’s also the same plug-in we will use to create the contact form this form so let’s install it in the next lesson and build our forms I’ll see you shortly so now it’s time to create the form to allow people to sign

Up to our mailing list so they can stay up to dat on the latest from us from our website so we’re say we’re going to install a plugin called uh forminator so let’s go back to the dashboard plugins add new and I’ll type forminator so here we go wpmu Dev with more than

500,000 active installations I’ll install let’s activate it and now as you can see down here we’ve installed it so let’s go to forms let’s go to create or right here create and we want a news we can use templates or create from a blank to save time let’s just use the newsletter sign

Up template mailing list form so I’ll say create and here we are so now this section here contains the different fields that we will have on the form this is a field this is a button so this subscribe button is this one right here here we have two Fields And if I click

Preview as you can see we have the name first name field and the email address and then the button so that’s what we have first name email we can also Al put them side by side by dragging and dropping whenever the Blue Line appears just drop so you can rearrange them but

As you’ve noticed mine doesn’t have the name the first name I just want the email and now if we preview it’s just the email address filled so let’s say publish the moment you publish it we get a short code and wherever we paste this short code in the front end on any page

The form will appear there so let’s copy this short code and now I’ll go to our editor in the front end here we are in this field right here let’s add a short code element so short code this is a field that allows us to paste any short code

That will display Whatever item we want to display so so I’ll paste what we just copied from the back end this I’ll paste it right here in the front end and the form will appear here so let me just apply there we go so update that and let’s review the changes there we

Go so the next thing we want to do is of course as you can see my button right here runs all the way to the left to the end just like the input field and that makes it more appealing to the eye we don’t want something tiny like this

Leaving all this space looks misaligned so and you will notice we we want to have some rounded Corners just like on our reference website so going back in here inside appearance we can first of all select different appearances I like this one uh let’s also change the color

Colors so while we’re still under appearance going down to Colors Let’s choose custom instead of default colors and the bottom button right here is what we should change so let me just pick this green color copy go back in here I’ll click that and

In here crl V paste that on Hover I want it to turn white so I’ll just select this white color and for the text color on Hover I want it to be black and in default text should be white so let’s preview that on Hover it’s white and that’s because our

Background is black so let me just update that and let’s come here and refresh the page now like that in fact I want to get rid of this border so going back here let’s choose flat update that then let’s go here refresh just like that now let’s give it

Those rounded Corners now formulator allows us to change and tweak different settings and configurations by giving us a GUI a graphic user a graphical user inter interface but we might not have a way to change all the settings we want to change so they’ve also provided us with

A custom CSS field if we say enable we can add some custom CSS here to affect the appearance of the form so we’re not going to get deeper into CSS but CSS is the language is the coding language that gives every website every web page every web application its

Appearance it’s the one that is used to style everything including everything you can see here everything you can see here is styled with CSS and so if we add CSS to this field we’re going to affect how the form looks and in order to make a change to a particular element like

This input field we need to First select it so that CSS knows which specific element we’re trying to change the appearance of so to select the input field we have a a selector for that so here we are here’s the selector if I click that it will bring up the CSS

Selector for all the input fields on our forms so I’ll just hit enter and say border radius we want to give it five pixels preview that now it has those rounded Corners let’s do the same for the button but if you look here you don’t have a button selector but it’s very

Easy to get the button selector if I go back here to the front end here’s the button if I just right click and say inspect will bring up the dev tools if I select this icon right here I can hover over any element I want on the page and

If I select the element by clicking it will see the different CSS selectors I think this is it forminator button submit so I’ll select that copy let’s go back to our CSS paste it in there I’ll add a bracket and then let’s say border radius 5 pixels so if we preview

That now it’s also rounded but remember now that we have the button selected we can also hit enter and say we want its width to occupy 100% of the form like that so update that and now if we come to this page let me just close the dev tools and refresh the

Page that’s how our form looks but now if you might want to change this subscribe button maybe to something else all you have to do is come to the fields this is the Subscribe button you can change it to join us apply now it says join us preview join

Us uh what else you can also change the details of any field you have in the form by clicking it and then changing it make maybe instead of email address maybe just say email and if you want to change this to start typing apply preview just like

That or type here so let’s update that go inside our form select the form itself and then click apply so we can apply everything we’ve done in the back end and see it in our editor now if we preview we’re good to go so now let’s

Also make this logo a link going back in here selecting that pick that domain while this is still selected link custom URL paste that update we won’t open it in a new tab because most of the time when you want to go home you don’t want to open a new

Tab you just means you now want to go back and start whatever you were doing preview click that to go home there you go but now if you want to open a link to maybe the projects or our story chances are you want to still be

Able to go back to scroll here and read more while you have this page open in a new tab that’s why mostly these buttons and links within the page should open in a new tab at least that’s how I do it so remember you can always add a link to

This button which we didn’t do but now you know how to do it scrolling all the way to the bottom oh wait now here as you see we don’t have some nice margin at the bottom of this container so let’s edit with elemental there we go notice that now that we’ve created a

Footer and a header if we over over this these two all show up if you want to edit this page we click this edit with elemental if you want to edit the header click that the footer that going back in here let’s scroll all the way to the bottom and

Because this button is inside this container let’s just go to this container that’s holding everything in here Advanced let’s give it a bottom margin of 100 so now there’s a bottom margin of 100 here as you can see update that let’s preview the changes scroll all the way to the

Bottom and now we have that nice spacing down there but I also feel like we need some padding on the footer so click that select the outer container select that padding top 100 no let’s say 80 60 and on the bottom let’s say 50 update that review changes go home close these

Two scrolling all the way to the bottom I think now it’s looking much much more awesome and that’s how to create the mailing list sign up form and add it to the footer and by extension that’s how to build the footer in the next lesson let’s now move on to the

About page so I’ll see you shortly so now it’s time to go to the about page and start editing it this projects button should lead to the projects but our story should lead to the about page so before we go far uh let me first of all close

This and before we go far I want to edit this page the home page that’s the learning page and specifically I want to come to this button and add the link to the about page so let’s go there after the slash I’ll add about and I’ll say open in a new

Tab I’ll also select this paste that and say open the projects page in a new tab let’s preview the pages let the changes there we go now if I click our story it’s supposed to take take us to the about page but remember when we were creating the menu items we just saved

And published the page without the basic configurations for the Astro theme and all that so let’s go to edit and now let’s set the template first of all to Elemental full width let’s also go to the Astra settings full width sidebar no sidebar let’s also disable these other uh

Settings and now let’s edit with Elementor and there we go so now of course remember we created that top page template and as you can see right here in our reference page if you go to the about page is like that and remember you can always change this background

Image so let’s while we’re here editing this let’s go to the templates my templates we don’t want the blocks over there top template so let’s insert apply all right so before we go far now let me change this to motion effects bouncing up update and now that we’ve updated this

Template we have to select it controll I the container itself save as template or page toop page toop updated save then let’s delete top template all right so now if we insert this there you go so it’s now bouncing up update that now we’re creating the about page

So let’s go in here to the reference website our story so if I select that our title last story then we have this image of the founders who founded this website that’s you uh let’s go and say this double column section while it’s still selected Advanced margin top

100 let’s add an image here and let’s go to the content and bring in the co-founders open select that let’s also come in here the good thing about Elementor is you can copy stuff from one page to another so I want to copy this right click copy or we could have just duplicated

This but no problem right click paste let’s also take a a text editor and I want to copy this text and paste it in there contrl shift V and and then while this is still selected go to layout let’s increase the Gap to 20 and now notice we have this uh line

Down here just to add some athetics it’s bouncing so here we can add from the basic uh panel we can add a divider and I just want to reduce the margin at the top then go to content you can choose whatever style you want here let’s say maybe slashes let’s go to

Style color do I still no don’t have it in my clipboard so let’s go here copy that color paste it in there make it green and what we’re trying to do is get rid of this hard Edge on the image by adding something else that just adds to the

Image itself so that it doesn’t have this abrupt end so while this um divider is still selected we can also add the weight or maybe amount let’s let’s let’s reduce that and say amount reduce it up to maybe that point you can play around with a gap but

I’m not not going to touch that then Advanced let’s reduce that yet further up that point maybe left margin let’s go to you can reduce the width maybe up to that point to balance it on both sides update that and let’s preview the changes all right I think I like it like

That all right so the next thing we want to do is create this section so going back in here I’ll go to the homepage editor and I want to copy this copy you can also make it a template save it as a template instead of copying it but you can also paste it

Anywhere so paste it here in inside this box right click paste it will be pasted right below that and what we want to do if I switch to this it has this gray background so while it’s still selected style get rid of this pattern and let’s change this color to sort of

Grayish not too dark that gray yeah I think I like that and let’s reduce this padding and I think the image is on this other side like that while this is still selected I’ll go to Advanced top maybe eight oh wait no supposed to edit this now 50 50 top 50

Bottom uh oh this is Lauren IAM let me just copy that lurm Ipson let’s remove that it’s always good to have a call to action on a on a section like this I forgot to add it in the reference website we can’t leave a a section like that without any

Button because the goal of any web page is to get people to take some action unless your website is just about providing information and not calling people to do something that will bring you money or customers update that let’s preview the changes scroll all the way to the

Bottom there we go and let me just refresh this all right so we need to make this fade in because right now I’ve just noticed it’s not coming in correct so Advanced collapse layout want to go to motion effects fade in update that let’s preview the changes like

That here we go now this looks a bit ugly so let me just refresh the page all right like that all right now this is not well balanced because this seems to be lower than where the image ends so we can put Push It Up by reducing this lower margin on the text

Select Advanced break that then bottom something like that preview the changes just like that the next thing we want to create oh wait it has some box Shadow which by now I’m sure you know how to add selecting the image Style box Shadow we can spread it out just

Slightly and in fact I think it’s good but you can make it darker of course let me let’s preview the changes first nice but you can also make it darker by clicking this and making it that dark update that let’s preview the changes like that now we don’t have these animated so

I’ll select the container holding them collapse layout motion effects bouncing right and I want this to bounce scene left bouncing left update that let’s preview the changes just like that let’s also select this for some reason it’s coming earlier motion effects bouncing right oh it’s because you copied it

From this part and it had some animation so bouncing right update that preview the changes like that all right okay for this let’s also select that it has some nice column spacing so that’s okay now the third thing we’re going to create here and this is a very basic page based

On what we’ve done with the homepage I’m pretty sure you can come up with more creative content to add to the about page like calls to action so basically now to add this let’s go back to our page just duplicate that carry it and place it below

That uh let’s replace this image select files preck vectors new vectors yes I had some more vectors here you will find all these images in the folder I’ve shared below this video player so you can use them I found them on free pck just in case you’re wondering this is it

Open select and there we go and I think I will leave that nice beautiful line below that maybe we could add a button before we add the button I want to go to style on Hover I want the background color to be 1 a 1 a 1

A yeah yeah so now let’s duplicate it with those changes intact Advanced I want to add some top margin maybe 20 update that and of course you will notice once we look at the preview this won’t have a bottom margin it will probably be touching the

Folder and exactly so let’s add say some bottom margin while this is selected Advanced 100 for uniformity preview the changes scroll downwards there you go so we have some uniform spacing so that’s how to create the about page it’s a very simple page to create but I believe you can do more

With the knowledge you’ve gained so far you can make it much better you can spice it up so in the next lesson let’s see how to create the contact page I’ll see you shortly so now it’s time to work on the contact page so going up here this is our preview

Page uh we want to say contact we’ll work on the Project’s archive page later but right now let’s just work on the pages we can quickly finish so the same thing we did on the about page let’s go to edit and set up the basic configurations like Elemental full width page let’s

Also go to the Astra page settings uh full width no sidebar Let’s uh set re disable those elements all right let’s edit with Elementor so that means all right I’ll not close this because I might want to copy something from here let’s close that preview image

Preview page the first thing we want to do is go in here to the about page that we created I’ll select the top container right click copy go to the contact page right click paste update that this should read contact us so contact us update that uh let’s go to to our

Reference website and open up the contact page so we can see what we’re working on so talk to us today let’s go back in here so in here I want to say a double column container then I’ll select the container itself top margin of 100 not 1,000 let’s add a

Heading and a text editor what else do we have here oh we have that talk to us today let me just copy this paste it in there style 1 a a typography weight 900 size supposed to be 45 in here we’re supposed to have a short code so I’ll just type

Short and drop it in there now we need to paste a short code of a contact form from forminator in the back end so let’s go ahead and build a form with formulator and get a short code and paste it in here to display it over here

So first of all let’s update that page go back to the back end and if we go to forms now you will find this mailing list form listed there and now we can say create another form this time let’s use a contact us form continue contact

Form there we go so now as you can see it has several Fields remove whatever field you don’t want like the first name email phone number maybe you don’t want the phone number delete that now we only have these fields first name email address message and the send message button

So let’s go ahead and publish that form copy the short code and go back to our contact form while this is still selected edit short code pasted in here and now it displays the form there another thing of course you will notice this is aligned to the center of everything

Vertically so selecting the container that’s holding it let’s justify it to the center like that let’s also do the same for the form justify to the center let’s select the container that’s holding both containers and go to layout Gap 20 update that now let’s go back to the back end and go to

Appearance let’s give it that bold but now for the colors we don’t want it to have these hard colors I want it to be a bit more mild so going to the input and text area preview that this is an input field this is also an input field but for a multi-line

Input field it’s called a text area because it allows you to type a a whole paragraph this allows you to just type one single line or something so this is a text area and this is an input input field close that so under colors custom inside appearance input and text

Area border color we want it to be this light gray and on Hover we want it to have a border color of this slightly darker gray let me show you now it has that light gray and on Hover at least looks a bit more mild and awesome you know what I’m

Saying so let’s update that and of course let’s change the button col color to that green so let me copy that going back in here submit button background color paste that on Hover we want it to be 1 a 1 a 1 a 1 a 1 a 1 a forget about Focus

Because right let’s just change that but it’s not really necessary there’s no time that button will be in in focus on Hover it’s that dark color so update that and now going back to the front end when we select this it will allow us to apply what we’ve just done in the back

End so we can see it in real time right here in the editor there we go so the next thing we want to do is now do the same thing we did for the rounded Corners so let’s go or first of all let’s go back here go all the way to

CSS select the input selector border radius 5 pixels let’s also select the text area selector border radius colon 5 pixels and the the selector for the forminator button I’m already used to it it is I showed you how to get it from the dev tools but it’s dot forminator Button submit that’s the selector enter border radius 5 pixels enter width remember we want it to run all the way from the left to the right of the form 100% of the space now let’s preview the changes and there we go so our form is

Now up up and ready now if we go to the front end while this is selected let’s apply that review the changes there we go and of course now right here below the form we also have this map that shows people where our office is located or our

Institution so let’s add a that that column that container while it’s selected Advanced margin top 100 select that and type map Google Maps drop it right there there you go and now you can provide the specific location right here I think we can actually just do that let me type that in here

Kicc yeah it’s actually it’s actually just doing that so just type in your specific location in here and it will show up right there update that let’s preview the changes and remember by the way let’s go ahead and while this is still selected let’s give it a bottom radius a bottom

Margin of 100 and let’s also go to motion effects and say I want it to bounce in up and also in fact I want this to bounc in up the container but the map itself if I select the map I want it to fade in so motion

Effects fade F in let’s also do the same for this I want this to bounce in right by now you must have noticed I love bouncing but these others are also awesome Advanced motion effects bouncing left update that let’s preview the changes there there we go

Yep awesome so I think there’s one more thing left uh what’s the oh yeah we had this uh this thing right here I don’t remember what it was so let me just say edit with Elementor I don’t remember what element I used but I remember it essential addons it’s an essential addon

Element this is the reference website I’m opening just in case you’re wondering it’s a tab oh yeah yeah I remember now so while we’re still in here in this page I’m going to type tab let’s use Advanced tabs this is by essential addons so if we go to the content let’s

Say tab one where is email then let’s just remove all that info@ charity fund.com collapse email close that let’s say phone delete that and let’s say last 2 5 4 1 2 3 4 5 6 7 8 9 hold down shift and press enter to move to the very next line + 1

800 235 6987 all right so with that collapse that let’s go to the style tab title I think these already look awesome but we can change things like color background type when it’s active let’s give it a background of that green so basically I’m just going to play around with these

Settings uh tab background normal on normal background color should be all right let’s just give it that green on Hover we want it to be so on Hover it should be that color when it’s active we can leave it at that color border type none shouldn’t have any borders

Content the content typography we want the size to be bigger maybe that size or maybe that size uh typography yeah maybe that size I think that makes more sense let’s give it some weight maybe black go in here update that let’s go to the tab let’s give it does it have a border

Radius border radius of 10 margin right let’s give it maybe five so that we separate the two of them so uh let’s go back to the tab let’s go to the carret uhuh so when it’s active let’s go back to the tab title when it’s active it needs to be that green

Color no let’s just say it needs to be that 1 a 1 a 1 a yeah all right then again let’s also go to the carret carret color let’s give it that 1 a 1 a 1 a 1 a 1 a 1 a so that it rhymes with whatever is

Active on Hover it looks like that but when it’s active it looks like the carret let’s say Okay preview the changes there we go so now our contact page is complete it’s now time to start working on on the donation forms let’s go to our reference website

And see the donation forms if I say projects and maybe open up uh school fees for Ed and Jill this is the form we’re talking about donate now $100 continue so this is what we’ll be creating starting from the next lesson so I’ll see you short shortly so now

It’s time to create this donation form and we’ll do that using a special plugin called give WP so switching back to our workspace I think we’re ready to close down these Pages for now because we’ll not be using them so close all of them down now we’re

Back in here in the dashboard go go to plugins add new should have clicked add new but that’s okay so let’s say give WP there we go 100,000 installations so install now it’s actually the most popular uh donation plug-in on the on the WordPress plug-in directory activate

That all right so now we need to go through the setup wizard just to get some basic settings configured so start setup uh I’m going to be an individual of course you can choose to be an organization that’s raising funds for its different projects if you’re an NGO

But let’s say for example you are an inventor or maker and what what you want people to fund are projects like renewable energy projects a gadget project maybe you have a new startup idea a tech startup idea you can just work as an individual so let me just go with as an

Individual but the settings are the same what am I fundraising for let’s just say environmental for example if none of them is listed none of your uh Endeavors are listed here you can just say other so environmental would you like to join WP in other words you do like to join their

Mailing list you can accept and continue or skip joining I’ll say skip joining where are we fundraising choose your country so let’s just say Kenya so this is now disabled currency I just want to fundraise in dollars Kenya What did what do you need in your first donation form I need

Everything except I don’t want offline donations Anonymous Don donations is okay company donations all these are okay continue this will show us uh our form how our form is supposed to look so this is how it will look I like it you can scroll through and see what you

Have if you don’t if you don’t want what you’ve selected you can just go back to features and select whichever you want continue what else do you need to support your codes recurring donations donors cover fees yes PDF receipts that’s okay custom forms custom form Fields that’s

Okay I’ll also add this and these elements will be available to us as we’re building our forms inside uh the Gutenberg editor multiple currencies I don’t want multiple currencies dedicated donations and of course we’re not going to get deep into give WP this is something you can go and research on

YouTube givewp has a YouTube channel that has all the information you need on how to maximize your use of the plug-in right here we’re just looking at how to integrate it into the website and get it up and running so we can also now follow these steps to finish up setting up like

Connecting to PayPal stripe these are things we can do later so for now I think we’re good we can dismiss setup screen here we go so now we’ve been redirected to the list of all the forms this donations was added right here on the menu when we installed the plug-in

Let me just Purge all the cach then let’s remove all these things now let’s view this donation form as you can see it’s looking very ugly but we’re going to use short codes to display it awesomely like right here on our page we’re going to use short codes now going

Back in here if we go to the pages we have a few pages that have been generated automatically during the setup result that’s donation failed donut dashboard donor confirmation these have been generated automatically by the wizard another thing if we go inside settings this is where you will find all

The settings of that particular plug-in as you can see the donor dashboard page failed donation page these are the pages I was telling you about all right so payment gateways this is where you will set up the payments uh what’s this these are the gateways that are supported by the

Plug-in and of course this is something we can always do later as we progress so let’s get back to all forms and now here is our sample donation form we can go to edit let’s just say edit and now here is the title of the form which we can give it a different

Name maybe uh let’s help Jill and add go to school so I’ll paste that in there and these are all the settings you need for the form uh we can have a short description here so now this is the old Builder that people were using before they created

The brand new visual Builder so first of all I want to update this page so we can save the changes we made on the name all right and for SEO purposes once you change the name of the form here you should also change the slug so the slug is edited here the Perma

Link slug save that there that’s okay it’s been converted to lowercase and now now that we’ve made those changes first of all let’s update that because we’ve also made changes to that and now let’s upgrade this form to support the new form Builder so let me just upgrade this

Form it will give us a warning and because this is just the sample donation form this is not a form we’ve published let’s just proceed with the upgrade then yeah the form has been upgraded uh this will help us transfer the existing donation data to this new

Form in case it had in case it had already started receiving donations names of donors and their locations amounts that data will be transferred to the new Builder transfer that yes let’s say transfer type transfer delete the existing form after transfer the one that was using the old Builder

Go back to your donation form list let’s go back there all right so now here is the form now we’re working on let me say edit and here we are so this is the name if you want to change the name that appears on the list we can change it right here

And here is the design this is how it looks so first of all to change these details here you can go to buttons donate now we can say donate and that will change in real time uh in the next step it will say continue then in the final button donate

Now collapse buttons header we can change this to help Let’s Help Jack Ed and Jill not Jack and Jill and then we can have a small exerpt right here so let’s go back to copy that let’s put it right here and then let’s open up donation goal enable

Donation goal this is the goal we can change it to maybe 20,000 $20,000 uh we can say amount the gold type can be changed from amount raise to number of donations and all that so basically just go and look at this now let’s go to build learn how to edit your form this

Is a wizard showing us how to do this so I just want to exit the tour because I already know how to do it first of all let’s say publish publish there we go so under build now we can say these are the different steps this

Is step one oh no this is step two actually so this is step two step two step three step three who’s giving today these fields are required so because if I click continue it will say whatever is start is required you can make this an anonymous donation so these are the settings right

Here you can’t change this this is dynamic content will it will depend on what the donor selects in these fields and then you can ask people to agree to terms and conditions you can also add more elements from here but I think this form is already sufficient if you want

More details on how to build it fully to the fullest check out their YouTube channel now with that done let me say close panel and I want to exit to the list of donation forms now here is our donation form and here is a short code that we

Can use so I’ll right click and copy it and of course I’ll go to the front end and go home and if I scroll all the way to the bottom uh this was supposed to be this is the one we created Let’s help Jill and Ed go to school so we can say

Edit with Elementor remember we built it with Elementor here we go so in this section we want to add a short code and drop it right there Then paste our short code right there there we go so update that and let’s preview the changes there we go so one thing you

Will notice is that this is too narrow so it’s too narrow and another thing we did not set this to fade in and so when we refresh it it has that jumpy white background right here let me just show you once again all right it’s not showing but let’s select

This control I top container Advanced motion effects fade in we want it to fade in and now let’s select this container make it maybe occupy 60% and this should occupy 40% at least now it’s a bit thicker if we reload the page first of all that just faded in so

We don’t have that ugly white background showing and the other thing this is now wide enough can now continue with the form and fill it oh wait uh we want to create some some padding at the bottom so select this container Advanced bottom 100 update

That there we go so preview the P the changes or we need to add some motion effects to this but let’s first of all look at it yeah now it has some nice padding so the other thing here is to make this column here uh bouncing left bouncing left and this bouncing

Right bouncing right review the changes one more time just like that now one more thing we need to do is if we go to our reference website this was the very first donation post I created but later I created some other ones that had some Gallery so that if you want to

View images of that project you can have a look at them so let’s see if this is one of them scrolling downwards no not that’s not it let’s look at that and yeah save gura that was it let me close these others so if we scroll down here you

Will notice we have a gallery of images related to this project if you want to showcase what you’ve been doing in the project so if I click that it has all these images know this just like that so let me close that let’s see how to create this Gallery very quickly

Going back to our page in here let’s search for gallery basic gallery and let’s drop it in there still in this container on the left because the reason we have all this content on one container on the left is when we start making this web page responsive on smaller screens like a

Phone everything will collapse to one line and everything in this container will be above everything in this container because this container will collapse to to go below this other container I hope you understand that selecting this Gallery I want to select this image that and that holding down control and

Selecting and then create that that maybe that and that create a new Gallery with all those images insert Gallery so we have all those images here we are let’s go to let’s say three columns and I want to remove one image I want it to be balanced insert Gallery so we have six

Let’s go to style uh first of all let’s give it a border radius of 20 custom then let’s also go to content and say the thumbnail should be uh let’s try full yeah full like that update that and now we can duplicate that heading drop it right

There it went below the Gallery drop it there remove that top top margin give it maybe a bottom margin of 20 Gallery reduce the size to maybe 25 reduce the bottom margin to 10 maybe style let’s make it that green color copy that paste that in there update that preview the

Changes awesome so let’s scroll downwards and there we go so basically that’s how to create a donation project from creating the post all the way to creating the form and if you have more projects that’s the process remember we started by creating the template for this post

We added the text and all that and now we’ve gone ahead and installed give WP and created a form in the back end and pasted it as a short code in the front end now that we have this we can save it as a template the entire page so we can

Go without anything selected here we can go here and say save as template and say donation details template there we go so donation details template so let me close that we can exit from here now if I go to posts remember that’s a post we’ve just finished

Creating and saved a template of so if now we go to edit this one empowering pwds with love because we already or we did not set up these basic settings so let’s go to Elemental full width let’s now go in here full width sidebar no sidebar disable these update that edit with

Elementor because we’ve updated it and here we go so this is the empowering pwds with love post which is the details page of that particular project so let’s go to templates my templates and now let’s say donation details template insert apply so now as you can see we’ve imported or inserted every

Detail we we saved from the other template and all we need to do is replace these details uh so let’s select that image uh let’s go to our reference page projects copy that I want to come here select this and paste it in there select that of course let me just pick this

Text copy that select this contrl shift V now when you paste some of these text it won’t have like the the bullets because I used control shift V that’s some preformat thing which control shift V doesn’t copy so I would need to come back in here and say the installation from the

Installation the installation should be like that infrastructure so delete enter uh communities delete enter future where is the future advocacy future then let’s just remove this bullet go up all right so let’s update that and now for the gallery now you would need to go in

Here remove all these images to add the images you want for that particular three for that particular project so insert Gallery all right let me just say insert gallery it’s still loading update selecting this these others are still loading uh let’s add to Gallery so only three loaded so let me

Add this and this and this so those are three more insert Gallery so now we have six but now they don’t look uniform and that’s because they are different size so we should have used the same size images but no problem they still look good so preview

That and here we go so this is the new donation project we’ve just created and here are its images now that’s how to do that but of course now remember we need to replace this form because this form does not belong to this project so going back in here

What we need to do is add form and now of course let’s give it a name let’s go to where is that page oh so this is the reference website so let’s select select free medical care for no wait this is empowering so let’s select empowering pwds with love so

Let’s paste that in there multi-step classic Legacy activate so I’ve activated that and publish close this and now that we’ve done that let’s not even waste time looking at this let’s go to upgrade this form proceed with upgrade because it’s brand new can make all the changes in the front end got

It donate now so back so now let’s start by creating a donation goal let’s say we want 50,000 that’s our donation goal we can go to build and see if there’s anything we want to add here publish publish now going back in here here’s our

List so we forgot to delete the old one which I believe is this so let’s trash this when we upgraded our form remember the first one we were asked if we want to delete the old one after migrating or transferring we forgot to do that for

The second one so now let’s go and get this short code let’s go in here select this element delete that and paste this in here okay this says support our codes first of all let’s update that but let’s go back in here uh let’s edit because we forgot to change that

Detail say support our code so header copy so in here paste that and then let’s just get some text for that section your donation will make a huge difference update that now it’s updated if we come here while this is still selected apply the changes we’ve made in the back end will now

Reflect wait we’ve Sav oh wait transfer data transfer that delete the existing oh we hadn’t finished that section go back to your donation form list okay now let me just hard refresh control shift R to see if we’ve made the necessary changes if it hasn’t changed we can just go back

And grab the other form this form is not published all right so all right let’s edit this once again got it okay transfer transfer that transfer that delete okay so no goal set so let’s edit that let’s go to header support codes change that text okay form number two let’s just assume that’s

The name of that form copy name of that project publish or what was it its name empowering copy that okay it’s published that’s where we hadn’t touched so close that panel I want to paste that update now going back here to the list we still have no goal

Set so let’s go to donation goal 1 million update that going back in here now we have a goal set of 1 million this form is number 454 this is 402 so let’s go back in here while this is selected now it’s published 454 and let’s apply there we go update

That I think now we’ve covered how to create the donation uh forms and donation Details page by creating posts so now in the next lesson let’s see how to create the project archives page the donation project archives page if you switch to our reference website if we

Click the projects this is the donation archives page a list of all the projects that need donations let’s see how to do that in the next lesson we’ve learned how to create the different donation projects of course we’ve created just two projects but I would expect you’ll

Be able to create the rest of your projects following the process we’ve followed so right now we want to create a project archive page just to have a central place where the visitor and potential donor can visit and find all your projects listed so let’s move away

From the reference website and go to to our Builder let’s go to pages and let’s go to projects say edit and now let’s do the basic setup elementer full width let’s also go in here full width no sidebar disable all those and let’s I think right click okay I want to edit

With element so no problem and since this tab is now edit with Elementor I want to make this tab our dashboard so I’ll just exit because we’re done with this page drag it to the left I like my dashboard on the left and these others on the right here we go so

This is our project page and we want to add all these posts to display them now it’s very easy to create this page first of all remember we saved the template for the header so going in here I want to say page stop updated insert it in there

Apply and now let’s go to our reference and see our projects so selecting this our projects update that and now I want to go to the homepage so I’ll click CH the the I’ll click the logo to go to the homepage scroll all the way to the

Bottom and what we want to do is not repeat ourselves so we want to copy this so I’ll go to edit with Elementor scroll all the way to the bottom and I want to select this uh post grid right click copy and first of all let me see or we

Don’t have some text here on the reference website so we don’t need to copy this so select it copy go back in here select this paste right there but I want to select the container Advanced of course 100 top and 100 bottom to separate it from the fotter and the

Header and let’s say update preview the changes oh and this is the old hero section we did not add the fade in motion effect to so control I then select that container Advanced motion effects I suggest you save this header so you don’t have to always keep updating this fade

In let’s preview the chain es now it will fade in awesome as you can see that’s fading in but now we have this ugly underline on every link and these are WordPress settings so we need to go inside customize and let’s go to Global let’s go to typography

Scroll all the way to the bottom and underline content links disable that now we’ve gotten rid of that underline click publish go back in fact let’s close that and now here we go so if you have more posts they will all show up here so let me just show you

Uh let’s go back in here uh first of all Let me refresh so those changes can take effect all right so that’s how it looks now if I close this Navigator and select this post grid go inside style uh color typography spacing hover color can change to the that green just like that

Update like I was saying if we go back in here let’s go to post not Pages post we currently have the these three posts and these are the three posts that are displayed here now let’s assume we had six and I don’t want to spend time creating them meticulously because I’m

Not going to use them so what I’m going to do is use the essential addons duplicator so I’ll just duplicate that then I’ll just duplicate that this other one EA duplicator and EA duplicator so now we have six of them but these duplicates are drafts so we

Need to publish them I’ll go inside this maybe change its name so I’ll need to change its name to maybe save karura Forest paste that and I also want to change this image to assets this image open because that’s the image that will show up on the page then publish

That then go back let’s go to this other draft uh let’s pick another name promoting clean energy projects paste that change that image I want to use um this image open set featured image publish publish of course remember you will need to set different exerpts for each project a different exerpt for each

Project so let’s go back in here now finally we have this one more draft edit uh let’s pick another name free medical care for vulnerable families paste that let’s change that and remember I said this does not have to be about people who are suffering you can use this uh this

Platform or this website to ask for donations for Tech projects if you’re a mad scientist you can use a website like this to get donations for your mad projects it doesn’t have to be about people who are suffering it can be a different project whatever project you want so now those are all

Published with different featured images so now going back in here if I controlr to refresh this page and here we are so now we have the six projects showing up in the front end the latest one ones will always show up as the top ones so

The the the one we’ve created last will be the first to show up here now let’s preview the changes I want to show you something very quickly if we scroll downwards you will notice all these different uh grid elements move to take up the space that’s available in order to maintain

Equal spacing if we go back here and select the grid layout you will notice here it says masonry and that’s the same as if you imagine how uh Mason arranges bricks they are intertwined so to speak in order to occupy whatever space has been left by a shorter briak so that’s how to

Create the project archives page now we’re almost at the end of the course but we have several things we need to get done for example we need to to have the website look awesome on different device sizes on smartphones on tablets and it already looks good on desktop so

We need to make sure it looks good on the other smaller devices so we’ll see how to do that in the next lesson let’s talk about how to connect this to PayPal so I’ll see you shortly so now it’s time to talk about the payment gateways how to actually accept money from real

Donors because if you look at this top right area right here it says give WP test mode active that means whatever payments we’re making in the front end are just test payments not real payments so if I go down here to one of these and in fact this is

The homepage because we added more posts now we have six of them but I want them to be three so first of all and before we go too far let me say edit with Elementor and let’s scroll all the way to the bottom select

It and now let’s go to posts per page I want them to be three that means we won’t see those extra three update that but of course on the projects page let’s just preview that scroll all the way to the bottom and there we have three but on the projects

Page we still have six because this is an independent post Grid it’s not connected to the homepage post grid but now like I was saying if we go to maybe this whatever payments we choose to make here donate now we choose $1,000 and say continue provide our details all the way

To the end let me just provide my details here of course test mode is enabled while in test mode no live donations are processed but I can still click donate now and that will give me this thank you message because we have a way to test our

Payments but now we want to deactivate the test mode so let’s go back inside the dashboard and under donations settings we’ll go to payment gateways and as you can see we have three ways to pay stripe PayPal and offline donations so first of all let’s start by coming here and I want to

Say we want to accept PayPal donations and make it the default these other two can be the secondary payment methods but the default payment is Paypal donations so I’ll save the changes the reason I’m not using stripe is because we don’t have stripe in my country so I

Can’t even use it but of course like I mentioned if you go to the give WP YouTube channel you will find videos on how to do all these connections I just want to make sure we have a comprehensive course that will show you how to do everything from scratch to the

End so let’s go to PayPal now that we’ve decided to make PayPal donations our default or primary payment method let’s go to PayPal and now here we can connect with PayPal live we have transaction type donation accept venmo payment type payment field type order just leave everything to its default and I’ll say

Connect with PayPal live a popup will show up for us to connect with PayPal and quick note you will need to have a PayPal business account not PayPal person personal account PayPal business so I’ll just select this account next I already have an account here so

I’ll just log in let’s see what we’ll find in here so I need to get this let me just get it via text just wants to confirm that this is me the verification code will be sent to my phone submit all right so now we’ve logged into to

PayPal and like I mentioned it’s a PayPal business account so agree and connect you now have an account and you’ve successfully integrated PayPal with givewp go back to give WP so I’ll click go back to give WP make sure that’s what you click you’re connected to PayPal here’s what’s

Next PayPal allows you to accept credit or debit cards directly on your website so basically this is just givewp advising you to make sure your website is secure all right so let’s just confirm as you can see now we’re connected I want to say save changes and now you will notice give WP

Test mode is active so we need to disable the test mode so go back to gateways and here we have test mode let’s say disabled and save changes and now that’s gone so right now let’s go to the front end and see what we have so if I refresh

This donate now let’s just say $11,000 let me provide my details continue this still says test mode is enabled all right so I’ve taken a moment to dig a little deeper and find out what the problem is while we’re still seeing donate with test donation uh if you’re experiencing this

Problem I’ve found a solution so first of all remember remember we’ve been using this form we created it using the new Builder that give WP keeps telling us about so if we go to the forms first of all make sure you’ve saved these changes our default payment is Paypal

Donations and we also have some offline donation option so make sure that’s saved let’s go to forms and so these are the forms we created and remember give WP kept telling us to upgrade to the new visual Builder try the new form Builder but I’ve discovered that’s actually the problem so let me

Show you if we say add form I want to click and open link in new tab or let’s just open it here add form we’re going to use the old backend Builder this Builder right here and that form will work it will have the right PayPal button and offline

Payment button but right now we still can’t see a PayPal button and that’s not what you want so going back in here this is the Builder so let’s give our form the name of the project that’s the same name we will give the post that will display this form so let’s say for

Example what project is this empower ing p pwds with love copy let me paste that and let’s just give it the label B so it’s Form B because we already have another one by that name probably and let’s activate a form template let’s use this multi-step uh

Template uh let’s see what else do we have I just want us to first publish it and now that we’ve published it remember gwp kept telling us to upgrade this form and that’s what we did and I discovered that’s the problem and I will show you where the problem

Is so right now let’s first of all copy this short code and let’s go to this project so we can replace this form with it so I want to say edit with Elementor and I’ll select this element and in here delete that and paste the new form

There there you go let’s close this let’s say update and now you will notice we don’t have a goal set so let’s go back to our form Builder let’s go to donation options oh wait donation goal let’s enable it of course now you can set your donation goal let’s just go with the

Default and goal format is on the amount raised that’s the that’s what the goal will be based on close form progress bar goal amount so let’s update that all right let’s go to the front end while this is still selected let’s apply the change changes we’ve made in the back

End and now we have our goal it’s based on the amount raised so now if we go to donate now we get this option someone can input whatever amount they want maybe $20 let’s say continue and as you can see see now we have access to the PayPal button credit card

And uh we also have donate with offline donation so this is what we were missing with the other form so let me just preview the changes in the actual preview let’s say donate now let me say $5 continue let me input my details then donate with

PayPal so if I click this it will open up a PayPal popup if I want to get my money from PayPal to make a donation to your project if this is your website this is what will happen we we don’t need to go through that process but as

You can see now our form is behaving as expected if you want to change details let’s go back if you want to change all these details you have access to all that form Fields just play around with all these settings let’s say donation options yeah

This is where what I wanted to show you the the different amounts these amounts you can edit them under donation options so you can say maybe if you want to start with 100 250 50 500 1,00 2,500 you can add levels 10,000 and now let’s update that let’s go back in

Here if I select this and apply what we’ve just changed in the back end preview the changes our goal is still intact but if we click donate now all right I think we need to clear the cash uh let’s see Purge all Let me refresh

This so I think my problem here here is a problem with cash that’s why some of these changes are not taking effect immediately so here we go so the new amounts have reflected on the website now going back in here if we go to all forms remember these two forms were

Created using that other Builder that give WP keeps telling us to switch to so if we click edit to edit the form visually as we did if we go to build and scroll down to this section this is the payment gateways option now that we’ve selected it we

Don’t even have options to select or deselect the settings we want for our form like we have here let me just switch here let’s open the brand new form we’ve just created remember we went to donation options if I’m not wrong form fields we went to Global default or we did not go

Here but you can come here to this drop- down menu and choose the default gateway as PayPal donations say updates but by default because we already set it as the global setting under settings gateways we said PayPal should be the default payment this already knew that

But if we go to this visual Builder selecting this does not give us any of those options but it has a small instruction here saying Global instructions are defined in the global settings if we click to go to global settings here are our global settings and of course if we go to

Gateways our global settings already say PayPal donations should be the default payment system so why is it was it still bringing up the test mode so at least now if you’ve been experiencing that problem while trying to set up the payment you know what to do our website is now actually

Accepting PayPal and credit cards let’s strike a credit card first of all let’s provide our details and then debit or credit card and now these fields appear here for us to complete our payment so I think we’ve covered everything I wanted to address regarding the payment

System in the next let so that means we have to delete these let me just delete them select the two of them and we have a way to delete them bulk actions move to trash apply yes confirm so now moving forward you will use this backend Builder to build your

Form if you want your payment buttons to show up on your page and once you’ve built them you can use the short code to display them on their respective posts so let me just open up the post this is just a quick recap of course remember this is what we

Created if we go to edit with Elementor you can now come because we’ve deleted the other forms that were here let me select that and delete that now I can come back here to our forms all forms copy that short code go back here paste it in there assuming this is

The form for this specific project moving through the same process there we go uh so I think we’re done with the payment system the payment Gateway we just have a few more steps to go and basically it’s just making the website look presentable on different devices it already looks good on desktop

Devices so now let’s optimize it for tablets and smartphones starting from the next lesson see you shortly we’re almost almost done it’s time to make these Pages responsive on different devices so I just want to close down every single tab here and now we’re left with this let me just go to the

Homepage so we want to start with the homepage but before we make the homepage responsive we want to make the Navar responsive so the first thing in making your website responsive is to see how it looks before you make any changes how it looks on different devices before you

Make any changes and the best way to do that is using your Dev tools every browser has Dev tool so if you hit control shift I and make sure that this icon that has a laptop screen and a mobile phone screen is active you can toggle it right

Now it’s off now it’s on and of course your Dev tools might be on the floor of your browser if I click this it’ll change and go to the floor it doesn’t really matter I like it right here on this other side because it allows me to see the entire

Website now we can mimic different types of devices so on this drop- down menu right now we’re looking at an iPad Mini this is an iPhone 12 Pro that’s how it looks let’s go to Samsung Galaxy S8 that’s how the website looks so as you can see look at

The header and the nav bar looking very ugly so it goes without saying that the first thing we need to do is make the nav bar itself the header responsive so that’s what we’ll start with then in the next lesson we can move on to the rest of the

Page so let me just in fact I’ll leave this intact then I’ll go in here right click here and open link in new tab now we have this homepage and we have our Dev tools active all right so now I want to say edit my

Header here we go so now go down here and click this responsive mode icon that will bring up these tools and we can select let’s start with a tablet tablet mode I’ll expand that just slightly and this is how it will will look on a

Tablet what I want to do is select first of all let’s start with the container that’s holding the logo let’s break any padding and margins that it has so I’ll break the padding and margin and of course as you can see here the the device is now a tablet that’s what

Tells you we’re editing it in tablet mode if we click that we have the different device sizes as well if we switch to mobile that switches to mobile can switch to tablet again so with that let’s also do the same for this Advanced break all that and that as

Well all right I think we can use a different menu all together for tablets so let’s duplicate this and now if I select this this is what will still be visible on desktop but I want to hide this because we want on tablets and mobile phones to not see this button but on

Desktop we want to be able to see the button itself so if we switch to tablet now that we have two we can select this second one go to advance collapse layout responsive and we can say hide hide on tablet and mobile phone so this one will only be available on

Desktop it will only be visible when you looking at the website on a desktop and now let’s also now let’s switch to desktop we want to select this go to Advanced let layout responsive and we want to hide it on desktop because it’s only visible on

Tablets and mobile phones so if I say update that and preview the changes let’s close this other one so now on tablet on desktop that’s what we see control shift I this is the other one that’s visible on tablets and mobile phones so now let’s go back in here and

Switch to tablet now this is what’s v visible on tablets I can go ahead and remove this container that’s holding that and then make this maybe 70% layout percentage 70% and this 30% so there we go update that let’s preview the changes so now here we go but if we switch to

Responsive and drag this to make it the desktop size now we can see the one that’s available on desktop only the moment it reaches the size of our tablet switches to the other menu the other header so now we can play around with the padding on this selecting this container

That’s holding the menu let’s go to padding right let’s make it 10 now let’s make it 20 on top we can make it we can leave it right where it is in fact let’s make it 50 and let’s also make this other one 50 we made it 10 we want it to be

50 update that and let’s preview the changes there we go so now if I click to go to the homepage let’s see what it looks like on a tablet that’s how it looks but now of course the menu is black so we need to do something about

That and this space is too maybe let’s do 30 Advanced top padding 30 and this one 30 as well update that let’s preview the changes control shift I and let’s go to the homepage there we go I think now that’s some nice padding at the top and some

Nice padding on the left you can see the menu but it’s right here awesome so let’s also play around with a color while it’s selected let’s go to style let’s collapse the menu wrapper let’s go to Hamburger style we have the hamburger toe tole and

Down here we have the close tole so this is the hamburger tole and if I click it this is the Clos toggle so we can start by styling the hamburger tole going up here background type let’s give it that green color and I had closed it so oh it’s right here so

Copy switching here hamburger too background color green just like that on Hover we want it to be white so in fact when you hover your finger over your tablet it shouldn’t change color so let’s just leave it the way it is update that and now let’s also work on this so

This is the menu wrapper if I’m not wrong so let’s collapse the hamburger style for a moment and go to menu wrapper let’s give it a black color or let’s give it that 1 a okay I’m not able to type 1 a 1 a 1 a but that’s what we

Have and here are the menu items so I want to say inside style collapse menu wrapper go to menu item style here’s the menu item style item text color should be white and on Hover it’s already taking shape I think it’s because we set it in the WordPress settings but just to be

Sure let’s say on Hover item text color just in case you’re not getting that same result should be green and when it’s active it should also be green just like that update that and let’s preview the changes all right let’s go to the homepage so we can see the changes in

Action like that if I click that here we go now we can add the logo here so let’s go back to content mobile menu settings Main Mobile menu logo let’s select our logo select update and now if we if we click the menu itself now we

Have the logo showing up here I think we can make it bigger so go to style collapse menu wrapper mobile menu logo wi maybe up to that point update that now we also have the closed logo which we’re going to update shortly but let’s just have a quick look at the logo

Now we can see the logo because of this WordPress bar but if we open up an in Cognito window uh WordPress everything.com where we’re not logged in if we say control shift I don’t worry about all this being on this other side let’s just go to iPad Mini the reason we have

The reason we have to drag it to the left is because we haven’t optimized these others to occupy to be smaller so let me just click that we’ll take care of that so that’s that’s how it will look on your tablet and I think I’m satisfied with that let’s do something

About the closed tole before we move on To the mobile size so switching back here close all these let’s go to Hamburger style close tole right here let’s say background type let’s also make it that green let’s see if we can increase the margin at the top it’s disappeared but now let me increase the top

Margin we want to align it to the logo just like that so it’s 20 update that if I switch to my incognito window refresh let’s open it I think now it looks awesome so now we’re done with that let’s move on to resizing it for the mobile screens because now we’re

Done with the tablet size so I’ll switch to tablet to mobile now let’s increase the logo size on mobile so going to collapse hamburger style mobile logo let’s expand its width up to that point update that now if we come back here and refresh the incognito

Window and let’s go here expand that if we switch to iPhone iPhone 12 I think it looks awesome going back in here so that’s how it looks on all all weit so one more thing we need to do is align them on mobile because on tablet they are side

By side but on mobile they’re stacked on top of each other so we want to make this occupy 50% so let’s select this container holding the logo go right now it’s at 100% let’s say 50% let’s select the one holding the menu make it 50% update that we don’t need to preview the

Changes here let’s go and preview them in the incognito window and that’s how it looks on your mobile phone so basically that’s how to make the header responsive on different devices oh oh wait this button should lead to the dashboard by the way if we go to the reference

Website it should lead to the dashboard if I click dashboard on the reference website we’re supposed to see our donations here we go so that’s something I’ve just remembered projects let’s change that to dashboard Dash board update that let’s select this link copy paste it in here and add

Dashboard at the end then let’s open it in a new tab update that now of course that means the button will only be available dashboard right here will only be available to us if we’re on desktop but before we finish the class I will show you how to make sure even the mobile

Phone menu has that dashboard button so don’t go away in the next lesson let’s see how to make the page responsive the homepage we want to make the homepage responsive how does it look by the way close that scrolling downwards so that’s how it looks we have some work

To do so I’ll see you in the next lesson so now it’s time to make the landing page look much better on mobile phones and tablets so switching back to our work area think this is the spot yes this is it so now that we’re done with the

Header for now we’ll come back to add the desktop and tablet dashboard link it’s time for us to close this so I just want to close that click this to go to the homepage close that so now obviously let’s go inside to edit with Elementor because now we’re editing the page

Itself here we go so of course let’s let’s go to responsive mode let’s switch to tablet and that’s how it looks on tablet the first thing I want to do is because they’re already staged I like the way they look but let’s separate this spacing a bit more so style color typography

Typography let’s go to line height and maybe up to that point some nice separation and now you will notice this text is too close to the edge but we want it to have some padding so I’ll select the container that’s holding the entire hero section with controll I cuz

I can select it here so container Advanced and we want to give it a a round padding of 20 just like that so now top sides and bottom has a padding of 20 and everything is contained with some nice room on the edges update that think these look

Awesome but we can also add some padding on the sides so selecting the container that’s holding them Advanced 20 on the sides now they’re looking awesome let’s also do the same in fact we’ll do the same for every container select Advanced 20 Z just like that for the

Buttons in fact we wanted to have just one button no we can stack them so if I select the container on tablet the direction can be top to bottom stacked just like that update that let’s also do the same for this Advanced a padding of 20 all around no

In fact for this we want to maintain this padding of 80 top and bottom so if we break this link it will reset to zero but on the left we won’t two 0 right two 0 top 8 Z no let’s make make it 60 and bottom

60 now for these buttons we can select the individual buttons we can stack them like these two but I think actually let’s just reduce the padding on all of them right here under style after selecting the button style break that it’ll go back to zero top and bottom maybe 15 not 150

15 but on the right 40 on the left 40 let’s do the same for this other one style break that 40 40 15 so those are nice sizes for a tablet screen so now I want to select this right click copy this right click paste style select

This right click copy select this right click paste style so now they’re smaller so if I select this you can give them that left to right Al alignment just like that for uniformity let’s also now come to this let’s go to Advanced let’s give it 20 all

Around in fact this seems to be too long a word contribution so in fact let’s reduce the size of these headings typography 40 update that let’s go and select this style uh typography 40 because this is on tablet they need to be slightly smaller typography oh wait here this can maintain its

Size all right so this is not Center aligned style Center align and let’s select the container that’s holding them Advanced we want to maintain that 80 80 so 20 20 80 80 go to style typography let’s reduce the size just like that and let’s select the container that’s holding all of

Them Advanced let’s give it 20 all around for some nice breathing space on the sides these seem a little weird but let’s first of all update this and preview the changes so let’s preview that control shift I switch to tablet iPad mini and now let’s scroll downwards iPad

Air this is how it looks on iPad awesome even this one looks awesome on tablets I like it so now I think we can have four projects here on desktop we can say we want four columns so if I select this post per page let’s say

Four and for the layout we want four columns update that let’s preview the changes I want I wanted them to be four so that if we scroll down here on tablet we have four arranged as a GED and if we switch to Let’s toggle this now we have four of them side by

Side right here on the editor it has not reflected because it’s a bit confused if I refresh the page it’ll probably reflect the changes in the columns scrolling downwards all the way to the bottom yeah so now it’s showing but now we need to reduce the size of the

Headings so while it’s still selected let’s go to style color typography and all that let’s go to typography reduce the size of these text or the titles let’s also reduce the line height update that let’s also switch to tablet and see what it looks like on tablet it looks

Good so the changes have taken effect not yet let’s preview the changes scrolling down now they look more presentable I think the this spacing is too small let’s increase it just slightly that’s the body text the exerpt top margin just to separate it from the title let’s preview the changes scrolling

Down all right I don’t know why it’s not reflecting but you know the drill so now we’ve made it responsive on tablets and typically when you make it responsive on tablets if you switch to mobile most of the changes are also reflected but now it seems no we really

Need to do a lot on this so let’s select the heading first of all and reduce the size drastically so go to color typography reduce that to maybe that size we we also want to select this container itself control I increase the padding at the top the top padding to push everything down

Slightly and I think now that looks good select this container that’s holding these boxes Advanced let’s break that let’s give it a padding of left 20 right 20 but top oh wait even uh the margin let’s give it a yeah let’s leave it right there on mobile

Phones and in fact let’s select this container and see if we can reduce this curve so style shape divider on the bottom height let’s reduce it all the way to maybe there 240 maybe let’s look at the tablet mode on tablet we can also reduce it and on desktop obviously it looks

Awesome update that let’s preview the changes here we go toggle that so here we go switching to maybe Samsung Galaxy 8 that’s how it looks perhaps we can push these boxes up a bit so switch to mobile phone select this container okay now I can’t see those up

And down arrows so I’ll just scroll my mouse wheel or hit the down arrow on the keyboard just like that update that let’s switch to the dev tools and now that looks good so now scrolling downwards let’s see how they look they’re not well spaced out on the

Top so let’s give them some nice bottom margin Advanced wait let’s select this go to layout gaps on the rows let’s give them 10 yeah so there we go update that because on desktop we’re View and tablet we’re viewing them as columns so that’s the Gap but on mobile

Phones so let’s remove this link so we can edit individual cells 10 on mobile phones tablet this takes effect all right so switching back to mobile let’s go down to this select this text align it to the center under content align Center select this content style Center select these

Buttons I think we can’t fit them together here without reducing their padding as you can see the direction is left to right but they’re still not feeding so let’s select each individual button right here and do the same thing we did let’s give it 30 now and here 30 15

15 do the same for this style break that 30 30 15 15 so now they’re side by side update that copy paste style select this right click copy select this right click paste style so now selecting that can put them in the center selecting the this can also put them in the

Center just like that we can also increase the margin on this container that’s holding them that’s holding the image Advanced margin top use the up arrow on your keyboard if you can’t see the up and down arrows in the cells there you go I think this looks good already

Except for this let’s put it in the center and the content same case applies this style Center let’s select this style Center and let’s also reduce the size typography maybe 35 so that means we’re also doing the same for this typography 35 that’s on mobile phone let’s reduce that line

Height so that’s uh 0.9 35 as well typography 35 and this is .9 so for this let’s also reduce the line height to .9 selecting this align to the center select this container align everything to the center select that container break the margin 10 so let’s say

30 I think everything here looks good but let’s reduce the size of the heading 35 line height .9 can also give this 35 line height point9 put this in the center style it’s already in the center these are already aligned properly the button here let’s reduce that top margin maybe give it

50 update that let let me just select this and say content let’s rename it to all projects whatever text change you make regardless of the screen you’re viewing it on takes effect on all screens because that’s text you’ve typed in an element but when it comes to changing

Colors and size that affects the specific screen size you’re editing it for so now let’s preview the changes from the top to the bottom here we are scrolling over all the way to the bottom yeah and you can reduce the size of this margin if you want if you feel

It’s too big it’s all about how creative you can get and it’s all about your specific needs so that’s how to make the landing page responsive now it’s time to make the footer responsive the same way we did with the header so let’s do that in the

Next lesson see you shortly so now it’s time to work on making the fotter responsive so let’s go ahead and do that now that we’ve finish working on the landing page itself let’s close that down and let’s also close this down let me right click this and open

Link in new tab once again so we can go to the landing page then let’s go to edit with Elementor my photo and here we go so you know the drill let’s go to responsive mode and switch to tablet close that so the first thing we want to do is

While this entire container is selected let’s go to uh padding and give it a padding no we want to have the top and bottom have that 50 and 60 but right and left 2020 so left 20 right 20 top and bottom 50 so that’s on tablet that’s how it

Looks on tablet but these are too close together remember we had given this container some padding on the left so if I select it and go to Advanced uh let’s break that it was 33 and top 25 we’ll keep the 25 on top but on the left let’s just increase

It slightly not too much up to that point so update that and let’s preview the changes uh control shift sh I and let’s switch to iPad iPad Air and that’s how it looks so if we switch to Samsung Galaxy 8 for example this is how it looks but

We can do better let’s put these two menus side by side so going back in here let’s switch to mobile phone and as you can see this container is occupied 100% it can occupy 50 and this one 50 so selecting this go to layout percentage 50% select this percentage

50% but now that’s still not fitting so I’ll reduce the size here and this other size now they’re stacked side by side let’s actually also reduce it slightly let’s also select this container holding the form Advanced let’s increase the top margin by maybe 30 update

That and in fact these two items are too close together and when you’re using a mobile phone you you might have big fing so you might not be able to touch the one you want comfortably so let me select that let’s go to style and see yeah so let’s increase the space between

The text like that so yeah let’s say 13 I’ll select this and right click copy select this right click paste Style let’s also select this text Advanced reduce the bottom margin the down arrow on the keyboard select this container increase the top margin once again update

That exactly so now even Andre the Giant can touch each individual link item here comfortably remember we’ve not done the same for tablet this is also a tablet on a tablet you use fingers so let’s do the same here I’ll select this right click paste style okay now we can’t just paste the

Style we did there so let’s go to space 15 now let’s say 13 same case applies to this 13 update that preview the changes and let’s go to iPad Air yeah so I think it looks awesome now so if we now click this to go to the

Homepage to view the entire page from Top scrolling all the way to the bottom there we go so now one thing I’ve noticed is that we don’t have some nice padding on this black header background and so the elements are almost touching the edge of the background so let’s do

Something about that before we conclude so we’re done done with the footer now so I’ll just exit click charity fund this is the name of your website uh let’s say my header and let’s switch to tablet selecting this container itself as you can see remember we got rid of

All the padding and margins so we need to add them once again so Advanced padding bottom padding maybe 20 no 15 mobile phone same case applies to mobile phone so now if we preview the changes go to the homepage control shift I and start scrolling at least now we have some nice spacing

There refresh that what’s this there’s a problem here so let me just sort that out very quickly so all right so now it’s loaded it was just loading slowly it’s loaded so now let me just toggle this and if I get rid of that when you’re on your desktop this is

The name you gave your website when you were creating the website inside of tacul while you were installing WordPress you gave your website a name and a slogan or a tagline and those were the names that show up here so this is the name you can always change it by going

To uh settings I think General and here are the details site title charity fund so right now we might want to call IT Crowd fund this or crowd fund this and maybe change this slogan to we’re all about the future and then scroll all the way to the bottom save the

Changes and now if I come and refresh this look at the name here now this is crowdfund this we’re all about the future and if we go back home the name here has also changed if you click this you’ll go directly to the homepage if you click this again you’ll go back to

The dashboard those are just by the ways now that’s how to make the fooder responsive and of course we can’t call it a class or a course without me giving you some assignment and your assignment is to make these other Pages responsive on the different devices tablet and mobile phones by following

The same principles we’ve used to make the landing page and the header and the fooder resp responsive I Believe by now you can make this page responsive very easy it doesn’t have too many elements you can also do the same for the projects page in fact we forgot to

Make this fade in that’s why when we load it it’s loading before the header find some motion effects for it can also do the same for the contact page make it responsive control shift I let’s see how it looks that’s how it looks on tablet and in

Fact on tablet it already looks good but on mobile phone pixel 7 in fact it also looks awesome just some minor tweaks like aligning this to the center and reducing the line height here maybe reducing the size of this font and this you know what to do so basically that’s

How to do that make the page responsive to different device sizes now in the next lesson we’ll be winding up and that’s where I’ll also be showing you how to have this dashboard link on your mobile phone menu let’s do that before we conclude I’ll see you shortly so now we

Just just about to finish but we need to make sure we have this this link to the dashboard somewhere in our mobile phones and tablets so going back inside the dashboard let’s go to appearance menu and now of course we already have my menu and this is our primary menu but

Of course we can have a secondary menu off canvas menu menu some of these options are available because of the Astra theme so now what we want to do is create a new menu that means we’ll have two menus create a new menu and we’ll call this the mobile

Menu and let’s call it the secondary menu create menu there we go so now let’s also select the pages we want all the items we want to have on that menu now we can’t see all the pages we need because we also need to have the homepage so I’ll click view all I’ll

Select home about contact project and donor dashboard add to make menu so of course projects comes after about then contact then Donna dashboard let’s expand that I want to change the label here to dashboard then let’s say save menu and now going inside elements kit header fer let’s close that

I’ll go to my header edit edit content we’ll be redirected to the front end where we have the menu and header editor so now let’s switch to tablet mode like that now when I select this menu element Navar element you can change this to mobile

Menu and now when you click it it has all the elements including dashboard update that same case applies to that so let me just close that click that it has that dashboard and the rest are right be behind this so if I preview this remember if we switch to

Desktop and select this menu here of course this menu is still using my menu the primary menu but this menu up here this nav element is using the mobile menu of course that makes sense so now if we go to the homepage then contr shift I and too

This if we click this menu and click dashboard it’s leading us to this page but we want it to lead us to a more presentable page like this so let’s go to our reference website if I click dashboard this taking us to this place where we can view how much money we’ve donated

Now let’s go to plugins add new we want to add some Elemental add-on created by WP for Elementor so give WP give WP donation widgets for Elementor so install that and let’s activate that awesome so so now create Pages add new I’ll just call it my donations let’s give it that Elementary

Full width let’s go in here and say full width no sidebar and remove all these publish then let’s add it with Elementor and here we are so let’s insert that page top page top updated let remember control I let’s remember to go to Advanced motion effects paid

In so let’s go ahead and add the donation history I want to type in history donation history drop it right there and these are the donations you’ve made I’ll select the container holding it Advanced margin top 100 update that margin top margin bottom 100 as well and while this is is selected let’s

Also make sure we show all these details or the details you want to show update and let’s preview that so it looks like we haven’t made any donations because now we’re live but now if you’ve made any donations this is where everything will show up also don’t forget to while this is selected

Uh go to layout align everything in the center and also align items in the center like that update that means everything will be put squarely in the center because as you can see now this message is smack in the middle of the page and there is a an

Email verification form that will appear here whenever you want to look at your donations you can just click donations and then see those s that that sensitive information you have to verify your the email you used to pay another thing so now that we have this page which

Is uh my is it my donations I think we called it my donations if we go back home now we’re done with this page if we exit go to Pages we created my do donations and this is the slug so just copy that if we go here and say edit with Elementor my

Header we want to select this button and go here to the end now it’s not dashboard it’s that URL there we go update let’s preview the changes if we click dashboard it will take us here uh let’s go back in here and select now let’s go back in here let’s go to appearance

Menus let’s add my donations add to menu let’s remove this save menu if we go here to the homepage control shift I let’s toggle that and here we go my donations there we go so another thing we want to do is if I reload this page we need to make this fade because

Remember it’s loading before this so too that edit with Elementor and I want to select this Advanced motion effects fade in update that preview now that’s there’s that gradual animated fade in so basically now that marks the end of this course of course I’m sure we’ve not exhausted every

Single thing we could have done W with a website but it’s up to you to keep exploring this was just an introduction to building websites with WordPress and of course if you enjoyed this course the best way for you to support me is to hit the like button because that tells the algorithm

That I’m doing something good and continues recommending this same course to other people who might be interested in web design like you and also this is just a tip of the iceberg I have many more WordPress and Elemental web design courses lined up for this year I want to

Be publishing several courses every month every month expect a few courses from me showing you how to build specific types of websites and if you want to be notified that I have published a brand new course just make sure you subscribe and you’ll be notified if you’ve always wanted to be a

Web designer you’ve always wanted to be able to accept jobs from clients who want a website built and deliver a nice website I want to show you step by step how to build different types of websites I’ll be showing you how to build all those types of websites week in week out

Throughout the month for the rest of this year so I plan on going big I’ve not been posting consistently before because I was focusing on growing my library of courses on skillshare as you might already know I’m a teacher on skillshare but now on skillshare I have

Several classes and I think it’s high time I started paying attention to YouTube I want to bring you that experience right here on YouTube for free you don’t have to pay for membership to learn how to build websites don’t forget to hit the Subscribe button hit the like button to

Tell the algorithm that this class was awesome and if you have any questions just hit me up in the comment section I’ll be very happy to help you out until next time have a nice one and all the best in your endeavors Peace
Learn how to create a fundraising website with the FREE WordPress plugins Elementor and GiveWP. 🔥 Learn WordPress SEO here: ➡️ https://skl.sh/3Ukaomy Download the images here ➡️ https://www.dropbox.com/scl/fi/8897l858o3pldzcqrttem/images-used.zip?rlkey=1npkr2oifkurbdlsorp5413og&dl= 1 Would you like to DM me? Join me on SLACK: https://join.slack.com/t/newworkspace-mnf5201/shared_invite/zt-2f2wtmu80-6Qqn7cxHZ89YP2Rm9wd2Dw ⭐️Check out other Elementor web design courses here!: https://www.skillshare .com/en /r/user/kenmbesa?gr_tch_ref=on ============================ Get a domain name and hosting ===== ======================== DreamHost ➡️ http://click.dreamhost.com/SHSw BlueHost ➡️ https://www. bluehost.com/wordpress /wordpress-hosting NameCheap ➡️ https://www.namecheap.com/hosting/shared/ BlueHost ➡️ https://wordpress.com/wordpress-hosting/ *This video is NOT sponsored. Some product links are affiliate links, which means if you use them, I will receive a small commission from the seller. • Learn how to create an online course platform with Elementor (View… https://www.youtube.com/watch?v=9ZKdTeOpgNQ&t=3536s =============== == ========== ⏰ CHAPTER ⏰ =========================== 0:00 Project Overview 6:57 Hosting buy and a domain name 18:46 Install WordPress 26:14 Install Elementor 33:02 Install Astra Theme 36:10 Elementor workspace overview 47:56 Hero area – image 56:12 Hero area – text 1:05:21 Hero area – buttons 1: 13:47 Header – Add Logo 1:20:33 Header – Add Navigation Bar 1:29:55 Transparent Sticky Header 1:36:29 Set Global Fonts 1:42:57 Icon Field Section 1:53:10 Image Sections – Part 1 2: 04:29 Image sections – Part 2 2:18:30 Grid for donations 2:38:10 Design of the grid for donations 2:56:04 The footer 3:03:46 Registration form for mailing lists 3:18 :02 Info page 3:33: 56 Contact page 3:52:09 Create donation projects 4:25:05 Project archive page 4:35:28 Set up payment gateway 4:53:32 Responsive header 5:11:42 Responsive pages 5:31:37 Responsive footer 5:42:27 Create a mobile menu 5:52:12 Next steps =========================== Where do I get my pictures from ➡️ https://www.freepik .com ========================== #kenkioqqo #elementortutorial #webdesign My mission is to help non-technical people learn how to design websites with Elementor and other free WordPress plugins created without programming.
#Elementor #Beginners #Create #fundraising #website #Elementor #GiveWP


https://i.ytimg.com/vi/UzP5soGuvD8/hqdefault.jpg