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

Wie füge ich ein Icon-Panel-Widget in Weebly hinzu?

13

Icon Panels helfen Ihnen, Inhalte auf sehr attraktive Weise zu präsentieren. Sie können dies im Allgemeinen auf einer Zielseite verwenden, um verschiedene Arten von auf der Website bereitgestellten Diensten anzuzeigen. Ein einzelnes Panel kann als Call-to-Action-Box fungieren und Sie können mehrere Panels anzeigen, indem Sie es daneben platzieren. Obwohl Weebly Call-Out-Box als App anbietet, wird ein Icon-Panel mit gleichem Spaltenstil ein ansprechenderes Aussehen erzeugen.

Unten ist das Icon-Panel-Widget, über das wir sprechen und weiterlesen, um ein solches Panel für Ihre Weebly-Site zu erstellen.

Funktionen des Symbolfelds

  • Sie können eine beliebige Anzahl von Panels hinzufügen, indem Sie einfach einen HTML-Code anhängen.
  • Verwendung als einzelne oder mehrere Platten.
  • Ansprechendes Design und einfach anzupassen.
  • Jedes Panel enthält ein Font Awesome Icon, eine Überschrift, einen Absatz und einen Weiterlesen-Link oder eine Schaltfläche.
  • Jede Spalte ist gleich hoch, obwohl die Inhaltshöhe unterschiedlich ist.

Das Erstellen eines Icon-Panels ist ein zweistufiger Prozess – zuerst das CSS definieren und dann HTML hinzufügen.

Definieren von Stilen für das Icon-Panel-Widget

Schritt 1 – Definieren von Spalten und Panel-Containern

Lassen Sie uns ein Widget mit vier Spalten c1, c2, c3 und c4 mit gleicher Höhe innerhalb eines Containers namens panel_container erstellen.

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

Wir verwenden das Flex-Attribut, um die Höhe des übergeordneten Containers unabhängig von der individuellen Höhe der vier untergeordneten Spalten darin fest zu halten. Wir haben 20 % Breite für jede Spalte verwendet, um in die Breite des Weebly-Themes zu passen; Sie können versuchen, die Breite basierend auf Ihrem Thema und der Anzahl der Spalten, die Sie wirklich benötigen, anzupassen.

Hinweis: Alle modernen Browser unterstützen das CSS-Flex-Attribut. Alte Browser wie Internet Explorer unterstützen dies jedoch nicht.

Schritt 2 – Den Hintergrund der Spalte definieren

Nachdem die vier Spalten mit gleicher Höhe definiert sind, ist es an der Zeit, die Hintergrundfarbe für jede Spalte zu definieren. Wir haben einige websichere Farben verwendet, die Sie in jede gewünschte Farbe ändern können.

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

Schritt 3 – Definieren des Stils für Font Awesome Icons

Wir verwenden Font Awesome für Symbole, damit sie einfach zu verwenden ist und Sie viele Symbole für Ihre Bedürfnisse auswählen können. Das Symbol ist als quadratisches Kästchen mit einer Größe von 80 x 80 Pixel mit einem Hover-Effekt definiert.

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

Schritt 4 – Stil für zusätzliche Elemente

Unten ist der Stil für zusätzliche Elemente wie Überschrift (Überschrift), Absatz (Para) und Schaltfläche (btn).

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

Schritt 5 – Reaktionsfähigkeit zum Widget hinzufügen

Der letzte Schritt beim Definieren von CSS besteht darin, die Reaktionsfähigkeit mithilfe von Medienabfragen wie folgt hinzuzufügen:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

Jetzt ist der CSS-Teil abgeschlossen und das komplette CSS sieht wie folgt aus:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Fügen Sie das vollständige CSS im Abschnitt "Header-Code" Ihrer Weebly-Seite ein.

Wie füge ich ein Icon-Panel-Widget in Weebly hinzu?

Kopfzeilencode in Seite hinzufügen

HTML für das Icon-Panel-Widget definieren

Ziehen Sie ein „Embed Code”-Element per Drag & Drop und fügen Sie den folgenden HTML-Code darin ein. Dies ist für ein einzelnes Symbolfeld und das Symbol "fa-home" wird verwendet, um ein Home-Symbol anzuzeigen. Schauen Sie sich die Referenzliste für fantastische Symbole für Schriftarten an, um die erforderlichen Symbole auszuwählen. Ersetzen Sie auch die Überschrift, den Absatz und das # durch Ihren tatsächlichen Inhalt und Link.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Unten ist der Code für zwei Panels mit unterschiedlicher Höhe – eines mit einer Schaltfläche und das andere mit einem Link zum Weiterlesen.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

Hinweis: Verwenden Sie den Inline-Stil für width=100% für Spalten, wenn Sie einzelne oder zwei Panels zusammen mit einigen anderen daneben platzierten Elementen verwenden möchten. Dadurch wird sichergestellt, dass das Panel auf die volle Breite ausgerichtet wird und nicht auf die definierte Breite der Spalte im Stil schrumpft. Die tatsächliche Breite des Panels und des angrenzenden Elements kann wie gewohnt angepasst werden, indem die Breite der Elemente im Weebly-Editor angepasst wird.

Unten finden Sie den vollständigen HTML-Code für das vierspaltige Icon-Panel-Widget:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Das Widget hat standardmäßig Spalten ohne Leerzeichen dazwischen. Sie können einen rechten Rand bereitstellen, um eine Lücke zwischen den Spalten zu erzeugen.

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

Wie füge ich ein Icon-Panel-Widget in Weebly hinzu?

Sie können einzelne, zwei, drei oder vier Platten mit unterschiedlichen Variationen verwenden.

Aufnahmequelle: www.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