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

• 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..
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie dann auf „Bearbeiten“.
• Klicken Sie im Inhaltseditor auf das Symbol add  in der linken Seitenleiste. 
• Erweitern Sie die Kategorie Media , klicken Sie dann auf das Modul Image Slider und ziehen Sie es an die gewünschte Position. 
• Bewegen Sie den Mauszeiger in der linken Seitenleiste über eine Folie und klicken Sie auf das Symbol edit  bearbeiten, 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. 
  • Geben Sie in das Feld Beschriftung eine Beschriftung ein, die unter Ihrem Bild erscheinen soll. 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 Inhalt geöffnet zu lassen und den Link in einem neuen Fenster zu öffnen, klicken Sie auf 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. 
• Klicken Sie oben im Sidebar-Editor auf Image slider , um zur Modulübersicht zurückzukehren. 

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

Einstellungen für Bildschieberegler-Module bearbeiten

• 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..
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie dann auf „Bearbeiten“.
• Klicken Sie im Content Editor auf das Modul image slider. 
• Klicken Sie im Seitenleisten-Editor auf Einstellungen , um die Einstellungen des Moduls zu bearbeiten. 
• Erweitern Sie den Bereich Folien , um die Folienoptionen zu bearbeiten: 
  • Geben Sie in das Feld Dias pro Seite die Anzahl der Dias ein, die auf einmal in Ihrem Bildschieberegler angezeigt werden sollen. Sie können bis zu fünf Folien gleichzeitig anzeigen. Wenn mehrere Dias auf einmal ausgewählt werden, werden keine Beschriftungen und Miniaturbilder angezeigt. 
  • Wählen Sie im Abschnitt Bildgröße eine Option Seitenverhältnisaus. Standardmäßig werden die Bilder in ihrem eigenen 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. 

• Erweitern Sie den Bereich Bewegung , um die Optionen für den Folienübergang zu bearbeiten: 
  • 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. 
• Klicken Sie auf den Abschnitt Navigation , um 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 einzublenden, die die Gesamtzahl der Folien anzeigen und es den Besuchern ermöglichen, ein bestimmtes Bild auszuwählen, wählen Sie Punktnavigation anzeigen. 
• Um Ihre Änderungen abzuschließen, klicken Sie auf Änderungen übernehmen. 

Styles für Bildergalerie-Module bearbeiten

• 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..
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie dann auf „Bearbeiten“.
• Klicken Sie im Content Editor auf das Modul image slider. 
• Klicken Sie im Seitenleisten-Editor auf die Registerkarte Styles. 
• Um festzulegen, wie die Ecken Ihrer Bilder abgerundet werden sollen, klicken Sie auf Dias, und erweitern Sie dann den Bereich Bilder . Geben Sie Pixelwerte in das Feld Eckradius ein. Je höher der Wert, desto runder erscheinen die Ecken. 
  • Um Ränder über oder unter Ihren Beschriftungen hinzuzufügen, klicken Sie auf den Abschnitt Hintergrund und geben Sie dann Pixelwerte in die Felder Rand über und Rand unter 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. 
   
  • Um die Schriftart Ihrer Beschriftungen zu bearbeiten, klicken Sie auf den Abschnitt Text, dann auf das Dropdown-Menü Schriftart auswählen und wählen eine Schriftartaus. 
  • 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 ein Symbol bold Schriftstärke für fetten, kursiven oder unterstrichenen Text.Um das Aussehen Ihrer Bildunterschriften zu bearbeiten, klicken Sie auf Folien, dann auf Unterschriften:
• So bearbeiten Sie das Aussehen Ihrer Schiebereglerpfeile:
  • Klicken Sie auf Navigation.
  • Klicken Sie hier, um den Bereich Slider arrows zu erweitern.
  • Um die Hintergrundfarbe der linken und rechten Symbole festzulegen, geben Sie einen Hex-Wert in das erste Feld im Abschnitt Hintergrundfarbe 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 der Hintergrundfarbe einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Hintergrundfarbe ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
  • Um die Symbole für die linken und rechten Pfeile zu ersetzen, klicken Sie auf Ersetzen oberhalb der Felder Linkes Symbol und Rechtes Symbol . Wählen Sie im rechten Bereich ein Symbol .
   
  • Um die Farbe der linken und rechten Symbole festzulegen, geben Sie einen Hex-Wert in das erste Feld im Abschnitt Symbol 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 der Hintergrundfarbe einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Icon color ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
• So ändern Sie das Aussehen der Punkte unter den Bildern und der Autoplay-Schaltfläche:
  • Klicken Sie auf Navigation.
  • Klicken Sie hier, um den Bereich Dots und Autoplay-Button zu erweitern.
  • Geben Sie einen Hex-Wert 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.
• So ändern Sie das Aussehen der Miniaturennavigation: 
  • Klicken Sie auf Navigation.
  • Klicken Sie hier, um den Bereich Thumbnail navigation zu erweitern.

• • Um die Hintergrundfarbe Ihrer linken und rechten Pfeilsymbole festzulegen, geben Sie einen Hex-Wert in das erste Feld im Abschnitt Pfeil-Hintergrundfarbe 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 der Hintergrundfarbe einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Pfeilhintergrundfarbe ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
  • 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 .
•  
  • Um die Farbe Ihrer linken und rechten Pfeilsymbole festzulegen, geben Sie einen Hex-Wert in das erste Feld im Abschnitt Pfeilsymbolfüllung 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 des Pfeils einzustellen, geben Sie einen Prozentwert in das zweite Feld im Abschnitt Iconfarbe ein. Eine Transparenz von 100% ist undurchsichtig, während eine Transparenz von 0% nicht sichtbar ist. 
  • Klicken Sie, um den Bereich Thumbnail images 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. 

• So bearbeiten Sie den Abstand des Schiebereglers: 
  • Klicken Sie auf Slider. 
  • Klicken Sie hier, um den Abschnitt Abstand zu erweitern.
  • Um Ränder über und unter dem Schieberegler hinzuzufügen, geben Sie Pixelwerte in die Felder Rand über und Rand unter ein. 
  • 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.