Códigos CSS para personalizar Divi (trucos Divi)
Códigos CSS para personalizar Divi (trucos Divi)

Códigos CSS para personalizar Divi

Tiempo lectura:
15/01/2019
15/01/2019
Tiempo lectura:

Hoy 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:

  1. Añades una sección con ancho estándar.
  2. En los ajustes de la sección, activas la opción Usar efecto de paralaje; en el tipo de paralaje: verdadero.
  3. Añades una fila del tipo que necesites, en mi caso con 3 columnas.
  4. 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;
}
Efectos CSS Divi: personalizar el botón "leer más"

É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.

Efectos CSS Divi: entradas en dos columnas

#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:

Efectos CSS Divi: entradas en dos columnas

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):

Efectos CSS Divi: personalizar el número de comentarios

#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.

Efectos CSS Divi: agrandar el menú secundario
Efectos CSS Divi: agrandar el menú secundario

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.

Efectos CSS Divi: centrar títulos entradas

#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:

Efectos CSS Divi: alinear el menú principal a la izquierda

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:

Efectos CSS Divi: alinear el menú principal a la izquierda

#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.

Efectos CSS para personalizar tu web o blog con Divi
Menú móvil por defecto
Efectos CSS para personalizar tu web o blog con Divi
Menú móvil modificado

#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:

Efectos CSS Divi: añadir texto en el menú móvil

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:

Efectos CSS para personalizar tu web o blog con Divi
Menú centrado por defecto

Efectos CSS Divi: alinear el menú centrado en el móvil
Menú centrado modificado

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í:

Efectos CSS Divi: centrar pie de página (footer)

Pero, si quieres huir del clásico footer de Divi, es posible centrarlo; y el resultado quedaría así:

Efectos CSS Divi: centrar pie de página (footer)

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".

Efectos CSS Divi: 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.

Summary
🎨  Códigos CSS para personalizar Divi: 18 trucos Divi
Article Name
🎨 Códigos CSS para personalizar Divi: 18 trucos Divi
Description
En este artículo te cuento algunos códigos CSS para Divi. Personaliza tu web con estos trucos para Divi.
Author
Publisher Name
Max Camuñas
Publisher Logo

191 Comentarios

  1. Elena

    Genial! Me ha encantado este post.. yo uso divi pero hay muchas cosas que se me escapan ✨?✨gracias!

    Responder
    • Max Camuñas

      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 😉

      Responder
  2. Juanjo Santana

    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! 🙂

    Responder
    • Max Camuñas

      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!

      Responder
  3. Maria Castro

    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?

    Responder
    • Max Camuñas

      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

      Responder
  4. Gabriel corbetto

    muy bueno felicitaciones y aguante divi!

    Responder
  5. Pablo Moreno Acevedo

    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.

    Responder
    • Max Camuñas

      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!

      Responder
    • Manel

      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

      Responder
      • Pablo Moreno Acevedo

        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.

        Responder
  6. Yoany Agudelo

    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

    Responder
  7. Yanira

    ¡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?

    Responder
    • Max Camuñas

      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!

      Responder
  8. saberfrases

    Muchas gracias Max.
    Los voy a probar que andaba buscando algo asi

    Saludos y pon mas cosillas de DIVI 😉

    Responder
  9. ANTONIO JESUS MARTIN JIMENEZ

    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

    Responder
    • Max Camuñas

      Muchas gracias Antonio! Me alegro muchísimo de que te haya servido 🙂

      Responder
  10. Miguel Angel

    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?

    Responder
    • Max Camuñas

      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!

      Responder
  11. Nolbert

    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

    Responder
    • Max Camuñas

      Hola Nolbert,

      ¿Dónde quieres aplicar ese efecto? El código del post es para páginas de búsqueda y de archivo.

      Saludos

      Responder
      • Nolbert

        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?

        Responder
        • Max Camuñas

          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 😉

          Responder
  12. charlie

    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

    Responder
    • Max Camuñas

      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

      Responder
  13. Vampur

    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

    Responder
    • Max Camuñas

      Hola!

      Lo tienes en las opciones generales de Divi (Botón de volver arriba).

      Saludos

      Responder
  14. LARO CASTANEDO FERNANDEZ

    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.

    Responder
    • Max Camuñas

      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

      Responder
  15. Sus

    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?

    Responder
    • Max Camuñas

      Hola Sus,

      Pega por aquí el fragmento de código que estás usando para ver si está todo ok.

      Saludos

      Responder
      • Sus

        Debía ser error de instagram porque desde hace dos horas funciona

        Responder
  16. Sus

    Instagram, me confundí 😉

    Responder
  17. Diseño Web Sevilla

    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

    Responder
  18. Ruben

    Me ha encantado, entrada en dos columnas, gracias

    Responder
  19. Yurena

    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!

    Responder
    • Max Camuñas

      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.

      Responder
      • Yurena

        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.

        Responder
        • Max Camuñas

          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 😉

          Responder
          • Yurena

            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.

          • Max Camuñas

            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

          • Yurena

            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!!!

          • Max Camuñas

            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!! 😀

          • Yurena

            Pues así de sencillo:

            .archive.category .et_pb_post { column-count: 2;}

          • Max Camuñas

            Muchas gracias Yurena! Lo probaré 🙂

  20. Joel

    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.

    Responder
    • Max Camuñas

      Hola Joel,

      Creo que puedes hacerlo con el plugin: Better Font Awesome.

      Pruébalo y me cuentas qué tal.

      Saludos!

      Responder
      • Joel

        Hola crack
        Si funciona
        Muchas gracias por tu ayuda.
        ?

        Responder
  21. Noelia

    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

    Responder
    • Max Camuñas

      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!

      Responder
  22. Emmanuel

    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!

    Responder
    • Max Camuñas

      Hola Emmanuel,

      Cuando hago modificaciones CSS en el menú principal, uso la etiqueta #top-menu.

      Revisa a ver si puede ser eso.

      Saludos

      Responder
  23. Emmanuel

    Hola! usar la etiqueta #top-menu no me dio ningún resultado

    que puede estar fallando?

    Responder
  24. Pascual

    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

    Responder
    • Max Camuñas

      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!

      Responder
  25. Pablo

    Hola! Estoy intentando probar el de poner el blog en dos columnas y no me funciona. Únicamente no sucede nada...

    Alguna idea?

    Gracias!!

    Responder
    • Max Camuñas

      Hola Pablo,

      ¿Has probado con las 3 opciones que menciono en el artículo y ninguna te ha funcionado?

      Saludos

      Responder
      • Pablo

        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!

        Responder
        • Max Camuñas

          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!

          Responder
          • Pau

            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

          • Max Camuñas

            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?

  26. Jose

    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!

    Responder
    • Max Camuñas

      Hola Jose,

      Te recomiendo actualizar a la última versión de Divi a ver si se soluciona tu problema.

      Saludos

      Responder
  27. Walter Olivo

    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.

    Responder
    • Max Camuñas

      Me alegro mucho Walter!

      Mándame la URL de tu web para echarle un vistazo 😉

      Responder
  28. jana

    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!

    Responder
  29. oscar

    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.

    Responder
  30. Paula

    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.

    Responder
    • Max Camuñas

      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

      Responder
  31. Santiago

    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

    Responder
    • Max Camuñas

      Hola Santiago,

      ¿Te refieres a que, al hacer clic en un botón, vaya a otra parte de la página?

      Responder
  32. María

    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.

    Responder
    • Max Camuñas

      Hola María,

      Prueba con este código:

      /*** remove shadow on main header***/
      #main-header {
      box-shadow: none;
      }

      Saludos!

      Responder
  33. María

    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"

    Responder
  34. Toño

    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.

    Responder
    • Max Camuñas

      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

      Responder
      • Toño

        Ya lo intenté con #top-header, pero no funciona, veré cómo me va con lo otro.

        Responder
  35. María

    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

    Responder
  36. Leire

    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

    Responder
    • Max Camuñas

      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

      Responder
  37. Carmen

    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

    Responder
  38. Marian

    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!

    Responder
    • Max Camuñas

      Hola Marian,

      Si es un portfolio, tienes que hacerlo con proyectos y no con blog.

      ¿Has probado a editar con el maquetador los proyectos?

      Responder
  39. Jose Cordova

    hola, como puedo poner tres entradas en una sola linea como el tuyo ? dado que mi blog solo muestra una entrada gigante por lineea

    Responder
    • Max Camuñas

      Hola Jose,

      Para ello, tienes que crear una nueva página, insertar un módulo de blog y configurarlo con estilo rejilla (grid).

      Saludos

      Responder
  40. Ricardo Sauceda Rojas

    Amigo como puedo desaparecer el header al dar scroll down?
    Me podrías ubicar/apoyar un poco?

    Responder
  41. Piero

    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.

    Responder
  42. Rubén Martínez

    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! 🙁

    Responder
    • Max Camuñas

      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

      Responder
  43. Hamilton

    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.

    Responder
    • Max Camuñas

      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

      Responder
  44. Luis Alberto Cabrera Huerta

    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!

    Responder
    • Max Camuñas

      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

      Responder
  45. Alexander

    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?

    Responder
  46. Beto

    Hola,tengo un problema con el contador de comentarios,no aparece en mis entradas de blog...no sé si es Divi o wordpress

    Responder
    • Max Camuñas

      Hola Beto,

      Recuerda tenerlos activados en los opciones generales de WordPress (Ajustes > Comentarios) y también dentro de cada post.

      Saludos

      Responder
      • Bto

        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

        Responder
        • Max Camuñas

          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?

          Responder
          • Bto

            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

          • Max Camuñas

            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 😉

  47. Bto

    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

    Responder
  48. Juan

    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

    Responder
    • Max Camuñas

      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

      Responder
      • Juan

        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 😉

        Responder
        • Max Camuñas

          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? 😉

          Responder
          • Juan

            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.

          • Max Camuñas

            Veo que ya tienes la estructura montada y te falta ir maquetando cada página.

            Tiene muy buena pinta. Mucha suerte con el proyecto! 🙂

  49. Nicolás

    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??

    Responder
    • Max Camuñas

      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

      Responder
      • Nicolas

        Muchas gracias Crack!.

        Un saludo.

        Responder
  50. Luis Rodriguez

    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

    Responder
  51. Victor

    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.

    Responder
  52. Maria

    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!

    Responder
    • Max Camuñas

      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 🙂

      Responder
  53. Luis Rodriguez

    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

    Responder
  54. José

    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.

    Responder
  55. Andrea

    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

    Responder
    • Max Camuñas

      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 🙁

      Responder
  56. Yomer

    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!

    Responder
  57. Guillermo

    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

    Responder
  58. Adolfina N

    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! ☺

    Responder
    • Max Camuñas

      Hola Adolfina,

      Estos códigos son para Divi. No trabajo con Extra. Sorry 🙁

      Saludos

      Responder
  59. Ivan

    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 🙂

    Responder
    • Max Camuñas

      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

      Responder
      • Ivan

        Muchísimas gracias, Max, por tu amabilidad!!!

        Si sabía yo que tenía que ser fácil y yo muy torpe 🙂

        Responder
  60. Graciela

    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

    Responder
    • Max Camuñas

      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!

      Responder
      • Graciela

        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

        Responder
          • Graciela

            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

          • Max Camuñas

            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!

  61. Graciela

    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

    Responder
  62. Noe Puigdengolas

    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

    Responder
    • Max Camuñas

      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

      Responder
  63. sara

    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!

    Responder
    • Max Camuñas

      Hola Sara,

      ¿Te refieres al módulo galería de Divi o al bloque que genera Gutenberg cuando añades varias imágenes?

      Responder
  64. Pascual

    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

    Responder
    • Max Camuñas

      Hola Pascual,

      ¿A qué tipo de efecto te refieres?

      Saludos

      Responder
  65. Azucena

    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.

    Responder
    • Max Camuñas

      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

      Responder
  66. Lourdes

    Muchas gracias por este estupendo post Max! y por las actualizaciones! Ya he utilizado varias cosillas en mi blog, me encanta trastear en él 🙂

    Responder
    • Max Camuñas

      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 🙂

      Responder
  67. Alex Castro

    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

    Responder
    • Max Camuñas

      Hola Álex,

      Simplemente tienes que modificar el número de entradas que quieres mostrar en los ajustes del módulo blog.

      Saludos

      Responder
  68. Jose

    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

    Responder
    • Max Camuñas

      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

      Responder
  69. jerry castillo

    No me salio lo del menu centrado

    Responder
  70. Experto en Informática

    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

    Responder
  71. Eva

    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.

    Responder
    • Max Camuñas

      Hola Eva,

      ¿A qué epígrafe te refieres? (3, 4 o 5).

      Saludos

      Responder
  72. Felipe Mora

    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.

    Responder
  73. Patricia Bermejo

    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

    Responder
    • Max Camuñas

      Hola Patricia,

      Puedes personalizar los títulos de los widgets con CSS. La etiqueta que tienes que usar es: .widgettitle

      Saludos

      Responder
  74. Luis

    ¡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!

    Responder
  75. Luis

    ¿Cómo podría quitar la linea divisora entra el menú y el contenido? Como el ejemplo #8 que has puesto, gracias !

    Responder
  76. Susana

    Me ha encantado, ¿y como se puede escribir la palabra menú, cuando haces un menú con rallitas pero en la versión escritorio?, Gracias

    Responder
    • Max Camuñas

      Muchas gracias, Susana ¿Te refieres a añadir un texto al menú de pantalla completa?

      Responder
      • Susana

        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.

        Responder
        • Max Camuñas

          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;
          }

          Responder
  77. Susana

    Muchísimas gracias, de verdad. Y enhorabuena por tu blog y todo lo que nos aportas.

    Responder
  78. Juan Carlos

    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

    Responder
  79. Manel

    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?

    Responder
    • Max Camuñas

      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

      Responder
  80. Carlos

    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.

    Responder
    • Max Camuñas

      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

      Responder
      • Carlos

        Hola Max, no la pagina completa. Mira este ejemplo demos.ovdivi.com/scroll-horizontal-web. Gracias

        Responder
        • Max Camuñas

          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

          Responder
  81. Carmen

    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

    Responder
    • Max Camuñas

      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

      Responder
  82. Carmen

    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!

    Responder
    • Max Camuñas

      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

      Responder
  83. Nacho

    ¡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!!

    Responder
    • Max Camuñas

      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

      Responder
      • nacho

        lo hice mezclando un par de códigos!! Muchas gracias.

        Responder
  84. Paola Cicinelli

    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!

    Responder
  85. Victor

    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.

    Responder
      • Victor

        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

        Responder
  86. Nano

    Muy bueno, estaba buscando cómo cambiar el css de los botones del menú y estuve realizando algunos cambios de los que vi acá.

    Responder
  87. Alexis

    buenas como puedo cambiar el tipo de letra de los textos del submenú?

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

¿Necesitas una página web, blog, landing o tienda online?
¡PIDE TU
PRESUPUESTO!
masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guía

PARA DISEÑAR LOGOTIPOS MEMORABLES

GUÍA para diseñar logotipos memorables