Efectos CSS para personalizar tu web o blog con Divi
Efectos CSS para personalizar tu web o blog con Divi

Efectos CSS para personalizar tu web o blog con Divi

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 efectos 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 explicar algunos efectos CSS muy chulos con los que bordar los resultados que Divi ofrece.

18 efectos CSS para personalizar Divi


#1 Efecto parallax en las imĂĄgenes

Empezamos por algo facilito.

Buenos dĂ­as :)Estoy preparando un post que saldrĂĄ el martes en el blog con 6 efectos molones para personalizar la plantilla Divi, como por ejemplo este efecto parallax tan chulo en las imĂĄgenes ?ÂĄFeliz fin de semana!

Posted by Max Camuñas on Saturday, March 11, 2017

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 efectos CSS para personalizar Divi, te recomiendo pasarte por el blog de DiviFast, donde tenemos un montĂłn de recursos y herramientas para Divi.

IMG: elegantthemes.com

Summary
🎹 18 efectos CSS para personalizar tu sitio web con Divi
Article Name
🎹 18 efectos CSS para personalizar tu sitio web con Divi
Description
Descubre algunos efectos molones y creativos para personalizar el tema Divi, la que considero la mejor plantilla que existe para WordPress.
Author
Publisher Name
Max Camuñas
Publisher Logo

172 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
    • Max Camuñas

      Hola Piero,

      ÂżTe refieres al llamado «menĂș centrado»?

      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:

            Pon:

            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 850×850 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

Enviar un comentario

Tu direcciĂłn de correo electrĂłnico no serĂĄ publicada. Los campos obligatorios estĂĄn marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serån guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Diseña
tu web

Diseña
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

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