Una de las páginas de destino exclusivas que le ofrecemos como miembros vitalicios y nuevos clientes del Black Friday es la impresionante página de destino de la venta de software. Esta página de destino lo sorprenderá con sus divisores de sección únicos y maquetas de alta calidad. En este artículo, le mostraremos cómo usar la función de contenido dinámico de Divi para agregarle tablas de precios dinámicos.

Si es un cliente vitalicio actual o si ha comprado una cuenta nueva o se ha actualizado durante nuestra oferta de Black Friday, puede descargar este diseño ahora mismo.

Obtenga la página de inicio de venta de software exclusiva del Black Friday

Antes de entrar en este caso de uso, deberá tener en sus manos la página de inicio de venta de software exclusiva del Black Friday, que puede obtener al convertirse en un nuevo miembro de Elegant Themes, actualizar su cuenta existente o si ya es miembro vitalicio con nosotros. Si ya es miembro vitalicio, puede iniciar sesión en nuestra área de miembros y descargar todas nuestras páginas de destino exclusivas aquí. Todos los demás deberán usar el botón a continuación para comprar o actualizar antes de poder seguir el resto de nuestro tutorial.

¡Reclame el trato antes de que desaparezca!

Cómo crear tablas de precios dinámicas con Divi

Para el resto de esta publicación, asumiremos que ha aprovechado nuestra oferta del Black Friday o que ya es un miembro vitalicio y tiene acceso a la página de inicio de ofertas de software del Black Friday.

Una vez que haya descargado la nueva página de inicio de venta de software de nuestra área de miembros, puede ver el video a continuación para ver lo fácil que es configurarlo. También le recomendamos que siga este tutorial para preparar su sitio para una mayor personalización.

En esta publicación de caso de uso, le mostraremos cómo crear tablas de precios dinámicas con Divi y el complemento gratuito Advanced Custom Fields. La creación de tablas de precios dinámicas es excelente si tiene un cliente que cambia los precios de suscripción con frecuencia y desea permitirles que lo cambien ellos mismos sin acceder a Divi. Esto te ayudará a asegurarte de que no estropeen nada en la página y, al mismo tiempo, tengan la capacidad de cambiar el precio, la descripción y el nivel de membresía de un determinado paquete.

Avance

Antes de sumergirnos en él, echemos un vistazo rápido al resultado final.

¡Empecemos!

Instalar el complemento de campos personalizados avanzados

Lo primero que deberá hacer es instalar el complemento Campos personalizados avanzados en su sitio web de WordPress yendo a Complementos> Agregar nuevo> Buscando el complemento e instalándolo .

Crear nuevo grupo de campos

Una vez que haya activado el complemento, puede comenzar. Agregue un nuevo grupo de campos.

Nombre + Ubicación

Asigne un nombre a su nuevo grupo de campos. Tenga en cuenta que al final de esta parte del tutorial, tendrá tres grupos de campos (igual al número de tablas de precios), así que asegúrese de nombrarlo correctamente. Cambie también la configuración de ubicación de este grupo de campos.

Agregar campo de nivel de membresía

¡Es hora de comenzar a agregar campos! Necesitaremos tres en total. Agregue un campo de nivel de membresía usando la siguiente configuración:

• Etiqueta de campo: Nivel de membresía 1
• Nombre de campo: nivel_de_membresía_1
• Tipo de campo: Seleccionar
• Opciones: agregue contenido de su elección

Agregar campo de descripción de membresía

Continúe agregando un campo de descripción de membresía.

• Etiqueta de campo: Descripción de membresía 1
• Nombre de campo: member_description_1
• Tipo de campo: Texto

Agregar campo de precio

El último campo que necesitará es un campo de precio.

• Etiqueta de campo: Precio 1
• Nombre de campo: price_1
• Tipo de campo: Texto

Duplique el grupo de campos dos veces y ajuste el nombre y los campos al número de la tabla de precios

Un grupo de campo equivale a una tabla de precios en nuestra página. Ahora que hemos terminado el primero, podemos seguir adelante y clonarlo dos veces para asegurarnos de que tenemos suficientes grupos de campos para coincidir con la cantidad de tablas de precios en nuestra página.

Cambiar el número de todos los campos dentro del grupo

Cada uno de los campos dinámicos que cree se mostrará en Visual Builder. Para asegurarse de saber a qué información está vinculando, asigne un número diferente a los grupos de campos duplicados y sus campos.

Crear nueva página usando la página de inicio de venta de software de Divi

En la siguiente parte de este tutorial, agregaremos las tablas de precios dinámicos a nuestra página de inicio de venta de software. Crea una nueva página usando este diseño.

Agregar contenido dinámico a la página

Regrese al backend de esta página y agregue contenido dinámico a cada una de las tablas de precios.

Agregar nueva fila debajo de la tabla de precios en la página

Estructura de la columna

Continúe habilitando Visual Builder y agregando una nueva fila aquí mismo:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Luego, vaya a la configuración de espaciado y agregue un margen personalizado.

• Margen superior: 100 px
• Margen inferior: 100 px

Agregar módulo de CTA a la columna 1

Conectar el campo de título al contenido dinámico de nivel 1 de membresía

El primer módulo que necesitaremos en la columna 1 es un módulo de llamada a la acción. Vincula el campo de título al campo de nivel de membresía 1 que creaste en la parte anterior de este tutorial.

Conectar el cuadro de contenido a la descripción de membresía 1 Contenido dinámico

Del mismo modo, conecte el cuadro de contenido a la descripción de membresía 1.

Color de fondo

Luego, vaya a la configuración de fondo y cambie el color de fondo del Módulo de CTA.

• Color de fondo: #ffffff

Imagen de fondo

Agrega también una imagen de fondo sutil. Podrá encontrar la siguiente imagen de fondo en su biblioteca de medios después de cargar la página de inicio de venta de software:

• Imagen de fondo: software-sale-13.png

Configuración de texto

Continúe yendo a la configuración de texto y cambiando la orientación del texto del módulo.

• Orientación del texto: izquierda

Configuración del texto del título

Para que coincida con el estilo de diseño de la página de destino, realice también algunos cambios en la configuración del texto del título.

• Fuente del título: Rubik
• Peso de la fuente del título: Ligero
• Color del texto del título: # 4258ff
• Tamaño del texto del título: 40px
• Altura de la línea de título: 1.3em

Configuración del texto del cuerpo

Lo mismo ocurre con la configuración del texto del cuerpo.

• Fuente del cuerpo: Rubik
• Peso de la fuente del cuerpo: Medio
• Color del cuerpo del texto: rgba (0,0,0,0.34)
• Tamaño del texto del cuerpo: 15px
• Altura de la línea del cuerpo: 1.8em

Espaciado

A continuación, agregue un poco de relleno superior.

• Acolchado superior: 60px

Frontera

Y agregue '8px' a cada una de las esquinas superiores del módulo.

Sombra de la caja

Por último, pero no menos importante, agregaremos una sombra de cuadro sutil para crear profundidad en la página.

• Posición vertical de la sombra del cuadro: 50px
• Fuerza de desenfoque de sombra de caja: 100px
• Color de sombra: rgba (66,88,255,0.2)

Agregar módulo de texto a la columna 1

Conectar el cuadro de contenido al contenido dinámico de Price 1

Continúe y agregue un módulo de texto justo debajo del módulo de llamado a la acción en la columna 1. Vincule el cuadro de contenido de este módulo al contenido dinámico de Precio 1.

Color de fondo

Continúe cambiando el color de fondo de este módulo.

• Color de fondo: #ffffff

Configuración de texto

Modifique también la configuración del texto.

• Fuente de texto: Rubik
• Peso de la fuente del texto: Ligero
• Color del texto: # 4258ff
• Tamaño del texto: 70px
• Altura de la línea de texto: 1em

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado inferior: 60px
• Relleno izquierdo: 40px

Frontera

Continúe yendo a la configuración del borde y agregando '8px' en ambas esquinas inferiores.

Sombra de la caja

Por último, pero no menos importante, dé a este módulo de texto también una sombra de cuadro.

• Posición vertical de la sombra del cuadro: 80px
• Fuerza de desenfoque de sombra de caja: 100px
• Color de sombra: rgba (66,88,255,0.2)

Arrastre el módulo de botones a la columna 1

El último módulo que necesitaremos en la primera columna es un módulo de botones. Clone uno de los módulos de botones que puede encontrar en la fila anterior y colóquelo en la columna 1.

Cambiar espaciado

Abra la configuración del Módulo de botones y agregue un margen personalizado.

• Margen superior: 30 px
• Margen inferior: 50px

Clonar todos los módulos en la columna 1 y colocarlos en las columnas restantes

Para ahorrar tiempo, clonaremos los tres módulos en la columna 1 dos veces y colocaremos los duplicados en las columnas restantes de la fila.

Modificar módulos en la columna 2

Módulo de CTA

Conectar el campo de título al contenido dinámico de nivel de membresía 2

Necesitaremos modificar los duplicados, comenzando con el Módulo de CTA en la segunda columna. Conecte el campo de título al contenido dinámico de nivel de membresía 2.

Conectar el cuadro de contenido a la descripción de membresía 2 Contenido dinámico

Haz lo mismo con el cuadro de contenido.

Agregar fondo degradado

Agregue un fondo degradado al módulo siguiente.

• Color 1: # 6959ff
• Color 2: # c1bfff
• Dirección del gradiente: 15 grados
• Posición inicial: 22%
• Posición final: 95%

Cambiar el color del texto del título

Cambie también el color del texto del título.

• Color del texto del título: #ffffff

Cambiar el color del texto del cuerpo

Lo mismo ocurre con el color del texto del cuerpo.

• Color del texto del cuerpo: #ffffff

Cambiar espaciado

Para poner esta tabla de precios en particular en el centro de atención, también jugaremos con los valores de espaciado.

• Margen superior: -50px (escritorio), 0px (tableta y teléfono)
• Relleno superior: 100 px

Módulo de texto

Conectar Content Box al contenido dinámico de Price 2

Continúe abriendo el Módulo de texto en la columna 2 y vincule el cuadro de contenido al contenido dinámico de Precio 2.

Cambiar el color de fondo

A continuación, cambie el color de fondo de este módulo.

• Color de fondo: # 6959ff

Cambiar el color del texto

Y cambia el color del texto a blanco.

• Color del texto: #ffffff

Cambiar espaciado

Por último, pero no menos importante, cambie los valores de relleno personalizados en la configuración de espaciado.

• Acolchado inferior: 120 px
• Relleno izquierdo: 40px

Modificar módulos en la columna 3

Módulo de CTA

Conectar el campo de título al contenido dinámico de nivel 3 de membresía

También necesitaremos cambiar los módulos en la columna 3. Vincula el campo de título al contenido dinámico de nivel de membresía 3.

Conectar el cuadro de contenido a la descripción de membresía 3 Contenido dinámico

Lo mismo ocurre con el cuadro de contenido.

Agregar fondo degradado

Luego, agregue un fondo degradado al módulo.

• Color 1: # c87cff
• Color 2: # ffbcf8
• Dirección del gradiente: 18 grados
• Posición inicial: 22%
• Posición final: 95%

Cambiar el color del texto del título

Cambie el color del texto del título a blanco.

• Color del texto del título: #ffffff

Cambiar el color del texto del cuerpo

Haz lo mismo con el color del cuerpo del texto.

• Color del texto del cuerpo: #ffffff

Módulo de texto

Conectar Content Box al contenido dinámico de Price 3

Continúe abriendo el Módulo de texto en la columna 3 y cambiando el contenido dinámico aquí también.

Cambiar el color de fondo

A continuación, agregue un color de fondo diferente.

• Color de fondo: # c87cff

Cambiar el color del texto

Por último, pero no menos importante, cambie el color del texto a blanco y ¡listo! ¡Ahora tiene tres tablas de precios completamente dinámicas en su página!

• Color del texto: #ffffff

Pensamientos finales

Este caso de uso es parte de nuestro Black Friday Deal, donde compartimos 6 páginas de inicio de edición limitada GRATIS con clientes y miembros vitalicios del Black Friday. Al unirse a nuestra comunidad empoderada durante estos días y convertirse en miembro, obtendrá:

• 25% DE DESCUENTO EN TODO
• Las 6 páginas de destino de forma gratuita
• Acceso a nuestros increíbles temas y complementos
• Premios de bonificación

¡Aprovecha la oportunidad y conviértete en miembro hoy!