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

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

5

Das Bootstrap- Framework verfügt über viele Benutzerelemente, die auch unabhängig von Ihrer Weebly- Site durch Hinzufügen von Code hinzugefügt werden können. Der Inhaltsschieberegler im Akkordeon- oder Spoiler-Stil ist eines der Bootstrap-Elemente, die als Kollapshilfe bezeichnet werden, um größeren Inhalt auf begrenztem Raum hinzuzufügen. Obwohl wir CSS und Weebly App Center Akkordeon bereits erklärt haben, bietet der Bootstrap-Stil eine weitere Möglichkeit, einen Akkordeon-Inhaltsschieberegler auf Ihrer Weebly-Site hinzuzufügen.

Akkordeon-Inhaltsschieberegler für Weebly

Das Akkordeon hat folgende Eigenschaften:

  • Auf Mobilgeräte ansprechende automatische Ausrichtung an den Ansichtsports des Geräts, auf dem angezeigt wird.
  • Wenn Sie auf den Titel klicken, wird der Inhalt im Push-Down-Stil geöffnet, während der geöffnete Inhalt im Push-Up-Stil geschlossen wird.
  • Standardmäßig ist die erste Folie geöffnet, wenn die Seite geladen wird.
  • Sie können Ihrem Akkordeon beliebig viele Folien hinzufügen.
  • Jedes HTML-Element kann als Teil des Widgets hinzugefügt werden.
  • Der Inhaltsbereich kann mittels Bootstrap-Rasterstruktur in 12 Spalten unterteilt werden.

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

Bootstrap Akkordeon für Weebly

Skript:

Fügen Sie das folgende Skript unter dem Fußzeilencodeabschnitt Ihrer Seite hinzu:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Verknüpfen Sie das folgende Bootstrap-CSS im Header-Code-Abschnitt Ihrer Seite:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML-Code:

In diesem Beispiel haben wir drei Schieberegler mit den folgenden Details verwendet:

  1. Erste Folie mit zwei Spalten. eines mit Kartenbild und das andere mit Kartenblock. Dieser Abschnitt wird mit dem Kartengruppenlayout erstellt.
  2. Zweite Folie hat eine inverse Karte.
  3. Dritte Folie mit Textelement in einem Kartenblock.

Stellen Sie sicher, dass Sie die Bild-URLs und den Dummy-Textinhalt durch Ihre eigenen ersetzen.

<div id="accordion" role="tablist" aria-multiselectable="true"> <!-- First Section --> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Section 1 with Card Image and Card Block </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div class="card-group" style="margin:20px;"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card Title</h4> <p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p> </div> </div> </div> </div> </div> <!-- Second Section --> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Section 2 with Inverse Card </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card card-inverse" style="background-color: #333; margin:20px;"> <div class="card-block"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> </div> </div> <!-- Third Section --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Section 3 with Text Inside Card Block </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> <!-- Add More Sections Here --> </div>

Die drei Slider-Abschnitte sind zum Verständnis mit Kommentaren hervorgehoben und Sie können weitere Abschnitte hinzufügen, indem Sie den Codeblock hinzufügen und die id- und href-Attribute entsprechend ändern. Denken Sie daran, dass Bootstrap ein Framework ist, das andere Elemente auf Weebly beeinflussen kann. Möglicherweise müssen Sie das CSS basierend auf Ihrem Weebly-Theme anpassen.

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