Elementor Transparent Headers with Position Absolute

Рет қаралды 10,693

Күн бұрын

✨ 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

Пікірлер: 42

@mikecharles6767 4 ай бұрын

Thank you Jeffrey, I always learn from your videos.

@LytboxStudio 4 ай бұрын

Thanks Mike! 🙏

@Atulwebdesigner 4 ай бұрын

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.

@LytboxStudio 3 ай бұрын

It’s nice when a good theme gives this option making it easier for us and Astra has always been a great theme 👍

@NicholasZein 4 ай бұрын

The production quality is Lyt! 🔥

@LytboxStudio 4 ай бұрын

New full frame 😉

@ashleywalls4097 15 күн бұрын

If you Don't yet have content on the page yet and you set header to absolute and give it a high z-index you can not click the + or folder icon to add content.

@P_o.crypto 4 ай бұрын

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}.

@LytboxStudio 4 ай бұрын

Good points

@emmanuelivwighre5399 4 ай бұрын

This is better because a section of your image will not encroach in the header section.

@LytboxStudio 4 ай бұрын

That is a good bonus 😉

@dgdkothalawala Ай бұрын

Mr Jeffrey, What About the Sticky Top Method?

@LytboxStudio Ай бұрын

Works perfectly with this. Just select sticky to the top and that's all. I'm using it in this example website.

@yuyogameplay 3 ай бұрын

Is using absolute positions recommended for Google SEO practice? Great video!

@LytboxStudio 3 ай бұрын

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,

@zafit02 3 ай бұрын

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

@LytboxStudio 3 ай бұрын

You'll need to adjust the vertical offset on the bottom container to use both top and bottom set to absolute.

@user-cy5hm6ym5v 4 ай бұрын

Hi Sir, can you make a video on sticky header with elementor pro without using code?

@LytboxStudio 4 ай бұрын

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.

@user-cy5hm6ym5v 4 ай бұрын

@@LytboxStudio Thank You Sir

@mdqmatias 4 ай бұрын

Absolute works if you need the header to be sticky to the top?

@LytboxStudio 4 ай бұрын

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 👍

@zafit02 4 ай бұрын

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

@LytboxStudio 4 ай бұрын

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.

@zafit02 4 ай бұрын

@@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

@WilliamMcEntee 3 ай бұрын

Thanks Jeffrey. One problem: this is not working for me. Is that because I am using the free version of Elementor?

@LytboxStudio 3 ай бұрын

Might be. The free version is super limiting and I think the header is limited in the free version.

@thevideas 2 ай бұрын

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 ?

@LytboxStudio Ай бұрын

That's a great Idea for a video!

@Moderator. 4 ай бұрын

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.

@LytboxStudio 4 ай бұрын

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.

@Ubaishkhan. 3 ай бұрын

please tell me a web browser which can do drag and drop work on mobile except Puffin browser, it is not working

@LytboxStudio 3 ай бұрын

Chrome works on my iPad. I wouldn’t try anything on a mobile phone though.

@thereal_JMT_ 4 ай бұрын

No bricks 😢

@LytboxStudio 4 ай бұрын

Coming up next 😉

@LytboxStudio 4 ай бұрын

@@CR7-r2f2e 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.

@harbourdogNL 4 ай бұрын

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...

@LytboxStudio 3 ай бұрын

🙏