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

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

11

Weebly bietet ein traditionelles Bild-Diashow-Element, um Ihrer Site Slider hinzuzufügen. Leider kommt dies den modernen Diashows von Drittanbietern oder Plugins bei weitem nicht näher. Sie können schön aussehende benutzerdefinierte Schieberegler im Akkordeonstil erstellen, die ausschließlich mit CSS erstellt wurden. In diesem Artikel erklären wir, wie man einen CSS-Akkordeon-Bild-Slider auf der Weebly-Site erstellt

Weebly Akkordeon Bild Slider

Unten sehen Sie, wie der stylische Slider auf Ihrer Weebly-Site aussehen wird.

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

CSS Akkordeon-Schieberegler

Wie füge ich einen Akkordeon-Bild-Slider in Weebly hinzu?

Nachdem Sie nun den Slider gesehen haben und dieser gut aussieht, finden Sie hier eine Schritt-für-Schritt-Anleitung zum Hinzufügen des Sliders auf Ihrer Website. Der Prozess besteht aus drei einfachen Schritten:

  • Hochladen von Bildern für Slider
  • CSS-Code auf Seiten- oder Site-Ebene hinzufügen
  • Hinzufügen von HTML-Code mithilfe des Embed-Code-Elements

Schritt 1 – Hochladen von Bildern für den Akkordeon-Slider

Bereiten Sie alle Ihre Bilder mit der erforderlichen Größe vor. In diesem Beispiel haben wir Bilder mit einer Breite = 640 px verwendet. Laden Sie alle Bilder auf Ihrer Site unter „Theme > HTML/CSS bearbeiten > Assets > Datei(en) hochladen…” hoch.

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

Bilder im Weebly Code Editor hochladen

Sie müssen die URLs der hochgeladenen Bilder beibehalten, die in Schritt 3 verwendet werden müssen. Die URL eines hochgeladenen Bildes sieht wie folgt aus:

https://your-site-name.com/files/theme/image-name.jpg

Alternativ können Sie mit der rechten Maustaste auf das Bild klicken und die URL abrufen, die wie folgt aussehen sollte:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

Hochgeladene Bild-URL abrufen

Nachdem Sie alle Ihre Bilder hochgeladen haben, klicken Sie auf die Schaltfläche "Speichern" und geben Sie einen benutzerdefinierten Namen für Ihr Thema ein.

Schritt 2 – CSS-Code hinzufügen

Wenn Sie den Slider nur auf bestimmten Seiten hinzufügen möchten, fügen Sie den folgenden CSS-Code unter "Seiten > Seite auswählen > SEO-Einstellungen > Header-Code" der erforderlichen Seiten hinzu.

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

Kopfzeilencode in Seite hinzufügen

Falls Sie den Slider auf mehreren Seiten hinzufügen möchten, empfehlen wir, ihn im Haupt-CSS unter „Theme > HTML bearbeiten / CSS > Stil > main.less” hinzuzufügen. Sie können den Code auch im Abschnitt „Einstellungen > SEO > Header-Code” hinzufügen .

Wie füge ich einen Akkordeon-Bild-Slider in der Weebly-Site hinzu?

Kopfzeilencode auf Weebly-Site-Ebene hinzufügen

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Sie können jeden der Stile nach Ihren Wünschen anpassen.

Schritt 3 – HTML-Code hinzufügen

Der letzte Schritt besteht darin, den folgenden HTML-Code des Schiebereglers hinzuzufügen, indem Sie ein Einbettungscodeelement per Drag & Drop in den Inhaltsbereich einer erforderlichen Seite ziehen. Vergessen Sie nicht, die Bildlinks durch Ihre eigenen Links aus Schritt 1 zu ersetzen.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Hinweis: Nach dem Hinzufügen von HTML-Code werden die Bilder möglicherweise im Weebly-Editor untereinander aufgelistet. Dies ist in Ordnung, da die CSS-Effekte nicht auf die Seite angewendet werden. Veröffentlichen Sie die Seite, um den tatsächlichen Schieberegler anzuzeigen.

Aufnahmequelle: www.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