TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać widżet członka zespołu w Weebly?

2

Widżet członka zespołu jest najbardziej przydatny do zaprezentowania podsumowania każdego członka zespołu wraz ze zdjęciem i krótkim wprowadzeniem. Możesz użyć tego w witrynie Weebly do celów takich jak pokazywanie członków zespołu swojej witryny, organizacji lub firmy. Możesz dodać widżet członka zespołu w Weebly, korzystając z bezpłatnej aplikacji Weebly lub za pomocą niestandardowego kodu. W tym artykule wyjaśnimy problemy z domyślną aplikacją i używaniem niestandardowego kodu.

Aplikacja członka zespołu Weebly

Możesz podłączyć bezpłatną aplikację „Karty zespołu" do swojej witryny z centrum aplikacji Weebly. Jest to łatwa opcja, ponieważ aplikacja również pochodzi od programistów Weebly.

Jak dodać widżet członka zespołu w Weebly?

Aplikacja Weebly Team Cards

Jednak aplikacja ma wiele błędów i powoduje złe wrażenia użytkownika podczas próby edycji treści w edytorze. Wyskakujące okienko z ustawieniami ukryje treść, którą chcesz edytować i przez cały czas cię denerwuje. Minęło ponad 5 lat, a Weebly nie poprawiło i nie zoptymalizowało tej aplikacji. Dlatego zamiast czekać, aż Weebly zaktualizuje aplikację, możesz wypróbować poniższe karty członków zespołu.

Pomyślmy o typowym widżecie członka zespołu z profilami społecznościowymi i omówmy dalej, jak dodać widżet członka zespołu w witrynie Weebly za pomocą tradycyjnego elementu „ Kod do umieszczenia na stronie “. Widżet, o którym mówimy, będzie wyglądał jak poniżej z dwiema kartami członkowskimi.

Jak dodać widżet członka zespołu w Weebly?

Widżet Panelu Członka Zespołu

Funkcje widżetu członka zespołu

  • Każda karta członka zespołu składa się z następujących elementów:
    • Zdjęcie profilowe
    • Nazwa i oznaczenie
    • Krótki opis
    • Ikony społecznościowe do linków do profili społecznościowych
  • Możesz dodać wiele kart członków zespołu, umieszczając obok siebie element „Kod do umieszczenia na stronie”.
  • Kolory i czcionki każdej karty członka zespołu można łatwo dostosować do potrzeb.
  • Widget wykorzystuje niesamowite ikony społecznościowe Font, eliminując w ten sposób potrzebę tworzenia obrazów ikon społecznościowych. Do członków zespołu możesz dodać Twittera, Facebooka, Skype’a, LinkedIn lub dowolne inne ikony społecznościowe. Zasadniczo oznacza to, że możesz dodać inny zestaw ikon społecznościowych do różnych członków zespołu w zależności od profilu, który faktycznie ma.

Kroki w dodawaniu widżetu członka zespołu

Poniżej znajdują się instrukcje dodawania widżetu członka zespołu do witryny Weebly.

  • Łączenie ikon CSS
  • Dodawanie kodu CSS
  • Przesyłanie zdjęć profilowych
  • Dodawanie kodu HTML

Krok #1 – Łączenie ikon CSS

Pierwszym krokiem jest połączenie źródłowego kodu CSS wspaniałych ikon czcionek ze swoją witryną. Zaloguj się do swojej witryny Weebly i dodaj poniższy kod w sekcji „Ustawienia > SEO > Kod nagłówka”.

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

Jak dodać widżet członka zespołu w Weebly?

Dodaj kod nagłówka na poziomie witryny Weebly

Krok #2 – Dodanie kodu CSS

Następnym krokiem jest dodanie poniższego kodu CSS do pliku „main.less” Twojej witryny.

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

Jak dodać widżet członka zespołu w Weebly?

Edycja głównego pliku CSS w Weebly

Jeśli dodajesz ten kod CSS w sekcji nagłówka witryny lub strony, pamiętaj, aby dodać kod w tagach < style >…</ style >.

Krok #3 – Przesyłanie zdjęć profilowych

Prześlij zdjęcia profilowe członków swojego zespołu w sekcji „Zasoby” edytora kodu Weebly, a ścieżka do przesłanego pliku obrazu powinna wyglądać następująco – „ http://twoja-witryna-weebly.com/files/theme/profile1.png “.

Krok #4 – Dodawanie kodu HTML

Ostatnim krokiem jest dodanie poniższego kodu HTML do elementu „ Embed Code ” na stronie, do której chcesz dodać członków zespołu.

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

Dostosowywanie widżetu

Dodanie powyższego kodu HTML umożliwi jedną kartę członka zespołu i możesz dostosować widżet, modyfikując odpowiednią sekcję.

  • Zastąp adres URL obrazu własnym z kroku 3 i użyj atrybutów wysokości i szerokości, aby dostosować położenie i widoczność obrazu profilu.

  • ten

    sekcja zawiera nazwę, oznaczenie i krótki opis, który można zmienić zgodnie z potrzebami.

  • Użyj dowolnych ikon społecznościowych dostępnych z odpowiednim kodem. Na przykład użyj kodu <i class=”fa fa-instagram”>, aby dodać ikonę Instagram.

  • Użyj, aby podać lukę między elementami społecznościowymi na podstawie pozycji w Twojej witrynie.

  • Zastąp # linkami społecznościowymi członka zespołu.

  • Dodaj więcej członków zespołu, umieszczając obok siebie elementy „Kod osadzania”.

  • Możesz modyfikować kolory i rozmiar czcionki w kodzie CSS. Ograniczyliśmy szerokość każdej karty zespołu do 330px, aby lepiej prezentować się na urządzeniach mobilnych. Możesz spróbować zmodyfikować tę szerokość, jeśli masz dłuższą „nazwa + oznaczenie”.

Uwaga: Obrazy w widżecie służą wyłącznie do celów demonstracyjnych i nie wskazują prawdziwych członków zespołu.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów