214 Fragen zu Webdesign

Bei der Seitengestaltung mit Kadence (z. B. im Kadence Theme oder Kadence Blocks für WordPress) kommt zuerst ein Abschnitt (englisch: „Section“ oder „Row Layout“). Ein Abschnitt dient als Container für verschiedene Inhalte und Layout-Elemente. Innerhalb eines Abschnitts kannst du dann ein Spaltenlayout (englisch: „Columns“ oder „Column Layout“) hinzufügen, um Inhalte nebeneinander anzuordnen. **Reihenfolge:** 1. Abschnitt/Row Layout erstellen 2. Innerhalb des Abschnitts ein Spaltenlayout hinzufügen So kannst du die Struktur deiner Seite flexibel aufbauen und später Inhalte in die einzelnen Spalten einfügen. Weitere Infos findest du direkt bei [Kadence WP](https://www.kadencewp.com/).

In Kadence Theme Version 1.4.2 kannst du für eine einzelne Seite den Hintergrund (Background) auf verschiedene Arten anpassen. Die einfachste Methode ist die Nutzung der Seiteneinstellungen im WordPress-Editor: **So gehst du vor:** 1. **Seite bearbeiten:** Gehe im WordPress-Backend zu „Seiten“ und wähle die gewünschte Seite zum Bearbeiten aus. 2. **Kadence-Seiteneinstellungen öffnen:** Im Editor findest du rechts (oder unten, je nach Bildschirmgröße) die „Kadence-Seiteneinstellungen“. Falls du den Gutenberg-Editor verwendest, klicke auf das Kadence-Logo oder den Tab „Seiten-Einstellungen“ in der Seitenleiste. 3. **Hintergrund einstellen:** In den Kadence-Seiteneinstellungen gibt es einen Bereich „Design“ oder „Hintergrund“. Hier kannst du eine individuelle Hintergrundfarbe oder ein Hintergrundbild für diese Seite festlegen. 4. **Speichern:** Nach der Auswahl speichere oder aktualisiere die Seite. **Alternative Methode (mit benutzerdefiniertem CSS):** Falls die Kadence-Seiteneinstellungen nicht ausreichen, kannst du auch individuelles CSS nutzen: - Notiere dir die Seiten-ID (z.B. `page-id-123`). - Gehe zu „Design“ > „Customizer“ > „Zusätzliches CSS“. - Füge folgenden Code ein (ersetze 123 durch deine Seiten-ID): ```css .page-id-123 { background: #deineFarbe; /* oder background-image: url('deinBild.jpg'); */ } ``` **Hinweis:** Die genaue Bezeichnung der Einstellungen kann je nach Kadence-Version und WordPress-Editor leicht variieren. Falls du die Option nicht findest, prüfe, ob du das Kadence-Theme und ggf. das Kadence Blocks Plugin aktuell installiert hast. Weitere Infos findest du auch in der [Kadence Theme Dokumentation](https://www.kadencewp.com/help-center/docs/kadence-theme/). **Tipp:** Bei manchen Seitenbaukästen (wie Elementor oder WPBakery) gibt es zusätzliche Optionen direkt im Editor. **Fazit:** Am einfachsten ist die Anpassung über die Kadence-Seiteneinstellungen im Editor. Für mehr Flexibilität kannst du eigenes CSS verwenden.

Die Anzahl der Beiträge pro Seite auf Kategorie-Seiten in WordPress kannst du wie folgt festlegen: 1. **Im WordPress-Backend:** - Gehe zu **Einstellungen** > **Lesen**. - Suche die Option **"Blogseiten zeigen maximal X Beiträge"**. - Trage die gewünschte Anzahl ein. - Speichere die Änderungen. Diese Einstellung gilt für alle Archivseiten (z. B. Kategorien, Schlagwörter, Blogübersicht). --- **Hinweis:** Wenn du für bestimmte Kategorien eine andere Anzahl festlegen möchtest, ist das mit Bordmitteln nicht möglich. Dafür benötigst du ein Plugin wie [Category Posts Per Page](https://de.wordpress.org/plugins/category-posts-per-page/) oder du fügst individuellen Code in die `functions.php` deines Child-Themes ein. **Beispiel für individuellen Code:** ```php function custom_posts_per_page($query) { if ($query->is_category('deine-kategorie') && $query->is_main_query()) { $query->set('posts_per_page', 5); // Anzahl anpassen } } add_action('pre_get_posts', 'custom_posts_per_page'); ``` Ersetze `'deine-kategorie'` durch den Slug deiner Kategorie und `5` durch die gewünschte Anzahl. --- **Zusammenfassung:** Standardmäßig stellst du die Beitragsanzahl unter **Einstellungen > Lesen** ein. Für individuelle Kategorien nutze ein Plugin oder eigenen Code.

Das Suchfeld im Kadence Theme für WordPress funktioniert wie folgt: 1. **Integration**: Das Kadence Theme bietet ein integriertes Suchfeld, das du über den Customizer oder den Header-Builder hinzufügen kannst. Es nutzt die Standard-WordPress-Suchfunktion. 2. **Funktionsweise**: Wenn ein Nutzer einen Suchbegriff eingibt und absendet, wird eine Anfrage an die WordPress-Suchfunktion gestellt. Die Ergebnisseite zeigt dann Beiträge, Seiten oder andere Inhalte an, die den Suchbegriff enthalten. 3. **Anpassung**: Im Customizer kannst du das Aussehen und die Platzierung des Suchfelds anpassen (z.B. als Icon, als Eingabefeld oder als Overlay). Auch die Farben und Abstände lassen sich konfigurieren. 4. **Erweiterungen**: Mit Plugins wie [WP Search with Algolia](https://de.wordpress.org/plugins/wp-search-with-algolia/) oder [Relevanssi](https://de.wordpress.org/plugins/relevanssi/) kannst du die Suchfunktion erweitern, z.B. für bessere Relevanz oder Live-Suche. 5. **Technik**: Das Suchfeld ist meist ein HTML-Formular, das eine GET-Anfrage an die URL deiner Seite mit dem Parameter `?s=Suchbegriff` sendet. WordPress verarbeitet diesen Parameter und zeigt die passenden Ergebnisse an. Weitere Informationen findest du in der [Kadence Theme Dokumentation](https://www.kadencewp.com/help-center/docs/kadence-theme/header-search/).

Um den gleichmäßigen Buttonabstand bei den Hero Buttons im Kadence Theme (Version 1.4.2) einzustellen, gehe wie folgt vor: 1. **Bearbeite die Seite** mit dem Hero-Block, auf der die Buttons eingefügt sind. 2. **Wähle den Hero-Block** aus (meist „Row Layout“ oder „Advanced Button“ Block). 3. **Wähle den Button-Container** (also das Element, das die Buttons enthält, nicht den einzelnen Button). 4. Im rechten Einstellungsbereich findest du unter **„Abstand“** oder **„Spacing“** die Option für **„Button Abstand“** oder **„Button Gap“** (je nach Spracheinstellung). 5. **Stelle hier den gewünschten Abstand** (z.B. 16px) ein. Die Buttons werden dann gleichmäßig voneinander getrennt. **Hinweis:** Falls du mehrere Buttons als einzelne Blöcke eingefügt hast, kannst du sie in einen „Buttons“-Block gruppieren und dort den Abstand einstellen. **Tipp:** Sollte die Option im Block-Editor nicht sichtbar sein, prüfe, ob du die aktuellste Version des Kadence Blocks Plugins verwendest: https://de.wordpress.org/plugins/kadence-blocks/ **Weitere Infos:** Offizielle Kadence Dokumentation: https://www.kadencewp.com/help-center/docs/kadence-blocks/advanced-button-block/ So kannst du den Buttonabstand einfach und gleichmäßig einstellen.

Ein Konzept für die Internetseite der Betreuungsbehörde des Landkreises Oberhavel sollte strukturiert, zielgruppenorientiert und informativ sein. Hier findest du eine Schritt-für-Schritt-Anleitung sowie Hinweise für die Präsentation in einem 15-minütigen Vortrag. **1. Zielsetzung der Website** - Information der Bürger über Aufgaben, Leistungen und Ansprechpartner der Betreuungsbehörde - Bereitstellung von Formularen und Anträgen - Aufklärung über rechtliche Betreuung, Vorsorgevollmacht, Betreuungsverfügung - Kontaktmöglichkeiten und Öffnungszeiten **2. Zielgruppen** - Bürgerinnen und Bürger des Landkreises (Betroffene, Angehörige) - Professionelle Betreuer, Sozialdienste, Ärzte, Juristen - Behörden und Institutionen **3. Inhalte (Content)** - **Startseite:** Kurze Vorstellung, aktuelle Hinweise, schnelleinstieg zu wichtigen Themen - **Über uns:** Aufgaben, Team, rechtliche Grundlagen - **Leistungen:** Beratung, Bestellung von Betreuern, Unterstützung bei Vorsorgevollmachten etc. - **Formulare & Downloads:** Anträge, Broschüren, Merkblätter - **FAQ:** Häufig gestellte Fragen - **Kontakt:** Ansprechpartner, Sprechzeiten, Anfahrt, Online-Kontaktformular - **Aktuelles:** Veranstaltungen, Gesetzesänderungen, Pressemitteilungen **4. Struktur & Navigation** - Klare, intuitive Menüführung - Barrierefreiheit (z.B. leichte Sprache, Kontrast, Vorlesefunktion) - Responsive Design (optimiert für mobile Endgeräte) **5. Rechtliches & Datenschutz** - Impressum, Datenschutzerklärung, Barrierefreiheitserklärung - Hinweise zum Umgang mit personenbezogenen Daten **6. Technische Umsetzung** - Content-Management-System (z.B. WordPress, TYPO3) - Suchfunktion - SSL-Verschlüsselung **7. Pflege & Aktualisierung** - Verantwortlichkeiten für die Pflege der Inhalte festlegen - Regelmäßige Überprüfung auf Aktualität --- **Vorstellung im 15-minütigen Vortrag** **Gliederungsvorschlag:** 1. **Einleitung (2 Min)** - Begrüßung, Vorstellung des Themas - Bedeutung der Betreuungsbehörde und der Website 2. **Zielsetzung & Zielgruppen (2 Min)** - Warum braucht die Behörde eine Website? - Wer nutzt die Seite? 3. **Inhalte & Struktur (5 Min)** - Vorstellung der geplanten Seiten und Inhalte - Beispielhafte Navigation zeigen (evtl. Skizze/Folie) - Besondere Funktionen (Formulare, FAQ, Kontakt) 4. **Barrierefreiheit & Rechtliches (2 Min)** - Wichtige Anforderungen für öffentliche Stellen - Datenschutz, Impressum 5. **Technik & Pflege (2 Min)** - CMS, mobile Optimierung, Sicherheit - Wer pflegt die Seite? 6. **Fazit & Ausblick (2 Min)** - Zusammenfassung der wichtigsten Punkte - Nächste Schritte (z.B. Zeitplan, Umsetzung) **Tipps für den Vortrag:** - Visualisiere das Konzept mit Schaubildern oder einer Beispiel-Navigation. - Gehe auf die Besonderheiten einer Behördenseite ein (z.B. Barrierefreiheit). - Halte die Sprache einfach und verständlich. - Plane Zeit für Fragen am Ende ein. **Weitere Informationen zur Betreuungsbehörde Oberhavel findest du hier:** [Landkreis Oberhavel – Betreuungsbehörde](https://www.oberhavel.de/index.phtml?NavID=1860.86&La=1) **Hinweis:** Die Website sollte stets aktuell, bürgernah und rechtssicher gestaltet sein.

Um im Kadence Theme (Version 1.4.2) auf der Startseite einen Hero-Bereich mit voller Breite und einer festen Höhe von 600 px einzubauen, gehe wie folgt vor: 1. **Seite bearbeiten:** Gehe im WordPress-Backend zu „Seiten“ und bearbeite deine Startseite. 2. **Kadence-Block hinzufügen:** Füge einen neuen „Row Layout“-Block von Kadence Blocks hinzu. 3. **Volle Breite einstellen:** Wähle im Block-Editor den Row Layout-Block aus. Stelle unter „Layout“ die Option „Fullwidth“ (Volle Breite) ein. Setze die „Content Max Width“ auf „Fullwidth“ oder lasse sie leer, damit der Inhalt ebenfalls die volle Breite nutzt. 4. **Höhe festlegen:** Scrolle im Block-Editor zu den Einstellungen für den Row Layout-Block. Unter „Design“ findest du das Feld „Min Height“ (Mindesthöhe). Trage dort „600px“ ein. 5. **Hintergrundbild oder Farbe hinzufügen (optional):** Im selben Bereich kannst du unter „Background Settings“ ein Bild oder eine Farbe für den Hero-Bereich festlegen. 6. **Inhalt einfügen:** Füge Überschriften, Text oder Buttons in den Row Layout-Block ein, wie du möchtest. 7. **Seite aktualisieren:** Speichere oder aktualisiere die Seite. **Hinweis:** Falls du den Gutenberg-Editor nicht nutzt, sondern den klassischen Editor oder einen anderen Page Builder, kann die Vorgehensweise abweichen. **Weitere Infos:** - [Kadence Blocks Dokumentation](https://www.kadencewp.com/kadence-blocks/documentation/) - [Kadence Theme Support](https://www.kadencewp.com/support/) So erhältst du einen Hero-Bereich mit voller Breite und einer festen Höhe von 600 px auf deiner Startseite.

In Kadence (Version 1.4.2) kannst du die Höhe des Hero-Bereichs (meist als „Hero Section“, „Hero Header“ oder „Page Title Area“ bezeichnet) auf verschiedene Arten anpassen, je nachdem, wie du den Hero erstellt hast: **1. Über den Customizer (bei Standard-Page-Title-Hero):** - Gehe zu **Design > Customizer**. - Navigiere zu **Seitenkopf > Seiten-Titel-Layout** (oder ähnlich, je nach Spracheinstellung). - Dort findest du Einstellungen für den Abstand oben/unten oder die Höhe des Hero-Bereichs. Passe die Werte nach deinen Wünschen an. **2. Über Kadence Blocks (bei individuellem Hero mit Block-Editor):** - Öffne die Seite oder den Beitrag im WordPress-Editor. - Wenn du den Hero mit einem „Row Layout“-Block von Kadence erstellt hast, wähle diesen Block aus. - In der rechten Seitenleiste findest du unter „Layout“ die Option **Minimale Höhe** (z.B. in Pixel oder VH – Viewport Height). - Trage dort den gewünschten Wert ein, z.B. „500px“ oder „80vh“, um die Höhe festzulegen. **3. Über individuelles CSS:** Falls die obigen Optionen nicht ausreichen, kannst du eigenes CSS verwenden: - Gehe zu **Design > Customizer > Zusätzliches CSS**. - Füge z.B. Folgendes ein (ersetze `.dein-hero-selector` durch die tatsächliche CSS-Klasse deines Hero-Bereichs): ```css .dein-hero-selector { min-height: 500px; } ``` **Tipp:** Um die richtige CSS-Klasse zu finden, kannst du im Browser mit Rechtsklick auf den Hero-Bereich und „Element untersuchen“ arbeiten. **Weitere Infos:** Offizielle Kadence-Dokumentation: https://www.kadencewp.com/help-center/ **Hinweis:** Die genauen Bezeichnungen können je nach Theme-Einstellungen und Sprache leicht abweichen. Bei individuellen Seitenbaukästen (z.B. Elementor) gelten andere Wege. Falls du eine bestimmte Seite oder einen bestimmten Block meinst, prüfe, ob du den Hero mit Kadence Blocks oder über die Theme-Einstellungen erstellt hast – davon hängt der genaue Weg ab.

In Kadence (Version 1.4.2) solltest du das Hero-Bild im **Abschnitt** des Spaltenlayouts platzieren, nicht direkt in einer einzelnen Spalte. Der Abschnitt (englisch: "Section") bildet den übergeordneten Rahmen für das gesamte Spaltenlayout und ermöglicht dir, das Hintergrundbild (Hero-Bild) für den gesamten Bereich festzulegen. So erstreckt sich das Bild über die volle Breite des Spaltenlayouts und nicht nur über eine einzelne Spalte. **Vorgehen:** 1. Füge einen neuen Abschnitt (Section) hinzu. 2. Lege im Abschnitt das Hintergrundbild (Hero-Bild) fest. 3. Füge innerhalb des Abschnitts das gewünschte Spaltenlayout hinzu. 4. Platziere deine Inhalte in den einzelnen Spalten. **Vorteil:** Das Hero-Bild bleibt so responsiv und deckt den gesamten Bereich ab, während du die Inhalte flexibel in den Spalten anordnen kannst. Weitere Infos findest du in der [Kadence Dokumentation](https://www.kadencewp.com/help-center/).

Der Unterschied zwischen „Header“ und „Hero“ liegt im Webdesign in ihrer Funktion und Gestaltung: **Header:** Der Header ist der obere Bereich einer Webseite, der auf allen Seiten gleich oder ähnlich aussieht. Er enthält meist das Logo, die Navigation (Menü), eventuell Kontaktdaten oder einen Login-Bereich. Der Header ist also ein funktionaler Bereich für Orientierung und Navigation. **Hero:** Der Hero (oder Hero-Section) ist ein auffälliger, meist großflächiger Bereich direkt unter dem Header auf der Startseite (manchmal auch auf Unterseiten). Er enthält oft ein großes Bild, einen Slogan, eine Überschrift und einen Call-to-Action (z. B. „Jetzt kaufen“). Ziel des Hero-Bereichs ist es, Aufmerksamkeit zu erregen und die Hauptbotschaft der Seite zu vermitteln. **Zusammengefasst:** - **Header:** Funktional, Navigation und Branding, auf allen Seiten sichtbar - **Hero:** Visuell auffällig, zentrale Botschaft, meist nur auf der Startseite Beispiel: Oben auf der Seite siehst du das Logo und das Menü (Header). Darunter folgt ein großes Bild mit Überschrift und Button (Hero).

In WordPress mit dem Kadence Theme findest du die Typografie-Einstellungen wie folgt: 1. **Gehe ins WordPress-Dashboard.** 2. **Navigiere zu „Design“ > „Customizer“** (oder „Customizer“ je nach Spracheinstellung). 3. Im Customizer-Menü findest du den Punkt **„Typografie“** oder **„Typography“**. 4. Dort kannst du globale Schriftarten, Schriftgrößen, Zeilenhöhen und weitere typografische Einstellungen für Überschriften, Fließtext und andere Elemente anpassen. Falls du Kadence Blocks nutzt, gibt es zusätzlich in den Block-Einstellungen (im Editor rechts) oft eigene Typografie-Optionen für einzelne Blöcke. Weitere Infos findest du auch auf der offiziellen Seite von Kadence: https://www.kadencewp.com/knowledge-base/customize-theme-typography/ Sollte der Menüpunkt „Typografie“ nicht sichtbar sein, prüfe, ob das Kadence Theme aktiv ist und keine anderen Plugins die Customizer-Optionen einschränken.

Eine mit Canva erstellte Webseite kann nicht direkt als vollwertige WordPress-Seite importiert werden. Canva bietet die Möglichkeit, Webseiten als statische Seiten zu gestalten und als HTML-Datei herunterzuladen oder über einen Canva-Link zu veröffentlichen. WordPress hingegen ist ein Content-Management-System, das dynamische Inhalte und eigene Themes/Plugins verwendet. Es gibt aber folgende Möglichkeiten: 1. **Einbetten als Bild oder PDF:** Du kannst deine Canva-Webseite als Bild oder PDF exportieren und diese Datei in einen WordPress-Beitrag oder eine Seite einfügen. Das ist aber keine „echte“ Webseite, sondern nur eine Grafik oder ein Dokument. 2. **HTML-Code einfügen:** Wenn Canva dir den HTML-Code deiner Seite zur Verfügung stellt (das ist nicht immer der Fall), kannst du diesen Code in WordPress einfügen. Dazu musst du im WordPress-Editor auf „Code-Editor“ wechseln und den HTML-Code einfügen. Beachte, dass komplexe Canva-Webseiten oft nicht vollständig kompatibel sind und das Design verloren gehen kann. 3. **Verlinken:** Du kannst die mit Canva veröffentlichte Webseite einfach als externen Link in deinem WordPress-Menü oder in einem Beitrag einfügen. **Fazit:** Eine direkte, vollwertige Integration ist nicht möglich. Für professionelle Webseiten empfiehlt es sich, WordPress-eigene Themes und den Block-Editor zu nutzen. Canva eignet sich eher für einzelne Grafiken, Header oder Landingpages, die du als Bild oder PDF einbindest. Weitere Infos zu Canva: [https://www.canva.com/](https://www.canva.com/) Weitere Infos zu WordPress: [https://de.wordpress.org/](https://de.wordpress.org/)

Um eine bestehende Unterseite im WordPress-Theme Divi mit einer neuen Vorlage umzugestalten, gehst du wie folgt vor: 1. **Seite im Backend öffnen:** Gehe im WordPress-Dashboard zu „Seiten“ und wähle die gewünschte Unterseite aus, die du bearbeiten möchtest. 2. **Divi Builder aktivieren:** Klicke oben auf „Mit dem Divi Builder bearbeiten“, falls der Divi Builder noch nicht aktiviert ist. 3. **Vorlage auswählen oder importieren:** - **Vorlage aus der Bibliothek:** Klicke im Divi Builder auf das lila Plus-Symbol („Vorlage laden“). Wähle „Vorgefertigtes Layout laden“ oder „Aus Bibliothek laden“, um eine gespeicherte Vorlage auszuwählen. - **Neue Vorlage importieren:** Falls du eine externe Divi-Vorlage (z.B. als .json-Datei) hast, kannst du diese über „Portabilität“ (das Pfeil-Symbol oben) importieren. 4. **Vorlage anwenden:** Nach Auswahl der gewünschten Vorlage wirst du gefragt, ob du den aktuellen Inhalt ersetzen möchtest. Wähle „Ersetzen“, um die Seite komplett mit der neuen Vorlage zu überschreiben. 5. **Anpassen und speichern:** Passe die Inhalte nach Bedarf an und klicke auf „Aktualisieren“ oder „Veröffentlichen“, um die Änderungen zu speichern. **Hinweis:** Das Ersetzen des Layouts löscht den bisherigen Seiteninhalt. Erstelle ggf. vorher ein Backup der Seite. Weitere Infos findest du auf der offiziellen [Divi-Website](https://www.elegantthemes.com/layouts/) oder in der [Divi-Dokumentation](https://www.elegantthemes.com/documentation/divi/).

Ein anderes Wort für „Nutzerarchitektur“ im Webdesign ist **Informationsarchitektur**. Weitere gebräuchliche Begriffe sind **User Experience Architektur (UX-Architektur)** oder **Strukturierung der Benutzeroberfläche**.

In Elementor kannst du einen gelöschten Container oder andere Änderungen rückgängig machen, indem du die Undo-Funktion nutzt. Dafür gibt es mehrere Möglichkeiten: 1. **Tastenkombination:** Drücke einfach `Strg + Z` (Windows) oder `Cmd + Z` (Mac), um die letzte Aktion rückgängig zu machen. 2. **Verlauf-Funktion:** Klicke unten im Elementor-Editor auf das Uhr-Symbol („Verlauf“). Dort siehst du eine Liste aller letzten Aktionen und kannst zu einem früheren Stand zurückspringen. 3. **Revisionen:** Im selben Verlauf-Fenster gibt es einen Tab „Revisionen“. Hier kannst du zu einem früher gespeicherten Stand deiner Seite zurückkehren. Wenn du die Seite bereits gespeichert und den Editor verlassen hast, kannst du nur über die Revisionen einen früheren Stand wiederherstellen. Weitere Infos findest du auch direkt bei [Elementor](https://elementor.com/help/history-panel/).