Wie man Inhalte und Videos im Karussell auf die gleiche Höhe bringt

Bei Verwendung der Karussell-Element In GemPages fällt möglicherweise auf, dass Inhaltsblock und Videoelement nicht die gleiche Höhe haben. Dies kann zu einem ungleichmäßigen Layout führen, insbesondere auf Landingpages oder Produktpräsentationen.

Dieses Tutorial zeigt Ihnen, wie Sie mithilfe eines einfachen benutzerdefinierten CSS-Codes die Videohöhe innerhalb eines Carousel-Elements automatisch an die Inhaltshöhe anpassen können.

Warum unterscheiden sich die Inhalts- und Videohöhen?

Standardmäßig sind Inhalt und Videoelemente Die Elemente eines Karussells können ihre Höhe je nach ihrem Inhalt anpassen.

Beispielsweise:

• Die Textspalte kann aufgrund längerer Beschreibungen oder Schaltflächen höher werden.
• Die Videospalte behält möglicherweise ihr ursprüngliches Seitenverhältnis bei und erscheint kürzer.

Durch Hinzufügen einer benutzerdefinierten CSS-Regel kann das Video-Element gestreckt und an die Höhe des Inhaltsbereichs angepasst werden, was zu einem saubereren und professionelleren Design führt.

Wie man Inhalte und Videos im Karussell-Element auf die gleiche Höhe bringt

Schritt 1: Öffnen Sie das Bedienfeld für benutzerdefinierten Video-Elementcode.

Als Erstes müssen Sie auf die benutzerdefinierten Codeeinstellungen für das Videoelement zugreifen.

• Öffnen Sie Ihre Seite im GemPages-Editor.
• Navigieren Sie zum Karussell-Element.
• Wähle aus Video Element innerhalb des Karussells.
• Klicken Sie mit der rechten Maustaste auf das Element.
• Klicken Sie auf Benutzerdefinierter Code.

Schritt 2: CSS-Code hinzufügen

Fügen Sie folgenden Code in das Feld „Benutzerdefinierter Code“ ein:

.ElementClass {

 Höhe: 100%;

}

Dieses CSS sorgt dafür, dass das Video-Element die gesamte verfügbare Höhe innerhalb des Karussell-Layouts einnimmt.

Schritt 3: Ersetzen .ElementClass Mit der tatsächlichen Elementklasse

Sie müssen ersetzen .ElementClass mit dem tatsächlichen Klassennamen Ihres Videoelements.

Den Klassennamen finden Sie oben im Bereich „Benutzerdefinierter Code“.

Schritt 4: Vorschau und Veröffentlichung Ihrer Seite

Nach dem Hinzufügen des Codes:

• Klicken Sie auf Vorschau um zu überprüfen, ob Inhalt und Video nun mit gleicher Höhe angezeigt werden.
• Testen Sie das Layout in der Desktop- und Mobilansicht.
• Sobald alles korrekt aussieht, klicken Sie Veröffentlichen um die Änderungen in Ihrem Live-Shop anzuwenden.