Come aggiungere finestre di messaggio di informazioni nel sito Weebly?

Evidenziare informazioni importanti in un articolo aiuta a trasmettere il messaggio con successo agli utenti. In genere, puoi utilizzare le finestre di messaggio per mostrare suggerimenti, aiuto, avviso, avviso e molti altri tipi di informazioni. Framework come Bootstrap offrono un componente di avviso predefinito per l’aggiunta di queste finestre di messaggio di informazioni. Allo stesso modo, puoi utilizzare i plugin su sistemi di gestione dei contenuti come WordPress. Su Weebly, puoi creare finestre di messaggi informativi utilizzando semplici CSS. In questo articolo spiegheremo l’aggiunta di una finestra di messaggio informativo nel sito Weebly in base al componente di avviso Bootstrap.

Riquadri messaggi informativi

Creeremo finestre di messaggio con due stili diversi.

• Utilizzo delle icone dei caratteri
• Utilizzo di piccole immagini di icone

Le icone dei caratteri sono una buona opzione se stai utilizzando Font Awesome sul tuo sito. Altrimenti, puoi scegliere l’opzione dell’immagine invece delle icone dei caratteri.

Caratteristica delle finestre di messaggio di informazioni

Le caselle dei messaggi informativi avranno le seguenti caratteristiche:

• Realizzato con CSS e allineamento automatico completamente reattivo sui dispositivi mobili.
• Stili include la finestra di messaggio per informazioni, successo, avviso, pericolo, suggerimenti, aiuto e messaggi di annuncio. Puoi anche definire la tua casella di messaggio personalizzata in base al codice.
• Aggiungi singole caselle di messaggio in base alle tue necessità. Ad esempio, quando si desidera visualizzare un suggerimento, utilizzare "finestra di messaggio di suggerimento" e per un avviso utilizzare "finestra di messaggio di avviso". Questo può essere controllato all’interno dell’HTML incollato all’interno dell’elemento "Codice da incorporare".
• Colori e caratteri possono essere personalizzati in base alle tue esigenze.
• La larghezza della casella di notifica può essere estesa all’intera larghezza dello schermo o ridotta per adattarla alla lunghezza del contenuto.

1 casella di messaggio informativo con icone dei caratteri

Di seguito è riportato come appariranno le caselle contenenti la casella dei colori CSS e le icone di un carattere prima del testo.

Il primo passo per creare queste caselle di informazioni è collegare le fantastiche icone dei caratteri CSS nella sezione dell’intestazione del tuo sito. Per fare ciò, aggiungi il codice seguente nella sezione "Impostazioni > SEO > Codice intestazione" nell’editor del tuo sito 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">

Aggiungi codice intestazione a livello di sito Weebly

Il secondo passaggio consiste nell’aggiungere il codice CSS sottostante nel file "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;
}

Modifica del file CSS principale in Weebly

Dopo aver aggiunto il codice CSS, vai alla pagina in cui desideri aggiungere la casella di messaggio informativo. Copia e incolla il codice HTML sottostante trascinando un elemento " 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>

Ciascun tag < div >… </ div > copre diversi tipi di messaggi. Ad esempio, per aggiungere una casella di successo basta aggiungere il seguente codice HTML:

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

Abbiamo usato il font impressionante 4.7 su questo esempio. Puoi usare la versione 5 o 6 sostituendo il CSS e le classi corrispondenti nell’HTML.

2 Casella di messaggio informativo con immagini di icone

Il secondo stile di finestre di messaggio utilizza immagini piccole invece di icone di caratteri e sarà simile al seguente:

Questo widget necessita delle seguenti quattro immagini di icone, fai clic con il pulsante destro del mouse e scarica le immagini sul tuo PC locale.

Carica le immagini in “Tema > Modifica HTML/CSS > Risorse > Carica file/i…" del tuo sito Weebly. Il percorso del file di un’immagine Weebly caricata sarà del tipo " https://nome-sito.com/files/theme/info.png ". In alternativa, puoi fare clic con il pulsante destro del mouse sul file caricato e ottenere il percorso corretto del file di quell’immagine.

Una volta che hai il percorso file corretto delle immagini caricate, aggiungi il codice CSS sottostante nel tuo file "main.less". Non dimenticare di aggiornare gli URL delle immagini con gli URL delle immagini del tuo sito 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;
}

Vai alla pagina in cui desideri aggiungere la finestra di messaggio e inserisci il codice HTML sottostante all’interno di un elemento "Codice da incorporare".

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

Se si desidera utilizzare solo una casella, utilizzare il codice corrispondente all’interno dei tag < p >…</ p >.

Nota: hai altre due opzioni, invece di aggiungere il codice CSS nella sezione dell’intestazione delle "Impostazioni" del sito. Uno è inserire il codice nel file "main.less" e l’altro è aggiungere il codice nella sezione dell’intestazione della pagina specifica per essere efficace solo su quella pagina. In entrambi gli scenari assicurati di aggiungere il codice all’interno di … tag.