Elementor FREE Horizontal Scrolling | NO plugins (CSS ONLY)

Рет қаралды 50,885

Күн бұрын

Today I'm going to show you how to create an Elementor page where you can scroll the sections horizontally and all without installing any plugins by just added a few lines of CSS code.
Again, we are going to use Elementor FREE.
We are NOT going to install ANY additional plugin, just a few lines of CSS code.
Enjoy!
Credit to coderoad.ru where I found this code. If you follow the rest of the instructions on that page you'll also be able to set anchors to link your menu items directly to each section:
bit.ly/2Y9QoLh
✅ CSS Code :
.entry-content.clear {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap{
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display:flex;
flex-direction: row;
width: 600vw;
}
.section{ width:100vw; height:10vh}
::-webkit-scrollbar{
display:none
}
------------------------------------------------------------------------
✅ NEED HOSTING ?
▶ Get Hosting Here 👉 mrweb.tv/hosting
This is a co-branded page that I have with Hostinger, Which means that I've negotiated special terms for my viewers and subscribers.
Enjoy up to 91% Discount + Promo Code 'MRWEBREVIEWS' for an extra 7% Discount
------------------------------------------------------------------------
✅ HIRE US --- NEED HELP WITH A NEW ONLINE PROJECT
▶ Do you need a new website?
▶ Do you need a custom-built project?
▶ Have an idea for a new website that requires custom development?
NO PROBLEMS... Our team of dedicated web developers would be delighted to help you with that
▶▶▶ Visit👉 mrweb.tv
------------------------------------------------------------------------
✅ LET'S CONNECT
▶ Twitter: / mrwebreviews
Feel free to follow me on Twitter as well
#MrWebReviews #Wordpress #Tutorials
▶ D I S C L A I M E R:
This video and description contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support! Everything in this video is based on experience, information we learned from online resources and tests that we've run. Please do your own research before making any important decisions. You and only you are responsible for any and all digital marketing decisions you make.
Background Music: Produced by Danya Vodovoz
• London Lounge - Royalt...
Royalty Free Music

Пікірлер: 98

@romanpalli8200 2 жыл бұрын

For everyone who's content rotates 90 degrees and scrolls vertically. Check the name of the main wrapper element. In my case it was page-content and I needed to adjust the code the following: .page-content { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }

@velentdesigns9064 2 жыл бұрын

again the whole content rotates 90 degree. What should I do now

@DB-ef8wt Жыл бұрын

Perfect thanks

@renardmoustache Жыл бұрын

t'es une masterclass. Love you from France

@musicworld577 Жыл бұрын

Thank you so much. It helped me a lot

@poojashinde6065 2 жыл бұрын

It works......we just need to give the class name properly in my case it was not working first but then when I inspected my page and found out the exact name of my class and used it.........and then horizontal scrolling worked..............Thank you

@webinnovator4091 2 жыл бұрын

This just Amazing I was confused from the last three Days I just Loved this tutorial

@Mr_Web 2 жыл бұрын

Happy to hear that!

@timescroll1 3 ай бұрын

after long time i got solution for scroll column with css thank you so much author❤❤❤❤❤

@eliranhodedi9156 11 ай бұрын

Thanks for the excellent explanation! And if I want to scroll from right to left? What command should I give him?

@joelreed525 2 жыл бұрын

Fantastic video, super helpful!

@Mr_Web 2 жыл бұрын

Great & Thanks 👍

@therealsalamiboi 2 жыл бұрын

This isn't working at all for me. It turns the whole webpage 90 degrees, even the header. And the horizontal scroll doesn't work. Can anyone help with this?

@user-xh6se5mw8z 10 ай бұрын

great video can i apply this only on pages or only on sections?

@nerdypeachmango 2 жыл бұрын

A great workaround for those with Free versions only! I was curious, is this possible to apply to a section only? For instance if you wanted a section to be able to scroll horizontally on mobile view only, how would this work?

@lifegoeson3077 Жыл бұрын

looking for same

@user-mh4co5eo3g Жыл бұрын

If I want the end of the scroll to be vertical? Suppose we make a few more areas that go down at the end?

@musicworld577 Жыл бұрын

very easy and simple way of explantion

@othosilco 2 жыл бұрын

Awesome explanation!

@Mr_Web 2 жыл бұрын

Great thanks 👍

@tejasrautmare2745 2 жыл бұрын

is it possible to loop scroll.. i.e after section 5 we get section 1 again

@hari5y716 2 жыл бұрын

Awesome Tutorial, would love to see the slider as well.

@lisavingerspel 2 жыл бұрын

Has anyone tried to add the anchorlinks / links to jump to a specific horizontal section? The code in the link provided doesn't work for me.

@Florensrt Жыл бұрын

This is for all the sections right? So that means i cant have like other sections because they will be horizontal scrolling aswell?

@fliegmit 2 жыл бұрын

very cool!!!

@aqibr.1887 2 жыл бұрын

How can I make a section that is horizontally drag-scrollable? I want to create a website with a section of multiple icon boxes that can be scrolled horizontally by dragging them. Do you know how to do that?

@user-ge4ze9mj2f Жыл бұрын

When I inspected the page, I couldn't find the elementor section wrap. Can anyone help me to find the problem?

@practiceandpixels Жыл бұрын

Didn't work :( . Everything went 90 degrees. Even with the adjusted code to fix it below :(

@tripletwinsmedia 4 ай бұрын

Am using Divi theme. Is there a way to have this effect on Divi? Thanks

@barmosseri1353 6 ай бұрын

After adding the css I can't see the sections, what to do?

@Neodenoche Жыл бұрын

I wanna do that but whit cards of info. How=? my eternal question

@dreammediafilm 2 жыл бұрын

Thanks this helped me alot.

@Mr_Web 2 жыл бұрын

Glad it helped

@dreammediafilm 2 жыл бұрын

@@Mr_Web what would I need to do to make it work for mobile? As soon as you switch ro phone size then the background images won't fill the screen.

@emBELLAtex 2 жыл бұрын

Hi, I am using the free theme OceanWP with free Elementor. I tried the original CSS code and the one suggested by Roman Palli, both rotated the page 90 degrees and still scrolled vertically. Does anyone have a solution that worked for them besides the two CSS codes listed? Any help would be appreciated. Thanks in advance.

@juanmajr10 2 жыл бұрын

Hi, in case you are still on this, check your class names

@savtrrsh 2 ай бұрын

hello, how to make it looping or never ended?

@jdtrading7385 Жыл бұрын

Working but it does not work on mobile - its on the very bottom of the screen. Looks bad :c

@NG-xd4df 2 жыл бұрын

This is really good tutorial. Is this mobile responsive too?

@highvibee 2 жыл бұрын

@yturemax714 Жыл бұрын

Sorry, it doesnt work in my website =(

@sarahrajah6486 8 ай бұрын

Works on backend not frontend, any idea why

@vincenzoaccomando4614 2 жыл бұрын

Fantastico!! Funziona!! Ma mi crea una pagina in più, sapete dirmi il perchè?

@andrekremmer7104 2 жыл бұрын

Thanks for that. Do you have a solution for the Flex Containers instead of the old Sections? Thanks in Advance

@matata6757 2 жыл бұрын

Thanks Sir

@diankuncoro1400 2 жыл бұрын

Hi I try the code from beginning, but the result all the section are vertically. Any idea?

@juanmajr10 2 жыл бұрын

Hi, in case you are still on this, check your class names

@MrCnettles88 2 жыл бұрын

i used .elementor in astra and it worked

@Mr_Web 2 жыл бұрын

Glad to hear that 👍

@litalooshayafa 2 жыл бұрын

not working for me:( , i't goes vertical and not horizontal, do you know what may cause this?

@Mr_Web 2 жыл бұрын

Happened to me as well with the original code that I found. Then I replaced the div class with .entry-content and .elementor-section-wrap make sure your DIV are not named differently

@CyberImpact7 2 жыл бұрын

not working

@potornainorbert7344 2 жыл бұрын

Wonderful tutorial! Is it possible to navigate between the section with links in the menu?

@Mr_Web 2 жыл бұрын

Yes follow the rest of the instructions on that page you'll also be able to set anchors to link your menu items directly to each section: bit.ly/2Y9QoLh

@AnnitaCaniglia Жыл бұрын

@@Mr_Web Hey Mr. Web, I tried following the instructions in the link, but the automatic scroll will just not work. It works only if I open in a new page. Any tips?

@paulobraga1538 Жыл бұрын

Works perfectly on the editor, but when I see the real page, every section rotates 90 degrees. I'm using Astra and checked the classes names. Does anyone knows how to fix it?

@axellebaudlot3133 Жыл бұрын

I'm experiencing the same thing! Did you find a solution? Thank you.

@AyaxxK 2 жыл бұрын

Great! Thanks for the code!

@Mr_Web 2 жыл бұрын

Glad to be of help, enjoy 👍

@ipAlexx 2 жыл бұрын

Hello, Very nice video. How i can me the scroll to be snappy between the sections?

@Mr_Web 2 жыл бұрын

Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh

@juanmajr10 2 жыл бұрын

I did and it works but the content goes up with header, any idea on why's that?

@Mr_Web 2 жыл бұрын

Check your class names might be different with your theme

@shivramkrishnan6968 Жыл бұрын

Sir its not working properly any perfect code

@fulviaquaglia885 2 жыл бұрын

Not working for me

@aitordotco Жыл бұрын

Does this work with the new Elementor flex container system?

@Mr_Web Жыл бұрын

I don't think so since all the CSS classes are different

@Hopreme 2 жыл бұрын

Hello, can all the anchors work after this ?

@Mr_Web 2 жыл бұрын

Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh

@renebeier 2 жыл бұрын

What theme did you start off with?

@Mr_Web 2 жыл бұрын

It's been a while but I think it was Hello theme by Elementor

@crawfordoutdoor5205 2 жыл бұрын

I attempted this and failed. Any help? It appears to turn every div 90* and stack them as normal (Vertically). Scrolling is still vertical.

@rebelinc 2 жыл бұрын

Try another theme like Hello or Astra?

@jasminj.7211 2 жыл бұрын

I changed the transform rotate degrees and now it works (see below) .entry-content.clear { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(90 deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(-90 deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }

@Mr_Web 2 жыл бұрын

Great! Thanks for sharing

@therealsalamiboi 2 жыл бұрын

@@jasminj.7211 This code fixed the page but it did not make horizontal scroll work. Can you offer any advise?

@sofiarodriguez3615 2 жыл бұрын

@@therealsalamiboi same here

@juanmajr10 2 жыл бұрын

Hi! how do i do this to only work on pc?

@juanmajr10 2 жыл бұрын

and somehow, the footer its on the top right, right where the menu is, any idea on whys that?

@Mr_Web 2 жыл бұрын

✅ CSS Code : Credit to coderoad.ru where I found this code. If you follow the rest of the instructions on that page you'll also be able to set anchors to link your menu items directly to each section: bit.ly/2Y9QoLh .entry-content.clear { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }