Transformar columnas en planes de precios con div Div

Las nuevas opciones de la columna de la Divica han traído muchas posibilidades de diseño nuevas en nuestros flujos de trabajo. Estos ayudan a unir más módulos sin tener que alcanzar una sola línea de código CSS. En esta publicación, convertiremos las columnas en planes de precios utilizando solo las opciones integradas del DIV. También jugaremos con las opciones de transformación de columnas para lograr algunos efectos sorprendentes. ¡También podrás descargar JSON gratis! 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 la apariencia de los planes de tarifa de columna de forma gratuita para poner su mano en el esquema gratuito de los planes de tarifa de columna, primero lo descargará 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 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Suscríbase a nuestro canal de YouTube Agregue una nueva sección de fondo de gradiente Agregue una nueva sección habitual a la página a la que trabaje y abra la configuración de la sección. Vaya a la configuración de fondo y agregue un fondo de gradiente lineal:
Color 1: #ededed
Color 2: #ffffff
Posición inicial: 30%
Posición final: 30%

Espacio también, agregamos un poco de revestimiento superior e inferior a la sección.
Revestimiento superior: 200 PX
Finamiento inferior: 200 PX

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abrir la configuración de la fila, acceder a la pestaña avanzada y cambiar la configuración de tamaño en consecuencia:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 80% (escritorio y tableta), 90% (teléfono)
Ancho máximo: 1400 PX (escritorio), 90% (tableta), 100% (teléfono)

La configuración de la columna 1 también debe cambiar la configuración de la columna, comenzando con la primera. Abra la configuración de la columna 1.

Fondo de gradiente Aplicar el siguiente fondo de gradiente en la columna 1:
Color 1: # F7F7F7
Color 2: #ffffff
Tipo de gradiente: radial
Dirección radial: abajo
Posición inicial: 31%
Posición final: 31%

El borde también agregue el radio de borde “20px” a la columna.

Box Shadow y para crear una cierta profundidad de la página, también agregaremos una sombra de un cuadro sutil.
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0.11)

La escala de transformación predeterminada como puede ver en la vista previa de esta publicación, las columnas se transforman fácilmente. Vaya a la configuración de transformación y asegúrese de que la opción de transformación de escala permanezca “100%” en su estado predeterminado. La parte inferior: 100%
Derecha: 100%
La escala de transformación del cursor cambia los valores de la escala de transformación al cursor.

ABAJO: 120%
Derecha: 120%
La traducción predeterminada también se transforma, presionamos fácilmente la columna hacia la derecha en el escritorio utilizando la configuración de traducción. Agregue las siguientes entradas:

Abajo: 34 PX (escritorio), 0 PX (tableta y teléfono)
Derecha: 0 PX
Pase con el mouse en la traducción de transformación traiga los valores traducidos de vuelta a la normalidad a la salida.

El fondo: 0 PX
Derecha: 0 PX
Interruptor de rotación de transformación predeterminado a la configuración de giro y agregue el siguiente valor a la izquierda:

Izquierda: 352deg (escritorio), 0deg (tableta y teléfono)
Coloque el cursor en la rotación Vuelva al valor a “0deg” al cursor.

Izquierda: 0deg
Externas más adelante en esta publicación, agregaremos un botón en la parte inferior de la columna. El botón respectivo se superpondrá sobre el borde inferior de la columna. Para hacer esto posible, tendremos que hacer que la superación de nuestra columna sea visible.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Índice Z predeterminado luego cambie el índice z de la columna en diferentes tamaños de pantalla. Esto nos ayudará a mantener el apilamiento en orden.

ÍNDICE Z: 9 (escritorio), 11 (tableta y teléfono)
Coloque el índice del cursor z al salir, queremos que la columna aparezca por encima de las otras. Para que esto suceda, aumentaremos el índice Z al cursor.

IND ÍNDICE: 11
Transiciones también creamos una transición suave al aumentar la duración de la transición en los entornos de transición. Duración de la transición: 500 ms

¡Configuración de la columna 2 nos movemos a la segunda columna! Continúe y abra la configuración de la columna.
Fondo de gradiente Aplicar la siguiente configuración de fondo de gradiente:

Color 1: # FFF200

Color 2: #ffffff
Tipo de gradiente: radial
Dirección radial: abajo
Posición inicial: 31%
Posición final: 31%
Border agregue “20 PX” del borde del borde.
Sombra de caja con un tono de caja sutil.

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

Color de la sombra: RGBA (0.0,0,0.14)
La escala de transformación predeterminada de la segunda columna es nuestro plan de precios recomendado. Para garantizar que esto no pase desapercibido, aumentaremos el tamaño de la columna en la configuración de la escala de transformación.
La parte inferior: 112% (escritorio), 100% (tableta y teléfono)

Derecha: 112% (escritorio), 100% (tableta y teléfono)
La escala de transformación del cursor cambia los valores de la escala de transformación al cursor.
ABAJO: 120%

Derecha: 120%
Las devarciones continúan cambiando los flujos horizontales y verticales.
Desbordamiento horizontal: visible

Desbordamiento vertical: visible
Índice z predeterminado Luego, acceda a la configuración de visibilidad y aumente el índice Z de la columna vertebral.
IND ÍNDICE: 10

Coloque el índice del cursor Z Cambie el índice Z al cursor.
IND ÍNDICE: 12

Transiciones y aumentar la duración de la transición en entornos de transición.
Duración de la transición: 500 ms

¡Configuración de la columna 3 en la tercera y última columna! Abra la configuración de la columna.
Gradiente de fondo Acceda a la configuración de fondo y agregue el siguiente fondo de gradiente:

Color 1: # F7F7F7


Color 2: #ffffff
Tipo de gradiente: radial
Dirección radial: abajo
Posición inicial: 31%
Posición final: 31%Border agregue el radio de borde “20px”.
Sombra de caja con un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: RGBA (0.0,0,0.11)

¡La escala de transformación predeterminada es el momento de girar la columna! Asegúrese de que los valores implícitos de la escala de transformación sigan siendo “100%”.
El fondo: 100%
Derecha: 100%

La escala de transformación del cursor cambia estos valores cuando se va.
ABAJO: 120%
Derecha: 120%

Traducción predeterminada también transformamos, empujamos la columna hacia la izquierda en el escritorio aplicando valores de traducción transformados.
La parte inferior: -34px (escritorio), 0px (tableta y teléfono)
Derecha: 0 PX

Pase con el mouse en la traducción de transformación devuelva los valores a “0px” al cursor.
El fondo: 0 PX
Derecha: 0 PX

La rotación predeterminada de la transformación continuó rotando la columna en el estado predeterminado.
Izquierda: 8 grados (escritorio), 0 grados (tableta y teléfono)
Coloque el cursor en la rotación, cambie el valor de giro de la transformación izquierda a “0px” al pasar con el mouse.

Izquierda: 0deg
Operaciones Asegúrese de que los desbordamientos aún sean visibles.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible

Índice Z predeterminado luego, acceda a la configuración de visibilidad y asegúrese de que el índice predeterminado Z sea 9.
ÍNDICE Z: 9
Coloque el índice del cursor Z Cambie el índice Z al cursor.

IND ÍNDICE: 11
Transiciones y aumentar la duración de la transición en entornos de transición.

Duración de la transición: 500 ms
¡Agregue los módulos de blurb a la columna 1, Agregar Título es hora de comenzar a agregar módulos a la primera columna! Agregue un nuevo modo de propaganda e ingrese un título.

Seleccione el icono Seleccione un icono adicional.
Icono de configuración Vaya a la pestaña Design y modifique la configuración del icono según: Color del icono: # 000000

Colocando iconos: arriba

Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 50 PX
Configuración del título luego cambie la configuración del texto del título.
Título de la fuente: Poppins
Alineación del texto del título: Centro
Color de texto del título: # 000000

Título Tamaño del texto: 27 PX
Espacio y agregue un margen desde arriba.
Margen superior: 80 PX
Agregue un módulo divisor en la visibilidad de la columna 1 al segundo 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 del divisor en negro.
Color de línea: # 000000

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 6 PX

Ancho: 14%
Alineación del módulo: centro

Altura: 0px
Finalmente, el espacio agregue un margen desde arriba.
Margen superior: 50 PX
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido Continúe agregando un módulo de texto justo debajo del módulo divisor e ingrese un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Poppins
El peso de la fuente de texto: luz

Alineación de texto: Centro

Color de texto: # 4F4F4F
La altura de la línea de texto: 2.3em
Sparting Agregue algunos valores de margen y llenado personalizados.
Margen superior: 50 PX
Revestimiento superior: 10 px
Finamiento inferior: 10 PX

Agregue el módulo de texto no. 2 En la columna 1 Agregar contenido justo debajo del módulo de texto anterior, necesitaremos otro módulo de texto. Ingrese un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia: Fuente Texto: Poppins
Texto de la fuente de peso: duro
Alineación de texto: Centro

Color de texto: # 000000

Tamaño de texto: 47 PX
La altura de la línea de texto: 1em
El espacio agregue algunos márgenes personalizados desde arriba e abajo.
Margen superior: 50 PX
Margen inferior: 80 PX
Agregue el módulo de botón a la columna 1 Agregue una copia a continuación y el último módulo que necesitamos en la columna 1 es un módulo de botón. Ingrese una copia de su elección.
Alineación Vaya a la pestaña Diseño y cambie la alineación del botón en el centro.

Alineación de botones: centro
Botón de configuración Stilet y botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 17 PX

El color del texto del botón: # 000000
El color del fondo del botón: #ffffff

El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Poppins
Botón de peso de fuente de fuente: en negrita
Espacio también agregaremos algunos márgenes personalizados y valores de llenado.
Margen superior: 50 PX
Margen inferior: -40 PX
Revestimiento superior: 23 PX
Revestimiento inferior: 23 PX


Junta izquierda: 70 PX
Revestimiento derecho: 70 PX
Box Shadow y lo completaremos dando el botón al botón una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,3)
Clon todos los módulos dos veces y coloque los duplicados en las columnas restantes después de que haya completado todos los módulos en la columna 1, puede clonarlos dos veces y puede colocar los duplicados en las dos columnas restantes.
Cambie los iconos y títulos de la propaganda Asegúrese de cambiar los iconos y títulos para cada duplicado.

Cambie el contenido del módulo de texto junto con el contenido del módulo de texto. 2 Por último, pero no menos importante, abra el botón en la columna 2 y cambie la configuración del botón. Después de haber recorrido este paso, ¡ha terminado!
El color del texto del botón: #ffffff
El color de fondo del botón: # 8300E9

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 convertir las columnas en planes de precios utilizando las nuevas opciones de la columna de la Divica. ¡Puede personalizar los planes de tarifa sin tener que llegar a una sola línea de código CSS! Este tutorial muestra solo cómo las nuevas opciones de columna lo ayudan a unir diferentes módulos en un diseño hermoso. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarlas 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.