Ab heute kannst du dein Logo perfekt in deine Webseite einbauen

Vor einiger Zeit haben wir daran gearbeitet, branchenspezifische Designvorlagen zu erstellen, und dabei tauchte die Frage auf, wie wir Musterlogos möglichst benutzerfreundlich in Homepageseiten einbinden könnten.

Daher haben wir beschlossen, einen neuen Bereich im Design-Editor einzurichten, mit dem du zukünftig ganz einfach und schnell ein Logo auf deiner Homepage platzieren kannst. Das Einzige, was du beachten musst, ist die Tatsache, dass das Logo damit zum Design gehört, das heißt, zu den grundsätzlich für alle Seiten deiner Homepage gehörenden Gestaltungselementen: Es ist am Ende auf jeder deiner Seiten zu sehen. Wenn du also ein neues Design auswählst, was selten vorkommt, dann wird ein im alten Design von dir platziertes Logo überschrieben. Wir sind sicher, das stört normalerweise nicht und in wenigen Sekunden ist das gewünschte Logo wieder eingebunden. 

Wir erklären dir nachfolgend, wie das funktioniert. (Mit dieser neuen Optionen können wir nun auch weiter an den geplanten Branchenvorlagen arbeiten und hoffen, sie schon bald vorstellen zu können.) Vorab folgen jetzt noch Infos zu einigen Änderungen, die wir bereits letzte Woche vorgenommen haben.

Neue Technik für die Design-Vorlagen

Parallel zu der Logo-Funktion haben wir letzte Woche die Technik, mit der deine Webseite dargestellt wird, überarbeitet und insgesamt auf sogenannte „Flexboxen“ umgestellt, eine sehr moderne und schnelle Layouttechnik. Am Aussehen deiner Webseite hat sich dadurch nichts geändert. Wir konnten aber sehr viel Code entfernen und dadurch deine Homepage bzw. page4 noch schneller machen. Mit diesen Flexboxen lassen sich ab jetzt neue Strukturen und Funktionen einfacher umsetzen. 

Vorschau von eingebundenen Videos

Ab sofort wird bei jedem Video ein Bild als Vorschau geladen. Das hat mehrere Vorteile. Zum einen funktioniert diese Form der Darstellung extrem schnell, was besonders wichtig ist, wenn eine Homepage viele Videos präsentiert. Zum anderen kann man die Vorschau jetzt auch im Admin-Modus sehen und, wenn man auf das Video klickt, auch im Admin-Modus abspielen.

Zum neuen Bereich für Logos

Wenn du auf „Design bearbeiten“ klickst, gibt es jetzt oben einen neuen Menüpunkt „Logo“ (1), so ähnlich wie es auch einen Punkt „Hintergrund“ gibt. Klickst du darauf, öffnet sich der dazugehörige Dialog und zeigt dir alle Optionen für die Darstellung von Logos.

Dazu musst du Folgendes wissen:

1. Es kann pro Webseite nur ein (1) Logo eingebunden werden. Du solltest es vorzugsweise als durchsichtiges (transparentes) PNG hochladen, insbesondere, wenn dein Logo eine geometrische Form besitzt, also als Kreis, Rechteck oder beispielsweise als Textband gestaltet ist. Du kannst natürlich auch JPG Bilder hochladen, die dann rechteckig angezeigt werden. Wir haben bei diesem Tool bewusst alles weggelassen, was seine Bedienung kompliziert macht und denken, wenn du ein Logo einbinden möchtest, dann weißt du selbst am besten, in welchem Format du es darstellen willst.
   
   
2. Ein Logo kann folgende Plätze (2) einnehmen:
   
   1. In der horizontalen Navigation kann es links oder rechts von der Navigation platziert werden. Die Höhe des Logos bestimmt dabei, wie hoch der Navigationsbereich wird. Das Logo ist immer vertikal mittig zur Navigation angeordnet.
   2. Bei einer Navigation in der Sidebar liegt das Logo immer über der Navigation und stets zentriert.
   3. Du kannst dein Logo auch in einem der drei Header unterbringen. In einem Header lässt es sich wie ein normales Hintergrundbild platzieren, also zum Beispiel mittig oder links oben. Der Dialog dazu ist derselbe wie bei einem Hintergrundbild.
      
      
3. Ein Logo hat immer eine Mindestbreite (3) von 50 px. Die Höhe wird stets entsprechend der Breite angepasst. Änderst du den Platz des Logos, also vom Header in die Sidebar Navigation, passt sich eventuell die maximale Breite an, denn eine Sidebar kann nur eine bestimmte maximale Breite einnehmen. Wechselst du danach erneut den Platz, also zurück zum Header, dann lässt sich die Breite wieder auf einen größeren Wert stellen. Die vorher eingestellten Werte gehen dabei eventuell verloren.
   
   
4. Ein Logo kann einen Abstand (4) haben. Bei einer Platzierung in einer horizontalen Navigation wird der Abstand an allen Seiten, also oben, unten, links und rechts eingefügt und beeinflusst so die Positionierung. Passt die Navigation nach Einfügen des Logos nicht mehr in den restlichen verfügbaren Platz, wird automatisch ein Umbruch eingefügt.
   
   Ist das Logo in der Sidebar platziert, wird der Abstand ebenfalls an allen Seiten eingefügt. Das Logo ist immer mittig zur Sidebar ausgerichtet. Der eingefügte Abstand beeinflusst in der Sidebar unter Umständen die Größe des Logos, da die Sidebar eine feste Breite hat.
   
   Ist das Logo im Header platziert, dann beeinflusst die Positionierung des Logos den Abstand. Wenn du das Logo mittig präsentierst, wirkt der Abstandsregler nicht, was bedeutet, dass das Logo mittig bleibt, egal, welchen Abstand du einstellst. Ist das Logo links platziert, dann veränderst du mit dem Regler den Abstand links vom Logo; bei rechter Platzierung wird der Abstand rechts verändert. Liegt das Logo oben, wird der Abstand nach oben verändert und wenn es unten steht, kannst du den Abstand nach unten beeinflussen.

Du kannst es aus der Verwaltung einladen oder aus unserem Archiv zum Beispiel eines der Dekorationsbilder benutzen, falls du kein eigenes Logo besitzt und eines unserer Symbole verwenden willst. Und natürlich kannst du direkt dein Logo hochladen und es gleich verwenden.

Neue Bedienelemente

Wie du sehen kannst, bietet page4 erstmals ein neues Bedienelement, einen Slider kombiniert mit einem  Eingabefeld. Du kannst also die Breite deines Logos und auch den Abstand stufenlos mit dem Slider einstellen und live die Größenänderung beobachten oder, wenn es dir lieber ist, konkrete Werte eingeben. Beide Elemente ändern sich automatisch. Wir planen, solche Elemente zukünftig auch dort bei den Inhalten zu verwenden, wo es Sinn macht.

Natürlich passen sich die Logos automatisch an mobile Ansichten an. 

So, nun viel Spaß damit, das eigene Logo professionell zu präsentieren. Natürlich bleibt die Option, Inhalte frei auf einem Header zu positionieren, weiterhin erhalten.

Übrigens: Die Datenbanken für die Erweiterung, später auch eine Headline im Header zu positionieren, haben wir bereits vorbereitet. Die Umsetzung wird noch etwas dauern, da wir in diesem Zusammenhang einige andere Bereiche umbauen wollen, denn die Gestaltung der Headline im Header ist eine Sache des Designs und dazu müssen wir zum Beispiel die Designschriften erweitern.

Diesbezüglich  noch ein Hinweis: Vielleicht habt ihr es bemerkt, dass die Schrift für Fließtext jetzt nach oben gerückt ist und die Vorschau rechts eine Scrollbar hat, damit auch bei großen Überschriften alles sichtbar gemacht werden kann. Wenn du alle Schriftauswahlen für die Überschriften löschst, wird nun automatisch für alle Überschriften die Einstellung vom Fließtext genommen. Möchtest du also nur eine Schriftfamilie verwenden, dann kannst du das jetzt viel schneller und bequemer einstellen.

Wie immer freuen wir uns über Kommentare, Anregungen und natürlich auch über Lob, das Brot eines jeden Künstlers. Ich finde, die Arbeit unserer Entwickler gleicht manchmal der Arbeit von  Künstlern: Wir skizzieren eine Idee und formen sie so lange um, bis daraus ein kleines Kunstwerk entsteht, welches dann hoffentlich euch und uns viel Freude bereitet.

Bis demnächst - mit noch mehr Geistesblitzen aus unserer Ideenkiste

Manfred und das ganze page4-Team