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

Jak dodać widżet referencji w Weebly?

1

W naszym poprzednim artykule omówiliśmy, jak dodać referencje w formie suwaka, a w tym artykule omówiliśmy, jak dodać widżet referencji w witrynie Weebly za pomocą prostego CSS. Wyjaśnimy dwa podobne przykłady, jeden z prostym kolorem, a drugi z jaśniejszym kolorem.

Oba widżety mają następujące funkcje:

  • Dodaj do dowolnej liczby stron.
  • W pełni responsywny, automatycznie dopasowujący się do szerokości urządzenia do oglądania.
  • Skonfiguruj jako indywidualny widżet lub jako osobna strona z referencjami.
  • Dodaj nieograniczoną liczbę referencji.
  • Dodaj w jednej lub dwóch kolumnach.

Jak dodać widżet referencji w Weebly?

Oba widżety opisane w tym artykule zawierają zdjęcia użytkowników, dlatego pierwszym krokiem jest przesłanie zdjęć w sekcji „Motyw > Edytuj HTML / CSS > Zasoby > Prześlij plik(i)…". Ścieżka do przesłanych obrazów zostanie lubić:

http://your-site-name.com/files/theme/testimonial-image1.jpg

Prosty widżet referencji

Prosty widżet referencji będzie wyglądał jak poniżej, a demo na żywo można obejrzeć tutaj. Może być umieszczony w pełnej szerokości lub w układzie dwukolumnowym.

Jak dodać widżet referencji w Weebly?

Widżet zawiera następujące części, które są również wyróżnione w CSS za pomocą komentarzy:

  • Treść referencji jest definiowana za pomocą klasy „.tm-content”
  • Strzałka w dół jest definiowana za pomocą pseudoelementu :after „.tm-content:after”
  • Zdjęcie, nazwa i tytuł są definiowane za pomocą klasy „.tm-pic”
  • Obraz jest definiowany przy użyciu klasy „.tm-pic photo”
  • Nazwa jest definiowana za pomocą klasy „.tm-pic p:nth-child(2)”
  • Tytuł jest definiowany przy użyciu klasy „.tm-pic p:nth-child(3)”

CSS dla prostego widżetu referencji

Dodaj poniższy kod CSS w sekcji „Kod nagłówka” na swojej stronie Weebly. Kolor tła referencji jest zdefiniowany jako #ebf3f5, który można zmienić na dowolny kolor, w zależności od potrzeb.

<style type="text/css"> /* Testimonial Content */ .tm-content { background: #ebf3f5; padding: 15px 20px 5px 15px; border-radius: 5px; margin-bottom: 30px; } /* Down Arrow */ .tm-content:after { content: ''; width: 0px; height: 0px; border-style: solid; border-width: 20px 18px 0 18px; border-color: #ebf3f5 transparent transparent transparent; position: relative; top: 37px; left: 20px; } /* Picture, Name and Title */ .tm-pic { margin-left: 25px; margin-bottom: 80px; } /* Testimonial Picture */ .tm-pic .photo { background-color: #ccc; border-radius: 100px; width: 60px; height: 60px; float: left; margin-right: 10px; } /* Name and Title Paragraph*/ .tm-pic p { position: relative; top: 5px; text-transform: uppercase; line-height:30px; } /* Name */ .tm-pic p:nth-child(2) { font-size: 16px; font-weight: 600; margin-bottom: 0; } /* Title */ .tm-pic p:nth-child(3) { font-size: 14px; color: #777; } </style>

HTML dla prostego widżetu referencji

Dodaj poniższy kod HTML do elementu „ Embed Code “, zastępując fikcyjną zawartość własną. Kod dotyczy pojedynczego bloku referencji, który zostanie wyświetlony na całej szerokości i możesz dodać wiele referencji, po prostu dołączając kod bloku. Jeśli chcesz pokazać referencje w dwóch kolumnach, użyj obok siebie elementów „Kod osadzania” i wklej wewnątrz blok kodu HTML.

<div class="tm-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p> </div> <div class="tm-pic"> <div class="photo"><img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width=60px height=60px> </div> <p>Diana Mary</p> <p>Important person, some Company</p> </div>

Kolorowy Widżet Referencje

Drugi widżet referencji jest podobny do pierwszego z bardziej jasnymi kolorami, jak pokazano poniżej. Różnica w tym widżecie polega na tym, że blok kodów HTML zostanie automatycznie wyrównany w układzie dwukolumnowym bez konieczności używania wielu elementów „Kod osadzania”. Poniżej jak to będzie wyglądać:

Widget zawiera następujące części, które są również wyróżnione w CSS z komentarzami:

  • Pojedynczy blok – opakowanie testimonial zdefiniowane w klasie „.testimonial-wrap”
  • Treść – Treść referencji zdefiniowana w klasie „.testimonial”
  • Nazwa i tytuł – Informacje o referencjach zdefiniowane w klasie „.testimonial-info”
  • Zdjęcie – Zdjęcie użytkownika zdefiniowanego w klasie „.headshot”
  • Strzałka – strzałka w dół zdefiniowana w klasie „.arrow-down”

CSS dla kolorowego widżetu referencji

Dodaj poniższy kod CSS w sekcji „ Kod nagłówka ” na swojej stronie Weebly, możesz również dodać go w pliku „main_style.css” bez tagów, aby kod działał na poziomie witryny.

<style type="text/css"> /* Testimonial Wrapper */ .testimonial-wrap { padding:30px; float:left; } /* Testimonial Content */ .testimonial { background:#54acd2; color:#fff; font-size:32px; padding:20px; width:400px; font-family:nixie one; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* Testimonial Info - Name and Title */ .testimonial-info { font-family:sans-serif; font-weight:bold; margin-top:25px; float:left; } .testimonial-info h4 { font-size:18px; margin:5px auto; color:#333; text-transform:uppercase; } .testimonial-info h4 span{ font-size:18px; margin:5px auto; color:#999; text-transform:none; } .testimonial-info p { font-size:14px; color:#df0a81; margin:0px; } /* Testimonial image */ .headshot { width:100px; height:100px; background:#333; float:left; color:#fff; margin-top:10px; border:3px solid #ccc; margin-right:20px; -webkit-border-radius: 100px; border-radius: 100px; overflow:hidden; } .headshot img{ width:100%; height:100%; } /* Down Arrow */ .arrow-down { width: 0; height: 0; margin-left:35px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #54acd2; } </style>

HTML dla kolorowego widżetu referencji

Poniżej znajduje się pojedynczy blok referencji, który należy dodać wewnątrz elementu „Kod do umieszczenia na stronie”. Jeśli dodasz wiele bloków, referencje zostaną automatycznie wyrównane w układzie dwukolumnowym. Nie zapomnij zastąpić fikcyjnej zawartości własną.

<div class="testimonial-wrap"> <div class="testimonial"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra." </div> <div class="arrow-down"></div> <div class="headshot"> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg"></div> <div class="testimonial-info"> <h4>Principal Van Kirk</h4> <p>Finger Lakes Christian School</p> </div> </div>

Zwróć uwagę, że użyte zdjęcia służą wyłącznie do celów demonstracyjnych i nie wskazują prawdziwych użytkowników.

Ź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