15 Ene 2019
191 comentariosHoy te quiero hablar sobre diseño web en WordPress y en concreto sobre Divi, una plantilla premium de la que se ha llegado a decir incluso que es el mejor tema que existe para WordPress, y posiblemente lo sea. En concreto, te voy a hablar de códigos CSS para Divi.
Divi es una plantilla de Elegant Themes que permite diseñar prácticamente cualquier cosa. Y si hay alguna cosa que le escapa, siempre podemos tirar de código CSS para conseguirlo, como te voy a mostrar en este post.
Es mi tema de cabecera, el que suelo usar tanto en mis proyectos como en los diseños web de mis clientes (aquí puedes ver mi portfolio).
Llevo varios años usándolo y he vivido en primera persona su grandísima evolución y las mejoras que ha ido incorporando con el paso del tiempo.
En ese sentido, ha dejado de ser una plantilla rígida y estática para convertirse en una mucho más moderna, fluida y visual.
Además, cuenta con su propio plugin -Divi Builder-, que permite instalar su sistema para diseñar y maquetar páginas en cualquier otro tema de WordPress.
Y después de mencionar todas sus bondades, paso a mostrarte algunos códigos CSS muy chulos con los que bordar los resultados que Divi ofrece.
18 códigos CSS y trucos para Divi
#1 Efecto parallax en las imágenes
Empezamos por algo facilito.
Si quieres que tus imágenes tengan ese efecto tan chulo que hace que se desplacen a una velocidad diferente al del resto de la página cuando haces scroll, solo tienes que hacer lo siguiente:
- Añades una sección con ancho estándar.
- En los ajustes de la sección, activas la opción Usar efecto de paralaje; en el tipo de paralaje: verdadero.
- Añades una fila del tipo que necesites, en mi caso con 3 columnas.
- Insertas el módulo de texto, botón, etc, que requiera tu diseño, en este ejemplo un botón y un módulo de código con un formulario de suscripción.
#2 Personalizar el botón "leer más" en las entradas
Continúo con algo sencillo también, pero aquí ya hay que añadir código CSS a la plantilla.
Si quieres modificar el botón "leer más" que acompaña a las entradas, solo tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:
.more-link {
align: center;
text-transform: uppercase;
background-color: #26bde8;
color: #fff;
padding: 10px;
border: 0px solid #fff;
}
Éste es el resultado con el código de arriba
¿Qué puedes modificar de este código para adaptarlo a tu diseño?
- align: center / left / right (alineado al centro, derecha o izquierda)
- text-transform: uppercase. Si no quieres que el texto aparezca el mayúscula, eliminas esta línea.
- background-color: el color del botón (#26bde8 es el color azul de mi logo e imagen de marca).
- color: el código del color de la letra (blanco en mi caso).
- padding: relleno en pixels.
- border: el estilo para el borde del botón.
#3 Mostrar las entradas en dos columnas (I)
Una de las cosas que más echo en falta de Divi es la posibilidad de mostrar las entradas en dos columnas, tanto en las categorías, como en las etiquetas y en los resultados de las páginas de búsqueda.
Pues bien, después de mucho investigar y probar, conseguí dar con el código que permite esta opción.
Para ello, tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:
* Create Mansonory styles for archive pages*/
.search #left-area,
.archive #left-area {
columns: 2;
}
.archive .et_pb_post > a,
.search .et_pb_post > a {
columns: 2;
}
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
columns: 2;
}
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
columns: 2;
}Y aquí está el resultado: la imagen en la columna de la izquierda y el título + info del post + extracto en la columna de la derecha.
#4 Mostrar las entradas en dos columnas (II)
A raíz de uno de los comentarios que he recibido en este post, he detectado que el código anterior no funciona en todos los diseños.
Por lo tanto, éste es un código alternativo para mostrar las imágenes en dos columnas con la imagen destacada a la izquierda y el texto a la derecha.
/*Imagen destacada a la izquierda en el blog*/
.col2 a img{
height: 150px!important;
float: left;
width: 250px;
left: 0;
padding-right: 14px;}
@media only screen and (max-width: 980px) {
.col2 a img{
float:none;
width:250px;
height:150px;}}Un ejemplo:
En este código, puedes personalizar el tamaño de la imagen en función de tu diseño (width / height).
Por lo tanto, si no te funciona el primer código, puedes probar con el segundo.
#5 Mostrar las entradas en dos columnas (III)
Además de los dos supuestos anteriores, puedes mostrar las entradas de tu blog a dos columnas añadiendo el siguiente código (disponible para las páginas de archivo):
.archive.category
.et_pb_post {
column-count: 2;
}#6 Personalizar el número de comentarios
Otro de los elementos que me gusta personalizar en mis diseños en Divi es el texto que aparece al final de cada entrada y hace referencia al número de comentarios.
#comments {
font-weight: bold;
color: #26bde8;
font-size: 20px;
}Aquí puedes personalizar el formato de fuente, el color y el tamaño.
Un ejemplo (mi propio blog):
#7 Mostrar avatares circulares en los comentarios
Siguiendo con los comentarios de las entradas, Divi muestra por defecto el avatar de los usuarios que comentan de forma cuadrada.
Con el siguiente código podrás mostrar esos avatares para que se muestren con formato circular.
/* Avatares circulares en Divi */
.comment_avatar img { border-radius: 50%; }Por ejemplo:
#8 Eliminar la línea divisoria entre el contenido y el sidebar
Divi incluyo por defecto una línea gris que hace de división entre el contenido de entradas / páginas y el sidebar (barra lateral)
Esta línea queda bien en determinados diseños, pero no en todos. Por tanto, si quieres eliminarla, solo tienes que pegar ese código en el cajón CSS personalizado de las opciones de la plantilla.
/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}Un ejemplo:
#9 Agrandar el menú secundario (top menú)
Otro elemento que podemos modificar en determinados tipos de diseños es el menú secundario (el top menú), que suele quedar bien con las dimensiones por defecto, pero en otras ocasiones puede que quieras cambiarlo.
En el primer ejemplo (Simplemente Hazlo), su tamaño es el que viene por defecto.
En el segundo ejemplo (Territorio Magazine), he cambiado el alto y el margen.
Si quieres modificar el tamaño del menú secundario de tu plantilla Divi, solo tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:
#top-header {
height: 55px; important!
}
#et-secondary-menu {
margin: 10px; important!
}¿Qué puedes modificar de este código para adaptarlo a tu diseño?
- height: el alto del menú.
- margin: el margen del menú.
#10 Centrar los títulos de las entradas
Si lo que quieres es centrar el título de tus entradas para que no aparezcan a la izquierda, el código es el siguiente:
.entry-title{
text-align: center; important!
}
.post-meta{
text-align: center; important!
}Aquí está el resultado.
#11 Añadir más botones de redes sociales
Otra de las cosas que se echan en falta en Divi desde hace tiempo es la posibilidad de añadir más botones sociales, ya que los que podemos incluir por defecto son cuatro: Facebook, Twitter, Google+ y RSS.
¿Qué pasa si queremos añadir otros botones como los de YouTube, Pinterest, Instagram, etc?
Ahora mismo, desde las opciones de la plantilla no se pueden incluir otros botones.
Para ello, podemos recurrir modificar el código de la plantilla. No es difícil.
¿Cómo añadir botones de redes sociales en Divi?
- Nos vamos a apariencia > editor (en nuestro panel de WordPress).
- En el listado de archivos de la derecha, buscamos social-icons.php y entramos.
- Añadimos el siguiente código justo encima de la línea <?php endif; ?> y actualizamos el archivo.
<li class="et-social-icon et-social-instagram">
<a href="https://www.instagram.com/maxcf/" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>Éste es el código para añadir el botón de Instagram.
¿Qué puedes modificar de este código para adaptarlo a tus redes sociales?
- et-social-icon et-social-instagram: aquí tienes que cambiar el nombre de la red social.
- a href: aquí pones la url de tu perfil en esa red social.
- ?php esc_html_e( 'Instagram', 'Divi': aquí tienes que volver a cambiar el nombre de la red social. Si en la primera línea del código habías puesto, por ejemplo, Instagram, tienes que volverlo a indicar.
Por lo tanto, el botón para YouTube sería:
<li class="et-social-icon et-social-youtube">
<a href="https://www.youtube.com/USUARIO/" class="icon">
<span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
</a>
</li>El botón para Pinterest:
<li class="et-social-icon et-social-pinterest">
<a href="https://www.pinterest.com/USUARIO/" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>El botón para LinkedIn sería:
<li class="et-social-icon et-social-linkedin">
<a href="https://www.linkedin.com/USUARIO/" class="icon">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>Y con el resto de redes sociales haríamos lo mismo.
#12 Añadir el logo en Divi sin perder calidad
En algunas ocasiones, me ha pasado que, al habilitar determinada imagen como logotipo de un sitio web, éste no tiene la suficiente nitidez o calidad en función del formato de utilizado para la imagen, y si el tamaño de la cabecera es pequeño, puede llegar a mostrarse de forma borrosa (sobre todo cuando la barra de navegación fija es de menor tamaño que el menú principal.
Por ejemplo:
Si te encuentras con este problema, la solución es sencilla. Solo tienes que añadir el siguiente código en las opciones de Divi.
#logo {
-webkit-transition: initial;
-moz-transition: initial;
transition: initial;
-webkit-transform: initial;
}#13 Alinear el menú principal a la izquierda
El menú que incluye Divi por defecto, tiene la siguiente disposición: logo a la izquierda + menú a la derecha.
Aquí puedes ver un ejemplo:
Si lo que quieres es mover el menú principal de tu web a la izquierda para que aparezca pegado al logo, debes insertar el siguiente código:
/* Alinear el menú a la izquierda */
@media only screen and (min-width: 981px) {
#et-top-navigation {float: left; margin-left: 60px;}
}Y el resultado es el siguiente:
#14 Cambiar el tamaño de las barras de menú en el móvil
Si quieres hacer más grandes o más pequeñas las barra del menú de tu web en el móvil, el código que debes aplicar es el siguiente:
/* hacer más pequeñas las barras del menú móvil*/
span.mobile_menu_bar.mobile_menu_bar_toggle:before {font-size: 25px;
}Para cambiar su tamaño, solo tienes que modificar el código font-size y añadir los píxeles que quieras.
A mí me gusta que sean un poco más pequeñas de lo que vienen por defecto. Por eso les pongo 25px.
#15 Añadir un texto en el menú móvil
Y siguiendo con el menú en la versión móvil de Divi, hay un efecto muy interesante que se puede conseguir a través de CSS.
Se tratar de poner la palabra "menú" o la que quieras debajo de las correspondientes barras, como puedes ver a continuación:
Y el código que debes usar es el siguiente:
/* Menu móvil nombre */
.mobile_menu_bar.mobile_menu_bar_toggle::after {
content: "MENÚ";
position: absolute;
top: 38px;
right: 2px;
font-size: 10px;
}#16 Alinear el menú centrado en el móvil
Otro de los efectos que puedes modificar en el menú móvil es la alineación del llamado "menú centrado"
Te lo muestro en dos capturas para que lo entiendas:
Aquí te dejo el código que debes aplicar para lograr este efecto:
/* alinear el menú centrado en el móvil */
@media only screen and (max-width:980px) {
.mobile_nav .select_page {
display: none!important;
}
.et_header_style_centered #main-header .mobile_nav {
background-color:transparent!important;
}
.et_header_style_centered .mobile_menu_bar {
position: fixed;
top: 5%;
right: 15%;
}
}Por supuesto, puedes jugar con sus márgenes y disposición.
#17 Centrar el pie de página (footer)
El footer que trae Divi por defecto está dividido en dos partes: por un lado, los créditos de la web (a la izquierda) y por otro, los botones de redes sociales (a la derecha).
Es decir, el pie de página de Divi, si no lo modificas, es así:
Pero, si quieres huir del clásico footer de Divi, es posible centrarlo; y el resultado quedaría así:
Si quieres conseguir este efecto y que el footer de tu web esté centrado, solo tienes que aplicar el siguiente código CSS:
/*** centrar footer ***/
#footer-info { width: 100%; margin:0 auto; text-align: center !important; }
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom: -28px; }
}#18 Modificar el botón "volver arriba"
Si quieres modificar el botón "back to top" o "subir" de Divi para ponerle los colores y estilo del resto de tu web, en el blog de DiviFast te cuento 7 efectos CSS para personalizar el botón "volver arriba".
Si buscas más códigos CSS para Divi, te recomiendo pasarte por el blog de DiviFast, donde tenemos un montón de recursos, herramientas y trucos para Divi.
Genial! Me ha encantado este post.. yo uso divi pero hay muchas cosas que se me escapan ✨?✨gracias!
Hola Elena,
Es el 'gran inconveniente' de algunas plantillas tan completas, que tienen cientos de funcionalidades y conocerlas bien todas. Pero con tiempo y paciencia se puede 😉
Hola Max! Muy buenos aportes los que has comentado en este post. Cómo ya sabes nosotros también nos cambiamos en su momento a Divi y estamos encantados, aunque molaría que la web de elegantthemes tuviera traducción a español porque sinceramente están ofreciendo cada vez más contenido super top y es una pena que si no se tiene un nivel de inglés suficientemente alto, no puedas entender bien algunas de sus explicaciones y tengas que recurrir al Google traductor jeje.
Otro detalle muy importante, nosotros lo sufrimos y ahora estamos en ello para ir solucionándolo, es que se debe trabajar con un tema hijo. Lo primero por precaución, si tocas algo incorrectamente nunca vas a perder la web. Por otro lado, las modificaciones de añadir nuevas redes sociales, con las posteriores actualizaciones del tema Divi las perderías y tendrías que volver a configurarlas.
Aprovecho el hilo de comentarios de este post, para aquellos que sean también fans de Divi y conozcan algún grupo o comunidad en las redes sociales en español lo compartan. Yo los que sigo son todos anglosajones ;(
Un abrazo! 🙂
Hola Juanjo,
Totalmente de acuerdo, no hay mucho material para Divi en español (yo leo muchos blogs en inglés) y tampoco conozco ningún grupo en español.
Sobre los temas hijo, más que en Divi, es interesante prácticamente para cualquier plantilla de WordPress.
Si probáis alguno de mis efectos, avisadme 😉
Un abrazo!
Hola Max,
He hecho todo tal y como lo comentas perro el unico codigo que me ha funcionado ha sido el de centrar el titulo, pues ni el boton, ni el logo en el menu funcionan con el codigo que has puesto.
Es decir, al colocar el codigo no ocurre absolutamente nada.
¿Has verificado que este bien?
Hola María,
Vuelve a probarlo, pues al pegar los códigos en el editor de WordPress, se habían cambiado algunas caracteres, pero ya está solucionado.
Siento las molestias.
Saludos
muy bueno felicitaciones y aguante divi!
Hola, Max.
Muy interesantes los efectos. Divi es completísimo pero se queda corto en ciertas cuestiones. Por ejemplo, sigo sin entender porque solo permite vincular Twitter, Facebook y Google+ por defecto.
Algunos de estos efectos pueden hacerse también mediante plugins como Divi Booster o Divi Switch. Ya sabes que no me gusta tocar código (y al cliente menos), por eso busco siempre alternativas para poder hacerlo de forma más visual.
Un abrazo.
Hola Pablo,
Le echaré un vistazo a esos plugins, pues he leído algo sobre ellos, pero no he profundizado.
Por mi parte, si lo puedo hacer tocando el código y me ahorro instalar algún plugin, lo prefiero.
Gracias por pasarte.
Un abrazo!
Hola Pablo
Divi internamente tiene más, pero no los muestra. Puedes modificar el fichero social_icons.php que hay en wp-content/themes/Divi/includes. Solo tiene un inconveniente, cuando se actualiza el tema se pierde la modificación .
Un saludo
Hola, Manel.
Agradezco tu aportación. Divi se caracteriza por facilitar las cosas al usuario. Tener que editar PHP en Divi es un absurdo. Esa función debería ser nativa como lo es un plantillas mucho más básicas.
Saludos.
Gracias Max,
Divi va muy bien, y como dices le faltan cosas que con codigo se puede conseguir, ademas el soporte del equipo de Divi es muy bueno, me ha ido muy bien cuando he necesitado codigo o cambios.
Excelente post
¡Hola Max!
Me ha encantado el post, muy útil para personalizar más aún nuestros sitios en Divi sin necesidad de ser un súper desarrollador 🙂
He probado a instalar el código de Instagram para los botones sociales correctamente... Pero no aparece 🙁
¿Puedo elegir que aparezca en el pie?
Hola Yanira,
Si has metido bien el código en el archivo social_icons.php, para que te aparezca los botones en el pie, tiens que ir a: Apariencia > Personalizar > Pie > Barra inferior > y aquí ya puedes configurar los botones (color, tamaño...).
Saludos!
Muchas gracias Max.
Los voy a probar que andaba buscando algo asi
Saludos y pon mas cosillas de DIVI 😉
Muchas gracias por el aporte, no suelo escribir comentarios en las webs, pero esta necesitaba de mi comentario, todo me ha servido y super bien explicado, muchas gracias por ello
Muchas gracias Antonio! Me alegro muchísimo de que te haya servido 🙂
Max muchas gracias por tu estupendo articulo. Yo trabajo con un tema hijo si le hago el cambio a Divi se a`lica a Divi hijo? y me imagino que si tengo que actualizar el programa, cosa que pasa cada tres o cuantro meses tendria que volverlo a modificar?
Hola Miguel Ángel,
El principal motivo de trabajar con un tema hijo es no perder los cambios cuando el tema padre se actualiza.
Yo trabajo con Divi directamente, no tengo tema hijo, pero cuando los he usado y los he tenido que actualizar, no he perdido los cambios.
Mi consejo es que lo pruebes. Cuando haya una actualización nueva de Divi, guardas primero una copia de seguridad y actualizas sin miedo.
De modo que, en principio no tendrías que volverlo a modificar.
Saludos!
Hola Max que tal, he encontrado tu post mientras investigaba acerca de Divi, realmente son muy buenos trucos! gracias por compartir estos conocimientos. Quiero aplicar uno en especial y es el agregar noticias en 2 columnas, ingreso el código pero no quedan los cambios, los agregue en "personalizar tema > CSS personalizado" y no surtió efecto ¿podrías ayudarme? gracias!
Saludos
Hola Nolbert,
¿Dónde quieres aplicar ese efecto? El código del post es para páginas de búsqueda y de archivo.
Saludos
Hola Max! gracias por responder, quiero aplicarlo en el módulo "Blog" del constructor de Divi para mostrar los artículos que tengo ingresados ¿es posible?
Hola Nolbert,
Ese código es para los resultados de búsqueda y páginas de categorías / etiquetas, para el módulo blog no sirve.
En ese caso, hay algún plugin premium para organizar los posts de manera diferente a la opción predeterminada que incluye el módulo blog.
Si te interesa, avísame y te paso el link 😉
Hola;
como puedo hacer que las imagenes se adapten a cada dispositivo al 100%, tengo problemas con los sliders en como se visualizan en mobile,
algún codigo CCS ?,,
gracias
Hola Charlie,
Cuando tengo problemas con los sliders y las imágenes de ancho completo en la versión móvil, lo que hago es crear una sección nueva y en las opciones avanzadas desactivo la visibilidad en la tableta y el escritorio para que solo sea vea en el móvil.
Saludos
Muy buen Aporte Max, GRACIAS
Veo que tienes en esta web el icono de subir arriba, me puedes indicar con que plugin o como se activa?
Uso la plantilla DIVI
MUCHAS GRACIAS
Hola!
Lo tienes en las opciones generales de Divi (Botón de volver arriba).
Saludos
Hola Max.
Veo que te manejas muy con esta plantilla, que por cierto me encanta. Pero llevo varios días con un error muy molesto y no encuentro documentación que me ayude.
Cuando voy a editar algún módulo, presionando sobre las típicas tres barras horizontales, la ventana de edición no se abre. Algunos módulos me permiten editarlos, y otros no, pero estos no siempre son los mismos. He actualizado el tema a la última versión, pero nada.
¿Sabrías por donde pueden ir los tiros o por donde puedo empezar a investigar?
Muchas gracias de antemano, Max.
Por cierto, pienso aplicar al menos dos de tus consejos de forma inmediata. No tener icono de Instagram es una pena.
Saludos,
Laro.
Hola Laro,
Pues nunca me ha pasado algo así.
¿Has probado a subir la plantilla de nuevo por FTP?
Por otro lado, ¿tienes la última versión de WordPress y de todos los plugins?
Saludos
He creado el icono de red social Pinterest en social_icons.php
Al poner el enlace de mi perfil de esta red social, se produce un error y está todo correcto
¿Qué puede ser?
Hola Sus,
Pega por aquí el fragmento de código que estás usando para ver si está todo ok.
Saludos
Debía ser error de instagram porque desde hace dos horas funciona
¿Era Instagram o Pinterest? No me ha quedado claro...
Instagram, me confundí 😉
¡Me alegro que ya se haya solucionado! 😀
Buen aporte, estoy trabajando ahora con DIVI y todavía son muchas las cosas que se me escapan, poco a poco dominare bien la plantilla
Me ha encantado, entrada en dos columnas, gracias
Hola. Que aporte tan genial. El de centrar los títulos funciona perfectamente, pero con el de presentar los resultados en dos columnas me trae por el camino de la amargura. Ayer lo apliqué y funcionaba correctamente. Lo guardé y todo bien. Incluso lo revisé un rato después y ok. Esta mañana veo que el efecto había desaparecido, comprobé el código y ya no estaba. Ahora lo aplico de nuevo, y sale en dos columnas pero el título a la izquierda y el extracto a la derecha. Ni rastro de la imagen destacada. Lo he hecho varias veces y nada.
Creo que sobra decir que nadie más tiene acceso al escritorio ni al hosting.
¿Sabes que podría ser? Muchas gracias por los trucos y tu ayuda.
Saludos!
Hola Yurena. Qué raro!!
¿Has copiado y pegado el código exactamente igual? (Entiendo que sí).
Si no consigues que te funcione, te puedo dar un código alternativo para mostrar el blog en columnas.
Agradecería ese código alternativo, porque ahora lo que me hace es mostrarme en 4 columnas, desorganizando todo el contenido. Me ha pasado una cosa rarísima porque antes se mostraba bien, pero no me dejaba aplicar ningún cambio más en CSS porque me identificaba con comentario sin cerrar. Se solucionó eso y se aplicaron los demás cambios pero me salen las 4 columnas. No entiendo nada ya.
Prueba con este código Yurena:
/*Imagen destacada a la izquierda en el blog*/
.col2 a img{
height: 150px!important;
float: left;
width: 250px;
left: 0;
padding-right: 14px;}
@media only screen and (max-width: 980px) {
.col2 a img{
float:none;
width:250px;
height:150px;}}
(Puedes modificar el tamaño de la imagen).
Ya me cuentas si te funciona 😉
Este directamente me tira la web con error 500 si lo aplico a functions.php
Nada, ya buscaré alguna otra solución. Muchas gracias igualmente por la ayuda, Max. Te seguiré leyendo.
Yurena, tienes que pegar ese código en el cajón "CSS personalizado" en las opciones de Divi. No tienes que aplicarlo en el archivo functions.php :O
Es que ahí tampoco funcionaba.
Al final lo he logrado de forma mucho más simple y sin que afecte también a las páginas de la tienda. Si quieres, pego el código para quien lo pueda necesitar.
Saludos!!!
Sí, por favor! Pega el código en un comentario para incluirlo en este post. Quiero lanzarlo la semana que viene actualizado y con nuevos cogidos para ayudar a todo el mundo que utilice Divi y lo necesite.
Muchas gracias!! 😀
Pues así de sencillo:
.archive.category .et_pb_post { column-count: 2;}
Muchas gracias Yurena! Lo probaré 🙂
Hola Max!
Excelente información
Tengo una consulta ¿Como puedo añadir iconos de font awesome en el modulo de texto de divi? Estoy intentando y no encuentro la manera de realizarlo.
De antemano muchísimas Gracias?
SALUDOS.
Hola Joel,
Creo que puedes hacerlo con el plugin: Better Font Awesome.
Pruébalo y me cuentas qué tal.
Saludos!
Hola crack
Si funciona
Muchas gracias por tu ayuda.
?
De nada!
Genial, me alegro mucho 😉
Hola Max,
Enhorabuena por tu post, es genial 🙂 He encontrado muchas cosas que andaba buscando en un solo post. Comparto en twitter, me parece un gran trabajo.
Tengo dudas respecto el apartado de poner las entradas en dos columnas, te cuento mi situación:
En la index hay un apartado donde indica ULTIMAS NOTICIAS y aparecen entradas de blog, me gustaría que aparecieran en dos columnas teniendo la imagen arriba y el texto debajo, es decir, como sale habitualmente pero en vez de 3 columnas (que es como me sale al ponerlo en rejilla) que sean 2.
¿Podrías ayudarme? Muchas gracias
Hola Noelia 🙂
¡Muchas gracias! Me alegro que te sirva.
En ese caso concreto, mi consejo es crear una fila con dos columnas.
Si, por ejemplo, quieres mostrar 6 artículos, en la primera columna añadir un módulo blog con 3 entradas, y en la segunda añadir otro módulo blog con 3 entradas más y poner en el número de compensación el valor 3.
Espero que te sirva. Ya me contarás cómo queda.
Saludos!
Que tal Max ! Es muy buena tu pagina, tus aportes me han sido de mucha ayuda. Pero me encontrado con una dificultad. Resulta que quiero agregar este menu de navegación a mi menu de mi pagina que es el siguiente: codepen.io/RSH87/pen/rmgYbo Pero aunque copie el CSS a la caja personalizar CSS en le Theme Options de DIVI , no resulta en mi pagina ya en mi menu no se realiza ningun cambio. Que podria estar fallando? Que es lo que puedo hacer?
Agradeceria mucho tus comentario .GRACIAS!
Hola Emmanuel,
Cuando hago modificaciones CSS en el menú principal, uso la etiqueta #top-menu.
Revisa a ver si puede ser eso.
Saludos
Hola! usar la etiqueta #top-menu no me dio ningún resultado
que puede estar fallando?
Hola
Me parece muy bueno el artículo sobre todo ahora que empiezo con DIVI y tengo problemas para sacarle todo el provecho.
Podrías hacer un post parecido pero para mejorar la imagen del blog de Divi que es muy sencilla.
Gracias
Hola Pascual ¡Muchas gracias!
Tengo pendiente hacer un post explicando cada uno de los módulos de Divi, pero el resultado final del diseño depende mucho de la creatividad y estilo de la persona que diseña el sitio web, más que el maquetador uso en sí.
Tu web tiene muy buena pinta, pero echo en falta un estilo propio que unifique todo el diseño y le otorgue un resultado brillante.
Si me permite el consejo, yo me centraría en la imagen de la web en general: textos, imágenes, tipografías, márgenes, interlineados, etc.
Un abrazo!
Hola! Estoy intentando probar el de poner el blog en dos columnas y no me funciona. Únicamente no sucede nada...
Alguna idea?
Gracias!!
Hola Pablo,
¿Has probado con las 3 opciones que menciono en el artículo y ninguna te ha funcionado?
Saludos
No, unicamente el código de las dos columnas que es lo que me interesa.
Como ves en mi blog: pabloms.com/blog me salen las imagenes enormes y me gustaría darle un estilo como el que propones de a la izquierda la imagen y a la derecha el texto.
Luego tengo pregunta 2:
Es posible que aparezca la imagen en el resumen de posts y que esa imagen no sea una "imagen destacada"? No encuentro como hacerlo.
Un enorme saludo!
Me refiero a que en el post menciono tres formas diferentes de conseguir el blog con dos columnas. Si no te funciona una, te recomiendo probar las otras dos 🙂
En cuanto a la segunda pregunta, puedes configurar el blog para que la primera imagen que incluyas en el post se convierta en la imagen destacada, aunque no sé si es eso lo que necesitas exactamente.
Saludos!
Pues he probado las 3 y ninguna funciona.
Voy a Divi -> Opciones de Tema Divi --> CSS personalizado (abajo de todo) y pego el codigo. Guardo cambios y voy a mirar que ha pasado. Y no cambia nada, todo sigue igual.
Puede que esté pegando el código donde no toca?
PD: lo de la imagen destacada conozco la opción que me recomeindas. Lo que yo quiero es que aparezca en el resumen de posts la primera imagen del post y que esta no sea destacada ya que la manera en como pone imagen destacada Divi en los posts no me gusta
Sí, es ahí, en CSS personalizado.
¿Has probado a borrar la caché de la web y también del navegador?
Sobre lo de la imagen destacada, ¿a qué te refieres con la manera de poner las destacadas de Divi?
Hola Max,
Un gran post y muy ilustrativo.
Me surge un problema con Divi que no se si podrás ayudarme...te comento:
No puedo poner un logo en la web que estoy realizando, entro en "opciones del tema" "general" "logo" y no funcioan el boton de subir, no hace nada y no puedo acceder a imagenes. Lo mismo me ocurre con el favicon.
No he actualizado mi tema divi y no se si se deberá a eso este error.
Habría alguna forma de subir un logo y favicon mediante codigo? O existe alguna otra "puerta" por wordpress para colocar el logo?
Gracias de antemano por tu respuesta.
Saludos!
Hola Jose,
Te recomiendo actualizar a la última versión de Divi a ver si se soluciona tu problema.
Saludos
buen día, Max.
Apenas he creado un website con theme DIVI y ha sido genial. Con tu post y apoyo (porque te preguntaré de todo desde ahora en adelante) sé que le sacaré el máximo provecho.
Me alegro mucho Walter!
Mándame la URL de tu web para echarle un vistazo 😉
Hola Max! Estoy probando a editar el "leer más", pero el tipo de letra no hay manera de que me lo cambie! Ni color, ni tipo de letra. He probado de todo, pero nada. Qué me puede estar sucediendo? Gracias!
Hola Jana,
Déjame la URL de tu web 😉
hola mi estimado gracias por el aporte una consulta:
como haces la linea en tu menu cuando pasa el raton se activa una linea de fondo en todo tu menu.
Hola Óscar,
He seguido este tutorial de Elegent Themes.
Saludos
Hola, ante todo muchas gracias por el post, la verdad es que es bastante completo y me ha ayudado en algunos aspectos.
Sin embargo estoy teniendo problemas con el boton de "leer más" del blog en cuadricula, ya que se me pega al estracto y no me reconoce la propiedad "align" no se porqué. He intentado ponerle un margen. Si quito el padding se vuelve a quedar al tamaño que estaba anteriormente pero no es la idea.
Si pudieses ayudarme te lo agradecería.
un saludo.
Paula.
Hola Paula,
Lo acabo de ver y el botón se corta por debajo.
Puede que tenga algo que ver con las etiquetas "position" y "top".
Revísalas a ver si va por ahí el tema.
Saludos
Hola, muy bueno todos los aportes!! Te hago una cansulta, como hago para hacer que haga scroll habiendo click en el boton -desde el banner- hasta abajo?
Gracias!! Santiago
Hola Santiago,
¿Te refieres a que, al hacer clic en un botón, vaya a otra parte de la página?
Hola,
¿Se puede eliminar (con divi) una línea fina entre el encabezado y la primera gran foto de la portada?
Gracias!
No doy con ello por ningún lado.
Hola María,
Prueba con este código:
/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}
Saludos!
Hola, muchas gracias!!
Creo que ha funcionado. Me estoy peleando como una novataaaaa. Qué impotencia no poder hacer las cosas. ¿Sabes porque puede ser que tengo habllitada la barra de navegación fija pero en cambio el menu sube con la página al bajar hacia abajo?
Gracias"
Hola Max:
Tremendo tu aporte estoy utilizando ya tus códigos y funcionan excelente, sin embargo tengo una duda, ¿cómo cambio de color la barra superior donde van el teléfono, correo y redes sociales?
He movido a todas las opciones del header y no puedo, como ya sabes Divi agrega color por defecto, pero yo deseo añadir otro color distinto a ellos.
Abrazo, crack.
Hola Toño,
¿Has probado a añadir con CSS un color de fondo personalizado en la etiqueta #top-header
Si no te funciona, prueba en esta otra: #et-secondary-menu
Saludos
Ya lo intenté con #top-header, pero no funciona, veré cómo me va con lo otro.
Hola,
Tengo un problema con los iconos. Pongo la url en de Fb por ejemplo en opciones del tema, con el botón activo y guardo los cambios. Cuando voy a visual, el botón aparece pero no me lleva a mi fb. Vuelvo a opciones del tema y veo que no está la url que yo he introducido. He probado mil veces y nunca la guarda.
¿Sabes si he podido activar algo o qué puede ser?
Muchas gracias
Hola,
he usado el código para el botón de Instagram, y me sale, pero con dos puntos delante que no me gustan.
Lo he puesto en un witget de HTML.
Me gustaría en fila horizontal con otros iconos de rrss y sin los dos puntos.
Muchas gracias
Hola Leire,
Los códigos de redes sociales que menciono en el post son para el archivo social_icons.php del tema, no para insertar en un widget.
Eso puedes hacerlo con Monarch, el plugin de Divi para redes sociales.
Saludos
Hola Max, qué tal?. Lo primero muchas gracias por tus posts que son súper útiles y muy muy claros. Me gustaría que por favor me indicases cómo puede reducir el ancho de las cajas de las entradas en el blog de divi, en el modelo rejilla.
De antemano, un montón de gracias
Hola! Muchas gracias por los post. Quería preguntarte, hay alguna forma (o algún plugin) para hacer que en el modulo portfolio, a parte de poder mostrar u ocultar el titulo y la categoria, se pueda ver un pequeño extracto del texto que figura en el proyecto (con un boton de "leer más" debajo) o eso tendría que hacerlo mediante el modulo blog y meter todos mis proyectos como si fuese un blog?
Gracias!
Hola Marian,
Si es un portfolio, tienes que hacerlo con proyectos y no con blog.
¿Has probado a editar con el maquetador los proyectos?
hola, como puedo poner tres entradas en una sola linea como el tuyo ? dado que mi blog solo muestra una entrada gigante por lineea
Hola Jose,
Para ello, tienes que crear una nueva página, insertar un módulo de blog y configurarlo con estilo rejilla (grid).
Saludos
Amigo como puedo desaparecer el header al dar scroll down?
Me podrías ubicar/apoyar un poco?
Hola me parece espectacular tu post,
necesito de tu ayuda si es que entiendes al respecto, no he encontrado ningún sitio que se explaye en esto.
Necesito cambiar el logo de divi desde el centro a la izquierda cuando comience el scroll.
he probado con varios codigos en custom css pero no se alinea bien, ojala puedas ayudarme.
Hola Piero,
¿Te refieres al llamado "menú centrado"?
Gran post, ¿una pregunta, cómo puedo añadir redes sociales al módulo persona? por ejemplo, añadir youtube que no viene por defecto. Y en email optin otro problema que he detectado es que no deja añadir campo para por ejemplo añadir RPGD! 🙁
Hola Rubén,
Las redes sociales con CSS y el check de privacidad en el módulo de email por defecto no se puede (sí en los formularios de contacto).
Mi consejo: crear el formulario de suscripción a tu gusto con Bloom y lo insertas con shortcode (o directamente con el código que te proporciona tu proveedor de email).
Saludos
Hola Max excelente post como siempre muy útil la información de los mismos pero me gustaría saber si tienes algunos efectos para los botones es decir para llamar la atención de las personas para que les den click a dicho botón en pocas palabras efectos para que el botón no pase desperdiciado o tal vez un plugin que me pueda ayudar con eso, por cierto uso Divi como thema. Gracias.
Hola Hamilton,
Con Divi puedes personalizar al máximo tus botones. Otra opción es hacerlo con CSS. Te dejo una web: bestcssbuttongenerator.com
Saludos
Hola Max.
Agradezco que te hayas tomado el tiempo de preparar bien el post antes de publicarlo. Varios puntos aquí abordados serán de mucha utilidad.
Deseo implementarlos en multinivelconfuturo.com
Espero que mi blog pronto pueda contar con algunas funciones y que éstas sean atractivas y funcionales para los usuarios.
El botón "pídeme presupuesto" me ha agradado bastante... simple y muy efectivo.
Muchas felicidades!
Hola Luis,
Esos efectos CSS están preparados para sitios web que utilizan el tema Divi. Veo que en tu web utilizas otro.
Te sirven, pero tendrás que adaptarlos e implementarlos de otra forma.
Saludos
Hola. Mi web la estoy creando, ya agregue las Redes y elimine las que no me interesan, pero al final del sitio, me queda un buen espacio en blanco que no puedo eliminar. Como podría hacerlo?
Hola,tengo un problema con el contador de comentarios,no aparece en mis entradas de blog...no sé si es Divi o wordpress
Hola Beto,
Recuerda tenerlos activados en los opciones generales de WordPress (Ajustes > Comentarios) y también dentro de cada post.
Saludos
Hola Max,están activados tanto en ajustes como en cada post,de hecho la caja de comentarios está todo funciona perfecto solo que el título y contador: 0 comentarios
No aparece
Saludos
Si no hay comentarios en el post, no aparece el texto "0 comentarios". Solo aparece el contador cuando ya hay alguno publicado.
¿Puede ser eso?
No Max, tengo comentarios en otros post y no sale el contador ni el titulo de comentarios si quieres te dejo mi dirección web: econaturadenda.com/blog
Prueba a cambiar en el archivo comments.php de tu plantilla Divi esta línea de código: h1 id="comments".
Donde pone h1 cambialo por "p".
Para estas cosas lo ideal es trabajar con un child theme. Pruébalo y me cuentas 😉
Hola Max, a ver si puedes ayudarme.Utilizo el tema Divi en mi web.Me he fijado que en mis comentarios de mis entradas no aparece el contador ni el titulo de comentarios,ejemplo: 0 comentarios.
Me tiene loco el tema,no se como solventarlo.
Saludos
Buenas tardes Max,
Me interesa mucho el código 3 para la pestaña blog de mi sitio, pero no me funciona (el error de ponerle delante el / que te falta en la primera línea lo he corregido, por si crees que el fallo está ahí).
Un saludo
Hola Juan,
¿Has probado con alguno de los otros dos códigos para el tema de las columnas?
Algunos han cambiado a partir de las últimas actualizaciones de Divi.
Saludos
Si probé, ninguno me funcionó. Finalmente lo solucioné haciendo un refrito de otro que encontré en internet que si funcionaba pero cambiando lo que no me gustaba tras ver el tuyo y otro. Primer css que me animo a modificar y me funciona 😉
Qué raro Juan...
Yo he utilizado esos códigos hace unos días y me han funcionado.
¿Puedes dejar por aquí la URL de tu web para ver cómo te ha quedado? 😉
Por supuesto, jmarenas.com De todas formas estoy montando la web ahora, y tengo muchas secciones a medias y esto no es un post como tal, sino una redirección al pinchar. Acabo tambien de darme cuenta que me mete debajo parte del texto (una palabra). Así que tendré que tener cuidado con los extractos, u optimizar el css.
Veo que ya tienes la estructura montada y te falta ir maquetando cada página.
Tiene muy buena pinta. Mucha suerte con el proyecto! 🙂
Hola max, muchas gracias por esta información. Como haces para que una imagen tenga el estilo redondeado como en el caso de los iconos??
Hola Nicolás,
En el módulo imagen de Divi: Diseño > Borde > Rounded corners. Ahí puedes redondear el borde de las imágenes.
También tienes la opción de CSS con la etiqueta border-radius.
Saludos
Muchas gracias Crack!.
Un saludo.
Le felicito por tantos temas importantes en Divi, pero le falta uno que todos necesitamos en nuestra web y no lo tenemos, y es fijar una imagen de fondo en una seccion y que varias secciones de imagen transparente pasen por encima de esta imagen esta fijada en el fondo
Hola Max. Primeramente darte las gracias por estos códigos para personas que empezamos en este mundo.
Aparte quería hacerte una pregunta, a ver si tu sabrías como podría hacerse:
La idea es imagen ancho completo (sin enlaces) arriba, y debajo barra lateral derecha y post "destacado" que ocupe el ancho de los de debajo que serían los de tu código 3.
Los posts deberían de irse "moviendo" según se vaya publicando más.
Sé que pido demasiado pero cualquier idea sería muy agradecida.
No ha habido forma de hacerlo, ni por el constructor de categorías ni por las páginas.
Estoy usando el tema extra por si es diferente a Divi.
También he visto esta página blog.fastportpassport.com de la que no tengo ningún tipo de relación pero que tiene varias partes muy parecidas a lo que yo quisiese.
Muchísimas gracias por adelantado.
Saludos. Victor.
Hola,
Tengo un problema que no consigo solucionar. Cambiar el tamaño y personalizar el botón de pagar con tarjeta que aparece en la última pantalla antes de qye redsys te rediríja al banco para meter la clave.
Sale muy pequeño y no con la apariencia del resto de botones.
Tengo Divi para mi página y WooCommerce
Mil gracias!
Hola María,
Busca la clase CSS de ese botón con el botón derecho del ratón (inspeccionar) y haz los cambios con CSS hasta que quede hasta tu gusto 🙂
Hola, Excelente gracias a usted aprendí el efecto parallax muy bueno en divi, creo que me falta un solo efecto para tener mi web diferente a la demás. y es fijar el footer o pie de pagina que cuando uno pase scroll este pie de pagina que estático
Muy interesante tus Código para personalizar. Me encanto!
Os quería preguntar si podrías compartir como has personalizado tus menús para que cambien de color cuando pasas el Mouse por Encima, que se muestre una linea inferior y cambie el color del fondo y del texto.
Hola, esta muy bueno este post. Tengo un problema con Divi desde hace tiempo y no se si tu me puedes ayudar con CSS.
Cuando busco un producto los resultados me salen en una sola columna hacia abajo y el resto del espacio a la derecha en blanco. ¿Habría una forma de que los resultados me salieran en varias filas y columnas?
Gracias de antemano
Hola Andrea,
Para modificar vía CSS los resultados de búsqueda, debes buscar la etiqueta .search #left-area, y hacer ahí los cambios que necesites.
No tengo ningún código preparado para este tema. Sorry 🙁
Buenas amigo, yo tengo dudas sobre DIVI al ser utilizado con woocomerce... quiero personalizar los productos que se muestran por fila en telefonos, además de eso me gustaría colocar la sidebar arriba (cuando es visualizada en moviles me la pone abajo... y en ningún lado encuentro como cambiar eso) tienes alguna idea que me ayude, Gracias de antemano!
Hola, estoy editando el tema divi, concretamente el módulo portfolio. Generalmente, tanto en DIVI cómo el el resto de themes, el menú del portfolio, siempre está arriba de las imágenes, pero... ¿sería posible colorar el menú por ejemplo a la izquierda y las imagenes a la derecha, en lugar de arriba y abajo?
Este es mi proyecto. Ahora está el menú arriba, pero me gustaría estuviera a un lateral, por ejemplo 3 columnas, una el menú, y las dos restantes las imáganes. Tienes algún código para ello.
Gracias
Hola, gracias por tus post, muy interesantes, quiero alinear a la izquierda el menú, pegué el codigo CSS que proporcionas en las opciones del tema de la plantilla EXTRA pero no surte efecto, puedes ayudarme?.... Saludos y Gracias de antemano! ☺
Hola Adolfina,
Estos códigos son para Divi. No trabajo con Extra. Sorry 🙁
Saludos
Llego tarde, pero fantástico post!
Lo que no consigo encontrar, es cómo posicionar el logo del header más a la izquierda, como has hecho en tu web, y no a la izquierda pero algo centrado, como ocurre por defecto. No he encontrado ningún tutorial que lo siga, y debe de ser sencillo, pero no hay manera 🙂
Hola Ivan,
Pues yo no he tocado el logo con CSS. Simplemente le he activado la opción: hacer que tenga anchura completa (la cabecera).
Saludos
Muchísimas gracias, Max, por tu amabilidad!!!
Si sabía yo que tenía que ser fácil y yo muy torpe 🙂
Hola Max, lo primero darte las gracias por compartir tu sabiduría.
Es de muchísima ayuda todo lo que aportas, y como mínimo hay que agradecértelo.
Mi consulta está orientada al tema de customizar el blog. Me tiene frita. Probé las 3 opciones de código que propones, pero efectivamente sólo afecta a la página de categorías.
Me imagino que como la gran mayoría, lo que intento hacer es que la página de entradas propia de wordpress no se vea con el horrible formato actual. Es decir, los post con tamaño descomunal.
Esto lo he arreglado creando una nueva página llamada noticias y colocando ahí un módulo de blog convenientemente maquetado. Por temas de SEO me imagino que lo correcto sería indicarle a google que no indexe la página blog ( ya que si no estaríamos duplicando contenidos, creo yo).
Pero el siguiente problema está en las páginas de cada post concreto. Ya sé que se pueden modificar directamente, pero buscaba una solución más práctica. ¿Qué hago para que siempre incluyan el faldón y la cabecera de la sección que previamente he diseñado?
He creado un child-theme, y se me ocurría modificar el archivo simple-post.php....pero no sé cómo decirle que carge un diseño concreto.
A lo mejor me estoy complicando y existe un super plugin que lo hace todo¿?¿?¿ He visto Divi Blog Extra, pero no estoy segura de que vaya a solucionar mi problema.
Te mostraría la web de mil amores, pero estoy trabajando todavía en local.
Gracias por tu tiempo, Un saludo
Hola Graciela,
Pues sin verlo es muy difícil decirte algo.
De todas formas, hay varios plugins para personalizar las entradas en Divi.
Yo en estos casos tiro de CSS y aplico cambios a mi gusto (o a los del cliente).
Es lo único que te puedo decir sin verlo.
Sorry!
Muchas gracias por tu pronta respuesta!
Si me puedes decir qué plugin hay para personalizar las entradas de divi te lo agradecería mogollón.
Esta web que estoy retocando tiene 695 post (noticias), y creo que me va a dar algo si los tengo que rediseñar todos!!
Es por lo que tengo tantas dudas de comprar Divi extra blog. Porque lo que necesito es insertar una cabecera y el faldón de la web en todos los post.
Y si consiguiera hacer una sección de "También te puede interesar...", en la que aparezcan las miniaturas de las noticias anteriores, ya sería la repera!!
Gracias, gracias, gracias
Graciela, te dejo un post muy completo de Gonzalo de la Campa donde habla de plugins específicos para Divi, también para modificar el blog:
Plugins exclusivos para Divi que me encantan.
Saludos
Hola Max, encontré la solución...al menos con el footer funciona a las mil maravillas.
Se trata de un sencillo código en php que llama a un diseño que hayas creado previamente en la biblioteca de DIVI.
Si tienes una web muy antigua con muchas páginas y entradas, esto te salvará la vida!!
Te dejo los enlaces aquí: (no sé si te parecerá bien, los dejo porque son un recurso estupendo para muchos de los que te leen).
ingresosviaweb.com/footer-en-divi-con-modulos
ayudawp.com/tutorial-divi-editar-las-plantillas-archivo-editor-visual
Hola Graciela,
Sí, conozco esa opción y la he usado en varios proyectos.
Era muy difícil darte una "solución" sin ver la web. De momento, no tengo tanta imaginación 😀
Gracias por tus comentarios!
Pues si se te ocurre algo para hacer lo mismo en el archivo header y que sólo afecte a las páginas del blog, sería la felicidad suprema.
No encuentro nada el red por ahora.
Me espera un finde horrible hasta que dé con la solución y estoy agotada.
Una vez más gracias por tu amabilidad y prontas respuestas.
Un saludo
Hola Max,
Mi problema es que el logo se ve muy pequeño. Es de buena calidad pero es un 850x850 y solo me permite modificar el logo si recorto o reduzco el tamaño.
Probé a poner el código CSS que comentas en el post pero nada, se sigue viendo igual de pequeño y la verdad es que es un fastidio.
¿Qué puedo hacer?
Gracias,
Noe
Hola Noe,
El tamaño del logo se modifica desde Apariencia > Personalizar > Cabecera y navegación.
En principio, para que se vea correctamente no necesitas aplicar CSS. De hecho, las dimensiones que me comentas ya las veo demasiado grandes (debería verse bien el logo).
Saludos
Hola Max! Gracias por el post! Quisiera saber cómo puedo modificar la galería default de wordpress (add media > add gallery) para que los thumbnails se vean con mayor tamaño en Divi, pues el resultado que queda ahora es muy pobre. A poder ser, sin plugins 😉
Mil gracias!
Hola Sara,
¿Te refieres al módulo galería de Divi o al bloque que genera Gutenberg cuando añades varias imágenes?
Hola
Como se crea un módulo Blur con efectos he visto muchas webs que lo tienen o el plugin DIVI den pro,
Me gustaría crear uno pero no tengo ni idea.
Gracias
Hola Pascual,
¿A qué tipo de efecto te refieres?
Saludos
Hola Max:
En primer lugar muchas gracias por este post tan maravilloso.
Tengo un problema. Los iconos de redes sociales del pie aparecen. Funcionan todos en el header pero algunos del Footer no me da opción a pinchar. Si miro en las opciones de DIVI y de Divi Booster, están todas las url puestas. Y en el móvil no aparece ningún icono social a pesar de que tengo activada la opción.
Estoy loca buscando pero no sé qué es. Hace meses toqué código en tema hijopara que se añadiera youtube, igual jorobé algo.
Hola Azucena,
Tiene toda la pinta que, si tocaste el código de la plantilla para incluir más botones, el problema está ahí.
Revisa el archivo que modificaste (supongo que será social-icons) y comprueba que todo esté ok.
Saludos
Muchas gracias por este estupendo post Max! y por las actualizaciones! Ya he utilizado varias cosillas en mi blog, me encanta trastear en él 🙂
Hola Lourdes,
¡Cuánto me alegro!
Me he dado una vuelta por tu blog y me ha gustado mucho el diseño y también la paleta de colores. Gran trabajo.
Si necesitas recursos específicos para Divi, échale un vistazo a mi otra web DiviFast.
Gracias por pasarte 🙂
Para poder tener más pre-visualizaciones de artículos en el apartado del blog ¿hay que tocar código? Porque voy a lectura dentro de WP añado a que se me muestren 9 y no se realizan los cambios.
Muchas gracias
Hola Álex,
Simplemente tienes que modificar el número de entradas que quieres mostrar en los ajustes del módulo blog.
Saludos
Hola Max, el codigo de la imagen de las opiniones es decir el modulo persona configuración no funciona, supongo que hay que pegarlo en el modulo en CSS. Gracias
Hola Jose,
¿A qué código te refieres?
No hay ningún código para el módulo de personas o testimonios, que por otro lado son módulos diferentes.
Saludos
No me salio lo del menu centrado
Perfecto tio, yo en mi web uso DIVI, algunas cosas ya las conocía porque las he usado en mi pagina web o en la de que hecho a otros clientes, pero otras recomendaciones de las que nos dejas son buenas para dar mas opciones a la caracterización de DIVI
No me funciona el css de poner el blog en dos columnas, poniendo la imagen en un lado y el texto e información al lado. No hay manera.
Hola Eva,
¿A qué epígrafe te refieres? (3, 4 o 5).
Saludos
Hola, gracias por esos tips tan geniales, quisiera solicitar tu ayuda con un problema que tengo, básicamente tengo el menú principal y el sub menú en el footer, como puedo darle a cada opción un efecto o estilo? algo así como que cada opción aparezca subrayada o se ilumine al pasar el cursor.
Quedo atento a tu respuesta e infinitamente agradecido.
Hola Felipe,
Échale un vistazo a este post en el que explico varias formas de personalizar el menú de Divi.
Saludos
Hola! genial el post.
Una cosilla, me estoy volviendo loca para personalizar los títulos de los widgets. Quería poner lineas antes y después del título de color amarillo y el texto en negro.
¿Podrías ayudarme? Te lo agradecería mogollón.
Saludoss
Patry
Hola Patricia,
Puedes personalizar los títulos de los widgets con CSS. La etiqueta que tienes que usar es: .widgettitle
Saludos
¡Excelente! No encontraba la forma de centrar el pie; lo de mejorar la calidad del logo es genial, antes se veía algo borroso y ahora se ve bien. No entiendo como DIVI tiene estos errores. Gracias!
¿Cómo podría quitar la linea divisora entra el menú y el contenido? Como el ejemplo #8 que has puesto, gracias !
Hola Luis,
Directamente con el generador de temas de Divi.
Saludos
no encuentro la opción por ningún lado, ahi solo deja crear cabeceras o pies a partir de plantillas, o crear plantillas 🙁
Eso es, Luis. Tienes que crear una cabecera nueva directamente sin esa línea que no te gusta. Se hace desde el generador de temas.
Aquí tienes un tutorial: Cómo crear una cabecera personalizada con el generador de temas de Divi
Me ha encantado, ¿y como se puede escribir la palabra menú, cuando haces un menú con rallitas pero en la versión escritorio?, Gracias
Muchas gracias, Susana ¿Te refieres a añadir un texto al menú de pantalla completa?
Hola. Me refiero a esto (nadianemer.com) El texto "menú", ya que cuando lo hago en menú deslizante que es la opción de Divi, solo me salen las rayitas, pero no el texto. Un saludo y gracias por tu rápida respuesta.
En ese caso, tienes que activar el menú de pantalla completa desde el personalizador de Divi y luego añadir el siguiente código CSS:
.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu::after {
content: "MENÚ";
position: absolute;
top: 38px;
right: 2px;
font-size: 10px;
}
Muchísimas gracias, de verdad. Y enhorabuena por tu blog y todo lo que nos aportas.
Hola Max
Soy nuevo y estoy aprendiendo.
Vi tu sitio y encontré este post que me ayuda muchísimo.
Lo que no sé cómo hacer es personalizar el footer de un sitio de WordPress.
Quiero que en el haya un texto y una imagen con un enlace a otro sitio.
Cómo lo hago? Cuál es el código? Gracias
Hola Juan Carlos,
Si usas el tema Divi, aquí te explico cómo crear un footer (pie de página) personalizado con el generador de temas.
Saludos
Hola Max.
Sabes si hay alguna manera para cambiar el icono del carrito de woocommerce con la plantilla Divi por un icono de una cesta?
Hola Manel,
Échale un vistazo a los iconos fontawesome de los que hablo en este post sobre iconos web.
Por otro lado, te recomiendo echarle un vistazo a este post de Fernando Tellado. La temática no es exactamente la misma, pero habla de cómo cambiar los iconos de WooCommerce: personalizar a tope la página «Mi cuenta».
¡Espero que te sirva!
Saludos
Hola ¿Es posible crear una secuencia de paginas para móvil que para pasar a la siguiente pagina deslices a la derecha? Esto se puede hacer en Canva, pero obviamente sin tu dominio. Gracias.
Hola Carlos,
¿Te refieres a un carrusel de entradas (páginas en tu caso) como el que tengo en el blog o en la página de inicio?
Saludos
Hola Max, no la pagina completa. Mira este ejemplo demos.ovdivi.com/scroll-horizontal-web. Gracias
Hola Carlos,
Mi consejo es que le preguntes directamente a Óscar Viedma, que es el autor de esa web y de esos diseños tan buenos para Divi. Incluso puede que tenga un tutorial para crear ese formato de diseño en su blog.
Saludos
Hola Max,
Me gustaría saber cómo podría esconder el menú secundario en versión móvil, he probado el siguiente código CSS pero no funciona:
#et-secondary-menu {
display: none !important;
}
Muchas gracias!
Saludos
Hola Carmen,
Si quieres eliminar la barra superior que se genera al añadir un menú secundario, el ID es #top-header, en vez de #et-secondary-menu, y debes configurarlo para que oculte en el móvil. Con CSS se hace de la siguiente forma:
@media only screen and (max-width: 970px) {
#top-header {
display: none !important;
}}
Ya me contarás si te ha funcionado 🙂
Saludos
Hola Max,
Muchas gracias por la ayuda.
El tema es que estoy intentando hacer una one page con anclas, pero solo me funciona cuando activo >dónde se verá> menú principal y menú secundario. Cuando solo selecciono la opción >dónde se verá>menú principal, las anclas no funcionan.
Entonces he optado por dejar activado que se vea en menú principal y menú secundario, y he conseguido ocultarlo en escritorio, pero en versión móvil me sale menú duplicado claro.
He insertado el código que me has facilitado pero no ha funcionado.
Sabrías otra manera de hacer esto?
Muchas gracias de nuevo Max.
Un saludo!
Hola de nuevo, Carmen:
Sin verlo, no se me ocurre, es difícil. Tendría que analizar el problema concreto.
Si quieres, puedes escribirme desde el formulario de contacto para que pueda valorarlo.
Saludos
¡Hola, Max! Excelente tutorial.
Yo necesito dos logos en el menú: uno a la izquierda (el de divi) y otro a la derecha (lo agregué con un plugin de menu widget). El tema es que el logo de la derecha me alinea a la botonera en la parte inferior.
Me gustaría que quede centrado verticalmente, pero no encuentro forma de dónde hacerlo. Te dejo el link nvtweb.com.ar
Gracias!!
Hola, Nacho:
¿Y no has contemplado la opción de crear tu cabecera directamente con el generador de temas de Divi? Así puedes diseñarla a tu gusto y no dependes de otros plugins.
Saludos
lo hice mezclando un par de códigos!! Muchas gracias.
Buenos días Max. Muy buenos tus contenidos, son completos y claros.
En mi web tengo una galería de imágenes y muchas fotos de diferentes tamaños ¿Sabes decirme cómo puedo personalizar con css el tamaño de las imágenes para evitar cambiar una a una antes de subirlas a biblioteca?
Muchas gracias!
Hola Max. ¿Qué tal?
Me gustaría quitar la barra lateral de la web pero SOLO en la home, mientras en los posts sigue estando.
Te agradecería mucho que me dijeses el código que utilizas tu si lo haces con CSS o el plugin si fuese el caso.
Muchas gracias anticipadas
Saludos
Victor
P.D.: He visto varias webs hechas por ti con esta configuración.
Hola, Víctor.
En el blog de Elegant Themes te lo explican: cómo eliminar las barras laterales de Divi.
De todas formas, si maquetas la página con Divi, no uses el módulo de barra lateral y listo.
Saludos
Hola de nuevo.
Mil gracias por la rápida contestación.
Solo quería quitar la barra lateral de la home y mantenerla en las entradas, de ahí el problema.
Gracias de nuevo
Saludos
Victor
Muy bueno, estaba buscando cómo cambiar el css de los botones del menú y estuve realizando algunos cambios de los que vi acá.
buenas como puedo cambiar el tipo de letra de los textos del submenú?