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

CSS Floating Slideout Widget dla Weebly

3

Istnieje wiele powodów, dla których musisz umieścić w swojej witrynie przycisk wezwania do działania. Na przykład możesz być zainteresowany zbieraniem wiadomości e-mail w celu wysłania biuletynu. Wyzwaniem jest tutaj znalezienie atrakcyjnej pozycji dla przycisku, tak aby użytkownicy klikali i na niego działali. Pływający przycisk to proste rozwiązanie tego problemu z umieszczeniem, który unosi się w stałej pozycji, gdy użytkownicy przewijają stronę w dół. Pomoże to zwiększyć widoczność i współczynnik klikalności przycisku. W tym artykule omówimy, jak utworzyć pływający widżet CSS, który będzie się wysuwał, gdy użytkownik najedzie na pływający obraz przycisku.



Zanim przejdziemy dalej, poniżej przedstawiamy wygląd widżetu. Możesz umieścić pływający obraz przycisku subskrypcji po lewej stronie z kodem elementu biuletynu wewnątrz wysuwanej strony. Formularz newslettera wysunie się po najechaniu kursorem, a użytkownicy będą mogli łatwo zasubskrybować.

CSS Floating Slideout Widget dla Weebly

Widżet pływającego wysuwania CSS

Możesz umieścić dowolny niestandardowy kod wewnątrz wysuwanej strony, a poniżej przedstawiamy kilka przykładów użycia:

  • Pływający przycisk kontaktowy z formularzem kontaktowym osadzonym w wysuwie. Możesz również wysłać użytkowników do oddzielnej strony kontaktowej, łącząc się z tą stroną.
  • Przycisk opinii z osadzonym formularzem kontaktowym innej firmy.
  • Wszelkiego rodzaju widżety, takie jak zegar, pogoda, kalendarz itp. jako wysuwane.

Jak utworzyć pływający suwak CSS za pomocą przycisku wezwania do działania?

Widget składa się z trzech elementów:

  • Obraz
  • Kod CSS
  • Kod HTML

1 – Przygotowanie obrazu

Poniżej znajduje się obraz, którego użyliśmy w widżecie demo. Możesz przygotować podobny obraz o przybliżonej wielkości 50 x 200 pikseli.

CSS Floating Slideout Widget dla Weebly

Możesz użyć dowolnych narzędzi do przetwarzania obrazu, takich jak Snagit lub Photoshop, aby tworzyć obrazy wysokiej jakości. W przeciwnym razie możesz korzystać z narzędzi, takich jak Paint, dostępnych bezpłatnie na wszystkich komputerach Microsoft. Możesz również pobrać przyciski Creative Commons z Internetu, które możesz swobodnie używać na swojej stronie.

Gdy obraz będzie gotowy, przejdź do sekcji „Motyw > Edytuj HTML/CSS > Zasoby" w edytorze Weebly. Prześlij obraz do swojej witryny, a adres URL dostępu do obrazu powinien wyglądać następująco: „ http://twojastrona.com/files /motyw/nazwa-obrazu.jpg “.

CSS Floating Slideout Widget dla Weebly

Przesyłanie obrazu do witryny Weebly

2 – Kod CSS

Widżet można wykorzystać na dwa sposoby – jeden to umieszczenie widżetu w całej witrynie, aby widżet pojawił się na wszystkich stronach witryny, a drugi to umieszczenie widżetu tylko na niektórych stronach witryny Weebly.

W przypadku całej witryny skopiuj poniższy kod, wklej go w sekcji „Ustawienia > SEO > Kod nagłówka” witryny Weebly i zapisz zmiany. Na poziomie strony wklej kod CSS w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod nagłówka “.

<style type="text/css"> /* Slideout outer button */ #slideout { position: fixed; z-index: 1; top: 80px; left: 0; padding: 25px 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* Slideout inner widget area */ #slideout_inner { position: fixed; top: 80px; left: -305px; background: #ffeb3b; width: 250px; padding: 25px; height: 200px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } /* Hover alignment */ #slideout:hover { left: 300px; } #slideout:hover #slideout_inner { left: 0; } </style>

3 – Kod HTML

Przeciągnij i upuść element „Kod osadzania” w dowolnym miejscu witryny i wstaw poniższy kod HTML:

<div id="slideout"> /* Insert Weebly Image */ <img src="Your Weebly Image URL" alt="Subscribe" /> <div id="slideout_inner"> <div> /* Insert Code for Content Shown in Slideout */ </div> </div> </div>

Jeśli Twój CSS jest skuteczny na poziomie witryny, kod HTML można osadzić na dowolnej stronie Twojej witryny. Jeśli Twój kod CSS działa tylko na określonej stronie, wstaw kod HTML na tej konkretnej stronie.

Kod HTML składa się z dwóch części:

  • Obraz – dodaj adres URL obrazu swojej witryny Weebly z kroku 1.
  • Kod widżetu, który będzie wyświetlany na wysuwanej części. Tutaj możesz dodać dowolne kody do osadzania stron trzecich bez zmian. Jeśli chcesz korzystać z domyślnych elementów Weebly, takich jak biuletyn lub formularz kontaktowy, czytaj dalej.

Pobieranie kodu HTML domyślnego elementu Weebly

Tutaj wyjaśniamy za pomocą elementu biuletynu, a proces pozostaje taki sam dla innych elementów, takich jak formularze kontaktowe i RSVP. Wstaw element biuletynu na stronę i opublikuj swoją witrynę. Jeśli masz już istniejący element biuletynu, możesz ponownie użyć tego samego elementu. Teraz otwórz stronę z newsletterem w przeglądarce przejdź do widoku dewelopera klikając prawym przyciskiem myszy i wybierając opcję inspekcji elementu.

CSS Floating Slideout Widget dla Weebly

Kopiowanie kodu elementu biuletynu

Najedź na kod i skopiuj cały blok kodu związany z elementem newslettera. W przeglądarkach takich jak Chrome wystarczy kliknąć pierwszy tag div i nacisnąć „control + v” lub „command + v”. Spowoduje to skopiowanie całego bloku kodu dla wybranego elementu biuletynu. Dowiedz się więcej o wyświetlaniu kodu źródłowego w Google Chrome. Użyj tego kodu w kodzie HTML dla widżetu wysuwanego, a kompletny kod HTML będzie wyglądał jak poniżej:

<div id="slideout"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88392-61320d0b64b6e.png" alt="Subscribe" /> <div id="slideout_inner"> /* START OF NEWSLETTER ELEMENT CODE */ <div> <form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994"> <div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;"> <ul class="formlist" id="100440182464484169-form-list"> <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;"> <label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label> <div class="wsite-form-input-container"> <input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749"> </div> <div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div> </div></div> </ul> </div> <div style="display:none; visibility:hidden;"> <input type="text" name="wsite_subject"> </div> <div style="text-align:center; margin-top:10px; margin-bottom:10px;"> <input type="hidden" name="form_version" value="2"> <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved"> <input type="hidden" name="ucfid" value="100440182464484169"> <input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a> </div> </form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe> </div> /* END OF NEWSLETTER ELEMENT CODE */ </div> </div>

Możesz korzystać z formularzy kontaktowych i RSVP w podobny sposób, jak wyjaśniono powyżej. Upewnij się, że nie usuwasz oryginalnego biuletynu lub elementu formularza kontaktowego ze swojej witryny, jeśli oryginalny formularz zostanie usunięty, osadzony kod wewnątrz widżetu nie będzie działać. W przypadku implementacji w całej witrynie możesz dodać kod HTML do układu stopki witryny, dzięki czemu nie musisz umieszczać kodu na każdej stronie.

Dostosowywanie widżetu

Kod widżetu jest bardzo elastyczny i można go dostosować do własnych potrzeb, zmieniając parametry. Oto kilka opcji, których możesz potrzebować, aby dopasować widżet do swojej witryny:

  • Stała wysokość – stała wysokość pływającego przycisku to 80px, zgodnie z definicją za pomocą „top” w klasach CSS #slideout i #slideout_inner. Możesz zmienić na dowolną wymaganą wysokość zgodnie z potrzebami.
  • Szerokość wysuwania – szerokość wysuwania jest zdefiniowana jako łącznie 300px. Możesz dostosować szerokość, modyfikując parametr „left” w klasach CSS #slideout, #slideout_inner i slideout:hover.
  • Kolory – dostosuj kolor wysuwania, zmieniając „tło” w klasie #slideout_inner.
  • Obraz i widżet wysuwany — możesz użyć dowolnych własnych obrazów i osadzić dowolny kod widżetu innej firmy zamiast elementu biuletynu, jak wyjaśniono powyżej.

Ź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