El Campo fronterizo proporciona a un widget personalizado un conjunto completo de controles de borde en una sola gota: un menú desplegable Tipo de borde, entradas de ancho de borde por lado y un selector de color de borde. Dentro de los complementos maestros Creador de widgets, agrega el campo una vez, coloca su código corto en tu CSS y cualquiera que edite el widget en Elementor puede rediseñar el borde sin tocar el código.
El control fronterizo apoya Condiciones como todos los campos, puede permanecer oculto hasta que se activa una palanca de borde y el generador representa la salida del token a través del generador Motor de plantilla de sintaxis de ramita. Ambas guías cubren los detalles.
El campo se asigna directamente al CSS border taquigrafía. Cualquier tipo, ancho y color que el usuario elija en el panel, se imprime en su hoja de estilo dondequiera que coloque el token.
Lo que hace el campo Fronterizo #
Un campo Border representa el control del grupo de bordes familiar de Elementor en el panel de opciones de su widget. Seleccione el widget y aparecerán tres controles relacionados:
- Tipo de borde: un menú desplegable con Predeterminado, Ninguno, Sólido, Doble, Punteado, Discontinuo y Ranura.
- Ancho del borde: Entradas superior, derecha, inferior e izquierda con un enlace para configurar las cuatro a la vez, además de un ícono de dispositivo para valores responsivos.
- Color del borde: un selector de color con acceso a tus colores globales.
Los controles de ancho y color permanecen ocultos hasta que el usuario elige un tipo de borde que no sea el predeterminado o el ninguno, lo que mantiene el panel limpio cuando no se utiliza ningún borde. Este es el mismo patrón que el Campo de texto y los otros campos del Creador de widgets: elimine el campo, asígnele un nombre y use el token. Si es nuevo en la creación de widgets, comience con Descripción general del creador de widgets primero.
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.
- Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de encabezado con un
<h2 class="border-title">en su HTML.
Cómo agregar un campo Border #
En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Frontera campo. Se encuentra cerca del final de la lista, entre Fondo y Sombra de texto.
Arrastre el campo Border a una sección debajo del Contenido, Estilo, sau Avanzado pestaña. El estilo es el hogar natural para él, aunque funciona en cualquier lugar. Una vez que aterriza, las opciones del campo 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 fronterizos #
Seleccione el campo Borde para abrir su configuración. Siguen el mismo diseño que cualquier otro campo del Creador de widgets.
- Etiqueta: el texto que se muestra encima del control en Elementor, “Border” de forma predeterminada.
- Nombre: el identificador único del campo. Debe contener sólo letras, números y guiones bajos. Un campo nombrado
borderte da el{{border}}código corto. - Descripción: texto auxiliar opcional que se muestra debajo del control.
- Valoarea implicită: el borde con el que comienza el widget, escrito como taquigrafía CSS, por ejemplo
1px solid #333. Déjelo vacío y el widget se enviará sin borde hasta que un usuario establezca uno. - Mostrar etiqueta y Bloc de etichete: la etiqueta estándar se alterna, además de los controles habituales de Separador y Condiciones más abajo.
Conecte el campo a su CSS #
El token del campo Border pertenece a tu hoja de estilo, no a tu HTML. Abra el CSS tab y úselo como valor del border propiedad en cualquier selector que deba llevar el borde. Con nuestro ejemplo de encabezado:
- La regla dice
border: {{border}};dentro del.border-titleselector. - En el momento del renderizado, el token se expande a la taquigrafía completa que el usuario eligió, como
5px solid #e02b20.
Hacer clic Guardar configuración cuando la regla está vigente. Puede colocar el mismo token en cualquier selector del widget, de modo que un control fronterizo pueda delinear una tarjeta, su imagen o ambas.
Utilice el control de fronteras en Elementor #
Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. Seleccione el widget y el control Border aparecerá en su panel con la etiqueta que establezca.
Elija un tipo de borde #
El Tipo de borde el menú desplegable enumera Predeterminado, Ninguno, Sólido, Doble, Punteado, Discontinuo y Ranura. Elija cualquier tipo que no sea Predeterminado o Ninguno y debajo aparecerán dos controles más: Ancho de borde y Color de borde. La vista previa se actualiza tan pronto como lo elija, por lo que al elegir Discontinuo se dibuja un contorno discontinuo alrededor del widget de inmediato.
Establezca el ancho del borde #
El Ancho del borde el control toma valores separados de Arriba, Derecha, Abajo e Izquierda. Mantenga el ícono de enlace encendido para cambiar los cuatro lados juntos o desvincularlo para obtener bordes desiguales, como una parte superior e inferior gruesas con lados delgados. El ícono del dispositivo al lado de la etiqueta le permite establecer diferentes anchos por punto de interrupción.
Elige el color del borde #
El Color del borde el control abre el selector de color de Elementor. Utilice el icono del globo terráqueo para extraer de sus colores globales o elija un valor personalizado con el selector y la entrada hexadecimal, RGBA o HSLA.
Cada cambio aterriza en vivo en la vista previa. En nuestro ejemplo, el encabezado termina con un borde rojo sólido, 5 píxeles arriba e abajo y 3 píxeles a los lados.
Casos de uso comunes #
- Contornos de tarjetas y cajas donde cada sitio necesita su propio peso y color de borde.
- Titulares destacados como el título en caja en este ejemplo.
- Marcos de imagen en widgets de equipo, portafolio o producto.
- Estilos de botones donde una variante de contorno necesita un borde editable por el usuario.
- Cuadros de llamadas y avisos que cambian entre estilos sólidos y discontinuos.
Consejos para trabajar con el campo Frontera #
- Coloque el token en CSS, no en HTML. El código corto se expande a un valor CSS, por lo que solo tiene sentido como valor de propiedad
border: {{border}};. - Establezca un valor predeterminado en forma abreviada. Algo como
1px solid #333hace que el widget parezca terminado antes de que alguien abra el panel. - Combínalo con el radio del borde. El campo cubre tipo, ancho y color. Agregue un campo Dimensiones o un fijo
border-radiusregla para esquinas redondeadas. - Recuerde que Ninguno es una elección real. Los usuarios pueden desactivar el borde del panel, así que no confíe en el borde para mantener unido el diseño.
- Reutilice el token donde ayude. Lo mismo
{{border}}value puede diseñar varios selectores y todos siguen un control.
Preguntas frecuentes #
¿cuál es el campo Border en Master Addons Widget Builder?
El campo Border agrega el control del grupo de bordes de Elementor a un widget personalizado: un menú desplegable Tipo de borde, entradas de Ancho de borde por lado y un selector de Color de borde. Su código corto imprime la abreviatura del borde CSS resultante en la hoja de estilo de su widget.
¿dónde coloco el código corto de borde?
En la pestaña CSS del Widget Builder, como valor de una propiedad de borde. Un campo llamado borde se utiliza como borde: {{border}}; en el selector que debería llevar el borde. No pertenece al editor HTML.
¿qué tipos de fronteras admite el control?
El menú desplegable Tipo de borde ofrece Predeterminado, Ninguno, Sólido, Doble, Punteado, Discontinuo y Ranura. Al elegir cualquier tipo, excepto Predeterminado o Ninguno, se revelan los controles de Ancho de borde y Color de borde debajo del menú desplegable.
¿Pueden los usuarios establecer un ancho de borde diferente en cada lado?
Sí. El control Border Width tiene entradas separadas superior, derecha, inferior e izquierda. La palanca de enlace cambia las cuatro juntas; desvincularlo para establecer valores desiguales, como 5 píxeles arriba e abajo con 3 píxeles a los lados.
¿por qué no veo el ancho y el color del borde en el panel?
Esos controles permanecen ocultos mientras el tipo de borde es predeterminado o ninguno. Elija Solid, Dashed o cualquier otro tipo visible y aparecerán ambos controles. Si falta todo el control de Border, recargue el editor Elementor para que recoja el widget guardado.
Envolviendo #
El campo Border del Widget Builder incluye un menú desplegable de tipo borde, anchos responsivos por lado y un selector de color en una sola arrastrar y soltar. Nombra el campo, establece border: {{border}}; en su CSS, las decisiones fronterizas salen de su hoja de estilo y entran en el panel Elementor donde los editores pueden manejarlas. Combínalo con el Campo de texto y a Divisor para crear un panel de widgets que cubra contenido y estilo en un solo lugar. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.
