Mudar widget Elementor de horizontal para vertical

  • Autor Autor Florchi
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Florchi

Florchi

Eta
Usuário com poucas negociações! Use sempre o saldo do 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
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
(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 edição:

Tópicos similares

Voltar
Topo