Der Produkttitel-Block ruft dynamisch den Titel jedes WooCommerce-Produkts ab und zeigt ihn auf Ihren einzelnen Produktvorlagen an. Anstatt einen Produktnamen manuell einzugeben, ruft dieser Block den Titel direkt aus WooCommerce für jedes Produkt ab, wodurch Ihre Seiten über Ihren gesamten Katalog hinweg korrekt und konsistent bleiben.
Dieser Block ist ausschließlich für die Verwendung auf einzelnen Produktvorlagen konzipiert. Sie haben die volle Kontrolle darüber, wie der Titel gerendert wird – wählen Sie die HTML-Überschriftenebene (H1 bis H6), legen Sie die Ausrichtung und Schriftgröße pro Gerät fest und umschließen Sie den Titel optional mit einem Link. Der Tab „Erweitert“ bietet Ihnen zusätzliche Styling-Optionen, einschließlich Typografie, Farbe und Textschatteneffekte.
Hinzufügen des Produkttitel-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produkttitel-Block zu Ihrer SeedProd-Einzelproduktvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Unter Design > Blöcke > WooCommerce-Vorlagen-Tags ziehen Sie den Block Produkttitel per Drag & Drop in den gewünschten Bereich Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald der Block hinzugefügt wurde, klicken Sie darauf, um seine Einstellungen zu öffnen. Im Tab Inhalt enthält der Abschnitt Überschrift das Textfeld für den Titel und alle Anzeigeoptionen, wie der Produkttitel auf der Seite erscheint.
- Text: Das Inhaltsfeld ist mit dem
-Shortcode vorab gefüllt, der automatisch den korrekten Produkttitel von WooCommerce für jedes Produkt abruft. Sie können bei Bedarf benutzerdefinierten Text um den Shortcode herum hinzufügen oder den Rich-Text-Editor verwenden, um fette, kursive oder andere Inline-Formatierungen anzuwenden. - Link: Umschließen Sie den Produkttitel optional mit einem Hyperlink, indem Sie eine URL in das Feld Link eingeben. Erweitern Sie die Link-Optionen, um 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 hinzu) zu aktivieren. - Ausrichtung: Legen Sie die horizontale Ausrichtung des Titels fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Ausrichtung für Desktop, Tablet und Mobilgeräte.
- Schriftgröße: Legen Sie die Schriftgröße des Titels mit dem Schieberegler (10–72px) fest. Unterstützt gerätespezifische Größen für Desktop, Tablet und Mobilgeräte.
- Ebene: Wählen Sie das HTML-Überschriften-Tag, das zur Ausgabe des Produkttitels verwendet wird – H1, H2, H3, H4, H5 oder H6. Aus SEO-Best-Practice-Gründen verwenden Sie H1 für den Hauptprodukttitel, wenn kein anderer H1 auf der Seite vorhanden ist.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das Erscheinungsbild des Titels weiter gestalten und seine Sichtbarkeit auf verschiedenen Geräten steuern.
Stile:
- Typografie: Legen Sie die Schriftfamilie, -stärke, Zeilenhöhe, Buchstabenabstand und Texttransformation für den Produkttiteltext fest, um mehr Kontrolle zu erhalten, als der Schieberegler für die Schriftgröße im Inhalts-Tab bietet.
- Farbe: Legen Sie die Textfarbe des Produkttitels fest.
- Textschatten: Fügen Sie dem Titeltext einen Schatteneffekt hinzu. Wählen Sie aus voreingestellten Größen (Keine, Haarfein, Klein, Mittel, Groß, X-Groß, 2X-Groß), um dem Titel subtile oder dramatische Tiefe zu verleihen.
Abstand:
- Rand: Steuern Sie den äußeren Abstand um Ihren Produkttitel-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Titel und den umgebenden Elementen auf der Produktseite erscheint.
- Innenabstand: Passen Sie den inneren Abstand innerhalb Ihres Produkttitel-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Titeltext und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produkttitel-Block an. Diese ID wird von SeedProd automatisch für benutzerdefinierte Stile oder JavaScript-Zielgruppen erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-title|produkt).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Produkttitel-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Produkttitel-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Produkttitel-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produkttitel-Block ins Sichtfeld gescrollt wird. Optionen umfassen Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Stellen Sie sicher, dass Sie Ihre Arbeit speichern, nachdem Sie den Produkttitel-Block konfiguriert und sein Erscheinungsbild angepasst haben.
Sie haben erfolgreich einen Produkttitel-Block zu Ihrer Einzelproduktvorlage hinzugefügt! Der Block zeigt automatisch den korrekten Titel für jedes Produkt in Ihrem WooCommerce-Katalog an, ohne manuellen Aufwand. Experimentieren Sie mit Überschriftenebenen, schriftgrößen pro Gerät und Textschatteneffekten, um eine Produkttitelpräsentation zu erstellen, die sowohl optisch ansprechend als auch für Suchmaschinen optimiert ist.