Einem Element oder Abschnitt einen negativen Rand hinzufügen

Was sind negative Ränder in GemPages?

Negative Ränder sind eine CSS-Eigenschaft, die dem Raum um ein Element einen negativen Wert zuweist, sodass es näher an benachbarte Elemente heranrücken oder diese sogar überlappen kann.

Im Gegensatz zu positiven Rändern, die Platz um Elemente herum hinzufügen, reduzieren negative Ränder diesen Platz oder entfernen ihn vollständig, wodurch häufig ein dynamischeres und vielschichtigeres Design entsteht.

Warum negative Margen verwenden?

1. Überlappende Elemente: Negative Ränder eignen sich perfekt für die Erstellung eines mehrschichtigen Designs, bei dem sich Elemente wie Text, Bilder oder Abschnitte überlappen. Dieser Effekt kann die visuelle Attraktivität Ihrer Seite steigern und ihr Tiefe und Dynamik verleihen.
2. Ausrichtung anpassen: Wenn Ihre Elemente leicht verschoben sind, können Sie mit negativen Rändern schnell und effizient Feineinstellungen vornehmen. Anstatt den gesamten Abschnitt neu zu gestalten, können Sie die Elemente mit negativen Randwerten an die richtige Stelle verschieben.
3. Beheben von Layoutproblemen: Wenn die Standardränder oder Abstandseinstellungen zu groß sind, können negative Ränder helfen, die Lücke zwischen den Elementen zu verringern, das Layout zu straffen und den gesamten Designfluss zu verbessern. Dies ist besonders nützlich, wenn Sie mit festen Layouts oder Vorlagen arbeiten, die zu viel Platz zwischen den Abschnitten lassen.

Wie funktionieren negative Ränder von GemPages?

Negative Ränder beeinflussen den Raum um ein Element in vier Richtungen: oben, unten, links und rechts. 

Und so funktionierts:

Rand oben: Entfernt Leerzeichen und zieht das Element nach oben.

Wenn Sie einen negativen Wert auf den oberen Rand anwenden, wird das Element nach oben gezogen, wodurch der darüber liegende Raum effektiv entfernt wird. Dies kann dazu beitragen, ein Element näher an das darüber liegende zu bringen und so die gewünschte Überlappung oder Ausrichtungsanpassung zu erzielen.

 Dies ist insbesondere dann nützlich, wenn Sie die vertikale Positionierung von Elementen anpassen möchten, die optisch besser verbunden oder ausgerichtet sein müssen, ohne die allgemeine Layoutstruktur zu verändern.

Rand unten: Zieht das Element nach oben und bringt es näher an das darüber liegende Element.

Rand links: Zieht das Element nach links, sodass es den daneben liegenden Inhalt überlappt.

Rand rechts: Zieht das Element nach rechts und schließt die Lücke oder überlappt benachbarte Elemente.

Wie verwende ich negative Margen in GemPages?

Durch die Verwendung negativer Ränder in GemPages können Sie die Positionierung von Elementen anpassen, einzigartige Designs erstellen oder Layoutprobleme beheben. 

Hier finden Sie eine Schritt-für-Schritt-Anleitung, die Ihnen beim Anwenden negativer Ränder auf beliebige Elemente oder Abschnitte in GemPages hilft.

Schritt 1: Öffnen Sie die Seite, die Sie bearbeiten möchten.

Schritt 2: Klicken Sie im GemPages-Editor auf das Element oder den Abschnitt, den Sie anpassen möchten. 

Dies kann ein Bild, ein Textblock, eine Schaltfläche oder ein beliebiger Abschnitt sein, den Sie verschieben möchten.

Schritt 3: Im Registerkarte Erweitert, scrollen Sie nach unten, um das zu finden Abstand .

Sie sehen Optionen für Polsterung und MargeWir arbeiten mit den Marge zu üben.

Schritt 4: Passen Sie die Randwerte für die Bustier, Slip, Linksden Rechts nach Bedarf, wie oben beschrieben.

Geben Sie einen negativen Wert ein (z. B. -20, -50) in das Randfeld für die Seite ein, die Sie anpassen möchten. Beispiel: Geben Sie -50 in England, Oberer Rand um das Element nach oben zu ziehen

Wenn Sie negative Werte eingeben, verschiebt sich das Element entsprechend und Sie können die Änderungen in Echtzeit sehen.

Schritt 5: Verwenden Sie die Schaltfläche „Vorschau“ oben im GemPages-Editor, um zu sehen, wie sich die Änderungen auf verschiedenen Geräten (Desktop, Tablet, Mobilgerät) auf Ihre Seite auswirken.

Schritt 6: Wenn Sie mit der Positionierung und dem Layout zufrieden sind, klicken Sie auf „Gespeichert".

Wenn Sie bereit sind, die Änderungen auf Ihrer Live-Site zu veröffentlichen, klicken Sie auf „Veröffentlichen" um die Anpassungen anzuwenden.