Cómo resaltar creativamente las ofertas de miembros con div

Si ofrece ofertas de miembros en su sitio, es importante asegurarse de que las personas las noten en su sitio web. Para darle un comienzo, le proporcionaremos una presentación sorprendente de la membresía que puede recrear paso a paso usando solo las opciones construidas del DIV. Combinamos una hermosa sección con módulos de propaganda que presentan a los miembros de los miembros y un botón separado que lleva a sus visitantes a la página correcta. Vista previa antes de lanzar la cabeza en el tutorial, para echar un vistazo rápidamente al diseño que recrearemos en diferentes tamaños de pantalla.
En el escritorio

En la tableta

En movil

Descargue los archivos de este tutorial para poner su mano en los archivos con imágenes gratuitas, primero deberá descargarlos usando 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 el 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Agregue un nuevo fondo de gradiente. Después de hacer esto, agregue una nueva sección, abra la configuración de la sección y aplique los siguientes antecedentes de gradiente:
Color 1: RGBA (255,255,255.0)
Color 2: # 150A56
Tipo de gradiente: lineal
Dirección de gradiente: 165 grados
Posición final: 36%
La imagen de fondo abre la imagen de fondo, cargue la imagen “home_office-39.jpg” que puede encontrar en la carpeta descargada y aplicar “multiplicar” como fondo de fondo.

Divisores Lo siguiente que haremos es agregar nuestros separadores de secciones. Usaremos el divisor superior e inferior para crear el hermoso efecto de fondo. Comience por abrir la pestaña superior y aplique la siguiente configuración:

Color divisor: RGBA (30,35,96.0.75)
Altura del divisor: 700 PX
Disposición del divisor: Contenido bajo la sección
Luego cambie a la pestaña inferior y realice los siguientes cambios:

Estilo divisor: encontrar en la lista
Color divisor: RGBA (2,0,35,0.93)
Altura del divisor: 430px
Disposición del divisor: Contenido bajo la sección
Espacio crearemos un espacio adicional en la parte superior e inferior de la sección agregando el siguiente llenado personalizado:

Revestimiento superior: 130 px
Finamiento inferior: 65 PX
Agregue la primera estructura de fila a la columna ahora que realizamos todos los cambios deseados en nuestra sección, podemos comenzar a agregar la primera fila. La estructura de la columna que necesitamos es la siguiente: Dimensión Antes de agregar cualquier módulo, haremos un pequeño cambio en la configuración de fila predeterminada. Abra la dimensión de la subcategoría en la pestaña de diseño y active la opción “Hacer todo este ancho”.

Agregue el módulo de texto de título en la configuración de texto de la columna 2 ¡Ahora podemos comenzar a agregar nuestros módulos! Usaremos solo la segunda columna de esta fila. Agregue un texto de título de título que contenga la siguiente configuración de texto:

Texto de fuente: abeezee

Tamaño del texto: 56 PX
Color de texto: # F9F9F9
La altura de la línea de texto: 1em
Orientación de texto: centro
Espacio necesitaremos un poco de espacio y en la parte superior. Es por eso que agregamos “50px” al borde superior.
Agregue el módulo de descripción de texto en la columna 2 Configuración de texto justo debajo del módulo de texto anterior, continúe y agregue uno nuevo para su descripción. Después de agregar el contenido, aplique la siguiente configuración de texto:


Tamaño de texto: 16 PX

Color de texto:
La altura de la línea de texto: 1.4em
Orientación de texto: centro
Dimensión también, cambiaremos el ancho de este módulo de texto en “70%” y activaremos el módulo central.
Agregue el módulo de texto CTA a la configuración de texto de la columna 2 Después de haber terminado con la descripción del modo de texto, continúe y agregue un módulo de texto CTA justo en él y aplique la siguiente configuración de texto:

Text -Text estilo: mayúscula

Color de texto: #ffffff
Texto de la carta de espacio: 5 PX
Orientación de texto: centro
Agregue el módulo de imagen de flecha a la columna 2 Cargue la imagen El último módulo que tendremos que agregar a esta fila es un módulo de imagen. Cargue la imagen “Arrow.png” que puede encontrar en la carpeta descargada. Dimensión Cambie el ancho de esta imagen a “13%”.
Espacio queremos que esta flecha aparezca a la misma altura que nuestro módulo de texto CTA. Es por eso que agregaremos “-100px” al borde superior.

Visibilidad Eventualmente, deshabilitaremos este módulo de imagen en la tableta y el teléfono, porque no se ajustará a esas dimensiones de la pantalla.

Agregue la estructura de la columna de la segunda fila para ofertas de membresía, necesitaremos agregar otra fila utilizando la siguiente estructura de columna:

Alineando las filas antes de agregar módulos, aplicaremos una alineación en la fila izquierda.


Dimensión y también haremos algunos cambios en la subcategoría de tamaño:

Use ancho personalizado: sí

Ancho personalizado: 1030 PX

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Agregar módulos de blurb a la columna 2 agrega texto para presentar una oferta de membresía, utilizaremos un módulo de blurbs en combinación con un módulo de botón. Comience agregando un módulo de propaganda a la segunda columna de su turno y agregue el contenido deseado.
Cargue la imagen luego, cargue la imagen “Conference_illustration_05.png” que puede encontrar en la carpeta descargada.
El color de fondo, use el “#fffff” como el color de fondo del módulo de la propaganda.

Configuración de texto de título Tendremos que hacer algunos cambios en el título de nuestro módulo de propaganda a continuación:


Fuente de peso del título: Ultra Bold

Estilo de fuente de título: mayúscula

Alineación del texto del título: Centro
Color de texto del título: # 485B90 Texto Texto del cuerpo Cambiaremos la configuración del texto de su cuerpo:
Alineación del texto del cuerpo: Centro
Tamaño del texto del cuerpo: 11 PX
Color of Body Text: # 485b90

Dimensión Continuar abriendo la dimensión de la subcategoría y realiza los siguientes cambios:
Ancho de imagen: 50%
Ancho de contenido: 250 PX
Ancho: 72% (escritorio), 50% (tableta), 99% (teléfono)

No usamos “100%” para el teléfono, lo que haría el legado “50%” de la tableta de lo contrario.
Espacio de espaciado El módulo de la propaganda es una parte muy importante de este tutorial. Vamos al borde negativo hacia arriba y hacia la izquierda en el escritorio para empujar el módulo de la propaganda hacia la izquierda y la superpone en la fila anterior. También agregaremos algunos rellenos personalizados para crear un resultado más hermoso:
Margen superior: -380px (escritorio), 0px (tableta y teléfono)
Margen izquierdo: -180px (escritorio), 35% (tableta), 20% (teléfono)
Revestimiento superior: 30 px

Junta derecha: 10 PX
Finamiento inferior: 30 px
ENLIZACIÓN IZQUIERDA: 10 PX
Siguiente borde, agregaremos “20px” a cada esquina desde la subcategoría del borde.
Box Shadow y para completar, activaremos la primera opción de sombra del cuadro.
Agregue un módulo de botón al botón de configuración de la columna 2 justo debajo del módulo de la propaganda que agregó a la segunda columna, agregue un módulo de botón. Después de agregar CTA a su botón, aplique la siguiente configuración del botón:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 14 PX

El color de texto del botón: # 485B90

El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 10 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Espacio porque presionamos el módulo de la propaganda hacia la izquierda (en el escritorio), tendremos que hacer lo mismo para el módulo de botón. Uppermark: 20 PX
Margen inferior: 50 PX (tableta y teléfono)
Margen izquierdo: -100px (escritorio), 53% (tableta), 50% (teléfono)
Revestimiento derecho: 30 PX


Revelaje izquierdo: 30 PX
Box Shadow agregaremos el primer cuadro de sombra al módulo de este botón.
Clone Blurb y el modo de botones en la columna 2 y coloque en la columna 3 Cambie la imagen y el texto ahora, módulos de blurb y módulos de botón en la segunda columna y colóquelo en la tercera columna. Utilizamos la misma imagen para este módulo de propaganda que para el módulo de propaganda que se encuentra en la primera columna.
Retire el color de fondo y agregue el fondo de gradiente Abra la configuración de los módulos individuales, elimine el color de fondo y agregue el siguiente fondo de gradiente:
Color 1: # 6F9AF1
Color 2: # 485b90

Tipo de gradiente: lineal

Dirección de gradiente: 159 grados

Cambie los colores del texto de ambos módulos y los colores de ambos módulos en “#ffffff.
Cambie el espacio del módulo de propaganda y luego, acceda a la subcategoría de espaciado del módulo de la propaganda y cambie el margen personalizado:
Up: -470px (escritorio), 0px (tableta y teléfono)
Izquierda: -260px (escritorio), 35% (tableta), 20% (teléfono)
Cambie el espacio del módulo de espacio y por último, pero no menos importante, necesitaremos cambiar el margen personalizado del módulo de botones:

Margen superior: 20 PX

Margen izquierdo: -180px (escritorio), 53% (tableta), 50% (teléfono)
Vista previa ahora, que hemos dado todos los pasos de este tutorial, para echar un vistazo final al resultado en diferentes tamaños de pantalla. En el escritorio
En la tableta

En movil