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

Jak dodać widżet panelu ikon w Weebly?

1

Panele ikon pomagają w bardzo atrakcyjnej prezentacji treści. Zazwyczaj można to wykorzystać na stronie docelowej, aby wyświetlić różne rodzaje usług świadczonych w witrynie. Pojedynczy panel może działać jako pole wezwania do działania i możesz wyświetlić wiele paneli, umieszczając je obok. Chociaż Weebly oferuje pole wywołania jako aplikację, panel ikon z równym stylem kolumn zapewni bardziej atrakcyjny wygląd.

Poniżej znajduje się widżet panelu ikon, o którym mówimy i czytamy dalej, aby stworzyć taki panel dla swojej witryny Weebly.

Funkcje panelu ikon

  • Możesz dodać dowolną liczbę paneli, dołączając fragment kodu HTML.
  • Użyj jako jednego lub wielu paneli.
  • Responsywny projekt i łatwy do dostosowania.
  • Każdy panel zawiera niesamowitą ikonę czcionki, nagłówek, akapit i link lub przycisk czytaj więcej.
  • Każda kolumna ma równą wysokość, mimo że wysokość zawartości jest inna.

Tworzenie panelu ikon to proces dwuetapowy – najpierw zdefiniuj CSS, a następnie dodaj HTML.

Definiowanie stylów widżetu panelu ikon

Krok 1 – Definiowanie kolumn i kontenera paneli

Stwórzmy widget z czterema kolumnami c1, c2, c3 i c4 o równej wysokości w kontenerze nazwanym panel_container.

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

Używamy atrybutu flex, aby utrzymać stałą wysokość kontenera nadrzędnego, niezależnie od indywidualnej wysokości czterech kolumn podrzędnych wewnątrz. Użyliśmy 20% szerokości dla każdej kolumny, aby zmieścić się w szerokości motywu Weebly; możesz spróbować dostosować szerokość w oparciu o swój motyw i liczbę kolumn, których naprawdę potrzebujesz.

Uwaga: Wszystkie nowoczesne przeglądarki obsługują atrybut CSS flex. Jednak stare przeglądarki, takie jak Internet Explorer, nie obsługują tego.

Krok 2 – Definiowanie tła kolumny

Teraz, gdy zdefiniowane są cztery kolumny o równej wysokości, nadszedł czas na zdefiniowanie koloru tła dla każdej kolumny. Użyliśmy niektórych bezpiecznych kolorów internetowych, możesz zmienić na dowolny kolor, którego potrzebujesz.

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

Krok 3 – Definiowanie stylu dla ikon Font Awesome

Używamy czcionki niesamowitej dla ikon, dzięki czemu jest łatwa w użyciu, a także będziesz mieć wiele ikon do wyboru. Ikona jest zdefiniowana jako kwadratowe pole o rozmiarze 80px x 80px z pewnym efektem najechania.

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

Krok 4 – Styl dla dodatkowych elementów

Poniżej znajduje się styl dodatkowych elementów, takich jak nagłówek (nagłówek), akapit (para) i przycisk (btn).

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

Krok 5 – Dodanie responsywności do widżetu

Ostatnim krokiem w definiowaniu CSS jest dodanie responsywności za pomocą zapytań o media, jak poniżej:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

Teraz część CSS jest ukończona, a kompletny CSS będzie wyglądał jak poniżej:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Wklej cały kod CSS w sekcji „Kod nagłówka" na swojej stronie Weebly.

Jak dodać widżet panelu ikon w Weebly?

Dodaj kod nagłówka na stronie

Definiowanie kodu HTML dla widżetu panelu ikon

Przeciągnij i upuść element „Kod osadzania” i dodaj do niego poniższy kod HTML. Dotyczy to pojedynczego panelu ikon, a ikona „fa-home” służy do wyświetlania ikony domu. Sprawdź listę referencyjną wspaniałych ikon czcionek, aby wybrać wymagane ikony. Zamień również nagłówek, akapit i # na rzeczywistą treść i link.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Poniżej znajduje się kod dla dwóch paneli o różnej wysokości – jeden z przyciskiem, a drugi z linkiem tekstowym czytaj więcej.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

Uwaga: Użyj stylu inline dla width=100% dla kolumn, jeśli chcesz użyć jednego lub dwóch paneli wraz z innymi elementami umieszczonymi obok. Dzięki temu panel jest wyrównany do pełnej szerokości i nie kurczy się do zdefiniowanej szerokości kolumny w stylu. Rzeczywistą szerokość panelu i sąsiedniego elementu można normalnie dostosować, dostosowując szerokość elementów w edytorze Weebly.

Poniżej znajduje się kompletny kod HTML widżetu czterokolumnowego panelu ikon:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Widżet domyślnie ma kolumny bez spacji między nimi, możesz podać prawy margines, aby utworzyć przerwę między kolumnami.

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

Jak dodać widżet panelu ikon w Weebly?

Możesz używać pojedynczych, dwóch, trzech lub czterech paneli w różnych wariantach.

Ź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