TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich Info-Nachrichtenfelder in der Weebly-Site hinzu?

4

Das Hervorheben wichtiger Informationen in einem Artikel hilft, die Nachricht erfolgreich an die Benutzer zu übermitteln. Im Allgemeinen können Sie Nachrichtenfelder verwenden, um Tipps, Hilfe, Warnungen, Warnungen und viele andere Arten von Informationen anzuzeigen. Frameworks wie Bootstrap bieten eine vordefinierte Warnkomponente zum Hinzufügen dieser Info-Meldungsfelder. Ebenso können Sie Plugins auf Content-Management-Systemen wie WordPress verwenden. Auf Weebly können Sie mit einfachem CSS Infoboxen erstellen. In diesem Artikel erklären wir das Hinzufügen von Info-Meldungsfeldern auf der Weebly- Site basierend auf der Bootstrap-Warnungskomponente.

Info-Nachrichtenboxen

Wir werden Nachrichtenboxen mit zwei verschiedenen Stilen erstellen.

  • Verwenden von Schriftsymbolen
  • Verwenden von kleinen Symbolbildern

Schriftsymbole sind eine gute Option, wenn Sie Font Awesome auf Ihrer Website verwenden. Andernfalls können Sie die Bildoption anstelle von Schriftsymbolen auswählen.

Funktion von Info-Nachrichtenboxen

Die Info-Nachrichtenboxen haben die folgenden Funktionen:

  • Hergestellt mit CSS und vollständig reaktionsschneller automatischer Ausrichtung auf mobilen Geräten.
  • Styles enthält das Nachrichtenfeld für Info-, Erfolgs-, Warnungs-, Gefahren-, Tipps-, Hilfe- und Ankündigungsnachrichten. Sie können auch Ihr eigenes benutzerdefiniertes Nachrichtenfeld basierend auf dem Code definieren.
  • Fügen Sie je nach Bedarf individuelle Nachrichtenboxen hinzu. Wenn Sie beispielsweise einen Tipp anzeigen möchten, verwenden Sie das „Tipp-Meldungsfeld” und für eine Warnung das „Warnmeldungsfeld”. Dies kann in HTML gesteuert werden, das in das „Embed Code”-Element eingefügt wird.
  • Farben und Schriftarten können nach Bedarf angepasst werden.
  • Die Breite des Benachrichtigungsfelds kann auf die volle Bildschirmbreite erweitert oder an die Länge des Inhalts angepasst werden.

1 Info-Nachrichtenbox mit Schriftsymbolen

Unten sehen Sie, wie die Felder aussehen werden, die ein CSS-Farbfeld und ein Schriftsymbol vor dem Text enthalten.

Wie füge ich Info-Nachrichtenfelder in der Weebly-Site hinzu?

Der erste Schritt zum Erstellen dieser Infoboxen besteht darin, das CSS der Schriftart Awesome Icons mit dem Header-Bereich Ihrer Website zu verknüpfen. Fügen Sie dazu den folgenden Code im Abschnitt „Einstellungen > SEO > Header-Code” in Ihrem Weebly-Site-Editor hinzu.

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

Wie füge ich Info-Nachrichtenfelder in der Weebly-Site hinzu?

Kopfzeilencode auf Weebly-Site-Ebene hinzufügen

Der zweite Schritt besteht darin, den folgenden CSS-Code unter der Datei „main.less” hinzuzufügen.

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

Wie füge ich Info-Nachrichtenfelder in der Weebly-Site hinzu?

Bearbeiten der Haupt-CSS-Datei in Weebly

Nachdem Sie den CSS-Code hinzugefügt haben, gehen Sie zu der Seite, der Sie das Info-Nachrichtenfeld hinzufügen möchten. Kopieren Sie den folgenden HTML-Code und fügen Sie ihn ein, indem Sie ein Element „ Code einbetten ” ziehen:

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

Jedes < div >… </ div >-Tag deckt verschiedene Arten von Nachrichten ab. Um beispielsweise ein Erfolgsfeld hinzuzufügen, fügen Sie einfach den folgenden HTML-Code hinzu:

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

In diesem Beispiel haben wir Font Awesome 4.7 verwendet. Sie können Version 5 oder 6 verwenden, indem Sie das CSS und die entsprechenden Klassen im HTML ersetzen.

2 Info-Nachrichtenbox mit Symbolbildern

Der zweite Stil von Nachrichtenfeldern verwendet kleine Bilder anstelle von Schriftsymbolen und sieht wie folgt aus:

Wie füge ich Info-Nachrichtenfelder in der Weebly-Site hinzu?

Dieses Widget benötigt die folgenden vier Symbolbilder, klicken Sie mit der rechten Maustaste und laden Sie die Bilder auf Ihren lokalen PC herunter.

Laden Sie die Bilder unter „Theme > HTML/CSS bearbeiten > Assets > Datei(en) hochladen…” Ihrer Weebly-Site hoch. Der Dateipfad eines hochgeladenen Weebly-Bildes lautet „ https://your-site-name.com/files/theme/info.png “. Alternativ können Sie mit der rechten Maustaste auf die hochgeladene Datei klicken und den richtigen Dateipfad dieses Bildes abrufen.

Sobald Sie den korrekten Dateipfad der hochgeladenen Bilder haben, fügen Sie den folgenden CSS-Code in Ihre „main.less”-Datei ein. Vergessen Sie nicht, die Bild-URLs mit den Bild-URLs Ihrer Weebly-Site zu aktualisieren.

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

Gehen Sie zu der Seite, auf der Sie das Meldungsfeld hinzufügen möchten, und fügen Sie den folgenden HTML-Code in ein "Embed Code"-Element ein.

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

Wenn Sie nur eine Box verwenden möchten, verwenden Sie den entsprechenden Code innerhalb von < p >…</ p >-Tags.

Hinweis: Sie haben zwei andere Möglichkeiten, anstatt CSS-Code im Kopfbereich der „Einstellungen” der Site hinzuzufügen. Eine besteht darin, den Code in die Datei „main.less” einzufügen, und eine andere besteht darin, den Code unter dem Header-Abschnitt der jeweiligen Seite hinzuzufügen, um nur auf dieser Seite wirksam zu sein. Stellen Sie in beiden Szenarien sicher, dass Sie den Code innerhalb des …-Tags hinzufügen.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen