No-Code-Webdesign mit Elementor und Wordpress

No-Code-Webdesign mit Elementor und Wordpress

“ Jetzt werden wir die wichtigsten Phasen der Entwicklung Ihrer Website überprüfen, damit Sie Ihr Projekt der Domestika-Community präsentieren können. Ich möchte, dass Sie kurz erklären, was Sie in jedem getan haben, und die Erklärung mit einem oder mehreren Bildern begleiten. Konzept und Referenzen Beginnen Sie mit der Entwicklung des gesamten Konzepts Ihrer Website. Sammeln Sie dazu zunächst visuelle Referenzen, die Sie inspirieren, und speichern Sie sie in einem Ordner oder Lesezeichen. Oh! Und vergessen Sie nicht, dass Sie sich von allem inspirieren lassen können, nicht nur von Webseiten, sondern von jedem Objekt um Sie herum, Musik, Ihrer Stadt, einer Landschaft... Was auch immer!

Karte Ihrer Website Zeichnen Sie zweitens eine Website-Karte, in der Sie die Seiten definieren, die die Navigation Ihrer Website bilden, und wie sich der Benutzer durch sie bewegt. Styleguide Sammeln Sie dann alle allgemeinen Elemente und Stile, die Sie für Ihre Website wünschen: Logo, Schriftartensatz, Farbpalette und optional grafische Elemente. Erstellen Sie mit all dem einen Styleguide. Gestaltungsvorschlag Jetzt werden Sie am Designvorschlag arbeiten, der einer der aufregendsten Teile des gesamten Prozesses ist. Dazu können Sie mit dem gewünschten Designprogramm arbeiten. Gestalten Sie mit allen Elementen Ihres Styleguides jeden Abschnitt, aus dem Ihre Website besteht und den Sie zuvor in der Sitemap definiert haben. Denken Sie daran, dass Sie, wenn Sie nicht wissen, welche Inhalte oder Strukturen Sie in jedem dieser Abschnitte verwenden sollen, jederzeit einen Blick auf die visuellen Referenzen werfen können, um sich inspirieren zu lassen. Das Wichtigste am Designvorschlag ist, dass er Ihnen hilft, sich vorzustellen, wie Ihre Website aussehen wird, wenn Sie später mit Elementor arbeiten. Design in WordPress und Elementor Installieren und konfigurieren Sie die Tools, mit denen Sie in diesem Kurs arbeiten werden, um Ihre gesamte Site zu erstellen. Stellen Sie dazu zunächst sicher, dass Sie über ein Hosting und eine Domain verfügen, auf der Sie WordPress installieren können. Wenn Sie es installiert haben, konfigurieren Sie es und erstellen Sie die Seiten und Navigationsmenüs Ihrer Website. Der nächste Schritt besteht darin, das Elementor-Plugin und das Design zu installieren, das Sie als Basis verwenden werden: „Hello Theme“. Jetzt müssen Sie nur noch Elementor Pro herunterladen und installieren, das erstaunliche Funktionen zum Erstellen Ihres gesamten Website-Designs enthält. Es ist an der Zeit, den gesamten Webdesign-Vorschlag auf eine 100 % reale und funktionale Website zu übertragen. Dazu arbeiten Sie mit Elementor, dem Standard-Kit, seinem Theme-Builder und seinen Vorlagenoptionen. Denken Sie daran, dass Sie an dieser Stelle immer den Webdesign-Vorschlag berücksichtigen müssen, den Sie zuvor vorbereitet haben. Beginnen Sie mit der Erstellung der Kopf- und Fußzeile. Fahren Sie mit der Gestaltung der Homepage fort und vergessen Sie nicht, Animationseffekte einzufügen, um sie viel visueller und attraktiver zu machen. Erstellen Sie nun die Projektvorlage und die Portfolio-Startseite. Und klicken Sie auch auf die Abschnitte "Über" und "Kontakt". Oh! Vergessen Sie nicht, die Bilder auf Ihrer Website zu optimieren, damit sie nicht zu viel wiegen und schnell geladen werden, und denken Sie daran, diese Bilder mit Texten zu begleiten, die Ihre Arbeit unterstützen, kontextualisieren und humanisieren. Arbeiten Sie schließlich auch an der Gestaltung der sekundären Bereiche Ihrer Website, wie z. B. der Datenschutzseite, der „Error 404“-Seite und der Wartungsseite. Testen und Freigeben Sie haben nur noch sehr wenig zu beenden! Es ist an der Zeit, das Web in verschiedenen Browsern und Geräten zu testen, da ein Web in einigen von ihnen manchmal etwas anders aussieht. Notieren Sie alle Details, die nicht wie erwartet funktionieren oder angezeigt werden, und korrigieren Sie sie später in Elementor. Wenn Sie alles korrigiert haben, ist alles bereit, damit Ihre Website von der ganzen Welt gesehen werden kann! Sobald Sie es starten, vergessen Sie nicht, es auf dem neuesten Stand zu halten Ah! Und denken Sie daran, vor jedem Update ein Backup zu erstellen. Es ist an der Zeit, dass Sie Ihr fertiges Projekt mit der Community teilen, indem Sie auf „Create your project“ klicken. Denken Sie daran, den Link zu teilen, um die von Ihnen gestaltete Website zu sehen, und teilen Sie uns auch den gesamten kreativen Prozess mit, der Sie zu dieser Website geführt hat. Wenn Sie die Website zu irgendeinem Zeitpunkt in den Wartungsmodus versetzt haben, deaktivieren Sie diesen bitte, damit wir Ihre Website vollständig sehen können. Es ist sicher erstaunlich :). Ich freue mich darauf, Ihr Projekt zu sehen und Ihnen Feedback zu geben. Obwohl ich um Ihre Geduld bitte, werde ich versuchen, so viel wie möglich auf das Forum zuzugreifen und was meine beruflichen Projekte mir erlauben. Abschließend möchte ich Sie einladen, sich aktiv am Forum zu beteiligen und nicht nur Ihre Fortschritte zu teilen, sondern auch Ratschläge zu geben und zu versuchen, dem Rest der Community zu helfen. Wir sehen uns im Forum! ”

Partielle Transkription des Videos

“Abschlussprojekt Jetzt ist Ihre Zeit gekommen. Ich werde mit Ihnen einige wesentliche Schritte durchgehen damit Sie Ihre eigene Website erstellen können. Die Wahrheit ist, dass es viele neue Informationen waren, Seien Sie also super stolz, so weit gekommen zu sein und die Angst vor Webdesign verloren zu haben. Denken Sie immer daran, zu beginnen Sammeln Sie einige visuelle Referenzen, die Sie inspirieren. Sie können sie in einem Ordner speichern oder ein Moodboard damit erstellen. Zeichnen Sie dann eine Karte Ihres Standorts, einschließlich aller Abschnitte, die Sie für Ihre Website wünsche...”

Diese Transkription wurde maschinell erstellt und kann daher Fehler aufweisen.

Zusammenfassung des Kurses: No-Code-Webdesign mit Elementor und Wordpress

• Niveau: Anfänger
• 98% positive Bewertungen (263)
• 14672 Lernende
• 4 Kurseinheiten
• 20 Lektionen (3 Stdn. 28 Min.)
• ‌5 Downloads

• Kategorie

  Web- und App-Entwicklung

• Bereiche

  App-Design, Digitales Produktdesign, Portfolioverwaltung, Webdesign