ONE PAGE AGENCY WEBSITE - Elementor Wordpress Tutorial Flex Container
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- The long-awaited one-page website is here. Spoiler alert: not optimized for mobile but that version will be a follow-up video. I honestly overestimated the amount of work it will entail to make the video from A to Z 😂 let's just say it has been an extremely busy month!
I hope you enjoy it and do leave comments, I need your feedback to improve this kind of videos.
Full playlist as mentioned in the video: • One page agency website
Clamp @websquadron explainer video: • How to add Fluid Respo...
Clamp browser support: developer.mozilla.org/en-US/d...
Timestamps:
00:00 Intro
01:04 Global styles
05:07 Building the 'Hero' section
25:13 Building the 'About us' section
58:59 Building a 'Testimonials' component
01:03:24 Building the 'Work' section
01:06:24 Building the 'Services' section
01:13:13 Building the 'Navbar' section
01:32:14 Building the 'Footer' section
01:45:22 Showing you how popups have been integrated into this website
01:48:04 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
Protect this girl at all cost!!! she is very professional in terms of interactivity and modern design using elementor, i am about to shift using webflow because of these animations but then I found this channel, It's now possible to create a modern and story telling sites like in webflow using worpress still an elementor.
Never thought I can build a website this beautiful using elementor. Found your channel today. Subbed!
I like your creativity and the way you make new designs using simple techniques. Keep uploading more creative content!
Your amazing, thank you for renewing my faith in Elementor. I enjoy watching your tutorials in as much I admire watching how good you look when lecturing...
You are very welcome and thank you!😁 yeah, trust me, I do this to keep my faith in Elementor alive :)))) pushing it's boundaries to see where I can take it.
Whhoooa i just discovered your channel today. And between you and rhino, i think you just saved my business and creativity ! Thanks !!
I am a recent subscriber to your channel, and I must express my sincere appreciation for the exceptional quality and usefulness of your videos. Keep up the fantastic work!
Thank you so much for subbing and for the kind words! 😃
I'm from Indonesia, I'm really amazed by that design. This convinced me to subscribe to your channel. The design and yours are both beautiful
I can't imagine we can build such kind of site's in elementor, looking forward to see more full design tutorials from you
...and so much more!
I am very happy to watch your video. You are doing a lot of work for us. Be happy and make videos like this for us. 😇
What a great video Andrea! i've follow u since ur video about Gradient Mesh, Keep it Up!
Thank you so much 😊 will do!!!!!
Very nice design. Could be a candidate for awards. Definitely a very inspiring project!!! 🎉🎉🎉
Thank you so much! You know what, I was actually thinking to submit it. I just need to polish it a bit more and then we'll see.🤩
The website design is beautiful as you❤
Awesome Andrea! Keep making
Thank you, will do! 😃
Andrea, keep it up, you are the best. Thank you for helping us improve at Elementor Designer
Thank you! Will do
Amazing ! Excited to see your video.
It showed me what such a great design can do with Elementor ! This video is the best teaching tool for me.☺
I really admire your great talent and sense of style !
Glad you liked it!😁
Well done !! i will make one for my portfolio
Love your content, continue on making!
Thanks, will do!
Truly good work!
Thank you 😊
Thanks Andrea! You are amazing
You're welcome, Victor😁 thank you!!!!!
Simply awesome 🙂
You are amazing, thankyou soo much for these videos ✨️✨️
Awww, thank you for your kind words ☺️
letsgooo cant wait for tomorrow
🥳 let’s gooooo!!!
You're easily one of the most refreshing web design channel. Earned sub.
Are you planning to do some stuff about e-commerce ? I think there's a lot of tutorials out there, but I feel like none of them are really creative and this is near 2024...
Thank you so much! Yup i'm trying to make WordPress sexy😁 like webflow is to some. I'm not sure, do you have anything in mind in terms of e-com?
Hey Andrea how's going? Ur tuto are amazing, thanks for sharing with us. Would you have a tutorial for that marquee texts on scroll trigger?
Your creativity it's amazing!
Q, how did you do that video cta that grows on hover? Css?
Thank you so much ❤
you're my hero 🖤
I don't know why but I like the sound of that😁
Awesome💫💯 !!! Thank you
Welcome!
Hey there, love the tut. As for tabs, don’t copy and paste each item one by one. Just design one tab and duplicate the full tab element . You will have all of your content and settings duplicated… cheers and keep up the good work
Hey! thank you! Hehe, yup, I was not used to doing that but it's second nature now😉
Amazing Art Work
Thank you so much 😊
Say to say but this channel is very underrated....!
Thank you🤓
so glad i found you
😁
You're a good teacher 😘
Thank you so much 😊
🙏 Thank u for sharing this with us
You are very welcome! i hope you enjoy it
Are you guys excited like I am?????
Love your energy 😁
I‘am🎉
very best
Thank you for the informative tutorial. Now, let's explore how to create it.
Go for it!😎
its amazing ❤
Thank you 😊
Hey andrea, thanks for providing such cool content! Expecting more such videos tutorials in future
Thank you! Will do!🤩
design is outstanding.
Thank you 😊
love the candle.....zen is definitely the best place to code! lol
hehe, thank you and yes, I always have a candle burning when I'm working!😁
Bravo, interesant! 🤔😊❤️👌👍👏👏👏
the movie of the year 🤓
Hey Andrea! Been watching your videos and I am amazed by your design abilities. However, I have a question about this video in particular, how did you create the navbar. You said that you would use the one in your awwwards inspired one but the design, and alignment are different.
Thanks
Hey! Thank you so much! Well, you basically need to modify the navbar that I reference. Use that as a base and build on it.
Lol i don't onow how it may sounds, but am dying for you to make a course on elementor tutorial. Ill buy it a 💯 times. ❤❤🎉🎉
Cant love you less.
You are awesome 😄😄
Thank you😁
Hey, as a tip: I do not use vh for the inner containers or inner tabs - I use pixels instead - that way containers stay same size and in place, when stretching the screen size
Hey! Thanks for the tip😉
Beautiful, can you make a tutorial of your header menu?, looks amazing
Thank you so much! Already available here th-cam.com/video/JxRXKrBznj4/w-d-xo.html Of course, you can customize it to your preference😉
Thank you
You’re welcome!
Andrea dropping golden bombs everyone!!! Thank you so much, learning a lot from you!
😂 you are welcome & thank you so much for watching!!!!
Dot get me wrong I would love to use this for my own page.. but what should I use for the mobile version?
after this you are free to go to the sea! good vacation !
The best comment award goes to... I'm actually doing research for the next video
@@andreaegli
Hi Andrea, if you want, could you send me the json file of this last video?
I would like to study it
Thanks! :)
29:36 The images appear to be on top of the awards banner and scroll over the border instead of behind it. What could be causing this?
I am trying to replicate the website. While working on the hero section, I encountered a problem while creating the right side of the hero section containing the hover expand video. I have built the hover expand using the link for the playlist and copied that container but I'm having an issue because of the expanding video the whole hero section is getting expanded and there's extra space added between the text widget and video expand container even though I used the same spacing as you used.
Hey, loving this video so far!
Where can I find the custom CSS code from around 28:30? 🤔 My logos go over the border when scrolling, wonder if that's what the code is for haha. Thanks in advance
Hey Joey! Here's the code: selector .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-moz-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
but it will not fix the logos going over the border when you're scrolling tho...that's a very strange behavior
where is the link of another video tutorial for nav bar?
you did not share how to create same contat us page, it look beautiful please if you get time please
What is the best way to convert this for mobile use?
I’m hoping there are some amazingly modern, dynamic on scroll (and of course mobile friendly) styles thought out (as of course Wonder Women here can bring 💯)! #Priceless
There are but I have to disappoint you a bit, the mobile version is not featured in this video. It was too much for me to film & edit (I underestimated the amount of work it takes to produce such a video) but it could be a follow up video maybe 🤓
Wow She is Ultra pro max Designer.❤
😂 thank you
Hi Andrea thanks for all example are very usefull and super design. I want to ask you where can i find the example for moving the icon list at 22:51
You are very welcome! There's a playlist in the video description, it contains all the videos I'm referencing in this project
Hi, Andrea, I am a recent subscriber to your channel, and want to ask about 15:09. How you do to build the 'EXPANDING VIDEO ON HOVER'?(Forget this, i finded your video that your teach how to)
I searched on entire youtube to find a channel that teach "how to build" to build this effects in Elementor and i really appreciate your work. Thank you!
😃 hey André! Thank you so much! Let me know if you have any request
Your gsap effects tutorials on Elementor are awesome. I'll watch all of them. 👍
please share the code (js & CSS) 1:03:24 Building the 'Work' section and in the last your designs are so cool and beautiful. I really impressed you with creativity. keep sharing the videos
This video should have everything you need in the description th-cam.com/video/lJO-uIePihM/w-d-xo.html
@@andreaegli thank you
How does it work on mobile?.. I love this so much. I like to use it for my own page but it also need to work on mobile to be trust worthy. Can you make a part 2?😅❤❤❤❤
Can you make a video on custom cursor? that would be very helpful thanks
Hey! I have made two videos on custom cursor, you can find them on the channel🤓
Dear Andre, please design a landing page for an online product. I know your time is valuable, we thank you for helping us with this work and it is a value.
Thank you so much! Yeah, something like that is coming next month 😉 any product you had in mind?
hello Andrea, my how to setup elementor? I have installed elementor but this mine is not as organised as yours.
Hey! Activate the top bar from the elementor features option and it should look like mine ;)
I couldnt find the video mentioned by you on the 15 `minute ?? Which name is it so that I can find it ..please??
It's this one th-cam.com/video/5PaTe7SzzEg/w-d-xo.htmlsi=MB3XA9pRLCaByyFM
How did. you do the „work“ section. The Video in the playlist is quiet different.
it's this video: th-cam.com/video/lJO-uIePihM/w-d-xo.html
Okay thank you! But i don’t know how you did it when you Click on the Coffee Rosterei. It only Open a section Not a whole page.
can i build my design in figma from scratch and use elementor for puplishing????
Yes!
heyy Your tutorial Was Amazing but i want to one thing that in hero sectionn you make a video button when you hover over on this it is expandable How should you do that Overall Your Tutorial best just kinldy Tell me how you make this Please Thanks
Thanks! There's a playlist in the description of the video, have a look there
cant the videos where you built those sections
Check the description of the video, there’s a playlist made specifically for those sections
what is the theme that you`ve used in this project?
Hello. I always use Hello theme for my projects
YOU had mentioned the GSAP link, I do not see it?? (Thanks!!)
Hey! Check the playlist link in the description, each video related to gsap has a link to the gsap CDN. Hope this helps 😉
@@andreaegli thank you!
Can I buy this as an Template?
ma'am pls make contact form which is use in this video
Hiya Andrea. Which Theme are you using?
Hey Floyd! I always use Hello theme since it's made by Elementor
@@andreaegli Sorts. Thank you.
At 55:10 could you just make duplicates of the tab and edit from there? Would that be easier/ possible?
PS: Love your work and thank you for sharing your knowledge with us all!
I wish you could but at the moment Elementor does not allow that which is so annoying.
Thank you so much😉
Use a different tab from another plugin with features that allow you to link the container to your tab. Hope this makes sense.
To add to 25:00 - never start on mobile in Elementor because the way it is built, responsive "trickles down" from desktop to mobile. You will have a nightmare optimizing the other way around...
Yes a mil times! Pure nightmare, it's much easier to remove elements than to add. Even when I was coding websites from scratch I was never starting with the mobile view. It just does not feel natural to me....
it's mobile friendly?
By the way your own domain is not working so you should try and fix it and can you save this website as a template and upload it somewhere on your server so that we can download it?
Oh Aziz, the thing that needs fixing around here is your attitude. My domain is working perfectly. What makes you think that giving me orders will get you anywhere. Follow the steps in the video and make it yourself like everyone else
did u use any theme? and is this elementor pro
Yes, I use Hello theme and yes, this is elementor pro
@@andreaeglican i make the same in elementor free ?
Do I need to buy lenis?
No, it’s free. Just use the code I’ve provided
This is first video of pro website from elementor
On this channel, yes 😀
for timestamp 28:36 where is the link located???
Have a look in the description of the video, there is a playlist there that contains most of the elements I show in this video
Wheres the follow up
Are you using elementer pro?
Yes
wtf? 😍
Theme?
Hello, always Hello
@@andreaegli Thankew :)
Template to download json file
Not available atm
@@andreaegli other elementor templates
YOU SHOULD NOT USE YOUR FACE RECORDINGS VIDEO CAUSE IT HIDES THE NAVIGATOR AND AUDIENCE CANT SEE WHAT U DO IN NAVIGATOR, OR U CAN RESIZE YOUR VIDEO PREVIEW OR CHANGE ALIGNMENT.
Thank for you feedback
Why is he shouting.. @@andreaegli
@@Webrisernl he probably has hearing issues other than visual 🤣
@@andreaegli haha yes!
Bro stop shouting lols 🤣🤣🤣
Hey sister🥰 I am your big fan I always follow your videos on youtube.
Are you looking for a professional TH-cam thumbnail designer at a low price?
hey! Thank you! Not at the moment but I'll keep you in mind if and when I will
u cute af i like your energy :))
You spoke so much than your tutorial 😂..
It's called explaining😂