WebMasterService N3rds@Work

6. UpFront Elemente

Wikis > UpFront Wiki > 6. UpFront Elemente

In UpFront sind Elemente die Bausteine Deines Layouts. Angefangen von Bild- und Galerieelementen bis hin zu komplexen Schiebereglern und Codeelementen findest Du alles, was Du zur Personalisierung Deiner Webseite benötigst, während sie alle Deine Anforderungen erfüllen.

elements_toolbox

Im folgenden Dokument werden die Grundlagen von Drag & Drop erläutert. Anschließend erhältst Du Beispiele für die Standardvoreinstellung jedes Elements, eine modifizierte neue Voreinstellung und in einigen Fällen ein benutzerdefiniertes CSS, das Du auf Deinen eigenen UpFront-Seiten verwenden kannst.

In den folgenden Elementbeispielen wird aus Gründen der Konsistenz alle “Möglichkeiten” verwendet. In jedem von Dir verwendeten UpFront-Startertheme findest Du jedoch ähnliche (wenn themenspezifische) Einstellungen.

6.1 Drag & Drop verwenden

Drag & Drop bietet die Grundlage für die Erstellung unendlicher Layouts in UpFront, die Deiner Vision für Deine Webseite entsprechen. Du kannst praktisch jedes Layout erstellen, indem Du Elemente in den Rasterbereich ziehst, ihre Größe änderst und ihr Erscheinungsbild und ihren Inhalt änderst. Beim Ziehen und Ablegen in Upfront wird die Logik “An Element ausrichten” verwendet. Dies bedeutet, dass jede Seite eines Elements im Layout als “Fangpunkt” fungiert.

Snap to element

Im Bild oben siehst Du, dass beim Ziehen eines Elements die Grenzen der Position sichtbar werden, an der Du es platzieren kannst. Wenn Du ein Element über beide Seiten des Rasterbereichs bewegst, wird eine dicke violette Linie erstellt, die angibt, wo sich das Element beim Loslassen befinden würde.

snap to element variations
In der Abbildung oben zeigt jede Spalte, was mit verschiedenen Ablagepunkten passiert und wo ein bestimmtes Element beim Loslassen „fallen“ würde.

Standardmäßig belegen abgelegte Elemente 100% der verfügbaren Breite, und wenn Du ein Element neben ein 100% breites Element legst, wird es in zwei Elemente gleicher Breite aufgeteilt. Wenn Du einer Zeile weitere Elemente hinzufügst, wird nach Möglichkeit eine Reihe von Elementen mit derselben Breite angezeigt. Die gleiche Logik wird angewendet, wenn Elemente aus einer Zeile entfernt werden.

Spacers

Wenn Du den Abstand zwischen benachbarten Elementen vergrößern möchtest, kannst Du dazu Abstandhalter dazwischen oder um diese herum einfügen. Beispielsweise möchtest Du möglicherweise ein Layout, bei dem ein Schiebereglerelement 18 Spalten breit und innerhalb des Layouts zentriert ist. Um dies zu erreichen, musst Du drei Spalten an der linken und rechten Seite des Schiebereglers einfügen. Dies kann durch Ziehen des linken und rechten Ziehpunkts zur Größenänderung erfolgen. Dies funktioniert auch für einzelne Elemente, aber was ist, wenn es solche gibt? zwei 12 Spalten breite Schieberegler nebeneinander und Du möchtest, dass jeder Schieberegler auf jeder Seite einen Spalt von einer Spalte hat (links und rechts)? In diesem Szenario kannts Du weiterhin die Ziehpunkte für die Größenänderung verwenden, um Platz zwischen dem Rand des Layouts und den Schiebereglern zu schaffen. Du musst jedoch auch einen Abstandhalter zwischen den beiden Elementen erstellen. Dies kann erreicht werden, indem Sie den Mauszeiger über den Größenänderungsgriff zwischen den Elementen bewegst und auf das angezeigte Symbol „+“ klickst. Die folgenden Bilder zeigen, wie Abstandshalter funktionieren.

spacer elements in upfront
Um einen Abstandshalter zu entfernen, klappen Sie ihn einfach mit demselben Griff zur Größenänderung zusammen.

Zum größten Teil funktioniert die Spaltenfanglogik sehr gut. Es gibt jedoch Fälle, in denen eine Problemumgehung möglicherweise vorzuziehen ist. Stelle Dir zum Beispiel dieses Szenario vor: Du hast ein dreispaltiges Layout mit Bild- und Textelementen in jeder Spalte erstellt, ein im Web sehr verbreitetes Szenario. Jetzt möchtest Du jeder Spalte eine Schaltfläche hinzufügen, aber nicht, dass die Schaltfläche 100% der Spaltenbreite einnimmt. Es gibt zwei Möglichkeiten, dies zu erreichen. Eine Möglichkeit besteht darin, die Schaltflächen am unteren Rand jeder Spalte auszurichten und dann die Polsterung mithilfe der Steuerelemente Erweiterte Einstellungen »Padding anpassen” anzupassen. Anstatt die Schaltflächen am unteren Rand der Spalten auszurichten, erstelle alternativ eine neue Zeile mit drei Schaltflächen und richte sie nach Belieben aus, indem Du Abstandshalter erstellst. Beide Methoden haben ihre Vor- und Nachteile.

Vertikale Ausrichtung

Du kannst die vertikale Ausrichtung auf verschiedene einfache Arten erreichen. Der erste – und möglicherweise einfachste – Weg besteht darin, ein Element auszuwählen und die Auf- und Ab-Tasten für die vertikale Ausrichtung zu verwenden. Darüber hinaus verfügen alle Elemente über eine Auffüllsteuerung im Bereich „Über Element“ und eine zusätzliche Auffüllsteuerung im Bereich für erweiterte Einstellungen.

6.2 Text Element

Das Testelement ist das Rückgrat von UpFront, genau wie Text das Rückgrat Deiner Seite ist. Viele Abschnitte dieses Kapitels sind auf andere Elemente anwendbar, daher werden wir sie hier ausführlich behandeln und sie in weiteren Abschnitten leicht berühren.

Standard

Die Standardvoreinstellung für das Textfeld ist sehr flexibel und verwendet nur die Stile, die vom Textfeld WYSYWYG edtior gesteuert werden. Im folgenden Beispiel habe ich ein Textfeld hinzugefügt, um ein Pull-Zitat hervorzuheben, und es zwischen dem Titel und dem Hauptinhalt eingefügt. Zuerst habe ich kursiven Text ausprobiert, aber er hatte nicht den richtigen Durchschlag.

upfront_text_editor_wysywyg

Der Wechsel zu einem Blockquote gibt uns jedoch Folgendes:

upfront_text_element_default_blockquote

Viel besser.

Eine coole Funktion im UpFront WYSYWIG-Editor sind die alternativen Stile für einige der Textformatierungswerkzeuge. Schaue Dir den Editor genauer an. Beachte die kleinen Punkte unter einigen Formatierungsoptionen? Mit diesen kannst Du direkt im Texteditor durch alle verfügbaren Stile wechseln.

upfront_issue_blockquote_alternate

Beachte, dass ich die Standardvoreinstellung selbst nicht bearbeitet habe. Warum? Wie im Dokument “Voreinstellungen” erwähnt, werden durch die Bearbeitung der Standardeinstellungen die Stile für dieses Element themenweit geändert. Wenn Du Stile für eines Deiner Elemente erstellst, die nicht universell sein sollen, was die meisten davon sind, erstelle eine neue Voreinstellung, die Du sicher bearbeiten kannst. Nachdem Du diese neue Voreinstellung gespeichert hast, kannst Du sie auf andere Textelemente auf Deiner Webseite anwenden.

Neues Preset

Als Nächstes werden wir eine neue Voreinstellung für Textelemente erstellen und nur eine Handvoll der Standardeinstellungen anpassen.

Klicke zunächst auf das Textelement, für das Du eine neue Voreinstellung erstellen möchtest, und klicke dann auf das Zahnrad, um die Einstellungen aufzurufen.

Du solltest so etwas sehen:

upfront_dont_edit_default_preset

Sofern dies nicht die seltene Instanz ist, in der Du die Standardeinstellung bearbeiten musst, solltest Du auf die Dropdown-Liste unter Auswahl oder Voreinstellung erstellen klicken, um eine Liste der verfügbaren Voreinstellungen für dieses Element aufzurufen.

upfront_preset_dropdown

…und ein leeres Feld zum Erstellen einer neuen Voreinstellung.

upfront_name_new_preset

Wenn Du Nummer zwei auswählst und eine neue Voreinstellung erstellst, werden folgende Einstellungen angezeigt:

upfront_text_element_new_preset_settings

Ich ließ den Hintergrund farblos, änderte die Schrift in schöne Verdana und passte das Gewicht/den Stil auf normal kursiv an. Ich habe auch die Schriftfarbe in dunkelgrau geändert.

Hier ist das Ergebnis:

upfront_new_blockquote_example

 

Benutzerdefinierte CSS

Wenden wir etwas CSS an, um das Blockzitat ein wenig interessanter zu gestalten. Hier wenden wir einen Letterpress-Look an.

1. Kehre zum Upfront-Editor zurück

2. Klicke auf Dein Textelement und dann auf das Zahnrad, um die Einstellungen aufzurufen.

3. Wähle die neue benutzerdefinierte Voreinstellung, die Du oben erstellt hast.

4. Wähle dann im Editorfenster „Benutzerdefiniertes CSS“.

upfront_edit_preset_css

5. Füge den folgenden CSS-Code in den Upfront CSS-Editor ein und speichere ihn.

.plain-text-container h2 {
font-size: 1.5em;
color: #222;
text-shadow: 0px 2px 3px #555;

}

6. Nach dem Speichern wird eine modale Frage angezeigt, ob Du Layoutänderungen nur auf diesen Beitrag oder diese Seite oder auf alle Beiträge/Seiten dieses Typs anwenden möchtest, z. B.:

upfront_save_for_all_or_this

7. Triff Deine Wahl, speichere dann Dein Element und speichere UpFront, bevor Du eine Live-Vorschau anzeigst.

Ergebnis:

upfront_letterpress_custom_css_live

 

6.3 Bild- und Galerieelemente

Bilder und Bildergalerien können dazu beitragen, Deiner Webseite ein schönes visuelles Element hinzuzufügen. Schauen wir uns die Bild- und Galerieelemente von UpFront an.

Standardbildelemente

Bildelemente sind ziemlich einfach.

  1. Ziehe das Bildelementsymbol in Dein Designfenster.
  2. Klicke im Element auf das Pluszeichen (+), um ein Bild aus Deiner Medienbibliothek auszuwählen oder ein neues Bild hochzuladen.
  3. Passe die Bildposition an und speichere sie.

Standard-Galerieelemente

Wenn Du ein Galerieelement zum ersten Mal ziehst, wird in einem Modal gefragt, was passieren soll, wenn auf eine Galerie-Miniaturansicht geklickt wird. Deine Optionen zeigen eine größere Version des Bildes an oder gehen zur verlinkten Bildseite.

upfront_initial_gallery_settings

Als Nächstes wähle aus, welche Bilder in Deiner Galerie angezeigt werden sollen, und sie werden gemäß den Standardeinstellungen angeordnet. In der Ausgabe enthält die Galerie standardmäßig eine Bildüberlagerung mit Beschriftung.

upfront_gallery_default_issue_after_upload

Du kannst die Bilder in Deiner Galerie ändern oder bearbeiten, indem Du auf die Auslassungsschaltfläche (…) oben im Element klickst. Die Standardauffüllung kann mit der mittleren Schaltfläche angepasst werden. Durch Klicken auf das Zahnrad werden die Galerieeinstellungen angezeigt.

Galerieelemente haben drei Einstellungsabschnitte: Allgemeine Einstellungen, die geändert werden können, ohne die Standardvoreinstellung zu bearbeiten, Darstellungseinstellungen, mit denen die Standardvoreinstellung bearbeitet wird, sofern keine neue Voreinstellung erstellt wird, und Erweitert, die zu diesem Zeitpunkt zum Erstellen Deines Elements verwendet wird ein Anker.

Bildelement-Voreinstellungen

Bild mit neuer Voreinstellung

upfront_new_image_preset

Live:

upfront_image_new_preset_live

Voreinstellungen für Galerieelemente

Galerie alternative voreingestellte Einstellungen

upfront_gallery_alternative_preset

Live

upfront_gallery_alternative_live

Live mit Lightbox

upfront_gallery_alternative_preset_live_lightbox

Galerieelement Benutzerdefiniertes CSS

upfront_gallery_custom_css_settings

Benutzerdefinierte CSS

.ugallery img.ugallery-image{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.ugallery img.ugallery-image:hover{
-webkit-filter: grayscale(0);
filter: grayscale(0);
}

Live

upfront_gallery_custom_css_live

6.4 Slider Element

Slider-Elemente ersetzen sperrige, umständliche Slider-Plugins und ermöglichen es Dir, überall auf Deiner Seite dynamische, auffällige Elemente zu erstellen.

6.5 Karten Element

Einrichtung

upfront_map_element_enter_address

Standardeinstellungen für Kartenelemente

upfront_map_element_settings

Karte mit Snazzy Maps-Overlay-Einstellungen

upfront_snazzy_map_code_applied_settings

Link zu diesem Stil: https://snazzymaps.com/style/27/shift-worker

[{stylers:[{saturation:100},{gamma:1}]},{elementType:labels.text.stroke,stylers:[{visibility:off}]},{featureType:poi.business,elementType:labels.text,stylers:[{visibility:off}]},{featureType:poi.business,elementType:labels.icon,stylers:[{visibility:off}]},{featureType:poi.place_of_worship,elementType:labels.text,stylers:[{visibility:off}]},{featureType:poi.place_of_worship,elementType:labels.icon,stylers:[{visibility:off}]},{featureType:road,“[{“visibility”:“simplified”}]},{“featureType”:“water”,”stylers”:[{“visibility”:“on”},{“saturation”:50},{“gamma”:0},{“hue”:“#50a5d1″}]},elementType”:“geometry”,“stylers”:{“featureType”:“administrative.neighborhood”,“elementType”:“labels.text.fill”,“stylers”:[{“color”:“#333333”}]},{“featureType”:“road.local”,“elementType”:“labels.text”,“stylers”:[{“weight”:0.5},{“color”:“#333333”}]},{“featureType”:“transit.station”,“elementType”:“labels.icon”,“stylers”:[{“gamma”:1},{“saturation”:50}]}]

Karte mit Snazzy Maps-Overlay live

upfront_map_element_snazzy_live

6.6 Menü Element

Mit UpFront kannst Du einfach und unterhaltsam Navigationsmenüs hinzufügen, wo immer Du möchtest. Benötigst Du verschiedene Menüs auf verschiedenen Seiten? Kein Problem, mit UpFront kannst Du jedes Detail steuern.

6.7 Widget Element

Im Widget-Element wird UpFront wirklich zum Leben erweckt. Die meisten WordPress-Themes beschränken ihre Verwendung von Widgets auf Seitenleisten, Fußzeilen und von Zeit zu Zeit auf die Kopfzeile. Mit UpFront kannst Du Widgets überall verwenden, was wirklich zeigt, wie kreativ Du mit der Präsentation und Funktionalität von Inhalten Deiner Webseite sein kannst.

Die meisten Widgets von Plugins von Drittanbietern funktionieren hervorragend mit UpFront sowie die meisten Widgets in PSOURCE-Produkten.

6.8 YouTube und Like Box Elemente

YouTube-Elemente machen das Einbetten von Videos sehr einfach und einfach anzupassen.

Füge eine Facebook LikeBox hinzu, um Deine Fans zu präsentieren und neue Fans zu ermutigen, ihre Unterstützung zu zeigen.

6.9 Kontaktelement

Das Kontaktelement macht außerdem ein zusätzliches Kontakt-Plugin überflüssig und bietet eine einfache Möglichkeit, Eingaben von Besuchern Deiner Webseite zu erfassen.

6.10 Code Element

Das Code-Element wird zum Einbetten von Skripten und anderem Code verwendet, den Du auf Deiner Seite ausführen möchtest, und darf nicht mit speziell formatiertem Text verwechselt werden, wie Du ihn in einem Texteditor erstellen kannst. Das Codefeld ist sehr praktisch, wenn Du ein wenig js benötigst, um mit Deinem CSS zu arbeiten, oder wenn Du Inhalte wie Tweets, Instagramme oder Videos von anderen Distributoren als YouTube einbetten möchtest.

6.11 Tab und Accordion Elemente

Mithilfe von Registerkarten- und Akkordeonelementen kannst Du die Fläche auf Deinen Seiten maximieren und den vom Benutzer ausgewählten Inhalt anzeigen und ausblenden.

6.12 Button Element

Wie erwartet erwartet Dich mit dem Button-Element mit nur wenigen Klicks wunderschöne Schaltflächen, von der Navigation bis zu CTAs.

6.13 Login Element

Viele Webseitenbesitzer überspringen gerne einen Link zu einer Anmeldeseite, indem sie direkt auf der Website ein praktisches Anmelde-Widget hinzufügen. Das Login-Element ahmt ein Login-Widget nach und kann es an beliebiger Stelle im Design Deiner Website hinzufügen.

6.14 Beiträge Element

Schließlich ist das Beitrags-Element eine großartige Möglichkeit, Deine bevorzugten, beliebtesten oder neuesten Blog-Beiträge für Benutzer mit viel Flexibilität hervorzuheben.

Wiki-Kategorie: Stichworte: