Comment créer et concevoir votre propre site Web de mariage : De l'achat d'un nom de domaine à la mise en ligne

1. Introduction: Salut, je suis Sarah. Je suis concepteur et développeur front-end basé à Toronto. En tant que fiancée d'être, je sais combien il est important de garder vos coûts au minimum et de garder tout super simple. Avec ce cours, je vais vous montrer, comment créer un site web pour votre mariage du début à la fin. Tout, de l'achat du domaine à la mise en service. A la fin du cours, vous aurez un site web où vos invités pourront vous RSVP et découvrir tout ce dont ils ont besoin pour le grand jour. Vous n'avez pas besoin de savoir comment coder pour créer ce site. Le thème est totalement personnalisable pour s'adapter à votre mariage et répond à toutes les tailles d'écran. 2. Acheter un domaine: La première chose que vous devez faire est d'acheter un nom de domaine. chose la plus courante à faire est d'utiliser les prénoms de la mariée et du marié. Si vous allez sur godaddy.com, vous pouvez rechercher un nom de domaine et voir s'il est disponible. Comme vous pouvez le voir, j'ai cherché Kevin et Sarah, kevinandsarah.com était parti, mais j'ai choisi d'aller avec kevinandarh.rocks juste pour être mignon. Ensuite, vous pouvez l'ajouter à votre panier. Cependant, vous voudrez peut-être aller acheter l'hébergement d'abord, puis vous obtenez le nom de domaine gratuitement. Cependant, j'ai déjà l'hébergement avec GoDaddy, donc je vais juste acheter le nom de domaine. Vous devez acheter un hébergement, sinon votre site ne sera pas visible. Vous pouvez continuer à panier. Une fois que vous avez tous les articles dont vous avez besoin et le paiement en utilisant PayPal ou carte de crédit. Vous pouvez également choisir entre un an et cinq ans. J' ai choisi seulement un an parce que je n'en aurai pas besoin après le mariage, mais n'hésitez pas à choisir plus d'entre vous voulez le garder comme un souvenir. Une fois que vous avez vérifié, tout devrait être bon pour aller et vous recevrez bientôt un e-mail avec toutes les informations sur votre nouveau site Web. La prochaine chose que vous voulez faire est de cliquer sur votre nom en haut à droite et de choisir visiter mon compte. C' est là que vous allez trouver tous vos produits, informations sur votre domaine ainsi que votre hébergement. C' est là que nous allons commencer à entrer dans façon d'ajouter la page WordPress à votre site. 3. Configurer l'hébergement: La prochaine chose que nous voulons faire est de mettre l'hébergement avec le nom de domaine. Si vous cliquez en haut à droite et allez dans « Mon compte », vous verrez votre hébergement Web dans la deuxième ligne, cliquez dessus et choisissez « Gérer ». Une fois que vous êtes dans la page d'hébergement, vous verrez une liste de tous vos domaines, j'en ai pas mal quelques-uns, mais vous n'en avez peut-être qu'un. Pour ajouter un domaine à votre hébergement, cliquez sur « Ajouter un domaine » et saisissez le nom du site Web que vous venez d'acheter. Pour moi, c'est Kevinandsarah.Rocks. Dès que vous tapez la première lettre, elle sera remplie en dessous. Choisissez ensuite un nom pour votre dossier. Cela peut être ce que vous voulez, quelque chose qui est facile à retenir, et cliquez sur « OK ». Lorsque vous tapez le nom sous le champ de domaine, s'il n'a pas rempli, cela signifie qu'il n'était pas encore prêt. Peut-être que tu reviendrais dans quelques heures pour voir si c'est là, parce que parfois ça peut prendre un peu plus de temps. Une fois qu'il est ajouté, vous verrez apparaître dans votre liste. Il indiquera « En attente » sous le statut. Cela prend aussi un certain temps. Vous recevrez généralement un e-mail, la notification indiquant qu'il est prêt. 4. Installez Wordpress: Maintenant que l'hébergement est terminé, nous pouvons installer WordPress. Si vous allez dans le coin supérieur gauche du menu de navigation vert et cliquez sur Accueil, cette page s'affiche. Sur le côté droit, vous verrez les options et les paramètres. Cliquez sur Wordpress. Maintenant, vous pouvez gérer vos applications WordPress. Vous voudrez donc cliquer sur Installer. Vous voulez choisir le nom de domaine du site de mariage, puis vous voulez mettre un répertoire. Le répertoire est l'endroit où votre site WordPress va vivre. Je veux que ce soit sur la page sur laquelle les gens atterrissent quand ils tapent kevinandsarah.rocks. Cependant, vous pourriez vouloir que ce soit kevinandsarah.rocks/mariage. Pour l'obtenir à la route principale, qui serait kevinandsarah.rocks, il suffit de le laisser vide. Vous devez également ajouter votre nom d'administrateur et votre mot de passe administrateur. C' est ce que vous aurez besoin de vous connecter au site WordPress pour faire des changements, télécharger des photos, tout ce que nous allons faire dans le futur. Vous devrez également ajouter votre e-mail et vous pouvez taper un titre de blog. Mais pas de soucis, vous pouvez toujours changer cela plus tard une fois que nous nous connectons sur le site WordPress. Lorsque tous les champs sont remplis, cliquez sur OK. Comme vous pouvez le voir, il dit que WordPress est en train d'installer. Cela prend aussi un certain temps. Alors asseyez-vous, détendez-vous et attendez que l'e-mail vous dise qu'il est prêt. 5. Se connecter à Wordpress: Une fois WordPress installé, nous pouvons nous connecter et apporter quelques modifications. Si vous tapez votre site de mariage en ce moment, c'est ce que vous verrez. Un thème inachevé, cependant, pour apporter des modifications, vous voudrez vous connecter. Donc, vous voudrez aller à votre adresse de site Web slash wp dash admin. Lorsque vous accédez à la page de connexion, vous verrez le nom d'administrateur ainsi que le mot de passe administrateur. Si vous vous souvenez, nous les avons mis en place lorsque nous mettons en place l'application WordPress dans Go Daddy. Saisissez le mot de passe et votre nom d'utilisateur, puis cliquez sur Connexion. Vous êtes maintenant dans WordPress, c'est là que nous allons construire votre site. Assurez-vous de mettre cette page en signet, parfois, il est difficile de se souvenir de l'adresse longue que vous devez taper pour arriver ici. 6. Acheter un thème: Vous êtes maintenant prêt à ajouter un thème. Il y a beaucoup de thèmes là-bas, à l'achat et gratuitement. Celui que j'utilise dans ce tutoriel est de themeforest.com. Si vous allez sur themeforest.com et tapez Lily, dans la barre de recherche, vous trouverez ce thème. J' ai choisi ce thème parce qu'il est beau et j'ai vraiment aimé la chronologie près du bas qui met en valeur tous les événements importants de vous et de votre épouse à être ou marié à être sa femme. Ce thème a tout de votre registre de fête de mariage, emplacement RSVP, ainsi que tous les autres détails que vous voulez ajouter. C' est un thème payant. Il y a des avantages et des inconvénients sur les thèmes payants et gratuits. L' achat de thème payant est génial parce que vous obtenez le soutien. Si vous avez des questions, vous pouvez envoyer un e-mail au développeur et généralement ils sont assez bons pour répondre. J' ai personnellement eu une question sur ce thème et envoyer un e-mail au développeur et il a été très rapide avec la réponse et a répondu à mes questions. Vous pouvez payer par PayPal ou par carte de crédit. Une fois que vous avez payé, vous verrez un bouton Télécharger où vous pouvez télécharger le thème sur votre ordinateur. 7. Installez le thème Wordpress: Votre prochaine étape consiste à télécharger le thème sur WordPress. Lorsque vous le téléchargez, vous aurez un fichier ZIP comme celui sur mon bureau. Vous voudrez double-cliquer dessus pour le décompresser. Lorsque vous ouvrez le fichier, vous verrez un tas d'autres fichiers. Si vous ouvrez la documentation, vous verrez une page index.html. Double-cliquez dessus, et il s'ouvrira dans votre navigateur. Ceci est un tutoriel rapide pour vous montrer tout ce que vous devez savoir sur ce thème. La première partie vous montre comment le télécharger sur WordPress. Le thème que vous souhaitez télécharger sur WordPress est le fichier lily.zip. Allez dans votre tableau de bord WordPress, et allez dans Apparence, Thèmes. Cliquez sur Ajouter un nouveau. C' est là que vous pouvez télécharger un thème ou utiliser l'un des trois thèmes WordPress. Vous pouvez voir quelques-uns d'entre eux sur la première page, et vous pouvez également rechercher des thèmes dans la barre de recherche. Nous allons utiliser celui que nous avons téléchargé depuis ThemeForest. Pour ce faire, vous voulez cliquer sur le bouton Télécharger le thème en haut à gauche. Cliquez ensuite sur Choisir un fichier, puis sélectionnez le dossier, puis lily.zip. Cliquez sur Installer maintenant. Une fois cela terminé, vous pourrez cliquer sur Activer. Vous allez également remarquer que ce thème nécessite quelques plugins pour exécuter toutes les différentes fonctionnalités qu'il vous montre. Si vous cliquez sur Visiter le site, vous verrez à quoi il ressemble sans les plugins et sans contenu. 8. Installez des Plugins de thème: Maintenant, vous voulez installer tous les plugins pour avoir le RSVP, des photos, tout ce truc amusant. Cliquez sur Commencer l'installation des plugins. Vous verrez une liste des plugins, sélectionnez tout et dans le menu Actions groupées, choisissez Installer, puis cliquez sur Appliquer. Il faut quelques minutes pour installer tous les plugins. Une fois terminé, vous aurez une liste de tout ce que vous avez installé et un lien pour revenir à l'installateur. Cliquez sur le lien pour revenir au programme d'installation. Ici vous verrez tous les plugins que vous venez d'installer. Mais vous remarquerez qu'il est dit l'installation doit encore être activée. Tous vos plugins se trouvent dans le menu de gauche. Cliquez sur Plugins installés. Vous trouverez ici une liste de tous les plugins installés sur votre site WordPress. Certains d'entre eux sont là par défaut de GoDaddy ou WordPress. Il y en a quelques-uns que je supprimerai personnellement, car plus il y a de plugins, plus il y a de poids sur votre site et plus il sera lent. Donc, ne gardez que ce qui est nécessaire. ce moment, je sélectionne tous ceux que nous venons d'installer, et dans le menu Actions en vrac, je clique sur Activer. Une fois que vous avez appuyé sur Appliquer, vous verrez qu'il y a des informations en haut. Akismet est pour la régulation des commentaires de spammy. Je n'ai pas l'intention d'avoir une section de commentaires sur mon site Web, donc je vais juste ignorer ce message et passer au message Jetpack. Vous devrez connecter le wordpress.com pour que ce plugin fonctionne. J' ai un compte, donc je vais juste me connecter avec mon nom d'utilisateur et mon mot de passe. Cependant, si vous ne le faites pas, il y a un lien pour en créer un juste là. Une fois connecté, ce message s'affiche et si vous cliquez sur Démarrer, vous pourrez ajuster certains paramètres avec Jetpack. Certains d'entre eux dont vous n'aurez pas besoin. Vous pouvez désactiver beaucoup d'entre eux et simplement aider avec l'attente et la charge de votre site à nouveau. Donc, je désactive les statistiques du site, le partage, la publicité, publication connexe, la distribution améliorée, parce qu'aucun de ceux-ci n'est vraiment nécessaire. Je veux seulement que les personnes qui sont invitées à mon mariage aillent sur ce site. Maintenant, tout est installé, et nous sommes prêts à passer à autre chose. 9. Installez du contenu de démo: La façon la plus simple de voir le site Web est de le voir avec du contenu de démonstration. Ce thème est livré avec du contenu de démonstration afin de vous donner un guide de l'endroit où vous pouvez mettre des photos ou du texte et juste vous donner une meilleure idée de la façon dont il peut ressembler à la fin. Pour importer ce contenu, accédez à Outils, Importer. Vous verrez une liste des différentes options d'importation. Cliquez sur WordPress. Vous devez installer l'importateur pour importer ce contenu. Allez-y et cliquez sur Installer, cliquez sur Activer et exécutez Importer. Je vais te montrer un rapide avant et après. Si vous vous souvenez, c'est à quoi ressemblait notre site avant le contenu. Maintenant, cliquez sur Choisir un fichier et nous allons importer le contenu dans le dossier. Dans le dossier de thème, vous verrez un fichier XML. Choisissez cette option et cliquez sur Ouvrir. Cliquez ensuite sur Charger le fichier et importez. Ensuite, vous verrez une page avec quelques paramètres. Vous souhaitez désactiver le téléchargement et l'importation des pièces jointes, puis sélectionnez l'un de vos utilisateurs existants et cliquez sur « Soumettre ». Cela prend un peu de temps à importer, mais une fois que c'est fait, cela vous le dira et vous êtes prêt à consulter le nouveau site Web. Cliquez sur Actualiser sur le site Web, et vous pouvez voir maintenant qu'il y a du contenu. Ça ne ressemble pas à l'exemple, mais on y arrive. Si vous cliquez sur l'un des messages, vous pourrez voir du texte et peut-être des photos. 10. Personnalisation de base: Maintenant que nous avons du contenu de démonstration, nous devrions le personnaliser afin qu'il soit plus conforme à notre thème de mariage. Alors allez dans « Apparence » et cliquez sur « Personnaliser ». Ici vous avez un menu avec quelques options. La première chose que nous voulons faire est de changer à quoi ressemble la page lorsqu'elle se charge. ce moment, il a montré toutes ces boîtes. Mais nous voulons une page d'accueil qui a une grande image de fonctionnalité. Cliquez donc sur « Page d'accueil statique », puis sous la page d'accueil affiche, choisissez « Page statique ». Sous la page d'accueil du menu déroulant, sélectionnez « Page d'accueil ». Voici un aperçu de ce à quoi ressemblera le site Web. Maintenant, vous voyez un endroit où vous allez avoir la grande image de la page d'accueil. Si vous le voyez en direct, vous verrez qu'il est là. Nous voulons également changer le titre et le slogan. En ce moment, il dit juste un autre site WordPress. Ici, vous pouvez mettre la date de votre mariage comme vu dans l'exemple. Si vous regardez à travers le menu, il y a beaucoup d'options et nous allons y arriver bientôt. Assurez-vous de cliquer sur « Enregistrer » et « Publier » pour enregistrer toutes les modifications que vous venez d'apporter. Voici un aperçu rapide des paramètres du menu. Si vous choisissez des couleurs, vous pouvez voir ici que vous pouvez modifier la couleur du texte, votre couleur d'accentuation, votre couleur d'arrière-plan, et vous afficher toutes les modifications sur le côté droit. Vous pouvez également modifier votre image d'en-tête ici. Vous pouvez faire en sorte que l'image d'arrière-plan soit un diaporama, où plusieurs images tournent l'une après l'autre. J' ai choisi d'éteindre le diaporama. Le contenu de la démo comprend des photos avec des dimensions sur elles. Cela vous aidera et choisir les bonnes photos. Vous pouvez également aller dans « Paramètres », « Général », c'est là que vous changez certains des trucs dans les coulisses, comme l'adresse e-mail associée au compte. Vous pouvez également modifier le titre et le slogan ici, la façon dont les dates sont affichées sur les billets de blog. Vous pouvez également aller dans la section d'écriture et de lecture et modifier tous les paramètres. Cependant, pour ce tutoriel, je ne changerai aucun de ces paramètres. Alors n'hésitez pas à les laisser seuls pour l'instant. 11. Ajouter du contenu: Maintenant, nous devons ajouter du contenu. Pour ce faire, allez dans Apparence et cliquez sur Widgets. Ce thème fonctionne avec des widgets afin d'obtenir toutes les fonctionnalités que vous voyez sur la page d'accueil. Vous verrez sur le côté gauche une liste d' un tas de widgets que vous pouvez faire glisser là-bas. Situé près du bas, vous allez voir tous les widgets qui sont venus installer avec ce plugin. Ils commencent tous par Themechills. Ce sont ceux que vous voyez sur la page d'accueil du site de démonstration. Nous voulons les faire glisser vers ce répertoire. J' ai ajouté trois widgets. Pour les vérifier, je vais cliquer sur Visiter le site. Je devrais voir une minuterie, quelques événements et une carte. Si vous faites défiler vers le bas, il y a votre compte à rebours, il y a votre liste d'événements et vos cartes devraient être là, mais ce n'est pas encore prêt à être installé. Maintenant, je vais ajouter le reste des widgets à la section. 12. Galerie de photos à la page suivante: La première section ou widget sur lequel nous allons travailler est les photos. C' est la zone où vous avez un défilement horizontal de quelques photos de vous et de votre autre significatif. Vous pouvez classer cette section avec ce que vous voulez. Vous pouvez également ajouter une description. J' en ai copié et collé un là-dedans. Vous voudrez également ajouter un bouton ou appeler à l'action moins pour plus d'informations sur la réception pour les clients qui ne peuvent pas se rendre au mariage de destination. Vous devrez mettre une URL pour que le bouton fonctionne. Si vous n'en avez pas maintenant parce que la page n'est pas encore prête, laissez-la pour plus tard. Si vous accédez à ce site et cliquez sur « Actualiser », vous verrez le texte que vous venez d'entrer. Maintenant, nous devons ajouter nos photos. Sur le côté gauche, si vous cliquez sur « Photos », vous verrez une liste du contenu de démonstration qui y est déjà. Nous pouvons simplement les éditer au lieu d'ajouter de nouvelles photos. Il suffit d'en choisir un et de cliquer sur « Modifier ». Vous verrez sur le côté droit, il y a une image d'entité. C' est là que l'image va réellement apparaître sur le site Web. Je supprime cette image de fonctionnalité et change le titre en fête de fiançailles. Et je vais ajouter une image de fonctionnalité. Et cette image va être à la fête de fiançailles. Cliquez sur « Parcourir », puis parcourez vos dossiers et vérifiez l'image que vous voulez. J' en ai quelques-uns que je vais télécharger à ceux qui ont à voir avec cette section photo. Je vais le faire maintenant. Je montre plusieurs images en appuyant sur la commande et en sélectionnant avec ma souris. Une fois qu'ils ont terminé le téléchargement, j'ai choisi celui que je voulais être l'image de fonctionnalité de cette section photo. Sélectionnez cela, puis appuyez sur « Définir l'image en vedette. » Cliquez sur « Mettre à jour » pour enregistrer vos modifications. Retournez aux photos et faites la même chose pour autant de photos que vous l'avez. Lorsque vous avez terminé, revenez sur le site et cliquez sur « Actualiser ». Les photos apparaissent sous le texte et vous pouvez les afficher en faisant défiler vers la gauche ou la droite. 13. Compte et chronologie: Ensuite, nous allons ajouter le compte à rebours et les événements. Le compte à rebours est la section avec les jours, mois et les heures avant le mariage. Ainsi, dans la zone des widgets sous « Apparence » dans la section Page d'accueil, ouvrez la liste déroulante du compte à rebours. Ici, vous pouvez mettre la date pour le mariage et l'heure. Sous la minuterie sont deux points pour les messages. premier champ est un message pour quand le compte à rebours est terminé, et celui ci-dessous est le message qui sera affiché avec votre compte à rebours. Vous pouvez voir qu'il a les jours, heures, les minutes et les secondes dans cet ordre. Vous pouvez certainement les changer simplement en copiant et en collant à l'endroit que vous voulez. Si vous actualisez votre page, vous verrez le compte à rebours avec l'arrière-plan gris au milieu de votre section photo et de la section événements. Maintenant, nous allons mettre à jour les événements. Vous pouvez ajouter un titre si vous voulez, mais je vais choisir de ne pas le faire. Sur le côté gauche, je vais cliquer sur « Événements » pour entrer et changer ceux qui sont avec le contenu de la démo. Tout comme le premier et cliquez sur « Modifier ». C' est là que vous pouvez modifier le titre, modifier la description et ajouter une image d'entité. Je vais télécharger des fichiers de la même façon que sa dernière fois. Il suffit d'en prendre quelques-uns pour cette section à la fois. Ensuite, une fois qu'ils ont terminé le téléchargement, je vais choisir celui pour cet événement que je veux être l'image de la fonctionnalité. Lorsque vous avez terminé, cliquez sur « Mettre à jour ». Un petit conseil, si vous survolez et cliquez sur « Mise à jour rapide », vous pouvez faire quelques petites mises à jour ici, comme la date et le titre. Continuez avec le reste des titres de l'événement et modifiez-les pour qu'ils correspondent à votre site Web. Assurez-vous d'obtenir les bonnes dates, car c'est ainsi qu'elles vont s' afficher sur le site du début à la fin. Lorsque vous avez terminé, vous devriez être en mesure de cliquer sur « Actualiser » et de consulter votre nouvelle chronologie. 14. Callout et fête de mariage: Il y a quelques autres fonctionnalités que nous pouvons ajouter, une étant la légende et l'autre étant votre fête de mariage. Dans les widgets sous la page d'accueil, vous pouvez voir la section pour la légende. C' est fondamentalement juste un texte supplémentaire. Tout ce que vous voulez qui va avec ce fond gris, le même que le compte à rebours. L' équipage est sous les profils. C' est là que vous allez mettre toutes vos photos et bios de vos demoiselles d'honneur. Vous pouvez ajouter un titre et appuyez simplement sur « Enregistrer ». Ensuite, à partir du côté gauche, cliquez sur « Profils ». Ici, vous avez déjà un tas d'exemples là-dedans. Nous allons faire la même chose et éditer ceux qui sont déjà là. Il suffit d'en choisir un et de cliquer sur « Modifier ». Changez le nom en haut et la petite description à leur sujet. Ensuite, dans l'image de la fonction, c'est la même chose que les événements, suffit de télécharger quelques images et de sélectionner la bonne image. Définir l'image de la fonction, et cliquez sur « Mettre à jour ». Continuez à faire ça pour toutes vos demoiselles d'honneur et demoiselles d'honneur jusqu'à ce que vous ayez fini. Si vous avez besoin d'ajouter plus de personnes que dans les exemples, il vous suffit de cliquer sur « Ajouter un profil » en haut à gauche à côté du titre du profil. Lorsque vous avez terminé, appuyez sur « Actualiser » et vous devriez voir toutes les photos apparaître sous votre légende. Si vous passez la souris sur eux, vous verrez le nom et la description rapide, et vous pouvez cliquer dessus pour en savoir plus sur cette personne. Il y a aussi un peu de navigation en bas. Vous pouvez passer par la prochaine ou la demoiselle d'honneur ou les demoiselles d'honneur précédentes. 15. Carte de site: Nous allons maintenant ajouter une carte pour l'emplacement du mariage. Sous les apparences dans les widgets, sous la page d'accueil, vous verrez la carte, liste déroulante, vous pouvez ajouter un titre, puis nous aurons également besoin de saisir un code à mettre dans la section des codes incorporés ou courts. Si vous allez à la page des plugins et trouvez le plugin de carte que nous avons installé appelé Responsive Styled Google Maps. Cliquez sur « Paramètres », ici vous avez votre carte, c'est là que vous allez choisir la couleur du pointeur, la couleur d'arrière-plan, et aussi où vous allez entrer l'adresse pour que les gens trouvent votre mariage. Tous les styles de carte sont dans cette liste déroulante, j'ai sélectionné le numéro 8. Il y a beaucoup d'autres options, mais il suffit de changer les couleurs et de vous assurer de mettre la bonne adresse. Lorsque tout est défini comme vous le souhaitez, assurez-vous d'aller à droite dans la zone gris foncé, sélectionnez tout ce texte et copiez-le. Ensuite, revenez à vos widgets et ouvrez les widgets de la page d'accueil dans la section de la carte, et collez ces informations dans la section d'intégration ou de code court, appuyez sur « Enregistrer ». Actualisez votre site Web et consultez votre nouvelle carte. C' est là. Si vous cliquez sur l'icône du petit pointeur, vous allez obtenir l'adresse avec un lien vers les directions. 16. RSVP et Instagram: Maintenant, nous allons ajouter un moyen pour les invités RSVP et suivre sur Instagram. Dans les widgets, cette section technique est l'endroit où le formulaire de contact réel va aller. Nous allons sur le côté gauche et cliquez sur Contact et cliquez sur Modifier sous RSVP. Voici le formulaire RSVP. C' est là que vous allez choisir ce que vous voulez qu'ils mettent. ce moment, où ils ont le nom complet, e-mail, vous serez présent ainsi que les choix de menu. Vous voudrez également modifier l'adresse e-mail dans la section deux, car vous voulez que la RSVP soit envoyée à votre adresse e-mail. Vous pouvez également modifier le corps du message. Lorsque vous avez terminé, appuyez sur Enregistrer. Assurez-vous de copier et de coller le code du formulaire de contact dans l'arrière-plan bleu et de revenir aux widgets. Sous les textes, vous allez coller ce code dans la section de contenu, puis appuyez sur Enregistrer. Si vous actualisez votre page, vous verrez le formulaire de contact juste là. Instagram est assez facile, tout ce que vous avez à faire est de mettre dans un hashtag, appuyez sur enregistrer et toutes les photos qui ont ce hashtag vont apparaître sur votre site Web. Notez simplement que les photos qui sont sur un compte privé ne s'afficheront pas. Ils doivent être publics pour pouvoir apparaître sur votre site web. 17. Image d'en-tête à la page d'accueil: Pour changer l'image d'en-tête, vous devez entrer en apparence, personnaliser. Choisissez l'image d'en-tête dans le menu de gauche. Comme je l'ai déjà mentionné, il y a une image de porte-place avec des dimensions. Nous voulons télécharger une image avec les mêmes dimensions. Il y a deux façons de le faire. Premièrement, vous pouvez prendre votre photo dans Photoshop, ajuster les dimensions là. À l'aide de l'outil Recadrage, modifiez-le en 1920 d'ici 1080. Vous voulez vous assurer d'enregistrer pour le Web, car vous voulez que la taille de l'image soit aussi petite que possible. Dans les options Enregistrer pour le Web, en haut à droite, vous verrez une liste déroulante pour le type d'image ainsi que la qualité de l'image. Je choisis haut, mais je pensais qu'il était encore trop élevé, alors j'ai choisi moyen. Vous pouvez voir que diminuer la taille du fichier. Maintenant, je vais aller de l'avant et sauvegarder ça pour ma page d'accueil. Comme je l'ai déjà dit, je n'ai pas de diaporama, alors cliquez sur ajouter une nouvelle image, télécharger des fichiers, sélectionnez le fichier que vous venez d'enregistrer, puis appuyez sur sélectionner et recadrer. Ensuite, appuyez sur sauter le rognage s'il est déjà rogné et là vous l'avez. Voilà votre image. Si vous n'avez pas Photoshop, vous pouvez facilement le faire dans WordPress. Choisissez l'image pleine taille et cliquez sur Sélectionner et recadrer. Dans la page suivante, vous aurez la possibilité de modifier les dimensions de l'image. Vous pouvez voir qu'il y a déjà une taille préchargée pour cette section. Il suffit de le déplacer jusqu'à ce que vous obteniez un endroit que vous aimez, puis sélectionnez recadrer l'image. Vous voulez vous assurer de supprimer l'image de l'espace réservé avec les dimensions afin de voir la nouvelle image que vous avez chargée sur votre site Web. Si vous actualisez la page, vous devriez voir la nouvelle image en arrière-plan maintenant. Maintenant, nous allons ajouter le texte au-dessus de l'image d'arrière-plan. Cliquez sur Header Hero Text, tapez ce que vous souhaitez voir apparaître sur l'image. Lorsque vous avez terminé avec cela, vous pouvez ajouter un bouton pour sous le texte. J' ai choisi de mettre un bouton RSVP ici. Dans la liste déroulante, vous pouvez choisir la page liée vers laquelle vous voulez que le bouton vous emmène, puis taper le texte que vous souhaitez afficher sur le bouton. N' oubliez pas de cliquer sur Enregistrer et publier. 18. Menus de navigation: Nous allons ajouter les menus que vous voyez en haut à droite sur le site Web. Dans le même menu de personnalisation, choisissez « Menus », puis « Emplacements des menus ». Sous la liste déroulante, cliquez sur « Menu supérieur ». Vous pouvez voir à droite où ce menu va apparaître. Il y a quelques éléments par défaut là-dedans en ce moment : blog, registre, chronologie. Si vous revenez en arrière, puis choisissez le menu, vous pouvez décider si vous voulez les conserver ou les supprimer. Je ne vais pas avoir un blog, donc je l'ai supprimer.Vous pouvez également ajouter plus d'éléments de menu en cliquant sur le bouton Ajouter le menu. Vous pouvez ajouter un lien personnalisé, vous pouvez ajouter des publications, vous pouvez ajouter les pages que vous avez déjà créées, il y a beaucoup d'options à mettre dans votre menu en haut à droite. Vous pouvez également faire glisser les éléments de menu pour les placer dans un ordre différent. Lorsque vous avez terminé, cliquez sur Enregistrer et publier. 19. Registre de cadeaux: Pour le registre, nous allons avoir une page séparée. Ça ne sera pas sur la page d'accueil. Vous allez pouvoir y arriver à partir du menu en haut à droite. Si vous cliquez sur le lien « Registre » en ce moment, vous verrez cette page. Il vous dit que vous devez télécharger un autre plugin. Celui-ci que vous devez télécharger séparément en dehors de WordPress. Choisissez le téléchargement gratuit, et entrez votre adresse e-mail. Vous devriez obtenir un lien dans votre e-mail pour télécharger le plugin. Une fois téléchargé, accédez à la page Plugins et cliquez sur Télécharger le plugin. Cliquez sur « Choisir un fichier » et sélectionnez le fichier bean-registry.zip, cliquez sur « Installer maintenant » et quand c'est fait, cliquez sur « Activer le plugin ». Maintenant, lorsque vous allez sur ce site et cliquez sur la page « Registre », vous devriez voir quelques images avec des magasins et des logos pour accéder à votre registre. Pour les modifier, nous allons aller dans les pages et cliquer sur « Modifier » sous Registre. Vous verrez un tas de codes courts sur cette page. C' est là que vous allez changer le nom du magasin. Pour obtenir une liste des noms de magasin proposés, sélectionnez le dossier image dans le fichier que vous venez de télécharger. Vous verrez une liste de tous les différents logos qu'ils proposent. Copiez et collez ce nom de fichier dans le code court sur WordPress. À l'endroit où il y a deux hashtags, c'est là que vous allez mettre l'adresse pour accéder à votre registre. Une fois que vous cliquez sur « Mettre à jour », le lien doit être mis à jour et vous devriez voir le nouveau logo sur votre site. Lorsque l'invité clique sur ce logo, il doit alors être amené à votre registre. 20. Ajouter une nouvelle page: Vous pouvez ajouter une nouvelle page à votre site. le menu de gauche, cliquez sur « Pages », « Ajouter un nouveau ». Entrez le titre de votre page en haut. Lorsque vous avez terminé, cliquez sur « Publier ». Vous pouvez ajouter cette page à votre menu. Alors allez à Apparence, Personnaliser. Cliquez sur « Menus », sélectionnez « Menu supérieur ». Je vais remplacer le menu Timeline par ce nouveau. J' ai donc supprimé cela, et maintenant je clique sur « Ajouter des éléments », choisissez « Pages », saisissez « Détails », et appuyez sur « Enregistrer ». Vous devriez maintenant le voir en haut à droite. Lorsque vous cliquez sur la page « Détails », vous allez probablement voir une page vide avec un titre. Pour ajouter du contenu, il vous suffit de saisir toutes les informations dans la zone blanche située sous le titre. C' est là que je vais mettre les détails de la cérémonie, l'emplacement de l'hôtel, ainsi que le dîner après. Si vous souhaitez ajouter du style à votre texte, cliquez sur l'icône pour ouvrir la barre d'outils située en dessous. Ajoutez ensuite des en-têtes ou une couleur ou une taille de police et placez votre texte au centre ou à gauche si vous le souhaitez. Vous pouvez également ajouter un lien en mettant en surbrillance le texte et en utilisant l'icône de lien pour ajouter l'adresse. 21. Personnalisation Cs: Dans cette dernière section, je vais montrer comment faire une personnalisation avancée. La première chose que je vais vous montrer est d'ajouter des polices personnalisées. Vous allez dans Plugins et recherchez des polices Google et trouvez un plugin appelé polices Google WP. Cliquez pour activer le plugin. Une fois qu'il sera prêt. Vous pouvez y aller sur le côté gauche et cliquer sur « Google Fonts ». Le reste des personnalisations nécessite des modifications CSS. Pour ce faire, j'ai quelques étapes décrites ici, et c'est essentiellement les mêmes étapes pour chaque fois que nous voulons changer quelque chose. Il est préférable d'utiliser un navigateur Chrome ou Firefox. Lorsque vous trouvez l'élément Web que vous souhaitez modifier, le bouton droit de la souris et cliquez sur Inspecter l'élément ou Inspecter en fonction du navigateur dans lequel vous vous trouvez. J' ai utilisé l'image d'arrière-plan comme exemple ici. Une fois que vous avez appuyé sur Inspecter, vous verrez une fenêtre pop-up de la barre d'outils du développeur s'afficher avec un tas de code HTML et CSS. Vous voudrez ensuite trouver le code HTML qui va avec les éléments que vous souhaitez modifier. Ensuite, à partir de là, vous cliquez dessus, puis changez les valeurs CSS. Vous copiez ensuite et collez cela et l'apportez dans la section CSS dans WordPress.Nous aurons un fichier que vous pourrez télécharger dans des projets qui ont toutes les modifications CSS que j'ai faites si vous souhaitez appliquer les mêmes. C' est un rapide avant et après. C' est à quoi ressemble la police standard. Si vous cliquez avec le bouton droit de la souris et cliquez sur inspecter, vous pouvez voir quel style de texte il s'agit, il s'agit d'un H3. C' est important de savoir pour que vous sachiez quelle police mettre avec quel style. Cochez H3 pour changer l'en-tête. Si vous voulez voir les styles de polices que Google Fonts a, accédez à google.com/fonts. Ici vous pouvez faire défiler toutes les différentes polices de style, puis quand vous revenez au plugin, vous pouvez choisir celui-ci dans le menu déroulant. Lorsque vous avez terminé, cliquez sur « Enregistrer toutes les polices ». Si vous actualisez votre page, vous devriez voir une nouvelle police. Maintenant, nous allons ajouter une image personnalisée à afficher lorsque l'invité clique sur l'icône de la carte. Je vais chercher le Tropicana et saisir leur logo de Google Images et l'enregistrer sur mon ordinateur. Je vais ensuite ouvrir un nouvel onglet avec la Médiathèque. Ensuite, téléchargez l'image que nous venons de sauvegarder, cliquez sur l'image pour l'ouvrir, puis cliquez sur « Afficher la page de pièce jointe ». clic droit sur l'image et cliquez sur « Ouvrir l'image dans un nouvel onglet ». Ici, vous pouvez copier et coller la barre d'adresse supérieure, coller dans l'adresse qui se trouve dans la zone de description. Je vais juste resélectionner mes couleurs, puis m'assurer que vous copiez le texte dans la zone grise pour écraser l'ancien texte. Retournez dans Widgets, ouvrez la page d'accueil, ouvrez la carte et remplacez l'ancien texte par le nouveau texte. Cliquez sur « Enregistrer ». Si vous actualisez la page et cliquez sur l'icône de la carte, vous devriez voir la nouvelle image. Maintenant, nous allons changer la fleur rose qui apparaît dans le séparateur sous les titres. Pour ce faire, je vais attraper une icône de flaticon.com. J' ai cherché cœur et en ai trouvé un avec une bague de fiançailles avec un cœur sur le dessus. Si vous cliquez sur l'œil, vous devriez pouvoir télécharger un fichier PNG avec la couleur que vous choisissez. Cliquez sur « Téléchargement gratuit », et si vous faites un clic droit et Inspecter l'élément, vous verrez qu'il est défini comme une image d'arrière-plan appelée lily.svg. Nous allons remplacer ça par notre nouvelle image. Nous allons le faire en allant sur godaddy.com, allez dans la gestion de votre site d'hébergement Web, puis en cliquant sur Gestionnaire de fichiers. Lorsque vous êtes ici, vous devriez naviguer vers le site de mariage, ouvrir ce dossier, ouvrir wp-content, puis Thèmes, puis le nom de votre thème qui est Lily. Ensuite, ouvrez Image et vous verrez le fichier lily.svg, vous allez donc faire glisser votre nouveau fichier dans ce dossier. Pour mettre cela en place, vous allez vouloir aller dans l'éditeur d'apparence. Vous verrez une liste de pages sur le côté droit, vous faites défiler tout le chemin vers le bas, vous pouvez cliquer sur style.css. Avant d'apporter des modifications, il est conseillé de copier tout le texte de la page que vous modifiez et de le coller dans un fichier texte. Juste au cas où vous gâcheriez quoi que ce soit, vous pouvez le replacer à l'origine. Une fois que ce fichier est ouvert, si vous cliquez sur Apple F pour rechercher le fichier, puis tapez Lily, cela vous amènera à ce style. Ensuite, vous pouvez changer le lily.svg pour le nom de votre nouveau fichier. Lorsque vous avez terminé, actualisez la page et voyez si l'icône apparaît. Pour moi, ce n'est pas le cas. Elle est toujours là, mais elle est cachée en arrière-plan. Je vais changer la taille de l'arrière-plan à 100 pour cent. Il est là. Vous voudrez copier toute la section de texte où vous modifiez simplement la taille de l'arrière-plan, maintenant nous devons ajouter ce style que nous venons de changer. Si vous allez à l'apparence et cliquez sur modifier CSS, vous avez une page CSS vierge. Collez le texte que vous venez de copier dans l'éditeur de feuille de style CSS. Enregistrez la feuille de style et continuez. Nous allons ajouter plus de styles. Je vais changer la superposition sur l'image d'arrière-plan. Il fait un peu sombre donc j'ai cliqué dessus, je suis allé inspecter l'élément et puis j'ai trouvé que la couleur de fond était un gris opaque, je change cela en transparent donc c'est un peu plus lumineux. Vous allez vouloir faire la même chose et mettre en surbrillance le texte afin que vous puissiez le copier, puis le coller dans l'éditeur CSS. Maintenant, je vais changer la taille de la police pour les en-têtes. Mais quand je clique avec le bouton droit de la souris et que je clique sur Inspecter l'élément, je peux voir que la taille de la police est un peu grande, donc je l'ai pris un REM, et maintenant tout correspond à l'intérieur de la ligne. Je vais également changer la taille de la police et la couleur de la police de la navigation en haut à droite. C' était un peu trop léger donc je l'ai changé à la couleur 666666. Encore une fois, supprimez tout ce que vous n' utilisez pas lorsque vous le collez dans la feuille de style. Maintenant, je vais changer la couleur de cette bordure très légère autour en une couleur blanche unie. Je change la couleur RGBA transparente en blanc, qui est FFFFFF. Maintenant, je change juste la hauteur de l'image d'arrière-plan parce que j'ai trouvé qu'elle était un peu grande, donc je l'ai changé de 800 pixels à 700 pixels. ce moment, je change la couleur d'arrière-plan du compte à rebours à la même couleur que le gris qui est derrière. Je suis d'abord allé vérifier les éléments de fond gris et j'ai trouvé quelle couleur de gris est, puis je suis allé à l'arrière-plan blanc et j'ai changé cela pour être le même. Je change aussi la taille de la police parce qu'ils sont un peu petits donc je vais la rendre un peu plus grand. Une chose dont je voudrais me débarrasser est le droit d'auteur dans le pied de page. J' ai acheté le thème, donc j'ai le droit de l'utiliser. Je vais juste mettre un style d'affichage aucun sur le pied de page afin que rien ne s'affiche en bas. 22. Synthèse: Pour terminer, c'est un exemple de ce à quoi ressemblera le site Web fini. À la fin, je vais vous montrer les différentes résolutions de taille d'écran, quoi il ressemblera dans les tablettes, et les appareils mobiles. Si vous prenez les poignées de votre navigateur et faites glisser le navigateur à un peu plus petit, vous verrez qu'il se transforme en une vue tablette, puis vous l'apportez encore plus petit et vous allez le voir aller jusqu'au mobile. Lorsque vous déplacez votre navigateur, vous remarquerez que le site semble bien, quelle que soit la taille de l'écran sur lequel vous l'affichez.