Elementor Transparent Headers with Position Absolute
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
TIMESTAMPS:
0:55 Method 1 - Using negative margins
3:48 Method 2 - Position Absolute
5:44 Building My Menu Tut
12:10 Mobile Menu Set Up
In this tutorial, we'll look at how to create Elementor transparent headers using position absolute. This is an easier method than the negative margin method. We'll also look at building a header and menu inside of Elementor.
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial - แนวปฏิบัติและการใช้ชีวิต
The production quality is Lyt! 🔥
New full frame 😉
Thank you Jeffrey, I always learn from your videos.
Thanks Mike! 🙏
Great tutorial, Jeff. I use the Astra theme and Elementor. I make the transparent header inside the Astra customizer. But it was great to watch the tutorial using Elementor. Thanks.
It’s nice when a good theme gives this option making it easier for us and Astra has always been a great theme 👍
Mr Jeffrey, What About the Sticky Top Method?
Works perfectly with this. Just select sticky to the top and that's all. I'm using it in this example website.
Nice video. Its better to use negative margin because you can use .elementor-sticky--effects class if your header is sticky to add some effects (like delete some items or change colors on scroll). If i need some pages with negative margins and some without margin and another background color i add some custom css to first block on page like: .headerblock { background: black !Important; margin-bottom: 0px !Important}.
Good points
This is better because a section of your image will not encroach in the header section.
That is a good bonus 😉
Jeffrey is there any solution if the top container is also absolute but not using negative margins? in this video the top container is not absolute, my problem is that im using two transparent container but i only want the second one sticky
You'll need to adjust the vertical offset on the bottom container to use both top and bottom set to absolute.
Absolute works if you need the header to be sticky to the top?
Yes it does. Since it's a translarent background, you'll need to add CSS for .elementor-sticky--effects and give it a background color on scroll. It all works with absolute 👍
Jeffrey what theme you reccomend using with ELEMENTOR to create a woocomerce shop? I usually use HELLO THEME but im a bit tired of making ALL from scratch
Check out Rey Theme. It’s been a while since I used it but the developer is great and he’s been keeping it up to date with regular updates.
@@LytboxStudio Thank you very much for responding. Yes, I'm looking for something that adds a bit of style to WooCommerce right from the start, but that I can edit absolutely everything with Elementor. I want a balance between both options. Hopefully one day the Hello theme will be modernized a bit, I don't want big features, just something that doesn't look horrible from the start... for example better animations in the add to cart button, etc
I have a white logo and using elementor hello theme. When I use it on mobile menu, the toggle button shows white background behind it. I have tried transparenting the background but it shows white. I am forced to use grey color and it looks ugly.
There is an option in the WordPress menu widget to change the background to the toggle button. Try changing that to transparent. Another option is to give a white background to your toggle and make the bars a dark color. It’s more user friendly and can look better.
Hi teacher. Can you show me if our title or description is overflow so I just want to show only 1 sentence and other text is show ellipse so how to do in elementor ?
That's a great Idea for a video!
Is using absolute positions recommended for Google SEO practice?
Great video!
Doesn’t have positive or negative effect on SEO. Google bots read the html, not css and absolute positioning in the header won’t affect performance,
Thanks Jeffrey. One problem: this is not working for me. Is that because I am using the free version of Elementor?
Might be. The free version is super limiting and I think the header is limited in the free version.
Hi Sir, can you make a video on sticky header with elementor pro without using code?
Sure, it would be a quick one. If you follow the menu I built here, all you need to do is go to the container you want to stick > advanced tab > motion effects > select sticky to the top. If you want to add effects then it will take some css but this is a good start.
@@LytboxStudio Thank You Sir
please tell me a web browser which can do drag and drop work on mobile except Puffin browser, it is not working
Chrome works on my iPad. I wouldn’t try anything on a mobile phone though.
No bricks 😢
Coming up next 😉
Plz jeffery dont go with direction of bricks alot of from your audience they love elementor and bricks and other is not safe and you can see what happen with cwicly please stay with elementor and all thr featuers which is now inside bricks will come to elementor @LytboxStudio
@@Omer-user not to worry! I'm not abandoning Elementor. But I think it adds value for us all to learn more and Bricks is an amazing tool. It's not going to pull a Cwicly on us 😉 I do want o expand in more areas of web design here because it's an amazing world and we all can keep learning.
Hi Jeffrey, good video as always. Given the quality of your content, I'm surprised you don't have more subscribers...people who post brainless inane garbage with no merit or redeeming social value have subs in the hundreds of thousands, and so many good channels like yours don't get the recognition they deserve. YT is just so f*cked...
🙏
Using the absolute will affect the speed: you can test that.
Same load as position relative. If there is a difference then it’s so minute it wouldn’t be noticeable.
how to optimize ?
What do you want to optimize?