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 nuevamente en el módulo de persona.
Puede usar esto para, por ejemplo, mostrar información adicional sobre sus empleados en el sitio web de su empresa. El concepto te ayuda a hacer dos cosas: interactuar con tus visitantes y ahorrar espacio en tu 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 resultados 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 móvil y tablet:
Con el móvil, si se abre una biografía, las otras dos biografías 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 clic 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.
Agregue la sección estándar de la persona con una fila de tres columnas
Lo primero que debemos hacer es agregar una sección que contenga los Módulos de personas.
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 fila
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, vaya 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 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éntete libre de realizar cualquier cambio 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 línea de texto: 1,7 em
Segundo módulo de texto
Agregue otro Módulo de texto y realice los siguientes cambios en la subcategoría 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 línea de texto: 1,7 em
Clonar cada módulo dos veces
Estos dos Módulos de Texto van a ser iguales para cada una de las bios. Por eso debes clonar dos veces cada uno de los Módulos de Texto. Así es como debería verse la estructura final en el back-end de la página:
Las diferentes clases de CSS
Asigne clases de CSS a los módulos de persona
Vaya a la pestaña Avanzado de cada uno de los Módulos de Persona y asigne las siguientes clases de CSS:
- Módulo de 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.
Asigne 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 la primera persona: div_text_1
- Vinculado al módulo de la segunda persona: div_text_2
- Vinculado al módulo de tercera persona: div_text_3
Agregue el 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:
|
01
|
display: none; |
Deshabilitar en teléfono y tableta
Ahora, deshabilite 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 mostramos 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éfono y tableta. 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.
Añadir seis nuevas secciones
Entonces, continúa y agrega 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 llegará 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 de CSS.
Asigne clases de 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 para:
- 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 de biografía: section_mobile_3
Asigne 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 la biografía. De acuerdo con la sección de biografía, asigne las siguientes clases de CSS a los módulos de texto dentro de esa sección:
- Vinculado al módulo de la primera persona: div_mobile_text_1
- Vinculado al módulo de la segunda 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 que todas las secciones de biografía sean invisibles. Ve a la pestaña Avanzado de cada una de las secciones y copia y pega la siguiente línea de código CSS en el Elemento Principal:
|
01
|
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.
Deshabilitar en el escritorio
Ahora, después de haber realizado todas las modificaciones, queda una cosa por hacer antes de agregar el código: deshabilitar 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, deshabilite las secciones en el escritorio.
Agregue 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 nuevo módulo de código
La forma más fácil 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 biografía de escritorio funcione en la versión de clic:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<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 funcione la versión para tablet y teléfono:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<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 hayas seguido todos los pasos a lo largo de esta publicación. Así es como se verá en el escritorio:
Y en móvil y tablet:
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 mostrárselo 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úrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!