Cómo transformar su módulo de tiempo

Una de las cosas interesantes sobre la construcción de diseños con Div son las muchas formas en que podemos abordar un diseño. Los módulos que incluyen contenido son un excelente ejemplo. Podemos usar sus opciones de contenido o usarlas con otros módulos para crear algunos modelos únicos. Por ejemplo, las combinaciones de módulos nos permiten crear elementos pegajosos. En este artículo, veremos cómo transformar su módulo de testimonio de manera pegajosa mientras dejamos normalmente el contenido del testimonio. La vista previa es una mirada a lo que haremos. La versión móvil de este diseño no será pegajosa, por lo que solo muestro la versión de escritorio.
Ejemplo del modo adhesivo para mi testimonio para mi ejemplo, uso la página de destino en el paquete de diseño de servicios eléctricos gratuitos, que está disponible en el DIV. Esta página ya tiene una sección de testimonios en la parte inferior de la apariencia, pero tiene un diseño completamente diferente. Reemplazaré los testimonios en esa sección y reflejaré el estilo del nuevo diseño. Mantendré el título, pero lo recrearé para mostrar la configuración.

Para este tutorial, construiré el testimonio utilizando dos módulos. Usaré el módulo de testimonio para mostrar la imagen, el nombre, el título del trabajo y la empresa. Para el contenido del testimonio, usaré un módulo de texto. El módulo de texto se ejecutará normal. El módulo de testimonio permanecerá vigente a medida que el usuario ejecute hasta que llegue al final del testimonio. Luego, el módulo de testimonio se ejecutará con el módulo de texto.
Cree primero el título del testimonio adhesivo, cree una nueva sección y agregue una sola columna. Esta fila tendrá el título, que se centrará.

Modo de texto de título Luego, agregue un módulo de texto para el título. Luego abra la configuración del módulo de texto. Cambie el texto al Título 3 y agregue el título al Editor de contenido del cuerpo.

Texto: Título 3
Contenido: clientes felices
Configuración de diseño luego acceda a la pestaña de diseño. Establezca la alineación del texto en el centrado.

Alineación de texto: centrado
Seleccione H3 para el texto del título. Elija Chakra Petch para la fuente. Establezca el peso en negrita y en color a negro.

Fuente: chakra petch
Peso: en negrita
Color: #000000
Finalmente, elija el icono de la tableta para el tamaño de texto y configure el tamaño del escritorio en 50px, tamaño de la tableta a 28px y tamaño del teléfono a 20px. Cierre la configuración del módulo.

Tamaño: escritorio de 50px, tableta 28px, teléfono20px
Agregue una fila para el primer testimonio y luego, agregue una fila 2/3, 1/3 bajo el título. Esta línea tendrá el primer testimonio.

Configuración de fila Abra la pestaña de diseño y active las alturas de la columna.

Alturas de columna de ecualización: sí
Configuración Abra la configuración para la primera columna con la configuración de la fila.

Desplácese hacia abajo hasta los estilos de borde y seleccione el estilo superior. Cambie el ancho a 2px y el color a #FFD600. Cierre la configuración de la fila. Esto agregará una línea amarilla sobre el testimonio, como el testimonio original que reemplacé.

Estilos de borde: arriba
El color del marco superior: #ffd600
Ancho: 2px
El módulo de testimonio adicional agregará el módulo de texto para el contenido del testimonio. Agregue un módulo de texto a la columna izquierda debajo de la línea amarilla.

Ingrese el contenido de su testimonio en el editor de contenido.

Luego acceda a la pestaña de diseño. Elija Chakra Petch para la fuente. Ajuste de peso en negrita y color a negro. Para el tamaño del texto, elija 30px para escritorio y 14px para tableta. La configuración del teléfono seguirá automáticamente la tableta, por lo que no necesitaremos cambiarla. Establezca la altura de la línea de texto en 2EM. Esto crea un testimonio impreso gigantesco que atraerá la atención.

Peso: en negrita
De color negro
Tamaño: escritorio 30px, tableta 14px
Altura de línea: 2em
Desplácese hacia abajo en la alineación del texto y elija centrado. Cierre la configuración del módulo de texto.
Alineación: centrado

Configuración para el módulo de testimonio Luego, agregue un módulo de testimonio a la columna derecha. Esto será pegajoso y mostrará el nombre de la persona, el nombre de la compañía, el título del trabajo y la imagen.
Configuración de contenido Abra la configuración del módulo y agregue el contenido del testimonio. Deja el contenido del cuerpo vacío. Usé el módulo de texto para eso.

Autor


Título profesional
Compañía
Imagen
Desplácese hacia abajo hacia el fondo y colóquelo en blanco.
Antecedentes: #ffffff

Luego seleccione el icono PIN. Esta es la versión pegajosa del fondo, que permitirá que el fondo cambie su color cuando el módulo se vuelva pegajoso. Elija negro para el color de fondo.
Color de fondo de palo: #000000

El icono citado entonces, vaya a la pestaña Design. Elija #FFD600 para el color del icono citado.
#FFD600

Imagen desplácese hacia abajo hasta la imagen y establezca el ancho y la altura en 150 px. Cambie las esquinas redondeadas a 0px.
Ancho de imagen: 150px

Esquinas redondeadas: 0px
El texto desplácese hacia abajo hasta la alineación del texto y elija la opción enfocada. Esto concentra el nombre del autor, el título del trabajo y el texto del nombre de la empresa.
Alineación de texto: centrado

El texto del autor bajo el texto del autor, elija Chakra Petch para la fuente y establezca el peso en negrita y centrado para la alineación. Elija negro para el color habitual. Seleccione el icono de pin y configure el color pegajoso en #FFD600. Establezca el tamaño del escritorio en 20 px y el tamaño de la tableta en 14 px.
Fuente: chakra petch

Color de texto normal: negro
El color del texto fijo: #ffd600
Tamaño: escritorio 20px, tableta 14px
Posicione el texto y luego, desplácese para colocar el texto. Elija EXO para la fuente. Seleccione negro para el color del texto ordinario. Haga clic en el icono de pin y configure el color fijo en blanco.
FUENTE: EXO

Color de texto normal: #000000
El color del texto fijo: #ffffff
El texto de la empresa se desplaza hacia abajo hasta el texto de la empresa. Elija EXO para la fuente. Seleccione negro para el color del texto ordinario. Haga clic en el icono de pin y configure el color fijo en blanco.
FUENTE: EXO

Color de texto normal: #000000
El color del texto fijo: #ffffff
Box Shadow Scroll a Box Shadow y seleccione la primera opción.
Box Shadow: la primera opción de sombra

Efectos, en última instancia, acceda a la pestaña avanzada y se extiende hacia abajo a los efectos del desfile. Seleccione Desktop y elija Stick a la parte superior para una posición pegajosa. Establezca el espacio de grabación en 50px. Establezca el elemento pegajoso desde abajo en la columna. Esto le dice al módulo cómo y dónde pegarse.
Posición pegajosa: pegue la parte superior

Offset Sticky superior: 50px
Elemento lipídico a continuación: columna
Seleccione el icono de la tableta para la posición atascada y elija No pegar. Esto evita que el módulo se pegue a la tableta y los dispositivos telefónicos. Cierre la configuración del módulo.
Puesto publicado: No pegar

Ahora, cuando ejecuta, el módulo de testimonio se adhiere a la parte superior de la pantalla y cambia su color.
Una vez que el módulo se alinea con la parte inferior de la columna, tiene lugar con la columna.

Duplicar la primera fila de testimonio adicional, crearemos segundo copiando la primera fila y por cambios. Coloque el cursor en una fila y haga clic en el icono duplicado.

Finalmente, abra el texto y los módulos de testimonio en una fila y reemplace el contenido anterior con el nuevo contenido de testimonio. Después de haber realizado cambios, cierre los módulos y guarde la página. Agregue más testimonios repitiendo el proceso de duplicación. Ahora tiene una sección interesante de testimonios pegajosos con dos testimonios que se destacan y se ven geniales.

Resultados de los pensamientos finales Esta es nuestra forma de transformar su módulo de división. La configuración de la división puede hacer cualquier elemento pegajoso. Al usar módulos juntos, como módulos de contenido y módulos de testimonio para información de soporte, puede crear algunos modelos interesantes. Los testimonios que creamos aquí son solo un ejemplo de uso juntos de configuración de Divic y Stick. Queremos escuchar de ti. ¿Utiliza las opciones adhesivas para el módulo de testimonio de la división? Cuéntanos sobre tu experiencia en comentarios.