Modulare Websites und Web-Blöcke

Egal, ob Sie eine einfache Landing Page oder eine vollwertige E-Commerce-Website benötigen, wir garantieren, dassModulare Websites bietet Ihnen die schnellste und einfachste Möglichkeit, die aufsehenerregende Website zu erstellen, die Sie sich schon immer vorgestellt haben.

Eine modulare Website ist sehr einfach: Sie besteht aus einem vertikalen Stapel fertig gestalteter Web-Blöcke, einer über dem anderen, mit Navigationskontrollen am oberen Rand. Websites können sehr schnell erstellt werden, indem einfach so viele verschiedene Web-Blöcke wie nötig hinzugefügt werden, um eine Webseite zu erstellen. Fügen Sie Ihren Inhalt hinzu und fertig. Darüber hinaus wird automatisch eine mobilfreundliche Variante der Website erstellt.

Um mit Ihrer modularen Website zu beginnen, können Sie eine der vorgefertigten Website-Vorlagen vonElements und fügen Sie Webblöcke hinzu oder entfernen Sie sie, um sie anzupassen. Sie können auch mit einer Startseite beginnen, die nur die Navigation enthält, und dann einen Webblock nach dem anderen aus der Design-Galerie ziehen, um Ihre Website aufzubauen.

Alle Möglichkeiten zur Erstellung von Websites ohne Web-Blöcke ("Freeform Websites") sind für fortgeschrittene Benutzer verfügbar, aber Sie werden feststellen, dass die Verwendung von Web-Blöcken der einfachste und schnellste Weg ist, Ihre neue Traum-Site zu erstellen - mit Xara oder einem anderen Programm!

Sehen Sie sich unsere Intro-Filme in derWeb Blocks Wiedergabeliste auf YouTube.

Erste Schritte: Wählen Sie eine Vorlage Website oder Startseite

Fertige Website-Vorlagen finden Sie unterElements oder Designs Gallery, unterModulare Websites > Website-Vorlagen.

Oder wenn Sie nur mit der Navigation beginnen und Ihre Website selbst aufbauen möchten, wählen Sie eineLeer (Website) vonModulare Websites > Website-Vorlagen. Es gibt auch eine leere modulare Website-Vorlage, nur mit Navigation, unterDatei > Neu.

Hinzufügen von Webblöcken

Eine große Auswahl an verschiedenen Webblock-Designs finden Sie in der Design-Galerie unterModulare Websites > Webblöcke > Layouts. Doppelklicken Sie auf ein Element in der Design-Galerie, um es zu Ihrem Website-Dokument hinzuzufügen. Jeder neue Block wird am unteren Rand, unter allen vorhandenen Webblöcken, eingefügt. Sie können ihn auch per Drag & Drop an einer beliebigen Stelle einfügen. Sie können dann Ihren eigenen Inhalt hinzufügen, indem Sie den Text mit dem Textwerkzeug bearbeiten, Bilder ersetzen usw.

Arbeiten mit Webblöcken

Wenn Sie auf ein Objekt klicken, das Teil eines Webblocks ist, wird links auf der Seite ein grüner Webblock-Balken angezeigt, wie unten dargestellt:

Objekte können innerhalb des Webblocks mit einem Klick ausgewählt werden. Anschließend können Sie die Objekte mit den üblichen Werkzeugen in der Hauptsymbolleiste auf der linken Seite bearbeiten;Text-Werkzeug für Text,Foto-Werkzeug für Fotos, usw.

Um den Web-Block selbst auszuwählen, klicken Sie auf die Web-Block-Leiste. Ein grüner Umriss um den gesamten Block zeigt an, dass er ausgewählt ist, und die Webblock-Leiste ist heller.

Löschen eines Webblocks

Um einen ganzen Webblock zu löschen, den Sie nicht wünschen, wählen Sie ihn einfach aus, indem Sie auf den grünen Balken klicken undLöschen. Wenn ein Webblock gelöscht wird, werden alle darunter liegenden Blöcke automatisch nach oben verschoben, um die Lücke zu schließen.

Ändern der Reihenfolge von Webblöcken

Verwenden Sie die Pfeiltasten auf der Webblock-Leiste, um Webblöcke nach oben oder unten zu verschieben. Sie können auch auf die Mitte der Leiste klicken und den Block nach oben oder unten ziehen. Während Sie ziehen, erscheint eine horizontale Linie zwischen den Webblöcken, um die Absetzposition anzuzeigen.
Use the arrow buttons on the Web Block bar to move Web Blocks up or down. Or you can click-drag on the center of the bar and drag the block up or down. As you drag, a horizontal line appears between Web Blocks, to indicate the drop position.

Anpassen der Höhe eines Webblocks

Bei vielen Webblöcken kann die Höhe durch Klicken und Ziehen am unteren Rand des Blocks angepasst werden, wie unten gezeigt:

Beachten Sie, dass der Webblock zuerst ausgewählt werden muss (klicken Sie auf den grünen Balken). Bewegen Sie dann den Mauszeiger über den unteren Rand und Sie sollten sehen, dass sich der Mauszeiger wie oben gezeigt verändert.
Note the Web Block needs to be selected first (click on the green bar). Then move the mouse pointer over the bottom edge and you should see the mouse pointer change as shown above.

Kopieren von Webblöcken

Um einen Webblock zu kopieren, wählen Sie ihn aus, indem Sie auf seine Webblock-Leiste klicken, und verwenden Sie dann Kopieren (Strg+C) wie bei jedem anderen Objekt. Beim Einfügen erscheint der Webblock direkt unter dem ausgewählten Block oder am unteren Rand der Website, wenn keine Auswahl getroffen wurde. Sie können Blöcke von einem Dokument der Modularen Website in ein anderes kopieren und einfügen.

Widget-Blöcke

Einige Webblöcke enthalten dynamische Inhalte, die den Wert Ihrer Website erheblich steigern können, z. B. Video-Player, Karten und Formulare. Nachdem Sie einen dieser Web-Blöcke eingefügt haben, klicken Sie auf das darin enthaltene Widget und Sie sehen einebearbeitenin einem Kontextmenü angezeigt. Klicken Sie aufbearbeitenund es erscheint ein Fenster, in dem Sie Ihr Widget einrichten können. Weitere Informationen finden Sie im folgenden Abschnitt über die Bearbeitung von Widgets.

Widget-Bearbeitung

Wenn Sie nun ein Widget einfügen oder bearbeiten, wird dieses neue Widget-Fenster angezeigt.

Bei Widgets, die von einem externen Dienst bereitgestellt werden, wie z. B. einer Google Map, erfolgt die Konfiguration des Widgets im externen Dienst nun über Ihren normalen Browser und nicht mehr in einem Webfenster in Designer+. Das bedeutet, dass die Anmeldung bei dem externen Dienst im Allgemeinen einfacher ist, da Ihr Browser wahrscheinlich über Funktionen verfügt, die Ihnen bei der Anmeldung helfen, wie z. B. gespeicherte Passwörter oder einen Passwortmanager. Außerdem können Sie in einem Browserfenster in voller Größe arbeiten, anstatt in einem kleineren Webfenster innerhalb der Anwendung.

Drücken Sie dieIm Browser bearbeiten Schaltfläche, um den externen Dienst in Ihrem Standardbrowser zu öffnen. Sobald Sie Ihr Widget eingerichtet haben, kopieren Sie den Widget-Code vom externen Dienst und kehren dann zu Designer+ zurück, um diesen Code in das Widget-Fenster einzufügen.

Für die meisten Widgets gibt es eine Online-Hilfeseite, auf der Sie erfahren, wie Sie den externen Dienst am besten mit Designer+ nutzen können, wie Sie den Code in diesem Dienst finden und andere hilfreiche Tipps. Drücken Sie dieWie man HTML erhält Code-Link, um diese Hilfe zu öffnen.
Es gibt einige weniger häufig verwendete Widget-Optionen in derDienstprogramme > Web-Eigenschaften die in diesem neuen Fenster nicht verfügbar sind. Drücken Sie dieFortgeschritteneum direkt zu diesem Dialogfeld zu gelangen, wenn Sie diese Optionen verwenden möchten.

Copyright © Xara