Las Filas Pueden Ser Extremadamente Versátiles
Las Filas son los diversos diseños de columnas que pueden ser colocadas dentro de las secciones. Muy similar a los Módulos, las Filas tienen varias configuraciones que pueden ser accesadas haciendo click en el ícono en la esquina superior izquierda de la fila. En este tutorial estaremos viendo sólo algunas de las características y cómo pueden ser usadas para crear algunos diseños interesantes.
La Configuración General
HACER QUE ESTA FILA TENGA ANCHURA COMPLETA (MAKE THIS ROW FULLWIDTH): Habilita esta opción para extender la anchura de esta fila hasta el borde de la ventana del navegador.
USAR ANCHURA PERSONALIZADA (USE CUSTOM WIDTH): Cámbialo a Sí si deseas ajustar la anchura de esta fila a una anchura no estándar.
EL USO PERSONALIZADO DE CANALÓN DE ANCHO (GUTTER WIDTH): Habilite esta opción para definir canalón ancho de esta fila.
RELLENO PERSONALIZADO (CUSTOM PADDING): Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.
CONSERVAR EL RELLENO PERSONALIZADO EN DISPOSITIVOS MÓVILES (KEEP CUSTOM PADDING ON MOBILE): Permitir que el relleno personalizado se conserve en pantallas de dispositivos móviles
IDENTIFICADOR CSS (CSS ID): Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.
CLASE CSS (CSS CLASS): Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.
DISEÑADOR DE ADMINISTRACIÓN: Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.
Ajustes avanzados de diseño
Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.
Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.
Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.
Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.
Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.
Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.
Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.
Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.
Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.
Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Habilitar esta opción forzará que todas las columnas en una fila tengan la misma altura.
Igualar las Alturas de las Columnas (Equalize Column Heights) – Esta es una excelente opción, especialmente útil cuando has aplicado colores de fondo a columnas individuales. Habilitar esta opción forzará a todas las columnas en la fila a tener el mismo valor de altura.
Columna Imagen de Fondo (Column Background Image) – Para cada columna en una fila, puedes asignar una imagen de fondo independiente.
Columna Color de Fondo (Column Background Color) – Para cada columna en una fila, puedes asignar un color de fondo independiente.
Columna Relleno (Column Padding) – Para cada columna en una fila, puedes asignar valores de relleno independientes.
Mantener la Columna de Relleno en el Móvil (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.
CSS Personalizado
Antes (Before) – Agrega aquí el código CSS para ser aplicado en el elemento :before en el div de la fila principal.
Elemento principal (Main Element) – Agrega aquí el código CSS para ser aplicado en el div de la fila principal.
Después (After) – Agrega aquí el código CSS para ser aplicado en el elemento :after en el div de la fila principal.
Vamos a Probar algunas Configuraciones
Ahora que hemos visto varias de las configuraciones, vamos a probar algunas en combinación para mostrarte lo que es posible hacer cuando cada configuración es utilizada creativamente. En este ejemplo, estaremos jugando con la Fila de Anchura Completa como introducción. La opción para hacer «Anchura Completa» es una de las opciones más versátiles en el kit de herramientas. Esta extenderá el ancho de la columna a los bordes de la ventana del navegador, similarmente a una sección de Ancho Completo. Sin embargo, a diferencia de la Sección de Anchura Completa, las Filas de Anchura Completa pueden tener estructuras de columnas y pueden hospedar cualquier tipo de módulo.
En el ejemplo siguiente se creó una Fila de 4 Columnas y se agregó una imagen a cada columna. Después se habilitó la opción de «Hacer Fila de Anchura Completa» para extender la fila a los extremos de la ventana del navegador.
Después se redujo a 1 el «Espacio Entre Columnas» que aparece cuando se elige «Sí» en la configuración de «El Uso Personalizado de Canalón de Ancho» (Gutter Width), para eliminar el espacio entre las columnas en la fila.
Finalmente se eliminó el espacio «Superior» y «Base» de la fila cambiando la opción de «Relleno Personalizado» (Custom Padding) a cero las dos.
El resultado es una transformación completa de la fila, convirtiendo nuestra fila normal de 4 columnas con imágenes en una galería que luce espectacular sobre la sección verde debajo de ella. Este mismo efecto puede ser creado utilizando colores de fondo personalizados en las columnas y módulos de texto ¡Las posibilidades son infinitas!
Buenas tardes,
me gustaría hacerte una consulta. He marcado la opción de igualar altura de las columnas, pero no hace nada, no me las iguala. No se si estoy haciendo algo mal.
Muchas gracias de antemano.
Sé lo que dices, José María. En un sitio de un cliente mío, específicamente este, en la página principal podrás ver que tengo 4 columnas de colores y 4 columnas transparentes. No fue posible emparejar las columnas utilizando sólo la configuración de Divi. Probé agregando estilos CSS para forzar la altura de las columnas a que fueran igual pero el texto siempre fue el problema, de modo que además de eso, tuvimos que redactar el contenido de cada columna para que más o menos tuvieran una cantidad de caracteres similares.
Buenas tardes,
He creado una web con DIVI con efecto paralaje en algunas imágenes y funciona bien en ordenador pero lo desactiva en móviles y tablets.
Entiendo que lo hace para que cargue más rápido la web en móviles, pero es posible activarlo?
Muchísimas gracias
Un saludo
Hola Rodrigo,
Prueba esto:
Busca y edita este archivo:
Divi\includes\builder\scripts\frontend-builder-scripts.js
Y reemplaza esto:
et_pb_parallax.length && !et_is_mobile_device ) {
Con esto:
if ( $et_pb_parallax.length) {
Saludos!
Buenos días Lalo,
Gracias por tu respuesta.
Perdona mi ignorancia pero donde puedo encontrar ese archivo?
Buscando en el css solo encuentro .php. Es un texto que está dentro de uno de ellos?
Mi web es de wordpress hecha con Divi.
Muchas gracias!
Un saludo
Mil disculpas Rodrigo, apenas voy viendo tu respuesta. Seguramente ya lograste dar con la información, pero por si alguien más tiene esta misma duda, el archivo que buscas está dentro del directorio de la plantilla Divi, en el subdirectorio Themes dentro de tu instalación WordPress.
Hola, que tal, me preguntaba si podrias ayudarme porfavor.
el tema es que tengo mi web echa con el tema divi y me gustaria activar el video wallpaper en la vista movil; ya se que en el tema no lo permite, pero si me dijeras que archivo puedo modificar seria estupendo.
muchas gracias. Un saludo
Hola como estas, me surge una duda, estoy trabajando en tema DIVI, no había tenido inconvenientes hasta el momento, pero de un momento a otro, no pude volver a eliminar las row (filas) ellas contienen en una esquina una x y de allí se eliminaban, pero de un momento a otro, ya no se puede… sabes si es cuestión de algún ajuste o algo que moví… por favor agradecería su ayuda.
Hola Leonardo, me encuentro en el mismo problema, me es imposible eliminar las columnas del Divi, si has conseguido arreglarlo, indicamelo, gracias de antemano
Quizá sea problema de caché. Prueba lo siguiente:
Usando Google Chrome, inspecciona la página problemática, y en la sección de Console pega la siguiente instrucción:
window.localStorage.clear()
Ahora refresca la página para ver si se solucionó el problema.
Nota: esta acción podría eliminar caché de otras páginas distintas.
Si,era problema de cache,ya esta solucionado, muchas gracias por el aporte
Hola como estas, una duda, crees que con Divi se pueda hacer algo así http://www.cinepolisklic.com/ sin login ni rating pero si con el reproductor y con la imagen superior mas o menos así http://hdfull.tv/pelicula/jack-reacher-never-go-back
Hola Greg, gracias por tu consulta. Sí es posible hacerlo con los bloques Divi de base, pero tendrías que hacer bastantes modificaciones manuales. No logro ver el reproductor en la página en cinepolisklic.com, sólo en la de hdfull.tv en la parte inferior, y están usando un iFrame para insertar el código desde http://powvideo.xyz/. Saludos!
Con modificaciones manuales te refieres a meterle codigo css… o solo trabajar con el builder… x cierto de de el otro mensaje, lo decia x el subdominio que no quiero q quede publico…
Depende de lo que desees hacer. No estoy muy seguro cuál diseño tienes en mente todavía. Con divi puedes hacer lo que hiciste en tu sitio de pruebas, pero necesitas modificar algunas cosas en la sección de columnas para que los carteles queden pegados sin espacio. Puedes tener más de 4 slides en los sliders, si es a lo que te refieres.
Este mensaje no lo vayas a publicar… estoy probando divi y a duras penas tengo ésto (es un subdominio mientras pruebo) […] quiero hacer una paginita con ls peliculas del estudio Ghibli, por eso te realizaba la pregunta anterior.
No sé como hacer un slider con los carteles y que sean mas de solo cuatro carteles pero creo que eso no es posible con Divi…
¡Greg, se publicó automáticamente!
Oh… bueno ya ni que…
No te preocupes, ya edité tu mensaje y eliminé el url de tu sitio 🙂
ah ok… pero si viste como está la pagina, ahi voy probando a ver como queda…
Sí, estoy en tu página ahorita. Todavía no comprendo bien cuál es el diseño que deseas lograr.
Ah estas viendo la pag… ok, segun lo que leí anteriormente me da la impresion que a ti te aparecen los carteles con un espacio por lo q tome un print https://gyazo.com/4a716fca1f2ca527afef38086d63ee0a para que veas que no les dejé espacio… y el diseño que quiero es basicamente como el de http://www.cinepolisklic.com/ una pagina de inicio, con la imagen superior que creo sería un slider de anchura completa ( creo q asi se llama) y mas abajo varios sliders y cada slider con varios carteles no solo los 4 carteles que me deja poner divi (aún no sé como ponerle mas de 4 imagenes debo seguir buscando) y cuando se de click en un cartel que lleve a otra pagina o entrada con una imagen superior ancha, (nuevamente un slider anchura completa) y abajo el reproductor, si le das click al cartel de chihiro veras con lo que he estado probando…
No sé si me hice entender mi estimado.
En la página de cinepolisklic.com (https://s22.postimg.org/5ous2tudt/Screen_Shot_2016_11_17_at_9_57_25_PM.jpg) está el slider superior que deseas con 13 slides. Esto es posible hacerlo con el slider de Divi, pero incluso puedes agregar un slider más avanzado (como Nivo, Meteor o Revolution) para darle más funcionalidad, usando el módulo de código en fullwidth (anchura completa).
Para agregar los carteles de abajo necesitas otro tipo de módulo que Divi no tiene. Necesitarías un plugin de carousel. En Code Canyon puedes encontrar varios tipos de carousel (https://codecanyon.net/search?utf8=✓&term=carousel&as=1&type=c&category=wordpress) sería cuestión de ver cuál se acerca más a lo que necesitas.
Si que idiota q soy jaja disculpa, eso mismo te venia a decir, me confundi y le decia slider al carrousel con los carteles que me comentas, ya con esto me has ayudado bastante, voy a seguir probando gracias.
Excelente, espero que logres tu objetivo. Gracias de nuevo por tu visita y saludos cordiales.
Buenos días Lalo, en primer lugar muchas gracias por tus explicaciones tan claras y útiles.
Disculpa que use este post para presentarte mi duda, pero no he sabido encontrar en tu blog algún otro apartado donde se trate el tema.
En concreto, el ancho de las columnas, o de los módulos en particular que ofrece DIVI.
Veo que se permite modificar los márgenes y los rellenos, pero no los anchos, que quedan fijos según la plantilla elegida: 50-50, 1/3-1/3-1/3, etc.
Hay posibilidad de modificar el ancho de esas columnas, o por ejemplo, fijar en su interior el ancho de un módulo texto?
Gracias por tu atención
Buenos días Enric, muchas gracias por tu visita y tu comentario. No estoy muy seguro de entender tu pregunta, creo entender que buscas tener módulos con un ancho fijo que no se acomoden automáticamente a la disponibilidad de espacio en los distintos tamaños y orientaciones de pantalla ¿es correcto? Utilizando sólo los controles de Divi, puedes hacer esto en los Ajustes Avanzados de Diseño de cada módulo en el control de Anchura Máxima y fijar una anchura para Desktop, para Tablet y para Móvil. Aunque esto sólo te daría control sobre el ancho máximo y siempre podría disminuir dependiendo de la medida que le des y el espacio disponible en pantalla. Una solución más estricta sería entrar al CSS Personalizado de tu módulo (por ejemplo el de Texto) y en el área de Elemento Principal definir una anchura, digamos
width: 150px;
y entonces el contenido de ese módulo siempre tendría la misma anchura independientemente del espacio en pantalla pero sólo hasta el máximo disponible. Espero que haya podido responder tu pregunta, saludos cordiales.Buenos días Lalo, gracias por tu respuesta.
Efectivamente, has entendido totalmente mi consulta. He visto que sí se puede fijar el ancho máximo, pero no un ancho fijo, como sí que se puede hacer cuando se parametriza una fila en Fila Modulo Ajustes, con el parámetro Usar Anchura Personalizada.
Al ver que los módulos que se incorporan a una fila permiten un control total en márgenes y rellenos, me extrañaba que no se diera el mismo control con el ancho, y creí que algo se me estaba escapando, pero por tu respuesta veo que esto es lo que hay, para fijar ese ancho hay que entrar en el CSS, lo cual no deja de ser un engorro, dada la facilidad extrema con que se permite el resto de parametrización.
Muchas gracias por tu ayuda y atención
Buenos días Lalo,
tengo unos espacios enormes entre mis módulos y no consigo reducirlos de ninguna manera.
Los espacios se encuentran en el módulo de título de anchura completa, tanto superior como inferior.
Utilizando la opción de relleno específico, no visualizo cambios.
¿Podrías ayudarme?
Hola Lalo, disculpa pero las opciones de «Guitter width» y «Custom padding» no estan disponibles en mi WordPress. Sabes si hay alguna forma de añadirlas, habilitarlas o algo asi? De que otra forma puedo reducir los espacios entre filas y columnas?
¡Hola Mid! Si estás utilizando Divi 3+ esas opciones deben estar presentes. Tal vez puedes encontrar el «Gutter Width» traducido como «El Uso Personalizado De Canalón De Ancho» (una traducción muy mala, pero en fin). Habilitando esa opción te aparecerá un slider que puedes mover a la izquierda y a la derecha para definir el espacio entre columnas. Con respecto al «Custom Padding», lo puedes encontrar como «Relleno Personalizado» y son 4 espacios para definir el relleno manualmente (números positivos a partir de 0 solamente, sólo los márgenes aceptan números negativos). Podrás definir relleno Superior, Derecha, Base e Izquierda para Desktop, Tablet y/o Teléfono. ¡Saludos!
Muchas gracias por este tema tan amplio.
Tengo una duda con unas imágenes del slider a full widht.
¿Cual es la medida recomendada estandard para el slider?
Me queda muy grande y desajustada.
Saludos
Hola Javier, gracias por tu visita. Realmente no hay una medida recomendada, aunque muchas personas utilizan imágenes de 1920 pixeles por 600 pixeles para los sliders a full width. Yo he utilizado imágenes de hasta 2500 pixeles por 800 pixeles.
buen dia. gracias por tanta informacion util. tengo una duda con las columnas y filas. por mas que intento no me queda esa seccion de anchura completa. la puedo modificar hacia abajo con menor tamño, bien. le pongo en los ajustes. que este de anchura competa, le pongo valores personalizados y nada. siempre me queda un espacio. es decir como si no quedara de anchura completa. la seccion de ahchura completa si funciona bien. pero la seccion estandar al querer colocarle todo el ancho, no se muestra como tal. lo maximo que he llegado es desde el personalizador de tema logro colocarla. se muestra en la vista previa, guardo los cambiios y cuando voy a la pagina nada. sigue con ese escpacio.
Hola Rubén, entiendo que es una sección estándar que estás tratando de hacer de anchura completa ¿correcto? Necesitas que rompa los márgenes y se salga hacia la derecha y la izquierda sin que queden espacios. Lo que no mencionas es cuál es el módulo y contenido de la sección o qué es lo que estás tratando de hacer que llegue a los extremos ¿podrías mostrarme el URL de la página en cuestión por favor? ¡Saludos!
alguien que sepa como poner a funcional la barra de busqueda de divi, para que busque productos y no traiga nada mas
Una solución que encontré sería modificar el formulario agregando
<input type="hidden" name="post_type" value="product" />
quizá agregando el siguiente código en Divi > Opciones del tema > Integración en la sección «Agregar código al <head> de tu blog»:jQuery(document).ready(function($){
$('<input>').attr({
type: 'hidden',
name: 'post_type',
value : 'product',
}).appendTo('#searchform');
});
Puedes cambiar
#searchform
por el ID personalizado que le des a tu formulario.Un método alternativo a la barra de búsqueda Divi podría ser agregar el widget de búsqueda de productos de WooCommerce. Si necesitas más opciones hay una versión Premium en https://www.woothemes.com/products/woocommerce-product-search/
Saludos.
Nota: NO copies y pegues el código porque para que se mostrara correctamente aquí he cambiado unos caracteres. En cambio, escríbelo manualmente.
hola Roberto recién vi tu respuesta y no me funciono, eh resuelto con un plugin externo pero quisiera hacerlo con el modulo de búsqueda de divi ya que puede dársele mejor estilo y es de mejor manejo. si sabes como hacer funcional el modulo de búsqueda de divi para que funcione igual que la búsqueda de woocommerce, estoy dispuesto a pagar.
gracias y espero que lo veas este año jjajjaj
Qué tal Edward ¿dónde puedo ver tu sitio Web? Yo te puedo hacer funcionar tu módulo de búsqueda de Divi para que busque sólo tus productos y ningún otro contenido. Saludos.
Chokerrd.com
Mándame un correo para hablar por ahí de forma más directa.
Edwardtejeda@hotmail.com
Lalo recién comenzando esto y con ganas de aprender mas, mi pregunta es la siguiente:
estoy creando una web para mi colegio a modo de prueba pero cuando ingreso a la pagina entre el menu principal y la sección deslizante de ancho completo, tiene como una animación que hace que esta se mueva y luego tome la posición original, en la sección historia LNZ se puede ver mejor esto donde agrega el modulo pestañas se mueve y luego toma su posición, puedo quitar esto para que quede fijo o algo mal desde la configuración original que no haya visto.. acá la web para que me ayudes si puedes.
http://www.liceonuevazelandia.cl
Miles de gracias he aprendido mucho con tu ayuda
Hola Alejandro, gracias por tu visita. Al parecer el problema viene desde la forma en que Divi va agregando los varios estilos a la página. Primeramente carga la hoja de estilos CSS y el HTML y al final carga el javascript con los estilos que hayas modificado en la personalización de cada módulo. En tu caso, has modificado tu módulo de pestañas en la página de «Historia LNZ» para que tenga un padding top de 137 pixeles. Esta instrucción la agrega por medio de javascript directamente como inline style al HTML de la página así:
<div class="et_pb_section et_pb_section_0 et_section_regular et_pb_section_first" style="padding-top: 137px;">
¿Cómo podemos resolver esto?
Bueno, una posible solución sería agregar ese
padding-top: 137px
a tu hoja de estilo, ya sea en el style.css de tu child theme si es que lo usas, o quizá pueda funcionarte también si lo colocas en la sección de CSS en la configuración de Divi > Opciones del tema > General y hasta abajo en CSS personalizado. Necesitas identificar las páginas donde quieras alterar esas instrucciones, por ejemplo, la página de LNZ es post-61, por lo que deberías escribir algo así:#post-61 et_pb_section_0 {
padding-top: 137px;
}
Si no te funciona, prueba agregar la instrucción !important al final así:
padding-top: 137px !important
Lo que todo esto va a hacer es agregar una instrucción redundante a los navegadores de manera que cuando se cargue el javascript con la instrucción del padding-top de 137 pixeles, ya se habrá cargado anteriormente la instrucción en la hoja de estilo y no habrá dicho salto posterior.
Si esta instrucción te modifica de alguna manera negativa la versión para tablets o móviles, vas a tener que limitar su uso a escritorio utilizando el código anterior dentro de:
@media only screen (min-width: 981px) {
}
Avísame si te funciona ¡saludos!
lamentablemente no funciona, creo que debi haber metido la pata en alguna configuracion que no debia, ahora creé un subdominio y comence de nuevo pero sigo teniendo el mismo problema.
http://prueba2.liceonuevazelandia.cl
haber si me puedes orientar un poco si llegaras a tener un poco de tiempo.
Saludos y mil gracias por todo
Hola Alejandro, acabo de visitar tu subdominio prueba2 y veo que ya no tiene el brinco que tiene tu dominio principal ¿lo solucionaste?
Hola, estuve realizando algunos cambios en el deslizado de la pagina principal ya no ocurre, pero si en las otras paginas, gracias a tus consejos vamos mejorando, si puedes dale una mirada a las secciones historia, inf. institucional, etc.
te agradezco millones por tu ayuda y buena disposición, lo mejor de todo lo he aprendido en tu blog,,
prueba2.liceonuevazelandiacl
Hola, he realizado los cambios que dices y me sale todo, excepto que me sigue quedando 1 píxel de separación entre las columnas ¿Cómo puedo eliminar ese espacio? A mi no se me juntan las columnas completamente
Hola Jorge, necesitaría ver tu ejemplo, compárteme el URL de tu proyecto. ¡Saludos!
Gracias, ya está resuelto, el problema era de la imagen que tenía un píxel de más
Qué bien ¡Saludos!
Hola, he dado por casualidad con tu sitio, y veo que con divi la tienes muy clara. Yo usaba sahifa y jupiter para mis sitios hasta que conoci divi y ahora estoy armando un sitio con el, lo que he visto me ha encantado sobre todo la ultima version con su editor de paginas. Estaba acostumbrado a profitbuilder, instabilder, thive y vccoomposer.
Como no manejo aun la estructura de esta formidable plantilla. bien la consulta es no me agrada mucho el tema de los titulos como los pone, y para poder personalizar titulos instale un plug que oculta el titulo original de la pagina, ahora bien al ocultar queda un espacio ahi sin usar… y entre la barra de navegacion y el contenido de la pagina mas espacio, hay alguna forma de poder eliminar el espacio del titulo que ocupa el titulo?
por ahi vi ya que recien estoy adentrandome que en el panel de control hay algo de peronalizar titulos pero no se como funciona esto…
Bueno desde ya muchas gracias, cordial saludo
Hola Alejandro, primeramente una disculpa por mi respuesta tardía. Estoy visitando tu sitio https://bancodatas.com/ pero no encuentro el problema que mencionas ¿ya lo solucionaste? Saludos.
Hola Lalo,tengo un problema con Divi,cuando le pongo un vídeo de fondo,no me funciona se queda el vídeo como estuviese en pausa una imagen parece mas que un vídeo,el vídeo esta subido en Mp4 y pesa 2mg,estoy desesperado.
Gracias.
Hola Antonio, no has dejado la dirección de tu sitio para verlo, pero lo primero que recomiendan en Elegant Themes es que los videos no los alojes en tu propio servidor, mejor en algún sitio especializado en «streaming» como Vimeo, por ejemplo, o un CDN. Por compatibilidad se recomienda que además de la versión MP4 también subas una version WebM.
Hola Lalo, te hago una consulta veras intento utilizar una seccion de ancho completo, la agrego y dentro de esta yo tengo comprado un modulo de ancho extendido que permite agregarle encabezados, efectos etc… pero bueno al grano agrego el modulo de una foto que aparecera en pantalla completa esta pero el problema es que solo me muestra una parte de la foto si bien me respeta el ancho no el alto, hay alguna forma de que al poner la foto me la muestre no solo en pantalla completa sino que respete el alto? desde ya mil gracias
Hola de nuevo Alejandro, primeramente asegúrate de no estar usando el efecto de paralelaje (paralx).
El problema con presentar una foto completa en un módulo de ancho completo que NO sea el módulo de imagen, es que usualmente la altura va a estar basada en el contenido del módulo (a menos que agregues un tamaño de altura específico con CSS, por ej. [code].et_pb_slider .et_pb_slide { height: 800px; }[/code] ) y esto causa que la imagen se corte si creces o reduces horizontalmente la ventana. Es cuestión de proporciones (aquí puedes ver una herramienta en línea para calcular proporciones: http://andrew.hedges.name/experiments/aspect_ratio/).
Sin embargo, puedes más o menos manejar esto usando «paddings» dentro del contenido, específicos al tamaño de pantalla (móvil, tablet y desktop) basados en lo largo y ancho de tu imagen (todas las imágenes deberán tener el mismo largo y ancho). Pero no será la solución perfecta. Puedes hacer el cálculo utilizando esta tabla: Para desktop, divide el alto de la imagen entre 2, y pon ese resultado en el relleno (padding) superior y también en el relleno inferior. Tienes que hacer lo mismo para Tablet y para Móvil, y para eso utilizarás la calculadora de proporciones que te mencioné arriba, y cuando tengas las medidas de altura correspondientes, vuelves a dividir entre 2 y haces lo mismo con el relleno superior e inferior para la versión Tablet y la versión Móvil.
En el slider extendido también puedes manejar el tamaño de la imagen como «Cover», «Fit» y «Actual Size». La primera opción «cubre» todo el espacio sin importar si lo creces o lo reduces, pero corta la imagen. La segunda opción «fit» se trata de adaptar a la altura, pero tiene el inconveniente que quedan espacios vacíos a los lados. Y la tercera opción, «actual size», también te puede dejar espacios a los lados si no es lo suficiente grande.
Si todo falla, todavía puedes tratar de tener la parte importante de la imagen utilizando la configuración de posición de la imagen (centro centro, centro superior, izquierda inferior, etc.).
Hola, mi problema es que me gustaría que la imagen de la home se adaptase al alto de la pantalla en función del dispositivo que sea.
Estoy buscando por todos los lados pero no veo nada.
Puedes ayudarme a hacerlo en Divi?.
Hola Roberto ¿cuál es «la imagen del home»? Saludos
Gracias por la rapidez.
Ahora esta como muy de moda el que cuando entras en un sitio este tenga una imagen que ocupa todo el alto de la pantalla y si vas reduciendo el tamaño de la ventana esta se va adaptando justo al alto que le des.
Esto es lo que me gustaría saber como se hace. (espero haberme explicado bien).
Roberto, ¿lo necesitas no se puede hacer con una sección de anchura completa y un módulo de imagen de anchura completa?
Perdona el retraso, no lo se por que lo que yo quiero es el alto en este tema gratuito de wordpress la imagen está colocada como yo digo.
https://es.wordpress.org/themes/twentyseventeen/ (la imagen del cactus).
Un saludo
Roberto.
Viendo la imagen del cactus, estoy bastante seguro que con el módulo de imagen puedes lograrlo perfectamente, ya sea en una sección de ancho completo o en una sección estándar. Saludos!
El alto completo en función de la altura de la ventana del navegador?. El ancho no tengo problema con el alto estoy totalmente perdido.
Gracias.
Te hice un ejemplo, mira: https://ayuda.lalomarquez.net/prueba-de-imagen/
Primero gracias por el esfuerzo y la rapidez pero no es lo que yo busco, en tu ejemplo la imagen no cubre todo el ancho y todo el alto del navegador.
No se si me explico.
Gracias.
No comprendo bien lo que buscas. Lo que hice fue reproducir en Divi el ejemplo que me diste de esta página: https://es.wordpress.org/themes/twentyseventeen/ Si deseas que cubra el ancho completo, puedes utilizar la sección de ancho completo y la imagen de anchura completa, así:
https://ayuda.lalomarquez.net/prueba-de-imagen-de-ancho-completo/
No es eso, te puedo enviar dos capturas de pantalla a algún correo para que puedas ver a que me refiero?.
En tu ejemplo la imagen tiene anchura completa, pero no anchura y alto completo.
Gracias.
El segundo ejemplo que te mostré sí tiene la altura y la anchura completa de la imagen. Realmente no comprendo lo que intentas hacer. Mándame la captura de pantalla a lalomarquez@gmail.com por favor.
Hola veo que contesta todas las Preguntas, espero la mia,
resulta que compre divi, pero en mi sitio en una pagina coloque tutoriales con un slider y videos son como 9 video.
la pregunta es la siguiete.
como puedo colocar los videos mas chicos y que se vea todos?
Divi me muestra un lado de los video y son muy grande y lo de al lado muy pequeño?
el slider lo veo astronomico y no lo veo muy prefesional me gustaría que fuera mas delgado?
serías tan amable de enviarme la respuesta por mail, te lo agradecería de ante mano muchas gracias.
Hola Roxana, no comprendí bien lo que me comentaste ¿nos podrías compartir un enlace a la página o una captura de pantalla para verlo mejor? Las respuestas son aquí mismo en los comentarios para que otras personas en alguna situación similar puedan leer también. Si deseas una atención personalizada estoy a tus órdenes si deseas contratar mis servicios.
claro te dejo el Lic.
https://www.seguridadentimisma.cl/aprende-de-los-tutoriales-de-oriflame/
ojala me ayude gracias
Roxana, estás utilizando el plugin «tablepress» para diseñar la sección de tus videos. Las tablas son recomendadas para datos, no para diseño. Utiliza las columnas de Divi y el módulo de video para lograr lo que necesitas. Saludos!
si estoy usando “tablepress por que trate con divi no supe como hacerlo, solo me deja colocar de a uno, yo quiero que sean de tres en tres .
Cada fila divídela en 3 columnas y en cada columna agrega 1 módulo de video.
tambien tengo otra pagina con el mismo plugins, y se ve bien te dejo el lic.
https://www.seguridadentimisma.cl/consejo-para-la-mujer-de-hoy/
quiero algo similar pero de a tres
Mira, sólo con Divi: https://ayuda.lalomarquez.net/pruebas/#video-tres-columnas
gracias me quedo como yo quería, estoy muy feliz gracia por tu ayuda lo puedes ver como va quedando.
chao mil gracias
Buenas tardes Lalo, felicidades por la pagina y las ayudas, tengo una duda y aver si puedes ayudarme, quiero modificar la altura del modulo de titulo de anchura completa ya que me ocupa mas pantalla de lo que necesito. Quiero que ocupe practicamente solo el titulo que ponga y se adapte. Si me puedes decir una forma de modificarlo sencilla. Ya que la altura que viene por defecto me parece desproporcionada para un simple titulo y no puedo hacerlo mas pequeño. Muchisimas gracias. Un saludo
Hola Héctor, disculpa la tardanza. No había tenido oportunidad de revisar los comentarios pendientes. Para hacer lo que necesitas, requieres contrarrestar un padding de 50 pixeles que viene por defecto en el módulo de Título de Anchura Completa. Haz lo siguiente, en Ajustes para el Módulo de Título de Anchura Completa entra a la pestaña de Avanzado, y en el campo de «Elemento Principal» escribe «padding: 0px;» sin las comillas. Guarda y vuelve a cargar tu página. Te debe quedar como esto: https://ayuda.lalomarquez.net/pruebas/#tac01
Saludos!
Hola segunda vez que te pido ayuda, me he dado cuenta que cuando instale divi, dos plugins dejaron de funcionar, el mismo divi me aviso que desconectara los complento que eran estos plugins.
Bueno que hacias estos plugins uno realizaba como miga de pan dentro de mi sitio, el usuario podia pasar de un pot a otro sin salirse de la entrada.Y el otro eran numero la cantidad de entrada de color verde , ahora ya no estan solo unos numero que lo coloca divi.
Mi pregunta es la siguiente: ¿Como puedo pasar al siguiente pot,sin que tener que salirme he irme a inicio, o al blog para buscar en siguiente articulo?
¡Hola de nuevo Roxana! Por favor échale un vistazo a este artículo, probablemente te dé una mejor idea de cómo lograr la funcionalidad que requieres ¡saludos! https://www.elegantthemes.com/blog/tips-tricks/how-to-add-pagination-to-wordpress
Navegación básica en Divi
Si desea una navegación más compleja utilizando un tema de Temas elegantes, todo lo que tiene que hacer es instalar el complemento WP-PageNavi . WP-PageNavi es un plugin de paginación extremadamente popular, el cual discutiremos un poco más tarde. Puede transformar los enlaces de paginación anteriores y siguientes con una interfaz más intuitiva, listando los números de página y permitiendo a los usuarios saltar adelante algunas páginas a la vez. Es exactamente esos son los plugins que dejaron de funcionar y ahora cada entrada es independiente
¿Tienes un módulo de Blog de Divi o tu sitio está configurado como blog para que muestre las entradas?
Si tengo un módulo de blog,
Y en inicio ahora solo se muestra dos entrada, anteriormente sin el tema divo el inicio mostraba 5 entrada y la navegación por miga ahora no pasa eso
gracias solucione en parte mi problema gracia a tu enlace entendi mejor, saludo y gracias nuevamente por tú ayuda,ya sé que cuento contigo saludo
Excelente, me da gusto que hayas encontrado la solución que necesitabas. ¡Saludos!
Hola Lalo he trabajado divi con varias paginas y me ha funcionado sin problemas, ahora lo monte en una nueva pagina y no me esta cargando bien, si entro a alguna pagina a editar una sección y deseo poner color de fondo o una imagen de fondo por ajustes generales no sale nada queda en blanco y si bajo dentro de la opción aparece desde video.mp4 de fondo pero antes queda en blanco y si voy al personalizador del tema y quiero cambiar los colores tampoco me muestra el hexagesimal del color ni me da la opción de ponerlo. Por favor ayudame, muchas gracias
Hola Lida, suena a que el problema podría ser un conflicto con otro script. Si no lo has hecho ya, yo te sugeriría que pidieras ayuda directamente a soporte técnico en Elegant Themes, porque yo no soy bueno para encontrar ese tipo de errores. Lo primero que usualmente se hace es desactivar todos los plugins y probar si el error sigue sucediendo, para continuar activando plugin por plugin y probando. Siento no poder ser de más ayuda.
Muy buenas tardes, uso divi y me gustaría saber si es posible que cuando yo creo la página, al ajustarse para dispositivos móviles el orden de módulos que es de izquierda a derecha. La cuestión es si es posible cambiar ese orden ya que como me ha pasado varias veces, tengo por ejemplo en un módulo 2 celdas de imagen y abajo pongo 2 conmutadores de texto, uno pegado a cada imagen. Cuando ves eso en el móvil primero salen las 2 imágenes, luego los conmutadores..
Saludos.
Hola Jose Manuel,
Aquí encontrarás un tutorial donde te explican paso a paso cómo lograr lo que necesitas:
https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices
¡Saludos!
Lalo muchas gracias por tu articulo, me ha sido demasiado util.
Hola Lalo.
Tengo dudas con los comandos de separación (margen personalizado y relleno personalizado) cada vez que los manipulo me siento como si estuviera a merced de la arbitrariedad binaria.
¿Hay algún tutorial sobre como manipular estos valores?
Gracias
necesito que en responsive, movil y tablet, se vean de a dos columnas x fila, solo me muestra 1 columna