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.
Antes hay que instalar el tema 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
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
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.
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:
1 | <a class="et_pb_button et_pb_more_button" href="#">Texto de tu botón</a> |
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.
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.
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
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
1 | <a class="et_pb_button et_pb_more_button" href="#">Texto de tu botón</a> |
Título de anchura completa:
- Para el botón 1 - et_pb_button_one
- Para el botón 2 - et_pb_button_two
1 | <a class="et_pb_button et_pb_more_button et_pb_button_one" href="#">Texto de tu botón</a> |
1 | <a class="et_pb_button et_pb_more_button et_pb_button_two" href="#">Texto de tu botón</a> |
Llamada a la acción: et_pb_promo_button
1 | <a class="et_pb_button et_pb_more_button et_pb_promo_button" href="#">Texto de tu botón</a> |
Iniciar sesión y Correo electrónico optin: et_pb_newsletter_button
1 | <a class="et_pb_button et_pb_more_button et_pb_newsletter_button" href="#">Texto de tu botón</a> |
Tabla de precios: et_pb_pricing_table_button
1 | <a class="et_pb_button et_pb_more_button et_pb_pricing_table_button" href="#">Texto de tu botón</a> |
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.
0 comentarios