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

Jak dodać podpowiedź w witrynie Weebly?

0

Weebly oferuje nie tylko możliwość zbudowania witryny w ciągu kilku minut, ale także liczne możliwości dostosowywania w celu dodania dowolnych dodatkowych funkcji. Umożliwienie użytkownikom bezpłatnego edytowania źródłowego kodu CSS i HTML jest głównym powodem sukcesu Weebly. Pisaliśmy już wiele porad i wskazówek, jak widżety na podejmowaniu Weebly strona bardziej profesjonalnie. W tym artykule będziemy kontynuować naszą serię widżetów z widżetem podpowiedzi.

Jak dodać podpowiedź w witrynie Weebly?

Tooltip to wyskakujące okienko, które pojawia się po najechaniu myszą na określony termin lub ikonę pomocy. Na urządzeniu mobilnym pojawienie się i zniknięcie podpowiedzi są zdarzeniami dotykowymi lub można je całkowicie wyłączyć. Podpowiedzi mogą być używane na wiele użytecznych sposobów:

  • Dodaj skrót, synonimy i akronimy.
  • Zaprezentuj jeden ze swoich produktów i połącz termin podpowiedzi ze stroną produktu.
  • Umieść reklamę lub linki partnerskie w podpowiedzi.
  • Pokaż powiązany obraz z powiązanym terminem.
  • Umieść przetłumaczone słowo w innym języku.
  • Podaj więcej informacji na temat terminu.

Tooltip to jedna z funkcji, które większość z Was chciało umieścić w swojej witrynie Weebly, aby zapewnić dodatkowe informacje o określonej zawartości. Istnieje wiele sposobów dodawania podpowiedzi do treści:

  • Korzystanie ze znacznika tytułu HTML.
  • Korzystanie z prostego CSS.
  • Korzystanie z zaawansowanego CSS.

W tym artykule wyjaśnimy, jak dodać podpowiedź do witryny Weebly za pomocą prostego kodu HTML i CSS. Możliwe jest również dodawanie podpowiedzi za pomocą skryptów, których nie omówimy w tym samouczku.

Dodawanie podpowiedzi z tagiem tytułu HTML

Najprostszym sposobem dodania podpowiedzi do dowolnego terminu w treści jest użycie tagu Title. Pole podpowiedzi będzie oparte na domyślnym stylu przeglądarki i nie musisz w tym celu dodawać żadnego CSS. Poniżej znajduje się przykład dodawania podpowiedzi za pomocą tagu Title, przesuń kursor myszy nad podświetloną treścią, aby wyświetlić podpowiedź.

przesuń mysz tutaj

W edytorze Weebly użyj elementu „Kod osadzania", aby dodać treść wraz z tagiem Title, aby wstawić podpowiedź. Poniżej znajduje się przykład użycia tagu Title w elemencie Span:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Dostosowywanie okna podpowiedzi za pomocą CSS

Powyższa metoda jest bardzo prosta i niewystarczająco atrakcyjna. Możesz dodać niestandardowe pole podpowiedzi za pomocą CSS, aby wyglądało bardziej atrakcyjnie.

Najedź myszą, aby zobaczyć podpowiedź z niestandardowym kodem CSS

Kod HTML powyższej podpowiedzi jest następujący:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

A CSS jest jak poniżej:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

Etykietki narzędzi przy użyciu zaawansowanego CSS

Nie zawsze jest konieczne dodawanie podpowiedzi do konkretnego terminu; w większości przypadków możesz utworzyć dodatkowe okno pomocy (zazwyczaj symbol znaku zapytania), aby uzyskać więcej wyjaśnień. Wymaga to użycia zaawansowanego CSS w celu dostosowania pola podpowiedzi, a tutaj zapewniamy trzy sposoby tworzenia takiej podpowiedzi zawierającej prosty tekst, zawartość HTML i obraz.

Dodawanie podpowiedzi z prostym tekstem

Poniżej znajduje się prosta podpowiedź, która pojawia się po najechaniu myszą i znika po przesunięciu myszy. Zawiera tylko tekst, a pole jest dostosowywane za pomocą kodu CSS.

Etykietka z zawartością HTML

Co zrobić, jeśli chcesz dodać linki lub dowolną zawartość HTML w podpowiedzi? Sprawdź poniższe demo i możesz dodać dowolne tagi HTML, takie jak link, pogrubienie itp. W podpowiedzi.

Obraz w podpowiedzi

Trzecim przypadkiem jest dodanie obrazu do podpowiedzi i zapoznanie się z poniższym demo pokazującym obraz w polu podpowiedzi.

CSS dla wszystkich powyższych trzech podpowiedzi są takie same jak poniżej:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

Kod HTML wszystkich trzech podpowiedzi znajduje się poniżej:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

Możesz skopiować / wkleić zarówno zawartość CSS, jak i HTML używaną w tym demo i dostosować do swoich potrzeb. Zastąp link i adres URL obrazu własnymi.

Dodawanie CSS i HTML do witryny Weebly

Istnieją dwa sposoby dodawania CSS w Weebly :

  • Dodaj go w „main.less”, aby zastosować style w całej witrynie.
  • Dodaj go w sekcji „ Kod nagłówka ” konkretnej strony, aby CSS był skuteczny tylko na tej stronie.

Jak dodać podpowiedź w witrynie Weebly?

Dodaj kod nagłówka na stronie

Dodawanie niestandardowego kodu HTML

Część HTML podpowiedzi należy umieścić w obszarze zawartości, w którym chcesz wstawić podpowiedź za pomocą elementu „ Kod osadzania “.

Ź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