Eine Übersicht über die Registerkarte „Erweitert“

im Gegensatz zu den Einstellungen bleiben diese Konfigurationen für alle Elemente konsistent. Indem Sie diese Einstellungen erkunden, können Sie die erweiterten Funktionen jedes Elements effektiv anpassen und ihr Potenzial maximieren.

Anzeige an

Die Anzeige ein Mit der Einstellung können Sie auswählen, ob ein bestimmtes Element oder Abschnitt auf bestimmten Bildschirmtypen sichtbar ist: Desktop-, Tablet- oder Mobilansicht. 

Durch Anpassen dieser Einstellung können Sie Inhalte je nach Gerät ausblenden oder anzeigen und so sicherstellen, dass Ihre Seite für unterschiedliche Benutzererfahrungen optimiert ist.

So funktioniert „Display ein“:

• Desktop: Steuert, ob das Element oder der Abschnitt sichtbar ist, wenn die Seite auf Desktop-Bildschirmen angezeigt wird (größere Bildschirme, normalerweise über 1024 Pixel breit).
• Tablette: Steuert die Sichtbarkeit auf Tablet-Geräten (mittelgroße Bildschirme, normalerweise zwischen 768 und 1024 Pixel breit).
• Mobil: Steuert die Sichtbarkeit auf Mobilgeräten (kleine Bildschirme, normalerweise weniger als 768 Pixel breit).

Anwendungsfälle in GemPages

• Mobile-First-Design: Ob Sie haben ein großes Bild oder einen detaillierten Abschnitt, der auf einem Desktop gut aussieht, aber nicht gut auf kleinere Bildschirme passt, können Sie Verstecken Sie dieses Element auf Mobilgeräten und ersetzen Sie es durch eine mobilfreundlichere Version.
• Benutzerdefinierte Layouts für verschiedene Geräte: Ein komplexes Produktraster funktioniert möglicherweise gut auf einem Desktop, aber auf Mobilgeräten können Sie das Layout vereinfachen, indem Sie das Raster ausblenden und stattdessen eine einspaltige Liste anzeigen.
• Gezielte Nachrichten: Wenn Sie Benutzern auf unterschiedlichen Geräten selektiv unterschiedliche Marketingbotschaften anzeigen möchten (z. B. einen Rabatt exklusiv für Mobilgeräte anbieten), können Sie mit dieser Einstellung bestimmte Elemente basierend auf dem Gerät des Benutzers anzeigen.

Abstand

Im Abstand können Sie alle 4 Dimensionen des Marge und der Polsterung. 

Marge 

Marge ist der Raum außerhalb der Grenze eines Elements. Er steuert den Raum zwischen dem Element und anderen Elementen auf der Seite. Ränder sind transparent und schieben das Element vom umgebenden Inhalt weg, wodurch ein Puffer darum entsteht.

In GemPages können Sie Ränder verwenden, um den Abstand zwischen verschiedenen Elementen zu steuern, z. B. zwischen zwei Bildern oder zwischen einer Schaltfläche und einem Textblock, um eine visuelle Trennung oder Leerraum zu erstellen.

Polsterung

Padding ist der Raum innerhalb der Umrandung eines Elements, aber außerhalb seines Inhalts. Es definiert den Abstand zwischen dem Inhalt des Elements (z. B. Text oder Bild) und der Umrandung des Elements.

In GemPages, Polsterung Wird verwendet, wenn Sie innerhalb eines Elements Platz schaffen möchten. Sie können beispielsweise einer Schaltfläche eine Polsterung hinzufügen, damit der Text um sie herum Platz hat. Dadurch wird die Schaltfläche größer oder optisch ausgewogener.

Shape

Grenze

Der Rahmen ist die Linie, die den Inhalt und die Polsterung eines Elements umgibt. Er definiert den Umriss oder Rand eines Elements, beispielsweise einer Schaltfläche, eines Bilds oder eines Textfelds. Rahmen können unterschiedliche Breiten, Stile (durchgehend, gestrichelt, gepunktet usw.) und Farben haben.

Anwendungsfälle in GemPages

Rahmen werden verwendet, um Elemente optisch hervorzuheben, zu definieren oder zu trennen. Wenn Sie beispielsweise einen Rahmen um eine Call-to-Action-Schaltfläche hinzufügen, hebt sich diese deutlicher ab, oder wenn Sie Rahmen um Bilder anbringen, sehen diese wie Rahmen aus.

Ecke (Randradius)

Die Ecke, oft auch Randradius genannt, steuert die Rundung der Ecken eines Elements. Sie definiert, wie scharf oder gebogen die Ecken sind. Wenn Sie einen Randradius anwenden, werden die Ecken des Elements abgerundet, wobei höhere Werte die Ecken runder machen.

Anwendungsfall in GemPages

Sie können den Rahmenradius verwenden, um das Aussehen von Elementen weicher zu gestalten, indem Sie ihnen abgerundete Ecken geben. Dies ist besonders nützlich für Schaltflächen, Bilder und Container, bei denen Sie eine moderne, freundliche oder elegante Ästhetik schaffen möchten. Zum Beispiel, ein rechteckiges Bild kann in einen Kreis umgewandelt werden, indem der Randradius auf 50 % gesetzt wird.

Shadow

Ein Schatten fügt einen Schatteneffekt um ein Element hinzu und verleiht ihm Tiefe und ein Gefühl von Schichtung oder Höhe. Schatten können nach Farbe, Unschärferadius, Ausbreitung und Versatz (der Entfernung vom Element) angepasst werden.

Anwendungsfall in GemPages

Schatten erzeugen normalerweise einen dreidimensionalen Effekt auf flachen Elementen, sodass diese aus der Seite hervorstechen. Sie können beispielsweise einer Karte oder einem Textblock einen subtilen Schatten hinzufügen, um ein Gefühl von Tiefe zu erzeugen, oder einen dramatischeren Schatten anwenden, um ein wichtiges Element wie ein Produktbild hervorzuheben.

Position

Das CSS position Die Eigenschaft ist wichtig, um zu steuern, wie Elemente auf einer Webseite platziert werden. Sie definiert mithilfe verschiedener Werte, wie ein Element innerhalb des Layouts positioniert wird.

• Statisch: Die Standardpositionierungsmethode. Das Element wird im normalen Dokumentfluss angezeigt und entsprechend der Reihenfolge im HTML auf natürliche Weise mit anderen Elementen gestapelt.
• Relativ: Das Element bleibt im normalen Fluss, kann aber über die Offset-Eigenschaften (oben, rechts, unten, links) von seiner ursprünglichen Position verschoben werden. Der ursprünglich eingenommene Platz bleibt dabei erhalten.
• Absolut: Das Element wird relativ zum nächsten Vorgänger positioniert, der eine relative, absoluteden fixed Position. Es wird aus dem normalen Dokumentfluss entfernt, sodass es die Positionierung anderer Elemente nicht beeinflusst.
• Wichtig: Das Element verhält sich wie relative bis die Seite bis zu einem bestimmten Punkt gescrollt ist, dann „klebt“ sie an Ort und Stelle wie fixed. Dies wird häufig für Sticky Header oder Floating Bars verwendet.
• Fixed: Das Element wird relativ zum Browserfenster positioniert und bleibt auch beim Scrollen an der gleichen Stelle sichtbar. Nützlich für persistente UI-Elemente wie schwebende Schaltflächen oder Sticky Navigation.

Anwendungsfälle in GemPages

• Überlappende Elemente: Mit der absoluten Positionierung können Sie überlappende Elemente erstellen, z. B. Text über einem Bild platzieren. Passen Sie die Z-Index um zu steuern, welches Element oben angezeigt wird.
• Offset-Anpassungen: Sie können die Platzierung eines Bildes oder Textes mithilfe von Versätzen nach oben, links, unten oder rechts optimieren, wenn dieser leicht von seiner üblichen Position verschoben werden muss, ohne dass andere Elemente beeinträchtigt werden.

Deckkraft

Die Deckkraft ist der Grad der Transparenz eines Elements und bestimmt, wie viel vom Hintergrund oder den darunter liegenden Elementen durch das Element hindurch sichtbar ist. Der Deckkraftwert liegt zwischen 0 % und 1 %, wobei:

• 0%: Das Element ist vollständig transparent (komplett unsichtbar).
• 100%: Das Element ist vollständig undurchsichtig (vollständig sichtbar).
• Jeder Wert zwischen den Elementen ist teilweise transparent und ermöglicht so unterschiedliche Sichtverhältnisse.

Animation

Animationen werden in Erscheinungs- und Schwebeeffekte unterteilt. Schalten Sie die Animation auf EIN, um die Einstellungen zu erweitern, wählen Sie die gewünschte Einstellung aus und konfigurieren Sie sie so, dass die Animation Ihren Erwartungen entspricht.

Wann erscheinen

• Wählen Sie als Effekt Fade, Slide, Zoom oder Shake. Drücken Sie Keine Präsentation wenn Sie beim Erscheinen des Elements keinen Effekt hinzufügen möchten.
• Passen Sie Geschwindigkeit, Verzögerung und Beschleunigung für den angezeigten Effekt an.

Beim Schweben

Auswählen Keine Präsentation für keinen hinzugefügten Effekt oder wählen Sie aus den Zoom- und Shake-Effekten.

Anwendungsfall in GemPages

• Call-to-Action-Button schütteln: Sie können eine Schaltfläche wackeln oder hüpfen lassen, um die Aufmerksamkeit des Benutzers zu erregen und ihn zum Klicken zu animieren. Beispielsweise kann eine Schaltfläche „Jetzt kaufen“ beim Hovern oder nach einer bestimmten Verzögerung den Wackeleffekt nutzen, um hervorzustechen.
• Abschnitt Einblendung beim Scrollen: Bestimmte Abschnitte können ausgeblendet oder eingeblendet werden, wenn Benutzer auf einer Seite nach unten scrollen. Dieser Effekt sorgt für ein ansprechenderes Erlebnis und führt Benutzer auf visuell ansprechende Weise durch den Inhalt.
• Bildzoom beim Hovern: Um Interaktivität hinzuzufügen, können Sie Bilder so einstellen, dass sie vergrößert werden, wenn der Benutzer mit der Maus darüber fährt. Dies funktioniert gut für Produktbilder oder visuelle Elemente in Galerien.
• Textanimation: Sie können Textelemente so animieren, dass sie beim Laden oder Scrollen gleiten oder eingeblendet werden und so wichtige Nachrichten oder Überschriften hervorheben.

Interaktion

Erstellen Sie eine Triggerinteraktion für das Element.

Sobald Sie klicken Erschaffung, werden Sie weitergeleitet zum Interaktionseinstellung.

CSS-Klasse

Eine CSS-Klasse ist ein wiederverwendbarer Stil für HTML-Elemente. Sie trägt dazu bei, dass diese Elemente auf Ihrer Website ein einheitliches Erscheinungsbild aufweisen.