TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

3

Die Header-Diashow ist eine wunderbare Funktion, die Ihrer Website ein professionelles Aussehen verleiht. Dies ist eine Pro-Funktion in Weebly und nur für nicht reagierende Designs verfügbar. Kostenlose Benutzer können auch alternative Methoden verwenden, um HTML/CSS zu ändern und dies zu erreichen. In diesem Artikel erklären wir, wie Sie Ihrer kostenlosen Weebly-Site eine Nivo-Header-Diashow hinzufügen.

Nivo ist ein beliebter jQuery-Slider und wir haben ein kostenloses Widget zum Hinzufügen einer Diashow im Inhaltsbereich. Hier verwenden wir dasselbe Nivo-Slider-Widget mit geringfügigen Änderungen, um es im Headerbereich von responsiven Weebly-Themes hinzuzufügen. Sie können die vier verschiedenen Demo-Stile anzeigen, indem Sie auf die folgenden Schaltflächen klicken:

In diesem Beispiel haben wir vier Bilder verwendet. Das zweite Bild (up.jpg) ist mit einer Webseite verlinkt und hat eine einfache Textbeschriftung. Das vierte Bild (nemo.jpg) hat eine Textbeschriftung mit einem Hyperlink.

Schritt 1 – Bereit mit Ihren Bildern

Die obigen Demos verwenden das ansprechende Weebly-Theme „Ace Soccer – Birdseye” und die Bilder werden mit der Größe 618 x 246 px verwendet. Wir empfehlen, für eine bessere Qualität Bilder mit höherer Auflösung mit ähnlichem Breiten- und Höhenverhältnis zu verwenden.

Schritt 2 – Slider-Dateien herunterladen und hochladen

Laden Sie alle erforderlichen Slider-Dateien herunter. Melden Sie sich bei Ihrer Weebly-Site an und navigieren Sie zum Abschnitt „Theme > HTML / CSS bearbeiten > Assets”. Erstellen Sie einen neuen Ordner namens „nivo”.

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Erstellen eines neuen Ordners im Weebly Code Editor

Laden Sie alle Slider-Dateien in den Ordner „nivo” hoch. Denken Sie daran, dass die Archivdatei vier Demobilder enthält. Sie können die Bilder jederzeit durch Ihre eigenen Bilder ersetzen.

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Hochladen von Dateien in Weebly

Klicken Sie auf die Schaltfläche + neben der Registerkarte „Header Type” und erstellen Sie einen neuen Header-Typ namens „Nivo-Bar”. Wir möchten die Nivo-Header-Diashow mit dem Bar-Thema in diesem Header-Typ hinzufügen.

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Neuen Kopfzeilentyp erstellen

Kopieren Sie den gesamten Inhalt von „no-header.html” und fügen Sie ihn in den Header-Typ „Nivo-Bar.html” ein.

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Neuer Header-Typ für Diashow

Im Layout „Nivo-Bar.html” müssen drei Teile hinzugefügt werden – CSS, Skripte und HTML. Fügen Sie das folgende CSS in den Kopfbereich des Layouts ein.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Im Editor sollte es wie folgt aussehen:

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

CSS in Header-Typ einfügen

Fügen Sie die folgenden Skripte kurz vor dem Schließen des body-Tags ein.

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Im Editor sollte es wie folgt aussehen:

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Einfügen von Skripten in Kopfzeilentyp

Der letzte Teil besteht darin, den folgenden HTML-Code direkt über dem Abschnitt „main-wrap” einzufügen. Stellen Sie sicher, dass Sie die Bild- und Hyperlink-URLs durch Ihre eigenen ersetzen.

<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Im Editor sollte es wie folgt aussehen:

Wie erstelle ich eine Header-Diashow in der kostenlosen Weebly-Site?

Einfügen von HTML in Kopfzeilentyp

Der endgültige Code des Header-Typs „Nivo-Bar.html” sollte wie folgt aussehen. Denken Sie daran, dass dies auf einer kostenlosen Weebly-Site ist und das von uns verwendete Thema „Ace Soccer – Birdseye” ist.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page page-has-banner wsite-theme-dark'> <div class="wrapper"> <div class="birdseye-header"> <div class="nav-wrap"> <div class="container"> <div class="logo">{logo}</div> <div class="nav desktop-nav">{menu}</div> <label class="hamburger"><span></span></label> </div> </div> </div> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <div class="main-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div class="container"> <div class="footer">{footer}</div> </div><!-- end container --> </div><!-- end footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label class="hamburger"><span></span></label> {menu} </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script> <script type="text/javascript" src="/files/theme/plugins.js"></script> <script type="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

Speichern Sie die Änderungen und veröffentlichen Sie Ihre Site.

Wenn Sie die Kopfzeilen-Diashow auf einer Seite haben möchten, wählen Sie den Kopfzeilentyp "Nivo-Bar" auf der Registerkarte "Seiten" für diese bestimmte Seite.

Kopfzeilentyp für eine bestimmte Seite auswählen

Die Diashow wird mit 4 verschiedenen Themen und 12 Bildübergangseffekten angeboten. Das Theme kann durch Ändern der CSS-Klasse im HTML-Code geändert werden. Im obigen Beispiel haben wir ein Userbar-Theme mit der CSS-Klasse „theme-bar”, Sie können alternativ „theme-default”, „theme-dark” oder „theme-light” verwenden. Sie können auch vier verschiedene Kopfzeilentypen erstellen und den erforderlichen Designstil für verschiedene Seiten auswählen.

Standardmäßig wird auf jedes Bild ein zufälliger Übergangseffekt angewendet. Sie können den spezifischen Übergangstyp für jedes Bild mit der Funktion „Datenübergang” im HTML angeben. Unten ist ein Beispiel-HTML-Code, der für jedes Bild mit Standardthema unterschiedliche Übergangseffekte verwendet.

<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Sie können die vollständigen Anpassungsoptionen zum Ändern von Übergangseffekt, Thema, Animationsgeschwindigkeit, Navigationssteuerung und Hinzufügen von Miniaturansichten lesen .

Suchen Sie nach einem Schieberegler im Akkordeonstil, wie unten gezeigt? Erfahren Sie, wie Sie Ihrer Weebly-Site einen Akkordeon-Schieberegler hinzufügen.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen