Saltar al contenido principal

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

¿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]

Es más fácil que nunca crear gráficos de precios para sus productos en línea. 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 de WordPress. divi. Incluso puede sugerir un plan particular para aumentar las conversiones. Incluso si su módulo incluye varias tablas de precios, se tratará como un único módulo y se puede colocar en cualquier tamaño de columna.

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

Antes de que pueda agregar un módulo de gráfico de precios a su página, primero debe ingresar a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haz clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando explora su sitio web en primer plano si está conectado a su tablero de WordPress.

Mesas de precios del módulo

Una vez que haya ingresado a 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 filas. Si comienza una página nueva, no olvide agregar una línea a su página primero.

divi wordpress price chart.png

Ubique el módulo de tabla de precios en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "tarjetas de tarifas", luego hacer clic en "enter" para buscar y agregar automáticamente el módulo de la tabla de precios. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones están separadas 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 de manera efectiva sus diferentes opciones de precios.

En este ejemplo, 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 fila de ancho completo (columna 1) a la sección e inserte un módulo Tablas de precios en la fila.

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 mesa

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: Texto del botón 69: Contenido de la inscripción:
Acceso a todos los temas Actualizaciones perpetuas del tema Asistencia técnica premium -Acceso a todos los complementos -Libros de Photoshop enchapeados -No hay tarifas anuales
URL del botón: [botón enter URL] Fondo: #ffffff

Opciones de diseño

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

Guardar configuraciones

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 del medio, actualice las siguientes opciones:

Pestaña de contenido

Título: Desarrollador Precio: 89 contenido: El acceso a todas las actualizaciones de temas tema perpetuo de alta calidad Acceso asistencia técnica a todos los archivos en capas de Photoshop - no URL anual botón de pago: [ingresar botón URL]

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: Tiempo de vida Precio: 249 Texto del botón: Muestra contenta: El acceso a todas las actualizaciones de temas tema perpetuo de alta calidad Acceso de apoyo técnico a todas las capas de botones de Photoshop plugins no presentase URL cuota anual: [introduzca la dirección URL del botón]

Guardar configuraciones

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 configuraciones

Ahora regrese y edite las configuraciones de 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 del medio establecida como un 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 íconos. Todo eso 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 "+ añadir nuevo elemento" se abrirá una nueva lista de opciones de diseño específicas para esta tabla de precios. Vea 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 tabla 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

De forma predeterminada, los elementos 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 desactivar esta opción.

Color de fondo de la tabla destacada

Cada tabla de precios puede ser "presentada". 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

Encima de cada tabla de precios hay un área de encabezado que incluye el título y el subtítulo 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 la tabla

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 esta configuración, 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 utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de 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

Por defecto, 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

De forma predeterminada, 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 cuadros de precios, puede establecer ese color usando el selector de color.

Color del texto del encabezado de la tabla presentada

Esta opción controla el color del color del texto de su encabezado de 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 la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúsculas y subrayado.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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.

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

más 554.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]

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 usando esta opción.

Espaciado de los membretes

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado 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 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 ingresar el tamaño de espaciado 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 la pintura presentada. Si cambia el color de fondo de su tabla, puede necesitar cambiar esta opción para garantizar la legibilidad.

Fuente del cuerpo

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

Tamaño de letra del cuerpo

Aquí puedes ajustar el tamaño del texto de tu cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 usando 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 del texto, use el control deslizante de rango para ajustar el espacio o introduzca 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 cuadro destacado. Si cambia el color de fondo de su tabla, puede necesitar 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 la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente de subtítulos o subtítulos

Aquí puede ajustar el tamaño del texto de su encabezado secundario. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 del sub encabezado

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

Espaciado de letras de encabezado secundario

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto de subtítulos, use el control deslizante de rango para ajustar el espacio o introduzca 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 del texto de subtítulos. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o introduzca 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.

Divisa y frecuencia de la moneda

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

Tamaño de fuente de 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 del 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 y frecuencia del texto de la moneda

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su moneda y el texto de frecuencia, elija el color que desee en el selector de color usando 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 la frecuencia de texto, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada en el 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.

Línea de frecuencia de moneda

La altura de la línea afecta el espacio entre cada línea de su moneda y la frecuencia de texto Si desea aumentar el espacio entre cada línea, utilice el control deslizante de rango para ajustar el espacio o introduzca el tamaño deseado en el campo espacial 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, puede necesitar cambiar esta opción para garantizar la legibilidad.

Price Police

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

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 del 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 de su texto de precio, elija el color deseado en el selector de color usando 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 su texto de 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 de su texto de 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 1 píxeles. 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 cosa, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, doble, ranura, cresta, clave y comienzo. Seleccione el estilo que desee del menú desplegable para aplicarlo a su borde.

Use estilos personalizados para el botón

Al habilitar esta opción, se muestran diferentes configuraciones de personalización para los 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 usar 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

Por defecto, los botones adoptan el color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón en 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 predeterminado 2px. Este límite se puede aumentar o disminuir usando este parámetro. Los bordes se pueden eliminar al ingresar 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 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 tus botones. Por defecto, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas de los píxeles de 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 introduzca 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 en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúsculas y subrayado.

Agregar icono de botón

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

Icono de botón

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

Color del icono del botón

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

Colocando el ícono del botón

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

Mostrar solo el ícono cuando el botón se da vuelta

Por defecto, los iconos de los botones solo se muestran durante la renovación. Si desea que el ícono aparezca siempre, desactive esta configuración.

Color del texto en el paso elevado del botón

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

Color de fondo del botón de desplazamiento

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

Botón de borde Color Hover

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

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. [GRATIS]

Botón de radio del borde deslizante

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

Botón de espaciado de nota apuntando

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

Opciones de tarjeta de tarifa avanzada

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados. 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 puede usar para personalizar el módulo en el archivo style.css del tema secundario.

opciones avanzadas divi price chart.png

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse 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 para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema infantil Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando las opciones de Divi tema o la configuración de la página de Divi Builder.

CSS personalizado

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 de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que 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 individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño de dispositivos móviles eliminando 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 fijación de precios (Premium).

Subtítulos

El subtítulo que insertes aquí aparecerá debajo de tu título.

Idear

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

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 funciones que vienen o no 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 Llamar 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 adelante 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 elementos 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 la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 usando 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 del texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado 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 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 ingresar el tamaño de espaciado 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 en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puedes ajustar el tamaño del texto de tu cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 usando 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 del texto, use el control deslizante de rango para ajustar el espacio o introduzca 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 la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del subtítulo

Aquí puede ajustar el tamaño del texto de su encabezado secundario. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del 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 del texto de sus subtítulos, elija el color deseado en el selector de color usando 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 del texto de subtítulos, use el control deslizante de rango para ajustar el espacio o introduzca 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 del texto de subtítulos. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o introduzca 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.

Divisa y frecuencia de la moneda

Puede cambiar la fuente de su moneda y el texto de frecuencia seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando 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 del 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 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 el texto de frecuencia, elija el color que desee en el selector de color usando 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 la frecuencia de texto, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada en el 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.

Moneda y línea de frecuencia

La altura de la línea afecta el espacio entre cada línea de su moneda y 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 de su texto de precio seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando 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 del 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 de su texto de precio, elija el color deseado en el selector de color usando 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 su texto de 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 de su texto de 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 habilitar esta opción, se muestran diferentes configuraciones de personalización para los 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 usar 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

Por defecto, los botones adoptan el color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón en 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 de 2px de forma predeterminada. Este límite se puede aumentar o disminuir usando este parámetro. Los bordes se pueden eliminar al ingresar 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 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 tus botones. Por defecto, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas de los píxeles de 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 introduzca 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 la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregar un ícono al botón

Deshabilitado, esta configuración eliminará los iconos de su botón. Por defecto, todos los botones Divi muestran un ícono de flecha en el vuelo estacionario.

Icono de botón

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

Color del icono del botón

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

Colocando el botón de icono

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

Mostrar solo el ícono cuando el botón se da vuelta

Por defecto, los iconos de los botones solo se muestran durante la renovación. Si desea que el ícono aparezca siempre, desactive esta configuración.

Color del texto en el paso elevado del botón

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

Color de fondo del botón en el paso elevado

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

Color del borde en paso elevado

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

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

Cuando un mouse de visitante sobrepasa el botón, se usará 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 un mouse de visitante sobrepasa el botón, se usará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Opciones de la tabla de precios individuales Opciones avanzadas

opción avanzada divi.png

CSS personalizado

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 de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que 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
6 acciones
cuota2
Tweet1
Guardar3
WhatsApp