Añadir más botones en los módulos del tema Divi

21 de marzo - 2022

Divi es un gran tema que permite crear webs de todo tipo, y lo mejor de todo, que es muy fácil modificar algunas opciones sin necesidad de entrar directamente en los archivos. En esta ocasión veremos cómo añadir más botones en Divi a los módulos que sólo tienen uno o dos asignados por defecto.

Suscríbete:

Antes hay que instalar el tema DIVI

Cómo instalar Divi

Consigue un 10% de DESCUENTO - Sólo activo durante 24 horas

Módulos de Divi a los que se les puede añadir más botones

Comencemos indicando cuáles son esos módulos para poder analizarlos y ver cómo se añaden los botones extra.

Existen dos tipos de módulos según la sección que escojamos: de anchura completa o regular (la sección especial es igual que la regular pero con una columna lateral).

Para poder añadir más botones de los establecidos en el módulo, hay que cumplir dos requisitos importantes, que el módulo disponga de la opción de colocar un botón y que disponga de una casilla para añadir texto personalizado.

Módulos de anchura completa

Donde poner más botones en Divi en módulos de anchura completa
Módulos de anchura completa donde añadir más botones

El control deslizante de anchura completa permite personalizar un solo botón, mientras que el título de anchura completa tiene asignados dos botones. Si son suficientes tienes resuelta la papeleta, pero si necesitas más tendrás que añadirlos como te indicaré más abajo.

Módulos de anchura regular

Donde poner más botones en Divi en módulos de anchura regular
Módulos de anchura regular donde añadir más botones

NOTA: Cualquier módulo que disponga de la opción de añadir texto personalizado, admite añadir uno o varios botones, pero no se podrán personalizar desde el módulo al no tener la opción de personalizar el botón. Sólo tendrán el aspecto general que configuremos desde el personalizador de WordPress.

Cómo añadir más botones en Divi de forma general en todos los módulos

Cada módulo se rige por sus propias opciones, y los botones tienen asignada una clase (class) diferente que permiten su personalización en cada módulo de forma individual.

Pero si mantenemos desactivada las opciones de diseño del botón en cualquier módulo, podemos dar forma al botón desde el personalizador de WordPress de forma general en toda la web.

Añadir un botón genérico más en DIVI

Para el ejemplo voy a utilizar el módulo de "Control deslizante de anchura completa". Como cada diapositiva es diferente, hay que entrar en cada una por separado para colocar los botones que queramos.

Dentro del módulo ocultamos el botón predefinido. Unas veces será con una pestaña y otras bastará con borrar el texto del botón, nos aseguramos que esté desactivada la pestaña del "Botón" en el apartado de diseño.

Ocultar botón en módulo de Divi
Desactivar el botón
Desactivar opciones de personalización del botón
Estilos del botón apagados

Los botones se añaden desde la pestaña "Texto" de la caja del editor "Cuerpo", debajo del párrafo que tengamos colocado o sustituyendo este si sólo queremos que aparezcan los botones.

Copiamos y pegamos este código, que en lenguaje de programación no es más que un ancla con la etiqueta "a" en HTML a la que se le asigna las clases (class) que ya están establecidas por el tema Divi:

Colocar botón con código en Divi
Botón añadido con código en la pestaña "Texto"

Para configurar el enlace del botón hay que sustituir la almohadilla "#" por la url a la que quieres que redirija el botón al pulsarlo, y sustituir el texto "Texto de tu botón" por el texto que tu quieras.

Para añadir más botones colocamos este código seguido tantas veces como necesitemos dejando un espacio entre ellos.

Añadir más botones en Divi
Varios botones en un módulo de Divi

Cambiar aspecto del botón desde el personalizador de WordPress

El tema Divi añade al personalizador de WordPress varias opciones más que añade a las que trae por defecto el propio WordPress. Entre esas opciones se encuentra la posibilidad de modificar el aspecto de los botones de Divi, siempre que no hayamos activado la personalización del botón dentro del módulo.

Personalizador de WordPress
Personalizador de WordPress

Desde aquí podemos cambiar el aspecto del botón cuando carga la página y como se comporta cuando el ratón pasa por encima. Como esta es una cuestión más personal no voy a entrar en detalles y que cada uno adapte sus botones como más les guste.

NOTA: Estos cambios afectan a todos los botones que no estén personalizados individualmente desde los módulos

Cambio de aspecto de los botones

Utilizar la personalización del botón en los módulos

Si queremos dar un aspecto diferente a los botones que hemos añadido en un módulo concreto, sin que afecte al resto de la web, hay que hacerlo desde la pestaña "Diseño" activando la opción del "Botón".

Pero dependiendo del módulo, los cambios que hagamos puede que no se apliquen al botón. Esto ocurre porque Divi añade una clase (class) más para poder distinguir los botones de los diferentes módulos.

Para que funcionen los cambios hay que añadir al código que os mostraba antes, una clase más (class) correspondiente al módulo en el que estamos.

Clases CSS individuales de cada módulo

Control deslizante de anchura completa y Deslizador de anchura regular: et_pb_more_button

Título de anchura completa:

  • Para el botón 1 - et_pb_button_one
  • Para el botón 2 - et_pb_button_two

Llamada a la acción: et_pb_promo_button

Iniciar sesión y Correo electrónico optin: et_pb_newsletter_button

Tabla de precios: et_pb_pricing_table_button

Añadiendo cada clase CSS y el código correspondiente en el módulo que estemos utilizando, podremos cambiar el aspecto del botón desde la pestaña diseño.

Estilos del botón desde el módulo

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento