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

Kuinka lisätä tietoviestilaatikoita Weebly -sivustoon?

6

Tärkeiden tietojen korostaminen artikkelissa auttaa välittämään viestin onnistuneesti käyttäjille. Yleensä voit käyttää viestiruutuja esittelemään vinkkejä, apua, varoituksia, hälytyksiä ja monia muita tietoja. Bootstrapin kaltaiset kehykset tarjoavat ennalta määritetyn hälytyskomponentin näiden tietoviestilaatikoiden lisäämistä varten. Samoin voit käyttää laajennuksia sisällönhallintajärjestelmissä, kuten WordPressissä. Weebly -palvelussa voit luoda tietoviestiruutuja yksinkertaisella CSS: llä. Tässä artikkelissa kerromme lisätietojen lisäämisestä Weebly -sivuston Bootstrap -hälytyskomponenttiin.

Info -viestilaatikot

Luomme viestiruutuja kahdella eri tyylillä.

  • Fonttikuvakkeiden käyttäminen
  • Pienten kuvakuvien käyttäminen

Fontti -kuvakkeet ovat hyvä vaihtoehto, jos käytät Font Awesome -sivustoasi. Muussa tapauksessa voit valita kuvavaihtoehdon fonttikuvakkeiden sijaan.

Infoviestilaatikoiden ominaisuus

Infoviestiruuduissa on seuraavat ominaisuudet:

  • Valmistettu CSS: llä ja täysin reagoivalla automaattisella kohdistuksella mobiililaitteissa.
  • Tyylit sisältää viestikentän, jossa on tietoja, menestys, varoitus, vaara, vinkit, ohje- ja ilmoitusviestit. Voit myös määrittää oman mukautetun viestiruudun koodin perusteella.
  • Lisää yksittäisiä viestiruutuja tarpeidesi mukaan. Jos haluat esimerkiksi näyttää vihjeen, käytä "tip message box" ja varoitukseksi "varoitus message box". Tätä voidaan ohjata "Upota koodi" -elementtiin liitetyssä HTML -koodissa.
  • Värit ja fontit voidaan räätälöidä tarpeen mukaan.
  • Ilmoitusruudun leveys voidaan laajentaa koko näytön leveyteen tai lyhentää sisällön pituuden mukaan.

1 Info -viestiruutu, jossa on kirjasinkuvakkeet

Alla on, miltä laatikot näyttävät sisältävän CSS -väriruudun ja kirjasinkuvakkeet ennen tekstiä.

Kuinka lisätä tietoviestilaatikoita Weebly -sivustoon?

Ensimmäinen askel näiden tietokenttien luomiseen on linkittää mahtavat fontti -kuvakkeet CSS sivustosi otsikko -osioon. Voit tehdä tämän lisäämällä alla olevan koodin Weebly -sivuston editorin kohtaan Asetukset> SEO> Otsikkokoodi.

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

Kuinka lisätä tietoviestilaatikoita Weebly -sivustoon?

Lisää otsikkokoodi Weebly -sivustotasolla

Toinen vaihe on lisätä alla oleva CSS -koodi "main.less" -tiedostoon.

.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; }

Kuinka lisätä tietoviestilaatikoita Weebly -sivustoon?

CSS -päätiedoston muokkaaminen Weeblyssä

Kun olet lisännyt CSS -koodin, siirry sivulle, jonka haluat lisätä tietoviestilaatikkoon. Kopioi ja liitä alla oleva HTML -koodi vetämällä Upota koodi -elementtiä:

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

Jokainen

… </ div> -tunniste kattaa erityyppisiä viestejä. Jos esimerkiksi haluat lisätä menestysruudun, lisää vain alla oleva HTML -koodi:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

Olemme käyttäneet fontti awesome 4.7 tässä esimerkissä. Voit käyttää versiota 5 tai 6 korvaamalla CSS ja vastaavat luokat HTML -koodissa.

2 Info -viestiruutu kuvakkeilla

Viestiruutujen toinen tyyli käyttää pieniä kuvia kirjasinkuvakkeiden sijaan ja näyttää tältä:

Kuinka lisätä tietoviestilaatikoita Weebly -sivustoon?

Tämä widget tarvitsee seuraavat neljä kuvaketta, napsauta hiiren kakkospainikkeella ja lataa kuvat paikalliseen tietokoneeseen.

Lataa kuvat Weebly -sivustosi kohdasta "Teema> Muokkaa HTML / CSS> Resurssit> Lähetä tiedosto (t)…". Ladatun Weebly-kuvan tiedostopolku on seuraavanlainen: " https://your-site-name.com/files/theme/info.png ". Vaihtoehtoisesti voit napsauttaa ladattua tiedostoa hiiren kakkospainikkeella ja saada kuvan oikean tiedostopolun.

Kun sinulla on ladattujen kuvien oikea tiedostopolku, lisää alla oleva CSS -koodi "main.less" -tiedostoosi. Muista päivittää kuvan URL -osoitteet Weebly -sivustosi kuva -URL -osoitteisiin.

.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; }

Siirry sivulle, jolle haluat lisätä viestiruudun, ja lisää alla oleva HTML -koodi Upota koodi -elementtiin.

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

Jos haluat käyttää vain yhtä laatikkoa, käytä vastaavaa koodia

… </ p> -tunnisteissa.

Huomautus: Sinulla on kaksi muuta vaihtoehtoa sen sijaan, että lisäisit CSS -koodin sivuston Asetukset -otsikon alle. Yksi on lisätä koodi "main.less" -tiedostoon ja toinen on lisätä koodi kyseisen sivun otsikko -osioon, jotta se olisi tehokas vain kyseisellä sivulla. Varmista molemmissa tilanteissa, että lisäät koodin… -tagiin.

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