Abmessungen

Das Feld Abmessungen fügt die Vier-Box-Abstandskontrolle von Elementor (oben, rechts, unten und links, mit einem Link-Symbol und einem Einheitsmenü) zu einem benutzerdefinierten Widget hinzu, das mit den Master-Add-ons erstellt wurde Widget-builder. Verwenden Sie es immer dann, wenn Polsterung, Rand, Randbreite oder Eckradius vom Elementor-Panel aus eingestellt werden sollten, anstatt in Ihrem CSS festgelegt zu werden.

Dimensionen ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Dimensionen bewirkt #

• Es zeigt vier Zahlenfelder im Elementor-Panel, mit eingeschaltetem Link-Icon füllt das Eintippen eines Kästchens alle vier.
• Ein Einheitenmenü ermöglicht es Editoren, zwischen den von Ihnen zulässigen Einheiten wie px, em und % zu wechseln.
• Seiten, die Sie nicht benötigen, können Sie ausblenden Ein Knopfpolsterfeld zeigt möglicherweise nur Rechts und Links an.
• Elementor schreibt das CSS für Sie über die CSS Selectors-Zeilen des Feldes, einschließlich separater Werte pro Gerät, wenn Responsive Control eingeschaltet ist.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Pricing Card” - Widget mit einem price-card Box und einem price-btn Taste und drei Dimensionsfelder: Kartenpolsterung, Kartenradius und Tastenpolsterung.

So fügen Sie ein Feld Abmessungen hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Klicken Sie auf die Stil Tab und fügen Sie einen Abschnitt hinzu, zum Beispiel “Kartenabstand”.
3. Typ dimensions Im Feldsuchfeld links.
4. Ziehen Abmessungen In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Abmessungen Feldoptionen erklärt #

Hier ist das Feld Kartenpolsterung:

• Etikett Ist der Text über den Kästchen in Elementor, zum Beispiel “Card Padding”.
• Name Ist die eindeutige ID des Feldes Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Unter der Kontrolle in Elementor erscheint.
• Zulässige Abmessungen Hat vier Pfeiltasten für oben, rechts, unten und links Klicken Sie auf einen Pfeil, um diese Seite auszuschalten In Elementor wird eine Seite, die aus ist, als graues Kästchen angezeigt, das nicht bearbeitet werden kann.
• Immobilientyp Angebote Benutzerdefinierte, Margin, Padding, Border Width und Border Radius Wählen Sie eine und der Builder füllt eine CSS Selectors-Reihe für diese Eigenschaft (mehr dazu weiter unten) Border Width fügt außerdem hinzu border-style: solid.
• Größeneinheiten Listet die Einheiten auf, die Editoren wählen können Ein neues Feld erlaubt px, %, em, rem, vh und vw. Entfernen Sie diejenigen, die für Ihr Design keinen Sinn ergeben.
• Standardwert Vier Kästchen für den oberen, rechten, unteren und linken Ausgangswert hat.

Das Button Padding-Feld benötigt nur links und rechts, daher sind die oberen und unteren Pfeile ausgeschaltet:

Weiter unten, weiter unten Reaktionsfähige Kontrolle Fügt das Gerätesymbol hinzu, damit Desktop, Tablet und Mobilgeräte unterschiedliche Werte haben können Etikett, Trennzeichen und Bedingungen anzeigen funktionieren wie auf anderen Feldern.

Verbinden Sie das Feld mit CSS-Selektoren #

Jeweils CSS-Selektoren Reihe hat eine CSS-Selektor (welches Element zum Stil) und CSS-Eigenschaften (die Regel zum Schreiben).Wenn Sie Padding als Eigenschaftstyp auswählen, beginnt die Zeile wie folgt:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} Für sich genommen bedeutet das ganze Widget Ändern Sie es in das gewünschte Element, wie z.B .price-card. Sie können gehen {{WRAPPER}} Aus, da der Builder es vor Ihrem Selektor hinzufügt, sodass die Regel in diesem Widget verbleibt.

In CSS Properties {{TOP}}, {{RIGHT}}, {{BOTTOM}} und {{LEFT}} durch die Nummern aus den vier Kästchen ersetzt werden, und {{UNIT}} Mit der gewählten Einheit Mit dem auf Benutzerdefiniert eingestellten Property Type schreiben Sie die Regel selbst Das Feld Button Padding verwendet nur zwei Seiten:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

Klicken Sie auf Artikel hinzufügen gleichen Wert auf ein anderes Element mit einer zweiten Zeile anzuwenden.

Zwei Dinge zu wissen. Die Single Wähler Box am unteren Rand der gängigen Einstellungen nichts für ein Feld Maße tut, also immer die CSS Selectors Zeilen verwenden Und die Auswahl eines Eigenschaftentyps füllt für Sie in das Feld CSS Eigenschaften, also wählen Sie es zuerst und überprüfen Sie die Zeilen erneut, wenn Sie es später wechseln.

Verwenden Sie stattdessen die Werte in Ihrer Vorlage #

Die Werte können Sie auch direkt im HTML - oder CSS-Tab ausdrucken Das Feld hält top, right, bottom, left und unitSchreiben Sie also jede Seite gefolgt von der Einheit:

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

Ein kahl {{ card_padding }} Druckt nichts Für die meisten Widgets sind die CSS Selectors-Reihen die bessere Wahl, da Elementor für jedes Gerät eine separate Regel schreibt, wenn Responsive Control eingeschaltet ist.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie den Dimensions-Regler in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Stil Tab. Jedes Dimensionsfeld zeigt vier Kästchen mit der Aufschrift Oben, Rechts, Unten und Links, das Link-Symbol und ein Einheitsmenü in der oberen rechten Ecke. Die Tastenauffüllung zeigt Oben und Unten grau.

Geben Sie eine Zahl ein und die Karte aktualisiert sich gleich Klicken Sie auf das Link-Symbol, um die Seiten zu entkoppeln und jeder einen eigenen Wert zu geben, wie es Card Padding hier mit 64 oben und unten und 56 an den Seiten macht, nutzen Sie das Menü Einheit, um zwischen den Einheiten zu wechseln, die Sie zugelassen haben.

Häufige Anwendungsfälle #

• Innenpolsterung für Karten, Kartons und Banner.
• Ränder zwischen Teilen eines Widgets, beispielsweise dem Leerzeichen unter einer Überschrift.
• Eckradius auf Karten, Bildern und Schaltflächen, mit dem Eigenschaftstyp Border Radius.
• Linke und rechte Knopfpolsterung, wobei die Ober- und Unterseite ausgeschaltet sind.
• Randbreiten pro Seite unter Verwendung des Eigenschaftstyps Grenzbreite.

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

• Wechseln Sie immer den CSS-Selektor von {{WRAPPER}} Zu Ihrem Element So wie es ist, gilt der Abstand für den gesamten Widget-Wrapper.
• Beschneiden Sie Größeneinheiten auf diejenigen, die Editoren verwenden sollen. px und em decken den größten Abstand ab.
• Nicht zutreffende Seiten ausschalten Es hält Redakteure davon ab, Werte festzulegen, die keine Wirkung haben.
• Legen Sie einen Standardwert fest, der Ihrem Design entspricht, damit das Widget sofort nach dem Hinzufügen richtig aussieht.
• Vorsicht bei % für Polsterung und Marge Browser berechnen prozentuale Polsterung aus der Breite des Elements, auch für oben und unten.
• Für einen einzelnen Wert wie eine Lücke oder Symbolgröße ist die Schieberfeld Einfacher ist.

Häufig gestellte Fragen #

Einwickelnd #

Wählen Sie einen Property Type, richten Sie die CSS Selectors Reihe auf Ihr Element, trimmen Sie die Einheiten und Seiten, und setzen Sie eine sinnvolle Voreinstellung Editoren erhalten dann die gleiche Abstandskontrolle, die sie von Elementors eigenen Widgets kennen Für den Rest des Box-Stylings, siehe die Grenze und Hintergrund Felder, und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.