Es más fácil que nunca crear tablas de precios para sus productos en línea. Cree todas las tablas que necesite y controle el monto y los detalles de cada una. Hasta puede destacar un plan en particular para aumentar sus ventas. Aunque el módulo incluya más de una tabla de precios, será manejado como un módulo único y puede colocarse en una columna de cualquier ancho.

Cómo añadir un módulo Tabla de precios en una página
Antes de poder añadir un módulo Tabla de precios, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.


Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Localice el módulo Tabla de precios dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “tabla” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.
Sistema de ayuda de Divi
Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.
Filtros de búsqueda de opciones
Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Estilos adaptables y Contenido activo.

Opciones de contenido
Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como las viñetas y el fondo. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.
- Mostrar viñeta – De manera predeterminada los elementos de las tablas se muestran como listas con viñetas. Si desea eliminar esas viñetas, puede desactivar esta opción.
- Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
- Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Tabla de precios en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.
Opciones de diseño
Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como color, estilo y tamaño. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.
Diseño
- Color de fondo de la tabla destacada – Cada tabla de precios puede ser destacada. Las tablas destacadas se resaltan en la fila, para que sobresalgan del resto. Use esta opción para cambiar el color de fondo solo en las tablas destacadas.
- Mostrar sombra de la tabla destacada – De manera predeterminada, las tablas de precios tienen una leve sombra. Si desea eliminarla, active esta opción.
- Centrar elementos de la lista – De manera predeterminada, las características de la lista se alinean a la izquierda. Si desea centrarlas, active esta opción.
Viñeta
- Color de viñeta – De manera predeterminada, las viñetas de la lista heredan el color de acento del tema. Puede elegir un color personalizado del selector.
- Color de viñeta de la tabla destacada – Si desea usar un color de viñetas diferente en la tabla destacada, puede seleccionarlo aquí.
Texto
- Orientación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
- Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
- Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
- Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
- Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
- Color de sombra de texto – Elija el color de la sombra del selector.
Título Texto
- Color de fondo del encabezado de la tabla destacada – Use esta opción para cambiar el color de fondo del encabezado solo en las tablas destacadas.
- Color de texto del encabezado de la tabla destacada – Si cambia el color de fondo del encabezado de la tabla destacada, puede que quiera cambiar también el color del texto para un mejor contraste.
- Color de fondo del encabezado de la tabla – En la parte superior de cada tabla hay un área de encabezado que incluye el título y el subtítulo. Puede controlar el color de fondo de esta área independientemente del color de fondo principal de la tabla.
- Nivel de encabezado Título – Seleccione aquí la etiqueta HTML de encabezado que se usará para este elemento.
- Fuente de Título – Puede cambiar la fuente del texto del módulo Carrusel, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Título Peso de fuente – Esto controla el peso de la fuente del texto del título. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Título Estilo de fuente – Esto controla el estilo de la fuente del texto del título. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
- Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Contenido Texto
- Color de textos de la tabla destacada – Si cambia el color de fondo de la tabla destacada, puede que quiera cambiar también el color del texto para un mejor contraste.
- Fuente de Contenido – Puede cambiar la fuente del texto del contenido, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Contenido Peso de fuente – Esto controla el peso de la fuente del texto del contenido. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Contenido Estilo de fuente – Esto controla el estilo de la fuente del texto del contenido. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Alineación del texto de Contenido – Esto controla la alineación del texto del contenido: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Contenido – Aquí puede ajustar el tamaño del texto del contenido. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Contenido – Si desea cambiar el color de texto del contenido, elija el color del selector en esta opción.
- Espacio entre letras de Contenido – El espacio entre letras es la separación entre cada uno de los caracteres del texto del contenido. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Contenido – La altura de línea afecta el espacio entre cada una de las líneas de texto del contenido. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Contenido – Elija un estilo de sombra para activar en el texto del contenido. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Subtítulo Texto
- Color de texto del subtítulo de la tabla destacada – Si cambia el color de fondo del encabezado de la tabla destacada, puede que quiera cambiar también el color del texto del subtítulo para un mejor contraste.
- Fuente de Subtítulo – Puede cambiar la fuente del texto del título, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Subtítulo Peso de fuente – Esto controla el peso de la fuente del texto del subtítulo. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Subtítulo Estilo de fuente – Esto controla el estilo de la fuente del texto del subtítulo. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Alineación del texto de Subtítulo – Esto controla la alineación del texto del subtítulo: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Subtítulo – Aquí puede ajustar el tamaño del texto del subtítulo. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Subtítulo – Si desea cambiar el color de texto del subtítulo, elija el color del selector en esta opción.
- Espacio entre letras de Subtítulo – El espacio entre letras es la separación entre cada uno de los caracteres del texto del subtítulo. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Subtítulo – La altura de línea afecta el espacio entre cada una de las líneas de texto del subtítulo. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Subtítulo – Elija un estilo de sombra para activar en el texto del subtítulo. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Moneda & Frecuencia Texto
- Fuente de Moneda & Frecuencia – Puede cambiar la fuente del texto de la moneda y la frecuencia del plan, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Moneda & Frecuencia Peso de fuente – Esto controla el peso de la fuente del texto de la moneda y la frecuencia del plan. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Moneda & Frecuencia Estilo de fuente – Esto controla el estilo de la fuente del texto de la moneda y la frecuencia del plan. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Tamaño de texto de Moneda & Frecuencia – Aquí puede ajustar el tamaño del texto de la moneda y la frecuencia del plan. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Moneda & Frecuencia – Si desea cambiar el color de texto de la moneda y la frecuencia del plan, elija el color del selector en esta opción.
- Espacio entre letras de Moneda & Frecuencia – El espacio entre letras es la separación entre cada uno de los caracteres del texto de la moneda y la frecuencia del plan. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Moneda & Frecuencia – La altura de línea afecta el espacio entre cada una de las líneas de texto de la moneda y la frecuencia del plan. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Moneda & Frecuencia – Elija un estilo de sombra para activar en el texto de la moneda y la frecuencia del plan. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Precio Texto
- Color del precio de la tabla destacada – Si cambia el color de fondo de la tabla destacada, puede que quiera cambiar también el color del texto del precio para un mejor contraste.
- Fuente de Precio – Puede cambiar la fuente del texto del precio, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Precio Peso de fuente – Esto controla el peso de la fuente del texto del precio. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Precio Estilo de fuente – Esto controla el estilo de la fuente del texto del precio. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Alineación del texto de Precio – Esto controla la alineación del texto del precio: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Precio – Aquí puede ajustar el tamaño del texto del precio. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Precio – Si desea cambiar el color de texto del precio, elija el color del selector en esta opción.
- Espacio entre letras de Precio – El espacio entre letras es la separación entre cada uno de los caracteres del texto del precio. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Precio – La altura de línea afecta el espacio entre cada una de las líneas de texto del precio. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Precio – Elija un estilo de sombra para activar en el texto del precio. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Botón
- Usar estilos personalizados para Botón – Si activa esta opción aparecerán varios ajustes de personalización para el botón, que le permitirán cambiar la apariencia.
- Alineación del botón – Aquí puede elegir la posición del botón respecto de la columna que lo contiene: izquierda, derecha o centrada.
- Tamaño de texto de Botón – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
- Color de texto de Botón – De manera predeterminada, los botones tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.
- Color de fondo de Botón – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
- Ancho del borde de Botón – Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.
- Color del borde de Botón – De manera predeterminada, los bordes tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.
- Radio del borde de Botón – El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.
- Espacio entre letras de Botón – El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Fuente de Botón – Puede cambiar la fuente del texto del botón, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Peso de fuente – Esto controla el peso de la fuente del texto del botón. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
- Estilo de fuente – Esto controla el estilo de la fuente del texto del botón. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
- Mostrar icono de Botón – Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.
- Icono de Botón – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
- Color de icono de Botón – De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.
- Ubicación de icono de Botón – Puede elegir mostrar el icono del lado derecho o izquierdo.
- Solo mostrar icono al posar el puntero en el Botón – De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.
- Color de texto del Botón al posar el puntero – Puede elegir el color del texto del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Color de fondo del Botón al posar el puntero – Puede elegir el color de fondo del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Color de borde del Botón al posar el puntero – Puede elegir el color de borde del botón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Radio de borde del Botón al posar el puntero – Puede elegir el radio de borde del botón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
- Espacio entre letras del Botón al posar el puntero – Puede elegir el espacio entre letras del botón al posar el puntero del ratón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
- Alineación del botón – Aquí puede elegir la posición del botón: alineado a la izquierda, al centro o a la derecha.
- Sombra de texto de Botón – Elija un estilo de sombra para activar en el texto del botón. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
- Sombra de botón – Use estos ajustes para añadir una sombra en el botón. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición resepecto del borde (interior o exterior).
Tamaño
- Ancho – De manera predeterminada, el ancho del módulo está asignado al 100% de la columna que lo contiene. Si desea modificar ese ancho puede hacerlo usando el control deslizante. Por ejemplo, un valor de 50% limitará el ancho del módulo a la mitad de la columna que lo contiene.
- Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
Espaciado
- Margen personalizado – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
- Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
- Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
- Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
- Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
- Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
- Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
- Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
- Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Animación
- Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
- Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
- Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
- Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
- Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
- Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
- Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
- Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salidad de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.
Opciones avanzadas
Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado a la sección, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar la sección dentro de la hoja de estilos del tema hijo.
- ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
- Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos. Puede añadir múltiples clases, separadas por un espacio. Estas clases pueden ser usadas en el tema hijo o en el recuadro CSS personalizado para añadir a la página (desde los ajustes de la página) o al sitio entero (desde las opciones del tema).
- CSS personalizado – Puede aplicar CSS personalizado al módulo desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.
- Relación del botón – Especifique el valor del atributo
rel
del enlace del botón. El atributorel
especifica la relación entre el documento actual y el documento vinculado. - Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.
Opciones de contenido de tabla individual
- Título – El título que escriba aquí se mostrará para esta opción de precios. (Por ejemplo: Desarrollador).
- Subtítulo – El subtítulo que escriba aquí aparecerá debajo del título (Por ejemplo: El más popular).
- Moneda – Escriba aquí el símbolo de moneda.
- Por – Si el precio se basa en una suscripción, escriba el período de pago aquí. (Por ejemplo: Anual, Año, etc.).
- Precio – Escriba el valor del producto aquí.
- Texto del botón – Defina el texto del botón aquí.
- Contenido – En este campo puede escribir la lista de características que incluye o no el producto o plan ofrecido. Separe cada elemento de la lista en una línea aparte y comience con un símbolo + para una característica incluida, o un símbolo – para una característica no incluida.
- URL del botón – En la parte inferior de cada tabla puede insertar un botón de Llamado a la acción, si escribe una URL válida en este campo. Deje este campo y el de Texto del botón en blanco si no desea mostrar un botón dentro de la tabla de precios.
- Fondo – Aquí puede definir un fondo para la tabla. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
Opciones de diseño de tabla individual
Diseño
- Destacar esta tabla – Elija si desea destacar la tabla o no. Destacar una tabla la hace resaltar del resto.
Excluir elemento
- Color de elemento excluido – Para los elementos de la lista que haya definido como excluidos (con el signo -), puede usar un color distinto con esta opción. Por ejemplo, puede usar un color rojo, o reducir la opacidad para diferenciarlo de los elementos que sí están incluidos.
Texto
- Orientación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
- Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
- Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
- Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
- Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
- Color de sombra de texto – Elija el color de la sombra del selector.
Título Texto
- Fuente de Título – Puede cambiar la fuente del texto del título, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
- Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Contenido Texto
- Fuente de Contenido – Puede cambiar la fuente del texto del contenido, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Alineación del texto de Contenido – Esto controla la alineación del texto del contenido: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Contenido – Aquí puede ajustar el tamaño del texto del contenido. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Contenido – Si desea cambiar el color de texto del contenido, elija el color del selector en esta opción.
- Espacio entre letras de Contenido – El espacio entre letras es la separación entre cada uno de los caracteres del texto del contenido. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Contenido – La altura de línea afecta el espacio entre cada una de las líneas de texto del contenido. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Contenido – Elija un estilo de sombra para activar en el texto del contenido. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
- Color de texto del subtítulo de la tabla destacada – Si cambia el color de fondo del encabezado de la tabla destacada, puede que quiera cambiar también el color del texto del subtítulo para un mejor contraste.
Subtítulo Texto
- Fuente de Subtítulo – Puede cambiar la fuente del texto del título, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Alineación del texto de Subtítulo – Esto controla la alineación del texto del subtítulo: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Subtítulo – Aquí puede ajustar el tamaño del texto del subtítulo. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Subtítulo – Si desea cambiar el color de texto del subtítulo, elija el color del selector en esta opción.
- Espacio entre letras de Subtítulo – El espacio entre letras es la separación entre cada uno de los caracteres del texto del subtítulo. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Subtítulo – La altura de línea afecta el espacio entre cada una de las líneas de texto del subtítulo. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Subtítulo – Elija un estilo de sombra para activar en el texto del subtítulo. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Moneda & Frecuencia Texto
- Fuente de Moneda & Frecuencia – Puede cambiar la fuente del texto de la moneda y la frecuencia del plan, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Tamaño de texto de Moneda & Frecuencia – Aquí puede ajustar el tamaño del texto de la moneda y la frecuencia del plan. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Moneda & Frecuencia – Si desea cambiar el color de texto de la moneda y la frecuencia del plan, elija el color del selector en esta opción.
- Espacio entre letras de Moneda & Frecuencia – El espacio entre letras es la separación entre cada uno de los caracteres del texto de la moneda y la frecuencia del plan. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Moneda & Frecuencia – La altura de línea afecta el espacio entre cada una de las líneas de texto de la moneda y la frecuencia del plan. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Moneda & Frecuencia – Elija un estilo de sombra para activar en el texto de la moneda y la frecuencia del plan. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Precio Texto
- Color del precio de la tabla destacada – Si cambia el color de fondo de la tabla destacada, puede que quiera cambiar también el color del texto para un mejor contraste.
- Fuente de Precio – Puede cambiar la fuente del texto del precio, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Alineación del texto de Precio – Esto controla la alineación del texto del precio: izquierda, derecha, centrada o justificada.
- Tamaño de texto de Precio – Aquí puede ajustar el tamaño del texto del precio. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
- Color de texto de Precio – Si desea cambiar el color de texto del precio, elija el color del selector en esta opción.
- Espacio entre letras de Precio – El espacio entre letras es la separación entre cada uno de los caracteres del texto del precio. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Altura de línea de Precio – La altura de línea afecta el espacio entre cada una de las líneas de texto del precio. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Sombra de texto de Precio – Elija un estilo de sombra para activar en el texto del precio. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.}
Botón
- Usar estilos personalizados para Botón – Si activa esta opción aparecerán varios ajustes de personalización para el botón Responder, que le permitirán cambiar la apariencia.
- Alineación del botón – Aquí puede elegir la posición del botón respecto de la columna que lo contiene: izquierda, derecha o centrada.
- Tamaño de texto de Botón – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
- Color de texto de Botón – De manera predeterminada, los botones tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.
- Color de fondo de Botón – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
- Ancho del borde de Botón – Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.
- Color del borde de Botón – De manera predeterminada, los bordes tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.
- Radio del borde de Botón – El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.
- Espacio entre letras de Botón – El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
- Fuente de Botón – Puede cambiar la fuente del texto del botón, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
- Mostrar icono de Botón – Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.
- Icono de Botón – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
- Color de icono de Botón – De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.
- Ubicación de icono de Botón – Puede elegir mostrar el icono del lado derecho o izquierdo.
- Solo mostrar icono al posar el puntero en el Botón – De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.
- Color de texto del Botón al posar el puntero – Puede elegir el color del texto del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Color de fondo del Botón al posar el puntero – Puede elegir el color de fondo del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Color de borde del Botón al posar el puntero – Puede elegir el color de borde del botón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
- Radio de borde del Botón al posar el puntero – Puede elegir el radio de borde del botón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
- Espacio entre letras del Botón al posar el puntero – Puede elegir el espacio entre letras del botón al posar el puntero del ratón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
- Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
- Esquinas redondeadas – Aquí puede controlar el radio de la esquina de la tabla individual. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
- Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
- Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
- Color del borde – Esta opción afecta al color del borde de la tabla individual. Elija un color personalizado del selector para aplicarlo.
- Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
- Sombra – Use estos ajustes para añadir una sombra en la tabla individual. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
- Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Opciones avanzadas de tabla individual
- CSS personalizado – Puede aplicar CSS personalizado al módulo desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.
- Relación del botón – Especifique el valor del atributo
rel
del enlace del botón. El atributorel
especifica la relación entre el documento actual y el documento vinculado.
Cómo obtener ayuda
No dude en ponerse en contacto con nosotros en Soporte si necesita ayuda.