\n Anforderungen dieses Tutorials
\n<\/h5>\n
\n Sie m\u00fcssen bestimmte Bilder, Vektoren und Schriftarten herunterladen, um diese Website zu erstellen. Aber Sie k\u00f6nnen auch ohne diese Assets weitermachen. Um den Inhalt richtig zu organisieren, erstellen Sie einen separaten Ordner f\u00fcr Ihre Website.\n<\/p>\n
- \n
- \n
\n Gehe zu pexels.com<\/a> und lade Folgendes herunter:\n <\/p>\n
- \n
- \n
\n 4 Bilder der Gr\u00f6\u00dfe 1160 x 480 f\u00fcr Diashow. Hier ist ein Screenshot von Pexels. Sie k\u00f6nnen diese Gr\u00f6\u00dfe in das Feld \u201eBenutzerdefinierte Gr\u00f6\u00dfe“ auf dieser Website eingeben.\n <\/p>\n<\/li>\n
- \n
\n 6 Bilder der Gr\u00f6\u00dfe 271 x 208 f\u00fcr den Bereich \u201eServices“.\n <\/p>\n<\/li>\n
- \n
\n 1 Bild der Gr\u00f6\u00dfe 1160 x 692 f\u00fcr den Abschnitt \u201eKontakt“.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Gehen Sie zu freepik.com<\/a> und laden Sie herunter:\n <\/p>\n
- \n
- Ein Kreuzsymbol (Sie k\u00f6nnen dieses Symbol im Illustrator bearbeiten oder einfach die PNG-Datei von feepik herunterladen).\n <\/li>\n
- 6 Gesichtsbilder f\u00fcr den Abschnitt „Testimonials“.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Gehen Sie zu subtilpatterns.com<\/a> und laden Sie das ‚Brickwall‘-Muster f\u00fcr den Abschnitt ‚Testimonials‘ herunter.\n <\/p>\n<\/li>\n
- \n
\n W\u00e4hrend Sie mit diesem Tutorial fortfahren, werde ich Ihnen sagen, wie Sie die erforderlichen Schriftarten herunterladen (dies kann in Muse erfolgen).\n <\/p>\n<\/li>\n
- \n
\n Verwenden Sie den Dummy-Text von lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n LASS UNS ANFANGEN!\n<\/p>\n
\n Arbeitsplatz vorbereiten und Header einrichten\n<\/p>\n
\n 1 Erstellen Sie eine neue Site, indem Sie zu Datei > Neue Site (Strg+N) gehen und die Werte wie unten gezeigt eingeben. Vergessen Sie nicht, das Kontrollk\u00e4stchen \u201eSticky Footer“ zu aktivieren. Klicken Sie auf OK und Sie haben den PLAN-Modus. Doppelklicken Sie auf A-Master, das sich unten in einem grauen Bereich befindet. Auf dieser Masterseite erstellen Sie alles.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 W\u00e4hlen Sie das Textwerkzeug aus der Werkzeugbox auf der linken Seite des Anwendungsfensters. Klicken und ziehen Sie auf der Leinwand oder Seite, um ein Textfeld zu erstellen. Gehen Sie zum Textfeld (Strg+T), suchen Sie im Dropdown-Men\u00fc \u201eSchriftarten“ nach \u201eWebschriften“, w\u00e4hlen Sie \u201eWebschriften hinzuf\u00fcgen“ und laden Sie die folgenden Schriftarten herunter:\n<\/p>\n
- \n
- Rametto Eins\n <\/li>\n
- Brocken\n <\/li>\n
- Fragen\n <\/li>\n
- Eisenbahn\n <\/li>\n
- Edel\n <\/li>\n
- PT Ohne\n <\/li>\n
- Ubuntu\n <\/li>\n
- Hummer\n <\/li>\n<\/ul>\n
\n L\u00f6schen Sie nach dem Herunterladen dieser Schriftarten dieses Textfeld.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Gehen Sie zum Bedienfeld \u201eEbenen“ auf der rechten Seite des Anwendungsfensters. Wenn es nicht dort ist, gehen Sie zum Men\u00fc Fenster > Ebenen. Sie sehen dort eine Ebene namens Ebene 1 (blaue Farbe). Dies ist die Standardebene und alles, was Sie erstellen oder auf der Leinwand platzieren, wird dort eingef\u00fcgt. Doppelklicken Sie auf diese Ebene und nennen Sie sie \u201eHeader“.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Klicken Sie im Ebenenbedienfeld auf das kleine Papiersymbol mit gefalteten Kanten in der unteren rechten Ecke. Wenn Sie darauf klicken, wird eine neue Ebene mit roter Farbe erstellt. Doppelklicken Sie erneut auf diese Ebene und benennen Sie sie in \u201eInhalt“ um.\n<\/p>\n
\n 5 Klicken Sie auf diese Inhaltsebene, ziehen Sie sie und platzieren Sie sie unter der Kopfzeilenebene. Wir haben dies getan, weil wir m\u00f6chten, dass unser Header \u00fcber allem steht.\n<\/p>\n
\n 6 W\u00e4hlen Sie die Kopfebene aus und reduzieren Sie das Ebenenfenster.\n<\/p>\n
\n 7 W\u00e4hlen Sie das Rechteck-Tool aus der Toolbox oder dr\u00fccken Sie \u201em“ auf der Tastatur.\n<\/p>\n
\n 8 Zeichnen Sie ein kleines Rechteck auf die Leinwand und vergewissern Sie sich, dass die Rahmenfarbe blau ist, was darauf hinweist, dass sich dieses Objekt innerhalb der Kopfebene befindet.\n<\/p>\n
\n 9 Gehen Sie zum Transformieren-Bedienfeld, das sich oben rechts im Anwendungsfenster befindet. Verlassen Sie die Breite (W) und geben Sie 50 in das Feld H\u00f6he (H) ein und dr\u00fccken Sie die Eingabetaste. (Mach dir keine Gedanken \u00fcber X- und Y-Werte.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 Oben auf der Seite sehen Sie zwei blaue Linien (siehe Abbildung unten). Diese werden \u201eF\u00fchrer“ genannt. Wenn Sie den Mauszeiger \u00fcber die erste Hilfslinie bewegen, hei\u00dft es \u201eSeitenanfang, zum Anpassen der Polsterung \u00fcber der Seite ziehen“ und die andere \u201eKopfzeile, zum Anpassen der Position ziehen“. Es ist sehr wichtig, diese Leitf\u00e4den ganz am Anfang einzurichten.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Nachdem wir nun ein Rechteck von H=50 erstellt haben, klicken Sie auf die Hilfslinie \u201eSeitenanfang“ und ziehen Sie sie, bis das Feld, das unten erscheint, sobald Sie mit dem Ziehen beginnen, Y=50 anzeigt.\n<\/p>\n
\n 12 Ziehen Sie auf \u00e4hnliche Weise die Kopfzeilenhilfslinie oben an die obere Seitenhilfslinie, bis dort Y=0 steht. Wir haben dies getan, um unseren Header-Bereich einzurichten. (M\u00f6glicherweise m\u00f6chten Sie damit experimentieren, diese Hilfslinien an verschiedenen Positionen zu platzieren, um unterschiedliche Ergebnisse zu erzielen, aber f\u00fcr den Moment ist es gut.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 W\u00e4hlen Sie das soeben erstellte Rechteck aus und ziehen Sie es in den Kopfbereich, damit es richtig passt.\n<\/p>\n
\n 14 Jetzt m\u00fcssen wir die Breite des Rechtecks \u200b\u200bauf 100 % erh\u00f6hen, damit die Kopfzeile auf jeder Bildschirmgr\u00f6\u00dfe perfekt aussieht. Erweitern Sie das Rechteck an beiden Kanten und stellen Sie sicher, dass es an den Kanten einrastet. Es erscheint eine orangefarbene Hilfslinie, die sicherstellt, dass das Objekt eingerastet ist. Wenn Sie die Breite des Rechtecks \u200b\u200berh\u00f6hen, zeigt das Popup W = 100 % oder W = 1160 an, wenn Sie den Rand erreichen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Lassen Sie das Rechteck ausgew\u00e4hlt, klicken Sie auf das Wort F\u00fcllen unter dem Anwendungsmen\u00fc und stellen Sie die Optionen wie folgt ein. W\u00e4hlen Sie die erste Farbe als Schwarz und die zweite Farbe: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Gehen Sie zu Datei > Website speichern. Speichern Sie Ihre Website jedes Mal, wenn Sie eine \u00c4nderung vornehmen.\n<\/p>\n
\n 17 Erstellen Sie ein Textfeld und geben Sie \u201eexample.com“ ein und \u00e4ndern Sie die Formatierung wie unten gezeigt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Passen Sie die Gr\u00f6\u00dfe des Textfelds so an, dass der gesamte Text in einer Zeile angezeigt wird. W\u00e4hlen Sie dieses Textfeld aus und ziehen Sie es \u00fcber das schwarze Rechteck. Richten Sie es an der vertikalen Mitte des Rechtecks \u200b\u200baus (eine blaue Linie zeigt Ihnen an, wann es zentriert ist) und rasten Sie es wie unten gezeigt am linken Rand ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Erstellen Sie ein Textfeld und geben Sie \u201eHome“ ein. \u00c4ndern Sie die Formatierung wie folgt. Passen Sie die Breite und H\u00f6he des Textfelds entsprechend an. Sie k\u00f6nnen dies auch \u00fcber das Transformationsfenster tun. Meine ist W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Kopieren Sie dieses Textfeld, f\u00fcgen Sie es ein und geben Sie \u201eServices“ in das neue ein. Passen Sie die Breite an. Ziehen Sie dieses Textfeld und platzieren Sie es neben dem Zuhause mit einem sehr geringen Unterschied zwischen den beiden. Auch hier helfen Ihnen die Hilfslinien bei der richtigen Ausrichtung.\n<\/p>\n
\n 21 Kopieren Sie dieses Textfeld, f\u00fcgen Sie es viermal ein und geben Sie \u201eWarum wir“, \u201eTestimonials“, \u201eKontakt“ und \u201eNewsletter“ ein. Platzieren Sie diese Textfelder nacheinander in gleichen Abst\u00e4nden neben \u201eDienste“.\n<\/p>\n
\n 22 W\u00e4hlen Sie bei ausgew\u00e4hltem Auswahlwerkzeug und gedr\u00fcckter Umschalttaste alle diese Textfelder nacheinander aus. Gehen Sie zum Textfeld und \u00e4ndern Sie die Farbe in Wei\u00df. W\u00e4hlen Sie die Gruppe dieser Felder aus und platzieren Sie sie \u00fcber dem Kopfzeilenrechteck. (Vertikal zentriert und am rechten Seitenrand ausgerichtet). Dies ist unsere Speisekarte.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 W\u00e4hlen Sie erneut mit ausgew\u00e4hltem Auswahlwerkzeug und gedr\u00fcckter Umschalttaste diese Textfelder, das Rechteck und das Textfeld example.com aus. Oben rechts sehen Sie eine Option namens Pin. Klicken Sie auf das K\u00e4stchen oben in der Mitte, um diese Elemente anzuheften. Das bedeutet, wenn der Benutzer durch Ihre Website scrollt, bleibt diese Kopfzeile oben fixiert. Dies ist sehr n\u00fctzlich, da der Benutzer nicht ganz nach oben scrollen muss, nur um eine andere Option auszuw\u00e4hlen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Wechseln Sie zum Ebenenbedienfeld und sperren Sie die Kopfzeilenebene. Klicken Sie dazu in das K\u00e4stchen links neben dem Ebenennamen. Wenn Sie eine Ebene oder ein beliebiges Objekt sperren, wirkt sich dies nicht auf das Erscheinungsbild aus, aber Sie k\u00f6nnen diese Elemente erst ausw\u00e4hlen, wenn Sie sie entsperren. Wir haben dies getan, um die Wahrscheinlichkeit eines versehentlichen Verschiebens der Gegenst\u00e4nde vollst\u00e4ndig auszuschlie\u00dfen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 W\u00e4hlen Sie die Inhaltsebene aus und reduzieren Sie das Ebenenbedienfeld.\n<\/p>\n
\n Diashow einrichten
\n<\/h3>\n\n 26 Gehen Sie zur Widgets-Bibliothek auf der rechten Seite des Anwendungsfensters. Wenn es nicht dort ist, gehen Sie zum Men\u00fc Fenster > w\u00e4hlen Sie Widgets-Bibliothek. Erweitern Sie den Abschnitt \u201eDiashows“ und w\u00e4hlen Sie \u201eLeer“. Klicken Sie auf dieses Objekt und ziehen Sie es auf die Leinwand. Ein schwarzes Fenster mit Diashow-Optionen wird eingeblendet.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Stellen Sie sicher, dass die Optionen wie im Bild unten gezeigt eingestellt sind. Deaktivieren Sie im Abschnitt \u201eTeile“ unten die Kontrollk\u00e4stchen \u201eZur\u00fcck“, \u201eWeiter“, \u201eUntertitel“ und \u201eZ\u00e4hler“. Wir brauchen nichts davon.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Klicken Sie auf eine beliebige Stelle auf der Leinwand, damit dieses Popup verschwindet. Klicken Sie nun vorsichtig in die Diashow. Wenn Sie einmal darauf klicken, sehen Sie, dass \u201eSlideshow“ in den Bereich \u201eArt der aktuellen Auswahl“ geschrieben wurde. Es befindet sich in der linken oberen Ecke unterhalb des Anwendungsmen\u00fcs. In diesem Bereich k\u00f6nnen Sie sehen, was Sie ausgew\u00e4hlt haben. Dies ist eine sehr n\u00fctzliche Funktion, wenn das Layout kompliziert wird. Klicken Sie erneut und Sie werden feststellen, dass in der Beschreibung \u201eHero Image“ steht.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Erh\u00f6hen Sie die Breite des Heldenbilds manuell, indem Sie es von der Mitte aus erweitern. Fangen Sie es an beiden R\u00e4ndern der Seite (um es auf 100% Breite zu bringen) und am unteren Rand des Kopfzeilenrechtecks, wie unten gezeigt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Gehen Sie zum Transformationspanel und geben Sie H=500 ein.\n<\/p>\n
\n 31 \u00d6ffnen Sie die Diashow-Optionen erneut, indem Sie auf den kleinen blauen Kreis mit dem wei\u00dfen Rechteck darin klicken (er befindet sich in der oberen rechten Ecke der Diashow).\n<\/p>\n
\n 32 Klicken Sie auf das Ordnersymbol neben der Option \u201eBilder hinzuf\u00fcgen\u2026“ und suchen Sie nach den Bildern, die wir f\u00fcr die Diashow heruntergeladen haben. W\u00e4hlen Sie alle vier aus und klicken Sie auf \u00d6ffnen.\n<\/p>\n
\n 33 Gehen Sie zu Datei > w\u00e4hlen Sie \u201eVorschauseite im Browser“ oder Strg+Umschalt+E und sehen Sie, wie Ihre Diashow funktionieren wird, sobald die Website live ist. Ich empfehle Ihnen, sich die Tastaturk\u00fcrzel zu merken, die ich in diesem Tutorial verwende. Auf diese Weise k\u00f6nnen Sie Ihren Designprozess beschleunigen.\n<\/p>\n
\n Abschnitt \u201eDienste“ erstellen
\n<\/h3>\n\n 34 Nachdem wir unsere Kopfzeile und Diashow eingerichtet haben, ist es an der Zeit, Abschnitte f\u00fcr jeden Eintrag zu erstellen, den wir unserem Men\u00fc hinzugef\u00fcgt haben. Beginnen wir mit \u201eDiensten“. Erstellen Sie ein Textfeld und geben Sie Services ein (alle Buchstaben klein) und \u00e4ndern Sie die Formatierung wie folgt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Doppelklicken Sie in dieses Textfeld und w\u00e4hlen Sie nur den Buchstaben \u201eI“ aus. \u00c4ndern Sie die Schriftart in \u201eChunk“ und lassen Sie alles gleich. Passen Sie die H\u00f6he dieses Textfelds an. Wenn Sie die H\u00f6he verringern, erscheint an einer bestimmten Stelle eine gestrichelte Linie und die Box wird nicht k\u00fcrzer. Verringern Sie die Gr\u00f6\u00dfe danach nicht. Dies ist die niedrigste H\u00f6he, die mit dieser Schriftgr\u00f6\u00dfe m\u00f6glich ist.\n<\/p>\n
\n 36 Gehen Sie bei ausgew\u00e4hltem Textfeld zum Transformationsbereich und stellen Sie den Rotationswinkel auf -90 Grad (90 Grad negativ) ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Verschieben Sie das Textfeld wie unten gezeigt auf die linke Seite der Leinwand.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Vielleicht m\u00f6chten Sie ein wenig herauszoomen, um den gesamten Inhalt auf einmal zu sehen oder um die Objekte richtig anzupassen. Versuchen Sie dazu, im oberen Abschnitt f\u00fcr die Zoomstufe andere Werte (weniger als 100 %) einzugeben. Nachdem Sie den Wert eingegeben haben, dr\u00fccken Sie die Eingabetaste.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Gehen Sie zu Datei > w\u00e4hlen Sie \u201ePlatzieren“. W\u00e4hlen Sie das erste Bild aus, das wir f\u00fcr unseren Servicebereich heruntergeladen haben. Klicken Sie auf \u00d6ffnen.\n<\/p>\n
\n 40 Der Cursor \u00e4ndert sein Aussehen in eine mit einem Bild geladene Platzkanone. Klicken Sie auf die Leinwand, um sie zu platzieren. Verschieben und platzieren Sie es so, dass es am oberen Rand des Textfelds \u201eDienste“ ausgerichtet ist.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Kopieren Sie dieses Bild und f\u00fcgen Sie es zweimal ein. W\u00e4hlen Sie diese eingef\u00fcgten Bilder einzeln aus und richten Sie sie im gleichen Abstand zum ersten Bild aus.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 W\u00e4hlen Sie das zweite Bild aus, klicken Sie mit der rechten Maustaste darauf und w\u00e4hlen Sie \u201eBild ersetzen“ (das ist die letzte Option). Suchen Sie nach dem zweiten Bild und klicken Sie auf \u201e\u00d6ffnen“. Ersetzen Sie auch das dritte Bild.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Erstellen Sie Textfelder f\u00fcr die Informationen zu Diensten und wenden Sie die Formatierung f\u00fcr \u00dcberschriften und Abs\u00e4tze an, wie unten beschrieben. Die Hilfslinien helfen Ihnen, sie richtig auszurichten.\n<\/p>\n
- \n
- \n F\u00fcr \u00dcberschriften:<\/strong> Schriftart: Raleway Bold, Gr\u00f6\u00dfe = 20, Farbe: Schwarz, linksb\u00fcndig und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr Abs\u00e4tze:<\/strong> Schriftart: Questrial, Gr\u00f6\u00dfe=15, Farbe: R=67 G=67 B=67, linksb\u00fcndig und 120 % Zeilenabstand.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Platzieren Sie drei weitere Bilder wie in den vorherigen Schritten und erstellen Sie auf \u00e4hnliche Weise einen Beschreibungstext f\u00fcr sie. Sie sollten das folgende Ergebnis haben.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Endergebnis des Abschnitts \u201eDienstleistungen“.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Abschnitt \u201eWarum wir“ erstellen
\n<\/h3>\n\n 45 Als n\u00e4chstes folgt der Abschnitt \u201eWarum wir“. Dieser ist ein wenig kompliziert. Seien Sie vorsichtig bei der Auswahl der Objekte. Erstellen Sie zun\u00e4chst ein Rechteck mit 100 % Breite und H=996. F\u00fcllen Sie es mit einer Farbe (R=47, G=48, B=55). Klicken Sie mit der rechten Maustaste auf dieses Rechteck> Anordnen> w\u00e4hlen Sie „Nach hinten senden“ (nicht nach hinten senden).\n<\/p>\n
\n 46 Erweitern Sie Ihren Arbeitsbereich, indem Sie auf die Hilfslinie \u201eEnde der Seite“ klicken und sie ziehen, sodass Sie gen\u00fcgend Platz haben, um Inhalte zu erstellen, die auf diesem Rechteck platziert werden, das wir gerade erstellt haben.\n<\/p>\n
\n 47 Scrollen Sie nach unten zum wei\u00dfen leeren Bereich und erstellen Sie ein weiteres Rechteck mit B = 351 und H = 351. F\u00fcllen Sie es mit wei\u00dfer Farbe und ohne Strich.\n<\/p>\n
\n 48 Gehen Sie zur Option \u201eEckenradius“ (sie befindet sich neben dem Strich unter dem Anwendungsmen\u00fc). Klicke alle Ecken an, um sie abzurunden, und gib 500 in das K\u00e4stchen daneben ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Sie haben einen Kreis. Ziehen Sie diesen Kreis auf das Rechteck und passen Sie ihn wie folgt an. Neben dem Eckenradius gibt es eine Option namens \u201eDeckkraft“. Geben Sie bei ausgew\u00e4hltem Kreis 14 in dieses Feld ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Erstellen Sie ein Textfeld und geben Sie ein \u2013 warum wir (alles klein). \u00c4ndern Sie die Schriftart in Rammetto One, Gr\u00f6\u00dfe = 100, Farbe R = 241 G = 244 B = 247, Zeilenabstand 100 %, und richten Sie sie zentriert aus. Setzen Sie dieses Textfeld in den Kreis und richten Sie es richtig aus.\n<\/p>\n
\n 51 Jetzt erstellen wir die gestrichelten Linien. Machen Sie ein Rechteck von W = 9 und H = 9, ohne F\u00fcllung. Klicken Sie neben \u201eF\u00fcllung“ auf das Wort \u201eStrich“. W\u00e4hlen Sie die Farbe R=241 G=244 B=247. Klicken Sie auf das Kettensymbol, um es zu brechen, und geben Sie \u201e1″ in das untere Strichgewicht ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Kopieren Sie dieses einseitige Strichrechteck und f\u00fcgen Sie es mehrmals ein. Ordnen Sie sie in einer Linie an (zoomen Sie mit dem Zoom-Werkzeug ein wenig hinein, wenn Sie diese Rechtecke nur schwer sehen k\u00f6nnen). Sobald Sie die gew\u00fcnschte L\u00e4nge Ihrer gestrichelten Linie erhalten haben, w\u00e4hlen Sie alle diese Rechtecke aus, klicken Sie mit der rechten Maustaste und w\u00e4hlen Sie \u201eGruppieren“. Kopieren Sie diese Gruppe und f\u00fcgen Sie sie f\u00fcr andere gestrichelte Linien ein.\n<\/p>\n
\n 53 Versuchen Sie f\u00fcr geneigte gestrichelte Linien, verschiedene Rotationswinkel in das Transformationsfeld einzugeben. Ich habe 150 und 30 Grad verwendet. Sie m\u00fcssen einige Rechtecke aus dieser Gruppe l\u00f6schen, um k\u00fcrzere L\u00e4ngen zu erhalten. Passen Sie diese Linien in der N\u00e4he des Kreises wie unten gezeigt an.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Jetzt f\u00fcgen wir etwas mehr Text f\u00fcr Nummern, \u00dcberschriften und Beschreibungen hinzu. Verwenden Sie die folgenden Einstellungen f\u00fcr jeden von ihnen und passen Sie diese Textfelder wie unten gezeigt an.\n<\/p>\n
- \n
- \n F\u00fcr Zahlen:<\/strong> Schriftart=Rammetto One, Farbe: R=196 G=214 B=193, zentriert und 100 % Zeilenabstand, Gr\u00f6\u00dfe: 200 (f\u00fcr Zahl \u201e1″), 160 (f\u00fcr Zahlen \u201e2″ und \u201e3″) und 120 (f\u00fcr die Nummern ‚4‘ und ‚5‘).\n <\/li>\n
- \n F\u00fcr \u00dcberschriften:<\/strong> Schriftart = Raleway Bold, Gr\u00f6\u00dfe = 18, Farbe: Wei\u00df, zentriert und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr Abs\u00e4tze:<\/strong> Schriftart=Questrial, Gr\u00f6\u00dfe=16, Farbe: R=241 G=244 B=247, zentriert und 120 % Zeilenabstand.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Endergebnis des Abschnitts \u201eWarum wir“.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Abschnitt \u201eTestimonials“ erstellen
\n<\/h3>\n\n 55 Schaffen Sie erneut etwas Platz zum Arbeiten, indem Sie den unteren Rand der Seitenf\u00fchrung nach unten ziehen. Erstellen Sie ein Rechteck mit 100 % Breite und H=486.\n<\/p>\n
\n 56 Klicken Sie bei ausgew\u00e4hltem Rechteck auf das Wort \u201eF\u00fcllen“ und dann neben der Bildoption auf \u201eBild hinzuf\u00fcgen“. Suchen Sie nach einem Brickwall-Musterbild, das wir heruntergeladen haben. W\u00e4hlen Sie unter Anpassungsoption \u201eKacheln“, um das gesamte Rechteck mit dieser Textur zu f\u00fcllen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Scrollen Sie nach unten zum leeren Bereich und erstellen Sie mit Hilfe des Transformationsfelds ein Textfeld der Gr\u00f6\u00dfe W = 406, H = 289. Geben Sie ein \u2013 \u201ewas andere zu sagen haben“ (alles klein). \u00c4ndern Sie die Schriftart in Rammetto One, Gr\u00f6\u00dfe = 70, machen Sie sie linksb\u00fcndig, Farbwerte R = 37 G = 37 B = 37 und Zeilenabstand = 100 %.\n<\/p>\n
\n 58 Wenn dieses Textfeld ausgew\u00e4hlt ist, klicken Sie auf das Wort Strich, wenden Sie einen rechten Strich mit der St\u00e4rke eins und schwarzer Farbe darauf an. Ziehen Sie dieses Textfeld und platzieren Sie es \u00fcber dem Rechteck mit Brickwall-Muster.\n<\/p>\n
\n 59 Der n\u00e4chste Schritt besteht darin, Erfahrungsberichte von Kunden hinzuzuf\u00fcgen. Dazu verwenden wir die Vektorbilder f\u00fcr runde Gesichter, die wir von freepik.com heruntergeladen haben. Kommen Sie wieder zu einem wei\u00dfen leeren Raum, damit Sie Ihre Komposition richtig anpassen k\u00f6nnen.\n<\/p>\n
\n 60 Gehen Sie zur Widgets-Bibliothek und ziehen Sie \u201eBlank“ aus dem Kompositionsabschnitt auf die Leinwand. Klicken Sie auf das Pluszeichen, um drei weitere Ausl\u00f6ser hinzuzuf\u00fcgen. W\u00e4hlen Sie den ersten Trigger sorgf\u00e4ltig aus und stellen Sie Ihre Auswahl mit Hilfe des aktuellen Auswahlbereichs sicher, auf dem Trigger steht. Und direkt daneben gibt es eine Option namens „Aktiv“. Klicken Sie darauf, um es zu erweitern. W\u00e4hlen Sie den Status \u201eNormal“ und w\u00e4hlen Sie f\u00fcr diesen Status \u201ekeine F\u00fcllung“ und \u201ekein Strich“. Wiederholen Sie dies f\u00fcr jeden Zustand, der Rollover, Mouse Down und Active ist. Gehen Sie mit dem ersten ausgew\u00e4hlten Ausl\u00f6ser zum Transformationsfeld und geben Sie W = 10, H = 10 ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Wiederholen Sie den vorherigen Schritt f\u00fcr jeden Trigger, den wir haben. Wenden Sie also keine F\u00fcllung und keinen Strich f\u00fcr jeden Zustand an und transformieren Sie die Trigger auf eine Gr\u00f6\u00dfe von 10 x 10. Bewegen Sie die Trigger n\u00e4her zueinander.\n<\/p>\n
\n 62 Jetzt. Wir passen die Ziele f\u00fcr jeden dieser Ausl\u00f6ser an. Das gro\u00dfe Rechteck, das Sie sehen, ist das Ziel. W\u00e4hlen Sie den ersten Trigger und seinen normalen Zustand aus dem Statusfeld aus. W\u00e4hlen Sie danach das Ziel f\u00fcr diesen Ausl\u00f6ser aus und wenden Sie f\u00fcr jeden Zustand keine F\u00fcllung und keinen Strich an. Gehen Sie dann zum Transformationsfeld und machen Sie das Ziel von W = 360, H = 370.\n<\/p>\n
\n 63 Wiederholen Sie den vorherigen Schritt f\u00fcr jedes Ziel. Stellen Sie einfach sicher, dass Sie zuerst den Ausl\u00f6ser ausw\u00e4hlen, ihn in den Normalzustand versetzen, dann das entsprechende Ziel mit Normalzustand ausw\u00e4hlen und dann keine F\u00fcllung und keinen Strich anwenden. Sie m\u00fcssen nicht die Gr\u00f6\u00dfe jedes Ziels \u00e4ndern. Mach es einfach f\u00fcr einen und es wird auf alle angewendet.\n<\/p>\n
\n 64 Jetzt fangen wir an, Inhalt zu dieser Komposition hinzuzuf\u00fcgen. Gehen Sie zu Datei > Platzieren und \u00f6ffnen Sie das erste Gesichtsbild und platzieren Sie es au\u00dferhalb der Komposition. Ziehen Sie dieses Bild und f\u00fcgen Sie es jetzt in die Komposition ein. Sie werden sehen, dass ein blauer Kreis in der oberen rechten Ecke erscheint, der anzeigt, dass dieses Bild jetzt Teil der Komposition ist.\n<\/p>\n
\n 65 Erstellen Sie drei Textfelder \u2013 eines f\u00fcr den Namen der Person, eines f\u00fcr seine\/ihre Bezeichnung und eines f\u00fcr die Aussage oder Bewertung. Wenden Sie die Formatierung wie unten beschrieben an und f\u00fcgen Sie diese Textfelder in die Komposition ein. Stellen Sie einfach sicher, dass jeder von ihnen einen blauen Kreis an der Ecke hat.\n<\/p>\n
- \n
- \n F\u00fcr den Namen der Person:<\/strong> Schriftart: Nobile Medium Italic, Gr\u00f6\u00dfe = 18, Farbe: R = 37 G = 37 B = 37, zentriert und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr Bezeichnung:<\/strong> Schriftart: Nobile, Gr\u00f6\u00dfe=15, Farbe: R=37 G=37 B=37, zentriert und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr Statements (mit Anf\u00fchrungszeichen):<\/strong> Schriftart: PT Sans Italic, Gr\u00f6\u00dfe=18, Farbe: R=69 G=64 B=68, zentriert und 100 % Zeilenabstand.\n <\/li>\n<\/ul>\n
\n 66 Wenden Sie bei ausgew\u00e4hltem Gesichtsbild auf jeder Seite einen Strich mit Gewicht 4 an, Farbe: Wei\u00df, runden Sie alle Ecken ab und vergr\u00f6\u00dfern Sie den Radius, bis er das Bild umschlie\u00dft. Ich habe 100 als Eckenradien verwendet.\n<\/p>\n
\n 67 Gehen Sie zu \u201eEffekte“ (neben der Option f\u00fcr abgerundete Ecken) und aktivieren Sie das Kontrollk\u00e4stchen \u201eSchatten“. Setzen Sie die Werte als; Farbe = Schwarz, Deckkraft = 37 %, Unsch\u00e4rfe = 12, Winkel = 78 und Abstand = 5.\n<\/p>\n
\n 68 Wiederholen Sie die vorherigen Schritte (von 64 bis 67), um Inhalt zu jedem Ziel hinzuzuf\u00fcgen, und speichern Sie die \u00c4nderungen (Strg+S). Legen Sie diese Komposition \u00fcber das Rechteck mit Brickwall-Muster.\n<\/p>\n
\n 69 W\u00e4hlen Sie nun die gesamte Komposition aus (achten Sie auf den aktuellen Auswahlbereich) und erweitern Sie die Optionen, indem Sie auf den kleinen blauen Kreis klicken. Stellen Sie die Optionen wie unten gezeigt ein. Dr\u00fccken Sie Strg + Umschalt + E und sehen Sie, ob es gut funktioniert.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Sie sollten das folgende Ergebnis erhalten.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Endergebnis des Abschnitts \u201eTestimonials“.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Abschnitt \u201eKontakt“ erstellen
\n<\/h3>\n\n 71 Der n\u00e4chste Abschnitt ist Kontaktieren Sie uns. Wir f\u00fcgen in diesem Abschnitt ein Hintergrundbild, ein Formular und einige Textfelder hinzu. Erstellen Sie zuerst ein Rechteck mit 100 % Breite und H = 692. F\u00fcllen Sie es mit einem Bild, das wir f\u00fcr diesen Abschnitt heruntergeladen haben, und w\u00e4hlen Sie unter \u201eAnpassen“ die Option \u201eZum Ausf\u00fcllen skalieren“. \u00c4ndern Sie die Deckkraft auf 72 %.\n<\/p>\n
\n 72 Erstellen Sie ein weiteres Rechteck mit derselben Breite und H\u00f6he und f\u00fcllen Sie es mit einem Farbverlauf. Setzen Sie die Gradientenwerte als; Opazit\u00e4t = 90 % bis 46 %, Farbe: Schwarz bis R = 69 G = 64 B = 68, Brennpunkt = 66 %, Richtung: Horizontal und Gr\u00f6\u00dfe: automatisch. Legen Sie dieses Rechteck \u00fcber das Bild und stellen Sie sicher, dass es an jeder Kante einrastet.\n<\/p>\n
\n 73 Gehen Sie zur Widgets-Bibliothek. W\u00e4hlen Sie unter Formularen \u201eeinfacher Kontakt“ und ziehen Sie ihn auf die Leinwand. Ein Fenster mit Formularoptionen wird angezeigt. Geben Sie den Formularnamen ein: Kontaktformular, E-Mail an: Geben Sie Ihre E-Mail-Adresse ein, an die Sie die von den Besuchern eingegebenen Informationen erhalten m\u00f6chten. Nach dem Senden: W\u00e4hlen Sie \u201eAuf der aktuellen Seite bleiben“. Die letzte Option ist \u201eGemeinsam bearbeiten“. Stellen Sie sicher, dass es \u00fcberpr\u00fcft wird. Auf diese Weise m\u00fcssen Sie \u00c4nderungen nur an einem Feld vornehmen und sie werden auf alle angewendet. Klicken Sie auf eine beliebige Stelle auf der Leinwand, damit das Optionsfeld verschwindet.\n<\/p>\n
\n 74 W\u00e4hlen Sie das Formular aus. Klicken Sie auf das Label \u201eName“ und klicken Sie erneut darauf, bis \u201eLabel“ im aktuellen Auswahlbereich angezeigt wird. Klicken Sie auf L\u00f6schen. Wiederholen Sie dies f\u00fcr E-Mail- und Nachrichtenlabels und l\u00f6schen Sie sie.\n<\/p>\n
\n 75 W\u00e4hlen Sie das Formular erneut aus und w\u00e4hlen Sie das erste Formularfeld mit der Aufschrift \u201eName eingeben“ aus, bis im aktuellen Auswahlbereich \u201eTexteingabe“ angezeigt wird. Wenden Sie keine F\u00fcllung und einen unteren Strich (Gewicht eins und Farbe Wei\u00df) f\u00fcr jeden Zustand an, dh von Leer bis Fokus. W\u00e4hlen Sie f\u00fcr den Fehlerstatus keine F\u00fcllung und einen unteren Strich in roter Farbe mit Gewichtung 1 aus.\n<\/p>\n
\n 76 W\u00e4hlen Sie danach bei ausgew\u00e4hltem E-Mail-Feld > seinen leeren Status erneut aus und passen Sie die Textschriftart und -farbe f\u00fcr jeden Status wie unten beschrieben an.\n<\/p>\n
- \n
- \n F\u00fcr leeren, nicht leeren und Fokusstatus:<\/strong> Schriftart: Questrial, Gr\u00f6\u00dfe = 14, Farbe: wei\u00df, linksb\u00fcndig, 100 % Zeilenabstand und keine Kursivschrift.\n <\/li>\n
- \n F\u00fcr den Rollover-Status:<\/strong> \u00c4ndern Sie einfach die Textfarbe in R = 196 G = 196 B = 196 und keine Kursivschrift.\n <\/li>\n
- \n F\u00fcr den Fehlerstatus:<\/strong> \u00c4ndern Sie die Textfarbe in Rot und nicht in Kursivschrift.\n <\/li>\n<\/ul>\n
\n 77 Klicken Sie auf und w\u00e4hlen Sie die Schaltfl\u00e4che Senden. W\u00e4hlen Sie den Normalzustand, runden Sie alle Ecken mit 40 Radien ab und vergr\u00f6\u00dfern Sie die Breite, wie im folgenden Screenshot gezeigt. \u00c4ndern Sie die Schriftart in Raleway Bold, Gr\u00f6\u00dfe = 20, mittig ausgerichtet, Farbe: R = 241 G = 244 B = 247, Zeilenabstand: Passen Sie den Text \u201eSenden“ in der Mitte der Schaltfl\u00e4che an, indem Sie diesen Wert erh\u00f6hen (ich habe 130 % verwendet). .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 \u00c4ndern Sie f\u00fcr die Zust\u00e4nde \u201eRollover“ und \u201eMaus gedr\u00fcckt“ die Strichfarbe und die Textfarbe in Grau (R=127 G=127 B=127). \u00c4ndern Sie schlie\u00dflich f\u00fcr den Status „Einreichen in Bearbeitung“ die Strich- und Textfarbe in Himmelblau (R = 41 G = 171 B = 226).\n<\/p>\n
\n 79 Wenn Sie f\u00fcr diese Schaltfl\u00e4che \u201eSenden“ den Status \u201eEinreichen“ ausw\u00e4hlen, sehen Sie, dass es ein weiteres Textfeld mit der Aufschrift \u201eFormular wird \u00fcbermittelt\u2026“ gibt. Aktivieren Sie dieses Kontrollk\u00e4stchen und w\u00e4hlen Sie den Status \u201eEinreichen in Bearbeitung“. \u00c4ndere die Schriftart auf Questrial, Gr\u00f6\u00dfe=14, Farbe: grau, zentriert und nicht kursiv. W\u00e4hlen Sie den Status \u201eErfolgreich \u00fcbermitteln“ und \u00e4ndern Sie die Textfarbe in Himmelblau (nicht kursiv). W\u00e4hlen Sie den Status \u201eFehler senden“ und \u00e4ndern Sie die Textfarbe in Rot (nicht kursiv). Das Kontaktformular ist fertig.\n<\/p>\n
\n 80 Erstellen Sie zwei Textfelder. Geben Sie \u2013 kontaktieren Sie uns ein und geben Sie in der zweiten Zeile \u201eAlle Felder sind Pflichtfelder“ ein. Verwenden Sie f\u00fcr den Kontakttext die Schriftart: Rammetto One, Gr\u00f6\u00dfe = 60, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 100 % und linksb\u00fcndig. Verwenden Sie f\u00fcr den Text \u201eAlle Felder sind Pflichtfelder“ folgende Schriftart: Nobile italic, Gr\u00f6\u00dfe = 26, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 100 % und linksb\u00fcndig. Wenden Sie f\u00fcr dieses Textfeld den unteren Strich mit der St\u00e4rke 1 und der Farbe Wei\u00df an.\n<\/p>\n
\n 81 Geben Sie einen Absatz in das zweite Textfeld ein, das wir erstellt haben. Verwenden Sie Schriftart: PT Sans Italic, Gr\u00f6\u00dfe = 14, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 120 %, linksb\u00fcndig und Abstand davor = 15.\n<\/p>\n
\n 82 Platzieren Sie diese Textfelder und das Formular auf dem Bild, das wir platziert haben. Stellen Sie sie wie folgt ein.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Erstellen Sie ein weiteres Textfeld f\u00fcr einige Kontaktinformationen wie B\u00fcroadresse, E-Mail und Telefonnummern. Setzen Sie dieses Textfeld auf das Bild. Sie sollten das folgende Ergebnis haben.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Endergebnis des Abschnitts \u201eKontakt“.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Fu\u00dfzeile erstellen
\n<\/h3>\n\n 84 Der letzte Abschnitt ist Fu\u00dfzeile. Am unteren Rand befinden sich drei Hilfslinien \u2013 Seitenende, Fu\u00dfzeile und Browserende. Was Sie jetzt tun m\u00fcssen, ist sicherzustellen, dass die F\u00fchrung \u201eEnde der Seite“ mit dem Ende des Abschnitts \u201eKontakt“ einrastet und die F\u00fchrung \u201eFu\u00dfzeile“ mit der F\u00fchrung \u201eEnde der Seite“ \u00fcbereinstimmt. Danach k\u00f6nnen Sie die Hilfslinie \u201eUnterseite des Browsers“ nach unten ziehen, um den Platz anzupassen, den Sie f\u00fcr die Fu\u00dfzeile ben\u00f6tigen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Erstellen Sie zwei Rechtecke mit 100 % Breite und H=168 f\u00fcr das erste und H=37 f\u00fcr das andere. \u00c4ndern Sie die F\u00fcllfarbe des gro\u00dfen Rechtecks \u200b\u200bin Wei\u00df und verwenden Sie R = 47, G = 48, B = 55 f\u00fcr das k\u00fcrzere.\n<\/p>\n
\n 86 W\u00e4hlen Sie das erste Rechteck aus und versuchen Sie, es im Fu\u00dfbereich zu platzieren. Dorthin wird es nicht gehen. Stattdessen wird die untere Seitenf\u00fchrung nach unten erweitert. Um dieses Rechteck zu einem Fu\u00dfzeilenelement zu machen, aktivieren Sie das Kontrollk\u00e4stchen \u201eFu\u00dfzeile“ oben rechts im Anwendungsfenster. Machen Sie es auch f\u00fcr das zweite Rechteck.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Platzieren Sie diese Rechtecke nun im Fu\u00dfzeilenbereich und achten Sie darauf, dass das gro\u00dfe Rechteck etwas \u00fcber der Fu\u00dfzeilenf\u00fchrung liegt. Die Unterseite des farbigen Rechtecks \u200b\u200bmuss mit der Unterseite der Browserf\u00fchrung einrasten. Andernfalls sehen Sie nach der Fu\u00dfzeile eine kleine wei\u00dfe L\u00fccke, die nicht sch\u00f6n aussieht.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Erstellen Sie Textfelder f\u00fcr die Fu\u00dfzeile und geben Sie ein, was Sie wollen. Aktivieren Sie einfach das Kontrollk\u00e4stchen \u201eFu\u00dfzeile“ f\u00fcr die Textfelder, die Sie hinzuf\u00fcgen m\u00f6chten. Ich habe einen Text mit Haftungsausschluss und Copyright-Informationen hinzugef\u00fcgt.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 Das \u201eMade with Adobe Muse CC“-Abzeichen kann aus der Widgets-Bibliothek im Abschnitt \u201eSoziale Netzwerke“ hinzugef\u00fcgt werden. Sie k\u00f6nnen auch Links zu Ihrer Facebook-Seite, Twitter, Google+, LinkedIn, Pinterest, YouTube-Kanal oder Vimeo-Link hinzuf\u00fcgen.\n<\/p>\n
\n 90 Das Copyright-Symbol und viele andere Symbole, die Sie neben dem Text Alle Rechte vorbehalten sehen, k\u00f6nnen \u00fcber das Bedienfeld \u201eGlyphen“ auf der rechten Seite des Anwendungsfensters hinzugef\u00fcgt werden. Wenn es nicht da ist, gehen Sie zum Men\u00fc Fenster > w\u00e4hlen Sie Glyphen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Abschnitt \u201eNewsletter“ erstellen
\n<\/h3>\n\n 91 Bis jetzt haben wir Abschnitte f\u00fcr alle Men\u00fcpunkte entworfen, bis auf einen, und das ist \u201eNewsletter“. Lass uns etwas Interessantes damit machen. Denken Sie an das Kreuzsymbol, das wir heruntergeladen haben, es wird hier verwendet (es ist in Ordnung, wenn Sie es nicht heruntergeladen haben, Sie k\u00f6nnen es trotzdem verfolgen). W\u00e4hlen Sie zun\u00e4chst das Textfeld \u201eNewsletter“ aus und notieren Sie dessen Breite und H\u00f6he im Transformationsfeld. Meine ist 81 x 17.\n<\/p>\n
\n 92 \u00d6ffnen Sie nun die Widgets-Bibliothek und ziehen Sie \u201eLightbox Display“ aus dem Kompositionsbereich. L\u00f6schen Sie die ersten beiden Trigger (befindet sich oben) und l\u00f6schen Sie alle Beschriftungen (befindet sich unten). Stellen Sie die Gr\u00f6\u00dfe des dritten Ausl\u00f6sers auf die gleiche Gr\u00f6\u00dfe wie das Textfeld \u201eNewsletter“ ein, das 81 x 17 betr\u00e4gt. \u00c4ndern Sie seine F\u00fcllung und Kontur f\u00fcr alle Status auf \u201eKeine“.\n<\/p>\n
\n 93 Ziehen Sie das Newsletter-Textfeld und platzieren Sie es so in diesem Ausl\u00f6ser, dass alle Kanten des Textfelds mit den Kanten des Ausl\u00f6sers \u00fcbereinstimmen. Ziehen Sie nun diese Gruppe und f\u00fcgen Sie sie wieder in das Men\u00fc ein, wo sie vorher platziert war. Was wir getan haben, ist, dass wir einen Link zum Newsletter-Textfeld angebracht haben. Wenn der Benutzer darauf klickt, wird die Website ausgeblendet und das Ziel erscheint.\n<\/p>\n
\n 94 Der n\u00e4chste Schritt besteht darin, unser Ziel anzupassen. W\u00e4hlen Sie den grauen Bereich aus und vergewissern Sie sich, dass im aktuellen Auswahlbereich \u201eZiel“ steht. Sie m\u00fcssen dreimal klicken, um es auszuw\u00e4hlen. \u00c4ndern Sie die F\u00fcllung und den Strich f\u00fcr alle Status in \u201eKeine“.\n<\/p>\n
\n 95 F\u00fcgen Sie zwei Textfelder und ein einfaches Kontaktformular hinzu (l\u00f6schen Sie die Namens- und Nachrichtenfelder und behalten Sie nur das E-Mail-Feld). Ziehen Sie sie in diese Komposition und stellen Sie sicher, dass alle einen blauen Kreis an ihren Ecken haben.\n<\/p>\n
\n 96 Passen Sie das Formular wie im Abschnitt \u201eKontakt“ an. Sie sollten das folgende Ergebnis haben. Verwenden Sie f\u00fcr das Textfeld „In Kontakt bleiben“ die Schriftart: Lobster, Gr\u00f6\u00dfe = 40, Farbe: wei\u00df, zentriert und 100 % Zeilenabstand. Verwenden Sie f\u00fcr den Beschreibungstext darunter die Schriftart: Ubuntu Light Italic, Gr\u00f6\u00dfe = 14, Farbe: wei\u00df, zentriert und 120 % Zeilenabstand. \u00c4ndern Sie den Text der Schaltfl\u00e4che \u201eSenden“ in \u201eAbonnieren“.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 W\u00e4hlen Sie nun die Schlie\u00dfen-Schaltfl\u00e4che aus, verschieben Sie sie und platzieren Sie sie wie unten gezeigt in der oberen rechten Ecke dieser Lightbox-Anzeige. Klicken Sie hinein, bis im aktuellen Auswahlbereich \u201eLabel“ steht. Etikett l\u00f6schen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 \u00c4ndern Sie die F\u00fcllung und den Strich dieser Schlie\u00dfen-Schaltfl\u00e4che f\u00fcr alle Zust\u00e4nde auf \u201eKeine“ und machen Sie sie zu \u201eB=40″ und \u201eH=40″. Gehen Sie zu F\u00fcllung > Bild hinzuf\u00fcgen und suchen Sie nach dem Kreuzbild. W\u00e4hlen Sie unter Anpassungsoption \u201eAnpassung skalieren“.\n<\/p>\n
\n 99 Klicken Sie auf Newsletter und Sie sehen einen blauen Kreis an seiner Ecke. Klicken Sie darauf und stellen Sie sicher, dass die Optionen wie folgt eingestellt sind.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Endergebnis des Abschnitts \u201eNewsletter“.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Erstellen von Hyperlinks
\n<\/h3>\n\n 100 Die letzte verbleibende Aufgabe besteht darin, Links zu jedem Abschnitt hinzuzuf\u00fcgen. W\u00e4hlen Sie dazu die Option \u201eLink-Anker“ im oberen mittleren Bereich oder dr\u00fccken Sie den Buchstaben \u201ea“ auf Ihrer Tastatur. Sie werden sehen, dass der Cursor sein Aussehen in eine Platzkanone \u00e4ndert, die mit einem Link-Anker geladen ist.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Wenn Sie auf die Leinwand klicken, um dies zu platzieren, wird ein Dialogfeld angezeigt, in dem Sie einen Anker umbenennen k\u00f6nnen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Erstellen Sie Link-Anker f\u00fcr jeden Abschnitt, den wir entworfen haben, d. h. \u201eStartseite“, \u201eDienstleistungen“, \u201eWarum wir“, \u201eEmpfehlungen“ und \u201eKontakt“. Platzieren Sie die Anker oben auf jedem Abschnitt. Der Home-Anker ist unten als Beispiel dargestellt. Das Platzieren dieser Anker ist ein wichtiger Schritt und sollte sorgf\u00e4ltig durchgef\u00fchrt werden. Wenn der Benutzer auf einen bestimmten Link klickt, scrollt die Website zu der Position, an der der Anker platziert wurde.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Jetzt wenden wir die Verkn\u00fcpfungen an. W\u00e4hlen Sie dazu das Textfeld \u201eHome“ aus. Gehen Sie zur Option \u201eHyperlinks“ (ganz oben) und klicken Sie auf den kleinen Abw\u00e4rtspfeil, um die Liste zu erweitern. Hier sehen Sie alle Anker, die wir gerade platziert haben. Verkn\u00fcpfen Sie es mit dem ‚Home‘-Anker. Wiederholen Sie diesen Schritt f\u00fcr andere Textfelder au\u00dfer Newsletter, da wir darauf eine Lightbox-Anzeige angewendet haben.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Endergebnis nach dem Erstellen von Hyperlinks
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Feinschliff \u2013 Seiteneigenschaften \u00e4ndern und Favicon hinzuf\u00fcgen
\n<\/h3>\n\n 104 Klicken Sie im Planungsmodus mit der rechten Maustaste auf die Startseite und w\u00e4hlen Sie \u201eSeiteneigenschaften“. Ein Dialogfeld wird angezeigt. W\u00e4hlen Sie die Registerkarte \u201eOptionen“ und geben Sie unter dem Seitennamen \u2013 \u201eWillkommen bei example.com“ ein und klicken Sie auf \u201eOK“. Dies ist der Text, der oben im Browserfenster angezeigt wird.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Gehen Sie zu Datei > Site-Eigenschaften. Auf der Registerkarte \u201eLayout“ ist die letzte Option \u201eFavicon“. Wenn Sie den Mauszeiger dar\u00fcber bewegen, erscheint ein Popup, das beschreibt, was ein Favicon ist und wie die optimale Gr\u00f6\u00dfe sein sollte. Es ist gut, ein Favicon hinzuzuf\u00fcgen, da es dazu beitr\u00e4gt, Ihre Marke hervorzuheben, und auch dazu dient, den Benutzern zu helfen, Ihre Website leicht zu identifizieren, wenn sie sie mit einem Lesezeichen versehen haben.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Testen und Exportieren
\n<\/h3>\n\n 106 Testen Sie Ihre Website, indem Sie im Browser auf Datei > Website-Vorschau gehen oder Strg+Alt+E dr\u00fccken. W\u00e4hlen Sie dieses Mal nicht \u201eVorschauseite im Browser“ aus, da die Links in der Seitenvorschau nicht funktionieren. Sie k\u00f6nnen versuchen, die Anker an verschiedenen Stellen zu platzieren, um sicherzustellen, dass die Website zum richtigen Abschnitt und zur richtigen Position scrollt, wenn der Benutzer auf einen Link klickt.\n<\/p>\n
\n 107 Gehen Sie zuletzt zu Datei > Als HTML exportieren (Strg+E). Geben Sie unter Website-URL einen beliebigen Namen wie \u201eexample.com“ ein und w\u00e4hlen Sie den Standort aus. OK klicken. Die Webseite ist fertig.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Endergebnis jeder Seite
\n<\/h3>\n\n Titelseite
\n<\/h5>\n<\/a><\/p>\n\n Abschnitt \u201eDienstleistungen“.
\n<\/h5>\n<\/a><\/p>\n\n Abschnitt \u201eWarum wir“.
\n<\/h5>\n<\/a><\/p>\n\n Abschnitt \u201eErfahrungsberichte“.
\n<\/h5>\n<\/a><\/p>\n\n Abschnitt \u201eKontaktieren Sie uns“.
\n<\/h5>\n<\/a><\/p>\n\n Fu\u00dfbereich
\n<\/h5>\n - \n F\u00fcr den Rollover-Status:<\/strong> \u00c4ndern Sie einfach die Textfarbe in R = 196 G = 196 B = 196 und keine Kursivschrift.\n <\/li>\n
- \n F\u00fcr Bezeichnung:<\/strong> Schriftart: Nobile, Gr\u00f6\u00dfe=15, Farbe: R=37 G=37 B=37, zentriert und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr \u00dcberschriften:<\/strong> Schriftart = Raleway Bold, Gr\u00f6\u00dfe = 18, Farbe: Wei\u00df, zentriert und 100 % Zeilenabstand.\n <\/li>\n
- \n F\u00fcr Abs\u00e4tze:<\/strong> Schriftart: Questrial, Gr\u00f6\u00dfe=15, Farbe: R=67 G=67 B=67, linksb\u00fcndig und 120 % Zeilenabstand.\n <\/li>\n<\/ul>\n
- \n F\u00fcr \u00dcberschriften:<\/strong> Schriftart: Raleway Bold, Gr\u00f6\u00dfe = 20, Farbe: Schwarz, linksb\u00fcndig und 100 % Zeilenabstand.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n