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

Jak dodać widżet przełączania zawartości akordeonu w Weebly?

1

Widżet Accordion umożliwia dodawanie dużej zawartości na ograniczonej przestrzeni, a zainteresowani użytkownicy mogą rozwinąć tytuł, aby wyświetlić odpowiednią zawartość. W naszym poprzednim artykule omówiliśmy, jak korzystać z bezpłatnej aplikacji akordeonowej oferowanej przez Weebly z App Center wraz z kilkoma opcjami dostosowywania. W tym artykule omówimy, jak stworzyć i dodać widżet przełączania zawartości akordeonu CSS w witrynie Weebly.

Chociaż akordeony są popularne przy użyciu widżetu interfejsu użytkownika jQuery, możliwe jest również wykonanie akordeonu przy użyciu CSS bez skryptu. Dzięki temu strona ładuje się szybciej i ułatwia dostosowywanie za pomocą CSS. Widget zawiera trzy elementy dla każdego bloku akordeonu – nagłówek, strzałkę i treść. Możesz kontrolować wszystkie elementy widżetu za pomocą prostego CSS i dostosowywać do swoich potrzeb. Zasadniczo użyliśmy listy z typem wejścia jako pola wyboru do kontrolowania zachowania akordeonu.

Akordeon CSS będzie wyglądał mniej więcej tak, jak poniżej.

Jak dodać widżet przełączania zawartości akordeonu w Weebly?

Widżet akordeonu CSS Weebly

CSS dla widżetu akordeonu

Skopiuj poniższy kod CSS i wklej go w sekcji „ Kod nagłówka " w sekcji „Strony > Wybierz stronę > Ustawienia SEO” strony w witrynie Weebly. Aby ułatwić zrozumienie, wyróżniliśmy nagłówek i styl treści za pomocą komentarzy. Na przykład jako kolor tła nagłówka użyliśmy jasnozielonego koloru z czcionką o rozmiarze 20 pikseli i grubością 500. Możesz dostosować te parametry, aby pasowały do ​​motywu i układu witryny. Podobnie, korpus akordeonu używa jasnoszarego koloru tła z czcionką. -rozmiar jako 16px.Możesz również dostosować to do swoich potrzeb.

<style> /* Heading Style Start */ .accordion-heading { background-color: lightgreen; display: block; padding: 10px; position: relative; cursor: pointer; font-size: 20px; font-weight: 500; } /* Heading Style End */ /* Body Style Start */ .accordion-body { max-height: 0; margin-bottom: 2px; overflow: hidden; font-size: 16px; line-height: 1.5; text-align: justify; background-color: lightgrey; transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; } /* Body Style End */ .accordion { border: 1px solid white; margin: 0 auto; list-style: none; overflow: hidden; } .accordion > * + * { border-top: 1px solid white; } .accordion-input:checked ~ .accordion-body { background-color: lightgrey; padding: 10px; max-height: 1000px; transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; } .accordion-input:checked ~ .accordion-heading > .accordion-heading-btn { transform: rotate(0); } .accordion-heading-btn { display: block; width: 30px; position: absolute; top: 10px; right: 0; pointer-events: none; transition: transform .3s ease; transform: rotate(-180deg); text-align: center; font-size: 14px; line-height: 1; } .accordion-input { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1; overflow: hidden; position: absolute; left: -9999px; } </style>

Możesz również dodać CSS w sekcji „Ustawienia> SEO> Kod nagłówka” lub do pliku „main.less” bez tagów …, aby akordeon działał na poziomie witryny.

Jak dodać widżet przełączania zawartości akordeonu w Weebly?

Edycja głównego pliku CSS w Weebly

HTML na akordeon

Skopiuj i wklej poniższy kod HTML w elemencie „ Embed Code ” na stronie, do której chcesz dodać akordeon CSS. Zastąp nagłówki i treść zgodnie z potrzebami. Każdy blok podświetliliśmy komentarzem i możesz skopiować/wkleić blok, aby dodać dodatkowe bloki do akordeonu.

<div> <ul class="accordion"> <!-- First Block of Accordion Start --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item1" /> <label for="item1" class="accordion-heading">This is a first heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <!-- First Block of Accordion End --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item2" /> <label for="item2" class="accordion-heading">This is a second heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item3" /> <label for="item3" class="accordion-heading">This is a third heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item4" /> <label for="item4" class="accordion-heading">This is a fourth heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> </ul> </div>

Opcje dostosowywania

Jedną z głównych zalet akordeonu CSS jest to, że możesz przygotować treść offline i skopiować/wkleić ją w edytorze Weebly. Możesz łatwo poprawić sekwencję offline, dodać dowolny dodatkowy kod, aby kontrolować zachowanie i styl akordeonu. Jak wspomniano powyżej, możesz zmodyfikować kolor tła, rozmiar czcionki, wagę, margines i wypełnienie nagłówka i treści w CSS, aby dopasować je do motywu witryny.

Ź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