homefinance blog
La gente se relaciona con otras personas. Por lo tanto, en casi cualquier sitio web que visite, verá caras que aparecen. De clientes anteriores a miembros del equipo y más; Cuanto más rápido se los muestre a los clientes y a las personas detrás de su empresa, mayores serán sus posibilidades de convencer a su empresa, marca o producto. En esta publicación, nos centraremos en presentar a sus clientes de una manera hermosa y avanzada. ¡Podrá descargar el archivo JSON de forma gratuita! ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de exhibición gratuito para el diseño de desplazamiento / haga clic para poner su mano en su diseño gratuito de desplazamiento / clic para presentar al cliente, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección Lo primero que tendrá que hacer es agregar una nueva sección habitual a la página en la que trabaja.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión Antes de agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina el llenado predeterminado e inferior de la siguiente fila.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Configuración de la columna 2 Continuar abriendo la configuración de la segunda columna.
Espacio Agregar algunos valores de llenado personalizados en la columna.
Revestimiento superior: 9VW
Revestimiento inferior: 9VW
Junta izquierda: 8VW
Junta derecha: 8VW
Agregue un módulo de texto a la columna 1 Agregar contenido H3 y párrafo Después de haber completado la configuración de fila y columna, continúe agregando un módulo de texto a la columna 1. Agregue la información del cliente al cuadro de contenido. A continuación y aplique el siguiente fondo de gradiente:
Color 1: RGBA (43,135.218.0)
Color 2: RGBA (0.0,0,0.55)
Coloque el gradiente sobre la imagen de fondo: sí
Carga de imagen de fondo y una imagen de fondo.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Lato
Color de texto: #DBDBDB
Tamaño de texto: 1VW (escritorio), 1.8VW (tableta), 2.3VW (teléfono)
Altura de la línea de texto: 1.5VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
Texto 3 Configuración Modificar y Configuración de texto H3.
3 Fuentes de fuentes: PlayFair Display
Título 3 Fuente de peso: Bold
Frup 3 color de texto: #ffffff
Texto 3 Sección: 3VW (escritorio), 4VW (tableta), 5VW (teléfono)
Rúbrica 3 altura de línea: 1.6em
El espacio continúa yendo a la configuración de espaciado y diseñando la forma y la posición del módulo en consecuencia:
Margen superior: 9VW
Margen inferior: 9VW
Margen izquierdo: 7VW (escritorio), 16VW (tableta), 17VW (teléfono)
Margen derecho: 7VW (escritorio), 16VW (tableta), 17VW (teléfono)
Revelaje superior: 32VW (escritorio), 55VW (tableta), 49VW (teléfono)
Bajo forro: 3VW (escritorio), 6VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Revestimiento derecho: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Box Shadow también agregue un tono de caja de color.
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 0px
Poder de extensión de la sombra de la caja: 7vwcului sombra: # ffcf0f
ID CSS Complete la configuración del módulo agregando una ID de CSS.
ID CSS: Photo-Display-1
Clone el módulo de texto cinco veces después de haber completado el primer módulo de texto, continuar y clon 5 veces.
Cambie el contenido y la imagen de fondo de cada duplicado Cambie el contenido y la imagen de fondo de cada duplicado.
Cambie el color de las sombras para cada duplicado con la sombra de la caja.
Shadow Color: # 9f89ed
Cambie la ID CSS de cada clase duplicada y agregue CSS Cada módulo de texto en la columna 1 necesita una ID CSS única. El primer módulo de texto en la columna contiene el ID CSS “Photo-Display-1”, el segundo necesita “Photo-Display-2”, el tercero “Photo-Display-3”, etc. Agregue una clase CSS a cada módulo de texto duplicado (asegúrese de no agregar uno al módulo de texto original).
ID de CSS: Photo-Display-2 (de 2 a 6)
Clase CSS: Foto-Hide-First (cada módulo de texto en la columna 1 excepto el primero)
Agregue el módulo de texto no. 1 En la columna 2 Agregue el contenido H2 Después de haber completado los 6 módulos en la columna 1, puede pasar a la segunda columna. Allí, el primer módulo que necesitamos es un modo de texto con contenido H2.
Configuración de texto H2 Acceda a la pestaña Diseño y modifique la configuración de texto H2 en consecuencia:
Título 2 Fuente: PlayFair Display
2 Color de texto: # 636363
2 Tamaño de texto: 3VW (escritorio), 6VW (tableta y teléfono)
Rúbrica 2 Espaciación de letras: 0.1VW
Título 2 Altura de la línea: 1.2em
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto en la columna 2 con un contenido de párrafo.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia: Fuente Texto: Lato
Alineación de texto: justificar
Tamaño de texto: 0.9VW (escritorio), 2VW (tableta), 2.7VW (teléfono)
La altura de la línea de texto: 2.1em
La esparda modifica los valores de Marke en las configuraciones de espaciaciones.
Margen superior: 2VW
Margen inferior: 2 VW
Margen derecho: 7VW
Agregue el módulo divisor al interruptor de visibilidad de la columna 2 al siguiente módulo, que es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea va a la pestaña de diseño y cambia el color de la línea.
Color de línea: # 636363
Extienda y luego cambie los valores de margen para diferentes tamaños de pantalla.
Margen inferior: 7VW
Margen izquierdo: 14VW (escritorio), 39VW (tableta), 38VW (teléfono)
Margen derecho: 14VW (escritorio), 39VW (tableta), 38VW (teléfono)
Rotar la transformación Gire el módulo divisor.
Izquierda: 90 grados
Transforme la traducción y reposicione utilizando algunos valores de traducción traducidos en diferentes tamaños de pantalla.
Derecha: 2VW (escritorio), 3VW (tableta y teléfono)
La parte inferior: -17.3VW (escritorio), -43VW (tableta y teléfono)
Agregue el módulo de texto no. 3 en la columna 2 agrega contenido La siguiente forma en que necesitamos es otro módulo de texto. Asegúrese de agregar el nombre del cliente apropiado al cuadro de contenido (coincida con el primer módulo de texto en la columna 1).
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Lato
Text -Text estilo: mayúscula
Tamaño de texto: 1.3VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Texto de la carta de espacio: 1 PX
La altura de la línea de texto: 1.2em
Espaciado Agregar algunos bordes superiores e inferiores personalizados. Matrimonio superior: 1em
Margen inferior: 1em
ID CSS Vaya a la pestaña Design y agregue una ID de CSS. Asegúrese de que el número sea el mismo que el módulo de texto apropiado en la columna 1.
ID CSS: Photo-Hick-1
Clon el módulo de texto no. 3 Cinco veces después de haber completado el primer módulo de texto del cliente, clon 5 veces.
Cambie el contenido de cada duplicado (coincida con los módulos de texto en la columna 1) Cambie el nombre del cliente a cada módulo de texto duplicado.
Cambie la ID CSS de cada duplicado y coincida con la ID CSS de cada duplicado con el módulo de texto en la columna 1.
ID CSS: Photo-Hick-2 (de 2 a 6)
Agregue el módulo de código # 1 en la columna 2 Ingrese el código CSS La última parte de este tutorial se centra en la funcionalidad de Hover. Agregue un módulo de primer código en la columna 2 e ingrese las siguientes líneas de código CSS:
.photo-hide-forst {
Pantalla: ninguno;
}
Agregue el módulo de código # 2 en la columna 2. Ingrese el código jquey Agregue otro módulo de código justo debajo del anterior e ingrese el siguiente código jQuey para que la función flotante funcione:
JQuery (function ($) {
$ (‘#Photo-Click-1’). CSS ({‘Color’: ‘#ffcf0f’, ‘Font-Weight’: ‘Bold’, ‘Padding-Left’: ‘0.5em’);
$ (‘[id*= “foto-click”]’). Hover (function () {
lima selector1 = $ (this) .attr (‘id’). reemplazar (‘hacer clic’, ‘visualización’);
var $ photo = $ (‘#’ + selector1);
Var $ photocolor = $ photo.css (‘box-shadow’). Reemplazar (/^.* (rgba? ([)]+).* $/, ‘$ 1’)
$ Photo.Siblings (). Hide ();
$ Photo.Show ();
$ (‘[id*= “foto-clic”]’).
$ (this) .css ({‘color’: $ Photocolor, ‘Font-Weight’: ‘Bold’, ‘Padding-Left’: ‘0.5em’);});
});
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear un cliente hermoso para los clientes que puede usar en cualquier sitio web que cree. Combinamos las opciones de división Built -in con un código JQuey para el enfoque de trabajo. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.
