So kannst du deine eigene Hochzeits-Website einrichten und gestalten: Vom Erwerb eines Domain-Namens zur Live-Schaltung

1. Einführung: Hi, ich bin Sarah. Ich bin Designer und Front-End-Entwickler mit Sitz in Toronto. Als Mitbraut zu sein, ich weiß, wie wichtig es ist, Ihre Kosten auf ein Minimum zu halten und alles super einfach zu halten. Mit diesem Kurs werde ich Ihnen zeigen, wie Sie eine Website für Ihre Hochzeit von Anfang bis Ende erstellen. Alles vom Kauf der Domain bis hin zum Live. Am Ende des Kurses haben Sie eine Website, auf der Ihre Gäste sowohl RSVP als auch alles, was sie für den großen Tag brauchen, erfahren können. Sie müssen nicht wissen, wie Sie diese Website erstellen. Das Thema ist völlig anpassbar, um Ihre Hochzeit zu passen und reagiert auf alle Bildschirmgrößen. 2. Kauf eine Domain: Als erstes müssen Sie einen Domain-Namen kaufen. Die häufigste Sache ist, die Vornamen der Braut und des Bräutigams zu verwenden. Wenn Sie zu godaddy.com gehen, können Sie einen Domainnamen durchsuchen und sehen, ob er verfügbar ist. Wie Sie sehen können, durchsuchte ich Kevin und Sarah, kevinandsarah.com war weg, aber ich entschied mich, mit kevinandarh.rocks zu gehen, nur um süß zu sein. Dann können Sie es in Ihren Warenkorb legen. Allerdings möchten Sie vielleicht gehen und kaufen Hosting zuerst, und dann erhalten Sie den Domain-Namen kostenlos. Allerdings habe ich bereits Hosting mit GoDaddy, also werde ich nur den Domain-Namen kaufen. Sie müssen Hosting kaufen, sonst ist Ihre Website nicht sichtbar. Sie können mit dem Warenkorb fortfahren. Sobald Sie alle Artikel haben, die Sie benötigen und Kasse mit PayPal oder Kreditkarte. Sie können auch zwischen einem Jahr bis fünf Jahren wählen. Ich wählte nur ein Jahr, weil ich es nach der Hochzeit nicht brauchen, aber fühlen Sie sich frei, mehr von Ihnen wählen wollen, um es als Erinnerung zu behalten. Sobald Sie ausgecheckt haben, sollte alles gut zu gehen sein und Sie werden bald eine E-Mail mit allen Informationen über Ihre neue Website erhalten . Als nächstes klicken Sie auf Ihren Namen oben rechts und wählen Sie Mein Konto besuchen. Hier finden Sie alle Ihre Produkte, Informationen über Ihre Domain sowie Ihr Hosting. Dies ist, wo wir beginnen, um zu bekommen wie Sie die WordPress-Seite zu Ihrer Website hinzufügen. 3. Richte ein Hosting ein: Als nächstes wollen wir das Hosting mit dem Domain-Namen setzen. Wenn Sie oben rechts klicken und zu „Mein Konto“ gehen , sehen Sie Ihr Webhosting in der zweiten Zeile, klicken Sie darauf und wählen Sie „Verwalten“. Sobald Sie auf der Hosting-Seite sind, werden Sie eine Liste aller Ihrer Domains sehen, ich habe einige, aber Sie können nur eine haben. Um eine Domain zu Ihrem Hosting hinzuzufügen, klicken Sie auf „Domain hinzufügen“ und geben Sie den Namen der Website ein, die Sie gerade gekauft haben. Für mich ist es Kevinandsarah.Rocks. Sobald Sie den ersten Buchstaben eingeben, wird er darunter aufgefüllt. Wählen Sie dann einen Namen für Ihren Ordner aus. Dies kann sein, was Sie wollen, etwas, das leicht zu merken ist, und klicken Sie auf „OK“. Wenn Sie den Namen unter dem Domänenfeld eingeben, bedeutet dies, dass er noch nicht fertig war. Vielleicht kommst du in ein paar Stunden zurück, um zu sehen, ob es da ist, denn manchmal kann es etwas länger dauern. Sobald es hinzugefügt wurde, wird es in Ihrer Liste angezeigt. Es wird „Ausstehend“ unter dem Status stehen. Das dauert auch einige Zeit. Sie erhalten in der Regel eine E-Mail, die Benachrichtigung, dass es fertig ist. 4. Verwende Wordpress: Jetzt, da das Hosting fertig ist, können wir WordPress installieren. Wenn Sie oben links im grünen Navigationsmenü gehen und auf die Startseite klicken, wird diese Seite angezeigt. Auf der rechten Seite sehen Sie Optionen und Einstellungen. Klicken Sie auf Wordpress. Jetzt können Sie Ihre WordPress-Anwendungen verwalten. Sie möchten also auf Installieren klicken. Sie möchten den Domain-Namen der Hochzeitswebsite auswählen und dann ein Verzeichnis ablegen. Das Verzeichnis ist, wo Ihre WordPress-Website wird zu leben. Ich möchte, dass es auf der Seite ist, auf der die Menschen landen, wenn sie kevinandsarah.rocks tippen. Wie auch immer Sie möchten, dass es kevinandsarah.rocks/wedding. Um es auf die Hauptroute zu bekommen, die kevinandsarah.rocks wäre, lassen Sie es einfach leer. Sie müssen auch Ihren Administratornamen und Ihr Administratorkennwort hinzufügen. Dies ist, was Sie brauchen, um sich auf der WordPress-Website einloggen, um Änderungen vorzunehmen, Fotos hochzuladen, all die Dinge, die wir in der Zukunft tun werden. Sie müssen auch Ihre E-Mail hinzufügen und Sie können einen Blogtitel eingeben. Aber keine Sorge, Sie können dies immer später ändern, sobald wir uns in der WordPress-Website anmelden. Wenn Sie alle Felder ausgefüllt haben, klicken Sie auf OK. Wie Sie sehen können, sagt es WordPress installiert. Das dauert auch einige Zeit. Lehnen Sie sich zurück, entspannen Sie sich und warten Sie, bis die E-Mail sagt, dass sie fertig ist. 5. Login bei Wordpress: Sobald WordPress installiert ist, können wir uns einloggen und einige Änderungen vornehmen. Wenn Sie Ihre Hochzeits-Website gerade jetzt eingeben, ist dies, was Sie sehen würden. Ein unvollendetes Design, um Änderungen vorzunehmen, sollten Sie sich jedoch anmelden. Sie möchten also zu Ihrer Website-Adresse Schrägstrich wp dash admin gehen. Wenn Sie zur Anmeldeseite gelangen, sehen Sie den Admin-Namen sowie das Admin-Passwort. Wenn Sie sich erinnern, haben wir diese eingerichtet, wenn wir die WordPress-Anwendung in Go Daddy einrichten . Geben Sie das Passwort und Ihren Benutzernamen ein und klicken Sie auf Anmelden. Sie sind jetzt in WordPress, hier werden wir Ihre Website zu bauen. Stellen Sie sicher, dass Sie diese Seite mit einem Lesezeichen versehen, manchmal ist es schwer, sich an die lange Adresse zu erinnern, die Sie eingeben müssen, um hierher zu gelangen. 6. Kauf eines Themas: Sie sind jetzt bereit, ein Design hinzuzufügen. Es gibt viele Themen da draußen, zum Kauf und kostenlos. Der, den ich in diesem Tutorial verwende, stammt von themeforest.com. Wenn Sie zu themeforest.com gehen und Lily eingeben, finden Sie dieses Thema. Ich wählte dieses Thema, weil es schön ist und ich mochte die Timeline in der Nähe der Unterseite, die alle wichtigen Ereignisse von Ihnen und Ihrer Braut zu sein oder Bräutigam, um die Frau zu sein zeigt. Dieses Thema hat alles von Ihrer Brautparty-Registrierung, RSVP-Standort, sowie alle anderen Details, die Sie hinzufügen möchten. Dies ist ein kostenpflichtiges Thema. Es gibt Vor- und Nachteile über bezahlte und kostenlose Themen. Kauf von bezahlten Thema ist großartig, weil Sie die Unterstützung erhalten. Wenn Sie Fragen haben, können Sie dem Entwickler eine E-Mail senden und in der Regel sind sie ziemlich gut, um zu antworten. Ich persönlich hatte eine Frage zu diesem Thema und E-Mail an den Entwickler und er war wirklich schnell mit der Antwort und beantwortete meine Fragen. Sie können mit PayPal oder Kreditkarte bezahlen. Sobald Sie bezahlt haben, sehen Sie einen Download-Button, mit dem Sie das Design auf Ihren Computer herunterladen können. 7. Verwende Wordpress-Thema: Ihr nächster Schritt ist das Hochladen des Theme zu WordPress. Wenn Sie es herunterladen, haben Sie eine ZIP-Datei wie die auf meinem Desktop. Sie möchten darauf doppelklicken, um es zu entpacken. Wenn Sie die Datei öffnen, sehen Sie eine Reihe anderer Dateien. Wenn Sie die Dokumentation öffnen, wird eine Seite index.html angezeigt. Doppelklicken Sie darauf, und es wird in Ihrem Browser geöffnet. Dies ist ein schnelles Tutorial, um Ihnen alles zu zeigen, was Sie über dieses Thema wissen müssen. Der erste Teil zeigt Ihnen, wie Sie es auf WordPress hochladen. Das Theme, das Sie auf WordPress hochladen möchten, ist die Datei lily.zip. Gehen Sie in Ihr WordPress-Dashboard, und gehen Sie zu Erscheinungsbild, Themes. Klicken Sie auf Neu hinzufügen. Hier können Sie ein Thema hochladen oder eines der drei WordPress-Themes verwenden. Sie können einige von ihnen auf der ersten Seite sehen, und Sie können auch Themen in der Suchleiste suchen. Wir werden diejenige verwenden, die wir von ThemeForest heruntergeladen haben. Um dies zu tun, klicken Sie oben links auf die Schaltfläche Thema hochladen. Klicken Sie dann auf Datei auswählen, wählen Sie den Ordner und dann lily.zip aus. Klicken Sie auf Jetzt installieren. Wenn es fertig ist, können Sie auf Aktivieren klicken. Sie werden auch feststellen, dass dieses Thema erfordert ein paar Plugins, um alle der verschiedenen Funktionen, die es Ihnen zeigt ausführen. Wenn Sie auf Website besuchen klicken, sehen Sie, wie es ohne Plugins und ohne Inhalt aussieht. 8. Installiere die Theme: Jetzt möchten Sie alle Plugins installieren, um die RSVP, Fotos, all das lustige Zeug zu haben . Klicken Sie auf Installation von Plugins beginnen. Sie sehen eine Liste der Plugins, wählen Sie alle aus, wählen Sie im Menü Massenaktionen die Option Installieren aus, und klicken Sie dann auf Übernehmen. Es dauert ein paar Minuten, um alle Plugins zu installieren. Sobald es fertig ist, erhalten Sie eine Liste mit allem, was Sie installiert haben, und einen Link, um zum Installationsprogramm zurückzukehren. Klicken Sie auf den Link, um zum Installationsprogramm zurückzukehren. Hier sehen Sie alle Plugins, die Sie gerade installiert haben. Aber Sie werden feststellen, dass es besagt, die Installation noch aktiviert werden muss. Alle Ihre Plugins befinden sich auf der linken Seite Menü. Klicken Sie auf Installierte Plugins. Hier finden Sie eine Liste aller Plugins, die in Ihrer WordPress-Website installiert sind. Einige von ihnen gibt es standardmäßig von GoDaddy oder WordPress. Es gibt ein paar, die ich persönlich löschen werde, denn je mehr Plugins desto mehr Gewicht ist auf Ihrer Website und desto langsamer wird es sein. Also behalte nur das, was nötig ist. Im Moment wähle ich alle, die wir gerade installiert haben, aus dem Menü Massenaktionen klicke ich auf Aktivieren. Sobald Sie auf „Übernehmen“ geklickt haben, sehen Sie, dass oben einige Informationen angezeigt werden. Akismet dient der Regulierung von Spammy-Kommentaren. Ich habe nicht vor, einen Kommentarbereich auf meiner Website zu haben, also werde ich diese Nachricht einfach ignorieren und zur Jetpack-Nachricht übergehen. Sie müssen die wordpress.com verbinden, um dieses Plugin zum Laufen zu bringen. Ich habe ein Konto, also melde ich mich einfach mit meinem Benutzernamen und Passwort an. Wenn Sie dies jedoch nicht tun, gibt es einen Link, um direkt dort einen zu erstellen. Sobald Sie sich angemeldet haben, wird diese Meldung angezeigt Wenn Sie auf Jumpstart klicken, können Sie einige der Einstellungen mit Jetpack anpassen. Einige von ihnen werden Sie nicht brauchen. Sie können viele von ihnen ausschalten und einfach mit dem Warten und Laden Ihrer Website wieder helfen. Also schalte ich Site-Statistiken aus, teilen, veröffentlichen, verwandte Post, verbesserte Verteilung, weil nichts von ihnen wirklich notwendig ist. Ich möchte nur, dass die Leute, die zu meiner Hochzeit eingeladen sind, auf diese Website gehen. Jetzt ist alles installiert, und wir sind bereit, weiterzumachen. 9. Demo-Inhalte installieren: Der einfachste Weg, um die Website zu sehen, ist es, sie mit einigen Demo-Inhalten zu sehen. Dieses Thema kommt mit Demo-Inhalt, um Ihnen eine Anleitung zu geben, wo Sie einige Fotos oder einen Text setzen und nur geben Ihnen eine bessere Vorstellung davon, wie es am Ende aussehen kann. Um diesen Inhalt zu importieren, gehen Sie zu Extras, Importieren. Sie sehen eine Liste mit verschiedenen Importoptionen. Klicken Sie auf WordPress. Sie müssen den Importer installieren, um diesen Inhalt zu importieren. Gehen Sie weiter und klicken Sie auf Installieren, klicken Sie auf Aktivieren und führen Sie Importer aus. Ich werde Ihnen kurz davor und nachher zeigen. Wenn Sie sich erinnern, so sah unsere Website vor dem Inhalt aus. Klicken Sie nun auf Datei auswählen und wir werden den Inhalt in den Ordner importieren. Im Designordner wird eine XML-Datei angezeigt. Wählen Sie das aus und klicken Sie auf Öffnen. Klicken Sie dann auf Datei hochladen und importieren. Als Nächstes sehen Sie eine Seite mit einigen Einstellungen. Sie möchten den Download und Import von Dateianhängen deaktivieren und dann einen Ihrer vorhandenen Benutzer auswählen und auf „Senden“ klicken. Es dauert eine Weile, um zu importieren, aber sobald es fertig ist, wird es Ihnen sagen und Sie sind bereit, die neue Website zu sehen. Klicken Sie auf Aktualisieren auf der Website, und Sie können jetzt sehen, dass es einige Inhalte gibt. Es sieht nicht so aus, wie es am Beispiel gelaufen ist, aber wir kommen dorthin. Wenn Sie auf einen der Beiträge klicken, werden Sie in der Lage sein, Text und vielleicht einige Fotos zu sehen. 10. Grundlegende Anpassungen: Jetzt, da wir einige Demo-Inhalte haben, sollten wir es so anpassen, dass es mehr im Einklang mit unserem Hochzeitsthema ist. Gehen Sie also zu „Erscheinungsbild“ und klicken Sie auf „Anpassen“. Hier haben Sie ein Menü mit einigen Optionen. Als erstes möchten wir ändern, wie die Seite aussieht, wenn sie geladen wird. Im Moment hat es all diese Kisten gezeigt. Aber wir wollen eine Homepage, die ein großes Feature-Bild hat. Klicken Sie also auf „Statische Titelseite“ und wählen Sie dann unter der Titelseite „Statische Seite“. unter der Titelseite aus dem Dropdown-Menü die Option „Startseite“ aus. Dies ist eine Vorschau darauf, wie die Website aussehen wird. Jetzt sehen Sie einen Ort, an dem Sie das große Homepage-Bild haben werden. Wenn du es live siehst, wirst du sehen, dass es da ist. Wir möchten auch den Titel und den Slogan ändern. Im Moment sagt es nur eine andere WordPress-Website. Hier können Sie das Datum Ihrer Hochzeit angeben, wie im Beispiel zu sehen. Wenn Sie durch die Speisekarte schauen, gibt es viele Optionen und wir werden bald zu denen kommen. Stellen Sie sicher, dass Sie auf „Speichern“ und „Veröffentlichen“ klicken, um alle Änderungen zu speichern, die Sie gerade vorgenommen haben. Hier finden Sie einen kurzen Überblick über die Einstellungen im Menü. Wenn Sie Farben auswählen, können Sie hier sehen, dass Sie die Textfarbe, Ihre Akzentfarbe, Ihre Hintergrundfarbeändern Ihre Akzentfarbe, Ihre Hintergrundfarbe und alle Änderungen auf der rechten Seite anzeigen können. Sie können Ihr Header-Bild auch hier ändern. Das Hintergrundbild kann eine Diashow sein, bei der mehrere Bilder nacheinander gedreht werden. Ich entschied mich, die Diashow auszuschalten. Der Demo-Inhalt enthält Fotos mit Abmessungen auf ihnen. Dies wird Ihnen helfen und die richtigen Fotos auswählen. Sie können auch in „Einstellungen“, „Allgemein“ gehen, hier ändern Sie einige der hinter den Kulissen Sachen, wie die E-Mail-Adresse, die mit dem Konto verknüpft ist . Sie können auch den Titel und den Slogan hier ändern, die Art und Weise, wie Datumsangaben in Blogbeiträgen angezeigt werden. Sie können auch in den Abschnitt Schreiben und Lesen gehen und alle Einstellungen dort ändern. Für dieses Tutorial werde ich jedoch keine dieser Einstellungen ändern. Also fühlen Sie sich frei, diese für jetzt in Ruhe zu lassen. 11. Inhalte hinzufügen: Jetzt müssen wir einige Inhalte hinzufügen. Um dies zu tun, gehen Sie zu Erscheinungsbild und klicken Sie auf Widgets. Dieses Thema funktioniert mit Widgets, um all diese Funktionen zu erhalten , die Sie auf der Homepage sehen. Sie sehen auf der linken Seite eine Liste mit einer Reihe von Widgets, die Sie dorthin ziehen können. Befindet sich in der Nähe der Unterseite, werden Sie alle Widgets sehen, die mit diesem Plugin installiert wurden. Sie beginnen alle mit Themechills. Dies sind die, die Sie auf der Homepage auf der Demo-Website sehen. Wir wollen sie in dieses Verzeichnis ziehen. Ich habe drei Widgets hinzugefügt. Um sie zu überprüfen, werde ich auf Website besuchen klicken. Ich sollte einen Timer sehen, paar Ereignisse und eine Karte. Wenn Sie nach unten scrollen, gibt es Ihren Countdown-Timer, es gibt Ihre Liste der Ereignisse und Ihre Karten sollten da sein, aber es ist noch nicht ganz bereit, installiert zu werden. Jetzt werde ich den Rest der Widgets zum Abschnitt hinzufügen. 12. Homepage Photo: Der erste Abschnitt oder Widget, an dem wir arbeiten werden, sind Fotos. Dies ist der Bereich, in dem Sie eine horizontale Schriftrolle von einigen Fotos von Ihnen und Ihrem signifikanten anderen haben. Sie können diesen Abschnitt mit dem Titel versehen, was Sie möchten. Sie können auch eine Beschreibung hinzufügen. Ich habe einen kopiert und dort eingefügt. Sie möchten auch einen Knopf hinzufügen oder Call to Action Minus für weitere Informationen über die Rezeption für Gäste , die es nicht schaffen können, um die Zielhochzeit hinzuzufügen. Sie müssen eine URL eingeben, damit die Schaltfläche funktioniert. Wenn Sie jetzt noch keine haben, weil die Seite noch nicht fertig ist, lassen Sie sie einfach für später. Wenn Sie auf diese Website gehen und auf „Aktualisieren“ klicken, sehen Sie den Text, den Sie gerade eingegeben haben. Jetzt müssen wir unsere Fotos hinzufügen. Wenn Sie auf „Fotos“ klicken, sehen Sie auf der linken Seite eine Liste der Demo-Inhalte, die bereits vorhanden sind. Wir können diese einfach bearbeiten, anstatt neue Fotos hinzuzufügen. Wählen Sie einfach eine aus und klicken Sie auf „Bearbeiten“. Auf der rechten Seite sehen Sie ein Feature-Bild. Dies ist, wo das Bild tatsächlich auf der Website erscheinen wird. Ich entferne dieses Feature-Image und ändere den Titel in Engagementspartei. Und ich werde ein Feature-Image hinzufügen. Und dieses Bild wird auf der Verlobungsfeier sein. Klicken Sie auf „Durchsuchen“ und gehen Sie dann durch Ihre Ordner und überprüfen Sie das gewünschte Bild. Ich habe ein paar, die ich auf diejenigen hochladen werde, die mit diesem Fotobereich zu tun haben. Das werde ich jetzt tun. Ich zeige mehrere Bilder, indem ich den Befehl drücke und mit der Maus auswähle. Nachdem sie mit dem Hochladen fertig sind, wählte ich diejenige, die ich als Feature-Bild für diesen Fotobereich dienen wollte. Wählen Sie das aus und klicken Sie dann auf „Feature-Bild einstellen“. Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern. Gehen Sie zurück zu den Fotos und machen Sie dasselbe für so viele Fotos wie Sie haben. Wenn Sie fertig sind, gehen Sie zurück zur Website und klicken Sie auf „Aktualisieren“. Die Fotos werden unterhalb des Textes angezeigt und Sie können sie sehen, indem Sie nach links oder rechts scrollen. 13. Countdown und Timeline: Als nächstes fügen wir den Countdown und die Ereignisse hinzu. Der Countdown ist der Abschnitt mit den Tagen, Monaten und Stunden vor der Hochzeit. also im Widget-Bereich unter „Erscheinungsbild“ im Homepage-Bereich das Öffnen Siealso im Widget-Bereich unter „Erscheinungsbild“ im Homepage-Bereich dasCountdown-Timer-Drop-down-Menü. Hier können Sie das Datum für die Hochzeit und die Zeit eingeben. Unter dem Timer befinden sich zwei Spots für Nachrichten. erste Feld ist eine Nachricht, wenn der Countdown beendet ist, und das unten ist die Nachricht, die mit Ihrem Countdown angezeigt wird. Sie können sehen, dass es die Tage, Stunden, Minuten und Sekunden in dieser Reihenfolge hat. Sie können diese auf jeden Fall ändern, indem Sie einfach an der gewünschten Stelle kopieren und einfügen. Wenn Sie Ihre Seite aktualisieren, sehen Sie den Countdown mit dem grauen Hintergrund in der Mitte Ihres Fotoabschnitts und im Ereignisbereich. Jetzt werden wir die Ereignisse aktualisieren. Sie können einen Titel hinzufügen, wenn Sie möchten, aber ich werde wählen, nicht. Auf der linken Seite klicke ich auf „Events“, um zu gehen und die mit dem Demo-Inhalt enthaltenen zu ändern. Genau wie die erste und klicken Sie auf „Bearbeiten“. Hier können Sie den Titel ändern, die Beschreibung ändern und ein Feature-Image hinzufügen. Ich werde Dateien auf die gleiche Weise hochladen wie sein letztes Mal. Schnappen Sie sich nur ein paar für diesen Abschnitt auf einmal. Sobald sie mit dem Hochladen fertig sind, werde ich diejenige für dieses Ereignis auswählen, die ich als Feature-Image dienen möchte. Wenn Sie fertig sind, klicken Sie auf „Aktualisieren“. Ein kleiner Tipp: Wenn Sie den Mauszeiger über und auf „Quick Update“ klicken, können Sie hier einige kleine Updates vornehmen, wie das Datum und den Titel. Fahren Sie mit den restlichen Event-Titeln fort und ändern Sie sie so, dass sie zu Ihrer Website passen. Stellen Sie sicher, dass Sie die Daten richtig sind , da sie auf der Website von Anfang bis Ende angezeigt werden. Wenn Sie alle fertig sind, sollten Sie in der Lage sein, auf „Aktualisieren“ zu klicken und sich Ihre neue Timeline anzusehen. 14. Anruf- und Hochzeitsparty: Es gibt ein paar weitere Features, die wir hinzufügen können, eine ist die Callout und die andere ist Ihre Brautparty. In Widgets unter Homepage können Sie den Abschnitt für Callout sehen. Dies ist im Grunde nur ein zusätzlicher Text. Alles, was du willst, passt zu diesem grauen Hintergrund, genauso wie der Countdown. Die Crew steht unter Profilen. Hier werden Sie all Ihre Bräutigamsmen und Brautjungfern Fotos und Bios setzen. Sie können einen Titel hinzufügen und einfach „Speichern“ drücken. Sie dann von der linken Seite auf „Profile“. Hier haben Sie bereits eine Reihe von Beispielen. Wir werden das Gleiche tun und einfach die bearbeiten, die bereits da sind. Wählen Sie einfach eine aus und klicken Sie auf „Bearbeiten“. Ändern Sie den Namen oben und die kleine Beschreibung über sie. Dann ist es im Feature-Image das gleiche wie Ereignisse, laden Sie einfach einige Bilder hoch und wählen Sie das richtige aus. Legen Sie Feature-Image fest und klicken Sie auf „Aktualisieren“. Tun Sie dies für alle Ihre Brautjungfern und Bräutigams, bis Sie fertig sind. Wenn Sie mehr Personen hinzufügen müssen als in den Beispielen, klicken Sie einfach auf „Profil hinzufügen“ oben links neben dem Titel des Profils. Wenn Sie fertig sind, drücken Sie „Aktualisieren“ und Sie sollten alle Fotos unter Ihrer Callout sehen . Wenn Sie den Mauszeiger über sie bewegen, erhalten Sie den Namen und die Kurzbeschreibung zu sehen, und Sie können darauf klicken, um mehr über diese Person zu erfahren. Es gibt auch einige Navigation auf der Unterseite. Sie können durch die nächste oder die vorherige Brautjungfer oder Bräutigam gehen. 15. Standortkarte: Wir fügen nun eine Karte für den Standort der Hochzeit hinzu. Unter Auftritte in Widgets, unter Homepage, sehen Sie die Karte, Dropdown, Sie können einen Titel hinzufügen, und dann müssen wir auch einen Code in den Einbettungs- oder Kurzcodes Abschnitt einfügen. Wenn Sie auf die Plugins Seite gehen und finden Sie das Map Plugin, das wir installiert namens Responsive Styled Google Maps. Klicken Sie auf „Einstellungen“, hier haben Sie Ihre Karte, dies ist, wo Sie gehen, um die Zeigerfarbe, die Hintergrundfarbe, und auch, wo Sie gehen, um die Adresse für die Menschen, um Ihre Hochzeit zu finden. Alle Kartenstile sind in dieser Dropdown-Liste, ich habe Nummer 8 ausgewählt. Es gibt viele andere Optionen, aber wirklich müssen Sie nur die Farben ändern und sicherstellen, dass Sie die richtige Adresse eingeben. Wenn Sie alles eingestellt haben, wie Sie möchten, stellen Sie sicher, dass Sie im dunkelgrauen Feld nach rechts gehen, wählen Sie den gesamten Text aus und kopieren Sie ihn. Gehen Sie dann zurück zu Ihren Widgets und öffnen Sie die Homepage-Widgets im Kartenbereich, und fügen Sie diese Informationen in den Einbettungs- oder Kurzcode Abschnitt ein, drücken Sie „Speichern“. Aktualisieren Sie Ihre Website und schauen Sie sich Ihre neue Karte an. Da ist es. Wenn Sie auf das kleine Zeigersymbol klicken, erhalten Sie die Adresse mit einem Link zu Wegbeschreibungen. 16. RSVP und Instagram: Jetzt werden wir einen Weg für die Gäste RSVP hinzufügen und folgen Sie auf Instagram. In den Widgets ist dieser technische Abschnitt, wo das eigentliche Kontaktformular gehen wird. Wir gehen auf der linken Seite und klicken auf Kontakt und klicken unter RSVP auf Bearbeiten. Dies ist das RSVP-Formular. Dies ist, wo Sie wählen, was Sie wollen, dass sie setzen. Gerade jetzt, wo sie den vollständigen Namen haben, E-Mail, werden Sie teilnehmen sowie Menüauswahl. Sie sollten auch die E-Mail-Adresse in den beiden Abschnitten ändern, da die RSVP an Ihre E-Mail-Adresse gesendet werden soll. Sie können auch den Nachrichtentext ändern. Wenn Sie fertig sind, klicken Sie auf Speichern. Vergewissern Sie sich, dass Sie den Kontaktformularcode in den blauen Hintergrund kopieren und einfügen und zu Widgets zurückkehren. Unter Texten fügen Sie diesen Code in den Inhaltsbereich ein und drücken Sie dann auf Speichern. Wenn Sie Ihre Seite aktualisieren, sehen Sie das Kontaktformular direkt dort. Instagram ist ziemlich einfach, alles, was Sie tun müssen, ist in einen Hashtag zu setzen, speichern und alle Fotos, die diesen Hashtag haben, werden auf Ihrer Website angezeigt. Beachten Sie, dass Fotos, die sich auf einem privaten Konto befinden, nicht angezeigt werden. Sie müssen öffentlich sein, um auf Ihrer Website zu erscheinen. 17. Header: Um das Kopfzeilenbild zu ändern, müssen Sie in das Erscheinungsbild gehen, anpassen. Wählen Sie das Kopfzeilenbild aus dem linken Menü. Wie ich bereits erwähnt habe, gibt es ein Platzhalter Bild mit Abmessungen. Wir möchten ein Bild mit den gleichen Abmessungen hochladen. Es gibt zwei Möglichkeiten, dies zu tun. Zum einen können Sie Ihr Foto in Photoshop aufnehmen, die Abmessungen dort anpassen. mithilfe des Zuschneidewerkzeugs Ändern Sie esmithilfe des Zuschneidewerkzeugsin 1920 x 1080. Sie möchten sicherstellen, dass Sie für das Web speichern, da die Bildgröße so klein wie möglich sein soll. In den Optionen zum Speichern für Web oben rechts sehen Sie ein Dropdown-Menü für den Bildtyp sowie die Qualität des Bildes. Ich wähle hoch, aber ich dachte, es wäre immer noch zu hoch, also wählte ich Medium. Sie können sehen, dass die Dateigröße zu verringern. Jetzt werde ich voran gehen und das für meine Homepage speichern. Wie gesagt, ich habe keine Diashow, also klicken Sie auf „Neues Bild hinzufügen“, laden Sie Dateien hoch, wählen Sie die Datei aus, die Sie gerade gespeichert haben, drücken Sie dann Auswählen und Zuschneiden. Dann drücken Sie überspringen Zuschneiden, wenn es bereits beschnitten ist und da Sie es haben. Da ist dein Bild. Wenn Sie Photoshop nicht haben, können Sie es einfach in WordPress tun. Wählen Sie das Bild in voller Größe und klicken Sie auf Auswählen und zuschneiden. Auf der nächsten Seite haben Sie die Möglichkeit, die Abmessungen des Bildes zu ändern. Sie können sehen, dass für diesen Abschnitt bereits eine vorinstallierte Größe vorhanden ist. Bewegen Sie es einfach, bis Sie eine Stelle erhalten, die Sie mögen, und wählen Sie dann Bild zuschneiden. Sie möchten sicherstellen, dass Sie das Platzhalterbild mit den Abmessungen löschen um das neue Bild zu sehen, das Sie auf Ihrer Website hochgeladen haben. Wenn Sie die Seite aktualisieren, sollten Sie das neue Bild jetzt im Hintergrund sehen. Nun werden wir den Text oben auf dem Hintergrundbild hinzufügen. Klicken Sie auf Header Hero Text, geben Sie ein, was Sie über dem Bild erscheinen möchten. Wenn Sie damit fertig sind, können Sie eine Schaltfläche für unter dem Text hinzufügen. Ich habe mich dafür entschieden, hier einen RSVP-Knopf zu setzen. In der Dropdown-Liste können Sie die verknüpfte Seite auswählen, zu der die Schaltfläche Sie führen soll, und dann können Sie den Text eingeben, den Sie auf der Schaltfläche anzeigen möchten. Vergessen Sie nicht, auf Speichern und Veröffentlichen zu klicken. 18. Navigationsmenüs: Wir werden die Menüs hinzufügen, die Sie oben rechts auf der Website sehen. im selben Anpassungsmenü Wählen Sieim selben Anpassungsmenü„Menüs“ und wählen Sie dann „Menü-Speicherorte“. Klicken Sie unter der Dropdown-Liste auf „Hauptmenü“. Sie können auf der rechten Seite sehen, wo dieses Menü erscheinen wird. Es gibt jetzt ein paar Standardelemente: Blog, Registrierung, Timeline. Wenn Sie zurückkehren und dann das Menü auswählen, können Sie entscheiden, ob Sie diese beibehalten oder entfernen möchten. Ich werde keinen Blog haben, also habe ich entfernt.Sie können auch weitere Menüelemente hinzufügen, indem Sie auf die Menüschaltfläche Hinzufügen klicken. Sie können einen benutzerdefinierten Link hinzufügen, Sie können Beiträge hinzufügen, Sie können die Seiten hinzufügen, die Sie bereits erstellt haben, es gibt viele Optionen zur Auswahl, um in Ihr Menü oben rechts zu setzen. Sie können die Menüelemente auch verschieben, um sie in einer anderen Reihenfolge zu platzieren. Wenn Sie fertig sind, klicken Sie auf Speichern und veröffentlichen. 19. Geschenkbuch: Für die Registrierung werden wir eine separate Seite haben. Es wird nicht auf der Homepage sein. Sie werden in der Lage sein, aus dem oberen rechten Menü dorthin zu gelangen. Wenn Sie jetzt auf den Link „Registrierung“ klicken, sehen Sie diese Seite. Es sagt Ihnen, dass Sie ein anderes Plugin herunterladen müssen. Diese müssen Sie separat außerhalb von WordPress herunterladen. Wählen Sie kostenlosen Download, und geben Sie Ihre E-Mail-Adresse ein. Sie sollten einen Link in Ihrer E-Mail erhalten, um das Plugin herunterzuladen. Sobald es heruntergeladen wurde, gehen Sie auf die Plugins Seite und klicken Sie auf Plugin hochladen. Klicken Sie auf „Datei auswählen“ und wählen Sie bean-registry.zip Datei, klicken Sie auf „Jetzt installieren“ und wenn es fertig ist, klicken Sie auf „Plugin aktivieren“. Wenn Sie nun auf diese Website gehen und auf die Seite „Registrierung“ klicken, sollten Sie einige Bilder mit Geschäften und Logos sehen, um zu Ihrer Registrierung zu gelangen. Um diese zu ändern, gehen wir auf Seiten zu gehen und klicken Sie unter Registrierung auf „Bearbeiten“. Auf dieser Seite sehen Sie eine Reihe von Kurzcodes. Hier werden Sie den Namen des Shops ändern. Um eine Liste der angebotenen Shopnamen zu erhalten, wählen Sie den Bildordner in der Datei aus, die Sie gerade heruntergeladen haben. Sie sehen eine Liste aller verschiedenen Logos, die sie anbieten. Kopieren Sie diesen Dateinamen und fügen Sie ihn in den Kurzcode auf WordPress ein. An der Stelle, wo es zwei Hashtags gibt, werden Sie die Adresse setzen, um zu Ihrer Registrierung zu gelangen. Sobald Sie auf „Aktualisieren“ klicken, sollte der Link aktualisiert werden und Sie sollten das neue Logo auf Ihrer Website sehen. Wenn der Gast auf dieses Logo klickt , sollte er dann zu Ihrer Registrierung gebracht werden. 20. Hinzufügen einer neuen Seite: Möglicherweise möchten Sie Ihrer Website eine neue Seite hinzufügen. im linken Menü Klicken Sieim linken Menüauf „Seiten“, „Neu hinzufügen“. Geben Sie oben den Titel Ihrer Seite ein. Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“. Möglicherweise möchten Sie diese Seite zu Ihrem Menü hinzufügen. Gehen Sie also zu Erscheinungsbild, Anpassen. Klicken Sie auf „Menüs“, wählen Sie „Top Menu“. Ich werde das Timeline-Menü durch dieses neue ersetzen. Also habe ich das entfernt, und jetzt klicke ich auf „Elemente hinzufügen“, wähle „Seiten“, greife „Details“ und drücke „Speichern“. Sie sollten es jetzt oben rechts sehen. Wenn Sie auf die Seite „Details“ klicken, sehen Sie wahrscheinlich nur eine leere Seite mit einer Überschrift. Um Inhalte hinzuzufügen, geben Sie einfach alle Informationen in das weiße Feld unter dem Titel ein. Hier werde ich die Details der Zeremonie, die Lage des Hotels, sowie das Abendessen danach setzen . Wenn Sie dem Text Stil hinzufügen möchten, klicken Sie auf das Symbol, um die darunterliegende Symbolleiste zu öffnen. Fügen Sie dann Überschriften oder Farbe oder Schriftgröße hinzu und richten Sie Ihren Text in der Mitte oder links aus, wenn Sie möchten. Sie können auch einen Link hinzufügen, indem Sie den Text markieren und die Adresse mithilfe des Link-Symbols hinzufügen. 21. Css-Anpassungen: In diesem letzten Abschnitt werde ich zeigen, wie einige erweiterte Anpassungen zu tun. Das erste, was ich Ihnen zeigen werde, ist das Hinzufügen von benutzerdefinierten Schriftarten. Sie gehen in Plugins und suchen Google-Fonts und finden ein Plugin namens WP Google-Fonts. Klicken Sie, um das Plugin zu aktivieren. Sobald es fertig ist. Sie können auf der linken Seite darauf gehen und auf „Google Fonts“ klicken. den Rest der Anpassungen sind CSS-Änderungen erforderlich. Um dies zu tun, habe ich ein paar Schritte hier skizziert, und es sind im Grunde die gleichen Schritte für jedes Mal, wenn wir etwas ändern wollen. Am besten verwenden Sie einen Chrome- oder Firefox-Browser. Wenn Sie das Web-Element finden, das Sie ändern möchten, Sie mit der rechten Maustaste darauf und klicken Sie auf Element prüfen oder prüfen, je nachdem, in welchem Browser Sie sich befinden. Ich habe hier das Hintergrundbild als Beispiel verwendet. Sobald Sie Inspect gedrückt haben, wird ein Popup-Fenster der Entwickler-Symbolleiste mit einer Reihe von HTML-Code und CSS angezeigt. Dann möchten Sie den HTML-Code finden, der zu den Elementen passt, die Sie ändern möchten. Dann klicken Sie von dort darauf und ändern Sie dann die CSS-Werte. Sie kopieren und fügen das dann ein und bringen es in den CSS-Abschnitt in WordPress.We haben eine Datei für Sie zum Herunterladen in Projekten, die alle CSS-Änderungen enthält , die ich vorgenommen habe, wenn Sie die gleichen anwenden möchten. Dies ist ein kurzer Vorher und Nachher. So sieht die Standardschriftart aus. Wenn Sie mit der rechten Maustaste darauf klicken und auf Inspect klicken, können Sie sehen, welche Art von Text es ist, es ist ein H3. Dies ist wichtig zu wissen, damit Sie wissen, welche Schriftart mit welchem Stil gesetzt werden soll. Aktivieren Sie H3, um die Kopfzeile zu ändern. Wenn Sie die Stile der Schriftarten von Google Fonts sehen möchten, gehen Sie zu google.com/fonts. Hier können Sie durch alle verschiedenen Stil-Schriftarten blättern Wenn Sie zum Plugin zurückkehren, können Sie diese aus dem Dropdown-Menü auswählen. Wenn Sie fertig sind, klicken Sie auf „Alle Schriftarten speichern“. Wenn Sie Ihre Seite aktualisieren, sollten Sie eine neue Schriftart sehen. Jetzt fügen wir ein benutzerdefiniertes Bild hinzu, das angezeigt wird, wenn der Gast auf das Kartensymbol klickt. Ich werde die Tropicana durchsuchen und ihr Logo von Google Images schnappen und es auf meinem Computer speichern. Ich werde dann eine neue Registerkarte mit der Mediathek öffnen. Laden Sie dann das Bild hoch, das wir gerade gespeichert haben, klicken Sie auf das Bild, um es zu öffnen, und klicken Sie dann auf „Anhangseite anzeigen“. Klicken Sie mit der rechten Maustaste auf das Bild und klicken Sie auf „Bild in neuem Tab öffnen“. Hier können Sie die obere Adressleiste kopieren und einfügen, sie in die Adresse einfügen, die im Beschreibungsfeld ist. Ich werde nur meine Farben neu auswählen und dann sicherstellen, dass Sie den Text in das graue Feld kopieren, um den alten Text zu überschreiben. Gehe zurück in Widgets, öffne Homepage, öffne Map und ersetze den alten Text durch den neuen Text. Klicken Sie auf „Speichern“. Wenn Sie die Seite aktualisieren und auf das Kartensymbol klicken, sollten Sie das neue Bild sehen. Jetzt werden wir die rosa Blume ändern, die in der Trennwand unter den Titeln erscheint. Um dies zu tun, werde ich ein Symbol von flaticon.com zu holen. Ich suchte Herz und fand eins mit Verlobungsring mit einem Herz oben. Wenn Sie auf das Auge klicken, sollten Sie in der Lage sein, eine PNG-Datei mit der gewünschten Farbe herunterzuladen. Klicken Sie auf „Free Download“, und wenn Sie mit der rechten Maustaste und Inspect Element klicken, werden Sie sehen, dass es als Hintergrundbild namens lily.svg festgelegt ist. Wir werden das durch unser neues Image ersetzen. Wir werden das tun, indem wir zu godaddy.com gehen, gehen Sie in Ihre Web-Hosting-Site verwalten, und klicken Sie dann auf Datei-Manager. Wenn Sie hier sind, sollten Sie zur Hochzeitswebsite navigieren, diesen Ordner öffnen, wp-content öffnen, dann Themes und dann den Namen Ihres Themes, das Lilie ist. Öffnen Sie dann Image und Sie sehen die Datei lily.svg, so dass Sie gehen, um Ihre neue Datei in diesen Ordner ziehen. Um dies an Ort und Stelle zu setzen, möchten Sie in den Darstellungs-Editor gehen. Sie sehen eine Liste der Seiten auf der rechten Seite, Sie scrollen den ganzen Weg nach unten können Sie auf style.css klicken. Bevor Sie Änderungen vornehmen, sollten Sie den gesamten Text von der Seite kopieren , die Sie ändern, und fügen Sie ihn in eine Textdatei ein. Nur für den Fall, dass Sie etwas durcheinander bringen, können Sie es wieder so platzieren, wie es ursprünglich war. Sobald diese Datei geöffnet ist, klicken Sie auf Apple F, um die Datei zu durchsuchen, und geben Sie dann Lilie ein, wird es Sie zu diesem Stil bringen. Dann können Sie die lily.svg in den Namen Ihrer neuen Datei ändern. Wenn Sie fertig sind, aktualisieren Sie die Seite und überprüfen Sie, ob das Symbol angezeigt wird. Für mich hat es das nicht getan. Es ist immer noch da, aber es ist im Hintergrund versteckt. Ich werde die Hintergrundgröße auf 100 Prozent ändern. Da ist es. Sie werden den ganzen Abschnitt des Textes kopieren möchten , wo Sie nur die Hintergrundfarbe ändern, jetzt müssen wir den Stil hinzufügen, den wir gerade geändert haben. Wenn Sie zum Erscheinungsbild gehen und auf CSS bearbeiten klicken, haben Sie eine leere CSS-Seite. Fügen Sie den soeben kopierten Text in den CSS-Stylesheet-Editor ein. Speichern Sie das Stylesheet, und fahren Sie fort. Wir werden weitere Stile hinzufügen. Ich werde das Overlay auf dem Hintergrundbild ändern. Es ist ein wenig dunkel, also habe ich mit der rechten Maustaste darauf geklickt, ich ging zum Element zu inspizieren und fand dann die Hintergrundfarbe ein undurchsichtiges Grau war, ich ändere das in transparent, so dass es ein wenig heller ist. Sie möchten das Gleiche tun und den Text markieren, damit Sie ihn kopieren und dann in den CSS-Editor einfügen können. Jetzt werde ich die Größe der Schriftart für die Überschriften ändern. Aber wenn ich mit der rechten Maustaste klicke und auf Element inspizieren klicke, kann ich sehen, dass die Schriftgröße ein wenig groß ist, also habe ich es ein REM heruntergenommen, und jetzt passt alles in die Zeile. Ich werde auch die Schriftgröße und Schriftfarbe der oberen rechten Navigation ändern. Es war ein bisschen zu hell, also änderte ich es auf die Farbe 666666. Löschen Sie erneut alles, was Sie nicht verwenden, wenn Sie alles wieder in das Stylesheet einfügen. Jetzt werde ich die Farbe dieses sehr hellen Rahmens in eine einfarbige weiße Farbe ändern . Ich ändere die transparente RGBA-Farbe in Weiß, was FFFFFF ist. Jetzt ändere ich nur die Höhe des Hintergrundbildes, weil ich fand, dass es ein wenig groß war, also änderte ich es von 800 Pixel auf 700 Pixel. Moment ändere ich die Hintergrundfarbe der Zählung auf die gleiche Farbe wie das Grau, das dahinter steckt. Ich ging zuerst, um die grauen Hintergrundelemente zu überprüfen und fand heraus, welche Farbe von Grau ist, und ging dann zum weißen Hintergrund und änderte das, um dasselbe zu sein. Ich ändere auch die Schriftgröße, weil sie ein wenig klein sind, also werde ich es ziemlich viel größer machen. Eine Sache, die ich gerne loswerden möchte, ist das Copyright in der Fußzeile. Ich habe das Thema gekauft, damit ich die Rechte habe, es zu benutzen. Ich werde nur eine Anzeige ohne Stil in die Fußzeile setzen , so dass nichts unten angezeigt wird. 22. Zusammenfassung: Um abzuschließen, ist dies ein Beispiel dafür, wie die fertige Website aussehen wird. Am Ende werde ich Ihnen die verschiedenen Bildschirmgrößenauflösungen zeigen, wie es in Tablets und mobilen Geräten aussehen wird. Wenn Sie Ihren Browser Griffe greifen und schieben Sie den Browser auf ein wenig kleinere Größe, Sie werden sehen, dass es in eine Tablet-Ansicht verwandelt und dann bringen Sie es in noch kleiner und Sie werden sehen, es gehen den ganzen Weg zu mobilen. Wenn Sie Ihren Browser verschieben, werden Sie feststellen, dass die Website gut aussieht, unabhängig von der Größe des Bildschirms, auf dem Sie sie anzeigen.