Abmessungen

Die Maße Feld Gibt einem benutzerdefinierten Widget die bekannte Abstandskontrolle mit vier Eingängen von Elementors Registerkarte Erweitert: Werte oben, rechts, unten und links mit einem Link-Symbol, das sie synchron hält. Innerhalb der Master-Addons Widget-builderEs ist das Feld, nach dem Sie greifen, wann immer Polsterung, Rand oder ein Randradius pro Ecke vom Panel aus bearbeitet werden können, anstatt in Ihrem Stylesheet fest codiert zu werden.

Wie jedes Widget Builder-Steuerelement unterstützt Dimensions BedingungenSie können also Abstandsoptionen nur dann anzeigen, wenn sie gelten Die Token-Ausgabe über den Builder läuft durch die Twig-Syntax-Vorlagen-Engine; Beide Leitfäden behandeln die Details und Einschränkungen.

Der Wert, den es speichert, trägt alle vier Seiten plus die Einheit, und Ihr CSS-Panel druckt jedes Stück mit Namen. Diese Rechtschreibung richtig zu machen, ist der ganze Trick, und es gibt ein wissenswertes Verhalten speziell für dieses Feld, bevor Sie es verkabeln: Das einfache Auswahlfeld des Erbauers reicht nicht für eine Maßsteuerung aus.

Was das Feld Dimensionen bewirkt #

• Rendert die Vier-Eingang-Steuerung Für oben, rechts, unten und links, mit dem Link-Symbol, das einen Wert auf allen Seiten widerspiegelt.
• Speichert jede Seite plus das Gerät In einem einzigen Wert liest Ihr CSS mit Punktnotation.
• Bietet einen Einheitenumschalter Über die von Ihnen zulässigen Einheiten hinweg, z. B. px, % und em.
• Kann begrenzen, welche Seiten zeigen Durch die Option zulässige Abmessungen bis hin zu Eingaben nur horizontal oder nur vertikal.
• Unterstützt responsive Werte Jeder Haltepunkt behält also seinen eigenen Abstand.

Wenn Sie noch kein Widget erstellt haben, ist die Übersicht über Widget Builder Grundlagen abdeckt; dort beginnen.

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 ist Unser Beispiel ist ein Preiskarten-Widget, dessen .price-card Box sollte es Redakteuren ermöglichen, die innere Polsterung einzustellen.

So fügen Sie ein Feld Abmessungen hinzu #

Öffnen Sie das Feldfenster links im Widget Builder-Editor und finden Sie die Abmessungen Feld, aufgelistet mit den anderen CSS-Wertfeldern wie Slider.

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, die übliche Heimat für die Abstandskontrolle Sobald es landet, öffnen sich links die Optionen des Feldes.

Abmessungen Feldoptionen erklärt #

• Etikett: Der Text neben dem Steuerelement in Elementor, zum Beispiel “Card Padding”.
• Name: Die eindeutige Kennung, auf die sich Ihr CSS bezieht, sind beispielsweise nur Buchstaben, Zahlen und Unterstriche pad.
• Standard: Der Startwert, Halten oben, rechts, unten, links, die Einheit und ob die Seiten verbunden beginnen.
• Größeneinheiten: Die Einheiten, zwischen denen der Benutzer wechseln kann, wie z. B. px, % und em.
• Zulässige Abmessungen: Welche Eingaben erscheinen “Alle” zeigen vier Seiten; “horizontal” zeigt nur links und rechts; “vertikal” zeigt nur oben und unten; eine benutzerdefinierte Liste wählt bestimmte Seiten aus.
• Responsiv: Fügt das Gerätesymbol hinzu, damit Desktop, Tablet und Mobiltelefon getrennte Werte beibehalten.
• Beschreibung, Etikett anzeigen, Trennzeichen und Bedingungen funktionieren hier genauso wie in jedem anderen Feld.

Verbinden Sie den Dimensionswert mit Ihrem CSS #

Der gespeicherte Wert ist ein Array mit den Schlüsseln top, right, bottom, left, unit, und isLinked. Im CSS-Panel alle vier Seiten ausschreiben und nach jeder die Einheit wiederholen:

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

Mit 24 auf jeder Seite und ausgewähltem px gibt die Regel als wieder padding: 24px 24px 24px 24px;. Entkoppeln Sie die Seiten im Panel und jeder Token trägt seine eigene Nummer Das gleiche Muster deckt ab margin Und, Seite an Seite pro Ecke, und border-radius. Eine CSS-Quirk, die es wert ist, beachtet zu werden, wenn Sie % als Einheit anbieten: Die prozentuale Auffüllung löst sich gegen die Breite des Elements auf, selbst für oben und unten, und die Redakteure werden das nicht erwarten.

Achtung: das Feld Selektor des Builders gibt keine Standard-CSS-Eigenschaft für ein Dimensions-Steuerelement aus, so dass das Ausfüllen nichts ergibt Schreiben Sie die Seiten wie oben in das CSS-Panel aus, oder definieren Sie vollständige Selektoreneinträge, die die vollständige Eigenschaft enthalten; die Option einfach Selektor ist keine Verknüpfung für dieses Feld.

Verwenden Sie den Dimensions-Regler in Elementor #

Geben Sie Ihr benutzerdefiniertes Widget auf eine Seite in Elementor oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war; Neue Steuerelemente werden nie in einer veralteten Editor-Registerkarte angezeigt. Das Steuerelement erscheint mit vier Eingaben, dem Einheitenumschalter und dem Link-Symbol in seiner Ecke.

Geben Sie in eine beliebige Eingabe ein, während das Link-Symbol aktiv ist und alle vier Seiten gemeinsam aktualisiert werden. Klicken Sie auf das Symbol, um die Verknüpfung zu lösen, und jede Seite nimmt ihren eigenen Wert, wodurch Sie eine asymmetrische Polsterung erhalten, z. B. eine höhere Oberseite als die Unterseite. Mit Responsive auf speichert das Gerätesymbol separate Abstände pro Haltepunkt.

Häufige Anwendungsfälle #

• Karten - und Kartonpolsterung„die gebräuchlichste Abstandskontrolle in benutzerdefinierten Widgets.
• Abschnitts- und Verpackungsränder Damit Redakteure den vertikalen Rhythmus zwischen den Blöcken abstimmen können.
• Randradius pro Ecke, wobei die vier Werte als Ecken statt als Seiten verwendet werden.
• Knopfpolsterung, oft mit zulässigen Abmessungen, die auf horizontal beschränkt sind.
• MedienoffsetsAnstoßen eines Bildes oder Abzeichens mit Randwerten.

Tipps für die Arbeit mit dem Feld Maße #

• Buchstabieren Sie jede Seite und die Einheit. Die CSS-Panel-Verbindung besteht aus vier Token plus vier Einheiten-Token; ein blanker {{ pad }} Drucke nichts brauchbares.
• Überspringen Sie das einfache Auswahlfeld. Es gibt keine Eigenschaft für Dimensionen aus Das CSS-Panel oder ein vollständiger Auswahleintrag ist der Arbeitsweg.
• Begrenzen Sie die Seiten, wenn die Immobilie dies erfordert. Eine reine Horizontalsteuerung sorgt dafür, dass ein Tastenfeld ehrlich ist.
• Legen Sie eine verknüpfte Voreinstellung fest. Beginnend mit gleichen, verknüpften Seiten gibt Redakteuren eine vernünftige Basislinie und einen Input zum Nachdenken.
• Halten Sie den Basisabstand in Ihrem Stylesheet. Das Widget sollte beim ersten Drop genau hinschauen; Von dort aus passt sich die Steuerung dann an.
• Einschalten Responsive für Polsterung und Rand. Der Desktop-Abstand übersteht selten den Kontakt mit einem Telefonbildschirm.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Dimensions verschiebt Polsterungs, Rand - und Radiusentscheidungen aus Ihrem Stylesheet in das Panel: ein Bedienelement, vier Seiten, eine Einheit, alle namentlich in der Karteikarte CSS gedruckt Verwenden Sie es neben der Schieberfeld, die die einwertigen Längen abdeckt, für die eine vierseitige Steuerung übertrieben wäre Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.