TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

CSS Floating Slideout -widget Weeblylle

4

On monia syitä, miksi sinun on lisättävä toimintakehotuspainike sivustollesi. Saatat esimerkiksi olla kiinnostunut sähköpostien keräämisestä uutiskirjeen lähettämistä varten. Haasteena on löytää houkutteleva sijainti painikkeelle, jotta käyttäjät napsauttavat sitä ja toimivat sen mukaan. Kelluva painike on yksinkertainen ratkaisu tähän sijoitusongelmaan, joka kelluu kiinteässä paikassa, kun käyttäjät vierittävät sivua alaspäin. Tämä auttaa lisäämään näkyvyyttä ja painikkeen napsautussuhdetta. Tässä artikkelissa keskustellaan siitä, kuinka luodaan kelluva CSS -widget -widget, joka liukuu ulos, kun käyttäjä liikkuu kelluvan painikkeen kuvan päällä.



Ennen kuin siirryt eteenpäin, alla on, miten widget näyttää. Voit sijoittaa kelluvan tilauspainikkeen kuvan vasemmalle puolelle uutiskirjeen elementin koodin kanssa liukukannen sisällä. Uutiskirje -lomake liukuu näkyviin ja käyttäjät voivat tilata helposti.

CSS Floating Slideout -widget Weeblylle

CSS Floating Slideout -widget

Voit sijoittaa minkä tahansa mukautetun koodin liukukytkimen sisälle ja alla on esimerkkejä käyttötapauksista:

  • Kelluva Ota meihin -painike, jonka yhteydenottolomake on upotettu liukukenttään. Voit myös lähettää käyttäjiä erilliselle yhteystietosivulle linkittämällä sivulle.
  • Palautuspainike, johon on upotettu kolmannen osan yhteydenottolomake.
  • Kaikentyyppiset widgetit, kuten kello, sää, kalenteri jne.

Kuinka luoda CSS Floating Slideout Call to Action -painikkeella?

Widget koostuu kolmesta osasta:

  • Kuva
  • CSS -koodi
  • HTML -koodi

1 – Kuvan valmistelu

Alla on demo -widgetissä käyttämämme kuva. Voit valmistaa samanlaisen kuvan, jonka koko on noin 50 x 200 pikseliä.

CSS Floating Slideout -widget Weeblylle

Voit käyttää laadukkaita kuvia minkä tahansa kuvankäsittelyohjelman avulla, kuten Snagit tai Photoshop. Muussa tapauksessa voit käyttää Paintin kaltaisia ​​työkaluja, jotka ovat vapaasti saatavilla kaikissa Microsoft -tietokoneissa. Voit myös ladata Creative Commons -painikkeita Internetistä, joita voidaan käyttää vapaasti sivustossasi.

Kun kuva on valmis, siirry Weebly -editorisi "Teema> Muokkaa HTML-/CSS -sisältöä" -osioon. Lataa kuva sivustollesi ja kuvan käyttämisen URL -osoitteen on oltava " http://yoursite.com/files " /teema/kuvanimi.jpg ".

CSS Floating Slideout -widget Weeblylle

Kuvan lataaminen Weebly -sivustolle

2 – CSS -koodi

Widgetin käyttämiseen on kaksi tapaa – yksi on sijoittaa koko sivusto niin, että widget näkyy kaikilla sivustosi sivuilla, ja toinen on sijoittaa widget vain tietyille Weebly -sivustosi sivuille.

Jos haluat käyttää koko sivustoa, kopioi alla oleva koodi ja liitä se Weebly -sivustosi kohtaan Asetukset> SEO> Otsikkokoodi ja tallenna muutokset. Liitä sivutasolle CSS -koodi Sivut> Valitse Sivu> SEO -asetukset> Otsikkokoodi -osiossa.

<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 – HTML -koodi

Vedä ja pudota Upota koodi -elementti mihin tahansa sivustoon ja lisää alla oleva HTML -koodi:

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

Jos CSS on tehokas sivustotasolla, HTML -koodi voidaan upottaa mille tahansa sivustosi sivulle. Jos CSS -koodisi on tehokas vain tietyllä sivulla, lisää HTML -koodi kyseiselle sivulle.

HTML -koodissa on kaksi osaa:

  • Kuva – lisää Weebly -sivustosi kuvan URL -osoite vaiheessa 1.
  • Widget -koodi näytetään diaesityksessä. Täällä voit lisätä minkä tahansa kolmannen osapuolen upotuskoodin sellaisenaan. Jos haluat käyttää Weeblyn oletuselementtejä, kuten uutiskirjettä tai yhteydenottolomaketta, lue lisää.

Oletusarvoisen Weebly -elementin HTML -koodin hakeminen

Tässä selitämme uutiskirje -elementillä, ja prosessi pysyy samana muille elementeille, kuten yhteys- ja vastauslomakkeille. Lisää uutiskirje -elementti sivulle ja julkaise sivustosi. Jos sinulla on jo uutiskirje -elementti, voit käyttää samaa elementtiä uudelleen. Avaa sivu uutiskirjeellä selaimessa ja siirry kehittäjänäkymään napsauttamalla hiiren kakkospainikkeella ja valitsemalla tarkastusosa.

CSS Floating Slideout -widget Weeblylle

Uutiskirjeen elementtikoodin kopiointi

Vie hiiri koodin päälle ja kopioi koko uutiskirje -elementtiin liittyvä koodilohko. Chromen kaltaisissa selaimissa voit napsauttaa vain ensimmäistä div -tunnistetta ja painaa "control + v" tai "command + v". Tämä kopioi valitun uutiskirje -elementin koko koodilohkon. Lue lisää lähdekoodin tarkastelemisesta Google Chromessa. Käytä tätä koodia diaesitys -widgetin HTML -koodin sisällä ja koko HTML -koodi näyttää tältä:

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

Voit käyttää yhteys- ja vastauslomakkeita samalla tavalla kuin yllä on selitetty. Varmista, ettet poista alkuperäistä uutiskirjettä tai yhteydenottolomakkeen elementtiä sivustostasi, jos alkuperäinen lomake poistetaan, widgetin sisällä oleva upotettu koodi ei toimi. Jos haluat ottaa käyttöön koko sivuston, voit lisätä HTML -koodin sivuston alatunnisteen asentoon, jotta sinun ei tarvitse upottaa koodia kullekin sivulle.

Widgetin mukauttaminen

Widget -koodi on erittäin joustava ja voit muokata tarpeidesi mukaan muuttamalla parametreja. Tässä on joitain vaihtoehtoja, jotka saatat joutua sovittamaan widgetin sivustollesi:

  • Kiinteä korkeus – kelluvan painikkeen kiinteä korkeus on 80 kuvapistettä, kuten CSS -luokkien #slideout ja #slideout_inner "top" -asetuksella määritetään. Voit vaihtaa haluamallesi korkeudelle tarpeen mukaan.
  • Liu’utuksen leveys – liukumäen leveys on 300 pikseliä yhteensä. Voit säätää leveyttä muuttamalla vasenta parametria #slideout, #slideout_inner ja slideout: hover CSS -luokissa.
  • Värit – säädä liukuvärin väriä muuttamalla #slideout_inner -luokan "taustaa".
  • Slideout -kuva ja widget – voit käyttää mitä tahansa omia kuviasi ja upottaa minkä tahansa kolmannen osapuolen widget -koodin uutiskirje -elementin sijasta, kuten edellä on selitetty.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja