Cómo modelar una hermosa mesa de precios en la división

Las tablas de precios son a menudo el CTA principal de una página. Es por eso que es importante para peluquería adecuada. Con Div, puede tomar muchas líneas y crear tablas de precios exactamente como imagina. Para darle algo que pensar, hemos creado una increíble tabla de precios que puede usar para cualquier tipo de sitio web en el que esté trabajando. Lo guiaremos creando el resultado de A a Z usando solo las opciones incrustadas del DIV. ¡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 las imágenes de forma gratuita para poner sus manos en las imágenes utilizadas en este tutorial, primero deberá descargarlo 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! ¡Cómo modelar una hermosa mesa de precios en Div. Suscríbase a nuestro canal de YouTube para comenzar a crear! Agregue una nueva sección de fondo de gradiente Cree una nueva página y agregue una sección regular utilizando el siguiente fondo de gradiente:
Color 1: #ffffff
Color 2: # 353272
Posición inicial: 50%
Posición final: 50%
Extienda luego, acceda a la configuración de espaciado de la sección y cambie el margen personalizado y los valores de llenado.

Margen inferior: 50 px (escritorio), 20 px (tableta y teléfono)
Margen izquierdo: 50 px (escritorio), 20 px (tableta y teléfono)
Margen derecho: 50 px (escritorio), 20 px (tableta y teléfono)
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva fila a la estructura de la columna después de haber terminado de cambiar la configuración de la sección, puede continuar y agregar una nueva fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de llenado personalizados.

Revestimiento superior: 94 PX
Revestimiento inferior: 177 PX
ENLIZACIÓN IZQUIERDA: 150 PX (escritorio), 30 px (tableta y teléfono)
Revestimiento derecho: 150 PX (escritorio), 30 px (tableta y teléfono)
Columna 1, 2 y 3 Reinicio izquierdo: 10 PX
Columna 1, 2 y 3 revestimiento derecho: 10 px
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido es hora de comenzar a agregar módulos. Personalizamos la tabla de precios que queremos crear usando diferentes módulos. El primer módulo que necesitamos es un módulo de texto. Agregue el nombre del primer tipo de miembro al cuadro de contenido. Wallpaper después de haber agregado el contenido, acceder a la configuración de fondo y agregar un color de fondo blanco.

Color de fondo: #ffffff

La imagen de fondo va a la imagen de fondo y cargue el archivo “Divi-Beautiful-Paring-Table-Background-Pattern-1.png” que puede encontrar en la carpeta de descarga que se compartió al comienzo de esta publicación.
Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: el centro superior
Repetir la imagen de fondo: sin repetición
Configuración de texto Cambie la configuración de texto a continuación.
El peso de la fuente de texto: Ultra Bold

Color de texto: #ffffff
Tamaño del texto: 80 PX
Texto de la carta de espacio: -3px
La altura de la línea de texto: 1em
Espacio y agregue algunos valores de margen y llenado personalizados.
Margen superior: 5VW (escritorio), 0VW (tableta y teléfono)

Revestimiento superior: 20 px
Finamiento inferior: 200 PX
El borde continúa agregando “20 PX” a las esquinas superior izquierda y derecha.
Box Shadow Además, dale al módulo de texto una sombra de cuadro sutil.

Box Shadow Posición vertical: -20px

Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -10px
Color de la sombra: RGBA (0.0,0,0,15)
Agregue el módulo de botón a la columna 1 Agregue una copia del segundo módulo que necesitaremos en la columna 1 es un módulo de botón. Agregue una copia de su elección.
Alineación de botones Luego, acceda a la configuración de alineación y cambie la alineación en el centro.


La configuración del botón continuará haciendo algunos cambios en la apariencia del botón en la configuración del botón.

Use estilos personalizados para el botón: Sí
El color del texto del botón: #ffffff

Color 1: # 6932ff
Color 2: # 30acf4
Dirección de gradiente: 100 grados
El ancho del nudo del botón: 0 PX
Distancia entre letras y botones: -2 PX
Peso de fuente: Ultra Bold

Extienda luego, agregue un poco de revestimiento al botón para que se vea bien y aplique el margen superior negativo para crear una superposición con el módulo anterior en la columna.
Margen superior: -54 PX
Revestimiento superior: 10 px

Finamiento inferior: 10 PX
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Box Shadow por último, pero no menos importante, agregue una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -14px

Color de la sombra: RGBA (0.0,0,0,3)
Agregue el módulo de texto no. 2 en la columna 1 agrega contenido La siguiente forma en que necesitamos es otro módulo de texto con el tipo de membresía.
Color de fondo después de agregar el precio, acceder a la configuración de fondo y aplicar un color de fondo blanco.
Color de fondo: #ffffff

Configuración de texto luego cambie la configuración de texto.

El peso de la fuente de texto: Ultra Bold
Color de texto: RGBA (0.0,0,05)

Tamaño de texto: 120 PX
La altura de la línea de texto: 1em
Espacio y aplique algunos valores de llenado personalizados en la configuración de espaciado.
Revestimiento superior: 100 px
Finamiento inferior: 100 PX

Junta izquierda: 80 PX
Border luego, acceda a la configuración del borde y agregue “30 PX” a las esquinas de izquierda y derecha.
Box Shadow No menos importante, dale al módulo un tono de caja. Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 2 PX

Poder de poco claro de la sombra de la caja: 80 px

Poder de extender la sombra de la caja: 0 px
Color de la sombra: RGBA (0.0,0,0.21)
Agregue el módulo de texto no. 3 en la columna 1 agrega el siguiente contenido y la última forma en que necesitamos en la columna 1 es otro módulo de texto. Agregue el precio del tipo de membresía al cuadro de contenido.
Configuración de texto luego cambie la configuración de texto.
El peso de la fuente de texto: Ultra Bold
Color de texto: # 000000

Tamaño del texto: 50 PX

La altura de la línea de texto: 1em
Espacio y crea una superposición entre este módulo y el anterior jugando con valores de espaciado personalizados.
Margen superior: -180 PX
Margen inferior: 180 PX (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 100 PX

Clon todos los módulos en la columna 1 dos veces y coloque los duplicados en las columnas restantes Una vez que tenga que cambiar los módulos en la columna 1, puede continuar y clonar cada uno de los módulos dos veces y colocar los duplicados en las dos columnas restantes.
Cambie el contenido de los módulos de columna Cambie el contenido duplicado de acuerdo con los otros dos tipos de miembros que comparte en su sitio web.
Cambie la tabla de precios en la columna 2 Cambie la imagen de fondo del módulo de texto no. 1 También destacamos la tabla de precios del medio. Abra el primer módulo de texto en la columna 2 y cambie la imagen de fondo en el archivo “Divi-Beautiful-Paring-Table-Background-Pattern-2.png” que puede encontrar en la carpeta de descarga.
Elimine el margen superior del módulo de texto no.1 Para enfatizar este tipo de miembro, eliminaremos el borde superior del primer módulo de texto de la configuración de espaciado. Cambiar el fondo del botón también, coincidiremos con la nueva imagen de fondo utilizando otro fondo de gradiente para el módulo de botón.

Color 1: # FB32FFF

Color 2: # FF304F

Dirección de gradiente: 100 grados

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, te mostré cómo estilizar una buena mesa de precios para tu próximo Div.¡Te guié paso a paso a través del tutorial y obtuve un resultado increíble usando solo las opciones de división integradas!Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.