Dejar que un editor vuelva a colorear un widget sin abrir el CSS es una de las cosas más útiles que puede hacer un widget personalizado. El Campo de color en los complementos maestros Creador de widgets coloca el selector de color de Elementor en su panel de widgets, completo con colores globales y un canal alfa opcional. Usted nombra el campo, elige dónde vive y su código corto ingresa directamente a su CSS.
Como todos los campos de Widget Builder, el campo Color es compatible Condiciones para visibilidad del panel. Su token es representado por el Motor de plantilla de sintaxis de ramita, que es lo que te permite imprimir el color elegido en cualquier lugar de tu CSS. Ambas guías cubren la configuración y las limitaciones.
Este es un control de estilo, por lo que en la demostración pasa por debajo Estilo pestaña. Sin embargo, el campo funciona igual sin importar en qué pestaña lo coloques. Donde vive es tu llamada y todo se reduce a cómo quieres organizar los controles de tu widget personalizado.
Qué hace el campo Color #
El campo Color representa el selector de color nativo de Elementor en el panel de opciones de su widget. Los editores hacen clic en la muestra, eligen un color (o un color global del tema) y su widget genera ese valor dondequiera que coloque el código corto correspondiente. La mayoría de las veces eso significa una propiedad CSS como color, background, sau border-color.
Debido a que utiliza el propio selector de Elementor, los editores obtienen los controles que ya conocen: la muestra, el cuentagotas, los colores recientes y la paleta de colores global. Enciende el canal alfa y también pueden establecer transparencia.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Se abre un widget personalizado en el editor Widget Builder. ¿Primero? Comience con el Descripción general del creador de widgets.
Cómo agregar un campo de color #
En el editor Widget Builder, busque el panel de campos a la izquierda y arrástrelo Color campo en una sección. Dado que el color es una elección de estilo, el Estilo tab es el hogar natural, pero el Contenido y Avanzado las pestañas también lo aceptan. Una vez que el campo está en su lugar, sus opciones se abren a la izquierda y su código corto aparece en Documentación barra lateral al lado del editor de código.
Se explican las opciones de campos de color #
Seleccione el campo Color para abrir su configuración. La mayoría de las opciones coinciden con los otros campos, además de una que es específica del color.
- Etiqueta: el texto que se muestra encima del selector en Elementor, por ejemplo “Color del texto”.
- Nombre: el identificador único del campo. Sólo letras, números y guiones bajos. Este se convierte en su código corto, por lo que se llama un campo
colorte da{{color}}. - Descripción: texto auxiliar opcional que se muestra debajo del control.
- Alfa: active esto para permitir la transparencia en el selector. Con él desactivado, los editores solo pueden elegir colores sólidos. Habilite cuando necesite valores rgba, como una superposición semitransparente.
- Valoarea implicită: el color inicial como valor hexadecimal, como por ejemplo
#FFFFFF. Configure esto para que el widget parezca terminado antes de que alguien lo toque.
Configuraciones comunes: receptivas, dinámicas y más #
Por debajo del valor predeterminado obtienes lo mismo Configuraciones comunes como todos los campos del creador: Mostrar etiqueta, bloque de etiquetas, control responsivo, soporte dinámico, interfaz disponible, separador y condiciones. El control responsivo es útil aquí si desea un color diferente por dispositivo. El Documentație de câmp text cubre cada uno de estos en detalle.
Conecte el campo a su código #
Un campo de color llamado color produce el token {{color}} en la barra lateral de Documentación. Sumérjalo en tu CSS como valor de cualquier propiedad de color. Por ejemplo, para colorear el texto del héroe:
En el editor CSS escribirías algo como .hero-content { color: {{color}}; }. Cuando el editor elige un color en Elementor, Master Addons cambia el token por ese valor y el texto vuelve a colorear en vivo. El mismo token funciona para background, border-color, o cualquier cosa que requiera un color, y puedes reutilizarlo en tantas reglas como necesites. Una cosa a tener en cuenta: mantener el token como valor total, así que color: {{color}};, no envuelto en cotizaciones, o no se aplicará el CSS.
Utilice el control de color en Elementor #
Arrastre su widget personalizado a una página y ábralo en el editor Elementor. Debajo de la pestaña donde colocó el campo, el control de color aparece como la muestra estándar con el botón de colores globales al lado. Haga clic en él, elija un color y el widget se actualizará en el lienzo.
Los editores pueden elegir un color único o hacer clic en el ícono del globo para extraer los colores globales del sitio, que mantiene widgets personalizados en la marca. Si activó el soporte dinámico, el ícono de etiquetas dinámicas también aparece aquí.
Casos de uso comunes #
- Color del texto para títulos y párrafos.
- Color de fondo para secciones, tarjetas y botones.
- Colores de borde y acento vinculado a una paleta de marcas.
- Tintes superpuestos usando el canal alfa para mayor transparencia.
- Estados flotantes cuando se combina con un segundo campo de color.
Consejos para trabajar con el campo Color #
- Colóquelo donde se ajuste a su widget. El estilo es la convención, pero el campo funciona en cualquier pestaña, así que organice los controles de la manera que tenga sentido para usted.
- Encienda Alpha solo cuando necesite transparencia. Para colores sólidos de la marca, dejarlo desactivado mantiene el selector más simple.
- Establezca un valor predeterminado sensato. Un buen valor predeterminado significa que el widget se ve bien en el momento en que se coloca en una página.
- Apóyate en los colores globales. Anime a los editores a elegir entre la paleta global para que los widgets se mantengan consistentes en todo el sitio.
- Cree el campo antes de hacer referencia a su código corto. El token existe sólo después de que el campo está en el panel.
Preguntas frecuentes #
¿cuál es el campo Color en Master Addons Widget Builder?
El campo Color agrega el selector de color de Elementor a un widget personalizado. Usted nombra el campo, coloca su código corto en su CSS y cualquier color que seleccione el editor en Elementor se aplica a su widget. Admite colores globales y un canal alfa opcional.
¿cómo uso el código corto {{color}} en mi widget personalizado?
Agregue un campo de color llamado color, luego, en el editor CSS, use el token como valor de propiedad, como .hero-content { color: {{color}}; }. Master Addons reemplaza el token con el color elegido, por lo que el widget vuelve a colorear según la elección del editor.
¿el campo Color admite transparencia?
Sí. Active la opción Alpha en la configuración del campo y el selector Elementor permitirá a los editores establecer transparencia, produciendo valores rgba. Con Alpha desactivado, el selector solo permite colores sólidos. Úselo para superposiciones o fondos semitransparentes.
¿Puedo colocar el campo Color fuera de la pestaña Estilo?
Sí. El campo Color funciona en la pestaña Contenido, Estilo o Avanzado. El estilo es la opción habitual para un control de estilo, pero dónde lo pones depende de cómo quieras organizar las opciones de tu widget personalizado.
¿Puede el campo Color utilizar los colores globales del sitio?
Sí. Debido a que utiliza el selector nativo de Elementor, los editores pueden hacer clic en el botón de colores globales y elegir de la paleta de temas. Elegir colores globales mantiene los widgets personalizados consistentes con el resto de la marca del sitio.
Envolviendo #
El campo Color del creador de widgets convierte un color codificado en un selector editable dentro de su propio widget personalizado. Nómbralo, elige si permites alfa, establece un valor predeterminado y cable {{color}} en tu CSS. Después de eso, cualquiera puede volver a colorear el widget de Elementor, con colores globales y transparencia disponibles. Echa un vistazo al resto del Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
