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

Jak dodać widżet panelu zdjęć w Weebly?

0

Panel zdjęć służy do wyświetlania obrazu wraz z małym opisem i linkiem lub przyciskiem wezwania do działania. To łatwy sposób na przyciągnięcie uwagi użytkownika i skierowanie go na stronę docelową. Zamiast pojedynczego panelu możesz również użyć paneli pełnych stron w wielu kolumnach jako menu restauracji lub do zaprezentowania miejsc docelowych dla biura podróży. W tym artykule wyjaśnimy, jak utworzyć pojedynczy widżet panelu zdjęć i używać go w wielu kolumnach w witrynie Weebly.

Widżety panelu pojedynczego zdjęcia będą wyglądać jak poniżej i możesz stworzyć restaurację lub galerię, ulepszając pojedynczy widżet.

Jak dodać widżet panelu zdjęć w Weebly?

Pojedynczy panel zdjęć dla Weebly

Tworzenie pojedynczego widżetu panelu zdjęć

Pojedynczy panel może być używany niezależnie jako indywidualny widżet panelu zdjęć. Jeśli chcesz użyć go w kolumnie, pojedynczy panel zdjęć należy umieścić obok dowolnego innego elementu za pomocą elementu „ Osadź kod " w witrynie Weebly. Panel zawiera obraz, tytuł, opis i przycisk wezwania do działania. Zasadniczo potrzebujesz obrazów, CSS i HTML, aby utworzyć panel, a panel zdjęć będzie wyglądał obok z niewielkimi odchyleniami w oparciu o Twój motyw Weebly.

Funkcje widżetu panelu zdjęć

  • Dodaj jako pojedynczy widżet lub w wielu kolumnach.
  • Wykonane za pomocą prostego CSS bez zapytania.
  • Dostosuj kolor i czcionki do swoich potrzeb.
  • Użyj do wezwania do działania lub widgetu na całą stronę, takiego jak menu restauracji.
  • W pełni responsywny automatycznie dopasowujący się do szerokości urządzeń mobilnych.

Przesyłanie obrazów do witryny Weebly

Pierwszym krokiem jest przesłanie wymaganych obrazów do witryny Weebly w sekcji „Motyw > Edytuj kod HTML / CSS > Zasoby > Prześlij plik(i)…”. Przesłany obraz będzie miał następujący link:

https://yoursite.com/files/theme/image.jpg

CSS dla pojedynczego panelu zdjęć

Najpierw tworzymy panel kontenera z kolorem tła beżowym. Jest to kolor wyświetlany w dolnej części panelu i możesz go zmienić na dowolny, aby pasował do motywu Twojej witryny.

/* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; }

Kontener będzie miał obraz na górze i zawartość na dole. Zdefiniujmy wysokość obrazu jako 200px wraz z pewnym efektem najechania.

/* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; }

Następnie definiujemy przycisk wezwania do działania z efektem najechania:

/* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; }

Ostatnią częścią CSS jest zdefiniowanie dodatkowych stylów linku, akapitu i nagłówka.

/* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; }

Pełny kod CSS dla jednego panelu zostanie wyświetlony poniżej i zostanie dodany kod w sekcji „Strony > Wybierz stronę, do której chcesz dodać panel > Ustawienia SEO > Kod nagłówka” Twojej strony Weebly.

Jak dodać widżet panelu zdjęć w Weebly?

Dodaj kod nagłówka na stronie

<style> /* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } </style>

HTML dla pojedynczego panelu zdjęć

Po dodaniu CSS dodaj poniższy kod HTML do elementu „Kod osadzania”. Upewnij się, że adres URL obrazu został zastąpiony własnym.

<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Tworzenie widżetu na całej stronie ze zdjęciami

Weźmy przykład menu restauracji z czterema kolumnami i wieloma rzędami pozycji menu. Powyższy widżet pojedynczego panelu ma zostać zmodyfikowany, aby dopasować panele do elastycznego kontenera o równej wysokości z czterema kolumnami jako c1, c2, c3 i c4, a wszystkie inne style pozostaną takie same. Poniżej znajduje się przykładowy sposób tworzenia wielu paneli na jednej stronie.

Jak dodać widżet panelu zdjęć w Weebly?

Widżet panelu zdjęć Weebly

Poniżej znajduje się kompletny kod CSS, który możesz wkleić w sekcji „Kod nagłówka” na swojej stronie Weebly:

<style> /* Photo Panel Container Definition */ .photo_panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin: 10px 10px 80px 10px; } .c1, .c2, .c3, .c4 { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } .c1, .c2, .c3 { margin-right: 15px; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } @media only screen and (max-device-width: 768px) { .photo_panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Poniżej znajduje się kod HTML widżetu, który ma dwa wiersze i zawiera osiem paneli. Dodaj poniższy kod HTML w elemencie „ Kod do umieszczenia “, zastępując fikcyjną treść i adres URL obrazu własnymi.

<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

Ź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