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

Jak dodać pola wiadomości informacyjnych w witrynie Weebly?

17

Wyróżnienie ważnych informacji w artykule pomaga skutecznie przekazać wiadomość użytkownikom. Ogólnie rzecz biorąc, możesz używać okienek komunikatów do prezentowania wskazówek, pomocy, ostrzeżeń, alertów i wielu innych rodzajów informacji. Struktury, takie jak Bootstrap, oferują wstępnie zdefiniowany komponent alertu do dodawania tych okien komunikatów informacyjnych. Podobnie możesz używać wtyczek w systemach zarządzania treścią, takich jak WordPress. W Weebly możesz tworzyć pola wiadomości informacyjnych za pomocą prostego CSS. W tym artykule wyjaśnimy dodawanie okienka informacyjnego w witrynie Weebly w oparciu o komponent alertu Bootstrap.

Informacje o skrzynkach wiadomości

Stworzymy skrzynki wiadomości w dwóch różnych stylach.

  • Korzystanie z ikon czcionek
  • Korzystanie z małych obrazów ikon

Ikony czcionek są dobrym rozwiązaniem, jeśli używasz Font Awesome w swojej witrynie. W przeciwnym razie możesz wybrać opcję obrazu zamiast ikon czcionek.

Funkcja skrzynek wiadomości informacyjnych

Okna informacyjne będą miały następujące funkcje:

  • Wykonane z CSS i w pełni responsywne automatyczne dopasowywanie na urządzeniach mobilnych.
  • Style zawierają okno wiadomości z informacjami, sukcesami, ostrzeżeniami, niebezpieczeństwami, wskazówkami, pomocą i ogłoszeniami. Możesz także zdefiniować własne niestandardowe okno wiadomości na podstawie kodu.
  • Dodaj indywidualne skrzynki wiadomości w zależności od potrzeb. Na przykład, gdy chcesz wyświetlić podpowiedź, użyj „okna komunikatu podpowiedzi", a w przypadku ostrzeżenia użyj „okna z ostrzeżeniem”. Można to kontrolować za pomocą kodu HTML wklejonego w elemencie „Kod do umieszczenia na stronie”.
  • Kolory i czcionki można dostosować według potrzeb.
  • Szerokość pola powiadomienia można rozszerzyć do pełnej szerokości ekranu lub skrócić w celu dopasowania do długości treści.

1 okno wiadomości informacyjnej z ikonami czcionek

Poniżej przedstawiamy, jak będą wyglądać pola zawierające pole koloru CSS i ikony czcionek przed tekstem.

Jak dodać pola wiadomości informacyjnych w witrynie Weebly?

Pierwszym krokiem do utworzenia tych pól informacyjnych jest połączenie wspaniałych ikon czcionek CSS w sekcji nagłówka witryny. W tym celu dodaj poniższy kod w sekcji „Ustawienia > SEO > Kod nagłówka” w edytorze witryny Weebly.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Jak dodać pola wiadomości informacyjnych w witrynie Weebly?

Dodaj kod nagłówka na poziomie witryny Weebly

Drugim krokiem jest dodanie poniższego kodu CSS do pliku „main.less”.

.webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; /* width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; */ } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-success { background-color: #2ecc71; } .webnots-success:before { content: "f00c"; margin-left: -2px; } .webnots-failure { background-color: #e74c3c; } .webnots-failure:before { content: "f00d"; } .webnots-warning { background-color: #e67e22; } .webnots-warning:before { content: "f12a"; margin-left: 5px; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; } .webnots-notice { background-color: #bea474; } .webnots-notice:before { content: "f0a1"; margin-left: -1px; }

Jak dodać pola wiadomości informacyjnych w witrynie Weebly?

Edycja głównego pliku CSS w Weebly

Po dodaniu kodu CSS przejdź do strony, na której chcesz dodać pole wiadomości informacyjnej. Skopiuj i wklej poniższy kod HTML, przeciągając element „ Embed Code “:

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

Każdy znacznik < div >… </ div > obejmuje różne typy wiadomości. Na przykład, aby dodać pole sukcesu, wystarczy dodać poniższy kod HTML:

<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

W tym przykładzie użyliśmy czcionki awesome 4.7. Możesz użyć wersji 5 lub 6, zastępując CSS i odpowiadające mu klasy w HTML.

2 okno wiadomości informacyjnej z obrazami ikon

Drugi styl okien wiadomości używa małych obrazków zamiast ikon czcionek i będzie wyglądał jak poniżej:

Jak dodać pola wiadomości informacyjnych w witrynie Weebly?

Ten widżet wymaga następujących czterech obrazów ikon, kliknij prawym przyciskiem myszy i pobierz obrazy na lokalny komputer.

Prześlij obrazy w sekcji „Motyw > Edytuj HTML / CSS > Zasoby > Prześlij plik(i)…” w witrynie Weebly. Ścieżka pliku przesłanego obrazu Weebly będzie wyglądać tak: „ https://nazwa-witryny.com/files/theme/info.png “. Alternatywnie możesz kliknąć prawym przyciskiem myszy przesłany plik i uzyskać poprawną ścieżkę pliku tego obrazu.

Po uzyskaniu prawidłowej ścieżki pliku przesłanych obrazów dodaj poniższy kod CSS do pliku „main.less”. Nie zapomnij zaktualizować adresów URL obrazów o adresy URL obrazów witryny Weebly.

.info_alert { background-image: url(https://img.webnots.com/2015/10/info.png); border: 1px solid #CCCCCC; background-color: #E0E0E0; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; } .warning_alert { background-image: url(https://img.webnots.com/2015/10/warning.png); border: 1px solid #FE7736; background-color: #FFBD59; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .danger_alert { background-image: url(https://img.webnots.com/2015/10/danger.png); border: 1px solid #FF0F0F; background-color: #FF8080; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .success_alert { background-image: url(https://img.webnots.com/2015/10/success.png); border: 1px solid #83CD52; background-color: #8DE182; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: #060; }

Przejdź do strony, do której chcesz dodać okno wiadomości, i wstaw poniższy kod HTML w elemencie „Kod osadzania”.

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>

Jeśli chcesz użyć tylko jednego pola, użyj odpowiedniego kodu w ramach tagów < p >…</ p >.

Uwaga: masz dwie inne opcje, zamiast dodawać kod CSS w sekcji nagłówka w „Ustawieniach” witryny. Jednym z nich jest wstawienie kodu pod plik „main.less”, a drugim dodanie kodu pod sekcją nagłówka danej strony, aby działał tylko na tej stronie. W obu scenariuszach upewnij się, że kod zostanie dodany w ramach… tagu.

Źródło nagrywania: www.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