Die Grenzfeld Gibt einem benutzerdefinierten Widget einen vollständigen Satz von Randkontrollen in einem Drop: ein Border Type Dropdown, pro Seite Border Width Eingaben und ein Border Color Picker Inside the Master Addons Widget-builderWenn Sie das Feld einmal hinzufügen, seinen Shortcode in Ihrem CSS platzieren und jeder, der das Widget in Elementor bearbeitet, den Rand neu gestalten kann, ohne Code zu berühren.
Die Grenzkontrolle unterstützt Bedingungen Wie jedes Feld kann es also verborgen bleiben, bis ein Randumschalter eingeschaltet ist und die Token-Ausgabe über den Builder vom gerendert wird Twig-Syntax-Vorlagen-Engine. Beide Leitfäden behandeln die Details.
Das Feld wird direkt dem CSS zugeordnet border Kurzschrift. Welche Art, Breite und Farbe der Benutzer im Panel auswählt, druckt überall dort in Ihr Stylesheet, wo Sie den Token platzieren.
Was das Border-Feld tut #
Ein Border-Feld rendert die bekannte Grenzgruppensteuerung von Elementor im Optionsfeld Ihres Widgets. Wählen Sie das Widget aus und drei zugehörige Steuerelemente werden angezeigt:
- Grenztyp: Ein Dropdown mit Default, None, Solid, Double, Dotted, Dashed und Groove.
- Grenzbreite: Eingaben oben, rechts, unten und links mit einem Link-Toggle, um alle vier gleichzeitig festzulegen, sowie einem Gerätesymbol für responsive Werte.
- Randfarbe: Ein Farbwähler mit Zugriff auf Ihre globalen Farben.
Die Breiten- und Farbsteuerungen bleiben verborgen, bis der Benutzer einen anderen Randtyp als Standard oder None auswählt, der das Bedienfeld sauber hält, wenn kein Rand verwendet wird. Dies ist das gleiche Muster wie das Textfeld und die anderen Widget Builder Felder: Feld fallen lassen, benennen, Token verwenden, Wenn Sie neu beim Erstellen von Widgets sind, beginnen Sie mit dem Übersicht über Widget Builder Zuerst.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Überschriften-Widget mit einem
<h2 class="border-title">In seinem HTML.
So fügen Sie ein Border-Feld hinzu #
Scrollen Sie im Widget Builder-Editor im Feldfenster auf der linken Seite, bis Sie das gefunden haben Grenze Feld. Es sitzt am unteren Ende der Liste, zwischen Hintergrund und Textschatten.
Ziehen Sie das Feld Grenze in einen Abschnitt unter dem Inhalt, Stil, oder Fortgeschritten Tab. Stil ist die natürliche Heimat dafür, obwohl es überall funktioniert Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite und sein Shortcode wird im angezeigt Dokumentation Seitenleiste neben dem Code-Editor.
Grenzfeldoptionen erklärt #
Wählen Sie das Feld Grenze, um seine Einstellungen zu öffnen Sie folgen dem gleichen Layout wie jedes andere Feld Widget Builder.
- Etikett: Der Text, der über dem Steuerelement in Elementor, standardmäßig “Grenze”, angezeigt wird.
- Name: Die eindeutige Kennung für das Feld Es darf nur Buchstaben, Zahlen und Unterstriche enthalten Ein Feld mit dem Namen
borderGibt Ihnen die{{border}}Kurzcode. - Beschreibung: Optionaler Helfertext, der unter dem Steuerelement angezeigt wird.
- Standardwert: Der Rand, mit dem das Widget beginnt, wird beispielsweise als CSS-Kurzschrift geschrieben
1px solid #333. Lassen Sie es leer und das Widget wird ohne Rand ausgeliefert, bis ein Benutzer einen setzt. - Etikett anzeigen und Beschriftungsblock: Die Standard-Etiketten-Umschalthebel sowie die üblichen Separator- und Conditions-Steuerelemente befinden sich weiter unten.
Verbinden Sie das Feld mit Ihrem CSS #
Das Token des Border-Feldes gehört in Ihr Stylesheet, nicht in Ihr HTML. Öffnen Sie die CSS Tab und verwenden Sie es als Wert des border Eigenschaft auf welchem Selektor auch immer die Grenze tragen soll Mit unserem Überschriftenbeispiel:
- Die Regel lautet
border: {{border}};Innen die.border-titleSelektor. - Zum Zeitpunkt der Wiedergabe wird das Token auf die vom Benutzer ausgewählte vollständige Kurzschrift erweitert
5px solid #e02b20.
Klicken Sie auf Einstellungen speichern Wenn die Regel steht Sie können das gleiche Token auf einen beliebigen Selektor im Widget fallen lassen, so kann ein Border-Steuerelement eine Karte, ihr Bild oder beides umreißen.
Verwenden Sie die Grenzkontrolle in Elementor #
Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war Wählen Sie das Widget aus und die Grenzkontrolle erscheint in ihrem Panel mit der von Ihnen festgelegten Beschriftung.
Wählen Sie einen Randtyp #
Die Grenztyp Dropdown-Listen Standard, Keine, Solid, Double, Dotted, Dashed, and Groove Wählen Sie einen anderen Typ als Standard oder Keine und zwei weitere Bedienelemente erscheinen darunter: Randbreite und Randfarbe Die Vorschau aktualisiert sich, sobald Sie wählen, also zieht das Wählen von Dashed sofort eine gestrichelte Umrisslinie um das Widget.
Setzen Sie die Randbreite #
Die Grenzbreite Die Steuerung nimmt separate Werte von oben, rechts, unten und links auf Halten Sie das Link-Symbol an, um alle vier Seiten gemeinsam zu ändern, oder entkoppeln Sie es für ungleichmäßige Ränder, wie eine dicke Ober - und Unterseite mit dünnen Seiten Das Gerätesymbol neben dem Etikett lässt Sie verschiedene Breiten pro Haltepunkt einstellen.
Wählen Sie die Randfarbe #
Die Randfarbe Steuerung öffnet den Farbwähler von Elementor Verwenden Sie das Globussymbol, um aus Ihren globalen Farben zu ziehen, oder wählen Sie einen benutzerdefinierten Wert mit dem Picker und Hex, RGBA oder HSLA-Eingang aus.
Jede Änderung landet live in der Vorschau, in unserem Beispiel endet die Überschrift mit einem durchgezogenen roten Rand, 5 Pixel oben und unten und 3 Pixel an den Seiten.
Häufige Anwendungsfälle #
- Karten - und Kastenumrisse Wo jede Seite ihr eigenes Randgewicht und ihre eigene Farbe benötigt.
- Hervorgehobene Schlagzeilen Wie die Boxüberschrift in diesem Beispiel.
- Bilderrahmen auf Team-, Portfolio- oder Produkt-Widgets.
- Knopfstile Dabei benötigt eine Gliederungsvariante einen benutzerbearbeitbaren Rand.
- Callout- und Aushangboxen Die zwischen soliden und gestrichelten Stilen wechseln.
Tipps für die Arbeit mit dem Border-Feld #
- Legen Sie den Token in CSS, nicht in HTML. Der Shortcode erweitert sich auf einen CSS-Wert, macht also nur als Eigenschaftswert wie Sinn
border: {{border}};. - Legen Sie einen Standardwert in Kurzform fest. So etwas wie
1px solid #333Widget fertig aussehen lässt, bevor jemand das Panel öffnet. - Kombinieren Sie es mit Grenzradius. Das Feld umfasst Typ, Breite und Farbe. Fügen Sie ein Maßfeld oder ein festes Feld hinzu
border-radiusRegel für abgerundete Ecken. - Denken Sie daran, dass keines eine echte Wahl ist. Benutzer können den Rand vom Panel ausschalten und verlassen sich daher nicht auf den Rand, um das Layout zusammenzuhalten.
- Verwenden Sie den Token dort wieder, wo er hilft. Das gleiche
{{border}}Wert kann mehrere Selektoren stilisieren, und sie folgen alle dem einen Steuerelement.
Häufig gestellte Fragen #
Was ist das Feld Border im Master Addons Widget Builder?
Das Border-Feld fügt die Grenzgruppensteuerung von Elementor zu einem benutzerdefinierten Widget hinzu: eine Grenztyp-Dropdown-Datei, Randbreiteneingaben pro Seite und einen Grenzfarben-Picker. Sein Shortcode gibt die resultierende CSS-Grenzenkurzschrift in das Stylesheet Ihres Widgets aus.
Wo platziere ich den Border Shortcode?
Im Reiter CSS des Widget Builders, als Wert einer Border-Eigenschaft Als Border wird ein Feld namens Border verwendet: {{border}}; auf dem Selektor, der den Border tragen soll Es gehört nicht in den HTML-Editor.
Welche Grenztypen unterstützt die Kontrolle?
Der Border Type Dropdown bietet Standard, None, Solid, Double, Dotted, Dashed, and Groove Die Auswahl eines beliebigen Typs außer Standard oder None zeigt die Border Width - und Border Color-Kontrollen unterhalb des Dropdowns.
Können Benutzer auf jeder Seite eine andere Randbreite festlegen?
Ja. Die Grenzbreitensteuerung verfügt über separate Eingänge oben, rechts, unten und links. Der Link-Toggle ändert alle vier zusammen; Entkoppeln Sie es, um ungleichmäßige Werte festzulegen, z. B. 5 Pixel oben und unten mit 3 Pixeln an den Seiten.
Warum sehe ich nicht Border Width und Color im Panel?
Diese Kontrollen bleiben verborgen, während Border Type default oder None ist Wählen Sie Solid, Dashed oder einen anderen sichtbaren Typ und beide Steuerelemente erscheinen Wenn die gesamte Border-Steuerung fehlt, laden Sie den Elementor-Editor neu, damit er das gespeicherte Widget aufnimmt.
Einwickelnd #
Das Widget Builder Border-Feld packt einen Randtyp-Dropdown, responsive Breiten pro Seite und einen Farbwähler in einem einzigen Drag & Drop. Nennen Sie das Feld, setzen Sie border: {{border}}; In Ihrem CSS, und Grenzentscheidungen bewegen sich aus Ihrem Stylesheet heraus und in das Elementor-Panel, wo Redakteure sie handhaben können Kombinieren Sie es mit dem Textfeld und ein Trennwand Widget-Panel zu bauen, das Inhalt und Stil an einer Stelle abdeckt Den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.
