Cómo diseñar una hermosa tabla de precios en Divi

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!

Avance

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 módulo de botones a la columna 1

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.