Kuinka lisätä tiimijäsen -widget Weeblyyn?

Tiimin jäsen -widgetistä on eniten hyötyä esittelemään yhteenveto jokaisesta tiimisi jäsenestä sekä kuva ja lyhyt esittely. Voit käyttää tätä Weebly -sivustossa esimerkiksi sivustosi, organisaatiosi tai yrityksesi tiimin jäsenten näyttämiseen. Voit lisätä tiimin jäsen -widgetin Weeblyyn ilmaisella Weebly -sovelluksella tai mukautetulla koodilla. Tässä artikkelissa selitämme oletussovelluksen ja mukautetun koodin käytön ongelmat.

Weebly -tiimin jäsenen sovellus

Voit yhdistää ilmaisen Team Cards -sovelluksen sivustoosi Weeblyn sovelluskeskuksesta. Tämä on helppo vaihtoehto, koska sovellus on myös Weeblyn kehittäjiltä.

Weebly Team Cards -sovellus

Sovelluksessa on kuitenkin paljon virheitä ja se luo huonon käyttökokemuksen, kun yrität muokata sisältöä editorissa. Asetusten ponnahdusikkuna piilottaa muokattavan sisällön ja ärsyttää sinua koko ajan. Siitä on yli 5 vuotta, eikä Weebly ole korjannut ja optimoinut tätä sovellusta. Joten odota, että Weebly päivittää sovelluksen, voit kokeilla alla olevia tiimin jäsenkortteja.

Ajatelkaamme tyypillisen tiimin jäsenen widget sosiaalisten profiileja ja keskustella tarkemmin miten lisätä joukkueen jäsen widget Weebly sivustolla käyttäen perinteistä " upotettu koodi ” elementti. Widget, josta puhumme, näyttää alla kahden jäsenkortin kanssa.

Tiimin jäsenpaneelin widget

Tiimijäsen -widgetin ominaisuudet

• Jokainen joukkueen jäsenkortti koostuu seuraavista osista:
  • Profiilikuva
  • Nimi ja nimitys
  • Lyhyt kuvaus
  • Sosiaaliset kuvakkeet sosiaalisen profiilin linkkeihin
• Voit lisätä useita tiimin jäsenkortteja asettamalla Upota koodi -elementin vierekkäin.
• Jokaisen tiimikortin värit ja fontit on helppo muokata tarpeen mukaan.
• Widget käyttää Font mahtavia sosiaalisia kuvakkeita, mikä poistaa sosiaalisten kuvakkeiden tarpeen. Voit lisätä Twitterin, Facebookin, Skypen, LinkedInin tai muita sosiaalisia kuvakkeita tiimin jäseniin. Tämä tarkoittaa lähinnä sitä, että voit lisätä erilaisia ​​sosiaalisia kuvakkeita eri tiimin jäsenille sen perusteella, mikä profiili hänellä on.

Vaiheet tiimijäsen -widgetin lisäämisessä

Alla on vaiheet, joilla voit lisätä tiimin jäsen -widgetin Weebly -sivustoosi.

• Linkittäminen kuvakkeet CSS
• CSS -koodin lisääminen
• Profiilikuvien lataaminen
• HTML -koodin lisääminen

Vaihe 1 – Kuvakkeiden CSS -linkitys

Ensimmäinen vaihe on linkittää mahtavien kirjasinkuvakkeiden lähde -CSS sivustoosi. Kirjaudu sisään Weebly -sivustoosi ja lisää alla oleva koodi kohtaan "Asetukset> SEO> Otsikkokoodi".

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

Lisää otsikkokoodi Weebly -sivustotasolla

Vaihe 2 – CSS -koodin lisääminen

Seuraava vaihe on lisätä alla oleva CSS -koodi sivustosi main.less -tiedostoon.

.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;
}

CSS -päätiedoston muokkaaminen Weeblyssä

Jos lisäät tämän CSS: n sivuston tai sivun otsikko -osioon, muista lisätä koodi … </ style> -tunnisteisiin.

Vaihe 3 – Profiilikuvien lataaminen

Lataa tiimisi jäsenten profiilikuvat Weebly-koodieditorin Omaisuus-osioon ja ladatun kuvatiedoston polun tulisi olla seuraavanlainen: " http://your-weebly-site.com/files/theme/profile1.png ".

Vaihe 4 – HTML -koodin lisääminen

Viimeinen vaihe on lisätä alla oleva HTML -koodi Upota koodi -elementtiin sivulle, jolle haluat lisätä ryhmän jäseniä.

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

Widgetin mukauttaminen

Yllä olevan HTML -koodin lisääminen mahdollistaa yhden joukkueen jäsenkortin ja voit muokata widgettiä muokkaamalla asianmukaista osiota.

• Vaihda kuvan URL -osoite omaan vaiheesta 3 ja käytä korkeus- ja leveysmääritteitä profiilikuvan sijainnin ja näkyvyyden säätämiseen.

• The

  osio sisältää nimen, nimityksen ja lyhyen kuvauksen, joita voidaan muuttaa tarpeen mukaan.

• Käytä mitä tahansa sosiaalisia kuvakkeita sopivalla koodilla. Käytä esimerkiksi koodia <i class = “fa fa-instagram”> lisätäksesi Instagram-kuvakkeen.

• Käytä sosiaalisten elementtien väliseen kuiluun sivustosi sijainnin perusteella.

• Korvaa # tiimin jäsenen sosiaalisilla linkeillä.

• Lisää tiimin jäseniä sijoittamalla "Upota koodi" -elementit vierekkäin.

• Voit muuttaa värejä ja kirjasinkokoa CSS -koodissa. Olemme rajoittaneet kunkin joukkuekortin leveyden 330 kuvapisteeseen paremman ulkonäön saavuttamiseksi mobiililaitteissa. Voit yrittää muuttaa tätä leveyttä, jos sinulla on pidempi nimi + nimi.

Huomautus: Widgetin kuvat on tarkoitettu vain esittelyä varten, eivätkä ne kerro tiimin todellisia jäseniä.