Las tablas de precios suelen ser el CTA principal de una página. Por eso es importante darles un estilo adecuado. Con Divi , puedes dar muchos giros y crear tablas de precios exactamente como las imaginas. Para darle algo de qué pensar, hemos creado una impresionante tabla de precios que puede usar para cualquier tipo de sitio web en el que esté trabajando. Lo guiaremos a través de la creación del resultado de la A a la Z utilizando solo las opciones integradas de Divi.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga las imágenes GRATIS
Para poner sus manos en las imágenes que se utilizan en este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo diseñar una hermosa tabla de precios en Divi
Suscríbete a nuestro canal de Youtube
¡Comencemos a crear!
Agregar nueva sección
Fondo degradado
Cree una nueva página y agregue una sección regular usando el siguiente fondo degradado:
- Color 1: #ffffff
- Color 2: #353272
- Posición inicial: 50%
- Posición final: 50%
Espaciado
Luego, vaya a la configuración de espaciado de la sección y modifique los valores de margen y relleno personalizados.
- 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)
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Una vez que haya terminado de modificar la configuración de la sección, puede continuar y agregar una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño en la pestaña de diseño.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados.
- Relleno superior: 94px
- Relleno inferior: 177px
- Relleno izquierdo: 150 px (escritorio), 30 px (tableta y teléfono)
- Relleno derecho: 150 px (escritorio), 30 px (tableta y teléfono)
- Columna 1, 2 y 3 Relleno izquierdo: 10px
- Columna 1, 2 y 3 Relleno derecho: 10px
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! Estamos personalizando la tabla de precios que queremos crear usando varios módulos. El primer módulo que necesitaremos es un módulo de texto. Agregue el nombre del primer tipo de membresía en el cuadro de contenido.
Color de fondo
Una vez que haya agregado el contenido, vaya a la configuración de fondo y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Imagen de fondo
Cambie a la pestaña de imagen de fondo y cargue el archivo ‘ divi-beautiful-pricing-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: centro superior
- Repetición de la imagen de fondo: sin repetición
Configuración de texto
Modifique la configuración de texto a continuación.
- Peso de fuente de texto: ultra negrita
- Color del texto: #ffffff
- Tamaño del texto: 80px
- Espaciado entre letras de texto: -3px
- Altura de línea de texto: 1em
Espaciado
Y agregue algunos márgenes personalizados y valores de relleno.
- Margen superior: 5vw (escritorio), 0vw (tableta y teléfono)
- Relleno superior: 20px
- Relleno inferior: 200px
Borde
Continúe agregando ’20px’ en las esquinas superior izquierda y derecha.
Sombra de la caja
Para colmo, dale al módulo de texto una sutil sombra de cuadro.
- Posición vertical de la sombra del cuadro: -20px
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -10px
- Color de sombra: rgba (0,0,0,0.15)
Agregar copia
El segundo módulo que necesitaremos en la columna 1 es un módulo de botón. Agregue alguna copia de su elección.
Alineación de botones
Luego, vaya a la configuración de alineación y cambie la alineación al centro.
- Alineación de botones: Centro
Configuración de botones
Continuaremos haciendo algunos cambios en la apariencia del botón en la configuración del botón.
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #ffffff
- Color 1: #6932ff
- Color 2: #30acf4
- Dirección del gradiente: 100 grados
- Ancho del borde del botón: 0px
- Espaciado entre letras de botón: -2px
- Peso de fuente: ultra negrita
Espaciado
A continuación, agregue algo de relleno al botón para que se vea bien y aplique un margen superior negativo para crear una superposición con el módulo anterior en la columna.
- Margen superior: -54px
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 30px
- Relleno derecho: 30px
Sombra de la caja
Por último, pero no menos importante, agregue una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -14px
- Color de sombra: rgba(0,0,0,0.3)
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
El siguiente módulo que necesitaremos es otro Módulo de texto con el precio del tipo de membresía.
Color de fondo
Una vez que haya agregado el precio, vaya a la configuración de fondo y aplique un color de fondo blanco.
- Color de fondo: #ffffff
Configuración de texto
Cambie la configuración de texto a continuación.
- Peso de fuente de texto: ultra negrita
- Color del texto: rgba(0,0,0,0.05)
- Tamaño del texto: 120px
- Altura de línea de texto: 1em
Espaciado
Y aplique algunos valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 100px
- Relleno inferior: 100px
- Relleno izquierdo: 80px
Borde
Luego, vaya a la configuración del borde y agregue ’30px’ en las esquinas inferiores izquierda y derecha.
Sombra de la caja
Por último, pero no menos importante, dale al módulo una sombra de caja.
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: 0px
- Color de sombra: rgba(0,0,0,0.21)
Agregue el Módulo de Texto #3 a la Columna 1
Agregar contenido
El siguiente y último módulo 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
Cambie la configuración de texto a continuación.
- Peso de fuente de texto: ultra negrita
- Color del texto: #000000
- Tamaño del texto: 50px
- Altura de línea de texto: 1em
Espaciado
Y cree una superposición entre este módulo y el anterior jugando con los valores de espaciado personalizados.
- Margen superior: -180px
- Margen inferior: 180 px (tableta y teléfono)
- Relleno izquierdo: 100px
Clonar todos los módulos en la columna 1 dos veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de modificar 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.
Cambiar el contenido de los módulos en la columna
Cambie el contenido de los duplicados de acuerdo con los otros dos tipos de membresía que está compartiendo en su sitio web.
Cambiar tabla de precios en la columna 2
Cambiar la imagen de fondo del módulo de texto #1
También destacamos la tabla de precios intermedia. Abra el primer módulo de texto en la columna 2 y cambie la imagen de fondo al archivo ‘ divi-beautiful-pricing-table-background-pattern-2.png ‘ que puede encontrar en la carpeta de descarga.
Eliminar el margen superior del módulo de texto n.º 1
Para enfatizar este tipo de membresía, vamos a eliminar el margen superior del primer módulo de texto en la configuración de espaciado.
Cambiar fondo de degradado de botón
También haremos coincidir la nueva imagen de fondo usando otro fondo degradado para el Módulo de botones.
- Color 1: #fb32ff
- Color 2: #ff304f
- Dirección del gradiente: 100 grados
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo diseñar una hermosa tabla de precios para su próximo proyecto Divi. ¡Lo guiamos paso a paso a través del tutorial y logramos un resultado sorprendente usando solo las opciones integradas de Divi! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.