Saltar al contenido principal

Tutorial Divi: Cómo usar el módulo Tablas de tarifas

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Crear tablas de precios para sus productos en línea es más fácil que nunca. Cree tantas tablas como desee y controle los precios y las características de cada una con el módulo Tablas de tarifas de su tema Divi de WordPress. Incluso puede sugerir un plan particular para aumentar las conversiones. Incluso si su módulo incluye varias tablas de precios, se tratará como un solo módulo y se puede colocar bajo cualquier tamaño de columna.

Cómo agregar un módulo de Tablas de tarifas a su página

Antes de que pueda agregar un módulo de tabla de precios a su página, primero debe saltar a Divi Builder. Una vez que el tema Divi esté instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puedes hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

Mesas de precios del módulo

Una vez que haya ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las líneas. Si comienza una nueva página, no olvide agregar primero una línea a su página.

divi wordpress price chart.png

Localice el módulo de la tabla de precios en la lista de módulos y haga clic en él para agregarlo a su página. Se puede buscar en la lista de módulos, lo que significa que también puede escribir la palabra "hojas de tarifas" y luego hacer clic en "enter" para buscar y agregar automáticamente el módulo de tabla de precios. Una vez que se agrega el módulo, la lista de opciones lo recibirá. Estas opciones se separan en tres grupos principales: Contenido , diseño et Avanzado .

Caso de uso: agregar una tabla de precios para una página de producto

Cuando promociona sus productos en una página de destino, los gráficos de precios pueden mostrar efectivamente sus diferentes opciones de precios.

En este ejemplo, voy a agregar un módulo de gráfico de precios para mostrar tres planes de precios (o tablas) con uno de estos planes que se destaca como un plan destacado para aumentar las conversiones.

Tabla de precios de WordPress divi.jpg

Primero, agregue una nueva sección regular a la página donde se deben mostrar las tablas de precios. Agregue una línea de ancho completo (columna 1) a la sección e inserte un módulo de Tablas de precios en la línea.

price table line divi.png

En la configuración de la tabla de precios, en la pestaña Contenido, haga clic en + Agregar un nuevo elemento para agregar tu primera tabla.

nueva columna price chart.png

Actualice los parámetros de la tabla de precios de la siguiente manera:

Opciones de contenido

Título: Moneda personal: $ Por: Año Precio: 69 Texto del botón: Contenido de la inscripción:
Acceso a todos los temas Actualizaciones de tema perpetuas Soporte técnico premium -Acceso a todos los complementos -Archivos de Photoshop en capas -Sin cuota anual
URL del botón: [ingresar URL del botón] Antecedentes: #ffffff

Opciones de diseño

Color del texto del precio: # 3e51b5 Use estilos personalizados para el botón: SÍ Color del texto del botón: #ffffff Color del botón: #3e51b5 Ancho del botón: 0px

Guardar configuración

divi wordpress price chart example.png

Ahora, duplique la tabla de precios que acaba de crear dos veces para tener tres tablas de precios en total.

creación de varios ejemplos de tableau.jpg

Para la tabla de precios medios, actualice las siguientes opciones:

Pestaña de contenido

Título: Precio del desarrollador: 89 Contenido: Acceso a todos los temas Actualizaciones de tema perpetuo Soporte técnico premium Acceso a todos los archivos de Photoshop en capas - sin tarifas anuales URL del botón: [ingresar URL del botón]

Pestaña Diseño

Color del texto: #0091ca Color del botón: #0091ca

Para la tercera tabla de precios, actualice la configuración de la siguiente manera:

Pestaña de contenido

Título: de por vida Precio: 249 Texto del botón: Registrarse Contenido: acceso a todos los temas Actualizaciones de tema perpetuo Soporte técnico premium Acceso a todos los complementos Archivos en capas de Photoshop Sin tarifas anuales URL del botón: [ingrese la URL del botón]

Guardar configuración

Ahora regrese a la configuración de la tabla de precios y actualice lo siguiente:

Opciones de contenido

Color de fondo de la tabla destacada: #0091ca

Opciones de diseño

Color de la bola: # 3e51b5 Color de la tabla destacada: #0091ca

resultado de la tabla de precios divi.jpg

Guardar configuración

Ahora regrese y edite la configuración de la sección para darle a la sección un color de fondo de #3e51b5.

Es todo. Ahora tiene una tabla de precios con tres opciones con la opción intermedia establecida como elemento destacado que se destaca del resto.

opción de tabla de precios divi.jpg

Opciones de contenido para tablas de precios

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

price table design option.png

+ Agregar un nuevo artículo

Aquí es donde agrega nuevas tablas de precios a su módulo. Al hacer clic en "+ agregar nuevo elemento" se abrirá una nueva lista de opciones de diseño específicas para esta tabla de precios. Consulte a continuación los parámetros individuales de la tabla de precios.

Después de agregar su primera pestaña, aparecerá una barra gris con el título de su gráfico de precios en forma de etiqueta. La barra gris también tiene tres botones que le permiten editar, duplicar o eliminar la tabla.

Mostrar Bullet

Por defecto, los artículos en las tablas de precios se muestran como listas con viñetas. Si desea eliminar las viñetas de la lista de características, puede deshabilitar esta opción.

Color de fondo de la tabla destacada

Cada tabla de precios se puede "presentar". Las pinturas presentadas se destacan en la fila, lo que las distingue de otras opciones. Al usar esta configuración, puede cambiar el color de fondo solo para las tablas destacadas.

Color de fondo del encabezado de la tabla

Sobre cada tabla de precios hay un área de encabezado que incluye el título y los subtítulos de su tabla. Puede controlar el color de fondo de esta área independientemente del color de fondo de la tabla principal seleccionando el color deseado en el selector de color.

Encabezado de tabla destacado

Cada gráfico de precios puede ser "presentado". Las pinturas presentadas se destacan en la fila, lo que las distingue de otras opciones. Al usar este parámetro, puede cambiar el color de fondo del encabezado solo para las tablas seleccionadas.

Color de fondo

Por defecto, las tablas de precios tienen un color de fondo blanco. Si desea utilizar un color diferente para el fondo de su gráfico de precios, puede establecer su color personalizado aquí utilizando el selector de color.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz Divi Builder.

Opciones de diseño de mesa de precios

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para cambiar cualquier cosa.

array design option.png

alineación

De manera predeterminada, las listas de funciones están alineadas a la izquierda en la tabla de precios. Si desea alinearlos, puede habilitar esta opción.

Eliminar la sombra paralela de la tabla destacada

Por defecto, las tablas de precios tienen una sombra sutil detrás de cada tabla. Si desea eliminar esta sombra, puede habilitar esta opción.

Artículos de la lista en el centro

Aquí puede elegir centrar los elementos enumerados en su tabla.

Color de la pelota

Por defecto, las viñetas en la lista de la tabla de precios heredarán el color de acento de su tema. Si desea usar un color diferente, puede configurarlo aquí usando el selector de color.

Color de la tabla destacada

Si desea usar un color diferente para las viñetas en los gráficos de precios, puede establecer ese color aquí usando el selector de color.

Color del texto del encabezado de la tabla destacada

Esta opción controla el color del color del texto del encabezado de la tabla. Si cambia el color de fondo del encabezado de la tabla, también puede cambiar esta opción para garantizar la legibilidad.

La policía a la cabeza

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto del encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Color del texto del encabezado

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del encabezado, elija el color deseado en el selector de color con esta opción.

Espaciado de membretes

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del encabezado

La altura de la línea afecta el espacio entre cada línea del texto del encabezado. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en la línea. campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto de la tabla destacada

Esto cambia el color del texto del cuerpo de su pintura destacada. Si cambia el color de fondo de su tabla, es posible que deba cambiar esta opción para garantizar la legibilidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto de su cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color con esta opción.

Espaciado de letras corporales

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color de texto de la tabla subtítulo

Esto cambia el color del texto de los subtítulos para su pintura destacada. Si cambia el color de fondo de su tabla, es posible que deba cambiar esta opción para garantizar la legibilidad.

Fuente de subtítulos

Puede cambiar la fuente de su texto de subtítulos seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente de subtítulo o subtítulo

Aquí puede ajustar el tamaño del texto del subtítulo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del subtítulo

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto de subtítulos, elija el color deseado en el selector de color con esta opción.

Espaciado de subtítulos

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de los subtítulos, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del subtítulo

La altura de la línea afecta el espacio entre cada línea de su texto de subtítulos. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Moneda Moneda y frecuencia

Puede cambiar la fuente de su moneda y texto de frecuencia seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Moneda Moneda Tamaño y frecuencia

Aquí puede ajustar el tamaño de su moneda y su texto de frecuencia. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color de texto de moneda y frecuencia

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su moneda y texto de frecuencia, elija el color deseado en el selector de color con esta opción.

Espaciado de letras y monedas

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su moneda y su texto de frecuencia, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Línea de moneda de frecuencia

La altura de la línea afecta el espacio entre cada línea de su moneda y el texto de frecuencia. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Precio de color destacado

Esto cambia el color de los precios de su pintura presentada. Si cambia el color de fondo de su tabla, es posible que deba cambiar esta opción para garantizar la legibilidad.

Price Police

Puede cambiar la fuente del texto de su premio seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente de precio

Aquí puede ajustar el tamaño del texto de su precio. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del precio

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su precio, elija el color deseado en el selector de colores con esta opción.

Espaciado de letras de precio

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su precio, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de precio

La altura de la línea afecta el espacio entre cada línea del texto de su precio. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de píxel 1. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a otra, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, doble, acanalado, cresta, clave e inicio. Seleccione su estilo deseado en el menú desplegable para aplicarlo a su borde.

Use estilos personalizados para el botón

Al activar esta opción, se muestran diferentes configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón cambia a medida que el tamaño del texto aumenta y disminuye.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Ancho del borde del botón

Todos los botones Divi tienen un borde 2px predeterminado. Este borde se puede aumentar o disminuir utilizando este parámetro. Las fronteras se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones cambian al color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en este módulo. Seleccione su color personalizado utilizando el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de los botones. Por defecto, los botones en Divi tienen un radio de borde pequeño que redondea las esquinas de los píxeles 3. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de las letras del botón

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Policía de Boutton

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregar un ícono de botón

Deshabilitado, esta configuración eliminará los íconos de su botón. Por defecto, todos los botones Divi muestran un icono de flecha.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir el ícono que usará en su botón. Divi tiene diferentes íconos para elegir.

Color del ícono del botón

Establecer esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color de texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Colocar el icono del botón

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar solo el icono de desplazamiento del botón

De manera predeterminada, los iconos de los botones solo se muestran durante la renovación. Si desea que el icono siempre aparezca, desactive esta configuración.

Color del texto en el paso elevado del botón

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Botón de borde Color Hover

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Botón de espaciado de nota apuntando

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Opciones avanzadas de hoja de tarifas

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados CSS y HTML. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

opciones avanzadas divi price chart.png

ID de CSS

Ingrese un identificador CSS opcional para usar para este módulo. Se puede usar una ID para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales que se utilizarán para este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web mediante las opciones de tema Divi o la configuración de la página Divi Builder.

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil al eliminar ciertos elementos de la página.

Opciones de contenido de tablas de precios individuales

tabla de precios de sección individual.png

Título

El título que inserte aquí se usará para esta opción de precio (Premium).

Subtítulos

El subtítulo que inserte aquí aparecerá debajo de su título.

Idear

Ingrese el símbolo de su moneda deseada aquí.

por

Si su precio se basa en una suscripción, ingrese el ciclo de suscripción aquí (por ejemplo, Año).

Precio

Ingrese el valor del producto aquí.

Texto del botón

Especifique el texto del botón aquí.

Contenido

Este campo es donde puede ingresar la lista de características que vienen o no vienen con su producto. Separe cada elemento de la lista en una nueva línea y comience cada línea con un símbolo + o -. A + especifica una funcionalidad incluida, mientras que A - especifica una característica excluida.

URL del botón

En la parte inferior de cada tabla, puede insertar un botón de Llamado a la acción insertando una URL web válida en este campo. Deja esto y el
Vaciar el campo de texto del botón si no desea tener un botón en su tabla de precios.

Color de fondo

Establezca un color de fondo personalizado para su módulo o déjelo en blanco para usar el color predeterminado.

Opciones de diseño para tablas de precios individuales

precio columna columna estilo divi.png

Haz que esta tabla aparezca

Elija poner esta tabla de precios por delante o no con este menú desplegable. Esto permitirá que la pintura se destaque del resto.

Color del artículo excluido

Para los elementos de su lista que se han definido como excluidos mediante el símbolo -, puede ajustar su color con esta configuración. Por ejemplo, es posible que desee cambiar el color a rojo o reducir su opacidad para indicar visualmente que los artículos están excluidos del paquete actual.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto del encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del encabezado, elija el color deseado en el selector de color con esta opción.

Espaciado de letras en el encabezado

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del encabezado

La altura de la línea afecta el espacio entre cada línea del texto del encabezado. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en la línea. campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto de su cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color con esta opción.

Espaciado de letras corporales

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente de subtítulos

Puede cambiar la fuente de su texto de subtítulos seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del subtítulo

Aquí puede ajustar el tamaño del texto del subtítulo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color de texto de subtítulos

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto de subtítulos, elija el color deseado en el selector de color con esta opción.

Espaciado de letras de subtítulos

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de los subtítulos, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de subtítulos

La altura de la línea afecta el espacio entre cada línea de su texto de subtítulos. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Moneda Moneda y frecuencia

Puede cambiar la fuente de su moneda y texto de frecuencia seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente para moneda y frecuencia

Aquí puede ajustar el tamaño de su moneda y su texto de frecuencia. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto para moneda y frecuencia

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su moneda y texto de frecuencia, elija el color deseado en el selector de color con esta opción.

Espaciado de letras y monedas

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su moneda y su texto de frecuencia, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Línea de moneda y frecuencia

La altura de la línea afecta el espacio entre cada línea de su moneda y el texto de frecuencia. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Política de precios

Puede cambiar la fuente del texto de su premio seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente de precio

Aquí puede ajustar el tamaño del texto de su precio. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del precio

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su precio, elija el color deseado en el selector de colores con esta opción.

Espaciado de letras de precio

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su precio, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de precio

La altura de la línea afecta el espacio entre cada línea del texto de su precio. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Use estilos personalizados para el botón

Al activar esta opción, se muestran diferentes configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón cambia a medida que el tamaño del texto aumenta y disminuye.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Ancho del borde del botón

Todos los botones Divi tienen un borde de 2px por defecto. Este borde se puede aumentar o disminuir utilizando este parámetro. Las fronteras se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones cambian al color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en este módulo. Seleccione su color personalizado utilizando el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de los botones. Por defecto, los botones en Divi tienen un radio de borde pequeño que redondea las esquinas de los píxeles 3. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de letras de los botones

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente del botón

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregue un ícono al botón

Deshabilitado, esta configuración eliminará los íconos de su botón. Por defecto, todos los botones Divi muestran un icono de flecha en el cursor.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir el ícono que usará en su botón. Divi tiene diferentes íconos para elegir.

Color del ícono del botón

Establecer esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color de texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Colocando el botón de icono

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar solo el icono de desplazamiento del botón

De manera predeterminada, los iconos de los botones solo se muestran durante la renovación. Si desea que el icono siempre aparezca, desactive esta configuración.

Color del texto en el paso elevado del botón

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Color de fondo del botón en el paso elevado

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Color del borde en paso elevado

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Radio del borde del botón en la descripción

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Espaciado de las letras del botón en el paso elevado

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Opciones de tabla de precios individuales Opciones avanzadas

opción avanzada divi.png

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

Otros tutoriales de Divi

Este artículo contiene los comentarios 2
  1. Hola,
    Gracias por este artículo muy específico y detallado. Soy nuevo en el uso de constructor DIVI y noto que después de la creación de mi tarjeta de tasa de columnas 3, la pantalla móvil es un desastre (2 columnas adicionales estrechas y una tercera línea ...).
    Allí es que significa (aparte de duplicar la mesa y lo oculta) para configurarlo como tal en Bootstrap (dar un ancho de columna de 33% en el escritorio y móvil 100%)?
    Gracias por su ayuda.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
5 acciones
cuota2
Tweet
Siguiente 3