Modify the Hero Banner for Mobile Responsive - Elementor Wordpress Tutorial
HTML-код
- Опубликовано: 11 сен 2024
- Modify the Hero Banner for Mobile Responsive - Elementor Wordpress Tutorial
Hire us to work on your Website! info@websquadron.co.uk or visit websquadron.co.uk
Get Elementor Pro: be.elementor.c...
Get Elementor Cloud Hosting: trk.elementor....
Support us: paypal.me/Webs...
Mastery Membership: websquadron.co...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- be.elementor.c...
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
@websquadron this was exactly what I was looking for 😀 Unfortunately, I only have the free version of Elementor for the time being so I can't add a cropped photo.
However, you did show how to manipulate the area enough so that I could at least get rid of the awkward hero banner on the mobile view and it looks awesome now! Thank you!
thank you! Worked perfectly. You are awesome and very much appreciated.
Now, the cat is not hidden by the text, but it is hidden by video of your face 😮. Joke.. Great video ❤
😅
Very helpful, thank you 👌
Which image option do you use to make it not resize and crop the image in mobile?
keep up the good work bro
Great video! Bravo!
great video, but do you have the video where you started to make the hero image in desktop. That would be great
Yes, it was the previous video.
When I upload an image for mobile, it changes it universally for tablet, desktop and mobile. What's going on?
Where are you adding it.
@@websquadron Edit with Elementor->Insert image->pink pencil square icon to the right. Insert imag. (in the edit image section)
You do not disappoint
As the 'crazy cat lady', my appreciation is strong for the use of the cat lol (cat Ipsum is my fav when building sites haha). Goofiness aside, these are great tips. I struggle with mobile design, so this is handy. One question - is there any issue using % on desktop, then px on mobile? I'm not sure if I'm being clear, but it's okay to change the units of measurement you're using on the same widget/section/etc? Does that also work for font sizes, like rem on desktop and px for mobile (if you'd ever want to)?
No issue with % except that it can become unpredictable based on differing screen sizes.
Indeed you can mix it up between responsive modes, so you could have % for Desk and px for Mob.
@@websquadron thank you! I figured that was the case, but I knew you’d know for sure. No idea why I’ve never even tried it lol.