So passen Sie Ihre WordPress-Site an, ohne CSS verstehen zu müssen

Wir zeigen Ihnen, wie Sie an Ihren WordPress-Websites ernsthafte visuelle Änderungen vornehmen können, ohne dass Sie zuvor auf CSS-Erfahrung zurückgreifen müssen. Aber zuerst nehmen wir uns eine Minute Zeit für eine kleine WordPress-Wertschätzung.

Alte WordPress-Schnittstelle

Merk dir das? So sah WordPress aus, als wir uns zum ersten Mal in es verliebten. Elf Jahre später sind wir immer noch verliebt, aber (zum Glück) hat sich so viel verändert, dass es kaum erkennbar ist.

Von der einfachen Blogging-Plattform bis zum weltweit populärsten Content-Management-System ist WordPress jetzt die Grundlage für Hunderttausende beliebter Websites, auf denen eine ganze Reihe von Entwicklern auf der Plattform arbeiten, und eine ganze Reihe von Entwicklern, die so viele Themen und Plug-ins erstellen Der Verkauf ist für viele Menschen ein Vollzeitjob. Themeforest ist wahrscheinlich der bekannteste Themenshop im Internet und bietet fast 20.000 Themen, von denen eine große Mehrheit für WordPress bestimmt ist. Um dies in die richtige Perspektive zu rücken, könnte man 54 Jahre lang jeden Tag eine völlig andere Website haben!

Es wäre schwierig, ein vergleichbares Produkt zu finden, das kostenpflichtig oder kostenlos ist und für das es so einfach istNicht-Codierer können so problemlos von Null auf eine voll funktionsfähige Website wechseln.

In den letzten Jahren ist die Anpassung an WordPress noch einfacher geworden, dank der wachsenden Anzahl von Seitenerstellern, die Benutzern dabei helfen, ihre eigenen Entwürfe mühelos zusammenzustellen. Kombinieren Sie diese leistungsstarken Architektur-Tools mit der wachsenden Liste an Plug-Ins für Sicherheit, Freigabe und Kommentierung. Es ist sehr einfach, die Site zu erstellen, die Sie schon immer gewünscht haben.

Alles, was oben erwähnt wurde, bringt Ihnen 90% des Weges. alle Inhalte, die Sie benötigen, auf einer Plattform, der Sie vertrauen; Fast perfekt, dank der harten Arbeit der Entwickler, die tolle Themen und Plugins erstellen.

Aber selbst mit den besten Themen möchten Sie immer kleine Änderungen vornehmen. Kleine visuelle Änderungen, um ein Thema zu Ihrem zu machen, anders als alles andere. Ob es darum geht, Ecken abzurunden, Grenzen zu verstärken oder den Schatten um ein Objekt zu ändern - diese Änderungen machen ein großartiges Thema perfekt.

Alle oben genannten Änderungen betreffen:Anpassen von CSS. Einfach genug, wenn Sie Designer oder Entwickler sind, aber gerne die Matrix lesen möchten, wenn Sie es nicht sind.

Bei CSS-Änderungen wurden normalerweise Tools verwendet, die für Entwickler entwickelt wurden, beispielsweise Tools Browserinspektoren das relevante finden CSS-Selektoren und manuell manipulieren. Sie müssen das CSS dann als Text kopieren und in einen Texteditor einfügen, um sicherzustellen, dass es nur die erforderlichen Informationen enthält und keine Browseroptionen wie Kontrollkästchen oder Namen von Stylesheets ausgewählt hat. Sie erstellen dann entweder ein untergeordnetes Design für Ihre WordPress-Site und kopieren es dort oder verwenden die benutzerdefinierten CSS-Boxen, die jetzt mit so vielen Designs geliefert werden. Das ist ein sehr langer Prozess. Mit so vielen Schritten wird Ihre Fehlerquote erheblich erhöht und die Fehlerbehebung kann sehr zeitaufwändig sein.

Einführung in CSS Hero

So wie die Seitenersteller die Struktur einer WordPress-Site vereinfacht haben, ermöglicht CSS Hero die visuelle Bearbeitung. Als Nicht-Designer sehen Sie vielleicht in eine Ecke und denken, "machen Sie es gekrümmt, es kann nicht so schwer sein", aber dann überprüfen Sie den Code, der für diese Änderung erforderlich ist, und es ist entmutigend.

Die CSS Hero-Benutzeroberfläche

Die Verwendung von CSS Hero fühlt sich eher wie die Verwendung von Photoshop oder eines ähnlichen Produkts an. Mithilfe von Schiebereglern können Sie beispielsweise Polsterung, Ränder, die Schärfe von Ecken und Schriftgrößen anpassen. Mit Farbpaletten können Sie die Standardoption anpassen, um sie Ihrem Markenthema und -stil besser anzupassen.
Selbst erfahrene Designer und CSS-Gurus schätzen die benutzerfreundliche Echtzeitschnittstelle. Es macht die Sache einfach ruhiger, schneller und einfacher einzustellen.

Wie einfach? So einfach wie ein Plugin installieren.

CSS Hero wird nicht mit einer langen Bedienungsanleitung ausgeliefert, da Sie diese nicht benötigen. Wir zeigen Ihnen, wie Sie Ihre Website in wenigen Minuten anpassen können.

Loslegen

CSS Hero Riegelknopf

Jede Anpassung beginnt mit dem Klicken eines blauen Blitzes. Dadurch wird das CSS-Hero-Menü mit Anpassungen direkt am Frontend Ihrer Website geöffnet, ohne das Dashboard durcheinanderzubringen, Änderungen vorzunehmen und dann nach hinten zu schauen, wie sie aussehen. Beobachten Sie die Änderungen, während Sie sie durchführen.

Was Sie mit dem CSS machen, liegt ganz bei Ihnen, lassen Sie es in CSS Hero und es funktioniert wie ein Zauber, ohne dass weitere Aktionen erforderlich sind. Sie können es auch in eine kopierenKind Thema oder Ihr benutzerdefiniertes CSS-Panel. Dein CSS, deine Regeln. Lassen Sie uns direkt in die Bearbeitung springen!

Schweben, Ziel, Ändern

Für diese Demonstration verwenden wir das Divi-Theme von Elegant Themes. Dies ist eines von Dutzenden von Hero-Ready-Themen (das heißt, wir haben alle Selektoren hinzugefügt, die erforderlich sind, damit es sofort funktionieren kann). Wenn Sie kein Hero-Ready-Design verwenden, können Sie Ihre eigenen Klassen und IDs direkt in CSS Hero hinzufügen oder verwenden Raketenmodus, aber dazu kommen wir später.

Mit der Ausnahme, dass wir ein paar Seiten und einen Blogeintrag hinzugefügt haben, haben wir mit Divi so ziemlich 'as is' angefangen. Wir möchten Ihnen zeigen, was CSS Hero zu einem neuen Thema macht. Wir verwenden einen Blogbeitrag als Beispiel, weil dies standardmäßig der einfachste Teil von Divi ist. Es ist der einzige Abschnitt, in dem Sie den integrierten Seitenersteller nicht verwenden können. Daher möchten Sie hier unbedingt Ihren Browser hinzufügeneigene persönliche Note.

Ändern Sie das Header-Design.

Zuerst wollen wir den Header ändern - er ist sehr flach - außer für eine dünne graue Linie darunter ist sehr wenig los. Wir werden CSS Hero verwenden, um darunter einen Schlagschatten hinzuzufügen und ihn von der Seite zu heben. CSS Hero bietet eine Reihe von Optionen zum Hinzufügen verschiedener Arten von Schlagschatten, die alle angepasst werden können, um den gewünschten Effekt zu erzielen.

Box Schatten

Als Nächstes ändern wir die Farbe ganz leicht in weiß. Sie können die eingebaute Farbauswahl verwenden, um diese Änderungen vorzunehmen. Wenn Sie ein Farbschema verwenden, können Sie nur die RGBA- oder HEX-Werte eingeben. Beide werden unterstützt und sind einfach einzugeben.

Ändern Sie die Hintergrundfarbe des Headers

Als Nächstes werden wir den Body-Bereich des Blogs anvisieren, indem Sie darauf klicken, damit CSS Hero uns die verfügbaren Optionen anzeigen kann. Von hier aus ändern wir die Hintergrundfarbe in ein dunkleres Grau. Jetzt ist unsere Kopfzeile hervorzuheben und sobald wir die zusätzlichen Änderungen vorgenommen haben, gilt dies auch für den Inhalt und die Seitenleiste.

Wenn Sie den Hintergrund des linken Bereichs in Weiß ändern, wird er wirklich von der Seite entfernt. Die Farbe wird jedoch am Rand etwas verdünnt, so dass wir einen dunklen Rand mit nur 1 Pixel Dicke erhalten. Eine kleine Anpassung des Randradius verleiht dem Abschnitt eine schöne Kurve, und durch das Anpassen der Polsterung wird eine schöne Umrandung des Inhalts erzielt.

Wir haben die Titelschriftarten in geändert Helvetica. Eine von über 100 Google-Schriftarten, die in CSS Hero im Dropdown-Menü für Schriftarten angezeigt werden. Wenn Sie jedoch eine der anderen über 550 Google-Schriftarten hinzufügen möchten, ist das ganz einfach.

Ändern Sie die Schriftart: HelveticaÄndern Sie den Hintergrund in Grau1px Rand hinzufügenHinzufügen von 20px PaddingRandradius hinzufügen

Ändern Sie die Größe des angezeigten Bildes

Standardmäßig fügt Divi das vorgestellte Bild aus einem Blogbeitrag in voller Breite unter dem Titel hinzu. Dies nimmt viel Platz über dem Falz ein und drückt den Text aus dem Blickfeld. Wir haben CSS Hero verwendet, um die Breite auf 50% zu ändern und das Bild nach rechts zu verschieben. Indem Sie das Neue einstellen Höhe des Bildes zu Auto Das Seitenverhältnis wurde beibehalten, und das Bild sieht auf allen Geräten perfekt aus. Wir haben auch ein bisschen hinzugefügt Polsterung auf das Bild, damit der Text nicht direkt daneben sitzt. Das Hinzufügen von leicht gekrümmten Ecken mit dem Schieberegler für den Grenzradius in CSS Hero war alles, was erforderlich war, um dieses Bild perfekt aussehen zu lassen.

Ändern Sie die Größe des angezeigten Bildes und fügen Sie einen Randradius hinzu

Ein paar andere kleine Änderungen mit CSS Hero, darunter die Aktivierung des Metatexts, das Ändern der Farbe und des Randes der Schaltfläche "Kommentar einreichen", und wir sind sehr zufrieden mit dem Aussehen des linken Abschnitts. Wenn wir es mit dem Aussehen vergleichen, wie es zuvor aussah, können Sie feststellen, dass innerhalb von Minuten eine erhebliche Verbesserung erzielt wurde.

Meta sind jetzt in Großbuchstaben

Die Seitenleiste

Wir sind dann zur Seitenleiste weitergegangen, die standardmäßig wieder ganz normal ist. Durch die Verwendung der gleichen Techniken, die auch für die Bearbeitung des linken Abschnitts verwendet wurden, konnten wir schnell einen gekrümmten Rand und einen dunklen Hintergrund anwenden, die diesem Abschnitt helfen, von der Seite zu springen. Wir haben die Titelschriftarten an unsere aktuellen Anpassungen angepasst und ihnen eine blasse Farbe verliehen, um sie vor dem dunklen Hintergrund hervorzuheben.

Wir haben die Verbindungsfarben geändert, um sie heller zu machen, und haben sie gezielt anvisiert, wenn der Benutzer eine andere Farbe wählt. Wir haben das Standard-Elektroblau los und haben etwas mehr zum Thema. Wenn Sie möchten, können Sie auch eine andere Farbe einstellen aktiv Links und Links, die gewesen waren hat besucht in der Vergangenheit mit CSS Hero.

Die Seitenleiste

Was haben wir gerade gemacht??

Mit dem Hilfsprogramm "CSS Hero Export" können wir auf der Codeseite auf unserer Website sehen, was wir gerade erstellt haben.

Dies kann für diejenigen hilfreich sein, die sich mit CSS vertraut machen möchten, und auch für Entwickler, die den generierten Code nur exportieren und an beliebiger Stelle kopieren und einfügen möchten.

Fragment des gesamten CSS, generiert von CSS Hero

Der CSS-Heldinspektor

Sie können sogar unser neues Inspektor-Tool verwenden, um das erstellte CSS zu überprüfen und sich mit den Änderungen vertraut zu machen. Mit dem Inspector können Sie auch kleine Änderungen an Ihrem CSS vornehmen, z. B. das Anpassen der Schriftgröße, der Kurve oder der Stärke eines Rahmens oder etwas anderes. Je komfortabler Sie mit CSS sind, desto nützlicher wird das Inspector-Tool.

Alles in allem dauerten diese Anpassungen etwas mehr als fünf Minuten. Fünf Minuten, um fast alle Elemente des Blogposts vollständig zu ändern. 

Hero Ready, Konfiguration und Raketenmodus

Held bereit Themen sind gut, um aus dem Kasten heraus zu gehen, wie zuvor besprochen. Die meisten der beliebten WordPress-Themes sind heroisch, einschließlich Generatepress, Enfold, Genesis-Framework, Pagelines DMS, WooCommerce-Plugin und LayersWP.

Dies bedeutet, dass keine Konfiguration erforderlich ist. Ist dies jedoch der Fall, ist das ebenfalls einfach. Es gibt zwei Wege, um darauf einzugehen.

Raketenmodus

Im Rocket-Modus wird ein relativ neues Feature, das uns recht beliebt ist, automatisch das Stylesheet Ihres Themas nach gültigen Selektoren durchsuchen. Sobald Sie sie gefunden haben, werden sie zu CSS Hero hinzugefügt, und Ihr nicht-heroisches Ready-Theme kann ohne weitere Konfiguration extrem gut funktionieren. Wenn das Thema aus irgendeinem Grund nicht mit dem Rocket-Modus kompatibel ist, können Sie Ihre Selektoren mit dem integrierten Konfigurationstool hinzufügen.

Hinzufügen von Klassen und IDs zu CSS Hero

Der Schnellkonfigurator

Wenn Sie die Klassen und IDs kennen, die Ihr Design verwendet, können Sie diese manuell zu CSS Hero hinzufügen und sie wie jedes andere Element in einem hero-ready-Design anvisieren. Benötigen Sie Hilfe bei der Suche? Probieren Sie das Element inspect element in den meisten Browsern aus oder durchsuchen Sie das Stylesheet Ihres Themas nach Punkten, die mit einem Punkt (.) Oder einem Hashtag (#) davor stehen. Alternativ enthalten die meisten High-End-Themen Dokumentationen entweder innerhalb des Themas selbst oder auf ihrer Website mit den relevanten Selektoren, die Sie benötigen.

Seitenersteller, Plugins und CSS-Helden

Wir haben oben auf die strukturellen Vorteile der Verwendung eines Seitenerstellers hingewiesen, um das Erstellen von Seiten in WordPress zu beschleunigen bzw. zu vereinfachen. Aber Sie wollen trotzdem kontrollieren, wie sie aussehen, oder? Dasselbe gilt für Plugins, die Formulare erstellen, Tabellen hinzufügen usw.
Dies ist einer der Gründe, warum wir beim Erstellen von CSS Hero nicht nur über Themen gesucht haben. Sie können es sofort verwenden, genau wie beim Bearbeiten der Blogseite, mit einer Reihe cooler WordPress-Ressourcen. Beaver Builder, ein sehr beliebter Seitenersteller, ist vollständig mit CSS Hero kompatibel, ebenso wie Visual Composer und Contact Form 7. Überprüfen Sie, ob die verwendeten Plugins hier kompatibel sind.

So, das war es! Ohne CSS (oder eine andere Programmiersprache für diese Angelegenheit) zu kennen, können Sie eine vollständig ansprechende, stark angepasste WordPress-Website erstellen. Wenn Sie CSS-Hero verwenden oder etwas erstellt haben, teilen Sie uns dies bitte in den Kommentaren mit. Wir würden es gerne sehen!