TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till verktygstips på Weebly -webbplatsen?

10

Weebly erbjuder inte bara möjligheten att bygga din webbplats på några minuter utan erbjuder också många anpassningsmöjligheter för att lägga till ytterligare funktioner du vill ha. Att låta gratisanvändare redigera källans CSS och HTML -kod är den främsta orsaken till Weeblys framgång. Vi har redan skrivit många tips och tricks samt widgets för att göra din Weebly -webbplats mer professionell. Och i den här artikeln kommer vi att fortsätta vår widget -serie med verktygstipswidgeten.

Hur lägger jag till verktygstips på Weebly -webbplatsen?

Verktygstips är en popup som visas när musen svävar över en viss term eller en hjälpikon. På en mobil enhet framträder och försvinnande av verktygstipsen beröringshändelser eller så kan den inaktiveras helt. Verktygstips kan användas på många användbara sätt:

  • Lägg till en förkortning, synonymer och akronymer.
  • Visa upp en av dina produkter och länka verktygstipset till en produktsida.
  • Placera en annons eller affiliate -länkar i verktygstipset.
  • Visa relaterad bild till den länkade termen.
  • Placera ett översatt ord på ett annat språk.
  • Ge mer information om termen.

Verktygstips är en av de funktioner de flesta av er ville infoga på din Weebly -webbplats för att ge ytterligare information om specifikt innehåll. Det finns många sätt att lägga till verktygstips till ditt innehåll:

  • Använda HTML Title -taggen.
  • Med enkel CSS.
  • Använda avancerad CSS.

I den här artikeln kommer vi att förklara hur du lägger till verktygstips till Weebly -webbplatsen med hjälp av enkel HTML- och CSS -kod. Det är också möjligt att lägga till verktygstips med hjälp av skript som vi inte kommer att täcka i denna handledning.

Lägg till verktygstips med HTML -titeltagg

Det enklaste sättet att lägga till verktygstips till en specifik term i ditt innehåll är att använda Title -tagg. Verktygstipsrutan kommer att baseras på webbläsarens standardstil och du behöver inte lägga till någon CSS för detta. Nedan är ett exempel på hur du lägger till verktygstips med hjälp av Title -taggen, flytta musen över det markerade innehållet för att se verktygstipset.

flytta musen hit

I din Weebly -redigerare använder du elementet "Bädda in kod" för att lägga till innehållet tillsammans med Title -taggen för att infoga ett verktygstips. Nedan är ett exempel på hur du använder Title -tagg inom Span -element:

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

Anpassa Tooltip Box med CSS

Ovanstående metod är mycket enkel och inte tillräckligt attraktiv. Du kan lägga till en anpassad verktygstipsruta med hjälp av CSS för att se till att den ser mer attraktiv ut.

Flytta musen över för att se det här verktygstipset med anpassad CSS -kod

HTML för ovanstående verktygstips är som nedan:

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

Och CSS är enligt nedan:

<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>

Verktygstips Använda avancerad CSS

Det är inte alltid nödvändigt att lägga till verktygstips till en viss term; oftast kan du skapa en extra hjälpruta (vanligtvis en frågetecken) för att ge mer förklaring. Detta kräver användning av avancerad CSS för att anpassa verktygstipsrutan och här ger vi tre sätt att skapa en sådan verktygstips som innehåller enkel text, HTML -innehåll och en bild.

Lägga till verktygstips med enkel text

Nedan visas ett enkelt verktygstips på muspekaren och försvinner när musen flyttas ut. Den innehåller bara en text och rutan är anpassad med CSS -koden.

Verktygstips med HTML -innehåll

Vad händer om du vill lägga till länkar eller något HTML -innehåll i verktygstipset? Kolla in demoen nedan och du kan lägga till alla HTML -taggar som länk, fetstil etc. inuti verktygstipset.

Bild inuti ett verktygstips

Det tredje fallet är att lägga till en bild inuti verktygstipset och kolla in demo nedan som visar en bild i verktygstipsrutan.

CSS för alla ovanstående tre verktygstips är desamma som nedan:

<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>

HTML -kod alla tre verktygstipsen nedan:

<!-- 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>

Du kan kopiera / klistra in både CSS- och HTML -innehåll som används för denna demo och anpassa efter dina behov. Ersätt länken och bildadressen med din egen.

Lägga till CSS och HTML på Weebly Site

Det finns två sätt att lägga till CSS i Weebly :

  • Lägg till det i "main.less" för att tillämpa stilarna på hela din webbplats.
  • Lägg till den i rubriken " Rubrikkod " på en viss sida för att CSS endast ska gälla den sidan.

Lägg till rubrikkod på sidan

Lägga till anpassad HTML

HTML -delen av verktygstipset ska placeras på ditt innehållsområde där du vill infoga ett verktygstips med elementet " Bädda in kod ".

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer