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

Come aggiungere il widget dei membri del team in Weebly?

6

Il widget dei membri del team è molto utile per mostrare il riepilogo di ciascun membro del team insieme a una foto e una breve introduzione. Puoi usarlo nel sito Weebly per scopi come mostrare i membri del team del tuo sito, organizzazione o azienda. Puoi aggiungere il widget dei membri del team in Weebly utilizzando l’app Weebly gratuita o con un codice personalizzato. In questo articolo spiegheremo i problemi con l’app predefinita e l’utilizzo del codice personalizzato.

App per membri del team Weebly

Puoi collegare un’app gratuita "Team Cards" al tuo sito dal centro app di Weebly. Questa è un’opzione semplice poiché l’app è anche degli sviluppatori Weebly.

Come aggiungere il widget dei membri del team in Weebly?

App Weebly Team Cards

Tuttavia, l’app presenta molti bug e crea un’esperienza utente negativa quando si tenta di modificare il contenuto nell’editor. Il pop-up per le impostazioni nasconderà il contenuto che desideri modificare e ti infastidirà continuamente. Sono passati più di 5 anni e Weebly non ha corretto e ottimizzato questa app. Quindi, invece di aspettare che Weebly aggiorni l’app, puoi provare le carte dei membri del team di seguito.

Pensiamo a un tipico widget di un membro del team con profili social e discutiamo ulteriormente su come aggiungere il widget di un membro del team nel sito Weebly utilizzando il tradizionale elemento " Embed Code ". Il widget di cui stiamo parlando apparirà di seguito con due tessere membro.

Come aggiungere il widget dei membri del team in Weebly?

Widget del pannello dei membri del team

Funzionalità del widget dei membri del team

  • Ogni tessera membro del team è composta dai seguenti elementi:
    • Immagine del profilo
    • Nome e designazione
    • Breve descrizione
    • Icone social ai link ai profili social
  • Puoi aggiungere più schede membro del team posizionando l’elemento "Codice da incorporare" uno accanto all’altro.
  • I colori e i caratteri di ogni tessera membro del team sono facili da personalizzare in base alle tue esigenze.
  • Il widget utilizza le fantastiche icone social dei caratteri, eliminando così la necessità di immagini delle icone social. Puoi aggiungere Twitter, Facebook, Skype, LinkedIn o qualsiasi altra icona social ai membri del team. Ciò significa essenzialmente che puoi aggiungere diversi set di icone social a diversi membri del team in base al profilo che ha effettivamente.

Passaggi per l’aggiunta di widget per i membri del team

Di seguito sono riportati i passaggi per aggiungere il widget dei membri del team al tuo sito Weebly.

  • Collegamento delle icone CSS
  • Aggiunta di codice CSS
  • Caricamento delle immagini del profilo
  • Aggiunta di codice HTML

Passo #1 – Collegamento delle icone CSS

Il primo passo è collegare il CSS di origine delle fantastiche icone dei caratteri al tuo sito. Accedi al tuo sito Weebly e aggiungi il codice seguente nella sezione "Impostazioni > SEO > Codice intestazione".

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

Come aggiungere il widget dei membri del team in Weebly?

Aggiungi codice intestazione a livello di sito Weebly

Passo #2 – Aggiunta del codice CSS

Il prossimo passo è aggiungere il codice CSS sottostante nel file "main.less" del tuo sito.

.team { position: relative; min-height: 1px; width:330px; } .person-details figure { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(216, 216, 216, 0.73); border-radius: 5px; margin: 0; } .person-details figure figcaption { padding: 15px; } .margin-bottom-10 { margin-bottom: 10px; } .person-details figure small { font-size: 65%; } .h4 small { font-weight: normal; line-height: 1; color: #b3b3b3; } .person-details-icons { background: #bc5e43; padding: 10px; text-align: center; margin: 0; } .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } .person-details-icons [class^="fa-"]:before, .person-details-icons [class=" fa-"]:before { color: #ffffff; padding: 0; } a:hover { opacity: 0.5; }

Come aggiungere il widget dei membri del team in Weebly?

Modifica del file CSS principale in Weebly

Se stai aggiungendo questo CSS nella sezione dell’intestazione del sito o di una pagina, assicurati di aggiungere il codice all’interno dei tag < style >…</ style >.

Passaggio n. 3 – Caricamento delle immagini del profilo

Carica le immagini del profilo dei membri del tuo team nella sezione "Risorse" dell’editor di codice Weebly e il percorso del file immagine caricato dovrebbe essere come – " http://your-weebly-site.com/files/theme/profile1.png ".

Passo #4 – Aggiunta di codice HTML

L’ultimo passaggio consiste nell’aggiungere il codice HTML sottostante all’interno dell’elemento " Codice di incorporamento " nella pagina in cui si desidera aggiungere i membri del team.

<div class="person-details margin-bottom-30">  <div class="team"> <figure> <img style="width:330px; height:200px" src="https://img.webnots.com/2015/08/Testimonial2.jpg"> <figcaption> <h4 class="margin-bottom-10">Isabel Tietz <small>- Plugin Developer</small> </h4> <div style="text-align:justify;">Super specialist on PHP template design and development for Weebly and WordPress platforms.</div> </figcaption> <ul class="list-inline person-details-icons"> <li> <a href="#">    <i class="fa fa-twitter">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-facebook">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-skype">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus">   </i> </a> </li> </ul> </figure> </div> </div>

Personalizzazione del widget

L’aggiunta del codice HTML sopra abiliterà una tessera membro del team e potrai personalizzare il widget modificando la sezione appropriata.

  • Sostituisci l’URL dell’immagine con il tuo del passaggio 3 e utilizza gli attributi di altezza e larghezza per regolare la posizione e la visibilità dell’immagine del profilo.

  • Il

    sezione contiene il nome, la designazione e una breve descrizione che può essere modificata secondo le vostre necessità.

  • Usa tutte le icone social disponibili con il codice adatto. Ad esempio, usa il codice <i class="fa fa-instagram"> per aggiungere l’icona di Instagram.

  • Da utilizzare per fornire un divario tra gli elementi social in base alla posizione sul tuo sito.

  • Sostituisci il # con i link social del membro del team.

  • Aggiungi più membri del team posizionando gli elementi "Codice da incorporare" uno accanto all’altro.

  • Puoi modificare i colori e la dimensione del carattere nel codice CSS. Abbiamo limitato la larghezza di ogni scheda squadra a 330 px per un migliore aspetto sui dispositivi mobili, puoi provare a modificare questa larghezza se hai un "nome + designazione" più lungo.

Nota: le immagini nel widget sono strettamente a scopo dimostrativo e non indicano membri reali del team.

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