WordPress-Anfänger: Anpassung auf mittlerer Ebene

Um über die einfachen Grundlagen in meinem letzten WordPress-Einsteiger-Blog hinauszugehen, habe ich in den letzten Wochen daran gearbeitet, eine unserer ProteusThemes-Demoseiten neu zu erstellen. Die Demo des Auto-Themas, um genau zu sein. Wie zuvor stellen mir meine Kollegen Schritt für Schritt Aufgaben, um mich auf den Weg zu bringen. Das sind die wichtigsten Lektionen, die ich bisher gelernt habe.

Icon-Boxen

Icon Box-Widgets sind ein sehr praktisches Stück visueller Sprache . Es mag offensichtlich erscheinen, aber die Telefonnummer Ihres Unternehmens neben einem Telefonsymbol zu haben, ist eine einfache, aber effektive Möglichkeit, die Benutzerfreundlichkeit Ihrer Website zu verbessern .

Meine Aufgabe war es, die Iconboxen in den Header der Homepage einzufügen. Um dies zu tun, müssen Sie in Ihrem Dashboard zu Darstellung -> Widgets gehen und dann in den „Design- Seitenleisten “ „ Kopfzeile “ auswählen.

Sobald Sie „ Kopfzeile “ gefunden haben, richten Sie Ihre Aufmerksamkeit auf die linke Seite des Bildschirms, wo Sie eine Liste der „ verfügbaren Widgets “ sehen. ProteusThemes: IconBox ist das gesuchte Widget.

Jetzt haben Sie zwei Möglichkeiten . Sie können das Widget entweder per Drag & Drop auf die rechte Seite des Bildschirms ziehen und in der Kopfzeile platzieren, oder wenn Sie auf das Widget klicken, sehen Sie ein Dropdown-Menü mit den zutreffenden Positionen. Sie können hier einfach „ Kopfzeile “ auswählen Liste und klicken Sie auf die blaue Schaltfläche „ Widget hinzufügen “:

Sie werden nun sehen, dass innerhalb des Widgets viele Symbole zur Auswahl stehen, für diese Übung habe ich das Telefon gewählt. Sie müssen der Icon Box lediglich einen Titel geben und entscheiden, welche Informationen daneben angezeigt werden sollen.

Unter allen Symbolen im Widget-Menü sehen Sie eine Option zum „ Hervorheben dieses Widgets “. Kreuzen Sie dieses Kästchen an, wenn die Informationen in der Icon Box besonders wichtig sind und Sie möchten, dass sie stärker hervorstechen.

Startseiten-Schieberegler

Die Neuerstellung der Autodemo erforderte das Hinzufügen eines Schiebereglers als Funktion auf der Homepage. Wählen Sie dazu Seiten -> Alle Seiten -> Startseite ; Sobald Sie sich im Editor für Ihre Homepage befinden, müssen Sie das Dropdown-Menü „ Seitenattribute “ auf der rechten Seite des Bildschirms finden. Suchen Sie das und ändern Sie die „ Vorlage “ in „ Startseite mit Schieberegler “.

Sobald Sie zu „ Front Page With Slider “ gewechselt haben, wird am unteren Rand des Bildschirms ein neues Meta mit dem Titel „ Front Page Slider “ angezeigt. Klicken Sie hier, um Ihre Bilder und Ihren Text zum Slider hinzuzufügen:

Kurzwahlen

Die Neuerstellung des Titelseiten-Sliders bringt uns schön in die Shortcodes . Wieso den? Denn auf der Auto-Demo, die ich neu erstelle, gibt es Schaltflächen innerhalb des Schiebereglers .

An dieser Stelle ist es wichtig zu betonen, dass Sie wirklich die empfohlenen Plugins installieren müssen. Der Fehler, den ich gemacht habe, war, den Shortcode in den 'Folientext' einzufügen, ohne das ProteusThemes Shortcodes- Plugin aktiviert zu haben. Wenn Sie das Plugin nicht aktiviert haben, wird der Code selbst im Schieberegler angezeigt und nicht die Schaltfläche, die Sie erstellen möchten.

In der Dokumentation aller unserer Themen gibt es einen Abschnitt „Shortcodes“, der Ihnen viele verfügbare Optionen für den Stil und die Funktionalität von Schaltflächen bietet, die Sie einfügen können. Alles, was Sie tun müssen, ist diesen Code zu kopieren und in den Abschnitt „Folientext“ des Schiebereglers einzufügen. Bearbeiten Sie einfach den Text der Schaltfläche innerhalb des Codes , um ihn Ihren Anforderungen anzupassen, und schon kann es losgehen.

Sie können Shortcodes natürlich auch an anderen Stellen als nur dem Schieberegler verwenden. Wenn Sie beispielsweise ein Stück Content-Marketing geschrieben haben, um zu versuchen, etwas zu verkaufen, verwenden Sie die Shortcodes, um einen effektiven CTA-Button am Ende Ihres Blog-Posts zu erstellen.

Seitenersteller

Sich mit dem Page Builder-Plug-in von SiteOrigin vertraut zu machen, war bei der Neuerstellung der Auto-Demo absolut entscheidend . Die erste Aufgabe, für die ich es verwenden musste, war die Erstellung dieser IconBox mit Popover- Abschnitt unter der Kopfzeile der Homepage:

Gehen Sie dazu auf die Seite, die Sie bearbeiten möchten, in meinem Fall die Startseite. Dann müssen Sie das Seitenerstellungsmenü finden , es sieht so aus:

Wählen Sie hier „ Zeile hinzufügen “. Sie sehen dann Optionen, die sich auf die Spalten innerhalb dieser Zeile beziehen. Sie können auswählen, wie viele Spalten Sie möchten, ihr Größenverhältnis und ob Sie sie in der Reihenfolge der Größe von links nach rechts oder umgekehrt haben möchten. Für mein IconBox-Popover habe ich 3 gleich große Spalten ausgewählt.

Nachdem Sie Ihre Spalten fertig haben, können Sie damit beginnen, ihnen Funktionen hinzuzufügen , indem Sie Widgets hinzufügen. Klicken Sie dazu auf die Spalte, zu der Sie etwas hinzufügen möchten. Sobald die Spalte ausgewählt ist, klicken Sie im Menü oben auf die Schaltfläche „ Widget hinzufügen“.

Je nachdem, welches Widget Sie auswählen, können Sie der Spalte weitere Funktionen hinzufügen. In meinem IconBox-Popover „ Öffnungszeiten “ war es beispielsweise notwendig, das ProteusThemes Opening Time- Widget innerhalb des IconBox-Popovers hinzuzufügen, damit die relevanten Informationen im Popover angezeigt werden, wenn auf die Spalte geklickt wird.

Ein Problem, das ich hatte, nachdem ich diese Reihe von IconBox-Popovern erstellt hatte, war, dass die Reihe nicht die gleiche Farbe wie die Auto-Demo hatte und sich auch nicht über die volle Breite meiner Seite erstreckte. Es ist einfach, diese Art von Problemen zu lösen. Bewegen Sie zuerst den Mauszeiger über das kleine Schraubenschlüssel-Symbol über Ihrer Zeile und wählen Sie dann „ Zeile bearbeiten “. Um die Farbe zu ändern, wählen Sie im nächsten Schritt „ Design “ aus dem Menü „ Zeilenstile “. Hier können Sie die Farbe und andere Designoptionen ändern.

Um die Größe Ihrer Zeile zu ändern, wählen Sie zunächst „ Layout “ aus dem Menü „ Zeilenstile “. Dadurch haben Sie die Möglichkeit, der Zeile eine Auffüllung hinzuzufügen. Wenn Sie dann möchten, dass sich die Zeile über die gesamte Breite Ihrer Seite erstreckt, wählen Sie das Dropdown-Menü „ Zeilenlayout “ und dann „ Volle Breite “ aus.

Ich habe Page Builder auf genau die gleiche Weise verwendet, um diese vorgestellten Seitenspalten zu erstellen:

Anstatt das Iconbox mit Popover-Widget zur Spalte hinzuzufügen, habe ich dazu das ProteusThemes: Featured Page- Widget gewählt. Sie sollten ein gutes Spiel damit haben, verschiedene Widgets in Spalten einzufügen, um wirklich eine Vorstellung davon zu bekommen, wie nützlich der Seitenersteller für Sie sein wird.

Das wird jetzt alles sein. Werfen Sie einen Blick auf meinen vorherigen Beitrag, um weitere grundlegende Tipps zu erhalten. Klicken Sie unten, um unseren Newsletter zu abonnieren und erhalten Sie diese Art von Inhalten und vieles mehr direkt in Ihren Posteingang …

ABONNIERE JETZT