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

Come aggiungere il widget delle schede orizzontali in Weebly?

4

Il contenuto a schede è un modo semplice per mostrare una grande quantità di contenuti in uno spazio limitato. Weebly con l’introduzione del suo App Center porta molte nuove app per aggiungere ulteriori elementi. "Tabs" è una di queste app che puoi connettere al tuo sito gratuitamente. In questo articolo discuteremo come aggiungere schede orizzontali in Weebly con l’app per schede predefinita e utilizzando codice personalizzato.

Aggiungi schede orizzontali utilizzando l’app Schede predefinite

App Center è un marketplace in cui puoi trovare tutte le app Weebly e di terze parti come l’app Tabs.

  • Una volta che sei nell’editor del sito Weebly, vai all’App Center tramite "Crea > App".
  • Usa la casella di ricerca nell’angolo in alto a destra per digitare "schede" e premi invio.
  • Vedrai l’app Tabs nei risultati di ricerca e fai clic su di essa per visualizzare i dettagli.
  • Fai clic sul pulsante "Aggiungi" e collega l’app al tuo sito Weebly.

Come aggiungere il widget delle schede orizzontali in Weebly?

Collegamento dell’app Schede nel sito Weebly

Puoi visualizzare l’app connessa nella sezione "Build" come gli elementi predefiniti. Trascina e rilascia l’elemento Schede per inserire contenuto a schede nel tuo sito. Puoi personalizzare l’intestazione della scheda e il contenuto nell’editor per creare schede orizzontali in Weebly.

Come aggiungere il widget delle schede orizzontali in Weebly?

Schede create con l’app Weebly Tabs

Caratteristiche dell’app Schede

Gli utenti possono personalizzare quanto segue nell’app a schede:

  • Aggiungi schede illimitate: ti consigliamo di limitare a 4 o 5 schede al massimo per non colpire l’editor. Anche un numero maggiore di schede avrà problemi di leggibilità sui dispositivi mobili.
  • Personalizza il colore delle schede attive, inattive e del bordo.
  • Trascina e rilascia qualsiasi elemento all’interno dell’area del contenuto delle schede. Puoi mappe, modulo di contatto, presentazione, ecc. All’interno dell’area del contenuto delle schede.
  • Seleziona uno dei temi – standard, linea, materiale e semplice – per il contenuto a schede.

Sebbene Tabs sia un’app nativa di Weebly, non è un’app facile da usare. Il problema è che quando hai aggiunto contenuto in una scheda sbagliata, non c’è modo di trascinare la scheda e organizzare la sequenza. È necessario eliminare l’intero elemento e aggiungerlo di nuovo con la sequenza corretta.

Schede personalizzate per il sito Weebly

Ci sono molte schede CSS e jQuery già pronte disponibili su Internet che puoi aggiungere con piccole modifiche. Una di queste schede personalizzate proviene da codedrops realizzati con CSS. Questo è particolarmente adatto quando hai solo un contenuto di testo da aggiungere all’interno delle schede. Di seguito è riportato come appariranno le schede.

Come aggiungere il widget delle schede orizzontali in Weebly?

Widget Schede Orizzontali

Di seguito è riportato il codice CSS completo per il widget delle schede orizzontali. Puoi inserirlo nel tuo sito Weebly nella sezione " Codice intestazione " della pagina.

Come aggiungere il widget delle schede orizzontali in Weebly?

Aggiungi codice intestazione nella pagina

<style> .tabs { position: relative; width: 100%; } .tabs input { position: absolute; z-index: 1000; width: 160px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 160px; } .tabs input#tab-3{ left: 320px; } .tabs input#tab-4{ left: 480px; } .tabs label { background: skyblue; font-size: 16px; line-height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #333333; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .tabs input:hover + label { background: #f1f1f1; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #f8f8f8; z-index: 6; } .clear-shadow { clear: both; } .content { background: rgba(96, 125, 139, 0.16); position: relative; width: 100%; height: 300px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: lightslategrey; padding: 20px; } .content div p { font-size: 20px; line-height: 28px; font-style: italic; text-align: left; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } </style>

Di seguito è riportato il codice HTML per le schede che è possibile inserire utilizzando l’ elemento " Embed Code ".

<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <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.</p> <h3>Sub-Heading 1</h3> <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.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <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.</p> <h3>Sub-Heading 2</h3> <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.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <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.</p> <h3>Sub-Heading 3</h3> <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.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <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.</p> <h3>Sub-Heading 4</h3> <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.</p> </div> </div> </section>

Creiamo il primo titolo nella scheda (questa è la scheda 1) come 160 px e aumentiamo a 320 px e 480 px per ulteriori titoli. Puoi regolarlo di conseguenza in modo che l’area cliccabile si adatti al titolo della scheda. Il vantaggio del widget delle schede personalizzate è che puoi preparare il contenuto offline e incollarlo sul tuo sito in pochi minuti. Quando vuoi riorganizzare le schede, puoi farlo offline e sostituire semplicemente il vecchio codice con il nuovo.

Fonte di registrazione: www.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