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

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

2

Weebly oferuje tradycyjny element pokazu slajdów, który umożliwia dodawanie suwaków do witryny. Niestety nie jest to ani trochę bliższe nowoczesnym pokazom slajdów oferowanym przez zewnętrznych dostawców lub wtyczki. Możesz tworzyć pięknie wyglądające niestandardowe suwaki w stylu akordeonu wykonane wyłącznie za pomocą CSS. W tym artykule wyjaśnimy, jak utworzyć i CSS suwak obrazu akordeonu w witrynie Weebly

Suwak obrazu akordeonu Weebly

Poniżej przedstawiamy, jak stylowy suwak będzie wyglądał na Twojej witrynie Weebly.

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

Suwak akordeonu CSS

Jak dodać suwak obrazu akordeonu w Weebly?

Teraz, gdy widzisz suwak i jeśli wygląda dobrze, oto instrukcja krok po kroku, jak dodać suwak na swojej stronie. Proces składa się z trzech prostych kroków:

  • Przesyłanie obrazów do suwaka
  • Dodawanie kodu CSS na poziomie strony lub witryny
  • Dodawanie kodu HTML za pomocą elementu embed code

Krok 1 – przesyłanie obrazów do suwaka akordeonowego

Przygotuj wszystkie obrazy w wymaganym rozmiarze. W tym przykładzie użyliśmy obrazów o szerokości = 640 px. Prześlij wszystkie obrazy ze swojej witryny w sekcji „Motyw > Edytuj HTML / CSS > Zasoby > Prześlij plik(i)…".

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

Prześlij obrazy w edytorze kodu Weebly

Musisz zachować adresy URL przesłanych obrazów, których należy użyć w kroku 3. Adres URL przesłanego obrazu będzie następujący:

https://your-site-name.com/files/theme/image-name.jpg

Alternatywnie możesz kliknąć obraz prawym przyciskiem myszy i uzyskać adres URL, który powinien wyglądać jak poniżej:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

Uzyskaj adres URL przesłanego obrazu

Po przesłaniu wszystkich obrazów kliknij przycisk „Zapisz” i podaj niestandardową nazwę motywu.

Krok 2 – Dodanie kodu CSS

Jeśli chcesz dodać suwak tylko na określonych stronach, dodaj poniższy kod CSS w sekcji „Strony> Wybierz stronę> Ustawienia SEO> Kod nagłówka” wymaganych stron.

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

Dodaj kod nagłówka na stronie

W przypadku, gdy chcesz dodać suwak na wielu stronach, zalecamy dodanie go w głównym CSS w „Motyw> Edytuj HTML / CSS> Styl> main.less”. Możesz również dodać kod w sekcji „Ustawienia > SEO > Kod nagłówka”.

Jak dodać suwak obrazu akordeonu w witrynie Weebly?

Dodaj kod nagłówka na poziomie witryny Weebly

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Możesz dostosować dowolny styl zgodnie ze swoimi potrzebami.

Krok 3 – Dodawanie kodu HTML

Ostatnim krokiem jest dodanie poniższego kodu HTML suwaka poprzez przeciągnięcie i upuszczenie elementu kodu embed w obszarze zawartości wymaganej strony. Nie zapomnij zastąpić linków do obrazów własnymi linkami z kroku 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Uwaga: po dodaniu kodu HTML możesz zobaczyć, że obrazy są wyświetlane jeden pod drugim w edytorze Weebly. Jest to w porządku, ponieważ efekty CSS nie są stosowane na stronie, opublikuj stronę, aby zobaczyć rzeczywisty suwak.

Ź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