When I try to increase the height of the vertical divider by adjusting the width, it doesn't get longer. It just fills up the space of the container, which is constrained to a tiny box
Firstly, I love your great tips, but I have some problem adjusting it height, I did change from % to PX but the limit is just the outside box, do we need to adjust the margin of the column or else? thank you!
Hi Jack. Thanks for the video. I find that the divider won't exceed the height of its blue bounding box so the max hight of my divider is about 18px. In you video your line seems to ignore and extend past the blue bounding box. The really odd thing is when I suspend the divider using the Responsive settings (hide from Desktop) I can see the full heigh divider, be it greyed out, and can also adjust its length. Unfortunately when I make it visible again it goes back to being 18px and trapped in the bounding box. Any thoughts?
Hi both. That is strange as I've taken a look at it and works fine for me - are you updated to the latest elementor version? That said your content will be restricted to the margins of a section (unless you change the z index or absolute positioning within the advanced tab, but I don't recommend it as it makes responsiveness a lot more difficult). If you want to have a divider stretching past multiple content then I would recommend changing something to get round it. Instead of just using columns as I have in this video, create a new section and then add an inner section - see my video here for more details: th-cam.com/video/Fos6rT7jGVE/w-d-xo.html You can then use the inner section to create your divider which can then stretch the full length of your section whilst your other content is stacked in a normal way. That will be the easiest way to do it without adding more CSS code. Thanks again.
@@JackintheNet Hello I got the same issue. I tried the method of the inner section and it doesn't word neither. I always have my divider limited to the little blue box. Thanks in advance for your help.
Hello all. Under the divider content settings change from working with % to pixels, you will then be able to extend beyond your boundary box. Alternatively create the divider under a single column in the first instance, and make it as a horizontal line to the full width of the page. Then add the code to rotate it, and then right click your column settings (small dark box at the top left of the element box) and duplicate the columns to the desired number which will force the box to be bigger. But easiest solution is switching from % to pixels under the divider element content settings.
Thanks a lot for a great tip, I´ve done exactly as your great tutorial, but I can not make it work. I really wonder what I am doing wrong, Have checked everything several times.
Hello dear I also want to make divider verticle but I don't have elementor. I have Page layer and I have done same procedure with pagelayer but custom css option not available in simple pagelayer for that I need pro version but I have option to add class name or element Id and then access it through from customization page because there is option to access any id or class and add code and I tried your code to do same but not working at my side. What I need to do?
Thanks Jack, this is very helpful. I have a question.... could using a border on the right side of one of the columns work just as well? Or is there a reason not to do it that way?
Hi. Thanks for watching. You can add it to your theme CSS. Or you can avoid CSS and get almost the same result, as I show here: th-cam.com/video/RarasWwEcO0/w-d-xo.html
As you can see in the video it clearly works, along with the other viewers who have commented their thanks. If you are having problems perhaps you would like to ask for help instead of just being negative. Would be inclined to help that way
![Create Responsive Image Hotspots with Elementor [Advanced Tutorial]](/img/n.gif)
Vertical Dividers 3:20 Custom CSS: selector{
transform: rotate(90deg);
}
Thank you
Thanks!
This is a life saver with the vertical one, thank you!
Glad it helped!
You are a true genius. Your video force me to subscribe your channel.
Thank you kindly :)
Helped me a lot mate!!! Keep making lots of informative clips
Glad to hear it! Thanks for watching
Great brother, i was searching exactly this
Glad I could help
Thanks Jack Love the Short tutorial
Thanks!
Thank you. Exactly what I was looking for. Great tutorial 👍
Glad it helped! Thanks for watching :)
thanks to you sir,
from Bangladesh
Thank you brother, for this creative solution
This video will be helpful for me. Thank you very much.
Glad it helps. Thanks for watching
Thanks a bunch!!!
Thanks a lot. helped me a lot
Thank you so much life saver
Thank you so much for the horizontal tip!
You're very welcome, thank you for taking the time to watch.
When I try to increase the height of the vertical divider by adjusting the width, it doesn't get longer. It just fills up the space of the container, which is constrained to a tiny box
Thank you!
tks lot sir help me lot.
Glad it helped
great work !
thanks for watching
great lesson great tip
Glad it helped! Thanks for watching :)
Firstly, I love your great tips, but I have some problem adjusting it height, I did change from % to PX but the limit is just the outside box, do we need to adjust the margin of the column or else? thank you!
also wondering about this. Did you find a solution?
Hi Jack. Thanks for the video. I find that the divider won't exceed the height of its blue bounding box so the max hight of my divider is about 18px. In you video your line seems to ignore and extend past the blue bounding box. The really odd thing is when I suspend the divider using the Responsive settings (hide from Desktop) I can see the full heigh divider, be it greyed out, and can also adjust its length. Unfortunately when I make it visible again it goes back to being 18px and trapped in the bounding box. Any thoughts?
Hi Andrew. Thanks for watching! Does that happen to you on the vertical or horizontal dividers - or both?
@@JackintheNet I have got the same issue...both on the horizontal as vertical divider...It won't exceed the blue container. Thanks
Hi both. That is strange as I've taken a look at it and works fine for me - are you updated to the latest elementor version? That said your content will be restricted to the margins of a section (unless you change the z index or absolute positioning within the advanced tab, but I don't recommend it as it makes responsiveness a lot more difficult). If you want to have a divider stretching past multiple content then I would recommend changing something to get round it. Instead of just using columns as I have in this video, create a new section and then add an inner section - see my video here for more details: th-cam.com/video/Fos6rT7jGVE/w-d-xo.html
You can then use the inner section to create your divider which can then stretch the full length of your section whilst your other content is stacked in a normal way. That will be the easiest way to do it without adding more CSS code. Thanks again.
@@JackintheNet Hello I got the same issue. I tried the method of the inner section and it doesn't word neither. I always have my divider limited to the little blue box. Thanks in advance for your help.
Hello all. Under the divider content settings change from working with % to pixels, you will then be able to extend beyond your boundary box. Alternatively create the divider under a single column in the first instance, and make it as a horizontal line to the full width of the page. Then add the code to rotate it, and then right click your column settings (small dark box at the top left of the element box) and duplicate the columns to the desired number which will force the box to be bigger. But easiest solution is switching from % to pixels under the divider element content settings.
Thanks for the tip, but the custom CSS is not available on the Elementor free version.
hi Buddy thanks but the length of the height is small even if i change into pixel.
how to solve this?
Thanks a lot for a great tip, I´ve done exactly as your great tutorial, but I can not make it work. I really wonder what I am doing wrong, Have checked everything several times.
*it is your theme sir, change it*
How did you get the columns in the first place? Which block element is that at 3:26?
Hello dear I also want to make divider verticle but I don't have elementor. I have Page layer and I have done same procedure with pagelayer but custom css option not available in simple pagelayer for that I need pro version but I have option to add class name or element Id and then access it through from customization page because there is option to access any id or class and add code and I tried your code to do same but not working at my side. What I need to do?
kindly tell me reason why you write "selector" in above code?
Thanks Jack, this is very helpful. I have a question.... could using a border on the right side of one of the columns work just as well? Or is there a reason not to do it that way?
Yes you can - you will just need to play around with the margins and padding to try and simulate it being in the middle
Is it possible to do 0% in the middle section? I would like to receive a seamless effect. Sorry for bad english^^
vertical CSC : selector{ transform: rotate(90deg) }
"Weight" does not work at the moment on my site. So, I´m left with a very very thin divider.
Any fix for this yet, same as @andrew keen I can't extend the blue box. Kind regrads.
yes the answer i put in the reply to his comment
DOnt work with elementor 3.3
Video doesn't mention that Custom CSS is not allowed in the free version of Elementor.
Use Royal Addons For Elementor Plugin
Para los que no tienen la version pro: Ir a la pestaña de avanzando y luego en transformar. Buscar la opción de rotar (y)
*Tome su like buen hombre, es lo que estaba buscando. Muchas gracias*
Easier: give the column Custom-CSS: selector{border-right: 1px solid #BBB;}
great tutorial but only works for the paid version
Hi. Thanks for watching. You can add it to your theme CSS. Or you can avoid CSS and get almost the same result, as I show here: th-cam.com/video/RarasWwEcO0/w-d-xo.html
@@JackintheNet thank you!
not responsive
IT DOESN'T WORK !
As you can see in the video it clearly works, along with the other viewers who have commented their thanks. If you are having problems perhaps you would like to ask for help instead of just being negative. Would be inclined to help that way