Cómo expandir y contraer texto en Divi de WordPress

3 de septiembre de 2022

Con un interruptor de leer más podemos controlarlo

Cuando tenemos toda la información de nuestro proyecto puede pasar que sea mucha información e información muy importante que no puedes recortar para acomodarla a la diagramación de nuestro template o diseño, por eso esta solución es muy practica y nos va a ayudar a conservar toda la información sin omitir ningún detalle.

En este articulo veremos primero como realizar esta acción con un modulo de texto, luego veremos como realizarlo con un modulo de anuncio

Para lograrlo vamos a manejar estos simples pasos

Vamos a agregar una clase css a nuestro modulo de texto.
Agregaremos un código a nuestra sección DIVI. Solo es copiar y pegar
Podemos personalizar nuestro código, para cambiar texto de botones e iconos
Agregares un código CSS a nuestro sitio web. Igual de sencillo al paso dos, solo copia y pega

1.Agregar Clase CSS al modulo de texto

En este paso vamos abrir nuestro modulo DIVI de texto, nos dirigimos a avanzado y en ID y clases de CSS, agregamos “pa-toggle-text” en el campo clase CSS

2. Agregar fragmento de JQuery al sitio web

Ahora vamos agregar este fragmento de código en nuestro DIVI, nos dirigimos a DIVI>Integración e insertamos el código en el <head>

jQuery(“.pa-toggle-text”).each(function() {
            jQuery(this).append(‘<div class= “pa-text-expand-button”><span class= “pa-text-collapse-button”>’ + text_expand_text + ‘ <span class= “pa-text-toggle-icon”>’ + text_expand_icon + ‘</span></div>’);
            jQuery(this).find(“.pa-text-collapse-button”).on(“click”, function() {
                jQuery(this).parent().siblings(“.et_pb_text_inner”).toggleClass(“pa-text-toggle-expanded”);
                if (jQuery(this).parent().siblings(“.et_pb_text_inner”).hasClass(“pa-text-toggle-expanded”)) {
                    jQuery(this).html(text_collapse_text + “<span class= ‘pa-text-toggle-icon’>” + text_collapse_icon + “</span>”);
                } else {
                    jQuery(this).html(text_expand_text + “<span class= ‘pa-text-toggle-icon’>” + text_expand_icon + “</span>”);
                }
            })
        })
    }) 
</script>

3. Personaliza el código

Es el momento de personalizar con las variables var que se encuentran en el código es muy sencillo es solo de reemplazar las palabras “Expandir para leer más” o “Contraer para leer menos” sientete libre de utilizar el texto que quieras.

Ahora también puedes cambiar los iconos en las líneas 3 y 4 de las variables, DIVI tiene una galería de iconos en la cual puedes usar con tal libertad, encuéntralas dando clic aquí

4. Agregar CSS a tu sitio web

Por último vamos a agregar este código CSS en nuestro DIVI, para esto nos dirigimos a nuestro DIVI del WordPress en la sección General, ahora nos dirigimos a lo ultimo donde se encuentra el CSS personalizado y copiamos y pegamos el código que se encuentra a continuación

/*collpse and set the height of the toggle text*/

.pa-toggle-text .et_pb_text_inner {
	max-height: 200px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}

/*add gradient to the collapsed text*/

.pa-toggle-text .et_pb_text_inner:after {
	content: “”;
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}

/*style the expand text link*/

.pa-toggle-text .pa-text-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #00d263!important;
}

/*change the curor to a pointed when hovering over the expand text link*/

.pa-toggle-text .pa-text-expand-button span {
	cursor: pointer;
}

/*define the font family for the toggle icon*/

.pa-toggle-text .pa-text-expand-button .pa-text-toggle-icon {
	font-family: ETMODULES, “sans-serif”;
}

/*set the max height and transition of the expanded toggle*/

.pa-toggle-text .pa-text-toggle-expanded {
	max-height: 2000px;
	transition: max-height 0.3s ease-in;
}

/*hide the gradient when the toggle is expanded*/

.pa-toggle-text .pa-text-toggle-expanded.et_pb_text_inner:after {
	background: none;
}

Usando para el modulo de anuncio

Para este proceso vamos a usar el mismo procedimiento solo que en la linea de clase CSS vamos a colocar “pa-toggle-blurb”

JQuery para el módulo de anuncio

jQuery(“.pa-toggle-blurb”).each(function() {
            jQuery(this).append(‘<div class= “pa-blurb-expand-button”><span class= “pa-blurb-collapse-button”>’ + blurb_expand_text + ‘ <span class= “pa-blurb-toggle-icon”>’ + blurb_expand_icon + ‘</span></div>’);
            jQuery(this).find(“.pa-blurb-collapse-button”).on(“click”, function() {
                jQuery(this).parent().siblings(“.et_pb_blurb_content”).find(“.et_pb_blurb_description”).toggleClass(“pa-blurb-toggle-expanded”);
                if (jQuery(this).parent().siblings(“.et_pb_blurb_content”).find(“.et_pb_blurb_description”).hasClass(“pa-blurb-toggle-expanded”)) {
                    jQuery(this).html(blurb_collapse_text + “<span class= ‘pa-blurb-toggle-icon’>” + blurb_collapse_icon + “</span>”);
                } else {
                    jQuery(this).html(blurb_expand_text + “<span class= ‘pa-blurb-toggle-icon’>” + blurb_expand_icon + “</span>”);
                }
            })
        })
    }) 
</script>

CSS para el módulo el modulo de anuncio

/*collpse and set the height of the toggle text*/

.pa-toggle-blurb .et_pb_blurb_description {
	max-height: 200px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}

/*add gradient to the collapsed text*/

.pa-toggle-blurb .et_pb_blurb_description:after {
	content: “”;
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}

/*style the expand text link*/

.pa-toggle-blurb .pa-blurb-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #00d263!important;
	font-weight: bold;
}

/*change the curor to a pointed when hovering over the expand text link*/

.pa-toggle-blurb .pa-blurb-expand-button span {
	cursor: pointer;
}

/*define the font family for the toggle icon*/

.pa-toggle-blurb .pa-blurb-expand-button .pa-blurb-toggle-icon {
	font-family: ETMODULES, “sans-serif”;
}

/*set the max height and transition of the expanded toggle*/

.pa-toggle-blurb .pa-blurb-toggle-expanded {
	max-height: 2000px;
	transition: max-height 0.3s ease-in;
}

/*hide the gradient when the toggle is expanded*/

.pa-toggle-blurb .pa-blurb-toggle-expanded.et_pb_blurb_description:after {
	background: none;
}

Apoya el canal y ayuda a que este contenido siga creciendo.

0 comentarios

Enviar un comentario Cancelar la respuesta

Cargando canal ....

Todas las semanas subimos nuevo video

Regístrate gratuitamente y accede a todo el contenido

AB