2 formas de crear conmutadores personalizados para mostrar más en Divi

Mostrar más conmutadores puede resultar útil para muchas aplicaciones diferentes en un sitio web. Tradicionalmente, mostrar más conmutadores se utilizan para mostrar más texto al hacer clic en un enlace de mostrar más (como leer más conmutadores). Esto es útil para mantener el diseño inicial más compacto y conciso, dejando que el visitante haga clic para obtener más información si la necesita.

En este tutorial, le mostraremos dos formas de crear Show More Toggles personalizados para su sitio Divi. La primera forma incluye transformar un módulo de alternancia Divi en un alternar mostrar más que se encuentra debajo de un módulo, listo para mostrar / ocultar texto adicional. El segundo método implicará la creación de un conmutador de mostrar más que pueda mostrar / ocultar filas o módulos Divi completos. Como puede imaginar, esto abre la puerta para mostrar u ocultar básicamente cualquier contenido que desee.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al programa de más conmutadores que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

1st Way: Construyendo un Show More Toggle usando un Módulo de Toggle Divi

Primero, agregue una fila de dos columnas a su sección.

En la columna de la izquierda, agregue un módulo de propaganda.

Debajo del módulo de propaganda, agregue un módulo de alternancia. Vamos a convertir el módulo de alternancia en mostrar más alternancia para que muestre / oculte más texto debajo del módulo de propaganda al hacer clic en la alternancia.

Para hacer esto, abra la configuración del módulo de alternancia y actualice el texto del título:

• Título: Mostrar más

En la pestaña de diseño, actualice lo siguiente para eliminar los estilos predeterminados:

• Abrir alternar color de fondo: rgba (0,0,0,0);
• Color de fondo de alternancia cerrada: rgba (0,0,0,0);

• Relleno: 0px arriba, 0px abajo, 0px izquierda
• Ancho del borde: 0px

En la pestaña Avanzado, actualice el CSS personalizado para lo siguiente:

Para el elemento principal ...

display:flex;
flex-direction: column;
align-items: flex-end;

Para el título de alternancia ...

order:2;
padding-right:25px !important;

Para el contenido de alternancia ...

order:1;
padding: 0px;

Este título de alternancia y el contenido de alternancia se ordenan de manera diferente usando la propiedad de orden con display: flex. Ahora, el título en el que se puede hacer clic se encuentra debajo del contenido para que funcione como un espectáculo más alternar.

Ahora, agregue la siguiente clase CSS al módulo de alternancia:

• Clase CSS: et-readmore-toggle

Esto es necesario para apuntar al módulo con nuestro código JQuery que agregaremos para cambiar el texto del título al hacer clic en el botón.

Hemos limpiado el módulo de alternancia y hemos quitado todo el relleno para que la alternancia se coloque directamente debajo del módulo de propaganda de arriba. Sin embargo, todavía hay demasiado margen inferior en la propaganda superior, por lo que el texto dentro del conmutador estará demasiado lejos del párrafo anterior.

Abra la configuración del módulo de propaganda sobre la palanca y actualice el margen:

• Margen inferior: 10px;

Ahora estamos listos para agregar el JQuery necesario para cambiar el texto del título de alternancia para leer "Mostrar más" o "Mostrar menos" cuando se hace clic.

Para agregar el código, agregue un módulo de código debajo del módulo de alternancia.

Luego pegue el siguiente JQuery asegurándose de envolver el código en las etiquetas de script necesarias.

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

Aquí está el resultado.

Este diseño es obviamente básico. Siéntase libre de agregar más diseño a la palanca usando las opciones de Divi integradas para satisfacer sus necesidades.

2nd Way: Construyendo un botón Mostrar más para mostrar / ocultar cualquier módulo o fila Divi

Si el primer show more toggle usando el módulo toggle parece demasiado limitante, este próximo método le interesará. ¡Vamos a crear un conmutador personalizado de mostrar más que puede usar para mostrar / ocultar un módulo Divi o incluso una fila completa!

Creación de una palanca de Mostrar más para un módulo Divi

He aquí cómo hacerlo.

Primero, cree otra fila de dos columnas como lo hizo en el primer ejemplo.

Luego agregue un módulo de propaganda a la columna 1.

Debajo del módulo de propaganda, vamos a agregar un módulo de formulario de contacto.

Este formulario de contacto será el módulo que mostraremos / ocultaremos al hacer clic en un botón de mostrar más.

Para orientar este módulo en el código, abra la configuración del formulario de contacto y agregue la siguiente clase CSS:

• Clase CSS: et-show-more-content

También necesitaremos apuntar al contenedor principal del módulo que queremos mostrar / ocultar. Esto nos permitirá agregar múltiples instancias de alternar mostrar más en la página si es necesario. En este caso, el contenedor principal de este módulo de formulario de contacto es la columna 1. Abra la configuración de la columna 1 y agregue la siguiente clase CSS:

• Clase CSS: et-show-more-container

Para crear el botón de alternar mostrar más, agregue un módulo de botón debajo del módulo de formulario de contacto.

Puede diseñar el botón como desee. Cuando haya terminado, abra la configuración del módulo de botones y agregue la siguiente clase CSS:

• Clase CSS: et-show-more-toggle

Luego, cambie el texto del botón para que diga "Mostrar más".

Ahora estamos listos para agregar el código necesario para que nuestro show more funcione.

Debajo del botón, agregue un módulo de código para que podamos colocar nuestro CSS y JQuery.

Primero pegue el siguiente CSS dentro del cuadro de código asegurándose de envolver el código en las etiquetas de estilo necesarias:

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

Luego, debajo del CSS, pegue el siguiente JQuery asegurándose de envolver el código en etiquetas de script :

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

Para equilibrar nuestro diseño, duplique la columna 1 para crear otra columna idéntica. Asegúrese de eliminar la tercera columna vacía y el módulo de código adicional que se transfirió con el duplicado.

Aquí está el resultado.

Creación de un botón Mostrar más para una fila Divi

Ahora que tenemos nuestro show more toggle para un módulo Divi, construyamos sobre esto para agregar un nuevo show more toggle para alternar toda la fila.

Primero, cree una nueva fila de una columna para mantener nuestro nuevo botón.

A continuación, copie uno de los módulos de botones de mostrar más existentes y péguelo dentro de la nueva fila. Luego abra la configuración del botón y cambie la alineación del botón:

• Alineación de botones: centro

Dado que queremos apuntar a la fila como el contenido que queremos mostrar / ocultar, abra la configuración de la fila que contiene las opciones de mostrar más para los módulos del formulario de contacto. Luego agregue la siguiente clase CSS a la fila:

• et-show-more-content

Y también necesitamos agregar una clase CSS personalizada al contenedor principal de la fila (que es la sección). Abra la configuración de la sección y agregue la siguiente clase CSS:

• et-show-more-container

Aquí está el resultado.

Resultados finales

Aquí están los resultados finales de los tres programas más conmutadores que construimos.

Pensamientos finales

El propósito de este tutorial fue mostrarle algunos métodos para crear su propio show more toggle en Divi. Con suerte, uno de ellos será útil en el futuro para que no tenga que usar un complemento. Aunque no agregamos ningún diseño espectacular a estos ejemplos, no significa que no se pueda hacer. Con esta funcionalidad en su lugar, puede divertirse diseñando estos muestran más conmutadores usando el constructor Divi. O incluso puede incorporar algunos de nuestros diseños prediseñados para experimentar también.

Espero tener noticias tuyas en los comentarios.

¡Salud!