Ihre eigene Website erstellen von A-Z

Suche

Beiträge - Kontaktformular

  1. astra - One-Page-Website
  2. KONTAKTFORMULAR
  3. OnePage1
  4. OnePage2
  5. OnePage3

Astra Customizer global Container: Schriften (Typografie)

Die Typografie spielt eine entscheidende Rolle im Design und in der Benutzererfahrung (UX) einer Website. Im Astra Theme können Sie über den Customizer unter Global > Typografie verschiedene Einstellungen vornehmen, die sowohl das Erscheinungsbild als auch die Funktionalität Ihrer Website beeinflussen.

Wozu dient die Typografie?

Die Typografie dient dazu, den Text auf Ihrer Website ansprechend und lesbar zu gestalten. Sie umfasst die Auswahl von Schriftarten, Schriftgrößen, -stilen und -farben. Eine gut durchdachte Typografie trägt dazu bei, dass Inhalte klar und verständlich präsentiert werden, was die Benutzererfahrung erheblich verbessert.

Sinn der Typografie

Der Sinn der Typografie im Astra Theme liegt darin, eine konsistente und ansprechende visuelle Identität zu schaffen. Durch die Anpassung der Typografie können Sie:

  • Markenidentität stärken:
    Die Wahl spezifischer Schriftarten kann helfen, die Persönlichkeit Ihrer Marke zu kommunizieren.
  • Lesbarkeit erhöhen:
    Durch die richtige Schriftgröße und Zeilenhöhe wird der Text leichter lesbar, was die Verweildauer der Besucher auf Ihrer Seite erhöhen kann.
  • Inhalte hervorheben:
    Mit verschiedenen Schriftarten und -stilen können Sie wichtige Informationen hervorheben und die Aufmerksamkeit der Nutzer lenken.

Auswirkungen der Typografie

Die Auswirkungen einer gut gestalteten Typografie sind vielfältig:

  • Verbesserte Benutzererfahrung:
    Eine klare und ansprechende Typografie führt dazu, dass Besucher länger auf Ihrer Website bleiben und die Inhalte besser aufnehmen können.
  • Erhöhte Conversion-Raten:
    Wenn die Typografie ansprechend ist, kann dies die Wahrscheinlichkeit erhöhen, dass Besucher Aktionen durchführen, wie z.B. das Ausfüllen eines Kontaktformulars oder den Kauf eines Produkts.
  • Professionelles Erscheinungsbild:
    Eine durchdachte Typografie vermittelt Professionalität und Vertrauen, was besonders wichtig ist, wenn es um die Glaubwürdigkeit Ihrer Marke geht.

Typografie - Voreinstellungen

 

 

 

 

 

 

 

 

 

 

Im Astra Theme können Sie im Customizer unter Global > Typografie verschiedene Voreinstellungen für Schriftarten auswählen. Diese Voreinstellungen erleichtern es Ihnen, schnell ein ansprechendes Design zu erstellen, ohne jede Schriftart manuell anpassen zu müssen. Hier sind die sechs Voreinstellungen und die jeweiligen Schriftarten, die in jeder enthalten sind:

  1. Standard:

    Diese Voreinstellung verwendet die Schriftart Roboto für den Fließtext und Montserrat für die Überschriften. Diese Kombination ist modern und gut lesbar.

  2. Minimalistisch:

    Hier wird die Schriftart Open Sans für den Fließtext und Lora für die Überschriften verwendet. Diese Auswahl vermittelt ein elegantes und sauberes Erscheinungsbild.

  3. Klassisch:

    Diese Voreinstellung nutzt Georgia für den Fließtext und Arial für die Überschriften. Diese Kombination ist zeitlos und eignet sich gut für traditionelle Websites.

  4. Verspielt:

    In dieser Voreinstellung kommen Poppins für den Fließtext und Dancing Script für die Überschriften zum Einsatz. Diese Schriftarten verleihen der Website eine lebendige und freundliche Atmosphäre.

  5. Technisch:

    Hier wird Source Sans Pro für den Fließtext und Roboto Mono für die Überschriften verwendet. Diese Kombination ist ideal für technische oder professionelle Websites.

  6. Elegant:

    Diese Voreinstellung verwendet Merriweather für den Fließtext und Playfair Display für die Überschriften. Diese Schriftarten vermitteln ein elegantes und stilvolles Design.

Fazit

Die Voreinstellungen im Astra Theme bieten eine praktische Möglichkeit, die Typografie Ihrer Website schnell und einfach anzupassen. Jede Voreinstellung hat ihre eigene Kombination von Schriftarten, die auf verschiedene Designstile und Zielgruppen abgestimmt sind. Durch die Auswahl der passenden Voreinstellung können Sie das Erscheinungsbild Ihrer Website erheblich beeinflussen und an Ihre Markenidentität anpassen.

Basisschrift

Hier legen Sie die Schriftart fest, wenn Sie keine von den 6 Beispielen ausgewählt haben.

Hier sind jeweils zwei Beispiele für die wichtigsten Typografie-Einstellungen:

1. Basis Schrift

  • Beispiel 1: 
    Roboto – Eine moderne, sans-serif Schriftart, die gut lesbar ist und häufig für Webdesign verwendet wird.
  • Beispiel 2: 
    Merriweather – Eine serif Schriftart, die für längere Texte geeignet ist und ein klassisches Gefühl vermittelt.

2. Schriftfamilie

  • Beispiel 1: 
    Open Sans – Eine vielseitige Schriftfamilie, die sich gut für Fließtexte eignet und in vielen Designs verwendet wird.
  • Beispiel 2:
    Lora – Eine elegante Schriftfamilie, die sowohl für Überschriften als auch für Fließtexte verwendet werden kann.

3. Schriftstärken

  • Beispiel 1: 
    Normal (400) – Diese Stärke wird häufig für den Fließtext verwendet, um eine klare Lesbarkeit zu gewährleisten.
  • Beispiel 2: 
    Fett (700) – Diese Stärke wird oft für Überschriften oder wichtige Informationen verwendet, um Aufmerksamkeit zu erregen.

4. Schriftgröße

  • Beispiel 1: 
    16px – Eine gängige Größe für Fließtext, die eine gute Lesbarkeit auf den meisten Geräten bietet.
  • Beispiel 2: 
    24px – Eine größere Schriftgröße, die häufig für Überschriften verwendet wird, um sie hervorzuheben.

5. Anzeige von Schriftarten

  • Beispiel 1:
    • aa – Kleinere Schriftgröße, die für Fließtext verwendet wird.
  • Beispiel 2:
    • AA – Größere Schriftgröße, die für Überschriften oder wichtige Abschnitte verwendet wird.

 

Schrift für die Überschriften

Im Astra Theme können Sie im Customizer unter Global > Typografie spezifische Schriftarten und -stile für Überschriften anpassen. Hier sind jeweils zwei Beispiele für die wichtigsten Einstellungen, die sich auf Überschriften beziehen: 

1. Schrift für Überschriften 

  • Beispiel 1: 
    Montserrat – Eine moderne, sans-serif Schriftart, die sich hervorragend für große und auffällige Überschriften eignet.
  • Beispiel 2: 
    Playfair Display – Eine elegante serif Schriftart, die für ein klassisches und stilvolles Erscheinungsbild bei Überschriften sorgt.

2. Schriftfamilie

  • Beispiel 1: 
    Oswald – Eine kompakte Schriftfamilie, die gut für Überschriften geeignet ist und eine starke Präsenz hat.
  • Beispiel 2: 
    Raleway – Eine leichtgewichtige sans-serif Schriftfamilie, die für moderne und elegante Überschriften verwendet werden kann.

3. Schriftstärken

  • Beispiel 1: 
    Normal (400) – Diese Stärke kann für weniger auffällige Überschriften verwendet werden, die dennoch gut lesbar sein sollen.
  • Beispiel 2: 
    Fett (700) – Diese Stärke ist ideal für Hauptüberschriften, um ihnen mehr Gewicht und Sichtbarkeit zu verleihen.

4. Anzeige von Schriftarten

  • Beispiel 1:
    • aa – Diese Darstellung zeigt eine kleine Schriftgröße, die für Unterüberschriften oder kleinere Textabschnitte verwendet werden kann.
  • Beispiel 2:
    • AA – Diese Darstellung zeigt eine größere Schriftgröße, die typischerweise für Hauptüberschriften verwendet wird, um den Inhalt hervorzuheben.

Fazit

Die Typografie-Einstellungen für Überschriften im Astra Theme ermöglichen Ihnen, die visuelle Hierarchie Ihrer Website effektiv zu gestalten. Durch die Auswahl geeigneter Schriftarten, -familien und -stärken können Sie sicherstellen, dass Ihre Überschriften sowohl ansprechend als auch gut lesbar sind. Nutzen Sie diese Optionen, um das Design Ihrer Website zu optimieren!

Schrift für die Überschriften H1 - H6

Hier sind jeweils zwei Beispiele für Schriftarten und optimale Schriftgrößen für die Überschriften H1 bis H6 sowie eine Erklärung, wann jede Schriftart verwendet wird:

1. Schrift für die Überschriften H1

  • Beispiel 1: H1
    • Schriftart: Montserrat
    • Optimale Schriftgröße: 36px – Diese Größe eignet sich gut für Hauptüberschriften auf der Seite, um den Titel oder das Hauptthema hervorzuheben.
  • Beispiel 2: H1
    • Schriftart: Playfair Display
    • Optimale Schriftgröße: 40px – Eine größere Schriftgröße, die besonders gut für markante Titel verwendet werden kann.

2. Schrift für die Überschrift H2

  • Beispiel 1: H2
    • Schriftart: Roboto
    • Optimale Schriftgröße: 30px – Ideal für Abschnittsüberschriften, die unter der Hauptüberschrift stehen und wichtige Themen einführen.
  • Beispiel 2: H2
    • Schriftart: Lora
    • Optimale Schriftgröße: 32px – Diese Größe sorgt für eine klare Hierarchie und ist gut lesbar.

3. Schrift für die Überschrift H3

  • Beispiel 1: H3
    • Schriftart: Open Sans
    • Optimale Schriftgröße: 24px – Gut geeignet für Unterabschnittsüberschriften, die weitere Details zu einem Thema geben.
  • Beispiel 2: H3
    • Schriftart: Oswald
    • Optimale Schriftgröße: 26px – Diese Schriftgröße hebt wichtige Punkte innerhalb eines Abschnitts hervor.

4. Schrift für die Überschrift H4

  • Beispiel 1: H4
    • Schriftart: Poppins
    • Optimale Schriftgröße: 20px – Ideal für Unterüberschriften, die spezifische Details oder Listen einführen.
  • Beispiel 2: H4
    • Schriftart: Raleway
    • Optimale Schriftgröße: 22px – Diese Schriftgröße ist nützlich für zusätzliche Informationen unter einem H3.

5. Schrift für die Überschrift H5

  • Beispiel 1: H5
    • Schriftart: Merriweather
    • Optimale Schriftgröße: 18px – Kann verwendet werden, um spezifische Punkte innerhalb einer Liste oder Aussage hervorzuheben.
  • Beispiel 2: H5
    • Schriftart: Dancing Script
    • Optimale Schriftgröße: 19px – Diese Schriftart kann eine persönliche Note hinzufügen, wenn sie sparsam verwendet wird.

6. Schrift für die Überschrift H6

  • Beispiel 1: H6
    • Schriftart: Source Sans Pro
    • Optimale Schriftgröße: 16px – Gut geeignet für die kleinsten Überschriften oder für Metadaten und ergänzende Informationen.
  • Beispiel 2: H6
    • Schriftart: Arial
    • Optimale Schriftgröße: 16px – Eine klare und einfache Schriftart, die für technische oder informative Inhalte verwendet werden kann.

 

Absatz - Außenabstand unten

 

 

 

 

Im Astra Theme können Sie im Customizer unter Global > Typografie den Außenabstand für Absätze anpassen. Der Außenabstand (Margin) beeinflusst, wie viel Platz zwischen den Absätzen und anderen Elementen auf Ihrer Website vorhanden ist. Hier sind jeweils zwei Beispiele für den Außenabstand unten und optimale Abstände:

Absatz - Außenabstand unten

  • Beispiel 1: 
    20px – Ein Außenabstand von 20 Pixeln sorgt für einen angenehmen Abstand zwischen den Absätzen, was die Lesbarkeit erhöht und den Text weniger gedrängt erscheinen lässt. Dies ist besonders nützlich für längere Texte, da es den Lesefluss verbessert.
  • Beispiel 2: 
    30px – Ein Außenabstand von 30 Pixeln kann verwendet werden, um mehr Raum zwischen den Absätzen zu schaffen, was besonders in Designs mit viel Weißraum vorteilhaft ist. Dies gibt dem Inhalt mehr Luft und lässt die Seite insgesamt aufgeräumter wirken.

Optimale Abstände

  • Beispiel 1: 
    15px bis 25px – Für die meisten Websites ist ein Außenabstand von 15 bis 25 Pixeln ideal, da er eine gute Balance zwischen Lesbarkeit und Platznutzung bietet. Dieser Bereich eignet sich gut für Blogs oder Artikel, wo der Text im Vordergrund steht.
  • Beispiel 2: 
    25px bis 40px – In Designs, die mehr visuelle Trennung zwischen den Absätzen wünschen, kann ein Abstand von 25 bis 40 Pixeln sinnvoll sein. Dies ist besonders effektiv in kreativen oder Portfolio-Websites, wo der Inhalt oft in Abschnitten präsentiert wird.

Links im Inhalt unterstreichen

Eine gängige Praxis ist das Unterstreichen von Links, um deren Sichtbarkeit und Benutzerfreundlichkeit zu erhöhen. Hier sind jeweils zwei Beispiele für das Unterstreichen von Links sowie die Gründe, warum dies sinnvoll ist:

Beispiel: Links unterstreichen

Beispiel 1: Unterstreichen aktivieren
Einstellung:
Links im Fließtext werden durchgehend unterstrichen.
Vorteil:
Dies macht es für die Benutzer sofort erkennbar, dass es sich um klickbare Elemente handelt. Besonders in Texten mit vielen Informationen kann ein klarer visueller Hinweis helfen, die Benutzerführung zu verbessern.

Beispiel 2: Unterstreichen bei Hover
Einstellung:
Links sind standardmäßig nicht unterstrichen, erhalten aber eine Unterstreichung, wenn der Mauszeiger darüber schwebt.
Vorteil:
Diese Methode bewahrt ein sauberes Design, während sie gleichzeitig eine klare Interaktion signalisiert. Benutzer können erkennen, dass sie mit dem Link interagieren können, ohne dass der Text überladen wirkt.

Warum ist das Unterstreichen von Links sinnvoll?

Sichtbarkeit und Benutzerfreundlichkeit:
Unterstrichene Links sind für die Benutzer sofort erkennbar und signalisieren, dass sie auf eine andere Seite oder Ressource führen. Dies verbessert die Benutzererfahrung, da es den Nutzern hilft, sich besser auf der Website zurechtzufinden.

Barrierefreiheit:
Das Unterstreichen von Links verbessert die Zugänglichkeit für Menschen mit Sehbehinderungen oder kognitiven Beeinträchtigungen. Klare visuelle Hinweise sind wichtig, damit alle Benutzer auf die Inhalte zugreifen können.

Fazit

Das Unterstreichen von Links im Astra Theme ist eine bewährte Praxis, die sowohl die Sichtbarkeit als auch die Benutzerfreundlichkeit verbessert. Indem Sie Links klar kennzeichnen, schaffen Sie eine bessere Benutzererfahrung und fördern eine effektive Navigation auf Ihrer Website. Nutzen Sie die Anpassungsoptionen im Customizer, um sicherzustellen, dass Ihre Links sowohl ansprechend als auch funktional sind!

Astra Customizer global Container: Buttons

Es ist wichtig, zwischen Primary (Primär) und Secondary (Sekundär) Buttons zu unterscheiden. Hier sind jeweils zwei Beispiele sowie die Gründe, warum diese Unterscheidung sinnvoll ist:

Buttons 01

1. Primary Buttons

  • Beispiel 1: Primär-Button – "Jetzt kaufen"
    • Gestaltung: Ein auffälliger, gefüllter Button in einer kräftigen Farbe (z. B. Blau oder Grün), der direkt ins Auge fällt.
    • Vorteil: Der Primär-Button wird verwendet, um die wichtigste Aktion auf einer Seite zu fördern, wie z. B. den Kauf eines Produkts oder das Einreichen eines Formulars. Seine hervorstechende Gestaltung zieht die Aufmerksamkeit der Benutzer an und leitet sie zur gewünschten Handlung.
  • Beispiel 2: Primär-Button – "Anmelden"
    • Gestaltung: Ein klarer, gut sichtbarer Button, der sich farblich von anderen Elementen abhebt.
    • Vorteil: Dieser Button ist entscheidend, um Benutzer zur Anmeldung oder Registrierung zu bewegen. Durch die Verwendung eines Primär-Buttons wird die Bedeutung dieser Aktion unterstrichen.

2. Secondary Buttons

  • Beispiel 1: Sekundär-Button – "Mehr erfahren"
    • Gestaltung: Ein Button mit einem umrandeten Design oder einer dezenten Farbgebung, der weniger auffällig ist als der Primär-Button.
    • Vorteil: Der Sekundär-Button dient dazu, zusätzliche Informationen anzubieten oder Benutzer zu ermutigen, weiter zu erkunden, ohne sie zu einer sofortigen Handlung zu drängen. Er ist ideal für unterstützende Aktionen.
  • Beispiel 2: Sekundär-Button – "Zurück"
    • Gestaltung: Ein schlichter Button, der visuell zurückhaltend ist und oft in neutralen Farben gehalten wird.
    • Vorteil: Dieser Button wird verwendet, um Benutzern die Möglichkeit zu geben, zu vorherigen Seiten zurückzukehren, ohne den Fokus von der primären Aktion abzulenken. Es bietet eine nützliche Funktionalität, ohne die Hauptaktion zu untergraben.

Warum die Unterscheidung zwischen Primary und Secondary Buttons sinnvoll ist

  • Visuelle Hierarchie:
    Die Verwendung von Primär- und Sekundär-Buttons hilft, eine klare visuelle Hierarchie auf der Seite zu schaffen. Benutzer können schnell erkennen, welche Aktionen am wichtigsten sind und welche unterstützend sind.
  • Benutzererfahrung:
    Durch die Differenzierung zwischen den beiden Button-Typen wird die Navigation auf der Website erleichtert. Benutzer fühlen sich sicherer und wissen, welche Schritte sie als nächstes unternehmen sollten, was zu einer besseren Interaktion und höheren Conversion-Raten führt.

Buttons 07

 

 

Button - Voreinstellungen

Hier legen Sie die grundsätzliche Form der Buttons fest

Diese Voreinstellungen helfen Ihnen, ein einheitliches und ansprechendes Design für die Schaltflächen auf Ihrer Website zu erstellen. Hier sind die sechs Voreinstellungen für Buttons im Astra Theme und eine detaillierte Erklärung zu jeder:

1. Standard Button

Der Standard Button ist die grundlegende Schaltfläche, die in den meisten Fällen verwendet wird. Er hat eine einfache, gefüllte Gestaltung und ist in der Regel in einer auffälligen Farbe gehalten, um die Aufmerksamkeit der Benutzer zu erregen. Diese Voreinstellung eignet sich hervorragend für primäre Aktionen wie „Jetzt kaufen“ oder „Anmelden“.

2. Outline Button

Der Outline Button hat eine umrandete Gestaltung und ist weniger dominant als der Standard Button. Diese Art von Button wird oft für sekundäre Aktionen verwendet, wie z. B. „Mehr erfahren“ oder „Zurück“. Er bietet eine subtile Möglichkeit, Benutzer zu weiteren Informationen zu führen, ohne sie zu einer sofortigen Handlung zu drängen.

3. Text Button

Der Text Button ist eine minimalistische Variante, die oft ohne Hintergrundfarbe und nur mit Text angezeigt wird. Diese Buttons sind ideal für weniger wichtige Aktionen oder Links, die in Fließtext eingebettet sind. Sie sind nützlich, um zusätzliche Informationen anzubieten, ohne den Benutzer von der Hauptaktion abzulenken.

4. Rounded Button

Der Rounded Button hat abgerundete Ecken, was ihm ein weicheres und freundlicheres Aussehen verleiht. Diese Voreinstellung kann verwendet werden, um eine einladende Atmosphäre zu schaffen, und eignet sich gut für Websites, die ein modernes und ansprechendes Design anstreben. Sie können sowohl für primäre als auch für sekundäre Aktionen verwendet werden.

5. Ghost Button

Der Ghost Button ist eine weitere Variante des Outline Buttons, jedoch mit einer transparenten Hintergrundfarbe. Diese Buttons sind besonders stilvoll und eignen sich gut für kreative oder visuell orientierte Websites. Sie können verwendet werden, um Benutzer zu ermutigen, mehr zu erfahren, ohne die Aufmerksamkeit von anderen wichtigen Elementen abzulenken.

6. Icon Button

Der Icon-Button kombiniert Text mit einem Symbol oder Icon, um die Funktion des Buttons visuell zu unterstützen. Diese Buttons sind besonders nützlich, wenn Sie eine schnelle Aktion oder eine spezifische Funktion hervorheben möchten, wie z. B. „Teilen“ oder „Download“. Sie bieten eine klare visuelle Kommunikation und können die Benutzererfahrung verbessern, indem sie die Funktionalität auf einen Blick verständlich machen.

Button-Farben

Die jeweils rechte Farbe wird angezeigt, wenn Sie mit der Maus über den Button gehen.

Im Astra Theme können Sie im Customizer unter Global > Buttons die Farben für Buttons anpassen. Die richtige Farbgestaltung ist entscheidend für die Benutzererfahrung und das visuelle Design Ihrer Website. Hier sind jeweils zwei Beispiele für die Textfarbe, Hintergrundfarbe und Randfarbe von Buttons:

1. Textfarbe

Beispiel 1: Weiß (#FFFFFF)
Verwendung: Eine weiße Textfarbe auf einem dunklen Hintergrund (z. B. dunkelblau oder schwarz).
Vorteil:
Weiß hebt sich stark von dunklen Hintergründen ab und sorgt für eine gute Lesbarkeit. Es vermittelt einen modernen und eleganten Look, ideal für wichtige Aktionen wie „Jetzt kaufen“.

Beispiel 2: Dunkelgrau (#333333)
Verwendung: Eine dunkelgraue Textfarbe auf einem hellen Hintergrund (z. B. hellgrau oder beige).
Vorteil:
Dunkelgrau ist weniger hart als Schwarz, bietet aber dennoch einen guten Kontrast. Diese Farbe ist ideal für sekundäre Buttons oder weniger wichtige Aktionen, da sie eine sanfte, aber klare Lesbarkeit gewährleistet.

2. Hintergrundfarbe

Beispiel 1: Blau (#007BFF)
Verwendung:
Eine kräftige blaue Hintergrundfarbe für primäre Buttons.
Vorteil:
Blau ist eine vertrauenswürdige und beruhigende Farbe, die häufig für Call-to-Action-Buttons verwendet wird. Sie zieht die Aufmerksamkeit der Benutzer an und ermutigt sie zur Interaktion.

Beispiel 2: Hellgrün (#28A745)
Verwendung:
Eine frische, helle grüne Hintergrundfarbe für positive Aktionen wie „Registrieren“ oder „Bestätigen“.
Vorteil:
Grün steht oft für Wachstum und Erfolg. Diese Farbe erzeugt ein positives Gefühl und motiviert Benutzer dazu, die gewünschte Handlung auszuführen.

3. Randfarbe

Beispiel 1: Dunkelblau (#0056b3)
Verwendung:
Eine dunkle Randfarbe für Outline-Buttons.
Vorteil:
Dunkelblau sorgt für einen professionellen Look und verstärkt die visuelle Hierarchie. Es hebt den Button hervor, ohne ihn zu dominant zu machen.

Beispiel 2: Hellgrau (#CCCCCC)
Verwendung:
Eine dezente hellgraue Randfarbe für weniger wichtige Buttons oder Ghost Buttons.
Vorteil:
Hellgrau ist neutral und sorgt dafür, dass die Buttons weniger aufdringlich wirken. Diese Farbe eignet sich gut für sekundäre Aktionen oder Links, die nicht im Vordergrund stehen sollen.

Fazit

Die Anpassung von Textfarbe, Hintergrundfarbe und Randfarbe im Astra Theme ist entscheidend, um ansprechende und benutzerfreundliche Buttons zu gestalten. Durch die Wahl der richtigen Farben können Sie die Sichtbarkeit Ihrer Buttons erhöhen und die Benutzer dazu ermutigen, mit Ihrer Website zu interagieren. 

Schrift

Die richtige Schriftwahl ist entscheidend für die Lesbarkeit und das gesamte Design Ihrer Website. Hier sind jeweils zwei Beispiele für Schrift, Schriftfamilie, Schriftstärke und Schriftgröße sowie optimale Schriftgrößen für verschiedene Anwendungen:

1. Schriftfamilie

  • Beispiel 1: Roboto
    • Verwendung:
      Diese moderne, serifenlose Schriftart wird häufig für Buttons verwendet, da sie klar und gut lesbar ist.
    • Vorteil:
      Roboto vermittelt ein zeitgemäßes Gefühl und eignet sich besonders gut für primäre Call-to-Action-Buttons wie „Jetzt kaufen“ oder „Anmelden“.
  • Beispiel 2: Open Sans
    • Verwendung:
      Eine weitere serifenlose Schriftart, die für Buttons verwendet werden kann.
    • Vorteil:
      Open Sans bietet eine hervorragende Lesbarkeit und ist vielseitig einsetzbar. Sie eignet sich besonders gut für sekundäre Buttons wie „Mehr erfahren“ oder „Zurück“.

2. Schriftstärke

  • Beispiel 1: Bold (700)
    • Verwendung:
      Diese Schriftstärke wird für primäre Buttons empfohlen.
    • Vorteil:
      Die Verwendung von fetter Schrift hebt die Wichtigkeit der Aktion hervor und zieht die Aufmerksamkeit der Benutzer an.
  • Beispiel 2: Regular (400)
    • Verwendung:
      Eine normale Schriftstärke kann für sekundäre Buttons eingesetzt werden.
    • Vorteil:
      Diese Stärke sorgt für eine subtile Darstellung, die nicht vom Hauptaufruf ablenkt, aber dennoch gut lesbar ist.

3. Schriftgröße

  • Beispiel 1: 16px
    • Verwendung:
      Diese Schriftgröße eignet sich exzellent für primäre Buttons.
    • Vorteil:
      Eine Schriftgröße von 16px ist optimal, um sicherzustellen, dass der Text auf dem Button gut lesbar ist und Benutzer sofort erkennen, welche Aktion sie ausführen sollen.
  • Beispiel 2: 14px
    • Verwendung:
      Diese Größe kann für sekundäre Buttons verwendet werden.
    • Vorteil:
      Eine etwas kleinere Schriftgröße von 14px ist ideal für unterstützende Aktionen, die weniger im Vordergrund stehen, aber dennoch die Aufmerksamkeit der Benutzer auf sich ziehen.

Fazit

Die Anpassung von Schriftfamilie, Schriftstärke und Schriftgröße im Astra Theme ist entscheidend, um ansprechende und benutzerfreundliche Buttons zu gestalten. Durch die Wahl der richtigen Schriftoptionen können Sie die Lesbarkeit Ihrer Buttons erhöhen und die Benutzererfahrung auf Ihrer Website verbessern.

Innenabstand (Padding) / Randbreite

Im Astra Theme können Sie im Customizer unter Global > Buttons den Innenabstand (Padding) und die Randbreite (Border Width) für Buttons anpassen. Diese Einstellungen sind wichtig, um das Design und die Benutzererfahrung Ihrer Schaltflächen zu optimieren. Hier sind jeweils zwei Beispiele für Innenabstand und Randbreite, einschließlich der Auswirkungen auf die Positionen oben, rechts, unten und links sowie optimaler Maße:

1. Innenabstand (Padding)

  • Beispiel 1: Padding 12px oben/unten und 24px rechts/links
    • Verwendung: Diese Einstellung sorgt für ausreichend Platz um den Text des Buttons herum.
    • Auswirkung:
      • Oben: 12px sorgt dafür, dass der Text nicht zu nah am oberen Rand des Buttons sitzt, was die Lesbarkeit verbessert.
      • Rechts/Links: 24px gibt dem Button ein ausgewogenes Aussehen und sorgt dafür, dass der Text ausreichend Platz hat, um nicht eingeengt zu wirken.
      • Unten: 12px sorgt für einen ähnlichen Abstand wie oben, was ein harmonisches Gesamtbild ergibt.
      • Links: 24px sorgt dafür, dass der Button auch von links genügend Platz hat.
    • Optimale Maße: Diese Maße sind ideal für primäre Buttons, um eine klare und ansprechende Benutzeroberfläche zu schaffen.
  • Beispiel 2: Padding 10px oben/unten und 20px rechts/links
    • Verwendung: Eine geringere Innenabstandsgröße, die gut für sekundäre Buttons geeignet ist.
    • Auswirkung:
      • Oben: 10px verhindert, dass der Text zu nah am Rand ist, und sorgt für eine saubere Darstellung.
      • Rechts/Links: 20px sorgt dafür, dass der Button nicht überladen wirkt, während der Text dennoch klar sichtbar bleibt.
      • Unten: 10px sorgt für ein einheitliches Erscheinungsbild.
      • Links: 20px sorgt für ein ausgewogenes Design.
    • Optimale Maße: Diese Maße sind geeignet für sekundäre Aktionen, die weniger prominent sind, aber dennoch gut lesbar bleiben müssen.

2. Randbreite (Border Width)

  • Beispiel 1: Randbreite 2px
    • Verwendung: Diese Randbreite eignet sich gut für Outline- oder Ghost Buttons.
    • Auswirkung:
      • Oben: Ein 2px Rand oben sorgt für einen klaren, definierten Look, der den Button von anderen Elementen abhebt.
      • Rechts/Links: 2px sorgt dafür, dass der Button einheitlich aussieht und die Form klar bleibt.
      • Unten: 2px sorgt dafür, dass der Button auch beim Scrollen oder bei Hover-Effekten stabil aussieht.
    • Optimale Maße: Eine Randbreite von 2px ist ideal für eine gute Sichtbarkeit, ohne dass der Button überladen wirkt.
  • Beispiel 2: Randbreite 1px
    • Verwendung: Eine minimalistische Randbreite, die gut für subtilere Buttons geeignet ist.
    • Auswirkung:
      • Oben: 1px sorgt dafür, dass der Button zurückhaltend wirkt, während er dennoch klar definiert bleibt.
      • Rechts/Links: 1px hält das Design leicht und luftig, ideal für weniger wichtige Aktionen.
      • Unten: 1px sorgt für ein harmonisches Gesamtbild.
    • Optimale Maße: Diese Randbreite ist optimal für Ghost Buttons oder weniger prominente Aktionen, die dennoch eine gewisse Struktur benötigen.

Fazit

Die Anpassung von Innenabstand und Randbreite im Astra Theme ist entscheidend, um Buttons ansprechend und benutzerfreundlich zu gestalten. Durch die Wahl optimaler Maße können Sie die Lesbarkeit und das Design Ihrer Buttons verbessern, was letztendlich zu einer besseren Benutzererfahrung führt.

Eckenradius

Der Eckenradius beeinflusst das Aussehen der Buttons erheblich und kann die Benutzererfahrung verbessern. Hier sind jeweils zwei Beispiele für den Eckenradius, einschließlich der Auswirkungen auf die Ecken oben, rechts, unten und links sowie optimaler Maße:

1. Eckenradius

  • Beispiel 1: Eckenradius 8px
    • Verwendung: Ein Eckenradius von 8px sorgt für abgerundete Ecken, die dem Button ein modernes und freundliches Aussehen verleihen.
    • Auswirkung:
      • Oben: 8px sorgt dafür, dass die oberen Ecken sanft abgerundet sind, was den Button einladender macht.
      • Rechts: 8px gibt dem Button ein harmonisches Erscheinungsbild, das die Benutzer anspricht.
      • Unten: 8px sorgt für ein einheitliches Design, das die visuelle Kohärenz des Buttons unterstützt.
      • Links: 8px trägt zur Gesamtästhetik bei und sorgt dafür, dass der Button nicht zu kantig wirkt.
    • Optimale Maße: Diese Einstellung ist ideal für primäre Buttons, die auffallen und eine positive Benutzererfahrung fördern sollen.
  • Beispiel 2: Eckenradius 4px
    • Verwendung: Ein Eckenradius von 4px bietet eine subtilere Abrundung, die weniger auffällig ist.
    • Auswirkung:
      • Oben: 4px sorgt für eine dezente Abrundung, die den Button professionell und modern erscheinen lässt.
      • Rechts: 4px hält das Design klar und strukturiert, ideal für formelle Anwendungen.
      • Unten: 4px sorgt für ein sauberes Erscheinungsbild, das die Benutzer nicht ablenkt.
      • Links: 4px trägt zur Schlichtheit des Designs bei, was für sekundäre Buttons vorteilhaft ist.
    • Optimale Maße: Diese Einstellung eignet sich gut für sekundäre Buttons oder für Buttons, die in einem minimalistischen Designkonzept verwendet werden.

Fazit

Die Anpassung des Eckenradius im Astra Theme ist entscheidend, um Buttons ansprechend und benutzerfreundlich zu gestalten. Durch die Wahl optimaler Maße für den Eckenradius können Sie das visuelle Design Ihrer Buttons verbessern und die Benutzererfahrung auf Ihrer Website positiv beeinflussen.

Astra Customizer global Container: Buttons

Es ist wichtig, zwischen Primary (Primär) und Secondary (Sekundär) Buttons zu unterscheiden. Hier sind jeweils zwei Beispiele sowie die Gründe, warum diese Unterscheidung sinnvoll ist:

Buttons 01

1. Primary Buttons

  • Beispiel 1: Primär-Button – "Jetzt kaufen"
    • Gestaltung: Ein auffälliger, gefüllter Button in einer kräftigen Farbe (z. B. Blau oder Grün), der direkt ins Auge fällt.
    • Vorteil: Der Primär-Button wird verwendet, um die wichtigste Aktion auf einer Seite zu fördern, wie z. B. den Kauf eines Produkts oder das Einreichen eines Formulars. Seine hervorstechende Gestaltung zieht die Aufmerksamkeit der Benutzer an und leitet sie zur gewünschten Handlung.
  • Beispiel 2: Primär-Button – "Anmelden"
    • Gestaltung: Ein klarer, gut sichtbarer Button, der sich farblich von anderen Elementen abhebt.
    • Vorteil: Dieser Button ist entscheidend, um Benutzer zur Anmeldung oder Registrierung zu bewegen. Durch die Verwendung eines Primär-Buttons wird die Bedeutung dieser Aktion unterstrichen.

2. Secondary Buttons

  • Beispiel 1: Sekundär-Button – "Mehr erfahren"
    • Gestaltung: Ein Button mit einem umrandeten Design oder einer dezenten Farbgebung, der weniger auffällig ist als der Primär-Button.
    • Vorteil: Der Sekundär-Button dient dazu, zusätzliche Informationen anzubieten oder Benutzer zu ermutigen, weiter zu erkunden, ohne sie zu einer sofortigen Handlung zu drängen. Er ist ideal für unterstützende Aktionen.
  • Beispiel 2: Sekundär-Button – "Zurück"
    • Gestaltung: Ein schlichter Button, der visuell zurückhaltend ist und oft in neutralen Farben gehalten wird.
    • Vorteil: Dieser Button wird verwendet, um Benutzern die Möglichkeit zu geben, zu vorherigen Seiten zurückzukehren, ohne den Fokus von der primären Aktion abzulenken. Es bietet eine nützliche Funktionalität, ohne die Hauptaktion zu untergraben.

Warum die Unterscheidung zwischen Primary und Secondary Buttons sinnvoll ist

  • Visuelle Hierarchie:
    Die Verwendung von Primär- und Sekundär-Buttons hilft, eine klare visuelle Hierarchie auf der Seite zu schaffen. Benutzer können schnell erkennen, welche Aktionen am wichtigsten sind und welche unterstützend sind.
  • Benutzererfahrung:
    Durch die Differenzierung zwischen den beiden Button-Typen wird die Navigation auf der Website erleichtert. Benutzer fühlen sich sicherer und wissen, welche Schritte sie als nächstes unternehmen sollten, was zu einer besseren Interaktion und höheren Conversion-Raten führt.

Buttons 07

 

 

Button - Voreinstellungen

Hier legen Sie die grundsätzliche Form der Buttons fest

Diese Voreinstellungen helfen Ihnen, ein einheitliches und ansprechendes Design für die Schaltflächen auf Ihrer Website zu erstellen. Hier sind die sechs Voreinstellungen für Buttons im Astra Theme und eine detaillierte Erklärung zu jeder:

1. Standard Button

Der Standard Button ist die grundlegende Schaltfläche, die in den meisten Fällen verwendet wird. Er hat eine einfache, gefüllte Gestaltung und ist in der Regel in einer auffälligen Farbe gehalten, um die Aufmerksamkeit der Benutzer zu erregen. Diese Voreinstellung eignet sich hervorragend für primäre Aktionen wie „Jetzt kaufen“ oder „Anmelden“.

2. Outline Button

Der Outline Button hat eine umrandete Gestaltung und ist weniger dominant als der Standard Button. Diese Art von Button wird oft für sekundäre Aktionen verwendet, wie z. B. „Mehr erfahren“ oder „Zurück“. Er bietet eine subtile Möglichkeit, Benutzer zu weiteren Informationen zu führen, ohne sie zu einer sofortigen Handlung zu drängen.

3. Text Button

Der Text Button ist eine minimalistische Variante, die oft ohne Hintergrundfarbe und nur mit Text angezeigt wird. Diese Buttons sind ideal für weniger wichtige Aktionen oder Links, die in Fließtext eingebettet sind. Sie sind nützlich, um zusätzliche Informationen anzubieten, ohne den Benutzer von der Hauptaktion abzulenken.

4. Rounded Button

Der Rounded Button hat abgerundete Ecken, was ihm ein weicheres und freundlicheres Aussehen verleiht. Diese Voreinstellung kann verwendet werden, um eine einladende Atmosphäre zu schaffen, und eignet sich gut für Websites, die ein modernes und ansprechendes Design anstreben. Sie können sowohl für primäre als auch für sekundäre Aktionen verwendet werden.

5. Ghost Button

Der Ghost Button ist eine weitere Variante des Outline Buttons, jedoch mit einer transparenten Hintergrundfarbe. Diese Buttons sind besonders stilvoll und eignen sich gut für kreative oder visuell orientierte Websites. Sie können verwendet werden, um Benutzer zu ermutigen, mehr zu erfahren, ohne die Aufmerksamkeit von anderen wichtigen Elementen abzulenken.

6. Icon Button

Der Icon-Button kombiniert Text mit einem Symbol oder Icon, um die Funktion des Buttons visuell zu unterstützen. Diese Buttons sind besonders nützlich, wenn Sie eine schnelle Aktion oder eine spezifische Funktion hervorheben möchten, wie z. B. „Teilen“ oder „Download“. Sie bieten eine klare visuelle Kommunikation und können die Benutzererfahrung verbessern, indem sie die Funktionalität auf einen Blick verständlich machen.

Button-Farben

Die jeweils rechte Farbe wird angezeigt, wenn Sie mit der Maus über den Button gehen.

Im Astra Theme können Sie im Customizer unter Global > Buttons die Farben für Buttons anpassen. Die richtige Farbgestaltung ist entscheidend für die Benutzererfahrung und das visuelle Design Ihrer Website. Hier sind jeweils zwei Beispiele für die Textfarbe, Hintergrundfarbe und Randfarbe von Buttons:

1. Textfarbe

Beispiel 1: Weiß (#FFFFFF)
Verwendung: Eine weiße Textfarbe auf einem dunklen Hintergrund (z. B. dunkelblau oder schwarz).
Vorteil:
Weiß hebt sich stark von dunklen Hintergründen ab und sorgt für eine gute Lesbarkeit. Es vermittelt einen modernen und eleganten Look, ideal für wichtige Aktionen wie „Jetzt kaufen“.

Beispiel 2: Dunkelgrau (#333333)
Verwendung: Eine dunkelgraue Textfarbe auf einem hellen Hintergrund (z. B. hellgrau oder beige).
Vorteil:
Dunkelgrau ist weniger hart als Schwarz, bietet aber dennoch einen guten Kontrast. Diese Farbe ist ideal für sekundäre Buttons oder weniger wichtige Aktionen, da sie eine sanfte, aber klare Lesbarkeit gewährleistet.

2. Hintergrundfarbe

Beispiel 1: Blau (#007BFF)
Verwendung:
Eine kräftige blaue Hintergrundfarbe für primäre Buttons.
Vorteil:
Blau ist eine vertrauenswürdige und beruhigende Farbe, die häufig für Call-to-Action-Buttons verwendet wird. Sie zieht die Aufmerksamkeit der Benutzer an und ermutigt sie zur Interaktion.

Beispiel 2: Hellgrün (#28A745)
Verwendung:
Eine frische, helle grüne Hintergrundfarbe für positive Aktionen wie „Registrieren“ oder „Bestätigen“.
Vorteil:
Grün steht oft für Wachstum und Erfolg. Diese Farbe erzeugt ein positives Gefühl und motiviert Benutzer dazu, die gewünschte Handlung auszuführen.

3. Randfarbe

Beispiel 1: Dunkelblau (#0056b3)
Verwendung:
Eine dunkle Randfarbe für Outline-Buttons.
Vorteil:
Dunkelblau sorgt für einen professionellen Look und verstärkt die visuelle Hierarchie. Es hebt den Button hervor, ohne ihn zu dominant zu machen.

Beispiel 2: Hellgrau (#CCCCCC)
Verwendung:
Eine dezente hellgraue Randfarbe für weniger wichtige Buttons oder Ghost Buttons.
Vorteil:
Hellgrau ist neutral und sorgt dafür, dass die Buttons weniger aufdringlich wirken. Diese Farbe eignet sich gut für sekundäre Aktionen oder Links, die nicht im Vordergrund stehen sollen.

Fazit

Die Anpassung von Textfarbe, Hintergrundfarbe und Randfarbe im Astra Theme ist entscheidend, um ansprechende und benutzerfreundliche Buttons zu gestalten. Durch die Wahl der richtigen Farben können Sie die Sichtbarkeit Ihrer Buttons erhöhen und die Benutzer dazu ermutigen, mit Ihrer Website zu interagieren. 

Schrift

Die richtige Schriftwahl ist entscheidend für die Lesbarkeit und das gesamte Design Ihrer Website. Hier sind jeweils zwei Beispiele für Schrift, Schriftfamilie, Schriftstärke und Schriftgröße sowie optimale Schriftgrößen für verschiedene Anwendungen:

1. Schriftfamilie

  • Beispiel 1: Roboto
    • Verwendung:
      Diese moderne, serifenlose Schriftart wird häufig für Buttons verwendet, da sie klar und gut lesbar ist.
    • Vorteil:
      Roboto vermittelt ein zeitgemäßes Gefühl und eignet sich besonders gut für primäre Call-to-Action-Buttons wie „Jetzt kaufen“ oder „Anmelden“.
  • Beispiel 2: Open Sans
    • Verwendung:
      Eine weitere serifenlose Schriftart, die für Buttons verwendet werden kann.
    • Vorteil:
      Open Sans bietet eine hervorragende Lesbarkeit und ist vielseitig einsetzbar. Sie eignet sich besonders gut für sekundäre Buttons wie „Mehr erfahren“ oder „Zurück“.

2. Schriftstärke

  • Beispiel 1: Bold (700)
    • Verwendung:
      Diese Schriftstärke wird für primäre Buttons empfohlen.
    • Vorteil:
      Die Verwendung von fetter Schrift hebt die Wichtigkeit der Aktion hervor und zieht die Aufmerksamkeit der Benutzer an.
  • Beispiel 2: Regular (400)
    • Verwendung:
      Eine normale Schriftstärke kann für sekundäre Buttons eingesetzt werden.
    • Vorteil:
      Diese Stärke sorgt für eine subtile Darstellung, die nicht vom Hauptaufruf ablenkt, aber dennoch gut lesbar ist.

3. Schriftgröße

  • Beispiel 1: 16px
    • Verwendung:
      Diese Schriftgröße eignet sich exzellent für primäre Buttons.
    • Vorteil:
      Eine Schriftgröße von 16px ist optimal, um sicherzustellen, dass der Text auf dem Button gut lesbar ist und Benutzer sofort erkennen, welche Aktion sie ausführen sollen.
  • Beispiel 2: 14px
    • Verwendung:
      Diese Größe kann für sekundäre Buttons verwendet werden.
    • Vorteil:
      Eine etwas kleinere Schriftgröße von 14px ist ideal für unterstützende Aktionen, die weniger im Vordergrund stehen, aber dennoch die Aufmerksamkeit der Benutzer auf sich ziehen.

Fazit

Die Anpassung von Schriftfamilie, Schriftstärke und Schriftgröße im Astra Theme ist entscheidend, um ansprechende und benutzerfreundliche Buttons zu gestalten. Durch die Wahl der richtigen Schriftoptionen können Sie die Lesbarkeit Ihrer Buttons erhöhen und die Benutzererfahrung auf Ihrer Website verbessern.

Innenabstand (Padding) / Randbreite

Im Astra Theme können Sie im Customizer unter Global > Buttons den Innenabstand (Padding) und die Randbreite (Border Width) für Buttons anpassen. Diese Einstellungen sind wichtig, um das Design und die Benutzererfahrung Ihrer Schaltflächen zu optimieren. Hier sind jeweils zwei Beispiele für Innenabstand und Randbreite, einschließlich der Auswirkungen auf die Positionen oben, rechts, unten und links sowie optimaler Maße:

1. Innenabstand (Padding)

  • Beispiel 1: Padding 12px oben/unten und 24px rechts/links
    • Verwendung: Diese Einstellung sorgt für ausreichend Platz um den Text des Buttons herum.
    • Auswirkung:
      • Oben: 12px sorgt dafür, dass der Text nicht zu nah am oberen Rand des Buttons sitzt, was die Lesbarkeit verbessert.
      • Rechts/Links: 24px gibt dem Button ein ausgewogenes Aussehen und sorgt dafür, dass der Text ausreichend Platz hat, um nicht eingeengt zu wirken.
      • Unten: 12px sorgt für einen ähnlichen Abstand wie oben, was ein harmonisches Gesamtbild ergibt.
      • Links: 24px sorgt dafür, dass der Button auch von links genügend Platz hat.
    • Optimale Maße: Diese Maße sind ideal für primäre Buttons, um eine klare und ansprechende Benutzeroberfläche zu schaffen.
  • Beispiel 2: Padding 10px oben/unten und 20px rechts/links
    • Verwendung: Eine geringere Innenabstandsgröße, die gut für sekundäre Buttons geeignet ist.
    • Auswirkung:
      • Oben: 10px verhindert, dass der Text zu nah am Rand ist, und sorgt für eine saubere Darstellung.
      • Rechts/Links: 20px sorgt dafür, dass der Button nicht überladen wirkt, während der Text dennoch klar sichtbar bleibt.
      • Unten: 10px sorgt für ein einheitliches Erscheinungsbild.
      • Links: 20px sorgt für ein ausgewogenes Design.
    • Optimale Maße: Diese Maße sind geeignet für sekundäre Aktionen, die weniger prominent sind, aber dennoch gut lesbar bleiben müssen.

2. Randbreite (Border Width)

  • Beispiel 1: Randbreite 2px
    • Verwendung: Diese Randbreite eignet sich gut für Outline- oder Ghost Buttons.
    • Auswirkung:
      • Oben: Ein 2px Rand oben sorgt für einen klaren, definierten Look, der den Button von anderen Elementen abhebt.
      • Rechts/Links: 2px sorgt dafür, dass der Button einheitlich aussieht und die Form klar bleibt.
      • Unten: 2px sorgt dafür, dass der Button auch beim Scrollen oder bei Hover-Effekten stabil aussieht.
    • Optimale Maße: Eine Randbreite von 2px ist ideal für eine gute Sichtbarkeit, ohne dass der Button überladen wirkt.
  • Beispiel 2: Randbreite 1px
    • Verwendung: Eine minimalistische Randbreite, die gut für subtilere Buttons geeignet ist.
    • Auswirkung:
      • Oben: 1px sorgt dafür, dass der Button zurückhaltend wirkt, während er dennoch klar definiert bleibt.
      • Rechts/Links: 1px hält das Design leicht und luftig, ideal für weniger wichtige Aktionen.
      • Unten: 1px sorgt für ein harmonisches Gesamtbild.
    • Optimale Maße: Diese Randbreite ist optimal für Ghost Buttons oder weniger prominente Aktionen, die dennoch eine gewisse Struktur benötigen.

Fazit

Die Anpassung von Innenabstand und Randbreite im Astra Theme ist entscheidend, um Buttons ansprechend und benutzerfreundlich zu gestalten. Durch die Wahl optimaler Maße können Sie die Lesbarkeit und das Design Ihrer Buttons verbessern, was letztendlich zu einer besseren Benutzererfahrung führt.

Eckenradius

Der Eckenradius beeinflusst das Aussehen der Buttons erheblich und kann die Benutzererfahrung verbessern. Hier sind jeweils zwei Beispiele für den Eckenradius, einschließlich der Auswirkungen auf die Ecken oben, rechts, unten und links sowie optimaler Maße:

1. Eckenradius

  • Beispiel 1: Eckenradius 8px
    • Verwendung: Ein Eckenradius von 8px sorgt für abgerundete Ecken, die dem Button ein modernes und freundliches Aussehen verleihen.
    • Auswirkung:
      • Oben: 8px sorgt dafür, dass die oberen Ecken sanft abgerundet sind, was den Button einladender macht.
      • Rechts: 8px gibt dem Button ein harmonisches Erscheinungsbild, das die Benutzer anspricht.
      • Unten: 8px sorgt für ein einheitliches Design, das die visuelle Kohärenz des Buttons unterstützt.
      • Links: 8px trägt zur Gesamtästhetik bei und sorgt dafür, dass der Button nicht zu kantig wirkt.
    • Optimale Maße: Diese Einstellung ist ideal für primäre Buttons, die auffallen und eine positive Benutzererfahrung fördern sollen.
  • Beispiel 2: Eckenradius 4px
    • Verwendung: Ein Eckenradius von 4px bietet eine subtilere Abrundung, die weniger auffällig ist.
    • Auswirkung:
      • Oben: 4px sorgt für eine dezente Abrundung, die den Button professionell und modern erscheinen lässt.
      • Rechts: 4px hält das Design klar und strukturiert, ideal für formelle Anwendungen.
      • Unten: 4px sorgt für ein sauberes Erscheinungsbild, das die Benutzer nicht ablenkt.
      • Links: 4px trägt zur Schlichtheit des Designs bei, was für sekundäre Buttons vorteilhaft ist.
    • Optimale Maße: Diese Einstellung eignet sich gut für sekundäre Buttons oder für Buttons, die in einem minimalistischen Designkonzept verwendet werden.

Fazit

Die Anpassung des Eckenradius im Astra Theme ist entscheidend, um Buttons ansprechend und benutzerfreundlich zu gestalten. Durch die Wahl optimaler Maße für den Eckenradius können Sie das visuelle Design Ihrer Buttons verbessern und die Benutzererfahrung auf Ihrer Website positiv beeinflussen.

Seite 2 von 2