Module für Bildschieberegler verwenden

Mit dem Bildschieberegler-Modul können Sie mehrere Bilder in einem Modul anzeigen. Sie können die Bilder so einstellen, dass sie automatisch durchlaufen, oder Sie können die Besucher dabei unterstützen, manuell zwischen ihnen zu wechseln. 

Hinzufügen und Bearbeiten von Folien in Bildschieberegler Modulen

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
   • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
2. Klicken Sie auf den Namen Ihres Inhalts.
3. Klicken Sie in der linken Seitenleiste des Content-Editors auf das addSymbol für Hinzufügen. 
4. Erweitern Sie die Kategorie Media , klicken Sie dann auf das Modul Image Slider und ziehen Sie es an die gewünschte Position. 
5. Bewegen Sie den Mauszeiger in der linken Seitenleiste über eine Folie und klicken Sie auf das edit Bearbeiten-Symbol, um ein Bild zu dieser Folie hinzuzufügen:
   
   • Klicken Sie im Bereich Bild auf Hochladen , um ein Bild von Ihrem Computer auszuwählen, oder Bilder durchsuchen , um ein Bild aus dem Datei-Toolauszuwählen. Um ein Bild zu generieren, klicken Sie auf Mit KI generieren.
   • Geben Sie im Feld Beschriftung eine Beschriftung ein, die unter Ihrem Bild angezeigt wird. Um das Bild ohne Beschriftung anzuzeigen, löschen Sie den Standardtext. 
   
   • So fügen Sie der Folie einen Link hinzu:
     • Klicken Sie auf das Dropdown-Menü Link zu und wählen Sie einen Link-Typaus.
     • Geben Sie in dem angezeigten Feld das Ziel des Links an. Erfahren Sie mehr über und die Arbeit mit Links in HubSpot. 
     • Um Ihren Content geöffnet zu lassen und den Link in einem neuen Fenster geöffnet zu haben, aktivieren Sie den Schalter Link in neuem Fenster öffnen. 
     • Um das Linkziel für Suchmaschinen als nicht zu Ihrer Website gehörig zu kennzeichnen, aktivieren Sie das Kontrollkästchen No follow . 
   • Klicken Sie auf Änderungen übernehmen , um die Änderungen an dieser Folie zu speichern. 
6. Klicken Sie oben im Sidebar-Editor auf Image slider , um zur Modulübersicht zurückzukehren. 

7. Um weitere Folien hinzuzufügen, bewegen Sie den Mauszeiger über eine andere Folie und klicken Sie auf das Symbol edit  bearbeiten.
8. Um Ihre Änderungen abzuschließen, klicken Sie auf Änderungen übernehmen. 

Einstellungen für Bildschieberegler-Module bearbeiten

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
   • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
2. Klicken Sie auf den Namen Ihres Inhalts.
3. Klicken Sie im Content Editor auf das Modul image slider. 
4. Klicken Sie im Seitenleisten-Editor auf Einstellungen , um die Einstellungen des Moduls zu bearbeiten. 
5. Erweitern Sie den Bereich Folien , um die Folienoptionen zu bearbeiten: 
   • Geben Sie im Feld Folien pro Seite die Anzahl der Folien ein, die gleichzeitig in Ihrem Bildschieberegler angezeigt werden sollen. Sie können bis zu fünf Folien gleichzeitig anzeigen. Wenn mehrere Folien gleichzeitig ausgewählt sind, werden Bildbeschriftungen und Miniaturansichten nicht angezeigt. 
   • Wählen Sie im Feld Bildgröße eine Option für das Seitenverhältnis aus. Standardmäßig werden Bilder mit ihrem hochgeladenen Seitenverhältnis angezeigt. Um ein einziges Seitenverhältnis für alle Bilder zu standardisieren, wählen Sie Seitenverhältnis erzwingen. Dies kann dazu führen, dass einige Bilder verzerrt erscheinen. 
   • Um Beschriftungen zu Folien hinzuzufügen oder von diesen zu entfernen, aktivieren Sie das Kontrollkästchen Beschriftungen anzeigen . Standardmäßig ist das Kontrollkästchen Beschriftungen anzeigen aktiviert.
   • Wählen Sie im Dropdown-Menü Position der Bildbeschriftung die Position der Bildbeschriftungen aus. 

6. Erweitern Sie den Bereich Bewegung , um die Optionen für den Folienübergang zu bearbeiten: 
   • Um zu konfigurieren, wie die Folienübergänge aussehen, wählen Sie eine Übergangsoption aus (z. B. Fade).
   • Wenn Sie möchten, dass die Schleifen wiederholt werden, wenn die letzte Folie erreicht ist, aktivieren Sie das Kontrollkästchen Schleife Folien . 
   • Aktivieren Sie das Kontrollkästchen Autoplay , um die Folien automatisch ablaufen zu lassen. Wenn Sie weniger Dias haben, als in der Einstellung Dias pro Seite festgelegt ist, kann kein Wechsel stattfinden. 
7. Klicken Sie hier, um den Abschnitt Navigation zu erweitern und die Navigationsoptionen zu bearbeiten: 
   • Um Pfeile anzuzeigen, mit denen Besucher manuell zwischen den Folien wechseln können, aktivieren Sie das Kontrollkästchen Navigationspfeile anzeigen . 
   • Um Miniaturbilder unter der Navigation anzuzeigen, aktivieren Sie das Kontrollkästchen Show thumbnails . 
   • Um Punkte unter den Bildern anzuzeigen, die die Gesamtzahl der Folien anzeigen, und um Besuchern die Auswahl eines bestimmten Bildes zu ermöglichen, wählen Sie Punktnavigation anzeigen aus. 
8. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen. 

Stile für Bildschieberegler-Module bearbeiten

Sie können Stile für Bildschieberegler-Module bearbeiten, einschließlich Stile für die Folien, die Navigation und den Schieberegler.

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
   • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
2. Klicken Sie auf den Namen Ihres Inhalts.
3. Klicken Sie im Content Editor auf das Modul image slider. 
4. Klicken Sie im Seitenleisten-Editor auf die Registerkarte Styles.  
5. Um die Bearbeitung der Stile für das Bildschieberegler-Modul fortzusetzen, klicken Sie auf Folien, Navigation oder Schieberegler. 

Stile für Folien bearbeiten

So bearbeiten Sie Stile für die Darstellung von Bildern auf Folien:

1. Klicken Sie auf Folien.
2. Klicken Sie auf den Abschnitt Bilder, um ihn zu erweitern.
3. Geben Sie Pixelwerte in das Feld Eckradius ein. Je höher der Wert, desto runder erscheinen die Ecken. 
4. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.

So bearbeiten Sie Stile für die Darstellung von Bildbeschriftungen in Folien:

1. Klicken Sie auf Bildunterschriften.
2. Klicken Sie auf den Abschnitt Hintergrund , um ihn zu erweitern. 
   • Um Ränder über oder unter Ihren Bildunterschriften hinzuzufügen, geben Sie in den Feldern Rand über und Rand darunter Pixel-Werte ein.
   • Um Ihre Beschriftungen aufzufüllen, geben Sie einen Pixelwert in das Feld Auffüllen ein. Um separate Werte für jede Seite hinzuzufügen, klicken Sie auf Separat bearbeiten, und geben Sie dann Pixelwerte in die Felder ein.
   • Um Ihren Beschriftungen eine Hintergrundfarbe hinzuzufügen, geben Sie einen Hexadezimalwert in das erste Feld im Abschnitt Farbe ein, oder klicken Sie auf den Farbwähler und wählen Sie eine Farbeaus. Benutzerdefinierte Farben können auf der Registerkarte Advanced hinzugefügt werden.
   • Um die Transparenz einer Hintergrundfarbe einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Farbe ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
3. Klicken Sie auf den Textabschnitt , um ihn zu erweitern. 
   • Um den Schriftarttyp zu ändern, klicken Sie auf das Dropdown-Menü Schriftart auswählen und wählen Sie eine Schriftart aus. 
   • Um die Schriftgröße zu ändern, klicken Sie auf das Dropdown-Menü Größe und wählen Sie eine Schriftgrößeaus. 
   • Um die Schriftfarbe zu ändern, klicken Sie auf den Farbwähler und wählen Sie eine Farbe. Benutzerdefinierte Farben können auf der Registerkarte Advanced hinzugefügt werden.
   • Um die Schriftstärke zu ändern, klicken Sie auf das bold Schriftgewichtssymbol für fetten, italicIcon underlineIcon kursiv oder unterstrichenen Text.
4. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.

Stile für die Navigation bearbeiten

Sie können Stile für die Navigation bearbeiten, einschließlich des Schiebereglers, der Pfeile, der Punkte und der Schaltfläche für automatische Wiedergabe, sowie die Miniaturansichtsnavigation. Die verfügbaren Styling-Optionen hängen von den Einstellungen des Bildschieberegler-Moduls für die Navigation ab.

Pfeile des Schiebereglers

1. Klicken Sie auf Navigation.
2. Klicken Sie auf den Abschnitt mit den Pfeilen des Schiebereglers, um ihn zu erweitern.
3. Geben Sie im Abschnitt Hintergrundfarbe einen Hexadezimal-Wert ein. Sie können auch auf die Farbauswahl klicken und eine Farbe auswählen. Benutzerdefinierte Farben können über die Registerkarte Erweitert hinzugefügt werden.
4. Um die Transparenz der Hintergrundfarbe festzulegen, geben Sie im zweiten Feld im Abschnitt Hintergrundfarbe einen Prozentwert ein. Eine Transparenz von 100 % ist beispielsweise undurchsichtig, während eine Transparenz von 0 % nicht sichtbar ist.
5. Um die Symbole für die Pfeile nach links und rechts zu ersetzen, klicken Sie über den Feldern für Links-Symbol und Rechts-Symbol auf Ersetzen . Wählen Sie im rechten Bereich ein Symbol aus. 
6. Um die Farbe Ihres linken und rechten Symbols festzulegen, geben Sie im ersten Feld im Abschnitt Symbolfarbe einen Hexadezimal-Wert ein. Sie können auch auf die Farbauswahl klicken und eine Farbe auswählen. Benutzerdefinierte Farben können über die Registerkarte Erweitert hinzugefügt werden.
7. Um die Transparenz der Hintergrundfarbe des Symbols festzulegen, geben Sie im Abschnitt Symbolfarbe im zweiten Feld einen Prozentsatz ein. Eine Transparenz von 100 % ist beispielsweise undurchsichtig, während eine Transparenz von 0 % nicht sichtbar ist. 
8. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.

Punkte und Autoplay-Schaltfläche

1. Klicken Sie hier, um den Bereich Dots und Autoplay-Button zu erweitern.
2. Geben Sie im ersten Feld im Abschnitt Farbe einen Hexadezimal-Wert ein oder klicken Sie auf die Farbauswahl und wählen Sie eine Farbe aus. Benutzerdefinierte Farben können über die Registerkarte Erweitert hinzugefügt werden.
3. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.

Thumbnail-Navigation

1. Klicken Sie auf den Abschnitt Thumbnail-Navigation , um ihn zu erweitern.
2. Um die Hintergrundfarbe zu bearbeiten, geben Sie im ersten Feld im Abschnitt Pfeil-Hintergrundfarbe einen Hexadezimal-Wert ein oder klicken Sie auf die Farbauswahl und wählen Sie eine Farbe aus. Benutzerdefinierte Farben können auf der Registerkarte Advanced hinzugefügt werden.
3. Um die Transparenz der Hintergrundfarbe zu bearbeiten, geben Sie im Abschnitt Pfeil-Hintergrundfarbe in das zweite Feld einen Prozentwert ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
4. Um die für den linken und rechten Pfeil verwendeten Symbole zu ersetzen, klicken Sie auf Ersetzen über den Feldern Pfeil links und Pfeil rechts . Wählen Sie im rechten Bereich ein Symbol .

5. Um die Farbe Ihrer Pfeil-nach-links- und Nach-rechts-Symbole zu bearbeiten, geben Sie im ersten Feld im Abschnitt "Pfeilsymbol-Füllfarbe " einen Hexadezimal-Wert ein. Sie können auch auf die Farbauswahl klicken und eine Farbe auswählen. Benutzerdefinierte Farben können auf der Registerkarte Advanced hinzugefügt werden.
6. Um die Transparenz des Pfeils einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Iconfarbe ein. Eine Transparenz von 100 % ist beispielsweise undurchsichtig, während eine Transparenz von 0 % nicht sichtbar ist. 
7. So bearbeiten Sie das Verhältnis, die Breite und die abgerundeten Ecken der Miniaturbilde:
   • Klicken Sie auf den Abschnitt Thumbnail-Bilder, um ihn zu erweitern.
   • Um das für alle Miniaturbilder verwendete Seitenverhältnis festzulegen, klicken Sie auf das Dropdown-Menü Seitenverhältnis und wählen Sie ein Seitenverhältnis. 
   • Um die für alle Miniaturbilder verwendete Breite festzulegen, geben Sie einen Pixelwert in das Feld Breite ein. 
   • Um einzustellen, wie abgerundet die Ecken der Miniaturbilder erscheinen, geben Sie einen Pixelwert in das Feld Radius ein. Je höher der Wert, desto runder erscheinen die Ecken. 
8. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.

Stile für den Schieberegler bearbeiten

1. Klicken Sie auf Slider. 
2. Klicken Sie hier, um den Abschnitt Abstand zu erweitern.
3. Um Ränder über und unter dem Schieberegler hinzuzufügen, geben Sie Pixelwerte in die Felder Rand über und Rand unter ein. 
4. Um den Schieberegler aufzufüllen, geben Sie einen Pixelwert in das Feld Auffüllen ein. Um separate Werte für jede Seite hinzuzufügen, klicken Sie auf Separat bearbeiten, und geben Sie dann Pixelwerte in die Felder ein.
5. Wenn Sie fertig sind, klicken Sie auf Änderungen übernehmen.