Der Block „Produkttitel“ ruft dynamisch den Titel jedes WooCommerce-Produkts in Ihren Einzelproduktvorlagen ab und zeigt ihn an. Anstatt einen Produktnamen manuell einzugeben, ruft dieser Block den Titel für jedes Produkt direkt aus WooCommerce ab, sodass Ihre Seiten im gesamten Katalog korrekt und konsistent bleiben.
Dieser Block ist ausschließlich für die Verwendung in Einzelproduktvorlagen vorgesehen. Sie haben die volle Kontrolle darüber, wie der Titel dargestellt wird – wählen Sie die HTML-Überschriftenebene (H1 bis H6), legen Sie die Ausrichtung und Schriftgröße pro Gerät fest und fügen Sie den Titel optional in einen Link ein. Auf der Registerkarte „Erweitert“ finden Sie zusätzliche Gestaltungsoptionen, darunter Typografie, Farbe und Textschatteneffekte.
Hinzufügen des Produkttitelblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produkttitelblock zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design > Blöcke > WooCommerce-Vorlagen-Tags“ den Block „Produkttitel“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Produkttitel“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ enthält der Abschnitt „Überschrift“ das Textfeld für den Titel und alle Anzeigeoptionen für die Darstellung des Produkttitels auf der Seite.
- Text: Das Inhaltsfeld ist bereits mit dem
Shortcode, der automatisch den richtigen Produkttitel für jedes Produkt aus WooCommerce abruft. Bei Bedarf können Sie benutzerdefinierten Text um den Shortcode herum hinzufügen oder den Rich-Text-Editor verwenden, um Fettdruck, Kursivschrift oder andere Inline-Formatierungen anzuwenden. - Link: Optional können Sie den Produkttitel in einen Hyperlink einbinden, indem Sie eine URL in das Feld „Link“ eingeben. Erweitern Sie die Link-Optionen, um diese Funktion zu aktivieren. In neuem Fenster öffnen (öffnet den Link in einem neuen Browser-Tab) oder No Follow (fügt ein
rel="nofollow"Attribut zum Link für SEO-Zwecke hinzufügen). - Ausrichtung: Legen Sie die horizontale Ausrichtung des Titels fest – links, mittig oder rechts. Unterstützt die gerätespezifische Ausrichtung für Desktop-PCs, Tablets und Mobilgeräte.
- Schriftgröße: Stellen Sie die Schriftgröße des Titels mit dem Schieberegler ein (10–72 px). Unterstützt gerätespezifische Größenanpassung für Desktop, Tablet und Mobilgeräte.
- Level: Wählen Sie das HTML-Überschriften-Tag, das zur Ausgabe des Produkttitels verwendet wird – H1, H2, H3, H4, H5 oder H6. Für eine optimale Suchmaschinenoptimierung (SEO) verwenden Sie H1 für den Hauptprodukttitel, wenn auf der Seite kein anderes H1 vorhanden ist.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild des Titels weiter anpassen und seine Sichtbarkeit auf verschiedenen Geräten steuern.
Stile:
- Typografie: Legen Sie die Schriftfamilie, Schriftstärke, Zeilenhöhe, Buchstabenabstand und Textumwandlung für den Produkttiteltext fest und erhalten Sie so mehr Kontrolle als mit dem Schieberegler für die Schriftgröße auf der Registerkarte „Inhalt“.
- Farbe: Legen Sie die Textfarbe des Produkttitels fest.
- Textschatten: Fügen Sie direkt zum Titeltext einen Schatteneffekt hinzu. Wählen Sie aus voreingestellten Größen (Keine, Haarlinie, Klein, Mittel, Groß, X Groß, 2X Groß), um der Überschrift eine subtile oder dramatische Tiefe zu verleihen.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Produkttitelblock (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Titel und den umgebenden Elementen auf der Produktseite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Produkttitelblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Titeltext und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produkttitelblock an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-title|product).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Produkt-Titelblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Produkt-Titelblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Produkt-Titelblock auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produkt-Titelblock in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Produkttitel“ abgeschlossen und dessen Darstellung angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Produkttitel-Block zu Ihrer Einzelproduktvorlage hinzugefügt! Der Block zeigt automatisch den richtigen Titel für jedes Produkt in Ihrem WooCommerce-Katalog an, ohne dass Sie etwas manuell eingeben müssen. Experimentieren Sie mit Überschriftenebenen, gerätespezifischen Schriftgrößen und Textschatteneffekten, um eine Produkttitelpräsentation zu erstellen, die sowohl optisch ansprechend als auch für Suchmaschinen optimiert ist.