TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere il cursore del contenuto della fisarmonica in Weebly?

2

Il framework Bootstrap ha molti elementi utente che possono anche essere aggiunti in modo indipendente sul tuo sito Weebly aggiungendo un pezzo di codice. Il cursore del contenuto nell’elemento in stile fisarmonica o spoiler è uno degli elementi Bootstrap chiamato come aiuto di compressione per aggiungere contenuti più grandi in uno spazio limitato. Sebbene avessimo già spiegato la fisarmonica CSS e Weebly App Center, lo stile Bootstrap offre un altro modo per aggiungere il dispositivo di scorrimento del contenuto della fisarmonica sul tuo sito Weebly.

Slider contenuto a fisarmonica per Weebly

La fisarmonica ha le seguenti caratteristiche:

  • Allineamento automatico reattivo mobile alle porte di visualizzazione del dispositivo visualizzato.
  • Facendo clic sul titolo si aprirà il contenuto in stile push down mentre si chiude il contenuto aperto in stile push up.
  • Per impostazione predefinita, la prima diapositiva è aperta quando la pagina viene caricata.
  • Puoi aggiungere tante diapositive alla tua fisarmonica.
  • Qualsiasi elemento HTML può essere aggiunto come parte del widget.
  • L’area del contenuto può essere divisa in 12 colonne utilizzando la struttura a griglia Bootstrap.

Come aggiungere il cursore del contenuto della fisarmonica in Weebly?

Fisarmonica Bootstrap per Weebly

sceneggiatura:

Aggiungi lo script seguente nella sezione del codice a piè di pagina della tua pagina:

<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:

Collega il seguente CSS Bootstrap nella sezione del codice dell’intestazione della tua pagina:

<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:

In questo esempio abbiamo utilizzato tre slider con i seguenti dettagli:

  1. Prima diapositiva con due colonne. uno con l’immagine della carta e l’altro con il blocco della carta. Questa sezione viene creata utilizzando il layout del gruppo di schede.
  2. La seconda diapositiva sta avendo una carta inversa.
  3. Terza diapositiva con elemento di testo all’interno di un blocco di carte.

Assicurati di sostituire gli URL delle immagini e il contenuto di testo fittizio con i tuoi.

<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>

Le tre sezioni del dispositivo di scorrimento sono evidenziate con commenti a scopo di comprensione ed è possibile aggiungere più sezioni aggiungendo il blocco di codice e modificando di conseguenza gli attributi id e href. Ricorda che Bootstrap è un framework che può influenzare altri elementi su Weebly. Potrebbe essere necessario modificare il CSS in base al tema Weebly.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More