How To Design a Website In Minutes | Wordpress Website Design (no Coding Required)!

Hi guys, today we are going to change this website to this design very easily.

Come, let's start together.

Let's first log into the WordPress admin section. For login, just type /wp-admin along with your website URL and enter. Then enter your username and password in the window that opens and log in by giving it Remember Me. This is the WordPress dashboard. Its menus are seen on the left side.

I don't like my dashboard cluttered up like this, so I'm avoiding it.

If there are any unnecessary notifications, we can close them completely or minimize them. Now, to avoid minimizing Click on the Screen Options and uncheck everything. Now our dashboard is fully clear. Next step, let's turn off search engine visibility for now. For that, click on Settings, select Reading, then tick the option to turn off search engine visibility. This will prevent our current site data from being cached by Google. For now, just click Save Changes. Next, we can set the site link.

For that, click on Permalinks and then select the post name.

Then click Save Changes. Okay, now let's go to the website. Click on Visit Site.

This is our home page. After admin login, we can see a menu bar like this. That is where we are going to design. If you want to design a website very quickly, First, save the content you want to give us on the website in a notepad or a document. Then we can easily copy and paste it on the site, so we can quickly bring all the content to the website. Similarly, save the images required to be given on the website in a folder in several categories. For example, I have created a folder called homepage and added images to be placed on the homepage. Also one folder for the coffee section and another folder for the logo of the site. Always make two for the logo, one for the light background and the other for the dark background. You can create content in the same order if you want based on your chosen theme. If you want the image to appear on the home page, you can add it to the document and the following text below it. Then let's start designing. Click Edit with Elementor in the menu bar at the top. Now we will go to the editing panel, and on this left side we will see the widget panel, and we are going to design a section there. Now we can see that every section has changed to be editable. If you want, we can put this editing panel in dark mode For that, click on the menu shown above, then select User Preference, and select Dark under UI theme. Similarly, if we put this in the editing handle, we use it to make editing easier. Normally, if we click on this edit option only, its edit panel will open. But if we turn on the editing handle, we can easily duplicate those elements and delete it easily. Now let's edit the first section. For that, click on these 6 dots above. Now we can see that the edit panel of this section is open here. To change the image, select the style section and select change image in image. Now we can upload the desired image. For that, select the required images from the folder we first saved to the home page and click the open button. Now Now we will see that all the selected images will be uploaded to our gallery, and from that we will tick the desired image and click on the Select button. Now we can see that the image we have given has appeared in the background. Next, let's change this title. I am copying the necessary content into this section from the document we prepared earlier. Then click on the text you want to edit We can either select and change it here or change it in our editing panel. Similarly, we can change the next title. Simply copy the content and paste. Next, let's edit the button. For that, directly select the Style tab. You can change the color of the button here. You can choose the color you like. I liked the old color, so I chose the old color. Next, we can change this quotes. Go directly to our document, select the required text and click the right button and copy it. After that, come back to our editing panel, select the text to be changed click the right button and paste. Just below it, you will see an author's name, and on the left side, you will see a section called Name, in which we can enter the text of our choice. I am giving our site name here. Now let's move on to the next section. Simply select the text to be edited and copy the text to be replaced from the document. From now on, I will use short keys for ease of use. Return to the editor and paste the text. Next, let's change this section. If we look at it now, we can see that there is an image and text related to it. First, let's copy and paste this text. Now let's change its description as well. Let's do the next one in the same way. If you notice this, the first text has 3 lines. Let's prepare it by adjusting the padding of this box. I am reducing this left and right padding a bit. Now both have shifted to the same alignment. We will add the links to these buttons at the last. Let's change this image. Click on Change Image and then upload the desired image to it. Here I am uploading all the images in the Coffees folder. From that, the desired image is selected for that section. Similarly, we can add the following image. Just look at the document and confirm which image you want and click the Select button. Next, we can change the content of this section. As we did before, we copy it from the document and paste it in the desired section. Now let's change its description as well. Now let's change this background image. For that, select this section and select the Style tab. After that, click on the image. I choose an image from previously uploaded images and click the Select button. Now the old image has been replaced by the image we have given. Now let's move on to the next section. Now we can add the required texts to this section. Now let's change its description as well. Now let's edit these images. These are the 4 images I intend to add to this section. Let's change each image. There are some blank portions here, so let's add an image there. For that, select this main section and then select the Style tab. Then select Background Overlay. Now let's select the background type Classic. Let's add an image to it. I am adding this image. Now we can see that image has been sent repeatedly. To avoid it, select No Repeat under the Repeat option here. Now it's only one image, but it's top left side. We need to bring it right down, and for that select the bottom left in the Position option here. Now we have the image we want. Next, let's add some opacity and then it will be very clear. Now let's see how to add an additional section. For that, click the plus icon below and select a desired structure. Now we can add the required widgets to it. Let's just drag and drop it into this section. First I add a heading and then drag this text editor widget for the description like this. If you want an image, click on the square icon above and drag this image widget to the section. Then simply add the image you want. I am adding this image. I don't need this section anyway, so I'm closing it. Now look, we quickly replaced the existing content with our own content. Now let's see how our design looks on mobile and tablet and click on responsive mode. First, let's see how mobile view works. Now let's see the mobile view of each section. In this section, the text is on one side and we want to center it. For that, we select this column and then select the Advanced tab. After that, unlink the padding first. Now all of our text is centered. I think it needs some padding, so I am adding some padding to the left and right, as well as adding some padding to the top and bottom. Now I think the rest of the sections are fine except this one section. We don't need this background image on a mobile device, but we can't delete it. To avoid that, first select its main section and then go to the background layer and reduce its opacity completely. Now you can see our mobile view is fully ready. Now let's set the tablet view in the same way. There is no problem in the first section. On the next section, I would like to reduce the size of this text. For that, click on the text and then select the Style tab, then click on the Typography and set the size to 25. Next, in tab view, this section is enough for me. Let's move on to the next section. If you look here, that background image has also appeared here, and we have to get rid of that too. As you did before, first select its main section and then go to the background layer and reduce its opacity completely. Now it is removed from that section. Now our tab view is also complete. Next, let's go back to the desktop view. Now we have done our entire homepage. Let's save it by clicking on this update button shown below on the left side. Now our update is complete. Then let's preview it by clicking on the preview icon. Look guys, we have now designed our homepage very nicely. Now we need to add our site's logo. For that, select the Customize option above. Now we come to a new window, and if we click on the pencil icon above the logo, we will get the option to change the logo on the left side. But for now, we only need the transparent logo, so So I am turning off the Retina logo. After that, I click on this Change Image option. Now let's add the created logo. I am uploading these 3 images. After that, I am selecting the light logo. Now the logo that we added has appeared on the site. You can adjust the size of the logo here if you want. Now let's change our footer content. After coming directly below, we can select the text we want to change, and then we can add the text we want. I am giving the address of this coffee shop here. Similarly, we can change the phone number and this mail ID, so just copy that and paste it. Next, you can change the footer background color if you want. For that, select the background and then select the design tab. Then you can choose the desired color in the background option. I am choosing black color here. Now our header and footer are complete. After that, let's set the mobile logo. For that, click on the mobile icon below and then click on the logo above and then go to the site title and logo section. Now we will get the option to change mobile logo. As we did before, we turn off the Retina logo and then add the dark logo we made. If you want, we can crop it. I am giving skip crop here. Now let's increase the size of the logo. We chose the dark logo here because of the white background. If you want, you can change the pattern of the mobile menu. Change the color of the icon, and if everything is okay, you can save it. For that, click on Publish option above. Congratulations, you have now completely designed the front page of your website. Now let's move on to the next page. Next, we are going to design the About page. Let's go to the page. This is currently the content on this page. Now let's add our content to it. Click Edit with Elementor for that. First, let's change its banner image. For that, let's select this section and select the Style tab. Now we can upload the image we want by clicking the Change Image option. I can add all the images in the banners folder here. Choose an image that we want from it, and if we want, we can make the background a little darker, then our text will be a little clearer. For that, click the background overlay option and increase the opacity. Now let's change its contents one by one. We only need one description. Description here, so we can delete unnecessary ones. Now let's change the next text in the same way. Copy the desired text from our document, then back to the section and paste it. Delete the texts we don't need. Similarly, we can now change the next content. In this text below, you can add content. If you want, otherwise you can delete it. Next, let's change this image. Here I'm choosing this image. And look here, you'll see a lot of space at the top and bottom of this section. To avoid that, I'm moving the below content up. For that, just drag and drop the text to the top section. Similarly, drag and drop the rest to the top. Now there is an empty column here, we can delete it. Now we can see that the text which was only on one side has become a single column. So we have completely changed the content of our About page. Now let's check the responsiveness of this page. First, let's look at the mobile view. The upper section is all okay. The lower section is very low. We can narrow the gap. For that, select the column, select the Advanced tab. Now let's reduce the top margin of this. I'm setting a -32 here. Now our section is beautiful. Now let's check the tab view. The first section is fine. Now let's adjust the image in the next section. I'm shifting it down a bit. For that, after selecting the image, come to the Advanced tab and add only top padding. Now you can see the image shift down. Now our tab view is beautiful. Now let's go back to the desktop view. Now our About page is complete. Now let's save it. Click the update button for that. Now our design is all saved. Now let's check the preview. Now let's go to the next page. Next is the service page, but I want to change the name of this page. For that, let's go to our dashboard. After that, select pages and click on all pages. These are all our pages. Click the Edit option under the Services page. Now we have come to another window. Here we change Services to Coffees. Similarly, we have to change the URL of the page. For that, click on the URL and change permalink Services to Coffees. After that, click Update and Save. Now let's view the page. Now we can see that Services has changed to Coffees. Now we can edit this page by clicking Edit with Elementor. First of all, let's create a banner image. Let's set— to change the image, select the style section and select change image. In image, I'm selecting this one image from the images we uploaded earlier. As usual, let's darken the background a bit. For that, click the background overlay option and increase the opacity. Now let's change the content of the following section. Go back to our document and copy the text we want. After copying, come back to the editor and paste it. Now let's reduce its size a bit. For that, click on the text and then select the Style tab. Then click on the typography and set the size to 25. Now let's change the following text like this. Now let's go to the next section. Here we have some image section. Let's first look at its category and add the image and text. First, I am using the espresso coffee image. For that, go to our image folder and upload the necessary image. Now let's add its text. Now let's add the next coffee type. Next, we add mocha coffee. Let's add its image and description. For that, go to our image folder and upload the necessary image. Now let's add its title and description. If we look here, our two images are at two heights. We can solve it in two ways. One, we can reduce the height of the big image. For that, select the Custom Size option of the existing image under the Image Size option. I am reducing its height to 1450 and the width is given as its existing width of 2560. And then click on Apply button. Now we can see that the height of our first image has now decreased to the level of the second image. Now let's change the next section as well. Next, we need to upload the cappuccino coffee image. For that, go to our image folder, select the cappuccino coffee image, and upload it. Now let's add its title and description. Now let's add the next image. Go directly to our image folder and select the required image and upload it. Here again, our images are different in size. To solve that, we can reduce the size of the large image as we did earlier, or we can bring the small image to the size of the large image. Here it is 960 by 460. Now go directly to our image size option, select the custom option, and set the height to 640 and width to 960. Then click on apply button. Now we can see that both our images have changed to the same size. Now let's change its title and description. In the existing design, we had two image sections. But we need more image sections. We can duplicate this section by clicking on the icon at the top of this section. Now you can see a copy of our section below has come. Now let's change the image and contents of these sections as before. First of all, let's change the title of this section as well as its description. Change the custom option and set the image size to full. After that, we can add the required image. Similarly, we can change the title and description of the next section. Next, we can change the image, and for that, we can upload the required image. Same as we did before, let's adjust the size of the image and fix its height problem. Here I give this image a width of 780 and height of 438 and click the Apply button. Now both our images are at the same level. Now let's duplicate this section. After that, we can add the necessary text to the next section. Then we can upload the required image from our folder. Similarly, we can change the title and description of the next section. After that, we can add the required image. Now let's duplicate this section. After that, we can add the necessary text to the next section. Now let's add the image. For that, we can select the desired image from our image folder and upload it. After that, we can change its contents. We can copy the required text from our document file and then come to the editor and paste it. Then we can change its image. As usual, we can upload the required image from the folder. After that, check its size, then select the small image and customize its size. Here I have a width of 1500 and a height of 1000 applying. Now both our images are same size. Like this, you can add as many sections as you want. I am deleting this section. I I don't need a section like this below. Now this page of ours, it is complete. Now let's check its responsive. First, let's check the mobile view. I am reducing the size of this text a bit. I set a size of 20 pixels. Rest image section is all okay in mobile view. Now let's check the tab view. I don't think the tab view needs much changes, so I'm going back to the desktop view. Now let's update and save our work. Now our design is saved. Let's have a preview. Now that we have designed our page very nicely, now let's go to the next page. The current name of this page is Projects, so let's change it first. For that, we can go to the dashboard and then select Pages. This time we can select the option of Quick Edit which is shown below the page called Projects. In this, we can give the desired name where we see the title. Here I give Categories. Similarly, the slug is our URL and there I will give categories. After that, click on the Update button and save the change. Also, from here we can directly go to the editing section. That— click on Edit with Elementor option found here. Now we have come directly to our editing section from the dashboard itself. Now let's change this image. For that, go to our image folder and upload the required image. As usual, let's darken the background a bit. For that, click the background overlay option and increase the opacity. Now let's change its contents one by one. First, I'm changing this text. Go straight to our document file and copy and paste the desired text. And change the rest of the text as well. Before this, we were editing a single image, but this is an image carousel with multiple images. First, I am removing the images in it. After that, we are adding some images of the coffee types. Now all the images we have added are here. Now we can click on Insert Gallery and bring it to the section. Now the image we have added is all in our section. Now let's move to the next section. First of all, let's change these texts, and for that copy the text we want from the document, then come to the editor and paste it. Next, let's, let's add some cake images. For that, go to our images folder and then add the images in the cakes folder. Now all the images we added are in our section. Now let's move to the next section. First of all, let's change these texts in the document. For that Copy the texts we need from, then come to the editor and paste it. Next, let's add some cupcakes images. For that, go to our images folder and then add the images in the cupcakes folder. Now our category page is all the most— it is set. Now to make it more beautiful, let's add images sections from time to time. For that, click the Add Section option and add a single column. After that, Drag and drop an image widget to it. Now let's go to this. Let's add the image here. I am uploading an image from the category section of our image folder to our gallery. Similarly, below the next section, we can add a new section. Just like we did earlier, we can add a single column and drag an image widget to it. Now let's add another image to our gallery. Before, as we have done, let's add a new section below the next section. After that, click Add a New Section and add a single column and drag an image widget to it. Now let's add another image to our gallery. Now we have completed our category page very nicely, and now if we want to see the preview, just click on this arrow button. I think our last section is missing some gap with the footer. To fix it, we can go to the Advanced tab of this section, unlink the padding, then set the bottom padding to 50, and then check again. We need some more gap. Let's set the 50 to 100 and then let's check the preview. Now we have the required gap. Similarly, our page is now very beautiful. Now let's check the responsiveness of this page. First, let's check the mobile view. The mobile view is all beautiful. Let's move to the next tab view. The tab view is cool too. Let's go back to the desktop view. Now let's save our work. Now let's see how the page looks like. You can see now that all the added images look good on our page. We forgot to change this one title, so let's go back to the editing tab and change this title. I am giving the title to this page Coffee Cafe. Now let's save the changes. Now our category page is complete. Let's edit the contact page. This is our contact page. Let's design our contact page. For that, click on Edit with Elementor option. After that, let's add a background image. For that, let's go to our image folder. I'm adding this image and also increasing the background overlay opacity. Now let's add our contact information. First, let's add the address here. Already we have added our shop address in the document, and let's copy and paste it here. Next, let's give this mail. I have selected the text there and am changing it. Now let's add the phone number. Next, go straight to the document and copy the number, then back to the editor and paste it. Next, if you want, you can add your organization's social media pages. For that, by clicking on this icon and then in the link column, you can paste the social media link. You can also add your favorite social media in it. For that, click on the icon library, then search and select your favorite social media from it and click on the insert option. Now you can see our selected icon is here. Add your social media links and you can save it. For now, I am okay with the content on the contact page, so let's update it and preview it. Now our contact page is ready. Now let's go to the home page. It's time to add links to buttons. When someone clicks the Learn More button, I want to open the Kofi's page. Let's see how we can set this. First, copy the URL of that page, then come to our home page and go to the editing section. After that, select button and then paste the URL we copied in the link column. Now let's add the link in the same way in the following buttons. You can add the link to the page you like, and if you want, this button, we can give the link to our About page. For that, go to the About page and copy the URL. Now come back to the editor and paste the copied URL in that button link. Similarly, in the following button, I am giving the category page link. Now let's update and then preview. Now let's check the buttons. Now you can see the links we have given are working correctly. Now let's check the next button also. It is also working correctly. Now let's check the following button. It is also going to the link we have given correctly. Now let's check how can we add a link to this button above. For that, we have to go to Customize option in the top menu bar. Before that, we have to copy the contact page URL. After that, click on Customize option, then click on the pencil icon above the button. Now you can see that The edit option has appeared on our left side. I am changing the text of this button to Call Us. After that, I will paste here the URL that we copied earlier and then click the Publish option above. Now let's go to the home page and check the button. We are now right on the contact page itself. Now let's see how we can add the favicon of the site. Favicon is the image shown in the browser address bar like this. Let's see how we can add it to our site. For that, go to Customize option and select the Site Identity option. After that, click on the Select Site Icon option and add the favicon we have uploaded. The favicon should always be square in size. Now let's crop it, then click on the Publish option to save it. Now you can see that our site has a favicon like other sites. Now let's see how we can submit our site to Google. First of all, let's enable search engine visibility. For that, select Reading in the Settings option and then uncheck the Search Engine Visibility and click the Save Changes. Now we have to add the Site Kit plugin. For that, click on Plugins and Select Installed Plugins. To add a new plugin, click on the Add New option shown above, and then type Site Kit in Search Plugins. In the result, you will see the Site Kit plugin first, then select the Install option and click on Activate. Now let's configure this plugin. For that, click on the Start Setup option. After that, click on Sign In with Google, then choose any of your Google accounts. Next, give access to the Site Kit by checking the Select All option and click on Continue. After that, click on Verify button to verify your site ownership. Next, click on Allow button and give the data access to Site Kit. Finally, click on the Setup option and complete the configuration. After that, click on the Go to My Dashboard option and come back to our dashboard. Now we have successfully submitted our site to Google. After a few days, we can see the performance of our site here.

Okay, now let's go to the website. Click on Visit Site.

So now we have designed a very beautiful website in a short period of time. If you have any doubts, feel free to contact us. See you in the next video. Till then, bye.