How to Create a Responsive WordPress Website with Elementor + Astra Theme

Hi , everyone and welcome to another element of tutorial today .

I want to show you how to create this uh cool looking page of snowboarding and skiing resorts .

This is a part of a set of pages which we released in our library and you can use it and customize it as you see fit .

And on top of all , I'm gonna show you how to make this step by step from scratch for this page .

We're gonna be using the Astro theme just because it's simple , it's fast , it's easy to use fully customizable and it's very easy to recommend .

So we have a top section with a big title , some text and a cool background feature section with an image slider , this informative section with a big title , some text and a call to action .

We have this uh nice looking uh infographic section with a small testimonial and some neat looking icons .

A client's testimonial section and it ends with this nice footer with some social icons and a sign up form .

So I'll begin with adding a new page called home publishing antenna goes straight to the element or editor .

I'm gonna begin with a new section divided into two columns .

This will be our big header section .

So I'm gonna set them in height of 85 VH , choose an image background and we're gonna center it and align it to the bottom .

This will be our main title .

Hm We're gonna be using a font called the Catamaran and this will be the font used throughout the , the whole website .

So I'm gonna make this heading real big and I'm gonna drag the left most column .

So our title won't break a line , make the spacing real tight .

This will be our text field .

I'm just going to size and stylize it properly .

Now , I'm going to add some padding 25 from the left and 240 from the right just to make this text field look more like a paragraph .

And I'm gonna add a small border from the left and paint the thread .

So I added some top margin to our title to push all the content downwards .

And I also added some bedding just to make the whole box of this title bigger and that will be needed in order to drag our title .

Now , I add in a new image of these clouds which you can't see right now .

But by adding a negative margin to this image , I'm gonna be able to push it upwards until it's placed upon our title and it gets this uh cool uh snowy clouds effect some but a margin for a text so it won't be too close to the edge .

Now , as you can see , our text looks a little bit unreadable .

So in order to solve that , I'm gonna go to the text advanced settings and choose a gradient background , make it radio .

I'm gonna adjust the settings a little bit and eliminate the second color .

This will put a small fade under our text which will emphasize it .

There looks good .

Next up is our feature section .

So I'm gonna set some mean height and change the color of the background to a dark gray color .

Now we're dragging the title and change its content with the new online editing feature .

This becomes a very fast and easy to do .

And now I'm going to stylize it .

We'll make it real tight .

So I just want to change the color of a single word inside our our title .

So I'm gonna paste in this uh short CS S code .

I put this little text around the , the word of which I want to change the color of .

Now , I'm gonna duplicate our text field , gonna center it and eliminate all the margins and the bettings which I don't need right now .

Same goes for the border , change its color to white and I'm gonna remove the gray in the background , replace the content .

Now , I'll drag in a media carousel .

This will be a carousel , showcasing our resorts .

So I'm gonna paste in some images .

Now , I'm gonna adjust the height and the width of our slide .

And here we have some additional options uh like the vein and I'm gonna select an overlay and choose text .

So we will have a text overlay when we have our overall slides .

Now , I can uh stylize it and if you want to see exactly what I did here , you can uh decrease the speed of the video .

Now , our slides have a nice overlay to them once you hover over and I'm just going to add some uh pattings and margins to make spacing between everything .

Now , I'm going to add an image as a background overlay and choose our winter clouds once again , size it to cover and just the opacity and this just adds another small touch of winter which adds to our overall look and feel .

Our next section is going to have some more information about our resorts .

So I'm gonna start off with a double column section , adjust its mean height and place an image background sizes to cover , position it to the bottom , right .

And I'll just duplicate our heading and our text field .

I'm gonna change their color and replace the content , eliminate all the margins and uh the pattings that we won't need .

I'll also drag in another heading which will be kind of a secondary title and the button and I'm going to adjust them .

So now I'm gonna speed this part up .

So if you want to see what happens there , you can decrease the speed of the video .

So our next section is going to be in a area with a small testimonial , some text and icons .

I'm gonna start off with a new section once again divided into two columns .

I in a testimonial change its content .

Hm .

And I'll load in this nice image and now I'll adjust it real quick .

Now , for the next column , I'm just going to drag in a columns , widget use a single column and by dragging the leftmost column , I can make it one third of the overall width .

Now , I once again , duplicate our main heading and our text area by doing this , it speeds up our web design process immensely .

I'm just going to change the colors of the items and uh replace their content to keep both of the colors in our heading .

I'm just going to select each word and change it separately .

Now , I'm going to use the same trick we used in our header section .

I'm gonna give the column pattings from the left and the right side and set a small border from the left .

Now we're going to create a section with four icon boxes .

So I'll add in a new section , paint the background to our previously used dark gray color and drag in an image box .

Widget .

I'm going to change the content and adjust it style to make it look beautiful and duplicate it four times there .

Now , our section looks awesome .

Just realized I made a typo in there .

So before we move on to our next section , I'm going to create an image divider just to keep the content from being too dense .

So I'll past the new section set its height to 300 pixels .

And I'm going to load in this school looking image size it to cover and place it in the middle .

I'm going to set it is fixed .

So now when we scroll down , the image is being revealed to us , time to move on to our testimonial carousel section .

Let the new section immediately duplicate the utmost heading .

I'm going to change its content and the color .

So now I'll drag in a testimonial carousel , choose image above and adjust its width .

Now I'll load in some images and change the content .

932.609 --> 999.539

Now , our testimonial carousel looks good and works great .

Now , we can go on and add in the footer .

I'm going to create a new section with the three columns , change the background color to a dark one and I'm going to set the leftmost column take up 50% of the overall width .

Now I'll just drag in a form widget some social icons and a small subheading and I'm going to customize them properly here .

I'm going to set in an image as a background overlay and it's an image I've prepared previously .

I'm gonna size it to cover and position it to the center , right .

And by adjusting the opacity , it blends in beautifully with our background .

Now , with the photo finished , our website looks great .

All that's left is making it mobile responsive and we're gonna do just that .

So I'm going to start off with sizing the heading or make it way smaller position to the center And I'm gonna set new margins for this heading .

Same goes for the image .

Now , the text field is also going to be centered which will make it organized and I'm gonna set new margins and bettings and adjust its size , going to set a new betting from the left to push it away from the border .

Now , by manually adjusting the negative margins of the image , I'm going to make it placed upon the text again .

For the next section , I'm going to set the column gap to no gap so we can define the gaps ourselves .

I'm gonna change the size of our heading and our text .

We're gonna set new margins and bettings for most of the elements .

Now , for the media carousel , I'm going to eliminate the margins and the pairings to give it some uh , new ones .

And by adjusting the width and the size of the arrows , I can make it more narrow .

Yeah , for this next section , I'm going to start off with the zeroing out the margins and the bettings and adjusting the sizes and the alignment of our text elements , same goes for the button .

Now , I'm going to select the section uh choose advanced and go to the responsive tab .

And here I can reverse the columns which will make the column with the content be in the bottom column .

I'm going to give a margin of 400 pixels to the top of our column which will push the image to the side and this will prevent it from covering our content there .

Now , our section looks nice and organized and it is also readable for this next section .

I'm going to do pretty much the same thing .

Now for our icon box section again , I'm going to begin with zeroing out the betting and setting a new one and I'm going to select each column and set its column with the 50% .

This will make every row contain two icon boxes and it makes it look more organized to emphasize their effect .

I'm also going to center them , add some bottom padding there .

Now it looks much better .

Now , this image doesn't really have the same effect on mobile .

So we're gonna go to the responsive tab and the advanced options and choose higher on mobile .

So now it's hidden now for the next section , I'm going to do pretty much what I've done up until now .

Zero out and adjust the pattings in the margins and decrease the sizes of the texts .

Now for the footer , I'm going to increase the row gap just to increase the spacing between the form field and the button .

And I'm going to center the text and the icons and set some proper margins and bettings for this section there .

Now everything looks good and narrow .

Now that we've finished adjusting everything for the mobile device , you can see that the content looks much more organized and readable and overall everything looks much better .

As I mentioned before .

You can download this template from our library along with other cool design tools .

I want to thank you for watching this video .

Please subscribe to our channel for more awesome content .

This was from and have a nice day .