How to Make a Photography Website using WordPress & Elementor | STEP BY STEP Tutorial for Beginners

hey what's going on guys in this tutorial i'm gonna show you how to create an awesome multi-page photography website we will be creating this website step by step by using a free software called wordpress a free theme a free page builder and some free plugins you don't need to know a single line of coding because we will be creating our amazing website just by drag and drop and our website will be 100 responsive for mobile and tablet devices let's now have a look at what we're going to make in this tutorial i will show you how to create a logo for free and use it on the website then how to create a navigation menu and place the logo in between the menu items how to create a nice banner area with awesome background slideshow also here in these buttons you can link them to other page of the website or you can link them to your flickr or instagram i will show you how to create this beautiful image gallery where you can place any vertical or horizontal images you can place them by filterable categories you can even add videos inside of it [Music] i will show you how to create this awesome services section where you can put all your services also if you want you can include your services prices here and you can put contact buttons so customers can contact with you immediately then how to integrate instagram so people can see your instagram images from inside of your website also they can follow you directly from here we will also create our about page where you can talk about yourself or about your team [Music] you can embed videos from youtube or vimeo or dailymotion then also you can add your team members within this page then we will create a gallery page where people can search for your photos from here then we will create blog page where you can display all your blog posts and i will show you how to create a blog post categories featured images also people can comment on your blog post [Music] and lastly i will show you how to create a contact page how to create a contact form how to add google maps and can you believe we will be doing all of this just by drag and drop now let me show you a little bit the power of elementor page builder right now we are inside eliminator page builder for example if you now want to change any text from inside elementor page builder just select this text and here instead of jim fahd i'm typing john doe so it's immediately changed to john doe photography also let's say if you want to make this font little bigger or smaller then you just need to go under this style tab click here on typography then you can increase the font size just by dragging this bar to the right side like this also you can reduce the font size just by dragging this bar to the left like this also if you want to change any link of this button you need to just click over this button then from left here you can link to your any other page of this website or even if you want you can link it to flickr just paste the flickr profile link here it's instantly linked to your flickr then here if you want to change this mountain shape from bottom then you just need to go under style tab then scroll down and here you can see shape divider from here select bottom and here instead of mounting if you select none now you see there is no shape divider even you can add another shape divider like here drops you can increase its height like this you can decrease it like this you can change its color from here so you can pick any color from this color picker here's as simple as it is let me just show you a few things how easy it is to change anything using elementor page builder so if we scroll down and let's go to this section in this services area if you want to change anything just click over this text then you can change any text inside of it from this left text editor so for example if you want to add your pricing inside this list you can add that just simply typing inside here so here i'm typing 500 per hour and then the portrait i'm selecting it and from left here i'm adding 300 per hour and then on wedding films i'm editing the text here to 700 dollar per hour also let's say if you want to change the background color of this section just click here on these six dots go under its style tab from here just click over this image now select another image and click on insert media you see it's instantly changed now another interesting thing is you can optimize it for mobile inside of this builder so from this builder just click here on this responsive mode then let's say only on mobile device if you want to reduce the font size of this text just click over this text click on the typography and here you see a little tiny mobile icon so whatever value you will put here that is only for mobile device so for mobile device here instead of 60 pixel i'm putting 40 pixel then let's say if you want to make these two buttons centered align on mobile device just click over this button make the alignment to centered also select this button make alignment to centered and then just click on this green update button your website is immediately live we will be doing all of this step by step and it would be a three hour long tutorial so grab some coffee grab some water we will make this amazing website together so first let me introduce myself the instructor my name is jim fahad i'm a professional web developer i have been developing websites for more than 10 years now i started my career as a freelance web developer on a website called odesk right now it's upwork.com whatever i'm not regular on that website because i get a lot of website orders from my personal website that's jim for the digital.com if you want you can also contact me through my website but you don't have to do that because by following this tutorial you can make your own website by yourself i'm telling all this beforehand only to make sure you that you're learning from a real web developer now let's get started okay so before we get started why are we using wordpress well because wordpress is the world's most popular website builder on the market so you may see ads for wix or squarespace or other website builders but unlike those wordpress is free and it powers more than 30 percent of all websites on the entire internet which is a lot of freaking websites so needless to say is the best way to make a website now in this tutorial i will be showing you how to get a domain name which is about five dollars but i will also show you how you can get your domain name for free for the first year and i will also be showing you how to get web hosting which is about two to seven dollars that's all there's no other hidden cost so what is web hosting well web hosting is just renting space on a server that's connected to the internet so that you can fill the server with all of your pictures and videos and text and other media to build your website and then publish it for the world to see web hosting is a must have if you want to own your own website there is no other way around it now there are such things as free websites but there are a lot of downsides of that you will not own your own domain name it would be something like your domain name.wix.com or your domainname.squarespace.com or whoever is hosting this free website for you you cannot upload plugins to help with the functionality of your website and you are also limited to a very small number of themes for the customization of your website and you can't upload new ones you also cannot monetize your website with ads in order to make money with it and your website could be deleted at any point if the hosting provider feels like you have violated their terms of service so that's why i recommend getting on web hosting okay so let's get started and you will find time stamp in the description so you can jump any specific part you need alright so without further ado let's get started the first thing we're gonna do is to get a domain name and web hosting and i will provide you my special link so you will get a discount around 50 percent then we will install wordpress then we will install a free theme and a free page builder called you know elementor then we will start creating our amazing website so let's now first get our domain name and web hosting if you have your domain name and web hosting already you can skip this part if not then follow along so first just click on the very first link in the description below this video or you can go to jimfahrerdigital.com forward slash hosting and this will take you to a special discounted bluehost page so why bluehost in my opinion bluehost is the best web hosting provider i'm a web developer i tried so many other web hosting companies i don't want to mention their name but i personally ended up using bluehost hundreds of my clients using bluehost and they never complain about using it if you see my bluehost account i have hosted tons of websites here and i never get a downtime their customer support is really cooperative in case you need any help and their price is really affordable that's why i always recommend bluehost so now click on get started here you can see their different plans the main difference between them with the basic plan you can host only one domain you can take their plus or choice plus plan if you want to host unlimited domains also you can take their pro plan if you have millions of visitors on your website already i recommend starting with the basic plan then in future you can upgrade that anytime now let's select the basic plan now we will select our domain name if you already have a domain name that you want to use you can just go ahead here on the right but for now i'm gonna get a new one now here let's try for something like apple.com and click next it says the domain apple.com cannot be used on bluehost please try a different domain name it should be because we cannot take that because we all know that's apple's official website so we will be typing our own domain name here and also if you click on the right side you can see dot site.net.info websites i always recommend to take dot com websites because it looks more professional and legit so i'm gonna type here let's say our elementor dot com as we are going to make our website through elementor page builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information i'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months up front but it comes out to only around 3.95 cents a month so this is 50 off that's gonna be your biggest discount now what i recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and i always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial i'm deselecting this one let's click on turn it off because i don't wanna hide myself at this moment i want to be transparent so if anyone knows i own this website i have no problem you can keep this one checked if you want not a big deal i'm also deselecting all other options they are offering we actually don't need that they are just upsetting their stuff all right now you can see the price is now only 71.40 cents for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free youtube tutorials what i'm doing so everybody wins i really appreciate it and here is the payment information i'm putting my credit card number here expiration date and cvv code then select this one here so that you are agreed to their terms and policy now click on submit it says your purchase was a success also you can see here is your receipt they will also send it to your email i'm also waiting to get that email meantime we can create our bluehost account so let's click on this create account button here here's the domain name that's automatically selected now let's create our password create a really strong password combining capital letters numbers special characters you know how to make a strong password and then retype the password in the second field now check this once again that you have agreed with their terms and policy now click on create account i already have received an email to confirm my purchase so i'm opening my email you will also get an email like this then click here verify your email it's very important so it's not verified awesome now let's login into our bluehost account with the domain name and password we have just created if you're logging in for the first time you may see a pop-up like this like it says let's create a website bluehost actually want to help you to make the website just click at the very bottom there i'm not creating a website because i will be showing you everything step by step and skip all of these popups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then log in again now from left menu bar click on my sites then you can click here create site or here create a wordpress site i'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on add site then you can see here two options one is limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the elementor page builder that's why we will be selecting this option the limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so i'm putting a site name jim production and site tagline it deserves to be seen now let's click on advanced here you need to put your email address your username and password for your wordpress so i'm putting my email address here wordpress admin username i want to name it jim fahad and here let's put a password do you want to see my password i'm clicking here on show so it's abc123 i will of course show you how you can change it later so for now click on next close this browser popup now it says where we want to install our wordpress so make sure you keep this directory blank and here is your domain name selected and bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says wordpress installed successfully now you can copy this informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually i intentionally gave this an easy password that's abc123 never ever use this kind of easy password i'm showing you shortly how you can change that password we can now sign into wordpress by clicking here but this is not the usual way because all the time you cannot log in this way i mean from this page this button right so you should get used to signing into wordpress all the time is by going up to a new window and typing in your domain name forward slash wp dash admin so i'm typing here my domain name our elementor dot com forward slash wp admin and click enter so we can see our wordpress login page here that means wordpress has installed successfully [Music] sometimes it takes 30 minutes to 24 hours to process this installation and this process is called propagation it basically has to let everyone know that hey this new domain name now exists and registered but we can see our website instantly they actually say it might take 30 minutes to 24 hours but i've been using bluehost for more than 10 years i always get domain live immediately actually that's another reason why i love bluehost so now you know that your domain name is working so go ahead and i'm just gonna type in my name which was the user that i created and i'm gonna type that easy password abc123 you can click this i icon to show it now let's click on login all so we are now inside wordpress admin panel or wordpress dashboard so first let me familiarize you with the wordpress admin panel or wordpress dashboard here on the left you can see all the links or menu items of the wordpress admin panel like here you can see the posts from here you can post all the blog posts from media you can upload all your images from the pages you can create all the new pages from here you can control all the comments so i will describe all of these step by step but before starting anything let's now first close all this notification or pop-ups to look our wordpress dashboard more cleaner so let's close this pop-up by clicking on this x icon let's now minimize this one this one this one also let's minimize all of this in this way also this one let's close the top jetpack pop-up from here you can also control the elements you want to see here at the dashboard panel you can just simply click on this screen options and from here i just wanna disable all of them so it would look more cleaner like this all right and now firstly i want to change that easy password that we have given at the beginning of this tutorial so to change that password from the left let's hover over on users and from that let's go inside profile basically it's your profile page you can change the admin color scheme that way you want like it from here you can select the light you see the theme scheme is now light you can select modern or you can select blue but i want to keep it as the default one and then if you scroll down a bit from here you can change your display name publicly as this is the name that will be show publicly as the author of the website so basically if we have a look on a blog post so here you see under the title of the blog post it says by jim fahad so basically it's the name of the author who wrote this blog post and this name is coming from this place the display name publicly as filled you can change your email address from here you can change your profile picture from here let's now have a look how to change your password so under account management just click here on new password click on this button says new password it says set new password click there you can use the password that is created by wordpress also you can type a password by yourself so i'm doing that click on the hide button so you can't see my password here i'm typing my new password always try to create a very strong password but for now i'm happy with this password though it says weak so i'm clicking here confirm use of weak password and let's now scroll down and click on this button says update profile now i want to clean up our website a bit more so i want to delete all the unnecessary plugins that came with by wordpress default so to delete all the plugins from left here you can see plugins hover over on it and click on install the plugins so i want to delete all of these plugins and i want to do it all together you can select each of the plugin by clicking one by one or you can do that from the top if you click here all the plugins will be selected and at the top click here on bulk action first of all if you want to delete a plugin you need to deactivate that first so i'm clicking here deactivate click on apply then select all the plugins all together and click on bulk action click on delete now click on apply the browser pop-up says i'm sure or not yes i'm sure so click on ok so are all unnecessary plugins has deleted let's now have a look inside the pages so from the pages tab if you hover over on it you can see all pages let's go there you see we have not created these pages these also came with wordpress default but i don't want any of them so i'm selecting all together from bulk action i'm clicking on move to trash now apply by the way if you accidentally delete a page and if you want that page back then you can just go inside trash and for instance if you want to get back this sample page from here you can just click on the restore then it would be restored but if you are sure that you don't want any of these pages then you can click here on delete permanently or you can select all the pages together again from bulk action click on delete permanently and apply so those pages are permanently gone cool let's now have a look how to create a new page so to create a new page from top here you can see add new just click there here i'm giving the page name home and from the top right click on publish once again click on publish now close this by the way sometimes you may not see the left bar on the dashboard when you are creating a page so to enable or disable the left bar you can just go to the right top corner click on these three dots then you can turn on the full screen mode from here also you can turn off the full screen mode from here all right let's now create another page so from the left under pages click here on add new and this time i want to create our blog page now click on publish once again click on publish i have just created the pages we will design the pages later so for now let's have a look inside the posts tab so from the posts let's click on all posts we have not created any blog post but here we can see a blog post says hello world it actually came with wordpress default so if you don't want that just click here on the trash to delete it but before that i want to show you something like if you want to preview the blog post you can just click on the view button or view link i'm opening it from a new tab so here you can see this is a single blog post page and the blog title says hello world also here is some dummy text like welcome to wordpress and all of the default stuff like this but what i want to see here is the page url here you can see the page url is the domain name that's our elementor dot com then a forward slash then a question mark then p equal one actually this type of page url is hard to read and also it's bad for search engine optimization and that's why i want to change the permalink of our website and to change our permalink from left hoover on settings and go inside here permalinks so by default the permalink is set to the plane but i want to set it to post name so if you select the permalink as plane then the url would be like this your website dot com forward slash this type of buzzer number and if you set the permalink to the post name then the url would look like your website name dot com the page name or the post name that's why we have selected here the post name now scroll down and click on save changes if we now go to the hello world blog post and refresh the page you see now our page url is our domain name dot com forward slash hello world so not only on blog post our any page url would be like this like if we create an about us page then that page url would be like our elementor dot com forward slash about dash world so that would be more human readable and that's good for search engine optimization and now i want to show you another thing like if we now go to our main domain url so that's our dot elementor.com hit enter on our main domain name you can also see the hello world blog post because in wordpress the default home page is the blog post page but i don't want that because i want to create a dedicated page as our home page and i want to separate the blog page as our blog page so to do that let's go back to our wordpress dashboard and this time from settings let's go inside reading and here you can see your home page displays i want to set it to a static page and let's set the home page to home and post page to blog also here you see for each post in a feed include it says full text or summary so on the block paste i want to display the summary so i'm selecting summary let's now click on save changes if we now refresh our element.com main domain name let's refresh it now we cannot see the blog post so at least we can understand this is a dedicated home page that we will create later now first concentrate on the feel and look of this website so if you want to change the look and feel of your website then you can just go to your workpiece dashboard and we need to change the theme of our website and to change our theme from lift hover over on appearance and from there click on themes so here you can see that 2021 theme is activated right now and that's why our website is looking like it if we now select another theme for example if we select the 2019 theme let's now activate it by clicking on this activate button now here you can see it says active 2019 theme so if we now go back to our website and refresh the page it's nothing crazy but at least you understand the look and feel of our website has been changed so basically i don't want to use this theme either because i want to use another theme that i like most so to add that theme click here on this big button says add new theme so here you will find basically all the free wordpress themes so from here i want to search a theme name that says oceanwp so i'm typing here oceanwp this one is the theme i want to use so let's now click here on the install button and now click on the activate all right so we can see here the oceanwp theme is activated and also if you want you can delete other themes because these will take a lot of spaces on your hosting and actually we don't need the extra themes you can just keep one theme as a backup but let's delete other three themes so from here just click on the theme details and let's delete this one click on ok also let's delete other two themes so click on delete okay also let's delete this theme click on delete and ok and after installing the theme at the pop-up it says this theme recommends the following plugin says ocean extra but actually i don't need the ocean extra plugins so i'm clicking here dismiss this notice and now i want to install our page builder plugin that says elementor page builder so install a new plugin from the left let's go to plugins and from there click on add new by the way if you wonder what is a wordpress plugin wordpress plugin is something like extra add-on or extra app like things that extends the functionality of your website like let's say if you want to use a contact form on your website there is a dedicated plugin for that if you want to do some seo work for your website then there is a dedicated plugin for that work so actually there are thousands of plugins and each plugin has their own purpose like we will be using now our page builder plugin because we want to create our website pages using page builder now to get our elementor page builder you can go to gmfahaddigital.com i will put this pages link in the description because not only the download links i will also put some necessary codes in this web page so from this page under important links here you will find the download elementor free version link just click on this link that will take you to the download page of elementor page builder and you see here the elementor page builder started downloading here already all right now let's go back to our wordpress dashboard and at the top here you can see add plugins and here is a button says upload plugins click there let's now click here on this choose file button and select the elementor zip file that you have just downloaded now click here on open and click on install now it says plugin installed successfully now click here on activate plugin all right we have successfully installed elementor page builder now let's install another plugin that we will be needing to create our website so from plugin let's now click here on add new again and this time let's search the plugin name from here on the right search box so here i'm searching for essential add-ons so this is the plugin it says essential add-ons for elementor let's now click here on install now and click on activate now let's set up the essential add-on plugins so just select the basic by default it's basic actually you can keep all the default settings so just click on next and from under elements tab if you scroll down you can see all the extra elements that is provided by these essential add-ons from there just go under form installer elements and select the wp forms because later we will be using the wp forms that's why i'm selecting the wp forms from here now let's go to next we don't need the template so let's go to next and we don't need any other plugin for our website so click on next and click on finish all right let's close the pop-up all right we are now almost ready to go here's the fun part begin now we will be creating our awesome pages using elementor page builder and we will be creating everything just by drag and drop so let's now start creating our website from the home page so from left hover over on pages and go to all pages now we want to design our home page so if we hover over on home and then you can see here the edit link click on edit and before editing this page using elementor page builder from the right side here you can see under page attributes it says template by default it's set to default template but make sure the template is set to elementor full width it's very important and from the top click on update now let's click on this edit with elementor button right now we are inside elementor page builder we will be creating our whole website using this awesome page builder it's super easy to use you just need to drag and drop so basically at the top here you can see this is the header of our website and at the bottom this black version this is the footer of our website and in between our header and footer we will be creating our beautiful home page using elementor page builder so just imagine the right person as the canvas of your website and you can use all the tools from the left like here you can see all the widgets here is a widget says heading widget if you drag this heading widget from left to the right side like this here you can see the text widget then you can change the text you can change the color change the spacing change the font family everything from here on the left side again if you click on this nine squares or this rubik's cube like icon then here you will find all the available elements or widgets so here like you already have seen the heading widget here you will also find image widget video widget divider google maps icons there are tons of available widgets some of them are pro if you want the pro widgets as well then you need to purchase the elementor pro plugin i will also put the elementor pro purchase link in the description but in this tutorial we will be using the eliminator free version so that's why i'm minimizing the pro widgets from here also you can see other widgets like image box basic gallery counter you can use all of them also if you scroll down a bit here you can see under essential add-ons there are some extra elements or widgets basically these are coming from the plugin that we have installed called essential add-ons so these call to action or advanced accordion countdown creative buttons all these elements are coming from the essential add-ons plugin all right so for now let's just delete the text by clicking on this x so before starting creating the website i want to make you understand the core or the fundamental of the elementor page builder you only need to understand three basic things if you understand these three basic things you can literally create anything using elementor page builder so the three things are the section column and elements so the most outer thing is the section whenever you want to create a banner or any section then first you need to take a section and within a section you can take multiple columns you can take one column two column or as many as columns you want then inside each column there will have multiple elements or widgets like here you see all these are widgets the heading widgets or image text editor button you can use any of these widgets so you understand if you want to create anything that could be a banner then you start from creating a section so let's now go to our elementor page builder and in order to create a section you need to click on this plus icon and from here you can select any structure you can select the single column structure to column three column or any of this structure so for our banner section i want to select this single column structure by the way at the top you can see the text home is actually coming from the theme we will remove that later don't worry about it all right so now i want to give it a height so from here you can see height let's set it to a minimum height and you can give the height in pixel vw or vh i want to give the height in vh vh means viewport height and i want to make that height to 100 viewport height you see it now covers the 100 height of the viewport now if you want to add any background color or background image with this section then you need to go under the style tab let's now go under style tab and from here let's say if you want to add a background color then you can click here on the background type first you can see the option classic click there this is the color picker if you click on this color picker you can select any color like from here i'm selecting the red color now you can see the whole background color is red if you drag this to the black now the whole background color of this section is black also instead of a solid color you can use a background image so click outside here you can see the image choosing option so click here on choose image now from here click on upload files and then click on select files let's now go inside banner slider and let's select this image click on open now click on insert media here now we can see the background image but the position is not correct we can set the position from left here you can see position let's set it to sender sender and attachment let's set it to scroll also i don't want this background image to be repeated so i set the repeat to no repeat and also i want to adjust the whole image inside the section so let's set the size to cover also if you want to add an oval effect over the image you can do that from left if you scroll down a bit here you can see the background overlay tab click there now click on this pencil icon and from this color picker you can set the color you want as the overlay color so i'm selecting black and then you can control the opacity from here if you drag this bar to the right the darken of the opacity will be increased if you drag it to the left the opacity will be decreased so for now i want to keep it as 0.1 all right now inside our section i want to add some widgets or elements just remember whenever you want to do anything with any section you need to click on these six dots and whatever you can see within this blue line that would be the section and as now i want to add an element within this section so from here you can click on this plus icon or again you can just go to here and click on this rubik's cube icon from here you can browse all the elements or widgets you want to use on the right side so first of all i want to drag this heading widget inside this section you can change the text from here or from here within this left field i want to say it jim fahad photography then you can adjust the alignment from here let's make it centered aligned now if you want to do some styling with this heading then you need to go under this style tab then you can change the text color from here from this color picker so i want to make this text color pure white now click outside then if you want to customize the typography then from here click on this pencil icon first i want to change the font family you can use any google fonts here so here i'm searching for poppins font now click on pop-ins you see immediately the font is now poppin's font then you can increase the font size just by dragging this bar to the right you see it's now really big also you can decrease that by dragging it to the left i want to set the font size to 60 pixel also you can adjust the font weight from here like you can make it 700 or if you want to make it lighter you can select 200 but i want to keep it really bold so i'm setting the weight to 800 then if you want you can adjust the transform from here you can make it uppercase or lowercase i want to keep it capitalized all right now underneath this heading widget i want to use another heading widget so if you want to create another heading you can just simply click on this rubik's cube icon you can drag another heading widget underneath this heading or you can just right click here on this blue pencil icon and click on duplicate you see the heading is instantly duplicated underneath so now instead of gymforth photography on the second heading i want it to say we capture your memory and i want to make it size small so let's go under the style tab click on the typography and let's make its size to 20 pixel also i want to reduce the weight so i'm setting it to 600 now it looks great now underneath our first heading and second heading i want to add a divider so let's now click on the rubik's cube icon here you can see the divider widget let's just drag it underneath our second heading here i think you cannot see the divider here because our background is kind of dark and also the divider color is black so first of all i want to change the divider color just go under its style tab open the color picker and let's make the color a bit off-white like this so basically from the color picker you can drag the color picker anywhere of it or let's say if you want to use a color code then you can just manually type the color code here like here i'm typing a hex code that's hash d8 d8 d8 that's kind of off-white color all right i believe you can see it now now go under content tab and from here you can see the style is selected to solid and just have a look there are tons of different styles so let's say if you want you can select the double style from here so that's the double line also if you select the kali you see the curly shape of the divider or you can select the squared or the wavy so there are tons of option but in this place i want to use this jig jag style now let's make its width to 20 and let's make its alignment to centered then again go under style tab make the weight to 1.5 and i also don't want this huge gap or huge space at the top and bottom so to reduce it you can just drag this bar to the very left i want to set it to two all right now underneath this divider i want to use two buttons so let's now click on this rubik's cube icon and first of all i want to take an inner section here so here you can see the inner section widget just drag this underneath this divider here and inside the left column of this inner widget i mean inner section just click on this plus icon and drag the button widget here so you can do all the settings of the button widget from left side like here you can see the default text says click here but i want it to say c gallery then you can put the url or link of the button here within this field we will be creating our gallery page and then we will paste our gallery pages link here but let's say if you are a photographer and if you have instagram or flickr then you can put your flickr link within this field so whenever anyone click on the c gallery button that will take them to your flickr page all right for this button let's make the alignment to right and let's now do some styling with this button so let's go under style tab first i wanna change the typography so i wanna set it to poppins font and then this is the text color option by default it's white so i'm keeping the text color to white and here you can see color this is the background color of this button so i want to make it a black color you can just drag this to the black color here or you can put the color code here hash 2 2 2 2 2 2. but you know what i want to make this background color transparent so if you want to make anything transparent just go to the second bar here and drag this bar to the very left here you can see now our button is transparent now i want to add a border so from here border type to solid border with one pixel border color that would be white then let's add some border radius so here i'm adding 25 pixel of border radius now you can see the corners of the buttons are rounded because we have added border radius 25 pixel also i want to add some padding with these buttons so first unlink the padding by clicking here so now you can give the different values to the top right left and bottom so on the top i wanna add 12 pixel of padding also on the bottom i wanna add 12 pixel and on the right and left i wanna use 35 pixels of padding cool it's now looking great by the way here i also wanna add some hoover effect so when we put our cursor over this button i want to change the button color and also want to add some animation so to do that from left here you can see normal now you need to click on hover so on hover i also want to use the text color white but i want to change the color to that black color that's hash two two two two two two i'm copying the color code and also i want to set the border color to that black color and from here you see the hoover animation so if we select the hover animation to grow and if we now hover over on our button you see is the grow animation also you can see our background is now black but i don't like this grow animation a lot so i want to change it to shrink if we now hover over on our button you can see the shrink effect it looks really great but here instead of black if we use white color that would look more awesome so here border color on hover let's keep it white and then the color let's make it also white and the text color let's make it black that's hash two two two two two two if we now hover over on it you can see it reverse so to me it looks much better alright now i want to create another button on this right column but you know as you're using elementor page builder so your life is super easy now you don't need to create another button from scratch you can just right click on this blue pencil icon click on copy then if you put your mouse cursor within this right column then right click here and click on paste boom here you can see other button is instantly created but for this button i want to make it aligned on the left so let's just click on its blue icon so basically whenever you click on any blue icon or edit icon then you can specifically design that specific button so click on this blue button and from left layers adjust the alignment to left and here instead of c gallery i wanted to say contact us later i will be linking this to our contact page all right now i want to show you another interesting thing like here underneath of our banner i mean at the bottom of our banner i want to add a mountain shape so to do that as we will be adding the shape on our section level that's why we need to select the section and you know to select the section we need to click on the six dots and now go under style tab of this section then if you scroll down a bit here you will find the shape divider option open it and like i said i want to add a shape divider at the bottom so i'm selecting bottom and type if you want you can add the drop shape so at the bottom it's looking like it or if you want you can add the curve shape or there are plenty of options like whips pattern you can increase the width or you can increase the height from here okay let's keep the height and width to default and here i want to use the mountain shape to me it looks really really cool and now let me show you another thing right now we already have used a background image here but instead of this image if you want to use a video then from under this style tab of the section just click on the background and you remember you have selected the classic option to add this background image but if you want to add any gradient then you can select this gradient option or if you want to add any video background then you can click on this video icon and you can paste here the youtube video link but here within this background i want to add a slideshow for that reason i'm selecting the slideshow option and here i want to add three images so click here on this plus icon yep i want to use this image but also i want to add another two images so click here on upload files click on select files we already have uploaded this image so now let's upload these two so i'm selecting these two together click on open okay two images uploaded successfully but before adding these to our gallery i want to order them like i want to put this one first then this one and then this one so if you want to maintain the order first let's deselect all of the images as i want this image at the first of the slide so i'm selecting this image first then the second image and here's the third image now click on create a new gallery so basically you can drag the images to reorder your gallery let's say if you want this image before this you can just drag it to the left here but i want this one at second position and then click here on insert gallery now you can see a nice show at the background and here we have got our three background images and here you have some different options like if you want the infinite loop you can turn on from here and here is the duration in ms so by default it's set to 5000 1000 equal one second so after each five second the image will be replaced with other image and then from here you can change the transition by default its fade and personally i also like the fade effect and then here is the transition duration is by default 500 that means half second so from here you can set the background size to cover and background position i'm setting it to center center and let me show you another cool thing i wanna set the ken burns effect from here so i'm just turning on the ken burns effect you see now it's zooming slowly and it transition looks really really cool now so if you want you can turn on the cane burn effect also if you want you can set the direction to in or out but personally i like the in effect so i'm setting it to in when you are happy with your banner design just click here on this green update button to save your work remember it's very important because if you forgot to click on this update button your all hard work will be gone so make sure you always click on this green update button to save your work all right let's now create our next section but before creating our next section i want to set some global settings like here you have seen when we designed this header i mean this heading we have set the color to white or we have given it a fun family that's popping font so whenever next we will be creating any heading or any color we need to put the color or font weight manually each time but we can do some global color or global font at the beginning so we don't need to do the same thing every time so if we want to do the global settings then from top click on this hamburger icon and then click on site settings so from here i wanna set the global fonts so let's click on global fonts and i wanna set the primary secondary text and extend all the fonts to pop in fonts so the primary fonts let's set it to poppins font and then the secondary font also let's set it to poppins font then the third one text let's set its font to poppins font and then the xn font also let's set it to poppins font and then finally click here on this update button to save it now let's go back also let's add some global colors here so click here on global colors like you see we have used some black color that says i mean the color code is hash222 so if you want to set that color as a global color you can just click here add color and you can give it a name so i'm naming it custom black and then you can set the color from this color picker so here i'm putting the color code that has two two two two two two all right also i want to add another color that would be a white color but a sweet white color i can name it as baby white so let's now click here on add color and let's name the color baby white i'm not sure what it actually says but i'm naming it as baby white and let's set the color code from this color picker that's hash f2 f a f f now click outside and click here on this update button let me show you a quick example why we have created these global colors like here you can see the baby white color or custom black color so let's say we now want to change the color of this mountain shape so to do that okay first of all let's close the site settings from here so just close it by clicking on this x and this time again click on these six dots to select this section and just go under style tab and click on shape divider now let's go under bottom and you remember we set it to mountain shape and this time you can set the color from this color picker also here you can see the global icon so if you click on that you can see here all the global colors and you see we have just set our custom black color and baby white color and i want to make the mountain colors to baby white color so i'm selecting the baby white you see it's now the baby white color alright so when you are happy with it just click on this green update button to save your work by the way if you want to use all the images i'm using on this tutorial then you can just go to jimfahredthedigital.com i will put this pages link in the description and from that page under the important links if you click here on download the images plus templates i use in this tutorial you will get all the images alright let's now go back inside elementor page builder let's now create our next section in this section we will be creating a filterable gallery section so we will have different filters or categories like if you're a photographer you may have different photography categories like wedding photography or portrait photography or natural photography like this also you may have different type of photos like horizontal photos or vertical photos even you may have videos so i will show you how you can display all of your pictures into a single place alright so let's first click on this plus icon take a single column structure let's give it a background color so go under style tab and from here background type click on the classic icon and select the color picker this time instead of color picker layers click on this default global icon and from that let's select the baby white color and i want to add some spacing at the bottom and top of this section so whenever you want to add any spacing at the top bottom or left or right anywhere you need to go under the advanced tab then you can add the spacing using the margin and padding i want to use the spacing using the padding so first i'm unbinding the padding at the top i'm adding 60 pixel and bottom i'm adding 60 pixels of padding then first i want to add a heading widget here so let's click on the rubik's cube icon and drag a heading widget here and i wanted to say my gallery let's make the g in cap let's make the alignment to centered and do some styling set the text color to the custom black color and you remember we have said some global typography and that's why you see here the font family is popping spawn right now let's make the font size to 42 pixel and font weight to 700. all right now we will be adding the filterable gallery underneath this heading so click on this rubik's cube icon and here you can search for any widget name so here i'm searching for filterable gallery here it is and you can see a little tiny icon at the top right corner of this widget so here you can see a little tiny ea that means this widget is coming from essential add-on plug-in you remember we have installed a plugin says essential add-ons so make sure you have installed that plugin perfectly otherwise you won't get this widget all right now let's drag this filterable gallery underneath this heading here so here you can see now there are six images by default and also you can filter them by gallery like here you can see the default gallery item if you click there actually right now they are all under gallery item category that's why you can see them all but i will show you shortly how to create more categories and how to put different images into different categories or filters also if you hover over on it you can see some titles some paragraph and some buttons all right let's now customize it in our way so first of all here items to show i wanna make it to 12 even if you want to display here more images you can put the number here 12 means you can put here 12 images if you put here more than 12 that will not shown here now i want to add the images or videos so to add that let's minimize the settings and first expand the filterable controls so here you can see a default filterable control that name is gallery item let's rename it because i wanna name it let's say nature here you can see the new name is created natural let's now add some more filters so i'm clicking here on add item let's make wedding and click on add item let's make it portrayed alright now we have our three filters natural wedding and portrait let's now add some photos under these categories or filters so let's click here on gallery items here you can see one two three four five six and that's why here you can see the default six images and their elements but first i wanna delete all of them so i'm deleting one by one let's just keep one now expand the gallery item name so first of all you need to put the control name this is the exact name what you have put inside the filterable controls so i wanna put it inside the natural filter so here you may remember we have given it the name to nature so i'm just copying the name to nature and let's go inside gallery items expand the gallery item name so control name would be nature and if you hover over on it here have a look you can see a title a paragraph and two buttons and here i just want a single title not this paragraph and not these buttons so here first instead of gallery item name i want to put a title that's related with the image so here i'm putting the item name to see and then let's scroll down here i don't want this paragraph so i'm removing it then let's scroll down like i said i don't want the light box button or the gallery link button so i'm disabling these two and let's now add our gallery image so click here on choose image now go to upload files click on select files now from inside the gallery items i want to select the first image and click on open now let's click on insert media here we go so if we hover over on it we can see the see which text but we need to make them centered aligned i will be doing all these stylings but before that i want to add all the items so let's now add more items so i'm just minimizing the see which one and let's just copy this one so to copy or duplicate it just click on this duplicate icon now expand the second one i wanna keep it under portrait control name so here i'm typing portrait and item name main portrait now let's scroll down and here i wanna add here another image so click on image go to upload files click on select files let's add all these images together because we will be needing all of these images very soon we already have uploaded this one so i'm just deselecting it now click on open all the images are uploaded for the second item let's select this portrait image and click on insert media here we go now in the same way i'm adding more images into this gallery and only to not make you bore i'm just first forwarding the process all right here i have added nine different images but here i have got a problem like i have uploaded different sizes images but here i have got all them in square shape but i don't want that so i want to make this gallery as a masonry gallery so to do it just scroll up a bit inside the settings here you see the grid style so by default it's grid i'm setting it to masonry now you see all the images are with their original ratio and it's now looking really cool and like i said you can also add videos with it so for example let's if you want to add and video with the first item so just minimize the settings and go inside the gallery items so expand the first one and here you need to turn on the video gallery and here you just need to paste the video url so i'm pasting here a youtube url so you can just go to youtube let's say i want to insert this video so you can just copy the page url and then go inside elementor page builder and paste the video link inside this video link field so if you now click on the video icon you can see the video in the pop-up that's really great to make it look more synchronized let's add another video element so i want to add that with this item so if we click on this image there will be a video pop-up so i'm expanding the beach time one and turning on the video gallery again i'm pasting the video here you can put different videos into different items only for demonstrating purpose i'm pasting only one video link everywhere now i want to do another settings like if you have a look if we click on the video icon we can see the video on the pop-up but let's now have a look if we click on any of the images nothing happens because there were a button to display these images on a pop-up but we have disabled that button so for that reason i'm just scrolling up let's expand the settings from here you can see here link to by default it was buttons but i'm setting it to media let's now have a look if we click on this image it pop-ups with a nice light box and you can scroll them through this navigator like this cool and let's close it by clicking on this x it looks really really nice all right let's now do some styling with it so now just go under the style tab of this filterable gallery first if we have a look we have all white background on this filterable gallery so i want to make that color to the baby white color so from here background color click on this global icon and let's set it to baby white color now let's go inside the control style tab these are basically the control styles all natural wedding portrait all these are controls so we are now doing style for this contrary styles i just wanna make the active control corner rounded so to do it from here border radius i'm adding here 20 pixel of border radius actually i have done it under normal but we need to do it under active so i'm removing 20 pixel from here and let's now go under active and make the border radius to 20 pixel right now you see the corners are rounded if we select the nature you see the corners are rounded here's the wedding here's the portrait perfect now let's go inside item style so here within each item i also make the images corner rounded so here i'm adding border radius 10 with each item you see now the corners are rounded and to make the images more pop up i want to add a bit of box shadow so here i'm selecting the box shadow click on this pencil icon and here let's keep the horizontal to zero and let's make the vertical value to 7 let's make the blur to 30 and spread i want to keep here a negative value so i'm putting here minus 10 and keep the position to outline it now looks really great now click outside and the last thing if we hover over on each of the images you see the titles are left aligned so i want to make it centered align so click here on items over style and here if you scroll down here you can see content alignment i'm setting it to centered so if we hover over on it you see the titles are centered now underneath this filterable gallery i just wanna add a button and that will be saying show all and we will link that button to our gallery page that we will create shortly so we can just copy a button from top so let's just right click on this button blue icon and click on copy now let's scroll down and underneath this gallery here in this place right click here and click on paste we cannot see the button because buttons border color or button text color is white and our background is also whitish but if we hover over on it we can see the button on the right side so first of all i want to make the buttons alignment to centered so from left let's make the alignment to centered and now go under style tab first make the text color to our custom black also from here our border color to the custom black and on hover let's make the text color to white and the background color let's click on the global icon and select the custom black so if we now hover over on this button you see it's changed to the black color and later from this content tab we will be linking it to the gallery page and here the text instead of c gallery we can right here see all that makes more sense all right we have done our beautiful filterable gallery section just do the last check so if we click on nature we can see all the images that are under natural filter if we click on wedding we can see all the waiting pictures if we click on portrait we can see all the portrait images and again if we click all then we can see all the images within this nice masonry filterable section all right so when you are happy just click on this green update button to save your work let's now create our next section and this section will be our services section so let's click on this plus icon to create a new section select the single column structure so first of all i want to add a heading widget here so i can just copy the heading from here so just right click my gallery and click on copy now let's scroll down put your cursor inside this column and right click here and click on paste but instead of my gallery i wanted to save my services and underneath this heading i want to add intersection so let's click on this rubik's cube icon and drag an inner section underneath this heading here and before adding anything inside these columns i wanna make these sections background color to uh dark color because our top section is kind of light color so if we make it dark it will pop up more so just click on this section six dots go under its style tab select the background type to classic and let's add an image from here now let's go to upload files select files i want to select this image now click on open click on insert media let's make the position to center center attachment to scroll repeat to no repeat and size to cover also let's add some background overlay from here background type classic color make it a pure black color and let's keep the opacity to 0.6 or 0.65 yep it looks perfect also i want to add the mountain shape divider at the top and bottom so let's just scroll down and click on the shape divider add the top layers add the mountain shape and let's make its color to the baby white color also at the bottom let's add the mountain shape and make its color to the baby white color and we cannot see anything inside this section so let's now go under advanced tab and bind the padding and let's add 200 pixel padding at the top and 200 pixel padding at the bottom right now it's looking like it and we cannot see the title because it's black so click over it and go under the style tab and let's make the text color to white all right now we will be inserting the contents inside the left column so let's click on this plus icon and first i'm dragging an icon widget inside the column here so here instead of this start icon i want to put a camera icon so click over this star icon and here i'm searching for a camera icon let's select this camera icon and click on insert now go under its style tab first of all i wanna change its color so i'm changing its color to the baby white color also if you want you can increase the size of this icon or you can decrease it i'm keeping it default also you can rotate it like this all right but i'm keeping it default now underneath this icon i wanna put a heading widget so click on this rubik's cube icon and drag a heading widget underneath here and i wanted to say wedding let's make its alignment to centered and go under style tab first let's make its color to pure white and then the typography by default is poppins font but let's make the font size to 24 pixel and font weight to 700 now underneath this heading widget i want to add some paragraph or text so to do that just click on this rubik's cube icon again and here you can see the text editor just drag it underneath this heading here so here inside this text editor field i'm pasting some text here so let's say if you do different type of photography like wedding photography portrait photography or videography then you can put different features within your each category or within your each services like maybe within the wedding service you may include certified master photography i mean certified master photographers then color correction on all photos then hand crafted photo albums 10 day turn around time and online private gallery like this all right now let's do some styling with these item icons all right let's now do some styling with these paragraphs or this text so let's go under its style tab and first make the element to centered and text color click on this color picker here i'm just writing hash d d d d d that's kind of off white color and now underneath this text i wanna add a button says contact now so whenever anyone convinced with our service they can immediately click on the contact now button that redirect them to the contact page of ours and we will be creating our contact page very shortly for now let's just keep the button here underneath so now click on the rubik's cube icon and drag the button widget underneath this text here and you know what you can just copy the style of other buttons we have created so we can just go to the top of our page and then just right click over this button and click on copy then scroll down and again go to the new button we have just created now right click over this button and click on paste style cool it's instantly pasted the style of the button so here instead of click here i want it to say contact now and i want to make the element 2 centered now i want to do some styling with this column like i want to add some border with these columns so let's now click on this column icon now go under its advanced tab sorry go under its style tab let's make the background type to classic and click on the color picker first let's make the background color to pure white and then drag this bottom bar to the very left because i wanna just make it pure transparent but with a white vibe all right now click outside click on the border and let's add border type to solid and border with one pixel border color again the white color with very less opacity so i'm dragging the bottom bar to the very left in this place and let's add border radius 10 pixels all around with it now let's go under its advanced tab because i want to add some margin and padding so first unbind the margin from here i want to add 10 pixel of margin at the right and left also let's add some padding so unbind the padding first on the top i wanna add 20 pixel bottom also 20 pixel and left alright i wanna add 15 pixel so also on left 15 pixel of padding now just right click over the column icon and then click on duplicate let's do the same thing right click over the column icon and click on duplicate and then let's delete the empty columns so right click over this column icon and click on delete now we have our three columns so we can make these three columns for our three different services so here is instead of waiting i wanted to say portrait and the third service maybe is waiting films also you can change this icon so for the portrait i'm changing this icon to a phonics icon i'm selecting this one and click on insert and for the wedding films one let's select the icon and here again i'm searching for photo so let's select this one and click on insert perfect and then you can change this text based on the services you will provide on the portrait also you can change this text based on the services or offers you are providing on your wedding film service and then like i said they are if they are happy with it they can click on the contact now button to contact with you immediately and lastly i just wanna add some spacing in between these title and these columns so just select this inner section by clicking on the six dots and go under its advanced tab unbind the margin and only at the top i want to add 30 pixel of margin you see the space has been added at the top so when you are happy with it like me just click on this green update button to save your work now let's create the last section of this page so to create a new section you already know just click on this plus icon and let's select the single column structure now let's go under style tab because i want to add a background color click on this classic icon and from the global color i'm selecting the baby white color now let's go inside the advanced tab and let's add some padding and bind the padding first add 60 pixel padding at the top and also bottom 60 pixel of padding now here inside i want wanted to say a bit of insta because here i want to display my instagram images using instagram plugin feed so first i wanna copy the text from top so go to our banner section underneath here is the my gallery text just right click here and click on copy now let's scroll down here inside our new section right click here and click on paste so here instead of my gallery i wanted to say a bit of insta so here underneath this heading i will be adding my instagram images so for that we need to install a plugin so before installing a plugin just click on this green update button to save our work now let's go back to our dashboard so from elementor page builder if you want to go back to dashboard just click on this hamburger icon and then click on the exit to dashboard but personally i want to keep the dashboard and elementor page builder into two different tabs that makes my workflow more faster so you know your wordpress dashboard url is your website name forward slash wp-admin so i'm just copying the dashboard url from here then i'm opening a new tab and pasting the url here now hit enter so this is our dashboard just minimize these new items and you remember to install a new plugin from this plugin click on add new and from here from this search bar i'm searching for a plugin that says smash balloon oops i always do this mistake on balloon spelling that should be double o so it says smash balloon social photo feed it's by smash balloon and you see here is one million plus active installations and there are three thousand four hundred and forty two five star feedbacks so of course it's a pretty good one let's now click on install now and click here on activate now here you can see the smash balloon instagram feed plugin has activated successfully now click here on its settings so now you are inside the instagram feed settings so first under the configure tab just click here on this connect and instagram account i'm clicking here so first you need to select what type of account you're using personal or business i'm using my personal account so i'm clicking here on connect it's not basically asking for the permission so i'm clicking here on allow so here it's displaying gym script gym script my instagram handle name so if i want to connect this instagram account i just need to click here on connect this account i'm clicking here it says successfully connected and now i need to do some more settings but first of all i wanna save it so just scroll down and click here on save changes and let's now go under customize tab here so from here just scroll down here you can see number of photos so how many photos you want to display on your page i want to display nine recent photos so i'm setting eight nine number of columns i wanna select it to three columns and then padding around the image i wanna add 10 pixel of padding around the image now click here on save changes and lastly i wanna do another settings under this customize tab so just scroll down here you can see header i'm just disabling the header from here so i'm deselecting it now let's scroll down and click on save changes all right our all instagram settings are done now let's go back to our elementor page builder and this time we need to refresh our elementor page builder because whenever you will install a new plugin or any other thing you need to refresh the elementor page builder to get all those options so i'm refreshing the page now let's scroll down to our instagram section that's here so underneath this heading a bit of insta i want to display my instagram pictures so from left i'm searching for the new widget that we have just installed i'm searching here instagram so here this wordpress widget says instagram feed i'm dragging this widget under this heading here so here inside this description field you can see here is a shortcode by default it's set to instagram feed i want to keep it like this and let's just click here on this green apply button at the top now let's scroll down to our instagram section scroll down now have a look we cannot see our instagram images within elementor page builder so for now just click here on this green update button to save our work actually you cannot see your instagram images within elementor page builder but when you see it on real browser you can see all the instagram images so to test it just click on this eyeball icon to preview our page i'm clicking on this eyeball icon so this is the real webpage view if you now scroll down let's scroll down more let's go to our instagram section now have a look under the a bit of insta i can see all my instagram images actually not all images i can see here nine images as we have set nine images from the plugin settings by the way these images are just random images because i'm not a professional photographer so i don't have beautiful images like here so these are just random stuffs also underneath the instagram images here you can see two buttons load more if you click here on load mode you can see more images from instagram so here you can see more images are loaded from instagram and also here you can get a button says follow on instagram so if people click on this button they can follow you on instagram all right let's now go back to our elementor page builder so we are done with our home page now we just need to make it responsive for mobile device and tablet device and making our website mobile or tablet responsive is super easy when you are using elementor page builder so if you want to make our website mobile or tablet responsive you just need to click here on this button says responsive mode so i'm clicking here let's now start from the tablet device first so from top i'm clicking on the tablet icon so the banner section looks perfect on tablet device our filterable gallery section looks perfect on tablet device now if we scroll down scroll down more here if everything looks perfect our services section looks perfect on tablet device now here is our instagram section it also looks perfect and like i said you cannot see the instagram images within elementor page builder but you can see it on real webpage let's now have a look how it's looking on mobile device so from top click here on the mobile icon let's start from the top so i'm scrolling up to the top so let's first start from the banner section on the mobile device this heading or title looks really big for mobile device so i wanna make its size smaller only on mobile device so first click on this title or heading and go under its style tab open the typography and here you can see on the font size you can see a little tiny mobile icon here so whatever font size you give it it will only applicable for mobile devices it won't effect on the tablet view or desktop view so for mobile device i'm setting the font size to let's keep it for the pixel because on mobile it looks perfect and then the sub heading looks perfect the divider looks perfect but this button looks weird so on the mobile device i wanna make them both centered aligned so i'm clicking first on the c gallery button and from left only on mobile device here you can see the little tiny mobile icon on mobile device i wanna make the alignment to centered same for the contact button so click on this button from left only on mobile device let's make it centered aligned and only on mobile device you see the banner looks really huge so i wanna make its height more or less only on mobile device so to select this whole section just click on the six dots then from left here it's set to minimum height and the minimum height you see here is the little tiny mobile icon on the mobile icon i also wanna set the minimum height in vh vh stands for viewport height so on mobile device let's make the minimum height to 70 or 75 viewport height it looks perfect on mobile device let's now go to our next section that's our gallery section so our gallery section looks perfect on mobile devices so each of the image looks great now let's scroll down here is our services section on mobile it looks great but i think there is too much is space at the top and bottom so to reduce it on mobile device just click on its section so just click on the six dots now go under advanced tab and bind the padding and only for the mobile device i'm adding 80 pixel of padding at the top and 80 pixel padding at the bottom and also you may remember we have given some margin with these cards or its services we can keep it on mobile as well but here if we have a close look in between each of these i mean each of these services waiting and portrait there is no space so to add a space just click on this column icon go under its advanced tab and bind the margin first and only add 20 pixel of margin at the bottom so at the bottom here you can see 20 pixel of margin has been added let's do the same with this click on this column icon go under advanced tab and bind the margin and add 20 pixel of bottom margin so here 20 pixel of margin bottom added let's do for the third services just click on this column icon go under advanced tab and unbind the margin so right now there is zero pixel of margin all around it we don't need to add a margin bottom with this because there is no other content within this section after this column so to me it looks perfect now let's now go to the next section is our instagram section and it looks great on mobile device and like i said we cannot see the images from the elementor page builder but you can see it perfectly from your real mobile device so when you are happy with it you know from left just click on green update button to save your work and click on this top x icon to get out from this mobile responsive layout let's now create our next pages but before creating our next pages i want to take some of the sections of these pages as templates because on the next pages i don't want to create all of the sections from scratch we can take some sections from home page and we can use that on other pages so to take a section as template let's say if we want to take this top banner as a section so let's just click on these six dots just right click here and click on save as template now let's give a name on this template i'm naming it main banner section now click on save so here it's now saved under my templates and here you can see its name main banner section all right now click here on this x to exit also i wanna save the gallery section as a template so let's just right click here on the six dots of this section click here on save as template and i'm giving it a name gallery section now click on save all right now close it and also before creating other pages here you have noticed another thing at the top of our page here we can see the home name it's actually the page title but we don't want that so to remove it let's just go back to wordpress dashboard and from appearance if we go to theme customize so this is the theme customizer it's nothing related with elementor we are using now oceanwp theme so this is the theme customizing option so from our theme customizing option let's go now inside general options and from here let's go inside page title and let's make the visibility to hide on all devices now at the top we cannot see the page title it looks more clean now all right now click on this top publish button to save our work and let's now click on this x to exit from theme customizer so let's now create our next pages so from left bar go to pages to add new let's close this pop-up and i want to turn off the full screen mode so from top right corner click on these three vertical dots and click here on full screen mode now first i want to create about me or about us page so here i'm creating about us page now from right side here you see page attributes and templates instead of default template i'm selecting elementor full width remember we have done the same thing with home page because it's very important now click here on publish click on publish one more time now let's create another page click here on add new now i want to create a gallery page again from the right side page attributes template to elementor full width now click on publish publish one more time now let's create another page click on add new and this time i wanna create a contact page from right corner page attributes templates to eliminator full width click on publish click on publish one more time all right now from pages let's go to all pages and here is our about us page so click on edit and now click on edit with elementor so right now we are creating our about us page and you may remember on the home page we have saved some portion of the page as template now i want to use one of those templates so this time instead of clicking on this plus let's now click on this folder icon and go under my templates and here i want to use this section that's main banner section let's now click here on this green insert button click on yes here you go but sometimes you may notice that you you can see here on the right side we have again got the sidebar so actually we have selected the elementor full width on the template but somehow it got changed on the sidebar so let's change it from here click on this gear icon this is the settings icon and here let's select the page layout to default and we need to select the elementor full with this option so always make sure your page layout is set to elementor's full width alright so this is the template that we have saved from homepage but from it we now need to eliminate some of the portion like first of all i want to make it as a static background image instead of the slideshow so let's now click here on the six dots and go its style tab and from here instead of slideshow i'm selecting the classic one let's keep this background image and from here we don't need this secondary heading so just right click here and click on delete also we don't need this inner section so i'm deleting it by clicking on this x of this inner section and here instead of jim photography as it's our about us page i'm writing here about us and the last thing i want to reduce the height of this section so let's click on the six dots and go to layout from here minimum height instead of 100 vh i'm setting it to 50 or let's keep it 55 it looks decent all right after our banner now i want to create the real about section so here to take a new section click on this plus icon this time i'm taking two column structure and let's now give it a background color from here so select the background type to classic and color to that baby white color also i want to add some spacing at the top and bottom so let's now go under advanced tab and bind the padding and on the top let's add 60 pixel and also bottom let's add 60 pixel of padding now here on the left i want to add a theme image so if it's your personal website you can add here your own image and if you're a team you can add your team image here so let's now click here on this plus icon i'm dragging an image widget here on the left column let's now choose the image from here now go to upload files click on select files i'm selecting this image click on open now let's click here on insert media it looks great but i want to add some border radius at the corner so let's now go under style tab from here let's add some border radius maybe 20 pixel yup it looks perfect now on the right column let's now click here on this plus icon let's drag a heading widget here and here i wanted to say about jf photography let's now do some style from here so text color i want to set it to custom black color and typography by default the font family is poppins font but font size let's make it 34 pixel and font weight to 700 great let's now click on the rubik's cube icon and let's drag a text editor widget underneath our heading widget here now here inside the text editor i'm pasting some dummy text it looks perfect but i want them both to be vertically aligned so for that let's click on this section icon go under its layout from here vertical align let's make it middle now they are both vertically aligned now let's create our next section so click here on this plus icon by the way in this section i want to show a video so if you keep your work format as a video i mean if you like to show your work portfolio as a video format then you can create a section like this then on that place you can share any video from youtube or vimeo or even you can self-host the video let's now create the section so i'm selecting the single column structure and i will be adding some mountain shape at the top and bottom of this section so that's why we need some spacing at the top and bottom so let's go under advanced tab and bind the padding at the top let's add 200 pixel and at the bottom let's add 200 pixel of padding now let's go under style tab and open the shape divider option on the top let's add the mountain shape and its color would be our global baby white color and also on the bottom let's select the type to mountain and also the color would be the baby white color and in this section i want to add a background image and you already know to add a background image we need to click here on this background now click on the classic icon and let's add an image here let's select this mountain image and click on insert media set the position to sender center attachment to fixed repeat to no repeat and size to cover perfect and also i want to add some background overlay from here so background type to classic color let's set it to dark black color and let's reduce the opacity a bit let's keep it 0.25 or 0.3 all right now let's click on the rubik's cube icon and drag a video widget inside this section so here from the left you can see you can add different type of video i mean you can add different videos from different platform if you have a look you can see here youtube vimeo dailymotion or you can even add your self-hosted video so here i want to display a youtube video so here i'm pasting a youtube video url now whenever anyone comes to our about page and if they click on this play button they can show the youtube video inside of our website also you will have different options on the left side like if you want to turn on the autoplay or if you want to turn on the mute or if you want to play this video on a loop you can set all this from the left option but for now i just want to turn on the player controls option and now lastly i want to add some spacing at the left and right side of this video so to do that let's now go under advanced tab and bind the padding and i want to give it in percentage on the right side i'm giving 20 of padding and on the left i'm giving 20 of padding it looks perfect but i think we need to add a title at the top of this video so you know just click on this rubik's cube icon and drag a heading widget at the top of the video here and here i wanted to say watch our story let's now make the alignment to centered and do some styling from here so color let's make the color to white color and typography font size let's make it 42 pixel and font weight to 700 it looks perfect now on the next section i want to display all of my team members so you can show your team members their picture their name their title within this section so to create that section let's click on this plus icon i'm taking a single column structure now let's go and restyle tab and i'm giving it a background color to our baby white color and let's add some spacing from under advanced tab let's unbind the padding and on the top i want to add 60 pixel and bottom i'm adding 100 pixels now first i want to take a inner section so you already know to do that just click on this rubik's cube icon and drag an inner section widget here now first inside the left column i want to add an image box widget so click on this plus and here i'm searching for image box here we go so just drag this image box widget inside here so let's first click here to choose the image go to upload files click on select files now inside team members folder i have saved here three images so i'm selecting these three to upload together now click on open they have uploaded successfully now for the first team member i'm adding this image now click on insert media though it's not me but just assume this is me so here on the title i'm giving it the name to jim fahad and here's the description or profession title so here i'm writing ceo then ca photographer all right now let's do some styling with it first of all i want to make this image rounded so to do that just go under style tab and the first thing i want to make the image width to 60 percent and then let's add border radius not in pixel but in percentage and if we want to make it a pure circle then we need to add here 50 of radius just have a look if you put here 30 percent it won't be whole circle but if you put here 50 it's now pure circle and also here is spacing instead of 15 i'm adding here five all right now expand the content tab here title is spacing i wanna add four now they are more close it looks perfect and the title color let's select our global custom black color all right now let's go under its advanced tab from here let's expand the border now border type to solid and border width let's add one pixel border color to that black color but you already know i want to reduce that transparency so i'm dragging it to the very left here and lastly let's add some border radius let's add 10 pixel of border radius now i want to duplicate this inner column couple more times so hover over on this column icon right click here and then click on duplicate again right click here on this column and click on duplicate and let's delete the empty column right click and delete now on the second one i'm changing this image to other team members image so let's select this image click on insert media and here instead of jim fahad i'm typing g2 ryan and here instead of ceo because one company has only one ceo so it should be assistant photographer now let's change the content of the third box so click over this image now click on the image to choose the image let's now select this image and click here on insert media and here instead of jim fahad i wanted to say fahad ahmed also this should be assistant photographer perfect but i always forget to add heading within any section so let's add a heading in this section so let's click on this rubik's cube icon and drag a heading widget at the top of this inner section here and i wanted to say our crew let's make it centered aligned or we can just copy the style from top so just right click here and click on copy and on this heading just right click here and click on paste style but here instead of white i want to make its color just go under style tab and make its color to our global custom black color perfect alright so we are done with our about us page everything looks great but only here in this section i think if we add some space at the left and right it would look great so just click on this column icon go under its advanced tab and bind the padding and let's give it in percentage so on the left let's add five percent and i mean on the right five percent and on the left let's add five percent right now it looks more cleaner alright so here is our beautiful banner of our about us page then here is some text about us and here is our team image then underneath that here we have our video so here you can show your own story or your team history here within a video format and underneath that here we have got our all team members their images their names and their titles let's now have a look how this page is looking on the mobile and tablet device so to check it from here just click on responsive mode now first have a look how it is looking on the tablet device so click on this tablet icon so on tablet device this top section looks great the next section looks great the video section looks great and our queue section looks great alright so here we don't need to do anything on the tablet device now have a look how it's looking on mobile device so from top just click on the mobile icon let's start from top so first i wanna reduce the spacing at the top and bottom on mobile device so just click on the six dots and here on mobile device let's set the minimum height to 50 percent and here the next section looks great on mobile let's now scroll down here is the video section also on the video section the top padding and bottom padding looks huge so to reduce it just click on the six dots go under its advanced tab and let's unbind the padding here let's just add 80 pixel at the top and also let's add 80 pixel at the bottom and you remember we have added some padding at the left and right so on mobile we don't need it just click on this pencil icon and unbind the padding now it looks perfect let's now scroll down here is our crew section everything looks perfect all right i'm really happy with our about page so just click on this x to exit from mobile responsiveness and now click here on this green update button to save our work let's now create our next page that would be our gallery page and we will create that page really quickly so to create that page let's go first our wordpress dashboard and from our dashboard let's go to pages to all pages and here is our gallery page let's now click on edit and now click here on edit with elementor and in this page we can again insert the banner template from the home page but actually we can also create a template on i mean we can also create the template from our about us page so let's go back to our about us page and we can just simply make this banner as our secondary banner template so just right click on this section and click on save as template we can name it secondary banner section let's now click on save all right now let's go back to our gallery page builder and as we have just created the templates so let's refresh the page one more time let's now click on this folder icon go to my templates so here is our secondary banner section so click on green insert button now press yes here you go but again we can see the right sidebar so you know from here click on this gear icon and make the page layout to elementor full width all right now instead of about us here i wanted to say see our work and let's change the background image go under style tab and choose the image i'm selecting this image click on insert media it looks perfect now our next section i also want to create that section using our template that we have created for our homepage so let's click on this folder icon and here is our gallery section so click on green insert button click on yes here we go but here i want to make it a bit different from the home page so first of all here instead of my gallery i wanted to say browse our work and then let's select the filterable gallery now this one the layout instead of overlay i wanted to make it search and filter so it's now looking like it and the interesting thing is people now can search any of our images from this search bar let's say if i type here couple you see we can now see only the couple image or if we now type here now you see we can only see the beach images so in this way people can search all your images from the search bar and if they put it empty they can see all of your images and here we can see all the images now here i wanna do another thing like first here you can see items to show instead of 12 i'm making it nine so here instead of 12 only nine images will be shown and you may remember on the homepage we have created this see all button but in our gallery page we don't need this so just right click here and click on delete so instead of that button we want to use one of the built-in button so from left here if we expand the load more button and just turn on the load more button so if we scroll down here we can see the load mode button and if we click on load more button more images will be shown here underneath but right now we only have nine images so to make it work we need to add more images so only for giving you the example i'm adding more images from gallery items let's now scroll down and i'm just copying the beach boat the last one and let's expand it here this one it's not will be a beach boat i will add a mountain image so i'm giving here the name mountain one then here i'm adding another mountain image so let's add this one click on insert media for the next one let's just duplicate it so i'm duplicating it here let's name it mountain 2 and replace the image with another mounting image maybe with this image click on insert media again let's do the same thing just to duplicate it one more time and this one i'm naming it mountain three and replace this image with this image and click on insert media so now we have complete 12 images but here we can see one two three four five six seven eight nine images and then if we click on this load more button then we can see the rest three images we just have added how cool it is and lastly i wanna do some styling with these search forms so to do it from top if we go under style tab and from here if we have a look on search form style then from here if we have a look here we can see the form option so i just wanna add some shadow so click here on box shadow and let's play with it let's set the blur to 12 is spread to some negative value minus six and instead of outline i wanna set it position to inset perfect let's do the same with this form handle so you will find it here is the controls and from here let's do the box shadow with it as well so the blur let's make it 12 and this spread let's make it minus 6 and again position 2 in set now to me it looks perfect so personally i'm happy with it now click on green update button to save our work though i'm pretty sure it's looking great on tablet and mobile device but just making a triple sure click on this responsive mode icon first let's go to the tablet icon to see the tablet view so on tablet view it looks perfect there is no error and let's now click on the mobile icon so the banner looks great on mobile device and all the gallery images with their names looks perfect on mobile device alright now let's click on this x so we are done with our gallery page as well let's now create our next page that will be our contact page so to create a new page you already know we need to go to our wordpress dashboard now from left let's go to pages to all pages and here is our contact page click on edit and just make sure the page attributes here template is set to elementor full width and now click here on this button says edit with elementor now in our contact page we will be also importing the secondary banner section so you already know that to add that section just click here on this folder icon go to my templates and here is the secondary banner section click on insert click on yes now here instead of about us i wanted to say contact and then let's change the background image from android style tab on our contact page i want to use that team image and click on insert media okay it looks perfect now let's create our next section so click on this plus icon and here on the left column i wanna display the phone number or email address and on the right column i wanna display the contact form so i think this would be the perfect structure for that so i'm selecting this structure now it's background color go under style tab so i'm selecting the background color to that baby white color and let's add some padding and let's add some padding so go on to advanced tab unbind the padding on the top layers at 60 pixel and bottom let's add 60 pixels of padding now here inside the left column let's click on this plus icon and here i'm searching for icon box widget so here it is just drag it inside here so first let's change the icon so instead of that i'm searching for an envelope icon let's select this one and click on insert and then the title should be email us and here you can write your email address where you want people to contact you so that would be contact at then your website name i'm just putting here a dummy email address now let's do some styling from under style tab so here primary icon color i'm setting it to that custom black color and let's expand the content here i'm setting the spacing to five and let's make its color to our custom black color i think we're pretty much done with it just let's add some spacing go under advanced tab and bind the margin and let's add 20 pixel of margin or we can add 20 pixel of margin all around with it so just link it again and yep 20 pixel of padding looks perfect sorry 20 pixel of margin looks perfect and let's add some padding as well so we can add 15 pixel of padding around it all right let's now just duplicate it one more time right click here click on duplicate and then here within the second icon box just click here to select it and go under advanced tab we don't want the top margin on this bottom icon box so here i'm just unlinking it first and removing the top margin from here so i'm setting it to zero and then here instead of email us let's go its content tab here we can write call us and then here you can put your phone number this is not my phone number i'm just putting here a random number so you can put your real number here and i think we can do some more styling with it so just click on its pencil icon and let's scroll down here you can see under advanced tab here is the background option so i'm here adding a background color click on classic icon and let's add a white background here and then scroll down and expand the border let's select the border type to solid and border width to one pixel border color let's make it black first and reduce its opacity like this and lastly add 10 pixel of border radius with it you see it now looks perfect and you don't need to do the same thing with this one just right click here click on copy and then right click over the second icon box and click here paste style the style is instantly duplicated here and now here we will be placed our contact form but before that i want to add a vertical divider here in between these two column so to add that just click on this left column icon now go under its style tab expand the border here border type solid border with one pixel but i just want a border only on the right side so that will be placed here in this place so first let's making it default and first unlink the width i want the border with only on the right side so here on the right i'm adding one pixel border color let's set it to pure black and then let's decrease its opacity by dragging it to the left here all right so if we now have a look by minimizing the wordpress sorry not wordpress elementor bar from left here we can see now this vertical divider here and it looks perfect to me now expand the elementor left bar and now i want to add the contact form on the right column but before that let's click here on this green update button to save our work because now we will be installing another plugin to enable this contact form and to install that plugin just go to wordpress dashboard and from left to bar here you can see plugins from there just click on add new and here i'm searching for a plugin that name is wp forms so you can just search it from the search plugins bar that would be wp then forms let's close this notification just i'm clicking here no thanks by the way if you want to use elementor pro i will also put elementor pro purchase link in the description that's a really great one oops somehow this page doesn't redirect me to that plugin so here i'm searching again wp forms so this is the plugin it says contact form by wp forms drag and drop form builder for wordpress you see is 4 million plus active installations so there is no doubt it's one of the best form builder let's now click here on install now now click on activate all right we have successfully installed wpa forms now we want to create our contact form and to create our contact form now you can see there is a new link added on the left but that says wp forms so just hover over on it and then click here add new so first here you need to give this form a name you can name it anything here i'm naming it jim's form and then from here i'm selecting this simple contact form this option so click here create a simple contact form so here within this contact form you can add this field by default here you can see the name field email field and here is the comment field and then here's the submit button but let's say if you want to add more fields here let's say you want to also collect your customers or visitors phone numbers so you can just click here on this numbers option you see here is the number option is added immediately even if you want to place it before the comment box you can just simply drag it before the comment field here and if you don't want it just from the right side click here on this delete icon so here it's asking for are you sure or not yes i'm sure click on ok and again if you want to make any field required you can do that just click on this email field then if you want to make the email field required then you can check this required field if you don't want to make it required then you can just uncheck it but email is the main thing so i of course want to make the email field to a required field i'm checking it all right now from the left bar let's click here on settings so here from under this general tab here you can see all the forms information the firm's name is jim's form and then here you can see the submit button text here instead of submit if you want to write another thing let's say send message or submit a message you can change the submit button text from here in this field and then let's click here on the notification tab so here's the place you can change your email address so basically here you can see sent to email address it's set to the default email address that you are using for this wordpress website so you may remember during the installation of wordpress you have given a email address so whenever people fill up this form you will get a message with the information within this email address but let's say if you want to get those emails on other email address you can just simply remove it and you can put here your gmail address or yahoo address or any other email address you are using but here i want to keep the wordpress default email address and yep let's keep all this default settings now let's go under confirmations tab so from here you can control the confirmation message i mean whenever anyone fill up the form right after filling up that form they will get a message let's say they will get thanks for contacting us we will be in touch with you shortly so if you want to change this message with any other text you can change it from here but this default text is fine for me all right so when you are done with your form settings just click here on the stop save button to save this form and now click on this right x to exit all right we have successfully created our contact form and we will be using this contact form inside our contact page on this right column and we will be using and widget that says wp form so just to make sure we have make our settings properly on that way so to check it just from our wordpress dashboard on the left bar here you can see essential add-ons just click there then under its elements tab if we scroll down here we can see all the widgets we are getting from this essential add-ons plugin so if we scroll down scroll down here you can see form styler elements and we will be using wp forms just to make sure the wp firms option is enabled yes it's enabled if you see it's not enabled then the look will be like this so you need to make sure the wp forms option is enabled then scroll down and click on save settings all right here it says settings saved now let's go back to our contact page builder again and refresh the page one more time so we wanted to create a contact from on this right section here so let's now search for the widget that would be wp forms so here is the widget and you can see the essential add-on icon at the top right corner of this widget let's just drag this widget to the right column here now we cannot see anything inside of it because we need to select the form and you remember we have given the form a name that's jim's form of course your form will have a different name so from here you see select from click there and select the form you have just created using wp forms i have created jim's form i'm selecting it here we go now at the top we can see the firm's name but i don't want that so from here title i'm disabling it and now i want to do a bit of styling with it to do that just go under style tab and from here first let's go inside input and text areas here only i want to add some border radius with these input fields and text area so let's add 10 pixel of border radius and then i want to style this submit button because our other buttons are black or white but these button looks unsynth with other buttons of our website so to make it look similar on other buttons of our website we can design it on our way so just minimize this input and text area now go inside submit button from here first let's make the background color to white color text color to our custom black color and then add some borders so border type solid and then border with one pixel border color our global custom black color border radius let's add 25 pixel of border radius then i want to add some padding so first unbind the padding add 12 pixel padding at the top and bottom and right and left let's add 35 pixel of padding and right now on hover there is no effect so let's just reverse the design on hover now click on hover on hover i want to set the background color to our custom black color and the text color you know that would be the white color so if we now hover over on it the color reverses all right we are pretty much done with our contact page but lastly i wanna add the google map so to add our google map underneath this section i'm clicking on this plus icon let's select the single column structure now for this section i wanna set the content with to full with and also i'm turning on the stage section and also here column gap i'm setting it to no gap now let's click on this rubik's cube icon and here i'm searching for map here is the google maps option just drag it inside this section here so basically you just need to put your address here and then from here you can set the zoom by default it's 10 but if you want to zoom in more just you drag this to the right like this but i want to keep it the default 10 because that looks perfect for me and then let's adjust the height from here so i want to add 400 pixel all right it looks perfect but if you want to add some more styling with it let's say if you want to add some filter effect then you can do it from here underneath this style tab here you can see the css filters option just click here let's say if you want to give it a different vibe so you can just decrease the saturation like i'm keeping it to 80 also you can play with the you color you can drag it left to right so stop just whenever you are happy with it all right i'm keeping the huey to 22 if we keep the more contrast color that will burn the visitors eyes all right and lastly i think we can add some spacing on the left and right of this form so let's just quickly do it just click on this blue edit icon go under its advanced tab and bind the padding and on the right let's add 30 pixel and left add 30 pixel of padding so if we now have a look the top banner section looks great this form section looks great and google map section looks great now finally let's have a look how it's looking on tablet and mobile view just click here on this responsive mode first let's start from the tablet view so click on this tablet icon on the tablet device the banner section from section and the google map looks perfect now let's have a look on mobile section click on the mobile icon the banner looks perfect on mobile device this section looks perfect but i think on mobile device we don't need this much spacing so just click on this icon box go under advanced tab and unbind the margin again click on the second icon box go its advanced tab and unbind the margin now it looks perfect also on this contact form we can reduce the left and right padding we have just given so click on this pencil icon and unbind the padding right now it also looks perfect on mobile device and here underneath the google map looks perfect on mobile device so now let's click on this x and click on this green update button to save our work so we are almost done with our website now i want to show you a few other things like i will show you how to create a logo using a free logo making tool and you don't need to install any software in your computer because it's completely an online tool then i will show you how to place that logo into your header then i will also show you how to create navigation menus then i will show you how to customize the footer of your website and then lastly i will also show you how to create any blog post and then how to customize the blog page or single blog post page so now let's first create our logo so to create our logo we need to go to a website that says logomaker.com actually it's logo maker without the e so first let's close this tutorial because i will show you everything first from the search bar you can search here for any icon you need so as it's our photography website so here i'm searching for a camera icon i'm typing here camera and hit enter now here you will find a lot of camera icons so you can select from here which you think best for you or your company or your studio so to me i think this one looks great so i'm selecting this one then you can drag this to the left right top anywhere you want you can make it bigger just dragging its corner you can make it smaller dragging it inside then if you want you can also change its color from here let's say if you want to make it a purple or pink color or red color any other color you can change that from this color will but i want to make it our website's custom black color that's hash22222 and then i want to position it at this place at the middle here now with this logo i also want to add some text so to add a text from left click here on this text now here first i want it to say james now you can decrease its width by dragging it from left and then if you want to make it bigger you can just drag its corner like this but now i want to place it at the top so just first click outside and then drag it here at this place now i want to change its font so to change its font first you can change the font type from here instead of simple and modern you can select any of them like handwriting fun and fun key but i want to keep it as simple and modern and then from right you can select the specific font family so here i'm selecting the popping sponge now i want to make it a bit bigger like this and let's position it at the left more like this now i also want to change this font's color so here i'm putting the color code 2 2 2 2 2 2. now i want to duplicate this gym for the text one more time so just click on this vertical three dots and from here click on duplicate now let's drag the duplicated one underneath the gym for the text here and then here instead of jim ford i wanted to say photography and let's make it a bit smaller to align with the gym for the text so now i'm dragging it to a bit right to make it perfectly aligned with the gym for the text from top all right now you can make the whole logo with our size more bigger like you can drag over it to select all of it then you can drag it more to make it bigger or a bit smaller also you can position it or at any place you want like this so when you are happy with your logo then just click here on this crop icon from the right bottom corner so i'm clicking here on a crop then crop it the spacing you want so i'm cropping it from right i'm cropping it from top then let's drag it at the top here so i can show the corners properly all right now let's drag it from top and also drag it from the bottom here now click on the top check mark and then from top right corner click here on this save logo icon now this pop-up says if you want a very high resolution image then you need to pay them 19 but we don't really need a very high resolution image because we will be using it only on our website header so i'm happy with a low resolution file so here underneath it says no thanks download low resolution file i'm clicking here so it's already downloaded you will find that on your download folder or wherever you usually save your downloaded files all right let's now place our logo so let's go back to our wordpress dashboard and now from left here is the appearance from there just click on customize you already know this is our theme customizer so this is our header at the top of this banner and this is the top editor by the way we don't need this top header so let's first disable this top header so from left here we can see the top bar click here now let's go inside general and disable the enable top bar so here i'm disabling it so right now there is no top bar here now let's go back go back now to add our logo we need to go inside the header here now let's go inside logo from here we need to upload our logo so click here on select logo now go to upload files click on select files so here this is the logo that we have just created from logomaker.com so i'm selecting that logo click on open now click on select then it says if we want to crop it or not no i don't want to crop it click on skip cropping here we go but it looks super big on our website header so i want to reduce its height or width so from here you can see maximum width so let's make the maximum width to 170 or let's make it 180 pixel now it looks perfect and then i want to add the fab icon of our website fab icon is basically the little tiny icon that you can see here at the top of our browser so to add that fab icon let's now go back go back one more time now from inside site identity okay first disable the display site title and tagline because we already have uploaded our logo so we don't need our site title or tagline then from here you can see the site icon and it says site icon should be square and at least 5 12 by 5 12 pixel so always make sure your fab icon is square shaped now click on select site icon go to upload files click on select files and i'm selecting this fab icon i have created this earlier now click on open click on select skip cropping here we go we can see now the little tiny icon at the top of our browser all right let's now create our navigation menu on the right side here in this place so to create our navigation menu let's now go back then from left here you can see menus click there and then click here create new menu now first let's give it a menu name you can name it anything but here i'm naming it main menu and then here you need to select the menu location so here i'm selecting the main also if you want to use the same menu on your mobile device then you can click here on mobile but i will create a different menu for mobile you can see that very shortly so right now click here on next and now i want to add menu items by clicking here on this add items button so in your menu you can add any custom link so if we expand the custom links here you can set any external link or even if you want you can add here your social media links now let's minimize it because i want to add our pages on this menu so here i'm expanding the pages from here let's first add about us then the gallery page then the blog page and lastly the contact page now if we minimize it just click here now we can see our menu items here on the right side also we can see here a search bar if we click on the search bar here you will find a search bar so you can search anything from your whole website also if you don't want it you can disable this search bar i will show you shortly how to do that but you know what instead of this menu i want to create a different layout for this header so i want it in that way like the logo will be at the center and the blog and contact will be on the right side and about and gallery would be on the left side so it would be a logo centered header to create that first inside the main menu i want to remove the about us and gallery because within the main menu i only want to keep the blog and contact so from here let's just expand the about us and from the bottom here i'm removing it also the gallery expand it and from the bottom i'm removing it so within our main menu we only have now the blog and contact let's now go back and let's now create another menu so from menus let's now click here on create menu and this menu i want to name it to left menu then for this menu you don't need to select any of them because we will be selecting the left money from other place for now just click on next now click on add items on the left menu i just wanna add about us and the gallery because we have our blog and contact on the main menu all right let's now go back go back one more time now from the left links let's now click here on header here is the header click here now click on general so here you can see the general heading style by default it's set to minimal but instead of minimal i'm setting it to center here is the center so right now we can see the logo at the middle and also we can see our main menu on the right side and if you have a close look you can see a little tiny border at the bottom so i don't want that from here just disable the header border bottom also i want to make our header color to that baby white color so from here background color click on this color picker the color code was f to f a f f now click outside and then if we scroll down here you can see the left menu option so i'm selecting the left menu to the left menu but right now here we cannot see our left menu to get that we need to refresh this page so before refreshing just click on this publish button to save our all work and now refresh this page now again go inside the header then general this time let's scroll down and here click on this left menu now we can see the left menu here click on lift menu here we go now we can see the left menu on the left side and our main menu on the right side and logo at the middle and then i don't want the search icon on the right menu so to remove it if we scroll down we cannot see the hide search menu icon from here we will change that from other place i will show you that very shortly and now i want to do some styling with these menu items like if we hover over it we don't want this blue color also i want to make them bold so to do that just go back go back one more time first of all i want to do some global typography steps so from here let's click on typography now go inside buddy so the default font family for the theme i wanna set it to the poppins font so here i'm searching for poppins let's scroll down more so here is the popping spot i'm selecting it now click on publish to save it now let's go back and then go inside the main menu now from here font weight i'm selecting it to 600 now you see they are slightly bolder and also their font size instead of 13 pixel i'm making them 14 pixel all right let's now go back go back one more time now again i want to add some animation when hovering over it so to do that let's now go inside header and then click on menu from here you can see links effect i'm selecting it to let's now have a look we can select underline from left so if we now hover over on any menu item you can see the underline from left effect is working perfectly also i don't want this bluish color when you're hovering over it so from here link's effect color i'm setting it to that hash two two two two two two this color now click outside and scroll down then here the link color on hover i'm setting it to the black custom color that's hash two two two two two two all right now click outside if we now hover over on it they looks perfect their color looks perfect now let's scroll down and here if we scroll down more then under the search icon here you can see search icon style by default it's drop down but i actually don't want the search icon so from here just make it disabled now we can no longer see the search bar on the right side now i'm pretty much happy with this header let's now style our footer so if we scroll down at the very bottom of this page here by the way whatever work we have done with our header to save it just click on this publish first now let's customize our footer so just go back go back one more time first of all you can see a gray or dark area at the bottom of the main footer this is basically coming from the footer widget area so if we now scroll down from left and here you can see footer widgets let's now go inside there and from here you can see enable footer widget is turned on i'm just deselecting it now we cannot see the top footer area here now let's go back and go inside the footer bottom so first of all here i wanted to say copyright 2021 and then here i'm writing jim farhad photography and then it looks like little tiny spaces so i want to add some spaces at the top and bottom instead of 15 pixel i'm adding 30 pixel at the top and the third pixel at the bottom now it looks decent and then here background color i want it to sit as 2 2 two two two then there is the text color instead of this gray color i'm setting it to hash ffa fifth that's pure white color now let's go to the top and click on this publish button actually i always want to keep the footer very light and simple like this now i want to show you another thing like here on the right bottom corner you can see a click to top icon so if you are at the bottom of your page and then you can see this click to top button and if you click on this button that will go to the top of your website also when you are at the top you cannot see that button and if you scroll down a bit you can see this go to top button and if you also want to customize this button you can do that from this theme customizer to customize it you can just click all right first let's go back now first let's go inside the general options and here you will find this call to top now go inside that and here you can see this top shaped one icon but if you don't want that you can select any other top arrows from here you can adjust their bottom position you can adjust their background color then the icon color you can adjust everything of this button from this place but i'm pretty much happy with this because by default it looks great so i'm keeping all this default let's now go back go back one more time now let's have a look how to create any blog post and how to create a blog page and lastly how to create and customize single blog post page so to do that first let's go inside our wordpress dashboard and from left here you can see posts from there click on all posts so you may remember we have not created this blog post says hello world this is the default blog post that came with wordpress installation but now i want to delete it so to delete it just click here on this trash now let's have a look how to create a blog post from scratch so from here just click on add new then you need to add your blog title from here you see a title so here i'm just writing photography blog post one and then you need to write your blog post details here inside it and to write the blog post i want to use the classic editor so just from here click on this plus and here i'm searching for classic editor so this is the classic editor click over it i'm choosing the classic editor because it's super easy to use i'm just giving you an example so here i'm typing jim fahad photography is the best photography team so now let's have a look let's say if you want to make this jim photographic text bold just select this text and click on this bold icon it would be bolded instantly also if you want to make this photography text italic just select it and click on this italic icon then maybe if you want to link anything to any other website let's say if you want to link this gym fast photography text to any other website then just select this text and click on this insert link icon and let's say here i'm linking it to my main website that's https clone forward slash forward slash jim farhad digital.com and then hit enter now it's linked to jim for the digital.com though i spelled it incorrectly so to edit it just click on this edit icon so it should be genevah digital.com now click on apply also you can make anything left aligned right aligned or centered align then you can make any quotation you can make numbered list or bullet list also there are few more options to get that just click here on this toggle bar then you can see you can change the font color you can use the strikethrough let's say if you want to change this best photography theme color just click on this i mean select that and from here this is the text color picker let's say if you want to make it a blue color or for example if you want to make it orange color so i'm selecting an orange color from here you see it's now instantly orange color so it's easy like that it's similar like a google doc or microsoft word now here underneath i want to add some dummy text to make it like i mean look like a real blog post so here i'm adding some dummy text let's say if you want to make anything heading just select that and from top here you see it's a heading 2 but if you want to make any other thing like heading 1 you can do that or if you want you can make it more smaller by clicking on heading 5 but i want to keep it as heading 2 also if you want to add any image inside a blog post for example let's say if you want to add an image inside these two paragraphs so after this paragraph i'm hitting enter and then from top here you can see the add media icon click over there for now i want to select this image click on insert this post so here you can see this image but i want to make it more bigger so i'm just clicking over this image click on this edit icon and from here you see by default it's set to medium size but i want to make it large size and here click on update now you see you can see the image in bigger size also if you want you can make this image smaller just by dragging this corner from here like this also if you want to keep it as full size just drag it it to the fullest like this so in this way you can write any blog post that way you want now we need to do some other thing before posting a blog post right now at the right side here you can see you are under block now let's go under post from here you can create any category so of course you want to put your blog post under any category like if you write any blog post under nature category or wedding category you can specify them in different categories so for now here now click on categories and i want to create some new category here i'm clicking add new category first i want to give it a name to natural now click on add new category then again click on wedding then add new category so if you want you can keep any blog post into multiple categories also if you want you can keep that only on one category and if you don't keep it any category you have created that will be goes under and categorized category by default but i don't want to keep any post under uncategorized this post i only want to keep it under the natural category so i'm deselecting the wedding now we need to do some other things so minimizing the categories i want to add a featured image so basically it would be the thumbnail image of our blog page so click on featured image click on set featured image for this one i'm selecting this image and then click on set featured image so we are pretty much done with writing this blog post now from top click on publish and then once again on this publish button now we have successfully written our first blog post and now i want to duplicate this blog post couple more time otherwise we cannot get the real feel on our blog page so to create another new blog post from left here you can see add new i'm opening it on a new tab because i want to get the new blog post contents most of them are from this blog post for example i'm just copying this blog title from here and this is our new blog page i mean new blog post so here i'm just pasting the blog title and instead of one i'm keeping it too now let's just copy this whole content so you can use it on our second block page i'm just copying it and let's now go inside here click on this plus icon and here again i'm searching for classic and inside this classic editor i'm just pasting the blog post all right now from right here click on post for this one i'm selecting the category let's select the category waiting for it and now the featured image for this one i'm selecting the featured image let's select this one and click on set featured image all right now click on this publish button click on publish one more time so in the similar way i want to create four more blog posts and i don't want to make you bored so i'm quickly creating those blog pages and coming back to you all right i have created all the blog posts to see all the blog posts from post click on all posts now we can see one two three four five six blog posts and here you can see the author of this blog post and here you can also see the categories so some of them are under nature some of them under wedding categories and you see the last one is under both nature and wedding photography now before customizing our blog page just make sure we have set it to as our block page so from here on settings now let's go to reading so just make sure the posts page we make it our blog page and click on save changes now again from appearance go to customize so first click on the block page because this time we want to customize our blog page so by default our blog page is looking like it but i want to customize it in a better way so to do it from left here you can see block go inside it first go inside the blog entries and here we can see on the right here is the sidebar let's say if you want to keep this sidebar on the left then you can select this option but actually i don't like it either i want to make it full width so i'm selecting full width then here now we can see the thumbnail images look super big so from here blog style instead of this large image i want to set it as thumbnail so it's now looking like it but you know what instead of thumbnail i want to select it as grid now here image size i want to set it as thumbnail and here also grid columns instead of two i wanna make it to three now i like it very much honestly all right let's now have a look from left so if we now scroll down here you can see all the element positioning so here is the featured image title meta content and read more also inside the meta we can first see the author name then the date then here is the categories and here is the comments so for example if you don't want to display the author name and date here you can just disable it from here so here i'm turning off the author name by clicking on this eyeball icon also let's disable the date from here now we can no longer see the author and date here inside this card but i want them back so here again i'm clicking this eyeball icon now they are back also you can see here the separator is a dash if you want to do another thing just from here click on the meta separator you can select it to modern or even if you don't want it just click on none though it looks all same on all settings so let's just keep it on default alright so i'm happy with our blog page design now i want to customize our single blog post page so for that just let's go back from top and now click inside a single post and on the right side we also need to go inside our single blog post page so just click on a single blog post i'm clicking here so on our single blog post page i also don't want this sidebar i want to make it full width so here i'm clicking on full width now here again this image looks super big so i just don't want this thumbnail image on the single blog post page so to disable it from left if we scroll down here you can see featured image i don't want that so i'm just clicking on this eyeball all right so here is just simply the blog heading here then all the meta information and you know you can disable it or enable it from left side here then here is our full blog post and here we have got our blog post image and then you can see the related blog post here so our this blog post is under the natural wedding photography so other blog post that you have written under the same category that will go under this blog post as the related blog post now let's scroll down here we can see the comment field right now i'm logging in so that's why i can see only this field but any user is logged out they can see here the field like your name your email address and then the comment box by the way there are multiple options here like here you can see related post taxonomy so we have set it to as our category but if you want to bring the related post here according to the tag then you can select the tag from here also you can customize their width and height now one last thing i want to do here you can see this button is blue color but our whole websites button color is white or black color so this is not looking synth so to sync it i want to customize this button color to do it from the laptop just go back go back one more time now let's go inside general options and go to theme buttons so first of all i want to adjust the padding so here on the top i wanna add 12 pixel and on the bottom also 12 pixel and on the left and right i want to add a 35 pixel of padding then here is the border radius i want to add 25 pixel of border radius then the background color that would be hash 222 and then the background hover color that would be also this black color 2 2 2 2 2 all right and by default the text color is white so i don't need to do anything with it now everything looks perfect on our website but i think i forgot to do one thing like if we go to our tablet view or mobile view here we can see our menu but if we now click on this menu we can now see all the menu items then if you don't want the search bar you can also disable this search bar from the settings i'm just showing you shortly so if we go back go back one more time okay now from inside the general options oops not inside general options just go back go inside header and then go inside mobile menu so from here if you scroll down then here you will find the mobile menu search if you don't want it you can just disable it from here so if we now expand the mobile menu we can no longer see the search bar all right let's now go to the desktop view and don't forget to click on this publish button to save our work and then click on this x to exit from this theme customizer alright let's now have a final look of the output i mean the whole website so to have a final look from the top click on the visit site so this is our beautiful home page but i think i want to show you another thing like here we can see some buttons and also if we scroll down here we can see a button also here we can see some buttons i want to show you how you can link this button to your other pages so we can do that using elementor page builder from top here if we click on edit with elementor again so here from inside elementor page builder this seagal button click over here and here you can see the link field i want to link it with our gallery page so here if we just write a gallery we can see in the drop down here is suggested the gallery page so i'm linking it to the gallery page you see it's linked to the https colon forward slash forward slash our website name dot com forward slash gallery that's actually the link of the gallery page then now click on the contact us button now remove the hash and here i'm typing contact so this is our contact page that's our website name dot com forward slash contact so i'm just copying this url because we need to use the contact page url on the bottom buttons all right now let's scroll down now underneath these gallery images here we have got another button says see all let's select this button and this one we want to link it with our gallery page as well so here is the gallery page and then if we scroll down here you can see the contact now buttons so just click on this button and remove the hashtag i'm just pasting the contact page link here same with this one i'm pasting contact page link then with the third button here i'm just pasting the contact page link all right so we are done with all the linking with the button now click on this update button to save our work by the way we have not created any home icon because if we click on this logo that will take us to the home page let me just give you an example i'm clicking on this logo from a new tab so it takes us to our main homepage here you can see the url it's our elementor.com so finally let's now have a look on the all pages they are all perfect looking so this is our beautiful home page here we can see our logo here on the left side this is our left menu on the right side this is our right menu then here we can see this nice banner with this background slideshow we can see our buttons with their hover animation everything looks perfect then if we scroll down here we can see our beautiful missionary gallery and we can filter it by clicking over these categories here at the top and again if we click on all we can see all the images here then if we scroll down here we can see our beautiful services section we have got all the services into different cards then if you scroll down we can see our all instagram images in this nice design then user can also click on this load mode to load more images here like here we have loaded more images so here underneath that we can also see the button so people can follow us on instagram by clicking on this button and here we have got our beautiful footer it's simple then also if we scroll down a bit here we can see our go to top button if you click on this button that will take us to the top of our page let's now click on about us so that's take us to our about us page everything looks great on our about us page here we can see how to embed youtube photography i mean youtube video then where we have our beautiful team also you can check the responsiveness of your website just dragging the website to a narrower with like this so we can see here the mobile view of our website looks great everything looks super organized also if you click on this menu for the mobile we can see all the drop down items and on the desktop we already have seen it looks great now let's go to the gallery page our gallery page looks perfect and here we have got all of our images and you remember we have added a search option at the top so from here if we type main then we can see only the main image here and also if you can select the categories from here and if we clear the search words then we can see all the images again now let's go under the not under let's now go to the contact page so here we can see our email addresses our call number then here is the nice contact form and here underneath we can see our google map and then if we go to our blog page then we can see all the blog posts are here and let's say if we have more blog posts than six then we can see them in two nice paginations here like one two three and here is the last page so whenever we have more posts we can see the pagination here all right and if we now go inside any single block page so our single block post page is looking like it it looks great here is the related blog post and here is the comment option all right and again if we click on this logo then we go back to our home page congratulations you have made your beautiful website and it's live thank you so much for watching this full tutorial if you have any questions feel free to comment down below in this video and if you think this video has added some value into your life please give this video a big thumbs up and share this video on your social media accounts also please don't forget to subscribe this youtube channel and press on that bell icon to get notified before anyone whenever i will upload a new valuable video like this in this youtube channel once again thank you so much for watching for now bye bye

Channel: Jim Fahad Digital

Views: 12,305

Keywords: How to Make a Photography Website using WordPress & Elementor, wordpress photography website, wordpress photo gallery, elementor photography website, wordpress website for photographers, wordpress photography portfolio, wordpress photographer theme, elementor wordpress tutorial, wordpress for beginners 2021, jim fahad digital, wordpress tutorial, elementor tutorial, wordpress, elementor, make a website, create a website, photography website wordpress, photography website design

Id: T0T2Af9oi1E

Length: 172min 58sec (10378 seconds)

Published: Mon Jul 05 2021