Cómo crear un módulo de persona con biografía al hacer clic

En esta publicación, le mostraremos cómo crear un módulo de persona con biografía al hacer clic. Tan pronto como haga clic en el módulo de otra persona en esa misma fila, el texto dentro de la biografía cambiará. En cualquier momento, puede cerrar la biografía haciendo clic en el módulo de persona nuevamente.

Puede usar esto para, por ejemplo, mostrar información adicional sobre sus empleados en el sitio web de su empresa. El concepto le ayuda a hacer dos cosas: interactuar con sus visitantes y guardar un lugar en su sitio web. La única vez que se mostrará la biografía es una vez que un visitante muestre interés y decida hacer clic en los elementos dentro del Módulo de persona.

Módulo de persona de resultado con biografía al hacer clic

Antes de sumergirnos en los diferentes pasos que debe seguir para lograr un Módulo de persona con biografía al hacer clic, echemos un vistazo al resultado final en el escritorio:

y el resultado final en dispositivos móviles y tabletas:

Con el móvil, si se abre una biografía, las otras dos se cerrarán automáticamente. Siempre tendrás una sola sección de biografía abierta, aunque cada biografía tiene su propia sección.

Módulo de persona con biografía en Click para escritorio

Suscríbete a nuestro canal de Youtube

Para que todo funcione sin problemas, necesitaremos hacer dos versiones: una para escritorio y otra para tabletas y teléfonos. Cada una de estas versiones necesitará su propio código jQuery. Comenzaremos con la versión de escritorio y en la siguiente parte de la publicación le mostraremos cómo hacer la versión para tabletas y teléfonos.

Agregar la sección estándar de persona con una fila de tres columnas

Lo primero que tendremos que hacer es agregar una sección que contenga los módulos de persona.

Abra una nueva página (o la página donde le gustaría agregar el módulo de persona con biografía) y agregue una nueva sección estándar. Dentro de esa sección, coloque una fila de tres columnas. Por supuesto, también podría usar otro número de columnas, pero el código que usaremos tiene en cuenta los módulos de 3 personas. Si desea crear lo mismo para otros tipos de filas, deberá realizar algunas modificaciones en el código jQuery que proporcionaremos más adelante en esta publicación.

Configuración de filas

Abra la configuración de la fila y dentro de la pestaña de contenido, agregue '# e5e5e5' como el color de fondo de cada columna.

Luego, pase a la pestaña Avanzado e inserte la siguiente sombra de cuadro en el Elemento Principal de cada una de las tres filas:

Agregar un módulo de persona

Lo siguiente que deberá hacer es agregar un módulo de persona a la primera columna de la fila.

Pestaña de contenido

Dentro de la pestaña Contenido de ese módulo, escriba la información y los enlaces de las redes sociales y cargue la imagen.

Lengüeta avanzada

No vamos a realizar ninguna modificación en la pestaña Diseño de este módulo (siéntase libre de realizar cambios en la apariencia después). En su lugar, vamos a la pestaña Avanzado de inmediato, donde agregaremos la misma sombra de cuadro que agregamos a las columnas de la fila, a la imagen del miembro.

Clonar el módulo de persona

Lo siguiente que deberá hacer es clonar el módulo de persona dos veces y colocarlo en las otras dos columnas. Tendremos que volver a esta sección para agregar las diferentes clases de CSS. Pero antes de hacer eso, primero agregaremos la sección de biografía.

Agregue la sección Bio Standard con una fila de ancho completo

Agregue otra sección estándar justo debajo de la sección anterior que ha creado. En esta sección, necesitaremos agregar los diferentes módulos de texto que están vinculados a los distintos módulos de persona. Abra la configuración de la sección y use el color '# a0a0a0' como color de fondo.

Agregar dos módulos de texto

Dependiendo de cuántos módulos de texto desee que tenga la biografía del módulo de persona, puede agregar módulos de texto. En este caso, agregaremos dos módulos de texto por módulo de persona.

Primer módulo de texto

Escriba algo de texto en el primer módulo de texto y vaya a la pestaña Diseño. Dentro de la pestaña Diseño, realice los siguientes cambios en la subcategoría Texto:

• Orientación del texto: centro
• Tamaño de fuente de texto: 31
• Color del texto: #FFFFFF
• Altura de la línea de texto: 1.7em

Segundo módulo de texto

Agregue otro módulo de texto y realice los siguientes cambios en la subcategoría de texto de la pestaña Diseño:

• Orientación del texto: centro
• Tamaño de fuente de texto: 16
• Color del texto: #FFFFFF
• Altura de la línea de texto: 1.7em

Clonar cada módulo dos veces

Estos dos módulos de texto serán los mismos para cada una de las BIOS. Es por eso que debe clonar cada uno de los módulos de texto dos veces. Así es como debería verse la estructura final en el back-end de la página:

Las diferentes clases de CSS

Asignar clases CSS a los módulos de persona

Vaya a la pestaña Avanzado de cada uno de los Módulos Persona y asigne las siguientes clases CSS:

• Módulo en primera persona: person1
• Módulo de segunda persona: person2
• Módulo de tercera persona: person3

Asignar clase CSS a la sección

Abra la configuración de la sección donde se colocan sus biografías. Vaya a la pestaña Avanzado y escriba "sección_1" en la clase CSS.

Asignar clases CSS a los módulos de texto

Ahora, agregue las clases CSS a los módulos de texto que ha creado de la siguiente manera:

• Vinculado al módulo de primera persona: div_text_1
• Vinculado al segundo módulo de persona: div_text_2
• Vinculado al módulo de tercera persona: div_text_3

Agregar código CSS de visualización a la sección y todos los módulos de texto

El siguiente paso que deberá hacer es ir a la pestaña Avanzado de la sección y todos los Módulos de texto. Luego, agregue la siguiente línea de código CSS al elemento principal de la sección:

display: none;

Desactivar en teléfono y tableta

Ahora, desactive las dos secciones que ha creado para dispositivos móviles y tabletas.

Módulo de persona con biografía al hacer clic para tableta y teléfono

Ahora que le hemos mostrado cómo crear el módulo de persona con biografía al hacer clic para escritorio, también le mostraremos cómo hacerlo para tableta y teléfono. Ya hemos deshabilitado las secciones anteriores para teléfonos y tabletas. Así es como se ve el diseño del escritorio en el backend:

Y esta es la estructura que necesitamos para la versión de tableta y teléfono.

Agregar seis secciones nuevas

Entonces, continúe y agregue seis nuevas secciones a la página. Luego, clone los módulos de persona y coloque cada uno en una sección individualmente. Asegúrate de dejar una sección en el medio, ahí es donde eventualmente vendrá la biografía.

A continuación, agregue clonar los módulos de texto y colóquelos en la sección debajo de cada sección que contiene un módulo de persona. La biografía, de forma predeterminada, se mostrará debajo del Módulo de persona en dispositivos móviles y tabletas.

.

Las diferentes clases e ID de CSS

Una vez que haya colocado todas las secciones y módulos en su lugar, es hora de comenzar a agregar las clases CSS.

Asignar clases CSS a los módulos de persona

Comience abriendo cada módulo de persona individualmente y cambiando las clases de CSS en la pestaña Avanzado a:

• Módulo en primera persona: mobile_person1
• Módulo de segunda persona: mobile_person2
• Módulo de tercera persona: mobile_person3

Asignar clases CSS a las secciones

A continuación, abra todas las diferentes secciones de biografía y asigne lo siguiente a cada una de ellas:

• Primera sección de biografía: section_mobile_1
• Segunda sección de biografía: secton_mobile_2
• Tercera sección Bio: section_mobile_3

Asignar clases CSS a los módulos de texto

Las últimas clases de CSS que necesitarás para dar un lugar son las vinculadas a los Módulos de texto en las diferentes secciones de biografía. De acuerdo con la sección de biografía, asigne las siguientes clases CSS a los módulos de texto dentro de esa sección:

• Vinculado al módulo de primera persona: div_mobile_text_1
• Vinculado al segundo módulo de persona: div_mobile_text_2
• Vinculado al módulo de tercera persona: div_mobile_text_3

Agregar código CSS de visualización a las secciones

Continuando, tendrás que hacer invisibles todas las secciones de biografía. Vaya a la pestaña Avanzado de cada una de las secciones y copie y pegue la siguiente línea de código CSS en el Elemento Principal:

display: none;

Asegúrese de eliminar esta línea de código CSS en el elemento principal de cada módulo de texto. En la versión de escritorio, necesitábamos hacerlos invisibles, pero eso no es necesario para dispositivos móviles y tabletas.

Desactivar en el escritorio

Ahora, después de haber realizado todas las modificaciones, queda una cosa por hacer antes de agregar el código: deshabilite las tres secciones de biografía en el escritorio. Continúe y abra cada una de las secciones y vaya a la pestaña Avanzado. Dentro de la subcategoría Visibilidad de la pestaña Avanzado, desactive las secciones en el escritorio.

Agregar el código jQuery

Ahora que hemos realizado todos los cambios prácticos en el constructor Divi, es hora de pasar al último paso; agregando el código jQuery.

Agregar un módulo de código nuevo

La forma más sencilla de agregar el código a su página es a través del Módulo de código. Probablemente usará este módulo de persona con biografía al hacer clic en una sola página. Al usar un módulo de código, se asegurará de que el código solo se cargue cuando alguien esté en esa página. Copie y pegue los dos códigos separados de jQuery en el mismo módulo de código.

Coloque el código jQuery de escritorio en su módulo de código

Copie y pegue las siguientes líneas de código CSS en su Módulo de código para hacer que la versión de la biografía de escritorio al hacer clic funcione:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Coloque el código jQuery de la tableta y el teléfono en su módulo de código

Y las siguientes líneas de código para que la versión para tableta y teléfono funcione:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Resultado final

Echemos un último vistazo al resultado una vez que haya seguido todos los pasos a lo largo de esta publicación. Así es como se verá en el escritorio:

Y en dispositivos móviles y tabletas:

Terminando

En esta publicación, le mostramos cómo crear un módulo de persona con biografía que se oculta y se muestra al hacer clic. Al aplicar este método, podrá guardar un lugar en su sitio web y solo mostrarlo a sus visitantes una vez que hayan mostrado interés. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!