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

Widget Bootstrap gratuiti per il tuo sito

1

Bootstrap è un framework frontend per creare siti Web ottimizzati per i dispositivi mobili senza problemi. La maggior parte di Bootstrap viene gestita tramite CSS mentre ci sono anche alcuni plugin che necessitano di JavaScript. Quando utilizzi il framework sul tuo sito, è facile inserire singoli componenti integrati come pulsanti, caroselli, badge, avvisi, ecc. Tuttavia, puoi anche creare widget Bootstrap personalizzati modificando il codice. Ecco una raccolta di alcuni dei widget Bootstrap gratuiti più popolari per il tuo sito web.

  • Questi sono widget personalizzati realizzati con il framework Bootstrap 4 e 5.
  • Puoi copiare e incollare questi widget sul tuo sito o testarli insieme al modello di partenza.
  • Abbiamo spiegato ogni widget con codice e demo in modo che tu possa semplicemente copiare e incollare.
  • Puoi personalizzare ulteriormente il widget con il tuo codice.

Per spiegare l’utilizzo del widget come componente indipendente, abbiamo mostrato come utilizzare alcuni widget nel sito Weebly. Sebbene Weebly sia una semplice piattaforma HTML e CSS, potresti dover regolare alcuni parametri da utilizzare sul tuo sito web. Il miglior esempio è la proprietà box-sizing in CSS, potrebbe essere necessario cambiarla in content-box o border-box per elementi specifici sul widget se si notano problemi di riempimento.

1 widget per schede inclinate Bootstrap

Il primo widget nell’elenco è una semplice scheda che verrà mostrata in un formato distorto. Questo apparirà elegantemente sul tuo sito utilizzando il componente carta predefinito e una personalizzazione minima del CSS. Di seguito sono riportati alcuni degli esempi della carta inclinata.

Widget Bootstrap gratuiti per il tuo sito

Carta inclinata con testo in chiaro

Widget Bootstrap gratuiti per il tuo sito

+8 gradi sull’asse X

Widget Bootstrap gratuiti per il tuo sito

Carta inclinata con -8 gradi nell’asse X

Widget 2 schede profilo utente

Il widget successivo è un widget colorato del profilo utente. Puoi personalizzare l’immagine del profilo, i link social e la breve descrizione secondo le tue necessità. È un buon modo per mostrare gli utenti sul tuo sito.

Widget Bootstrap gratuiti per il tuo sito

Scheda utente con immagine del profilo sinistro

Widget Bootstrap gratuiti per il tuo sito

Scheda del profilo utente Bootstrap

Widget 3 carte a fogli mobili

Flip card è un modo utile per mostrare il contenuto di testo dietro un’immagine. Gli utenti possono passare il mouse sull’immagine per leggere il testo. Puoi inserire una singola carta o più flip card per renderlo come una galleria. Il widget ti mostrerà come capovolgere il componente della scheda in Bootstrap in direzione orizzontale e verticale.

Widget Bootstrap gratuiti per il tuo sito

Widget Flip Card orizzontale Bootstrap

Widget Bootstrap gratuiti per il tuo sito

Bootstrap Vertical Card Flip Widget

4 membri del team Bootstrap con sfondo parallasse

Se gestisci un’agenzia o un’azienda, ha senso mostrare tutti i membri del tuo team sul tuo sito web. Fortunatamente, non è necessario dedicare troppo tempo ed ecco un widget per copiare e incollare i membri del team per te. Il widget avrà un bell’aspetto con uno sfondo parallasse e icone social.

Widget Bootstrap gratuiti per il tuo sito

Widget dei membri del team Bootstrap con sfondo parallasse

5 Tabella dei prezzi CSS con Bootstrap

Molti utenti aggiungono una tabella dei prezzi sul proprio sito utilizzando JavaScript personalizzato. Sebbene JavaScript funzioni bene per questo scopo, puoi utilizzare CSS completo per creare bellissime tabelle dei prezzi con Bootstrap. Di seguito è riportato come appariranno le tabelle ed è possibile personalizzare il contenuto e il numero di colonne secondo le proprie necessità.

Widget Bootstrap gratuiti per il tuo sito

Widget tabella prezzi CSS

6 Testimonial Slider

Se hai molte testimonianze degli utenti, ecco un widget slider per te. Mostra tutti i feedback dei tuoi clienti in uno slider a rotazione automatica con immagini e contenuti di testo.

Widget Bootstrap gratuiti per il tuo sito

Slider Testimonianza su due colonne uguali

7 citazioni di blocco Bootstrap

Le citazioni in blocco sono utili per mostrare citazioni, citazioni e contenuti di riferimento. Bootstrap non ha un componente preventivo per impostazione predefinita. Tuttavia, puoi facilmente creare diversi stili di citazioni di blocco eseguendo una piccola personalizzazione del codice CSS.

Widget Bootstrap gratuiti per il tuo sito

Stili Bootstrap Blockquote

8 Pagina CSS Parallasse

Puoi creare un effetto simile alla parallasse con CSS completo senza JavaScript. Il componente jumbotron è uno dei meno conosciuti ed è possibile utilizzare jumbotron personalizzati per creare pagine di parallasse a larghezza intera.

Widget Bootstrap gratuiti per il tuo sito

Bootstrap Parallax Page con Jumbotron

9 Widget cursore a fisarmonica

Bootstrap 5 ha introdotto un componente a fisarmonica separato che è possibile creare utilizzando il collasso con le versioni precedenti. Ecco un widget slider per fisarmonica che puoi usare per inserire qualsiasi elemento in uno stile elegante a fisarmonica.

Widget Bootstrap gratuiti per il tuo sito

Slider contenuto Fisarmonica Bootstrap

10 widget della linea temporale verticale Bootstrap

La timeline verticale è il modo per mostrare gli eventi accaduti in una sequenza. Puoi anche utilizzare questa sequenza temporale per mostrare i futuri lanci di prodotti o eventi. Di seguito è riportato come apparirà il widget della timeline verticale:

Widget Bootstrap gratuiti per il tuo sito

11 Tabella dati avanzata con Bootstrap

Bootstrap ha un componente integrato per inserire molte varietà di tabelle sul tuo sito. Tuttavia, è necessaria una tabella dati avanzata per disporre di funzionalità come l’ordinamento, la ricerca e il filtraggio. Questo è super utile quando si dispone di contenuti di grandi dimensioni e si desidera mostrare in una tabella.

Widget Bootstrap gratuiti per il tuo sito

Tabella dati avanzata

Ci auguriamo che i widget di cui sopra siano utili per il tuo sito Web e ti facciano risparmiare tempo. Le possibilità sono infinite con Bootstrap 5 e puoi creare nuovi widget o personalizzare i componenti esistenti secondo le tue necessità.

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