Lo más destacado del complemento Divi: Personalizador de estilo de formularios Caldera para Divi y Extra

Caldera Forms hace un gran trabajo al integrarse con el estilo de su sitio web. ¿Qué pasaría si quisieras darle estilo usando las conocidas herramientas de estilo de Divi y Extra Theme Customizer? Puede hacer esto con un complemento de terceros llamado Caldera Forms Style Customizer para Divi y Extra.

Caldera Forms se puede diseñar usando las opciones estándar del Personalizador de temas, sin embargo, estas opciones dan estilo al tema. Esto significa que si cambia el estilo del texto de su formulario, también cambia el estilo del texto del cuerpo de su sitio web. Si quisiera diseñar sus formularios por separado de su contenido, normalmente tendría que diseñar a mano con CSS. Caldera Forms Style Customizer para Divi y Extra resuelve ese problema agregando características de estilo al Theme Customizer.

En este complemento destacado, echaremos un vistazo al personalizador de estilo de formularios de Caldera para el complemento Divi y Extra y veremos lo fácil que es de usar. Este complemento de terceros se puede comprar a través de Caldera Forms. Como sugiere el nombre, funciona tanto con Divi como con Extra.

Instalación y Activación

Sube y activa el complemento como de costumbre. No hay configuraciones para ajustar. Las funciones están listas para usar.

Personalización de un formulario

He insertado el formulario de contacto predeterminado en una página con todo el estilo predeterminado. Haré todos mis ajustes en este formulario de uno en uno. Luego veremos uno o dos ejemplos.

Las nuevas funciones de estilo se agregan al personalizador de temas. Abra el Personalizador de temas (o el Personalizador de módulos ; ambos funcionan) y haga clic en Personalizador de estilos de Caldera Forms .

Esto agrega 20 nuevas pestañas de personalización para personalizar cada aspecto del formulario, incluido el texto, los botones, los campos, los interruptores de palanca, el selector de fechas, las rutas de navegación, etc. Aquí hay un vistazo a cada configuración.

Campos de texto

Campos de texto cambia el color del texto, el marcador de posición y el borde, así como el ancho del borde, el radio del borde y la altura de una sola línea de los campos.

Colocar el cursor sobre los campos de texto

Al colocar el cursor sobre los campos de texto, se cambian los colores del texto, el campo y el borde.

Enfoque de campos de texto

Enfoque de campos de texto cambia el color del texto, el fondo y el borde del campo que tiene el enfoque. En este ejemplo, el campo en el centro tiene el cursor, pero el campo con el fondo oscuro tiene el foco.

Seleccionar desplegable

La selección desplegable personaliza los colores de fondo, texto, flechas y bordes. También puede ajustar el ancho y el radio del borde.

Desplegable Seleccionar Desplazamiento

Dropdown Select Hover controla el color del fondo, el texto, la flecha y el borde al pasar el mouse.

Casillas de verificación y botones de opción

Casillas de verificación y botones de opción ajustan el color de los elementos seleccionados de sus casillas de verificación y botones de opción.

Interruptores de palanca

Conmutadores de palanca ajusta los colores del fondo, la fuente y el borde del conmutador seleccionado y no seleccionado individualmente. También puede ajustar el ancho del borde y el radio de ambos interruptores a la vez.

Interruptores de palanca Hover

Interruptores de palanca Hover ajusta los colores del fondo, la fuente y el borde del interruptor seleccionado y no seleccionado de forma independiente. Este es el conmutador no seleccionado.

El azul es el interruptor seleccionado.

Botón de enviar

Enviar botón controla el fondo, la fuente y los colores del borde, y el radio del borde, el ancho del botón y su ubicación. También puede ajustar el tamaño de la fuente y el espaciado entre letras. Una función de transformación de texto cambia el caso del texto. Elija minúsculas, mayúsculas, mayúsculas, iniciales o heredar.

Enviar botón flotante

Enviar botón de desplazamiento controla los colores de desplazamiento del fondo, la fuente y el borde.

Botón de reinicio

El botón Restablecer controla los colores de fondo, fuente y borde. También puede ajustar el tamaño de la fuente y el espaciado entre letras, el ancho del botón, la posición del botón, el ancho del borde y el radio del borde. Este también tiene transformación de texto.

Restablecer botón de desplazamiento

Restablecer botón Hover ajusta los colores de los botones para el fondo, el texto y el borde.

Otros botones

Caldera tiene varios otros tipos de botones. Otros botones controla todo excepto Enviar y Restablecer. Ajuste los colores de la fuente, el borde y el fondo, y ajuste el ancho y el radio del borde. En este ejemplo, he creado los botones Anterior y Siguiente.

Otros botones Hover

Otros botones Hover controla los colores de hover para las fuentes, el borde y el fondo.

Selector de fechas

El selector de fecha incluye colores regulares y de desplazamiento dentro de la misma pestaña. Ajusta los colores de la fuente y el fondo. En este ejemplo, estoy colocando el cursor sobre el 10 y el 12 está seleccionado.

Cargar lista de archivos

Cargar lista de archivos controla los colores del fondo y el texto dentro de la lista de archivos cargados.

Salto de sección

Salto de sección controla el color del salto de sección, el ancho del borde y los márgenes superior e inferior.

Migas de pan

Breadcrumbs te permite elegir los colores de las fuentes tanto para la página activa como para otros enlaces, el separador, el fondo y el borde. Ajuste el ancho y el radio del borde.

Alerta de éxito

Alerta de éxito ajusta la fuente, el fondo y los colores del borde, y el radio y ancho del borde. También ajusta la altura de la caja.

Diverso

Varios le brinda control sobre los colores del ícono requerido, los campos con error, el texto de descripción, el color de la tarjeta de crédito y la posición del ícono de la tarjeta de crédito. El texto de descripción incluye el tamaño de fuente, el espaciado entre letras y las opciones de transformación de texto. He elegido mayúsculas.

Ejemplos de

Creé un formulario de carga de currículum (en realidad, está integrado en Caldera Forms, pero hice clic en el botón para seleccionarlo) y lo configuré como modal. Primero quiero diseñar la página con Divi Builder.

Agregué una imagen de fondo y seleccioné colores que contrastan en lugar de mezclarse con el fondo.

Este usa la misma configuración con un fondo diferente. Esta vez no usé el formulario en un modal. En lugar de tener un fondo blanco, los campos del formulario se colocan directamente sobre la imagen.

Importación y exportación

Es fácil importar o exportar los estilos de Caldera Forms que ha creado en el personalizador. En Dashboard, vaya a Caldera Forms , Styles - Import / Export . Esto importa y exporta los estilos como un archivo JSON, lo que le permite usar fácilmente sus estilos de Caldera Form en cualquier sitio web que use este complemento. Todo su estilo se sobrescribirá con el estilo del archivo importado.

Licencia y soporte

El complemento se puede comprar como una licencia de un año (anual recurrente). La licencia permite que el complemento se utilice en uno, cinco o quince sitios web (según el nivel que elija) e incluye un año de soporte y actualizaciones.

Pensamientos finales

Encontró este complemento fácil de usar. La configuración del Personalizador es intuitiva. Están bien etiquetados y organizados de una manera que tenga sentido. No tuve problemas para encontrar ninguno de los ajustes que quería. Me gustaría ver una manera fácil de volver a la configuración predeterminada de una vez o hacer ajustes globales (como aumentar o disminuir la oscuridad general de todos los colores). Probablemente no sea realista, pero suena interesante.

No es posible diseñar formularios individuales con la configuración del Personalizador. Todas las formas utilizan este mismo estilo como una configuración global y deberán diseñarse de forma individual utilizando las funciones de estilo de Caldera. Ésta es la naturaleza del personalizador de temas. Si está interesado en diseñar sus Caldera Forms a nivel mundial, no hay manera más fácil de hacerlo que usar Caldera Forms Style Customizer para Divi y Extra.

Queremos escuchar de ti. ¿Ha probado el personalizador de estilo Caldera Forms para Divi y el complemento Extra? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Irina Strelnikova / shutterstock.com