[05] Building the Homepage in Elementor
Вставка
- Опубліковано 2 сер 2024
- Watch the full Getting Started with Elementor course here: elemn.to/gettingstarted
In this lesson we will use the Elementor widgets to structure and build our for a restaurant website homepage. We will introduce Elementor’s essential widgets and learn to customize them.
This lesson will cover:
✔︎ How to structure your page
✔︎ The basic Elementor widgets
✔︎ How to customize and style your page elements
✔︎ Image file best practices
✔︎ Workflow enhancements
✔︎ And much more!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro
See also:
Image optimization: • [02] Optimizing Your I...
Margin and Padding: • Margin and Padding Bas...
Chapters:
00:00 - Intro
01:10 - Page Structuring
07:20 - Image Optimization
14:38 - Margin & Padding
17:30 - Wordflow Shortcuts
25:21 - Anchor Links using CSS ID
![[06] Responsive Design & Connect the Home Page](http://i.ytimg.com/vi/sNLlysb87gY/mqdefault.jpg)
![[06] Responsive Design & Connect the Home Page](/img/tr.png)
The best tutorial I found on UA-cam so far. Great job and thank you for posting this for free.
Thank you for the tutorial. One thing that would improve things is if you had a bright coloured circle around your mouse pointer at all times. I have seen other videos with this and it helps keep track of what is going on. Thanks again.
I'm so freaking glad I found these tutorials. I agree with what everyone else is saying. These are great and I'd really love to see some more advanced ones (in the future).
Hi Corey, we're so happy you found this course helpful. You can find more courses, including advanced courses here: ua-cam.com/users/Elementorplaylists?view=50&sort=dd&shelf_id=6 and more advanced content here: ua-cam.com/play/PLZyp9H25CboEmGs0zXpCPPEI50BX0lsHj.html. Also, check out the Elementor Academy: elementor.com/academy. Thank you for your comments.
The 5th part is the best one yet, Elementor is really a powerful tool.
Thank you Aviva! Super helpful elementor course, your way of explanation is wonderful and inspiring me to work on my Website cheerfully....appreciated! 👍
This tutorial is especially clear and concise. Much appreciated!
Best elementor tutorial video I have watched on UA-cam. Step by step explanation breaking it down for easy understanding. Amazing tutorial🙌🙌🙌
Hi Enragon, we're really happy to hear that 🤩
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
Fantastic video! Great job! Looking forward to the rest of the series!
This is an excellent series of tutorials, professionally organized and presented, the instructions are easy to follow and clear, at the end of the tutorials you indeed have a great understanding of how to use Elementor, which is and amazing tools, Thank you very much Aviva!
Hey Jose, thanks for sharing. I'm really happy to hear that 🤩
I wish you guys would create some more advanced tutorials. This was great, and I Did learn one or two quick things, but I've already built 20+ client websites with Elementor. I'm looking to really take my designs to the next NEXT level, if you know what I mean. In the past you guys have done some tutorials on things like using motion effects, etc. Maybe make some new ones that are updated to take advantage of the newer features. I love elementor and I'm not moving away from it, even with the price increases.
Hi Steve, thanks for you comments. They are much appreciated and help us to better understand what kind of content our viewers would like to see. This video in particular is from a Getting Started course, intended for beginners, but we do have more advanced content on the channel, and have lots more in the works, so please stay tuned! Meanwhile, have you taken a look at our WooCommerce course? elemn.to/woocourse. Thanks again, and please continue to share your thoughts on our content.
Great tutorial, the way of explaining is superb, it's was filling gaps in my Elementor knowledge.
However, one thing is missing (for me), the used images, it should be fine if you could download them.
Beautifully explained the way elementor is to be used.
Wow! 5th part is really awesome!
Thank you Aviva , best tutorial i ever watch
Do you have the source files of this course. I am trying to learn and rebuild this site with you while watching the videos, but is very hard to match the pictures ?
Exactly, the Assets would be really useful!
Yes - this would really help
@@orangojapan821 Same here. It will be useful, but I don't suppose they'll provide that. Toying around with tools all by ourselves is the best way to learn maybe
Is there any way to anchor links using CSS ID to the menu items in the header? I can't do it like how it is shown in the video because Elementor doesn't recognize that as one of it's elements.
The best tutorial ever, thank you so much!
these tutorials are great and very thorough. I think this is the older version of Elementor, I am just starting to use it and some features changed with time. it would be great if you did an updated series of this because I get lost sometimes and don't know how to proceed.
and it would be the greatest if you could share the file package you're using in the videos :)
As always, everything is super. Waiting for new crack from your team
wow great tutorial for a beginner like me love the way you teach thanks
I'm so happy to hear that, Sadogar.
At 15:30 remember that you do need to add the spacer widget to the column with the background image, otherwise the padding won't take effect.
22:46 I followed your instruction but I could not drag the column to the left. Are there any conditions which don't allow to drag?
It's great to have such a helpful tutorial video series. However, it is so frustrating that it is NOT uptodate with current version so I'm having to repeat most short sections over & over to find the equivalent on my screen (mulitple side by side screens) to what is being demonstrated. Many features look different, are found in different places, or operate differently. I'm a techy, but still finding this difficult to follow.
It would be nice if you provided the image resource files.
Great ! is there any way to know the fonts are used in this example , i love them hahaha
Bug at 16:07: The margin of 10px you set for a column with a background image only has no effect in the current version of WP 6.2.2 and Elementor 3.13.4. You can even set the margin to 100px and nothing happens if you save/update the changes and try to preview the page. It only shows the effect while building the page but not when you want to see your final result. It would be great if you can fix the bug.
I followed every step for the page and i like how modern and dinamic it looks but in the responsive for smartphone its kind of a mess, does anyone have any reccomendation to try to keep the style in a more stylish way for mobile devices?
Same problem. Kinda works on desktop but tablet and mobile is all over the place.
Hi, thanks for the amazing video. My Wordpress website is okay but somehow not letting me pick and scroll the elemntor widgets from the sidebar whilst creating a page or blog post. I have completed a manual backup to my dropbox but not sure how shall I proceed further to activate elementor features correctly. Please can you advise?
i'm following step by step but the scrolling effect is different, the sections don't scroll one on the other and the menu stays fixed on top of the page.
It's a real awesome tutorial, thank you so much for the effort that went in to the tutorial. Is there maybe a place where we can get the images from? It is a bit of an uphill battle if I don't have the right images.
Thanks 😘
thank you so much dude you're a god
I haven't created a website using elementor in two months and I was struggling to remember how to use sections but thank goodness to this video.
Hi - I'm enjoying this series - one difference right at the beginning, possibly an update to the program, "Inner Section" at 1:42 isn't in the list of widgets. The first widget is called "Container" and I don't see how to modify it to 2 columns?
Hi Willi, you are likely using either a Dev or Beta version of Elementor. You can disable Containers by going to WordPress Dashboard > Elementor > Settings > Experiments, and setting Container to Inactive. This will bring back the Inner Section widget in the Elementor Editor. Once the Container feature is officially released, we will have tutorials covering it. Let us know how how it goes!
Awesome Tutorial! super well done! just a quick question, in case I want to have a more elaborate footer, do I still set it from the site settings? or should I use the elementor theme builder?
Hi Francesca! Yes, For a more elaborate footer we recommend using the theme builder 😊
This feature is available for Elementor Pro users.
@@Elementor Thank u so much!!
I must have missed something significant in the lesson where you set up global colors and fonts. When I drag a heading widget into the inner section per this lesson, it didn't behave at all like it does when you performed that operation. It manifests no global color or font properties. The font is black and is all lower case. Can you please explain how when you drag the heading widget in, it manifests the global font settings you set up in a previous lesson?
Hi Michael, can you hop over to the Elementor Community thread for this course, and post your question with screenshots there? elemn.to/gettingstartedforum
Great, great video!!! Thank you very much! Please make more of this type. A bit longer, very informative, with real Homepage design examples. Also if it is possible - can you make a video, where you explain a bit more about image manipulation. Sometimes, on a 2 column design, where, in one column is an image and in the second text, when I try to make it match visually it is a pain. I add the image as a widget, and make it smaller or bigger- I can not match it, then I put the image as a column background, and try to manipulate its size- also a pain.
Hi Geraldo8585, thanks for sharing your feedback. We have lots more courses in store for you and will share your request with the team for more image tutorials.
I have the same problem... I can't change the size of the widgets (text or images) inside my column...Please help @Elementor
Great Tutorial!
Do you have a elementor PRO for detect automattic a link to page Our Menu?
Thanks, Leonardo! You do not need a pro plan to link directly. However, the page must be published in order to connect it.
Hi - I'm struggling to get the text to display properly. Following instructions but text isn't line spaced and doesn't appear in the container widget as shown....
I just wonder and tried to understand, What is the main difference between Inner Section and Two Column Structure? What is the main goal for using inner section into Hero Section? Please elaborate.
my image is not getting fitted inside the secction. it always lesser than the section . how to perfect fit in the section .
great!! thanks a lot..
Hi Surya, I hope you enjoy the course!
@@Elementor how i get all those image for practice?🤷? Plz reply me..
Hi Imitius, we recommend you apply your own style, content, and images to customize your unique website.
Hey Elementor team! The tutorial course is great, thank you. BUT! The videos really should be updated with the new structure [container,grid etc] cos its very confusing and frustrating that I am trying to follow the course as per video but in every section I need to google up extra help and explanation for stuff because the program doesnt work or act like how its been on the tutorial and it is very time consuming. As a beginner user of Elementor its really really frustrating 😢😢😢
Please provide the course assets, so that the tutorial will be east to follow along with.
Just a small question, as in the videos we selected 1500 px for the width of the webpage, how does elementor work with scaling, like if the webpage is later viewed on a higher resolution screen how does it adapt?
I think some parts are missing because the global header doesn't look like that when I add a new header at the bottom; I have to manually select the global setting. I also don't understand what's up with the pictures. They look fine when I look at the website on a desktop resolution but when I switch it to a different resolution, the pictures (and even some of the layout) is all jacked up.
Do you recommend resizing images with a plugin, or resizing images prior to uploading them and inserting in your site?
Hi Dee, this video should help you out with your questions: ua-cam.com/video/8BqHUx6Zex4/v-deo.html
Aviva rocks! ♥♥♥
Where is the project folder with all these images?
Hi Yash, we recommend you apply your own style, content, and images to customize your unique website.
@@Elementor I respect that you are trying to inspire creativity, but it would be helpful to absolute beginners like myself to get the basics down and get a feel of things. These lessons are designed as a practice tutorial, so it would be beneficial to have the actual practice material seen in the tutorial to check if we are getting the same desired results. With that said, could you please send a link to the project folder?
@@Elementor when studying webdesign at the University or most online courses like lynda, stock skills, etc. They supplied all the elements to all the courses. This way we are paying attention to how to build and learn instead of worrying about what are we going to place here, what color to choose, or any other element. You will learn greater this way. Then we can go back and customize afterwards.
At the bottom where it says "Drag widget here". Just outside of that big rectangle. Can you change that white color to something else ?
شرح مبسط وشامل
thanks
Hi, great tutorial. I have a small problem. I can't set tablet and mobile responsive mode. When I try to do that, it affects on desktop version. I follow the tutorial but I don't know where I am wrong.
Hi Anita, only settings with viewport icons can be changed for specific sizes. If a setting doesn't have a viewport icon next to it, changes will affect all sizes. Check out this video on responsive design for more details: ua-cam.com/video/EqFxeluk4U4/v-deo.html.
Thank you a lot 🤗
I know people have said this before, but I'm going to say it again. PLEASE provide assets for us to work with when doing these tutorials. I've never once done a tutorial where assets were left up to the students. How can we know that we are doing things correctly if we aren't able to compare our results to yours? This is so strange to me. I'm enjoying this course and it's been helpful, but I can imagine that a lot of people gave up before they even got to this point.
Hi mix, thanks for your comments. We recommend you apply your own style, content, and images to customize your unique website. If you are looking for a course with assets provided, please check out our Blog course: elemn.to/blogcourse.
The addition of the inner section in the first section appears to have added an additional margin. It does not align with the second section which does not have an inner section. If I add an inner section they align. How can you ensure sections align when one section has an inner section and the other does not? thanks.
Would this tutorial be updated to the new flexbox container?
I'm looking for the assets used in this demonstration. Is there anyway you could include this?
Hello, I have problem with drag and drop photos. When I try to move the picture on other position, she's back in the same place. Please for help..
thanksssssssssssss..............
At 7:12 i don't have the hoover Animation botton..
But i have switched it from normal to hoover.
Is that a feature from the elementor pro?
Hi @DrLH-rf2sv, thanks for your question. Hover animation is available in the free version. You need to click on the Hover tab to display this option.
these videos are very helpful but i need a little help, I'm designing my website by following your video and i update every time when I make chnages, but as i click on "visit website" from dashboard it does not show exactly the same design, I think it needs to be publish, can you please guide me how can I publish completely
Hi manhoor, can you head over to the Elementor Community thread for this course, and post your question with screenshots there? elemn.to/gettingstartedforum
At 18:30, you drag the heading from the left column to the right column. However, I am unable to do so in elementor. I cannot drag it as it does not allow it. Has Elementor changed their services to not allow dragging anymore?
I experienced the same thing. After many attempts I decided to press the update button and do a refresh (F5) of the page, and then it worked. Perhaps doing either would have worked too.
Maybe I missed something, but how do you generate a window on the main scrolable layer that reveals a static (or animated) background.
Hi m2v, are you referering to the background image? We set the image Attachment to Fixed ua-cam.com/video/LjQptEShDJo/v-deo.html
Anyone has access to the assets used in the course?
Hello there, i am new user to this elementor and wordpress. I’m having troubles with the live preview modes. I’m using elementor 3.14 and my live preview is showing and different and older version of my page. It happens to all my pages. I’m using a local server xamp. Can anyone help me? Much appreciated
11:57 cool! :)
Looks like the inner section is replaced with a (flex) container. Should I just use two of containers now, instead of a two column inner section?
This is whats writen inside the experiment settings, but I don't have the Inner section widget. ??
"This experiment replaces the current section/column structure, but you'll still keep your existing Sections, Inner Sections and Columns and be able to edit them"
Hi Neven, existing sections and inner sections will not be deleted when activating flexbox in Experiments, but you will no longer have those widgets available in the widget menu.
How did you add the small squares to PLANT BASED?
Hi Michael, great question. It's a glpyh. You can use standard glyphs like this in most fonts. www.glyphy.io is a great resource for finding glyphs. Click any one to copy it, and then paste it into your text.
@@Elementor How did you center the square and change the size of them . The type size looks smaller and centered to the middle.
What is the equivalent of "inner container" in the newer version, please?
Hi taariqq, you can place containers inside containers.
@@Elementor Using Flexbox, that is exactly what I ended up doing ... but then, I had to adjust the left margin to -10px ... just visually ... not sure if that is a permenant solution, but good enough to get through the tutorial.
Great tutorial guys ... just wonderful ... that is how the beginners learn. Simple little steps and build simple things.
Elementor has come a long way! Great to see. I remember using it years ago ... and when I saw Webflow, I switched over. Not that I built anything professional ... but I moved, especially since I loved tinkering with the CSS and Flex and stuff.
Lately, a friend of mine advised me that if you want to start generating income quickly, get good at Elementor ... Praise be to God. I thank him for the advice and you for the tutorial ... Cool.
My elementor don't have "Hover Animation" option (In 7:17 minute). Is there this option in Elementor Free or only in Elementor Pro?
Hi Acrisio, this option is found in both the free and Pro versions of Elementor.
Version 3.11.1 - New user - At timemark 5:04 you say the software should pop up a recommended hyperlink to the web page when you type in "our menu". Mine does not do that. Yes the page is Titled "Our Menu". Had to copy/paste the web page address from the menu bar selection at the top of the page.
Great tutorials, however, I am not able to put in more then one header in the inner section. Why is it that you can?
Hi The_Handy_Man, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors.
where do i get images
Is Elementor Pro used in these tutorials? A lot of things don't match in the Elementor I am using
Hi Christine, this course uses only Elementor free. However, there have been some changes to the Editor since the course's release, which may be what doesn't match.
In my elementor pro version, inner section is not part of the widget on the icons
Hi Ajanaku, have you activated Flexbox Containers on your website? If so, you won't have Inner Sections anymore. Containers replace Sections and Inner Sections.
14:02 there's no option for this? Attachment fixed?
Hi Aiden, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? We've created a special thread for questions relating to the course and you can share screenshots there as well: elemn.to/gettingstartedforum
I'm afraid I struggled with the fixed images. It worked on desktop but looked all over the place on tablet and mobile. Have spent hours trying to fix it but no joy. Perhaps highlighting what to do for responsive applications would help.
Exactly, I am having the same problem! Really disappointing. There is no point in making a website that is not responsive in mobile. And this fixed image effect is what makes this template so appealing. I sticked to it just to be sure to get great results. I did not get them.
@@RitaDeeDee Hi there. I tried to reply yesterday but my message didn't post. I spoke to someone at Elementor support who advised me that the effect only works on desktop and not on mobile. It's a shame that the video doesn't explain that. Hopefully, they'll update it. Hope it helps. 😁
@@kammistry Hi! Thank you so so much for your help and that you took the time to reply! It is really driving me crazy! They really need to explain how to adjust so that the image still looks good in mobile, even if the effect is not working. Have a great day!
Hello! where can i find all pictures?
Hi Arttu, we recommend you apply your own style, content, and images to customize your own unique site.
@@Elementor but if people are following along with the tutorial, it would be nice if you provided the images or at least what we need to create because as is, we have no idea what sizes the images should be.
@@Elementor Perhaps add a watermark to them so they can't be used effectively on live sites.
I couldn't get the finished product as my homepage because it keeps going back to a non-elementor page. Anyone could help?
🗽
I followed the step in 2:19 but my box the with plus in the middle did not stretch to 700 px pls help
Hi Shardio, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get great advice from other web creators. And you can share screenshots and links there as well: forum.elementor.com.
Hello, is it true that we cannot edit our post page with elementor? I tried so many times but failed.
I also try to make new page as my post page. At the beginning I can edit it with elementor but as soon as I set it as post page, the option to edit it with elementor do not appear anymore. I am so confused.
One more thing, I am using Hello theme. How can I disable the Title that written as Archive at my post page? I try to search it everywhere but I can't find the solution.
Hope you guys can answer my questions. Thanks in advance.
Hi Tomo, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get great advice from other web creators. And you can share screenshots and links there as well: forum.elementor.com.
I don't have the Inner Section widget, but I have Container widget in place of this. I am very sad about it and I waste a lot of time wanting to do everything as it is in the video in the course.
Hi Katarzyna, you are likely using either a Dev or Beta version of Elementor. You can disable Containers by going to WordPress Dashboard > Elementor > Settings > Experiments, and setting Container to Inactive. This will bring back the Inner Section widget in the Elementor Editor. Once the Container feature is officially released, we will have tutorials covering it. Let us know how how it goes!
What happen to the inner section widget she is referring to at 1:32?
Hey Ej, have you activated Flexbox Containers on your website? If so, you won't have Inner Sections anymore. Containers replace Sections and Inner Sections.
I wish to offer the assets that has been used in the course to practice on it
I wish that too
Is "inner section" now called a "container" on the latest version?
@excitecats2235 Sections and Inner Sections have been replaced with Containers. However, you can still revert to Sections, if you prefer. Please see these videos for more information:
ua-cam.com/video/RkAXKKb6iXE/v-deo.html
ua-cam.com/video/oxewS70TTIk/v-deo.html
good
What am I doing wrong? My fixed (Attachment) Images look totally different from screen to screen and browser to browser.
How does that website look on mobile?
Hi Tantra, you can see it in the next lesson: ua-cam.com/video/sNLlysb87gY/v-deo.html
There is no "inner section" widget (mentioned at 1:40).
Hi @chetancrasta, have you activated Flexbox Containers on your website? If so, you won't have Inner Sections available anymore. Containers replace Sections and Inner Sections.
I use elementor in wordpress, it keeps saying 500 internal error when i try to update or save
Hi Sana, check out this article for help troubleshooting the 500 error: elementor.com/help/500-error
How do you do that square?
Hey Klajdi, which square are you referring to?
What is the symbol or bullet point you used next to "Plant based?" I''m trying to replicate it!!
Hey Daniel, it's this bullet symbol ∙ (you can copy and paste it directly into your text). You can find lots more interesting symbols on glyphy.io/cool-symbols and copyglyphs.com.
Whatever I get from the widgets menu, it takes two.. it always takes two and I have to delete one after the other... a waste of time ... help please
Hi World, can you please check to see if you are working in a beta version?
@@Elementor I'm using Elementor v3.6.0-dev 22... there is still a problem... Elementor Beta (Developer Edition) active in version.... -----Element orent or 3.6.0-dev22 enabled also Elementor Beta (Developer Edition) 1.1.1 room enabled
inner section doesnt exist anymore?
Beautiful lesson! Greetings from Brasil. Stay Safe! Vaccine now!
There is no inner section widget in the hello theme anymore.
I had the same headache! It is now called a container. It took me a little trial and error, still. As replied by Elementor to another viewer: " Sections and Inner Sections have been replaced with Containers. However, you can still revert to Sections, if you prefer. Please see these videos for more information:
ua-cam.com/video/RkAXKKb6iXE/v-deo.html
ua-cam.com/video/oxewS70TTIk/v-deo.html"
My fixed images are not working properly on tablet or mobile. Really disappointing. There is no point in making a website that is not responsive in mobile. And this fixed image effect is what makes this template so appealing. I sticked to it just to be sure to get great results. I did not get them. Can you please let me know where to find how to fix this problem?