Cambiar widget Elementor de horizontal a vertical

  • Autor Autor Florchi
  • Fecha de inicio Fecha de inicio
Florchi

Florchi

Eta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola betas, alguien sabe como puedo cambiar la horientacion de este widget de elementor?


Por defecto viene en horizontal, pero quiero cambiarlo a vertical, dentro de la configuracion del widget no tiene esa opcion.

Me ayudan? Poniendo codigo css o como podria cambiar la orientacion a vertical
 
(mira el edit que puse abajo)
De hecho, mirando el código fuente de la pagina, vi que tiene una opcion para ponerlo vertical.
Si miraste bien y no tiene la opcion de forma fácil/en la interfaz, puedes hacer esto:
Crear un carousel invisible. (Para que el javascript se ponga)

poner un elemento html como este

HTML:
<div id="carouseltest" class="lae-posts-carousel lae-container lae-classic-skin" data-settings="{&quot;arrows&quot;:true,&quot;dots&quot;:true,&quot;autoplay&quot;:true,&quot;autoplay_speed&quot;:3000,&quot;animation_speed&quot;:300,&quot;pause_on_hover&quot;:true,&quot;adaptive_height&quot;:false,&quot;display_columns&quot;:3,&quot;scroll_columns&quot;:3,&quot;gutter&quot;:10,&quot;tablet_width&quot;:800,&quot;tablet_display_columns&quot;:2,&quot;tablet_scroll_columns&quot;:2,&quot;tablet_gutter&quot;:10,&quot;mobile_width&quot;:480,&quot;mobile_display_columns&quot;:1,&quot;mobile_scroll_columns&quot;:1,&quot;mobile_gutter&quot;:10}"><div data-id="id-13691" class="lae-posts-carousel-item"> <article id="post-13691" class="post-13691 post type-post status-publish format-standard has-post-thumbnail hentry category-adventure category-nature"> <div class="lae-project-image"> <a href="https://livemeshelementor.com/nullam-tincidunt-adipiscing/"><img width="1024" height="683" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20683'%3E%3C/svg%3E" class="lae-image attachment-large size-large" alt="Bike Diaries" title="Bike Diaries" data-lazy-srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/1538-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538.jpg 1920w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://livemeshelementor.com/wp-content/uploads/2016/06/1538-1024x683.jpg"><noscript><img width="1024" height="683" src="https://livemeshelementor.com/wp-content/uploads/2016/06/1538-1024x683.jpg" class="lae-image attachment-large size-large" alt="Bike Diaries" title="Bike Diaries" srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/1538-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/1538.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></a> <div class="lae-image-info"> <div class="lae-entry-info"> <h3 class="lae-post-title"> <a href="https://livemeshelementor.com/nullam-tincidunt-adipiscing/" title="Nullam tincidunt adipiscing" rel="bookmark">Nullam tincidunt adipiscing</a> </h3> <span class="lae-terms"><a href="https://livemeshelementor.com/category/adventure/">Adventure</a>, <a href="https://livemeshelementor.com/category/nature/">Nature</a></span> </div></div></div><div class="lae-entry-text-wrap "> <h3 class="entry-title"> <a href="https://livemeshelementor.com/nullam-tincidunt-adipiscing/" title="Nullam tincidunt adipiscing" rel="bookmark">Nullam tincidunt adipiscing</a> </h3> <div class="lae-entry-meta"> <span class="author vcard">By <a class="url fn n" href="https://livemeshelementor.com/author/livemesh/" title="livemesh">livemesh</a></span><span class="published"><abbr title="Friday, September, 2017, 1:16 pm">September 22, 2017</abbr></span> </div><div class="entry-summary"> Phasellus gravida semper nisi. Ut a nisl id ante tempus hendrerit. Cras id dui. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </div></div></article></div><div data-id="id-13689" class="lae-posts-carousel-item"> <article id="post-13689" class="post-13689 post type-post status-publish format-standard has-post-thumbnail hentry category-nature category-travel"> <div class="lae-project-image"> <a href="https://livemeshelementor.com/beach-walk/"><img width="1024" height="683" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20683'%3E%3C/svg%3E" class="lae-image attachment-large size-large" alt="89" title="89" data-lazy-srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/89-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/89.jpg 1920w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://livemeshelementor.com/wp-content/uploads/2016/06/89-1024x683.jpg"><noscript><img width="1024" height="683" src="https://livemeshelementor.com/wp-content/uploads/2016/06/89-1024x683.jpg" class="lae-image attachment-large size-large" alt="89" title="89" srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/89-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/89-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/89.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></a> <div class="lae-image-info"> <div class="lae-entry-info"> <h3 class="lae-post-title"> <a href="https://livemeshelementor.com/beach-walk/" title="Walking on Beach" rel="bookmark">Walking on Beach</a> </h3> <span class="lae-terms"><a href="https://livemeshelementor.com/category/nature/">Nature</a>, <a href="https://livemeshelementor.com/category/travel/">Travel</a></span> </div></div></div><div class="lae-entry-text-wrap "> <h3 class="entry-title"> <a href="https://livemeshelementor.com/beach-walk/" title="Walking on Beach" rel="bookmark">Walking on Beach</a> </h3> <div class="lae-entry-meta"> <span class="author vcard">By <a class="url fn n" href="https://livemeshelementor.com/author/livemesh/" title="livemesh">livemesh</a></span><span class="published"><abbr title="Friday, September, 2017, 1:09 pm">September 22, 2017</abbr></span> </div><div class="entry-summary"> Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Suspendisse pulvinar, augue ac venenatis condimentum. </div></div></article></div><div data-id="id-12854" class="lae-posts-carousel-item"> <article id="post-12854" class="post-12854 post type-post status-publish format-standard has-post-thumbnail hentry category-adventure category-uncategorized"> <div class="lae-project-image"> <a href="https://livemeshelementor.com/escape-the-ordinary/"><img width="1024" height="683" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20683'%3E%3C/svg%3E" class="lae-image attachment-large size-large" alt="1611" title="1611" data-lazy-srcset="https://livemeshelementor.com/wp-content/uploads/2016/01/1611-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611.jpg 1920w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://livemeshelementor.com/wp-content/uploads/2016/01/1611-1024x683.jpg"><noscript><img width="1024" height="683" src="https://livemeshelementor.com/wp-content/uploads/2016/01/1611-1024x683.jpg" class="lae-image attachment-large size-large" alt="1611" title="1611" srcset="https://livemeshelementor.com/wp-content/uploads/2016/01/1611-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/01/1611.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></a> <div class="lae-image-info"> <div class="lae-entry-info"> <h3 class="lae-post-title"> <a href="https://livemeshelementor.com/escape-the-ordinary/" title="Escape the Ordinary" rel="bookmark">Escape the Ordinary</a> </h3> <span class="lae-terms"><a href="https://livemeshelementor.com/category/adventure/">Adventure</a>, <a href="https://livemeshelementor.com/category/uncategorized/">Uncategorized</a></span> </div></div></div><div class="lae-entry-text-wrap "> <h3 class="entry-title"> <a href="https://livemeshelementor.com/escape-the-ordinary/" title="Escape the Ordinary" rel="bookmark">Escape the Ordinary</a> </h3> <div class="lae-entry-meta"> <span class="author vcard">By <a class="url fn n" href="https://livemeshelementor.com/author/livemesh/" title="livemesh">livemesh</a></span><span class="published"><abbr title="Thursday, September, 2016, 1:47 pm">September 29, 2016</abbr></span> </div><div class="entry-summary"> Praesent ac sem eget est egestas volutpat. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Vestibulum suscipit nulla quis orci. Fusce a quam. Aliquam eu nunc. </div></div></article></div><div data-id="id-12848" class="lae-posts-carousel-item"> <article id="post-12848" class="post-12848 post type-post status-publish format-standard has-post-thumbnail hentry category-technology category-uncategorized"> <div class="lae-project-image"> <a href="https://livemeshelementor.com/morning-blues/"><img width="1024" height="683" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20683'%3E%3C/svg%3E" class="lae-image attachment-large size-large" alt="1489" title="1489" data-lazy-srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/1489-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489.jpg 1920w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://livemeshelementor.com/wp-content/uploads/2016/06/1489-1024x683.jpg"><noscript><img width="1024" height="683" src="https://livemeshelementor.com/wp-content/uploads/2016/06/1489-1024x683.jpg" class="lae-image attachment-large size-large" alt="1489" title="1489" srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/1489-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/1489.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></a> <div class="lae-image-info"> <div class="lae-entry-info"> <h3 class="lae-post-title"> <a href="https://livemeshelementor.com/morning-blues/" title="Early Morning Blues" rel="bookmark">Early Morning Blues</a> </h3> <span class="lae-terms"><a href="https://livemeshelementor.com/category/technology/">Technology</a>, <a href="https://livemeshelementor.com/category/uncategorized/">Uncategorized</a></span> </div></div></div><div class="lae-entry-text-wrap "> <h3 class="entry-title"> <a href="https://livemeshelementor.com/morning-blues/" title="Early Morning Blues" rel="bookmark">Early Morning Blues</a> </h3> <div class="lae-entry-meta"> <span class="author vcard">By <a class="url fn n" href="https://livemeshelementor.com/author/livemesh/" title="livemesh">livemesh</a></span><span class="published"><abbr title="Thursday, September, 2016, 1:35 pm">September 29, 2016</abbr></span> </div><div class="entry-summary"> Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Nullam nulla eros, ultricies sit amet. </div></div></article></div><div data-id="id-12846" class="lae-posts-carousel-item"> <article id="post-12846" class="post-12846 post type-post status-publish format-standard has-post-thumbnail hentry category-travel category-uncategorized"> <div class="lae-project-image"> <a href="https://livemeshelementor.com/healthy-breakfast/"><img width="1024" height="683" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20683'%3E%3C/svg%3E" class="lae-image attachment-large size-large" alt="Healthy Breakfast" title="Healthy Breakfast" data-lazy-srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/600-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/600.jpg 1920w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://livemeshelementor.com/wp-content/uploads/2016/06/600-1024x683.jpg"><noscript><img width="1024" height="683" src="https://livemeshelementor.com/wp-content/uploads/2016/06/600-1024x683.jpg" class="lae-image attachment-large size-large" alt="Healthy Breakfast" title="Healthy Breakfast" srcset="https://livemeshelementor.com/wp-content/uploads/2016/06/600-1024x683.jpg 1024w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-600x400.jpg 600w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-300x200.jpg 300w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-768x512.jpg 768w, https://livemeshelementor.com/wp-content/uploads/2016/06/600-272x182.jpg 272w, https://livemeshelementor.com/wp-content/uploads/2016/06/600.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"/></noscript></a> <div class="lae-image-info"> <div class="lae-entry-info"> <h3 class="lae-post-title"> <a href="https://livemeshelementor.com/healthy-breakfast/" title="Healthy Breakfast" rel="bookmark">Healthy Breakfast</a> </h3> <span class="lae-terms"><a href="https://livemeshelementor.com/category/travel/">Travel</a>, <a href="https://livemeshelementor.com/category/uncategorized/">Uncategorized</a></span> </div></div></div><div class="lae-entry-text-wrap "> <h3 class="entry-title"> <a href="https://livemeshelementor.com/healthy-breakfast/" title="Healthy Breakfast" rel="bookmark">Healthy Breakfast</a> </h3> <div class="lae-entry-meta"> <span class="author vcard">By <a class="url fn n" href="https://livemeshelementor.com/author/livemesh/" title="livemesh">livemesh</a></span><span class="published"><abbr title="Thursday, September, 2016, 1:31 pm">September 29, 2016</abbr></span> </div><div class="entry-summary"> Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Fusce egestas elit eget lorem. Vestibulum dapibus nunc ac augue. Mauris sollicitudin fermentum libero. Cras varius. </div></div></article></div></div>


Y ponerle estas opciones que pongo en el video:
https://www.amazon.com/clouddrive/folder/root/Ldx2_EoCT2CdVIoAqScMdQ

el vertical: !0, es lo importante, en el json puedes cambiarle cosas, por ejemplo si quieres que tenga 2 filas, cambias los que tengan _columns por 2.

JavaScript:
var settings = JSON.parse('{"arrows":true,"dots":true,"autoplay":true,"autoplay_speed":3000,"animation_speed":300,"pause_on_hover":true,"adaptive_height":false,"display_columns":1,"scroll_columns":1,"gutter":10,"tablet_width":800,"tablet_display_columns":2,"tablet_scroll_columns":2,"tablet_gutter":10,"mobile_width":480,"mobile_display_columns":1,"mobile_scroll_columns":1,"mobile_gutter":10}');

                    var rtl = false;
                    var arrows = settings.arrows;
                    var dots = settings.dots;
                    var autoplay = settings.autoplay;
                    var adaptive_height = settings.adaptive_height;
                    var autoplay_speed = parseInt(settings.autoplay_speed) || 3e3;
                    var animation_speed = parseInt(settings.animation_speed) || 300;
                    var fade = settings.fade;
                    var pause_on_hover = settings.pause_on_hover;
                    var display_columns = parseInt(settings.display_columns) || 4;
                    var scroll_columns = parseInt(settings.scroll_columns) || 4;
                    var tablet_width = parseInt(settings.tablet_width) || 800;
                    var tablet_display_columns = parseInt(settings.tablet_display_columns) || 2;
                    var tablet_scroll_columns = parseInt(settings.tablet_scroll_columns) || 2;
                    var mobile_width = parseInt(settings.mobile_width) || 480;
                    var mobile_display_columns = parseInt(settings.mobile_display_columns) || 1;
                    var mobile_scroll_columns = parseInt(settings.mobile_scroll_columns) || 1;
               
jQuery('#carouseltest').slick({
                        arrows: arrows,
                        dots: dots,
                        infinite: !0,
                        autoplay: autoplay,
                        autoplaySpeed: autoplay_speed,
                        speed: animation_speed,
                        fade: !1,
                        pauseOnHover: pause_on_hover,
                        adaptiveHeight: adaptive_height,
                        slidesToShow: display_columns,
                        slidesToScroll: scroll_columns,
                        rtl: rtl,
                        vertical: !0,
                        responsive: [{
                            breakpoint: tablet_width,
                            settings: {
                                slidesToShow: tablet_display_columns,
                                slidesToScroll: tablet_scroll_columns
                            }
                        }, {
                            breakpoint: mobile_width,
                            settings: {
                                slidesToShow: mobile_display_columns,
                                slidesToScroll: mobile_scroll_columns
                            }
                        }]
                    });

PD: igualmente si sabes javascript podrias crear tu propio carousel/slider vertical facilmente, teniendo de base muchos ya en internet/github/stackoverflow



PD2: siento si te asuste jeje, olvida todo lo de arriba, al parecer el que usa elementor es este: https://github.com/kenwheeler/slick


1640560892853.png


Ahí ya tendrás las explicaciones de como usarlo, suerte.
 
Última edición:
Atrás
Arriba