UpFront 4: Optimieren von Elementen mit benutzerdefiniertem Code

Manchmal reicht es einfach nicht aus, was Elemente standardmäßig bereitstellen. Vielleicht möchtest Du Deinem Slider zusätzlichen Glanz verleihen, oder vielleicht deutet der Stil Deiner Webseite darauf hin, dass das Tabs-Element wirklich eine Textur für den Hintergrund vertragen könnte?

Heute zeige ich Dir, wie Du Deine eigenen wiederverwendbaren UpFront-Elementstile erstellen und Codeausschnitte bereitstellen, mit denen Du eigene Änderungen vornehmen kannst.

Du wirst sehen, wie UpFront die Erfahrung der Änderung des CSS Deiner Themes vollständig verändert, indem es in den Kontext gestellt und die Layouts dynamisch aktualisiert, um Deine Änderungen widerzuspiegeln. Es macht die Erfahrung, Dein Theme mit CSS zu erweitern, erstaunlich einfach, indem es direktes Feedback zu Deinen Eingaben gibt.

Dies ist der vierte Beitrag in unserer Serie, in dem wir die Verwendung von UpFront vorstellen. Wir passen ein bestehendes UpFront-Theme – in diesem Fall Spirit – an und verwandeln es in eine völlig andere Website, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten und responsivem Layout.

Im Laufe dieser Serie werden wir Dir anhand vieler Beispiele zeigen, wie Du UpFront verwenden kannst:

Wir nehmen das Spirit-Theme und überarbeiten seine Regionen und Inhalte komplett und verwandeln es in ein Produktthema, komplett mit eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und anderen Elementen.

Bisher haben wir in dieser Serie Designfarben aktualisiert, benutzerdefinierte Schriftarten hinzugefügt, Bereiche gelöscht, das Headerbild aktualisiert und einen Videobereich in voller Breite hinzugefügt. Hier ist ein Blick auf unsere bisherigen Fortschritte:

Links unser Fortschritt. Auf der rechten Seite, worauf wir hinarbeiten.

Optimieren von Elementen mit benutzerdefiniertem CSS

Beginnen wir damit, einige unserer vorhandenen Designstile (zwei Blockzitate und Linkstile) mithilfe des Code-Elements zu verbessern, um eine horizontale Trennlinie zu erstellen, und fügen dann einige animierte Übergänge zu unseren Schaltflächen, Bildbeschriftungen und Galerieminiaturansichten hinzu.

In diesem Beitrag verwende ich CSS-Eigenschaften ohne Präfix für Klarheit / Benutzerfreundlichkeit. Ich empfehle Dir dringend, einen Dienst wie Pleeease zu verwenden, um Präfixe automatisch zu generieren und sicherzustellen, dass Dein Code browserübergreifend kompatibel ist. Füge einfach Deinen Code ohne Präfix in den linken Bereich ein und kopiere das Ergebnis aus dem rechten Bereich.

Verbesserung unserer globalen Typografie

Bis zu diesem Punkt in dieser UpFront-Serie waren wir darauf beschränkt, unsere Typografie über Themeneinstellungen > Typografie zu ändern.

Normalerweise reicht das aus, um die grundlegende typografische Struktur zu sortieren. Aber wir wollen noch einen Schritt weiter gehen. Derzeit verwenden unsere Blockquotes die gewünschten Schriftarten und Farben, aber das Symbol „doppelte Anführungszeichen“, das im Spirit-Thema verwendet wird, bleibt erhalten.

Lasse uns unsere eigenen Blockquote-Stile mit benutzerdefiniertem CSS erstellen. Klicke in der Seitenleiste „Theme-Einstellungen“ > Typografie auf Benutzerdefinierte CSS-Regeln hinzufügen. Dadurch wird ein Code-Panel am unteren Bildschirmrand mit zusätzlichen CSS-Regeln angezeigt, die in Spirit verwendet werden. Die Zeilen 12 bis 34 sind für die Gestaltung von Blockquotes zuständig. Lasse uns sie löschen und unseren eigenen Code hinzufügen:

Das ist ziemlich einfaches CSS, aber was ist das #ufc3 Ding? Das ist keine gültige hexadezimale Farbe, würdest Du sagen, und Du hättest absolut Recht.

In der Tat ist #ufc3 eine eingebaute UpFront-Variable. Auf diese Weise kann ich Designfarben, die wir im ersten Artikel dieser Reihe definiert haben, innerhalb des Code-Elements verwenden.

Farbvariablen beginnen mit 0 und gehen zu 9, um sich also auf die erste von Dir definierte Designfarbe zu beziehen, würdest Du #ufc0, für die zweite Designfarbe #ufc1 usw. verwenden. Der Rest des Codes ist ziemlich üblich. UpFront kommt mit zwei Blockquote-Stilen blockquote; Wir verwenden den Selektor, um den ersten zu stylen, und für den alternativen Blockquote-Stil blockquote.upfront-quote-alternative.

Jetzt zeige ich Dir einen kleinen CSS-Trick, um unser erstes Blockzitat ein bisschen mehr wie eine Sprechblase aussehen zu lassen. Füge den folgenden Code zu Deinen Blockquote-Stilen hinzu:

Hier verwenden wir :after, das ein Pseudo-Element ist, und es ist ein extrem mächtiges Werkzeug in Deinem CSS-Arsenal. Es gibt einen hervorragenden Artikel von Chris Coyier (dem Du wirklich auf Twitter folgen solltest) über coole Dinge, die Sie mit Pseudoelementen machen können.

Nun, da wir unsere Blockquotes gestaltet haben, fügen wir etwas Code hinzu, um unsere Inline-Links etwas interessanter zu machen:

Stil Eins

Zweiter Stil

Stil Drei

Stil Vier

Im Folgenden findest Du ein Beispiel für jeden der vier zusätzlichen Link-Stile in Aktion. Wähle das gewünschte aus und füge es Deinem globalen CSS hinzu.

See the Pen
UpFront Global CSS by DerN3rd (@Dernerd)
on CodePen.

Wie Du siehst, kann mit nur wenigen Codezeilen die Standardtypografie erheblich verbessert werden.

Das Tolle an dieser Art von Erweiterbarkeit ist, dass Du den Code anderer Personen implementieren und auf Deiner eigenen Webseite verwenden kannst. Hier ist eine großartige Webseite, die ich mit einigen inspirierenden Inline-Link-Styling-Beispielen gefunden habe.

Anpassen von UpFront-Elementen

Genau wie bei der globalen Typografie kannst Du mit UpFront etwas tiefer graben und das Erscheinungsbild von Elementen anpassen und Deine Änderungen als wiederverwendbaren Stil speichern, den Du dann auf Elemente desselben Typs überall auf Deiner Webseite anwenden kannst.

Lasse uns dies weiter untersuchen, indem wir einen animierten Schaltflächenstil erstellen.

Ziehe ein neues Button-Element auf Deine Webseite, gehe dann in die Einstellungen und erstelle eine neue Vorgabe. Ich rufe meine NoFill an.

Lasse uns diesem Button einen 3px breiten Rahmen geben und eine unserer Themenfarben dafür auswählen (ich habe mich für das Grün entschieden, was für mich zufällig ist). Ich habe auch den Hintergrund transparent gemacht und dem Schaltflächentext die gleiche Farbe #ufc0 gegeben, die wir zuvor verwendet haben.

Für den Hover-Zustand habe ich alle Werte gleich gehalten, aber den Schaltflächentext weiß gemacht. Bevor wir fortfahren, klicken wir auf OK und speichern das Layout (denke immer daran, Deinen Fortschritt zu speichern!).

Jetzt haben wir zu diesem Zeitpunkt nur noch eine Schaltfläche, die Deine Textfarbe beim Bewegen ändert. Fügen wir die Magie hinzu. Gehe in die Einstellungen und die Voreinstellung, die Du gerade erstellt hast, sollte ausgewählt werden. Öffne das Bedienfeld CSS-Stile und Ankereinstellungen am unteren Rand des Einstellungsdialogfelds und klicke dann auf Neuen Stil hinzufügen. Dadurch wird ein vertrautes Code-Panel am unteren Rand des Browsers angezeigt. Du wirst feststellen, dass dieses im Gegensatz zum CSS-Panel für globales Theme den Abschnitt Verfügbare Elementselektoren: auf der linken Seite hat. Dieser Abschnitt ist für alle Elemente verfügbar und soll Dir beim Styling helfen, indem CSS-Selektoren für dieses Element bereitgestellt werden.

Noch einmal, ich werde hier nicht auf die Details eingehen, füge einfach den Code im Snippet unten zu Deinem Code-Bedienfeld hinzu, gib dem Stil einen Namen (ich habe mich für „Hover-Effekt“ entschieden) und klicke auf Speichern.

Bewege nun den Mauszeiger über Deine Schaltfläche und Du wirst sehen, dass sie jetzt einen animierten Effekt hat. Ziemlich cool, oder? Wenn Du nicht die Farbe erhältst, die Du für den Rahmen ausgewählt hast, kannst Du ihn im Code background-color:#ufc0; (Zeile 8, ) auf Deine gewünschte Farbvariable oder eine beliebige Farbe im Allgemeinen anpassen.

Hinzufügen einer Animation zur Bildelementbeschriftung

Lasse uns versuchen, eine Bildunterschrift zu animieren.

Füge Deinem Layout ein Bildelement hinzu und lade entweder ein neues Bild hoch oder wähle etwas aus dem Medienmanager aus.

Bewege als Nächstes den Mauszeiger über das Bild, um ein zusätzliches Feld zu erhalten, und klicke auf die dritte Option „Bildunterschriftposition“ und wähle die vierte Option „Titelbild Zentriert“ aus. Füge jetzt etwas Text hinzu, ein paar Zeilen reichen aus. Die Hintergrundfarbe der Beschriftung kann in den Elementeinstellungen geändert werden. Du kannst es auch so einstellen, dass nur die Beschriftung „On Hover“ angezeigt wird, obwohl ich vorerst empfehle, es so zu lassen, wie es ist, damit wir sehen können, was wir tun, während wir Code hinzufügen (außerdem wird der Code, den wir hinzufügen, dafür sorgen das die Bildunterschrift nur beim Hover sichtbar ist).

Gehe in das Bedienfeld „CSS-Stile“, erstelle einen neuen Stil und füge den Code aus dem folgenden Snippet hinzu:

Speichere nun Deinen Stil (ich habe meinen „Caption-Transform“ genannt) und speichere erneut das Layout. Du solltest es in Aktion sehen können, wenn Du den Mauszeiger über das Bild bewegst. Nicht schlecht, oder?

Du wirst feststellen, dass wir keine Farben im CSS verwendet haben, was bedeutet, dass Du den Untertitelhintergrund und die Textfarben immer noch über die Elementeinstellungen und die Textbearbeitung ändern kannst. Das bedeutet, dass Du eine Reihe verschiedenfarbiger Untertitel haben kannst, die dieses Verhalten verwenden.

Du wirst feststellen, dass ich meine Beschriftung so versetzt habe, dass sie 10 Pixel über und links vom Bild selbst beginnt. Das war meine stilistische Vorliebe. Wenn Du es vorziehst, dass die Beschriftung direkt über dem Bild platziert wird, musst Du Zeile 10 transform:translate(-10px,-10px);so ändern, dass sie so aussieht transform:translate(0px,0px);.

Hinweis: Vergiss nicht, dieses CSS über die zuvor erwähnte App zur Vorfixierung auszuführen. Normalerweise schreibe ich mein CSS ohne Präfix in UpFront und wenn ich mit dem Ergebnis zufrieden bin, führe ich es über die App aus. Ich finde, das ist der effizienteste Weg, um sicherzustellen, dass mein CSS korrekt ist.

Subtile Effekte zum Galerieelement hinzufügen

Ich möchte, dass meine Thumbnails standardmäßig etwas weniger undurchsichtig sind und 100 % Deckkraft und Zoom erhalten, wenn ich mit der Maus darüber fahre.

Ich habe meinen Stil „gallery-hover“ genannt und das folgende CSS hinzugefügt:

Und so sieht das Hinzufügen des Codes in Aktion mit UpFront aus:

Gestaltung der Navigation passend zu unserem Theme-Design.

Im vorherigen Beitrag dieser Serie (Teil 3: Gestalten der Webseite mit Elementen) haben wir das Erscheinungsbild der Navigation in der Kopfzeile in ein vertikales Layout geändert, sind jedoch nicht weiter darauf eingegangen.

Ich habe einen neuen Stil parrot-main-nav für meine Navigation erstellt und das folgende CSS hinzugefügt, das zu meinem Design passt:

Ich habe nur einen sehr einfachen Farbwechsel beim Schweben hinzugefügt, aber aus den Beispielen, die ich zuvor angegeben habe, bin ich sicher, dass Du zum Experimentieren inspiriert bist!

Es ist erwähnenswert, dass wir planen, in naher Zukunft eine grundlegende, codelose Erfahrung hinzuzufügen, damit Benutzer Farben für ihre Navigation auswählen können (ähnlich wie bei den Text- oder Tabs-Elementen).

Das Code-Element

Abschließend möchte ich kurz auf das Code-Element eingehen. In unserem Design haben wir sehr subtile, einzeilige Trennwände. Diese können auf verschiedene Arten erreicht werden, z. B. durch die Verwendung von Bildern oder das Festlegen von border-bottom auf das vorhergehende Element. Ich denke jedoch, dass der einfachste Weg darin besteht, das Code-Element zu verwenden und sie selbst zu erstellen.

Füge dazu Deinem Layout ein Code-Element hinzu, und wähle die Option Benutzerdefinierten Code schreiben aus. Du wirst feststellen, dass das bereitgestellte Code-Panel jetzt HTML-, CSS- & JS-Optionen enthält. Dies bedeutet, dass Du UpFront eine ganze Reihe von vollständig benutzerdefinierten Funktionen hinzufügen kannst, vorausgesetzt, Du kannst programmieren.

In späteren Artikeln werde ich einige mögliche Möglichkeiten zur Verwendung des Code-Elements zur Erweiterung der Funktionen Deiner Designs erläutern. Im Moment halte ich es jedoch einfach und verwende nur HTML- und CSS-Panels. Füge in Ihrem HTML-Bedienfeld den folgenden Code hinzu:

Füge dies dann zu Deinem CSS-Panel hinzu (wähle Deine eigene Farbe):

Klicke im Codefenster auf Speichern, schließe es und speichere Dein Layout. Du kannst mit der rechten Maustaste auf das Code-Element klicken und es klonen, wenn Du mehr Trennlinien in Deinem Layout benötigst.

Zusammenfassung

In diesem Beitrag haben wir gelernt, dass alles in UpFront mit nur wenigen Zeilen CSS bearbeitet werden kann. Ich habe auch die Flexibilität der Plattform und die großen Vorteile der Live-Code-Bearbeitung demonstriert, die UpFront mit sich bringt.

Wir haben auch gelernt, wie man CSS-Animationen zu den Gallery-, Image- und Button-Elementen hinzufügt, mit dem Styling von Links und Blockquotes experimentiert und unseren eigenen Teiler mit Code Element erstellt.

UpFront kann ein großartiger Begleiter für jeden sein, der lernt, wie man programmiert, aber wenn Du Dich auskennst, gibt es praktisch keine Grenzen für das, was Du erreichen kannst.

Lies den nächsten Beitrag in dieser Serie: Teil 5: Hinzufügen von Plugins und Formatieren von Gravity-Formularen

Wenn Du Fragen zu dem hast, was wir in diesem Beitrag behandelt haben, kannst Du gerne im Forum unten nachfragen.

[forum id=“4″]