GRÖSSTES Squarespace-Update: Fluid Engine

Bildquelle: Squarespace

Squarespace wurde gegründet, um einen kreativen Raum zu schaffen, der einen revolutionären Einfluss auf das Hosting und die Erstellung von Websites auf dem amerikanischen Markt hatte. Auch heute noch arbeitet das Unternehmen an Innovationen und setzt neue Maßstäbe, um Website-Besitzern die Möglichkeit zu geben, praktikable Inhalte schneller und effizienter zu erstellen. Fluid Engine ist eine der neuesten und größten Kreationen des Unternehmens. Sie wurde mit dem Ziel entwickelt, Website-Besitzern eine viel schnellere und effizientere Möglichkeit zur Erstellung ihrer Inhalte zu bieten.

Fluid Engine ist ein von der Unreal Engine 3 verwendeter Motor 

Die Fluid Engine verwendet eine Reihe verschiedener Motoren zum Betrieb des Motors. Allerdings ist es nicht verfügbar für: 

• Blockieren Sie Bereiche, die keine Seitenabschnitte verwenden, wie Blogbeiträge, Veranstaltungsbeschreibungen und zusätzliche Produktinformationen. 

• Websites, die in einer anderen Sprache als Englisch gestartet wurden. Dies gilt auch dann, wenn die Website später ins Englische übersetzt wird. 

• Version 7.0 Standorte 

Inhaltsverzeichnis im Detail Ausblenden

Wie schaltet man einen Flüssigkeitsmotor ein?

Einer der größten Vorteile der Fluid Engine ist, dass sie den Erstellern von Inhalten mehr Flexibilität bei der Platzierung, Größenänderung und Überlappung von Blöcken bietet. Dies schafft neue Möglichkeiten, indem es ihnen erlaubt, sich neu vorzustellen, wie sie ihre Squarespace-Website gestalten und nutzen. 

Beim Einschalten von Fluid Engine sind mehrere Schritte zu beachten. Diese sind wie folgt: 

1. Kompatibilität: Im ersten Schritt müssen Sie sicherstellen, dass Sie die Fluid Engine verwenden. Dies liegt daran, dass diese neue Bearbeitungsfunktion nur für Seitenabschnitte verfügbar ist, die Blöcke verwenden. Das bedeutet, dass sie nur auf Websites der Version 7.1 in den Blockabschnitten auf jeder Seite und den Portfolio-Unterseiten und -Fußzeilen unterstützt wird. 

2. Identifizieren Sie die Fluid Engine-Abschnitte: Fluid Engine ist nicht in jedem Bereich Ihrer Website verfügbar. Stattdessen werden Abschnitte wie "zusätzliche Produktinformationen", "Veranstaltungsbeschreibungen" und andere wahrscheinlich nicht mit Fluid Engine kompatibel sein. Daher sollten Sie sich die Zeit nehmen, mit dem Mauszeiger über jeden Bereich zu fahren, um zu sehen, welche Bereiche mit Fluid Engine kompatibel sind. (Mehr dazu im nächsten Schritt.) 

3. Klicken Sie auf "Bearbeiten": Um den Bearbeitungsprozess zu beginnen, müssen Sie in einem der genannten Abschnitte auf "Bearbeiten" klicken. Dort werden Sie feststellen, dass die Abschnitte von Fluid Engine eine Schaltfläche "Block hinzufügen" haben, mit der Sie einen Block anklicken und ziehen können, um die Abschnitte zu bearbeiten. 

Wie füge ich einen flüssigen Motorabschnitt hinzu?

Bildquelle: Squarespace

Das Hinzufügen eines neuen Fluid Engine-Bereichs zu Ihrer Website ist ganz einfach. Alles, was Sie tun müssen, ist: 

1. Bearbeiten: Klicken Sie zunächst auf der Seite auf "Bearbeiten".  

2. Einen Abschnitt hinzufügen: Dort klicken Sie auf "Abschnitt hinzufügen". Danach müssen Sie auf "Leeres + hinzufügen" klicken, um einen leeren Fluid Engine-Abschnitt hinzuzufügen. Alternativ können Sie auch einfach auf eine Kategorie klicken, um vorgefertigte Abschnitte zu finden. Wenn ein Abschnitt ein I-Symbol in der oberen rechten Ecke hat, handelt es sich um ein automatisches Layout, das mit Fluid Engine nicht kompatibel ist. 

3. Nehmen Sie Anpassungen vor: Schließlich müssen Sie noch die richtigen Anpassungen vornehmen, um sicherzustellen, dass die Abschnitte nach Ihren Vorstellungen erstellt werden. Dazu wählen Sie einfach aus, ob Sie die Rasterhöhe für jeden Abschnitt erhöhen oder verringern möchten. Dieser Vorgang ist ganz einfach. Klicken Sie einfach auf das blaue Pfeilsymbol in der unteren rechten Ecke und ziehen Sie es. Je mehr Platzierungsblöcke Sie verwenden, desto weniger können Sie die Höhe der einzelnen Rasterabschnitte nach Ihren Wünschen einstellen. 

Einen Block in Fluid Engine hinzufügen

Wenn Sie Hilfe beim Hinzufügen von Blöcken benötigen, führen Sie einfach die folgenden Schritte aus: 

1. Klicken Sie zunächst auf die Schaltfläche "Bearbeiten". 

2. Klicken Sie dann in der oberen linken Ecke auf Block hinzufügen. 

3. Wählen Sie den Block, den Sie hinzufügen möchten. Wenn Sie mit den verschiedenen Arten von Blöcken nicht vertraut sind, finden Sie unter Hinzufügen von Inhalten mit Blöcken für weitere Informationen.  

4. Sobald die Blöcke hinzugefügt wurden, können Sie sie durch Klicken und Ziehen verschieben und in der Größe verändern. So können Sie einzigartige und kreative Layouts erstellen. Sie können die Blöcke auch nebeneinander platzieren oder sie sogar überlappen lassen. Schließlich müssen Sie sich nur noch auf die mobile Website konzentrieren. Bearbeiten Sie dazu das mobile Layout des Abschnitts, um festzulegen, wie er auf mobilen Geräten angezeigt werden soll. 

5. Konzentrieren Sie sich auf das Hinzufügen einer Blockhintergrundfarbe. Dies ist unerlässlich, wenn Sie viele Blöcke erstellen, die sich überschneiden. Fügen Sie eine Blockhintergrundfarbe hinzu, damit der Text lesbar ist.

Flüssigkeit einbauen oder auffüllen Motorblöcke 

Um das Padding zwischen Bild- und Schaltflächenblöcken mit Fluid Engine richtig einzustellen, müssen Sie sie auf fit oder fill setzen.  

• Gefüllte Blöcke: Wenn Blöcke auf Füllung eingestellt sind, nimmt das Bild oder die Schaltfläche den gesamten Blockbereich ein. Das bedeutet, dass die Ränder des Bildes oder der Schaltfläche mit den angrenzenden Blöcken bündig sind.  

• Blöcke einpassen: Wenn Blöcke auf Block eingestellt sind, umgibt der zusätzliche Platz das Bild oder die Schaltfläche. 

Zum Einstellen von Bild- oder Schaltflächenblöcken zum Einpassen oder Füllen: 

1. Klicken Sie auf eine Block- oder Bildschaltfläche, klicken Sie auf das Stiftsymbol und dann auf die Registerkarte Design. 

2. Klicken Sie auf Einpassen oder Ausfüllen. Der Unterschied zwischen den beiden ist, dass Bildblöcke standardmäßig auf Einpassen eingestellt sind, während Schaltflächenblöcke auf Füllen eingestellt sind. 

3. Wenn Sie Einpassen wählen, werden die Ausrichtungsoptionen unter oder in der Symbolleiste angezeigt.  

4. Wenn Sie alle Änderungen vorgenommen haben, bewegen Sie den Mauszeiger auf Fertig und klicken Sie auf Speichern. 

Fluid Engine Editor 

Sie können Ihre Fluid-Engine-Abschnitte in vielerlei Hinsicht optimieren. Zum Beispiel können Sie die verwendeten Farben hinzufügen oder ändern. Es ist auch möglich, den Hintergrund zu ändern. Sobald Sie einen Block erstellt haben, können Sie einfach mit dem Schreiben beginnen.

Sie können den Text auch so einstellen, dass er links, rechts oder in der Mitte des Rahmens ausgerichtet wird. Dies ist eine hervorragende Funktion für diejenigen, die sich mit der Platzierung von Text auskennen und wissen, wie und warum bestimmte Textgruppen verlockender sind als andere. Sie können den Text sogar nach oben oder unten skalieren, den Text so groß oder klein machen, wie Sie möchten, Schaltflächen hinzufügen und vieles mehr. 

Wie auch immer, es gibt viele Funktionen und Merkmale, die Sie bei der Verwendung von Fluid Engine personalisieren können. Wie Sie diese nutzen, hängt ganz von Ihnen und Ihren persönlichen Vorlieben für Ihre Website ab. 

Im Folgenden finden Sie einige bewährte Verfahren, die Ihnen bei der Optimierung von Fluid Engine helfen: 

• Überlappende Blöcke: Die Überlappung von Blöcken kann eine großartige Stilentscheidung sein, die Ihre Website für die Nutzer attraktiver und verlockender macht. Wenn Sie jedoch Blöcke überlappen lassen, müssen Sie sich die Zeit nehmen, um sicherzustellen, dass der Inhalt in jedem Block für die Nutzer weiterhin sichtbar ist und funktioniert. Wenn Sie z. B. Blöcke hinzufügen, die von den Nutzern ausgefüllt werden müssen, sollten Sie diese nicht mit anderen Blöcken überlappen. Dies könnte die Funktionalität des Blocks zerstören und die Benutzer frustrieren oder abschrecken. 

• Lesbarkeit: Außerdem ist es ein häufiger Fehler von Webdesignern aller Qualifikationsstufen, sich mehr auf das Design als auf die allgemeine Lesbarkeit zu konzentrieren. Der Grund dafür ist, dass der Inhalt während der Bearbeitung noch vollständig sichtbar sein kann, aber teilweise verschwindet, sobald Sie den Prozess abgeschlossen und die Änderungen gespeichert haben. Wenn Sie also Text über anderen Inhalten platzieren, sollten Sie sich die Zeit nehmen, um sicherzustellen, dass der Text lesbar bleibt. Es ist durchaus möglich, ein undurchsichtiges Bild hinzuzufügen, das Teile des Inhalts verdecken könnte, sobald Sie fertig sind. Ebenso könnten Sie die falsche Farbgebung für den Block und den Text verwenden, was die Lesbarkeit nahezu unmöglich machen kann. 

• Begrenzung der Anzahl von Blöcken: Auch wenn es keine feste Grenze für die Anzahl der Blöcke gibt, die Sie einem Abschnitt oder einer Seite hinzufügen können, empfehlen wir dringend, nicht mehr als 60 Blöcke pro Seite hinzuzufügen. Wenn Sie sich nicht an diese Empfehlung halten, kann eine Seite mit Inhalten überladen werden, was dazu führen kann, dass Ihre Website verzögert oder viel langsamer als gewöhnlich geladen wird. Dies ist insbesondere bei mobilen Browsern der Fall. Im Allgemeinen können herkömmliche Browser viel mehr Blöcke aufnehmen als mobile Browser. Berücksichtigen Sie dies bei der Gestaltung Ihrer Website und überprüfen Sie die Gesamtfunktionalität jeder Seite, bevor Sie sie online stellen. 

Mobile Ansicht in Fluid Engine

Bildquelle: Squarespace

Das Ausprobieren der mobilen Ansicht ist ein wesentlicher Bestandteil des Prozesses. Der Grund dafür ist, dass die meisten Unternehmen heutzutage den Großteil ihrer Kundenkontakte und Geschäfte über mobile Websites und Apps abwickeln. Wenn Sie Fluid Engine in der mobilen Ansicht ausprobieren, schalten Sie auf die "mobile Ansicht" um, die Ihnen zeigt, wie der Text und der Abschnitt auf mobilen Geräten aller Art aussehen. Dies ist eine fantastische Funktion, denn die meisten Webdesigner verwenden die mobile Ansicht, um die endgültige Entscheidung zu treffen, wie die Website gestaltet werden soll. 

Bei der Anzeige auf dem Handy können Sie Schaltflächen hinzufügen oder löschen, den Text vergrößern oder verkleinern und vieles mehr. Um solche Änderungen vorzunehmen, müssen Sie jedoch zur herkömmlichen Ansicht zurückkehren. Sie können auch Anpassungen vornehmen, damit sich Ihre mobile Website von der herkömmlichen Ansicht unterscheidet. Da mobile Websites in der Regel interaktiver sind und häufig von jüngeren Bevölkerungsgruppen genutzt werden, können Sie beispielsweise Bilder und Grafiken hinzufügen, die die Website in der mobilen Ansicht ansprechender machen. 

Allerdings sollten Webdesigner darauf hingewiesen werden, dass sie trotz der vielen neuen Funktionen darauf achten sollten, diese nicht übermäßig zu nutzen. Zu viele Überschneidungen und unübersichtliche Bereiche können zu Fehlern führen, die Ladezeiten der Website verlangsamen und vieles mehr. Daher müssen sich Webdesigner die Zeit nehmen, die Neuerungen sowohl in der herkömmlichen als auch in der mobilen Ansicht zu betrachten und bei Bedarf Anpassungen vorzunehmen. Denken Sie auch daran, dass die Fluid Engine nicht in allen Bereichen zur Verfügung steht. Wenn Sie also sicherstellen möchten, dass alle Seiten einheitlich sind, müssen Sie möglicherweise einige Teile mit dem herkömmlichen Editor bearbeiten. 

Style Fluid Motorsektionen 

Zur Gestaltung von Fluid-Engine-Abschnitten: 

1. Klicken Sie auf der Seite auf Bearbeiten und dann auf Abschnitt bearbeiten in der oberen rechten Ecke des Abschnitts, den Sie gestalten möchten. Möglicherweise haben Sie einen Block ausgewählt, wenn der Abschnitt Bearbeiten nicht erscheint. Klicken Sie dann auf den Abschnittshintergrund, damit der Abschnitt bearbeiten erscheint. 

2. Nehmen Sie auf der Registerkarte Format Änderungen an den Abständen und Auffüllungen des Abschnitts vor. Auch hier ist es sehr empfehlenswert, verschiedene Einstellungen auszuprobieren, um zu verstehen, wie sie aussehen und sich auf die Website auswirken. Im Folgenden erfahren Sie mehr über Ihre Optionen. 

3. Klicken Sie auf Hintergrund, um die Hintergrundeinstellungen zu ändern. Um mehr zu erfahren, besuchen Sie die folgenden Abschnitte: Hinzufügen von Hintergrundvideos, Hintergrundbilder für Abschnitte, und Abschnitt Hintergrundbilder. 

4. Wenn Sie die Farben ändern möchten, klicken Sie auf "Farben", um das Farbthema der einzelnen Abschnitte zu ändern. Um mehr zu erfahren, besuchen Sie Ändern der Farben. 

5. Wenn Sie fertig sind, bewegen Sie den Mauszeiger über "Fertig" in der oberen linken Ecke und klicken Sie auf "Speichern". 

Format-Optionen 

Um die Stileinstellungen zu ändern, gehen Sie auf die Registerkarte Format, um folgende Einstellungen vorzunehmen: 

• Zeilenanzahl: Als nächstes können Sie die Anzahl der Zeilen im Raster des Abschnitts festlegen. Denken Sie daran, dass die Mindestanzahl der Zeilen davon abhängt, wie viele Blöcke Sie hinzugefügt haben und wie diese angeordnet sind. 

• Abstand: Legen Sie den Abstand zwischen den Einheiten im Raster fest, um zu bestimmen, wie viel Platz zwischen den Blöcken sein soll. Sie können keinen Abstand oder einen voreingestellten Abstand wählen oder auf die drei Punkte klicken, um eigene vertikale und horizontale Abstände festzulegen. 

• Bildschirm ausfüllen: Die Aktivierung der Einstellung "Bildschirm ausfüllen" ermöglicht eine bessere Kontrolle über die Ausrichtung und Höhe des Inhalts. 

• Höhe: Fügen Sie Ihrem Abschnitt außerhalb des Abschnittsrasters eine Polsterung hinzu. Sie können zwischen kleinen, mittleren und großen Höhen wählen oder auf die drei Punkte klicken, um Ihre eigene Höhe festzulegen. 

• Ausrichtung: Wir raten den Benutzern, die Ausrichtung festzulegen, in der die übergroße Auffüllung erscheint.  

Die Grenzen von Fluid Engine 

Obwohl Fluid Engine über viele neue Funktionen, Schnickschnack und Pfiffe verfügt, ist es keineswegs eine unfehlbare Anwendung. Stattdessen gibt es einige Einschränkungen, die zu beachten sind. Zum Beispiel ist Fluid Engine nicht mit jedem Aspekt Ihrer Website kompatibel. Wenn Sie z. B. eine E-Commerce-Website erstellen, ist Fluid Engine wahrscheinlich nicht verfügbar, wenn Sie Bereiche wie Produktseiten bearbeiten. Daher müssen Sie diese Bereiche mit dem herkömmlichen Editor bearbeiten. 

Im Allgemeinen gilt dies für jede Seite, die Kollektionen oder eine beliebige Gruppe von Bildern, Produkten, Beschreibungen usw. enthält. Dies ist bei der Gestaltung anderer Seiten unbedingt zu beachten. Obwohl es durchaus akzeptabel ist, nur bestimmte Funktionen auf bestimmten Seiten zu haben, wollen Sie auf keinen Fall, dass sich die von Fluid Engine bearbeiteten Seiten zu sehr von den anderen Seiten Ihrer Website unterscheiden. 

Brauchen Sie mehr Hilfe?

Sie sind noch nicht mit der Fluid Engine vertraut? Launch Happy ist hier, um Hilfe. 

Wir haben Experten vor Ort, um alle Ihre Fragen zu Fluid Engine und Squarespace zu beantworten und Ihnen zu helfen, die perfekte Website für Ihr Unternehmen zu erstellen. 

Wir haben kostenlose Leitfäden verfügbar und eine Wöchentlicher Newsletter für alle Tipps rund um Squarespace, Webdesign und SEO. Wenn Sie ein visueller Lerner sind, finden Sie vielleicht unsere wöchentlichen Anleitungen nützlich sein, darunter auch unser kürzlich veröffentlichter Durchgang zu Fluid Engine.