PAGE BUILDER - Footer-Builder Allgemein

ASTRA Customizer aufrufen im Word Dashboard

Astra / Customizer / Footer Builder / Bereich: Elements

Automatisch ist bereits der Copyright Vermerk vorhanden

---

---

Bereich Elemente

Im Astra-Customizer-Footer-Builder können Sie verschiedene Elemente für Ihren Footer anpassen. Ein wichtiger Aspekt ist der Copyright-Bereich:

• Copyright: Wie verändern:
  Um den Copyright-Text im Footer zu ändern, gehen Sie zu Design > Customizer > Footer. Dort finden Sie die Option, den Copyright-Text anzupassen. Sie können den Standardtext durch Ihren eigenen ersetzen, um sicherzustellen, dass er Ihre Marke oder Website korrekt repräsentiert.

---

 

---

Bereich: Design

Im Design-Bereich des Footer-Builders können Sie verschiedene visuelle Aspekte anpassen:

• Hintergrundfarbe:
  Sie können die Hintergrundfarbe des Footers ändern, um ihn an das Design Ihrer Website anzupassen. Wählen Sie eine Farbe, die gut zu Ihrem Branding passt und die Lesbarkeit des Textes im Footer unterstützt.
• Hintergrundbild:
  Zusätzlich zur Hintergrundfarbe haben Sie die Möglichkeit, ein Hintergrundbild für den Footer hochzuladen. Dies kann helfen, visuelles Interesse zu erzeugen und den Footer hervorzuheben.

---

 

---

Innenabstand und Außenabstand

• Innenabstand:

• Oben:
  Passen Sie den Innenabstand oben im Footer an, um sicherzustellen, dass der Inhalt nicht direkt am oberen Rand klebt.
• Rechts:
  Stellen Sie den Innenabstand rechts ein, um den Text oder die Elemente im Footer gut zu positionieren.
• Unten:
  Der Innenabstand unten sorgt dafür, dass der Inhalt nicht direkt am unteren Rand des Footers anliegt.
• Links:
  Der Innenabstand links kann helfen, den Text oder die Widgets im Footer gleichmäßig zu verteilen. 
  
  

• Außenabstand

• Oben:
  Der Außenabstand oben kann verwendet werden, um den Footer vom vorhergehenden Inhalt abzugrenzen.
• Rechts:
  Passen Sie den Außenabstand rechts an, um den Footer visuell zu zentrieren oder zu positionieren.
• Unten:
  Der Außenabstand unten sorgt dafür, dass der Footer nicht direkt am unteren Rand der Seite anliegt.
• Links:
  Der Außenabstand links kann helfen, den Footer gleichmäßig zu gestalten und ihm mehr Raum zu geben.

---

---

Footer konfigurieren

Im Astra-Customizer können Sie den Footer Ihrer Website anpassen. Hier sind je 2 Beispiele für die verschiedenen Bereiche im Footer-Builder, insbesondere im Bereich General.

 

 

---

 

---

Bereich: General

Spalte

1. 1 Spalte:
   • Beispiel 1:
     Ein einfaches Layout, das sich ideal für minimalistische Designs eignet. Hier können Sie alle Footer-Inhalte in einer einzigen Spalte anordnen, was den Fokus auf den Inhalt legt.
   • Beispiel 2:
     Diese Anordnung eignet sich perfekt für Websites mit wenigen Informationen im Footer, wie z.B. Kontaktinformationen oder ein kurzes Impressum.
2. 2 Spalten:
   • Beispiel 1:
     Eine Spalte für Links zu wichtigen Seiten (z.B. Datenschutz, Impressum) und
     eine andere für Kontaktinformationen oder Social-Media-Links. Dies schafft eine klare Struktur.
   • Beispiel 2:
     Eine Spalte kann für die Navigation genutzt werden, während die zweite Spalte für wichtige Ankündigungen oder Newsletter-Anmeldungen dient.
3. 3 Spalten:
   • Beispiel 1:
     Eine Spalte für Unternehmensinformationen,
     eine für Links und eine für Social-Media-Icons. Dies bietet eine umfassende Informationsverteilung.
   • Beispiel 2:
     Eine Spalte für häufig gestellte Fragen (FAQ),
     eine für Kontaktinformationen und
     eine für Newsletter-Anmeldungen. Diese Anordnung ist besonders nützlich für Service-orientierte Websites.

---

 

---

Layout der inneren Elemente

• Stapel:
  • Diese Option erlaubt es Ihnen, die inneren Elemente übereinander zu stapeln. Dies ist ideal, wenn Sie möchten, dass die Inhalte in einer vertikalen Anordnung angezeigt werden, was die Lesbarkeit erhöht und eine klare Struktur bietet.
• Innerhalb Breite:
  • Volle Breite:
    Diese Einstellung sorgt dafür, dass die inneren Elemente den gesamten verfügbaren Platz im Footer einnehmen. Dies kann besonders ansprechend sein, wenn Sie ein Bild oder einen großen Textblock einfügen möchten.
  • Inhaltsbreite:
    Bei dieser Option wird der Inhalt auf eine festgelegte Breite beschränkt, was ein harmonisches und strukturiertes Erscheinungsbild schafft. Dies ist nützlich, um den Footer an das Design der restlichen Website anzupassen.

---

 

---

Vertikale Ausrichtung

• Oben:
  Diese Einstellung sorgt dafür, dass alle inneren Elemente am oberen Rand der Spalte ausgerichtet sind. Dies kann nützlich sein, wenn Sie möchten, dass der Inhalt sofort ins Auge fällt.
• Mitte:
  Eine mittige Ausrichtung sorgt für ein ausgewogenes Erscheinungsbild und kann helfen, den Footer ansprechender zu gestalten, insbesondere wenn Sie mehrere Elemente haben.
• Unten:
  Diese Option platziert die Inhalte am unteren Rand der Spalte. Dies kann hilfreich sein, um die Sichtbarkeit von Elementen wie Copyright-Informationen zu erhöhen.

---

---

Sichtbarkeit

Sie können die Sichtbarkeit für folgende Geräte ein- oder ausschalten

• Desktop:
  • Sie können festlegen, dass bestimmte Inhalte nur auf Desktop-Geräten sichtbar sind. Dies ist nützlich, um die Benutzererfahrung auf größeren Bildschirmen zu optimieren.
• Mobil:
  • Inhalte können speziell für mobile Geräte angepasst werden, sodass Sie sicherstellen, dass die wichtigsten Informationen einfach zugänglich sind.
• Handy:
  • Diese Einstellung erlaubt es Ihnen, den Footer so zu gestalten, dass er optimal auf Smartphones angezeigt wird. Beispielsweise könnten Sie bestimmte Elemente ausblenden, um die Benutzeroberfläche zu vereinfachen.

Durch die Anpassung dieser Elemente im Astra-Customizer können Sie einen Footer gestalten, der sowohl funktional als auch optisch ansprechend ist und gut zu Ihrer gesamten Website passt.

 

 

Footer-Bereich erstellen - Copyright 

Astra / Customizer / Footer-Builder / Bereich: Elements 

Sie verwenden einen ganz dunklen Hintergrund mit einer weißen Schriftfarbe. 

Im Astra-Customizer können Sie den Footer anpassen, insbesondere den Copyright-Text. Hier ist eine Aufstellung aller möglichen Abkürzungen, die Sie verwenden können:

1. [year]: Diese Abkürzung zeigt das aktuelle Jahr an. Sie wird automatisch aktualisiert, sodass Sie nicht jedes Jahr manuell ändern müssen.
2. [site_title]: Diese Abkürzung zeigt den Titel Ihrer Website an. Sie wird aus den Einstellungen Ihrer WordPress-Website gezogen.
3. [site_url]: Hiermit wird die URL Ihrer Website angezeigt. Dies kann nützlich sein, wenn Sie den Link zu Ihrer Website im Copyright-Text einfügen möchten.
4. [author]: Diese Abkürzung zeigt den Namen des Autors oder der Firma an, die die Website erstellt hat.
5. [author_url]: Dies zeigt die URL des Autors oder der Firma an, die hinter der Website steht.
6. [current_time]: Diese Abkürzung zeigt die aktuelle Uhrzeit an (abhängig von der Zeitzone Ihrer Website).
   
   

---

 

---

Copyright-Text im Footer dynamisch gestalten

Mit diesen Abkürzungen können Sie den Copyright-Text im Footer dynamisch gestalten und sicherstellen, dass er immer aktuell ist. 

Beispiel 1: 
Zeigt das aktuelle Jahr und den Titel Ihrer Website an.

javascript
© [year] [site_title]. Alle Rechte vorbehalten.

Beispiel 2: 
Fügt die URL Ihrer Website hinzu und macht sie klickbar

javascript
© [year] [site_title]. Besuchen Sie uns unter [site_url].

Beispiel 3:  
Anzeige des Autors, der die Website erstellt hat

javascript
© [year] [author]. Alle Rechte vorbehalten.

Beispiel 4: 
Autorennamen mit einem Link zur URL des Autors anzeigen 

javascript
© [year] [site_title]. Erstellt von [author] - [author_url].

Beispiel 5:
Anzeige der aktuellen Uhrzeit, die je nach Zeitzone Ihrer Website angepasst wird.

javascript
© [year] [site_title]. Letzte Aktualisierung: [current_time].

---

 

---

Footer-Bereich erstellen - Footer Menü

 

Icons für soziale Medien einfügen

Klicken Sie in der obersten Zeile auf das Plus-Zeichen in der linken Hälfte

Klicken Sie auf das Icon Social

Farbe der Icons auf WEISS

Klicken Sie auf die Icons, 

   Hintergrundfarbe (schwarz)          Farbe der Icons (weiß)

---

 

---

Footer-Bereich erstellen - Footer Menü

 

---

 

---

Schrift im Menü = weiß

 

 

 

Header und Footer Beispiele

In Elementor können Sie sowohl den Header als auch den Footer Ihrer Website gestalten. Hier sind jeweils zwei praktische Beispiele:

• Header-Beispiele

  1. Header mit Logo und Navigation:
     Ein Header, der ein Logo auf der linken Seite und ein horizontales Menü auf der rechten Seite enthält, um eine klare Navigation zu bieten.
  2. Header mit Suchleiste:
     Ein Header, der neben dem Logo auch eine Suchleiste enthält, um den Besuchern die Suche nach Inhalten zu erleichtern.
  3. Minimalistischer Header:
     Ein einfacher Header mit einem Logo auf der linken Seite und einem horizontalen Menü auf der rechten Seite. Ideal für eine klare und übersichtliche Navigation.
  4. Header mit Call-to-Action:
     Ein Header, der das Logo, ein Hauptmenü und eine hervorgehobene Schaltfläche für eine wichtige Aktion (z.B. "Jetzt kaufen") enthält. Dies zieht die Aufmerksamkeit auf sich und fördert Aktionen.
     

     ---

• Footer-Beispiele:

  1. Standard-Footer:
     Ein Footer mit Kontaktinformationen, Links zu den Datenschutzbestimmungen und sozialen Medien. Dies bietet den Besuchern wichtige Informationen und fördert die Interaktion.
  2. Footer mit Newsletter-Anmeldung:
     Ein Footer, der ein Anmeldeformular für den Newsletter sowie Links zu wichtigen Seiten enthält. Dies ist eine effektive Methode, um die E-Mail-Liste zu erweitern.
  3. Footer mit Kontaktinformationen:
     Ein Footer, der die Adresse, Telefonnummer und E-Mail-Adresse anzeigt, um den Besuchern eine einfache Kontaktaufnahme zu ermöglichen.
  4. Footer mit Links zu wichtigen Seiten:
     Ein Footer, der Links zu Datenschutz, Impressum und anderen wichtigen Seiten enthält, um den rechtlichen Anforderungen gerecht zu werden.

• ---

   

 

Header per ASTRA Customizer

Astra / Customizer / Header-Builder

---

 

---

Bereiche: Elemente und Design

Elemente:

Im Header-Bereich können Sie verschiedene Elemente hinzufügen, wie z.B. das Logo und das Menü. Wählen Sie die gewünschten Optionen aus, um Ihr Layout zu gestalten. Sie können auch Widgets hinzufügen, um zusätzliche Informationen wie Kontaktmöglichkeiten oder soziale Medien zu integrieren.

Design:

Im Design-Bereich des Customizers können Sie das Aussehen Ihres Headers anpassen. Hier können Sie Farben, Schriftarten und Abstände einstellen, um sicherzustellen, dass der Header gut zu Ihrer Website passt.
Nutzen Sie die Optionen für Hintergrundfarbe, Textfarbe und Schriftart, um ein ansprechendes Design zu erstellen.

 Astra-Customizer-Header-Builder: Bereich Elemente

Im Astra-Customizer-Header-Builder können Sie verschiedene Elemente für Ihren Header anpassen. Hier sind zwei Beispiele für jeden der genannten Bereiche:

Kopfzeilenvorgaben

Website Titel-Logo:
Sie können das Logo Ihrer Website hochladen und anpassen, um sicherzustellen, dass es gut sichtbar ist. Dies ist oft das erste, was Besucher sehen, und es sollte Ihre Marke repräsentieren.
Primäres Menü:
Hier können Sie das Hauptmenü Ihrer Website konfigurieren, um eine einfache Navigation zu ermöglichen. Sie können Menüpunkte hinzufügen, entfernen oder neu anordnen, um die Benutzererfahrung zu optimieren.

Header-Typen

Transparenter Header:
Diese Option ermöglicht es Ihnen, einen transparenten Header zu erstellen, der über den Inhalt Ihrer Seite gelegt wird. Dies kann besonders ansprechend sein, wenn Sie ein großes Hintergrundbild oder ein Video verwenden.

Aktivieren für komplette Website AN-AUS:
Sie können den transparenten Header für die gesamte Website aktivieren oder deaktivieren, je nach Designpräferenzen und Benutzererfahrung.

Aktivierung auf verschiedenen Geräten

Aktivieren auf Desktop:
Sie können den Header so einstellen, dass er nur auf Desktop-Geräten angezeigt wird, was nützlich sein kann, wenn Sie ein spezifisches Design für größere Bildschirme haben.

Aktivieren auf Mobile:
Alternativ können Sie den Header für mobile Geräte aktivieren, um sicherzustellen, dass Ihre Website auf Smartphones und Tablets gut aussieht und funktioniert.

Desktop und Mobile:
Sie haben auch die Möglichkeit, den Header sowohl auf Desktop- als auch auf mobilen Geräten zu aktivieren, um eine konsistente Benutzererfahrung zu gewährleisten.

Unterschiedliches Transparent Logo

Different Transparent Logo: Ein-Aus:
Diese Funktion ermöglicht es Ihnen, ein anderes Logo für den transparenten Header zu verwenden. Wenn Sie diese Option aktivieren EIN, können Sie ein Logo hochladen, das besser zu einem transparenten Hintergrund passt, um die Sichtbarkeit und das Branding zu verbessern.

Mit diesen Funktionen im Astra-Customizer-Header-Builder können Sie einen ansprechenden und funktionalen Header erstellen, der sowohl auf Desktop- als auch auf mobilen Geräten gut aussieht.

---

---

Astra-Customizer-Header-Builder: Bereich Design

Im Astra-Customizer-Header-Builder können Sie verschiedene Design-Elemente für Ihren Header anpassen. Hier sind zwei Beispiele für die Bereiche Breite und Außenabstand:

1. Breite

   Volle Breite:
   Diese Einstellung ermöglicht es Ihrem Header, die gesamte Breite des Bildschirms einzunehmen. Dies ist ideal für ein modernes und ansprechendes Design, das den gesamten verfügbaren Platz nutzt und eine nahtlose Benutzererfahrung bietet.
   Inhaltsbreite:
   Mit dieser Option können Sie die Breite des Headers auf eine bestimmte Inhaltsbreite beschränken. Dies sorgt für eine strukturierte Darstellung und kann helfen, den Header visuell ansprechender zu gestalten, insbesondere wenn Sie eine zentrale Ausrichtung bevorzugen.

2. Außenabstand

   Oben:
   Hier können Sie den Außenabstand oben im Header anpassen. Ein größerer Abstand kann helfen, den Header vom restlichen Inhalt abzuheben und ihm mehr Luft zu geben, was die Lesbarkeit verbessert.
   Unten:
   Ähnlich wie beim oberen Außenabstand können Sie auch den Abstand unten im Header einstellen. Dies ist wichtig, um sicherzustellen, dass der Header gut mit dem nachfolgenden Inhalt harmoniert und nicht zu gedrängt wirkt.

Durch die Anpassung dieser Design-Elemente im Astra-Customizer können Sie einen Header erstellen, der sowohl funktional als auch ästhetisch ansprechend ist und gut zu Ihrer gesamten Website passt.