WOW!!! Estaba buscando un super tutorial de DIVI.... seguro me suscribiré a tus tutoriales exclusivos. ¡Gracias por compartir contenido de altísima calidad!
Me encanta la manera como enseñar lo mas importante ESA PACIENCIA QUE TIENES, no soy programador pero no me imagino tener esa paciencia que tienes si enseñará Saludos
Muchas gracias por tus palabras amigo, me gusta enseñar creo que por eso soy paciente 😁 Seguiré creando más tutoriales con esa paciencia que mencionas jaja. Un abrazo.
Estoy descubriendo el canal y es una locura! este video responde taaantas dudas. Siempre que entraba a un ecommerce que tenia una sección así me preguntaba cómo lo hacían y al fin sé cómo hacerlo, Mil gracias, super bien explicado. Además esos pequeños datos como los de pegar los shortcodes en el texto y no el el apartado de visual para no cargar más datos de manera innecesaria ayudan mucho
Muchas gracias por tu comentario Javier, en verdad me da gusto que realmente te haya ayudado este tutorial, de esto se trata. Seguiré creando mucho contenido sobre divi, así que atento siempre al canal. Un abrazo Javier ¡Seguimos!
Hola buenas tardes logré hacer esta página gracias a tu video pero tengo un problema por.ejemplo cuando doy click en el icono de hamburguesas no solo aparecen las hamburguesas para esa.categoria también aparecen alitas e igual para cuando doy click en el icono de.alitas me.aparecen las hamburguesas que puede estar pasando
Muchas gracias nuevamente por otro material excelente. El código funciono a la perfección y lo mejor que me gusta de tus videos es que todos son responsive
Woww!! Esto quedó increíble. Recuerdo el comentario en Facebook, incluso la persona que lo puso citó la demo de un template donde estaba esta funcionalidad. Sin dudas herma que lo hayas podido realizar en DIVI es un éxito total. Gracias gracias graciasssss!!!
e probado el turorial ,y todo bien ,me encontrado con que al meter mas de dos palabras en el titulo al reducir en pc se pisa con la imagen gyazo.com/06841fa00968a11d7a71a10cb3e9525c ,en movil sale bien .no se si es solo a mi ,le di solución agregando la ultima linea a este codigo ,no se si es la mejor forma ¿hay otra forma mejor? .ov-tabs .et_pb_tabs_controls li { display: flex; flex-direction: column; align-items: center; border-right: none; min-width: 170px; } min-width: 170px; a la medida necesaria del titulo
@@monty2210 Hola Monty no he notado ese detalle, gracias por compartirlo. Voy a darle una revisada de todas formas y la solución que aplicaste si te funciona está bien amigo
Muy buen tutorial, me ha servido de mucho!!! Me gustaría hacerle una consulta, para la visualización en Móvil, no se crea el scroll, por lo que se crea un espacio en blanco a la derecha, no sé si hice mal el código o tengo que colocar uno nuevo. Gracias por todos los tutoriales que realizas.
Hola, Oscar. Gracias por poner publico este tipo de tutoriales. Quisiera preguntarte si sabrías orientarme para ver que he hecho mal. He seguido las instrucciones que das en el video pero no he conseguido que se vean los iconos. Además, me gustaría preguntarte también como hacer para ampliar el ancho de las pestañas para que se vea algo mas grande sin que se desajuste todo. ¿Cómo puedo mandarte capturas de pantalla? Gracias por la ayuda y disculpa la ignorancia, estoy empezando a usar Divi.
Hola Gonzalo Gonzalo, lo mejor es que me compartas la url de tu ejercicio para poder inspeccionar la web y ver que está pasando. Ya que así no sabría decirte que sucede porque es algo que no me ha pasado. Para ampliar el ancho de las pestañas debe ser con código CSS y va a depender exactamente de lo que desees lograr Gonzalo.
Primero que nada, excelente video! Todos tus vídeos me han servido de mucho! Tengo una duda. Cómo puedo poner los estilos que ya tenía en los elementos de la tienda, porque en el shortcode me pone los estilos que vienen por default?
Hola Eduardo, si quieres agregar estilos tenemos dos maneras: 1. Aplicar los estilos CSS 2. Diseñar la sección de los productos desde la biblioteca de divi e insertar la sección en la pestaña mediante un shortcode
Hola!! Excelente tutorial, gracias por compartir... Una pregunta... Si quisiera que en vez que se muestren columnas de productos las taps funcionaran como una especie de botones que al darle click lleven al usuario a la categoría de producto especifica para ver todos los productos ¿es posible? Y de ser asi como se podría hacer? Muchas gracias nuevamente
Si quieres que las tabs te redireccionen a otra página o una página específica te recomiendo crear las tabs con botones o módulos anuncio. Puedes construir todo con columnas y módulos anuncio y colocar el enlace manualmente...
Hola, excelente tutorial, que código debo usar si quiero usar solo 3 secciones fijas, sin la barra de scroll para los lados, la quiero fija con 3 secciones. Gracias, de ser posible lo que pregunto donde ubicaría el código sin dañar el que ya nos regalaste en el video.
Hola, muchas gracias. ¿Cómo tres secciones fijas? Te refieres a la vista móvil? Si es así sigue estos pasos: 1. En el código CSS busca este código: .ov-tabs .et_pb_tabs_controls { justify-content: flex-start; overflow-x: auto; margin-bottom: 0; } Y lo reemplazas por este: .ov-tabs .et_pb_tabs_controls { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 0; } 2. Busca este otro código CSS: .ov-tabs .et_pb_tabs_controls li { display: flex; flex-direction: column; align-items: center; border-right: none; } Y le agregas la proiedad width: 33.3%; .ov-tabs .et_pb_tabs_controls li { display: flex; flex-direction: column; align-items: center; border-right: none; width: 33.3%; }
Excelente contenido 👏🏻👏🏻 Muchas gracias 😊 tus videos me han ayudado mucho.. Aprovecho para preguntar: Se podría hacer esto pero desde el menú principal?? Es decir, que las categorías estén en el menú?
Hola Sofy muchas gracias. No logro entender bien tu pregunta Sofy. ¿Cómo desde el menú principal? 🤔 Puedes crearte desde el generador de temas un encabezado personalizado y hacer este tipo de composición y así tendrás un menú hecho con tabs ;)
Hola me gusto mucho te felicito , una cosa si pones por ejemplo 12 productos en vez de 4 ¿te saldrían las flechas laterales o te harían scroll? saludos
Hola Oscar, muchas gracias por tus videos, me han servido un montón. Tengo una consulta: He insertado una tabla dentro de cada tab por medio de shortcode, pero la fila se amplía automáticamente según el contenido de ésta. En vista de móvil tocaría estar deslizando para los lados para poder leer el contenido de las celdas. Como modifico el código para que el ancho de las tabs sea fijo? Espero haberme hecho entender y de antemano gracias por tu ayuda.
Hola qué tal, si me compartes el link de tu sitio podría entender de mejor manera el funcionamiento. También no sé cómo haz insertado las tablas, es decir, ¿lo haz hecho con algún plugin o con un módulo? Quizá y sea hasta conflicto o problema del plugin y no de divi.
Hola amigo, me han servido mucho tus videos, una pregunta, se puede hacer la tabla dinámica? es decir que se tomen diferentes marcas y te salga los productos relacionados con la marca? por ejemplo escojo mi categoria tenis y saldrían todos los tenis relacionados a los tenis con sus respectivas marcas y si quiero camisas lo mismo que salgan con sus respectivas marcas.
Puedes incrustar la tienda por categoría, es decir, cada pestaña debe llevar la categoría correspondiente. La categoría puede ser la marca y se la asignas a cada producto.
Hola Leidy, si podría ser posible quitando o modificando este CSS: @media only screen and (max-width: 980px) { .ov-tabs .et_pb_tabs_controls { justify-content: flex-start; overflow-x: auto; margin-bottom: 0px; } } En lugar del código anterior usa esto: @media only screen and (max-width: 980px) { .ov-tabs .et_pb_tabs_controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } }
Hola!, se ve muy sencillo, quiero aprender desde cero a hacer algo parecido como este tutorial. ¿en dónde encuentro tus tutoriales para aprender desde cero?
Hola, todos mis tutoriales son específicos donde realizamos una funcionalidad diferente y siempre la empezamos desde certo, si quieres ver el listado de tutoriales completo tanto gratuitos como premium aquí te dejo el enlace: ovdivi.com/blog/
Que buen tutorial ! Una consulta, en vez de hacer click en cada pestaña (vegetales, limones, naranjas, etc.), podríamos trasformar en botones los títulos ?
Hola Victor, nunca lo he intentado pero yo digo que si es posible, solamente sería darle estilos css. Si tienes algún ejemplo podría intentarlo. Saludos
Hola Oscar, tus tutoriales son geniales y muy útiles. queria pedirte ayuda ya que en este tutorial no me aparecen los iconos de cada uno de los elementos, podrías ayudarme? Gracias.. un saludo
Increible!! Tengo una duda.. Como podria editar el estilo de la presentacion de los productos? con el codigo que introducimos para mostrarlos, se le podria introducir un poco de diseño? me queda muy basico y no puedo editarlo!
Hola Julian, tendría que hacerse con CSS. Pero si quieres insertar los productos también lo puedes hacer con el módulo tienda, darle estilos e insertarlo en las tabs mediante el shortcode...
Sí claro, puedes crearte tus galerías y guardarlas en la biblioteca para que te genere el shortcode, posteriormente introducirlas en las tabs. Cómo te comenta Abner, es cosa de creatividad :)
Hola! Me encantan tus videos!! Un pregunta: Si en vez de meter una imagen quiero meter un icono de fontawesome, hay otro método? o qué tendría que poner en el código css?
Excelente tutorial, sabes como podria realizar todo lo del tutorial pero que además la información de las pestañas este oculta solo hasta que el usuario de clic ?
Muchas gracias. Sobre tu consulta, por lo que entiendo necesitas tener solamente las pestañas visibles sin la información. Es algo que por defecto no se puede lograr con el módulo pestañas de divi :( siempre debe estar abierta la primera amigo.
Muchas gracias una vez más por este maravilloso tutorial! una pregunta, ¿cómo puedo hacer que en la vista movil los productos se muestren en una sola columna de ancho completo?
Hola Andres disculpa, hace unos días respondí una pregunta parecida pero ya no recuerdo si fue a ti o no jaja, es que de tantos mensajes se me olvida, pero confirmame si fue a ti sino para darte la respuesta :)
@@cenocoelpiloto En Divi > Opciones del tema > CSS personalizado, pega esto: @media only screen and (max-width: 768px) { .woocommerce ul.products[class*=columns-] li.product { width: 100% !important; } }
Hola bro, la verdad excelente canal y contenido, muchas gracias por tus aportes. Quisiera consultarte algo. Resulta que tengo un inconveniente a la hora de trabajar en local con el Xampp, no se si es por eso o cuál será lo que genera problemas pero no puedo usar el módulo de social media(de las redes). Osea dentro del constructor si se ve todo bien perfecto pero cuando actualizo la página para ver cómo va quedando no me lo toma, me aparecen como transparentes pero cuando inspecciono el código si están. También por ahí me cambia de color en algunas secciones, lo veo de un color en el constructor visual de divi pero cuando refresco para ver me sale de otro. A qué puede deberse esos errores? Espero tu respuesta, gracias :)
Hola Juan probablemente estés teniendo problemas con la cache de divi, te recomeindo desactivarlo desde Divi / Opciones del tema / Constructor / Avanzado / Generación de CSS estático...
Hola en esta línea de código CSS .ov-tabs .et_pb_tabs_controls li:before debes aumentar el width y height. Y obviamente tus iconos también deben estar a esa anchura y altura.
Gracias por fenomenal tutorial hermano, una consulta, a la hora de colocar las url de los iconos, en las tab, coloco las dos, pero el icono activo no se me visualiza, no se por que le código esta todo bien, y otra consulta, en las pestañas donde puedo colocar un código para que me haga scrroll horizontal en los productos en cada pestaña para la versión mobile, gracias de ante mano,.
Increible Video e interesante tu contenido! tengo una pregunta, al publicar un producto en (Woocommerce desde tu página web) este plugin te cobra por una pasarela de pago?
Hola Piero, depende de que tipo de pasarela pero por lo regular con las gratuitas basta cómo paypal o stripe. Si quieres implementar alguna pasarela de pago de tu país seguramente ellos te brindan un plugin para integrarlo con woocommerce. Pero en sí, woo no cobra por implementar métodos de pago.
Hola Oscar gracias por el tutorial. tengo una pregunta ese shortcode es para Woocommerce.com o para woocommerce.org sirve igual.? o son dos plugins diferentes.
Hola, buenos días. Me podrías ayudar tengo problemas con el temple de divi. Me sale que tengo problemas con los estilos. Que estan incompletos. Como lo podria solucionar gracias. Tus videos me sirvieron mucho.
Hola buena tarde, me encanta como explicas y mas que nada el contenido que manejas; me has salvado de una y muy grande...Pero hago todo lo que mencionas pero al refrescar mi página la pestaña sale en blanco cuando se supone que el código esta bien, me podrías ayudar por fa o no se como enviarte imágenes de lo que sucede
Hola Marietta, muchas gracias. ¿No tienen animaciones los elementos que deseas insertar? Si tienen animación debes quitarla porque si no no se mostrarán
Hola, CSS no es programación solo es un lenguaje de estilos. Java es un lenguaje de programación pero es diferente a JavaScript, en la mayoría de mis tutoriales usamos pequeños fragmentos de código jQuery que es una librería de JavaScript. En algunos otros usamos PHP también.
Excelente. Óyeme tengo una pregunta. De algo diferente. Y es como agrando mi logo en divi. Pues he intentado diferentes cosas y no se agranda. Coloque mi logo y cuando sale, es muy pequeño. Cambie por uno igual pero de más píxeles y tamaño. Pero me sale exactamente igual. ¿Qué puedo hacer?
Hola Oscar, ¿Cómo estás intentando insertar tu logo? Es decir, desde el menú por defecto de divi o desde el generador de temas?. Porque si lo haces como este último puedes cambiar el tamaño desde los ajustes del módulo.
Hola mil millones de gracias por tu video, pero yo quiero hacer un contenedor con pestañas y subpestañas y que quede bien cuadrado, pero todo se me descuadra, ojala pudieras ayudarme con esta duda mil gracias.
Hola, me parece que ya te pusiste en contacto conmigo por otro medio. En tu caso debes hacerlo con shortcodes pero debes eliminar los margenes y rellenos para que no te genere los espacios
@@OVDIVI muchísimas gracias así lo hice y quedo! Un abrazo!
3 роки тому
Este tutorial es excelente. Muchas gracias. Una consulta: a mi me aparece uno o dos segundos nada mas y luego dasaparece, la barra del scroll horizontal del minuto 21:57. Por qué será? muchas gracias.
Hola Ramiro muchas gracias. La funcionalidad de la barra depende de cada navegador. Pero si quieres que siempre esté visible en el código CSS: overflow-x: auto; Reemplaza "auto" por "visible".
3 роки тому
@@OVDIVI genial! gracias. Siempre pienso que tengo que aprender más de código CSS para mejorar esos detalles a nuestras webs.
Podría ser posible, en lugar de utilizar el código para insertar las imágenes: background: url("#") no-repeat; Utilizas algo así: font-family: 'ETMODULES'; content: '\e015'; /* código icono */ font-size: 1.5em; color: #000; Aquí tienes el listado de los iconos que puedes utilizar: dividezigns.com/divi-icon-codes/
Hola bro. Una consulta y ayuda idealmente Quiero terminar de hacer una web que va de ofrecer un servicio de SEO Local, por ello lleva más texto explicativo que otras. Para ello tengo audios que relatan estos textos, para el que no quiera o pueda leerlos bien. Necesito un plugin o otra forma de poder representar una imagen, botón o algo así en la que el usuario pueda clickar y al hacerlo se escuche este audio de un párrafo en concreto ( Digamos como ejemplo un determinado servicio). No he podido encontrar la forma correcta de hacerlo. Le pues un modulo de audio Divi y queda muy grande y no se ve bien estéticamente. Tendrás alguna idea de como hacer algo así, y por su puesto en Divi . Gracias por cualquier ayuda sobre este tema.
Hola PAT qué tal, la verdad no tengo experiencia con algún plugin de audio, yo lo haría con el módulo que viene con divi y lo adaptaría correctamente con CSS si es necesario. Pero he encontrado este artículo que probablemente podría ser de ayuda: kinsta.com/es/blog/reproductores-audio-wordpress/
@@OVDIVI OK, muchas gracias. ya tenia esa pagina pero obviamente se agradece el tiempo dedicado en buscar y responder. Y bueno, si lo estoy haciendo con el modulo de audio de Divi, lo que si no queda muy bien. Tal vez con css quede mejor pero no se mucho del tema. bueno, nuevamente gracias.
@@manuelgallego657 Sí claro que se puede. Puedes usar este fragmento: // Agregar botón de "añadir a carrito" en los productos del módulo tienda add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 ); Sí lo modificaste desde los archivos del tema se te va a borrar cuando actualices divi. Lo mejor es instalar el plugin "Code Snippets" y desde allí meter el fragmento. También puedes usar un childtheme y meter el código en el archivo functions.php
@@OVDIVI a genial, eres un fenómeno la verdad. ya lo cambié, la verdad no sé como no lo trae woocommerce ya implementado. No obstante me gustaría que hicieses mas tutoriales acerca de woocommerce y divi sobretodo qu tengan que ver con el aspecto de las páginas mi carrito y mi cuenta. Gracias ...
Hola si quisiera poner para que al seleccionar una categoría aparezca debajo las subcategorias ? Con los iconos que ponga como hago para que aparezcan ?
Hola Rodrigo este ejercicio solamente esta adaptado para categorías padres, no es posible mostrar sub categorías al menos que lo hagas con un mega menú: ua-cam.com/video/TWEooesG_QI/v-deo.html
Hola Manuel, probablemente hay un problema con los estilos CSS. Si me compartes la url de tu ejercicio puede inspeccionarla y descubrir que pasa. Quedo atento.
Que fantástica manera tienes de enseñar. Y valoro que seas tan sencillo. Éxito!
Hola hola, muchas gracias Moda Claus. Espero te sigan sirviendo los tutoriales. Te mando un abrazo y te deseo éxito en tu proyecto.
OV Divi Sos un capo! Haces los mejores tutoriales en español sobre DIVI. Congrats!
Muchas gracias Gustavo. Seguiremos adelante amigo, te mando un abrazo.
WOW!!! Estaba buscando un super tutorial de DIVI.... seguro me suscribiré a tus tutoriales exclusivos. ¡Gracias por compartir contenido de altísima calidad!
Muchas gracias Dory. Espero verte pronto por los tutoriales exclusivos. Saludos :)
Me encanta la manera como enseñar lo mas importante ESA PACIENCIA QUE TIENES, no soy programador pero no me imagino tener esa paciencia que tienes si enseñará
Saludos
Muchas gracias por tus palabras amigo, me gusta enseñar creo que por eso soy paciente 😁
Seguiré creando más tutoriales con esa paciencia que mencionas jaja. Un abrazo.
Increíble! Que bueno encontrar material de esta calidad en español. Impecable!!
Muchas gracias por el apoyo Gus. Saludos! :)
Estoy descubriendo el canal y es una locura! este video responde taaantas dudas. Siempre que entraba a un ecommerce que tenia una sección así me preguntaba cómo lo hacían y al fin sé cómo hacerlo, Mil gracias, super bien explicado. Además esos pequeños datos como los de pegar los shortcodes en el texto y no el el apartado de visual para no cargar más datos de manera innecesaria ayudan mucho
Muchas gracias por tu comentario Javier, en verdad me da gusto que realmente te haya ayudado este tutorial, de esto se trata. Seguiré creando mucho contenido sobre divi, así que atento siempre al canal. Un abrazo Javier ¡Seguimos!
Hola buenas tardes logré hacer esta página gracias a tu video pero tengo un problema por.ejemplo cuando doy click en el icono de hamburguesas no solo aparecen las hamburguesas para esa.categoria también aparecen alitas e igual para cuando doy click en el icono de.alitas me.aparecen las hamburguesas que puede estar pasando
Muchas gracias nuevamente por otro material excelente. El código funciono a la perfección y lo mejor que me gusta de tus videos es que todos son responsive
Muchas gracias Alejandro, siempre trato de que todos los ejercicios estén bien adaptados tanto en escritorio, tableta y teléfono 🤗
Excelente...!!! Maestrazoooo..!!!! Siempre das en el clavo con estos tutoriales...!!! Espectacular mi estimado...!!!
Genial Omar, espero te sirva en tu proyecto. Muchas gracias, te mando un abrazo.
Woww!! Esto quedó increíble. Recuerdo el comentario en Facebook, incluso la persona que lo puso citó la demo de un template donde estaba esta funcionalidad. Sin dudas herma que lo hayas podido realizar en DIVI es un éxito total. Gracias gracias graciasssss!!!
Así es Miguel. Sí, estaba seguro que era replicable con divi y así fue jaja :) Te mando un abrazo hasta la hermosa Cuba y seguimos con todo!
Excelente trabajo !! muy bien sigue asi amigo, muy bien explicado, te felicito !! y muchas muchas gracias por explicar !! BENDICIONES!
Muchas gracias Gabriel, por supuesto que seguiremos así. Un abrazo 😇
Este tutorial me acaba de salvar la vidaaa
Gracias!!!
Genial Maibely, me alegra leer esto :D
Sos el mejor de los mejores saludos desde Medellín Colombia
Muchas gracias por el apoyo Sebastian. Saludos hasta Medellín Colombia 🇨🇴✌️
Era justo lo que estaba buscando, mil gracias. Ya dejé mi like, me suscribí y activé la campanita
Excelente Samuel, eso me inspira a seguir creando más contenido. Muchas gracias. Un abrazo.
Pedazo de tutorial,me encantan tus vídeos y tutoriales,siempre aprendiendo contigo,enhorabuena ,Un abrazo Maestro
Muchas gracias por el apoyo Monty. Seguiremos con todo, te mando un abrazo de regreso :)
e probado el turorial ,y todo bien ,me encontrado con que al meter mas de dos palabras en el titulo al reducir en pc se pisa con la imagen gyazo.com/06841fa00968a11d7a71a10cb3e9525c ,en movil sale bien .no se si es solo a mi ,le di solución agregando la ultima linea a este codigo ,no se si es la mejor forma ¿hay otra forma mejor?
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
min-width: 170px;
}
min-width: 170px;
a la medida necesaria del titulo
@@monty2210 Hola Monty no he notado ese detalle, gracias por compartirlo. Voy a darle una revisada de todas formas y la solución que aplicaste si te funciona está bien amigo
Muy buen tutorial, me ha servido de mucho!!!
Me gustaría hacerle una consulta, para la visualización en Móvil, no se crea el scroll, por lo que se crea un espacio en blanco a la derecha, no sé si hice mal el código o tengo que colocar uno nuevo. Gracias por todos los tutoriales que realizas.
Hola Jheferson, gracias a ti también.
Sobre lo que mencionas quizá debo darle un vistazo a tu ejercicio, comparteme la url por fa
Hola! muy buena info! consulta.. se puede poner un autoplay para que las tabs vayan cambiando solas?
Hola Gisela, lamentablemente no. Las tabs de divi no incluyen esa configuración, lo siento.
Excelente gracias por todo Oscar. Muy bueno tu contenido.
Muchas gracias Gabriel. ¡Saludos!
Hola, Oscar. Gracias por poner publico este tipo de tutoriales. Quisiera preguntarte si sabrías orientarme para ver que he hecho mal. He seguido las instrucciones que das en el video pero no he conseguido que se vean los iconos. Además, me gustaría preguntarte también como hacer para ampliar el ancho de las pestañas para que se vea algo mas grande sin que se desajuste todo. ¿Cómo puedo mandarte capturas de pantalla? Gracias por la ayuda y disculpa la ignorancia, estoy empezando a usar Divi.
Hola Gonzalo Gonzalo, lo mejor es que me compartas la url de tu ejercicio para poder inspeccionar la web y ver que está pasando. Ya que así no sabría decirte que sucede porque es algo que no me ha pasado.
Para ampliar el ancho de las pestañas debe ser con código CSS y va a depender exactamente de lo que desees lograr Gonzalo.
Primero que nada, excelente video! Todos tus vídeos me han servido de mucho!
Tengo una duda.
Cómo puedo poner los estilos que ya tenía en los elementos de la tienda, porque en el shortcode me pone los estilos que vienen por default?
Hola Eduardo, si quieres agregar estilos tenemos dos maneras:
1. Aplicar los estilos CSS
2. Diseñar la sección de los productos desde la biblioteca de divi e insertar la sección en la pestaña mediante un shortcode
Increíble, muchas gracias Oscar.
No hay de qué Maximiliano. Gracias por apoyarme :)
Hola!! Excelente tutorial, gracias por compartir...
Una pregunta... Si quisiera que en vez que se muestren columnas de productos las taps funcionaran como una especie de botones que al darle click lleven al usuario a la categoría de producto especifica para ver todos los productos ¿es posible? Y de ser asi como se podría hacer?
Muchas gracias nuevamente
Si quieres que las tabs te redireccionen a otra página o una página específica te recomiendo crear las tabs con botones o módulos anuncio. Puedes construir todo con columnas y módulos anuncio y colocar el enlace manualmente...
Hola, excelente tutorial, que código debo usar si quiero usar solo 3 secciones fijas, sin la barra de scroll para los lados, la quiero fija con 3 secciones. Gracias, de ser posible lo que pregunto donde ubicaría el código sin dañar el que ya nos regalaste en el video.
Hola, muchas gracias. ¿Cómo tres secciones fijas? Te refieres a la vista móvil? Si es así sigue estos pasos:
1. En el código CSS busca este código:
.ov-tabs .et_pb_tabs_controls {
justify-content: flex-start;
overflow-x: auto;
margin-bottom: 0;
}
Y lo reemplazas por este:
.ov-tabs .et_pb_tabs_controls {
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 0;
}
2. Busca este otro código CSS:
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
}
Y le agregas la proiedad width: 33.3%;
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
width: 33.3%;
}
Muchas gracias, máster.
Excelente contenido 👏🏻👏🏻 Muchas gracias 😊 tus videos me han ayudado mucho.. Aprovecho para preguntar: Se podría hacer esto pero desde el menú principal?? Es decir, que las categorías estén en el menú?
Hola Sofy muchas gracias. No logro entender bien tu pregunta Sofy. ¿Cómo desde el menú principal? 🤔 Puedes crearte desde el generador de temas un encabezado personalizado y hacer este tipo de composición y así tendrás un menú hecho con tabs ;)
Hola me gusto mucho te felicito , una cosa si pones por ejemplo 12 productos en vez de 4 ¿te saldrían las flechas laterales o te harían scroll? saludos
Te saldrían 3 filas de cuatro columnas, una abajo de otra.
Hola Oscar, muchas gracias por tus videos, me han servido un montón. Tengo una consulta: He insertado una tabla dentro de cada tab por medio de shortcode, pero la fila se amplía automáticamente según el contenido de ésta. En vista de móvil tocaría estar deslizando para los lados para poder leer el contenido de las celdas. Como modifico el código para que el ancho de las tabs sea fijo? Espero haberme hecho entender y de antemano gracias por tu ayuda.
Hola qué tal, si me compartes el link de tu sitio podría entender de mejor manera el funcionamiento. También no sé cómo haz insertado las tablas, es decir, ¿lo haz hecho con algún plugin o con un módulo? Quizá y sea hasta conflicto o problema del plugin y no de divi.
Hola amigo, me han servido mucho tus videos, una pregunta, se puede hacer la tabla dinámica? es decir que se tomen diferentes marcas y te salga los productos relacionados con la marca? por ejemplo escojo mi categoria tenis y saldrían todos los tenis relacionados a los tenis con sus respectivas marcas y si quiero camisas lo mismo que salgan con sus respectivas marcas.
Puedes incrustar la tienda por categoría, es decir, cada pestaña debe llevar la categoría correspondiente. La categoría puede ser la marca y se la asignas a cada producto.
Muchas gracias!!! Te pregunto, hay alguna forma de quitar el scroll? Qué.los.iconos por ejemplo se organicen en dos filas en lugar de ocultarse?
Hola Leidy, si podría ser posible quitando o modificando este CSS:
@media only screen and (max-width: 980px) {
.ov-tabs .et_pb_tabs_controls {
justify-content: flex-start;
overflow-x: auto;
margin-bottom: 0px;
}
}
En lugar del código anterior usa esto:
@media only screen and (max-width: 980px) {
.ov-tabs .et_pb_tabs_controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
Hola!, se ve muy sencillo, quiero aprender desde cero a hacer algo parecido como este tutorial. ¿en dónde encuentro tus tutoriales para aprender desde cero?
Hola, todos mis tutoriales son específicos donde realizamos una funcionalidad diferente y siempre la empezamos desde certo, si quieres ver el listado de tutoriales completo tanto gratuitos como premium aquí te dejo el enlace: ovdivi.com/blog/
Que buen tutorial !
Una consulta, en vez de hacer click en cada pestaña (vegetales, limones, naranjas, etc.), podríamos trasformar en botones los títulos ?
Hola Victor, nunca lo he intentado pero yo digo que si es posible, solamente sería darle estilos css. Si tienes algún ejemplo podría intentarlo. Saludos
Hola Oscar, tus tutoriales son geniales y muy útiles. queria pedirte ayuda ya que en este tutorial no me aparecen los iconos de cada uno de los elementos, podrías ayudarme? Gracias.. un saludo
Hola Eduardo muchas graicas por tu comentario. Sí por supuesto podría ayudarte. Solamente comparteme la url de tu web para inspeccionarla
Muy bueno, gracias por compartir!!
Un abrazo Natalia :)
Hola!! consulta, como igualaste las alturas de las columnas de la tabla? saludos excelente video
Hola, ¿de qué tabla Mago?
Hola, muchas gracias por el tuto, es posible que realices una tienda online desde cero?
Sí, la tengo en mis planes pero será por Marzo - Abril. Estate pendiente Jhonattan. Saludos.
les dejo el codigo para el que no quiera compiarlo
/*estilos tabs ov-divi*/
.ov-tabs .et_pb_tabs_controls {
display: flex;
justify-content: center;
}
.ov-tabs .et_pb_tabs_controls {
background-color: transparent;
}
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
}
.ov-tabs .et_pb_tabs_controls {
display: block;
}
.ov-tabs .et_pb_tabs_controls {
padding: 30px 0px;
}
.ov-tabs .et_pb_tabs_controls li:before {
content:"";
display: block;
width: 40px;
height: 40px;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_0:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_0.et_pb_tab_active:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_1:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_1.et_pb_tab_active:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_2:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_2.et_pb_tab_active:before {
background: url("#") no-repeat;
}
@media only screen and (max-width: 980px) {
.ov-tabs .et_pb_tabs_controls {
justify-content: flex-start;
overflow-x: auto
}
Excelente, seguramente a más de uno le será útil :) ¡Un abrazo!
Muchas gracias Manuel!!! Tenía unos errores y los corregí Listo, ya pueden copiar XD:
/*estilos tabs ov-divi*/
.ov-tabs .et_pb_tabs_controls {
display: flex;
justify-content: center;
}
.ov-tabs .et_pb_tabs_controls {
background-color: transparent;
}
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
}
.ov-tabs .et_pb_tabs_controls li {
display: block;
}
.ov-tabs .et_pb_tabs_controls li {
padding: 30px 0px;
}
.ov-tabs .et_pb_tabs_controls li:before {
content:"";
display: block;
width: 40px;
height: 40px;
}
/* Tab 1 */
.ov-tabs .et_pb_tabs_controls .et_pb_tab_0:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_0.et_pb_tab_active:before {
background: url("#") no-repeat;
}
/* Tab 2 */
.ov-tabs .et_pb_tabs_controls .et_pb_tab_1:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_1.et_pb_tab_active:before {
background: url("#") no-repeat;
}
/* Tab 3 */
.ov-tabs .et_pb_tabs_controls .et_pb_tab_2:before {
background: url("#") no-repeat;
}
.ov-tabs .et_pb_tabs_controls .et_pb_tab_2.et_pb_tab_active:before {
background: url("#") no-repeat;
}
@media only screen and (max-width: 980px) {
.ov-tabs .et_pb_tabs_controls {
justify-content: flex-start;
overflow-x: auto
}
}
@@Yahoraquefer @OVDIVI se me queda el icono alineado a la izquierda... ¿como lo puedo solucionar?
Increible!! Tengo una duda.. Como podria editar el estilo de la presentacion de los productos? con el codigo que introducimos para mostrarlos, se le podria introducir un poco de diseño? me queda muy basico y no puedo editarlo!
Hola Julian, tendría que hacerse con CSS. Pero si quieres insertar los productos también lo puedes hacer con el módulo tienda, darle estilos e insertarlo en las tabs mediante el shortcode...
hola Oscar esta super pero tengo una pregunta eso lo puedo hacer con una galeria de imagenes con diferentes categorias
Si, queda a creatividad
Sí claro, puedes crearte tus galerías y guardarlas en la biblioteca para que te genere el shortcode, posteriormente introducirlas en las tabs. Cómo te comenta Abner, es cosa de creatividad :)
Hola! Me encantan tus videos!! Un pregunta: Si en vez de meter una imagen quiero meter un icono de fontawesome, hay otro método? o qué tendría que poner en el código css?
Hola Clara, lo ideal sería descargar el icono en svg o en imagen y después subirlos a tu biblioteca de medios.
Excelente tutorial, sabes como podria realizar todo lo del tutorial pero que además la información de las pestañas este oculta solo hasta que el usuario de clic ?
Muchas gracias. Sobre tu consulta, por lo que entiendo necesitas tener solamente las pestañas visibles sin la información. Es algo que por defecto no se puede lograr con el módulo pestañas de divi :( siempre debe estar abierta la primera amigo.
Thank you , Merci
Magnifico, gracias
¡Genial Juan! Saludos
Muchas gracias una vez más por este maravilloso tutorial! una pregunta, ¿cómo puedo hacer que en la vista movil los productos se muestren en una sola columna de ancho completo?
Hola Andres disculpa, hace unos días respondí una pregunta parecida pero ya no recuerdo si fue a ti o no jaja, es que de tantos mensajes se me olvida, pero confirmame si fue a ti sino para darte la respuesta :)
@@OVDIVI no yo no fui! Y busqué en los comentarios igual antes de preguntar 😉
@@cenocoelpiloto En Divi > Opciones del tema > CSS personalizado, pega esto:
@media only screen and (max-width: 768px) {
.woocommerce ul.products[class*=columns-] li.product {
width: 100% !important;
}
}
@@OVDIVI estás seguro que es así tal cual? no me funciona :/
@@cenocoelpiloto Si es así, lo he realizado y me funciona. ¿Cual es el link de tu web?
Hola bro, la verdad excelente canal y contenido, muchas gracias por tus aportes. Quisiera consultarte algo. Resulta que tengo un inconveniente a la hora de trabajar en local con el Xampp, no se si es por eso o cuál será lo que genera problemas pero no puedo usar el módulo de social media(de las redes). Osea dentro del constructor si se ve todo bien perfecto pero cuando actualizo la página para ver cómo va quedando no me lo toma, me aparecen como transparentes pero cuando inspecciono el código si están. También por ahí me cambia de color en algunas secciones, lo veo de un color en el constructor visual de divi pero cuando refresco para ver me sale de otro.
A qué puede deberse esos errores? Espero tu respuesta, gracias :)
Hola Juan probablemente estés teniendo problemas con la cache de divi, te recomeindo desactivarlo desde Divi / Opciones del tema / Constructor / Avanzado / Generación de CSS estático...
Hola, gracias por el tutorial, como puedo hacer para que los iconos sean mas grandes? que debo modificar?
Hola en esta línea de código CSS .ov-tabs .et_pb_tabs_controls li:before debes aumentar el width y height. Y obviamente tus iconos también deben estar a esa anchura y altura.
Gracias por fenomenal tutorial hermano, una consulta, a la hora de colocar las url de los iconos, en las tab, coloco las dos, pero el icono activo no se me visualiza, no se por que le código esta todo bien, y otra consulta, en las pestañas donde puedo colocar un código para que me haga scrroll horizontal en los productos en cada pestaña para la versión mobile, gracias de ante mano,.
Hola José, debe funcionar si sigues los pasos correctamente. Para hacer el scroll horizontal en móvil debe ser en el código CSS.
@@OVDIVI gracias capo por siempre repsonder
Increible Video e interesante tu contenido! tengo una pregunta, al publicar un producto en (Woocommerce desde tu página web) este plugin te cobra por una pasarela de pago?
Hola Piero, depende de que tipo de pasarela pero por lo regular con las gratuitas basta cómo paypal o stripe. Si quieres implementar alguna pasarela de pago de tu país seguramente ellos te brindan un plugin para integrarlo con woocommerce. Pero en sí, woo no cobra por implementar métodos de pago.
hola tu tienes algun tuto para poner las pestañas de ancho completo de la pagina?
Hola qué tal, ¿Cómo pestañas de ancho completo? ¿Tienes un ejemplo? Para darme una idea de que deseas lograr.
Hola Oscar gracias por el tutorial. tengo una pregunta ese shortcode es para Woocommerce.com o para woocommerce.org sirve igual.? o son dos plugins diferentes.
Hola Jhon qué tal. Creo te refieres si es para WordPress.com o WordPress.org, este tutorial es para el CMS WordPress.org amigo.
@@OVDIVI ok gracias Oscar
Hola, buenos días. Me podrías ayudar tengo problemas con el temple de divi. Me sale que tengo problemas con los estilos. Que estan incompletos. Como lo podria solucionar gracias. Tus videos me sirvieron mucho.
Creo que ya lo platicamos por messenger. ¡Saludos!
Genial! gracias...!
¡Venga Ramiro!
Hola buena tarde, me encanta como explicas y mas que nada el contenido que manejas; me has salvado de una y muy grande...Pero hago todo lo que mencionas pero al refrescar mi página la pestaña sale en blanco cuando se supone que el código esta bien, me podrías ayudar por fa o no se como enviarte imágenes de lo que sucede
Hola Marietta, muchas gracias. ¿No tienen animaciones los elementos que deseas insertar? Si tienen animación debes quitarla porque si no no se mostrarán
@@OVDIVI no nada de animación son JPG, pero no me aparece nada
Que programacion haces css y java
Hola, CSS no es programación solo es un lenguaje de estilos. Java es un lenguaje de programación pero es diferente a JavaScript, en la mayoría de mis tutoriales usamos pequeños fragmentos de código jQuery que es una librería de JavaScript. En algunos otros usamos PHP también.
Hola buen tutorial, a alguien le pasó que no le quedó centrada y con el mismo las pestañas. Me quedaron alineadas a la izquierda.
Hola Lennin, es probable que no esté tomando un valor CSS correctamente. Compárteme la url de tu ejercicio para inspeccionarlo.
Excelente. Óyeme tengo una pregunta. De algo diferente. Y es como agrando mi logo en divi. Pues he intentado diferentes cosas y no se agranda. Coloque mi logo y cuando sale, es muy pequeño. Cambie por uno igual pero de más píxeles y tamaño. Pero me sale exactamente igual. ¿Qué puedo hacer?
Hola Oscar, ¿Cómo estás intentando insertar tu logo? Es decir, desde el menú por defecto de divi o desde el generador de temas?. Porque si lo haces como este último puedes cambiar el tamaño desde los ajustes del módulo.
Hola mil millones de gracias por tu video, pero yo quiero hacer un contenedor con pestañas y subpestañas y que quede bien cuadrado, pero todo se me descuadra, ojala pudieras ayudarme con esta duda mil gracias.
Hola, me parece que ya te pusiste en contacto conmigo por otro medio. En tu caso debes hacerlo con shortcodes pero debes eliminar los margenes y rellenos para que no te genere los espacios
@@OVDIVI muchísimas gracias así lo hice y quedo! Un abrazo!
Este tutorial es excelente. Muchas gracias.
Una consulta: a mi me aparece uno o dos segundos nada mas y luego dasaparece, la barra del scroll horizontal del minuto 21:57. Por qué será? muchas gracias.
Hola Ramiro muchas gracias. La funcionalidad de la barra depende de cada navegador. Pero si quieres que siempre esté visible en el código CSS: overflow-x: auto;
Reemplaza "auto" por "visible".
@@OVDIVI genial! gracias. Siempre pienso que tengo que aprender más de código CSS para mejorar esos detalles a nuestras webs.
Es posible insertar uno de los iconos de divi , con efecto hover? la idea sería no tener que subir img.
Podría ser posible, en lugar de utilizar el código para insertar las imágenes:
background: url("#") no-repeat;
Utilizas algo así:
font-family: 'ETMODULES';
content: '\e015'; /* código icono */
font-size: 1.5em;
color: #000;
Aquí tienes el listado de los iconos que puedes utilizar: dividezigns.com/divi-icon-codes/
Hola bro. Una consulta y ayuda idealmente Quiero terminar de hacer una web que va de ofrecer un servicio de SEO Local, por ello lleva más texto explicativo que otras. Para ello tengo audios que relatan estos textos, para el que no quiera o pueda leerlos bien.
Necesito un plugin o otra forma de poder representar una imagen, botón o algo así en la que el usuario pueda clickar y al hacerlo se escuche este audio de un párrafo en concreto ( Digamos como ejemplo un determinado servicio). No he podido encontrar la forma correcta de hacerlo. Le pues un modulo de audio Divi y queda muy grande y no se ve bien estéticamente. Tendrás alguna idea de como hacer algo así, y por su puesto en Divi .
Gracias por cualquier ayuda sobre este tema.
Hola PAT qué tal, la verdad no tengo experiencia con algún plugin de audio, yo lo haría con el módulo que viene con divi y lo adaptaría correctamente con CSS si es necesario. Pero he encontrado este artículo que probablemente podría ser de ayuda: kinsta.com/es/blog/reproductores-audio-wordpress/
@@OVDIVI OK, muchas gracias. ya tenia esa pagina pero obviamente se agradece el tiempo dedicado en buscar y responder. Y bueno, si lo estoy haciendo con el modulo de audio de Divi, lo que si no queda muy bien. Tal vez con css quede mejor pero no se mucho del tema. bueno, nuevamente gracias.
Una pregunta, en escritorio queda bastante bien, pero en móvil y tablet sale con una barra blanca abajo y se vuelve a ir para la izquierda las tabs
Hola Benjamin, qué raro, envíame el enlace de tu ejercicio y reviso qué está pasando.
hola como estas en mi caso ami no se me reflejan los cambios SABES CUAL SERIA EL ERROR POR FAVOR
Hola, ¿guardas cambios pero no se ven en la parte frontal? O ni si quiera te deja guardar cambios?
Se puede añadir el botón "añadir a carrito" debajo de cada producto?
ya lo he echo con código php, entrando en opciones de tema vía ftp.
@@manuelgallego657 Sí claro que se puede. Puedes usar este fragmento:
// Agregar botón de "añadir a carrito" en los productos del módulo tienda
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
Sí lo modificaste desde los archivos del tema se te va a borrar cuando actualices divi. Lo mejor es instalar el plugin "Code Snippets" y desde allí meter el fragmento. También puedes usar un childtheme y meter el código en el archivo functions.php
@@OVDIVI a genial, eres un fenómeno la verdad.
ya lo cambié, la verdad no sé como no lo trae woocommerce ya implementado.
No obstante me gustaría que hicieses mas tutoriales acerca de woocommerce y divi sobretodo qu tengan que ver con el aspecto de las páginas mi carrito y mi cuenta.
Gracias ...
Hola OV Divi, una duda. Cuano pongo el icono sale al lado izquierdo y no arriba que puede ser ¿?
Hola Julián, en el código CSS:
.ov-tabs .et_pb_tabs_controls li {
display: flex;
flex-direction: column;
align-items: center;
border-right: none;
}
reemplaza flex-direction: column; por:
flex-direction: row;
Hola si quisiera poner para que al seleccionar una categoría aparezca debajo las subcategorias ? Con los iconos que ponga como hago para que aparezcan ?
Hola Rodrigo este ejercicio solamente esta adaptado para categorías padres, no es posible mostrar sub categorías al menos que lo hagas con un mega menú: ua-cam.com/video/TWEooesG_QI/v-deo.html
Gracias nos ha servido mucho: www.ligasantadeoracion.es Gracias por enseñar de manera didáctica y sencilla
Excelente, me da gusto saber que es tutorial les fue de mucha ayuda. Un abrazo hasta España.
cuando achico la pantalla como vos se me coloca una por encima de otra...sabes a que se debe?
Hola Manuel, probablemente hay un problema con los estilos CSS. Si me compartes la url de tu ejercicio puede inspeccionarla y descubrir que pasa. Quedo atento.
@@OVDIVI YA ESTA SOLUCIONADO UTILICE EL CSS; display:flex y overflow-x
Pero como haria si quiero que el icono vaya al lado izquierdo
Hola Joselito, puedes hacerlo como lo hicimos en este otro tutorial: ua-cam.com/video/SNvcwRtztrg/v-deo.html
se me quedan los iconos alineados a la izquierda, ¿cómo lo puedo solucionar?
Hola Victor, ¿Cual es el link de tu ejercicio?
Lo mejor es utilizar los sorcodes de woocomerce no utilizar el plugins es asi
Entre menos plugins se utilicen mejor :)
Capisimo
Seguimos Elvis! 🔥🔥🔥
puse el shortcode, y dejo de funcionar todo.-
Hola Jonatan, algo debe estar causando el conflicto, ¿seguiste todo correctamente?
Tendrías que hacer un tutorial.de como se construye los schort codes
Hay plugins que nos facilitan la creación de los shortcodes pero también hay snippets php para la creación de uno :)
Que son los.snkpers.de.php
@@juanenriquenavalon4499 son pequeños fragmentos de código para agregar funciones en WordPress