Springe zum Hauptinhalt

So fügen Sie Funktionalität mit Boxen Symbol auf Wordpress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie ein Feature-Box mit einem Symbol auf Ihrer Homepage hinzufügen?

Diese Funktion zeigt wichtige Informationen zu Ihren Produkten und Dienstleistungen an. Es hat sich als eine ansprechende Technik erwiesen, Produkte potenziellen Kunden zu präsentieren.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie diese Funktion zu Ihrem WordPress-Blog hinzufügen können.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

featureboxes

Was ist die Feature-Box mit Symbolen?

Die meisten Leute, die eine Website besuchen, lesen sie nicht vollständig. Als Menschen werden wir zu professionellen Scannern.

Dies bedeutet, dass Sie als Inhaber eines Online-Geschäfts wichtige Informationen auf eine Weise präsentieren müssen, die relativ einfach zu analysieren und ansprechend ist.

Aus diesem Grund enthalten die meisten Unternehmenswebsites normalerweise ein Bild mit einer Handlungsaufforderung auf dem Schieberegler.

Direkt darunter können Sie ein Funktionsfeld verwenden, in dem Sie wichtige Informationen zu Ihren Produkten und Dienstleistungen anzeigen können. Jede Feature-Box kann über eine eigene Handlungsaufforderungstaste verfügen, mit der Benutzer mehr erfahren können.

Hier ist ein konkretes Beispiel:Wie füge ich Feature-Boxen hinzu? WordPress-Symbol

So fügen Sie der Startseite Ihres WordPress-Blogs eine Feature-Box hinzu

Als erstes müssen Sie das Plugin installieren und aktivieren Erweiterte WP Columns. Weitere Einzelheiten finden Sie in unserem Leitfaden auf Wie installiere oder füge ich ein Plugin in WordPress hinzu?

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Nach der Aktivierung des Plugins müssen Sie auf die " Einstellungen> Erweiterte WP-Spalten Plugin konfigurieren.

Sie müssen nur nach unten zur Option "Scrollen" scrollen. Spalte Klasse Und geben Sie einen Text wie 'mycolumns' ein (Wir kommen wieder). Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.

colclass

Dann müssen Sie nur noch SVG-Symbole zu Ihren Feature-Boxen hinzufügen. Dazu lade ich Sie ein, das Plugin zu installieren und zu aktivieren WP SVG Icons.

Sie können jetzt Ihre Feature-Boxen erstellen. Sie können beginnen, indem Sie die Seite ändern, auf der das Funktionsfeld angezeigt werden soll.

Sie werden zwei neue Optionen im Post-Editor bemerken. Mit dem ersten können Sie ein Symbol hinzufügen, das sich über der Editor-Symbolleiste befindet. Die zweite befindet sich in der Symbolleiste des visuellen Editors.

Wenn Sie diese Option nicht sehen können, müssen Sie die Symbolleistenschaltflächen erweitern.

newbuttons

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Das erste, was Sie tun müssen, ist auf die Schaltfläche " Erweiterte WP Columns". Daraufhin wird ein Popup angezeigt, auf das Sie klicken können "Leer" und wählen Sie die Anzahl der Spalten aus, die Sie hinzufügen möchten.

Erstellen-SpaltenSie können auf jeden Bereich klicken und beliebigen Text hinzufügen. Wenn Sie jetzt keinen Text hinzufügen, können Sie den Unterschied zwischen den Spalten später nicht mehr erkennen. Wenn Sie fertig sind, klicken Sie auf " Spalten hinzufügen Unten.

Sie werden feststellen, dass die Spalten im visuellen Editor hinzugefügt wurden. Der nächste Schritt ist das Hinzufügen von Symbolen über dem Text.

Nehmen Sie den Cursor und fügen Sie ihn am Anfang des Textfelds hinzu. Fügen Sie dann einen neuen Zeilenumbruch hinzu. Dadurch wird ein neuer Bereich hinzugefügt, in dem Sie das Symbol hinzufügen können. Klicken Sie nun auf die Schaltfläche " Hinzufügen neuer Icon“, Und Sie sehen ein neues Fenster, in dem Sie ein Symbol auswählen können.

addingicons

In diesem Fenster können Sie das Symbol auswählen, das Sie hinzufügen möchten. Klicken Sie dann auf die Schaltfläche "span", damit Ihr Inhalt im Element " " hinzugefügt wird .

Klicken Sie abschließend auf die Schaltfläche Symbol einfügen“, Sie werden feststellen, dass das SVG-Symbol im Editor hinzugefügt wurde. Abhängig vom Namen des Symbols sieht der Shortcode folgendermaßen aus:

[wp-svg-icons icon = "Rakete" wrap = "span"]

Wiederholen Sie den Vorgang jedes Mal in den anderen Feldern. Wenn Sie fertig sind, vergessen Sie nicht, Ihre Einstellungen zu speichern.

Sie können den Auftrag jedoch beenden, wenn Sie feststellen, dass die Symbole sehr klein sind.

featureboxes-Small

Sie müssen lediglich CSS-Code hinzufügen, um das Problem zu beheben. Hier ist ein Beispiel für CSS-Code, den Sie der Stildatei Ihres untergeordneten Themas hinzufügen können.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

span.wp-svg-rocket.rocket {font-size: 100px; Span.wp-svg-cloud.cloud} {font-size: 100px; } Span.wp-svg-headphones.headphones {font-size: 100px; .mycolumns} {border: solid 1px #EEE min-height: 250px; padding-top: 20px wichtig; }

Denken Sie daran, dass die Symbolklasse mit der von Ihnen hinzugefügten übereinstimmen muss. In diesem Fall habe ich die folgenden Symbole verwendet: Rakete, Wolke, Kopfhörer.

featureboxesfinal

Denken Sie daran, dass wir ein Tutorial geschrieben haben, das es Ihnen ermöglicht Verbessern Sie Ihre CSS-Kenntnisse. Sie können auch eine erweiterte Builder-Seite wie Visual Composer verwenden, für die wir a geschrieben haben ziemlich detailliertes Tutorial.

Das war's für dieses Tutorial. Ich hoffe, es hilft Ihnen dabei, einige gute Feature-Boxen in Ihrem WordPress-Blog zu erstellen. Fühlen Sie sich frei, dieses Tutorial mit Ihren Freunden zu teilen. Ich nutze diese Gelegenheit, um Ihnen die besten Wünsche des gesamten BlogPasCher-Teams zu senden.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie
tweet
Registrieren2