Comment créer un site Web immobilier à l'aide de Toolset Real Estate et OceanWP

Un site Web immobilier doit être aussi stable et aussi fiable que les maisons que vous vendez.

Mais créer un site Web immobilier solide que les utilisateurs apprécieront peut parfois être aussi difficile que de construire les maisons que vous vendez - si vous utilisez le mauvais ensemble d'outils.

Heureusement, il est prouvé que la combinaison de Toolset Real Estate avec OceanWP vous offre un site Web immobilier professionnel avec toutes les fonctions dont vous pourriez avoir besoin.

Dans ce guide, nous allons vous montrer comment créer les fonctionnalités suivantes :

• Types de publication personnalisés pour vos différentes propriétés et agents
• Champs personnalisés pour ajouter des informations telles que le nombre de salles de bains
• Taxonomies pour séparer vos propriétés en fonction des caractéristiques (maisons individuelles, bungalows, etc.)
• Modèles pour afficher vos propriétés avec la même structure
• Un curseur pour afficher des images de vos propriétés
• Des post-relations pour mettre en relation les agents immobiliers avec les biens dont ils ont la charge
• Une recherche permettant aux utilisateurs de trouver facilement la meilleure propriété pour eux
• Cartes pour montrer les emplacements des propriétés et les résultats de recherche
• Un formulaire frontal permettant aux utilisateurs de soumettre leurs propres listes de propriétés

Si vous souhaitez effectuer ces étapes au fur et à mesure que vous les lisez, vous pouvez utiliser votre propre site Web immobilier de test gratuit créé par Toolset et OceanWP.

Pourquoi nous utilisons Toolset Real Estate et OceanWP

Toolset Real Estate fait partie de Toolset qui vous fournit toutes les fonctionnalités dont vous avez besoin pour créer plusieurs types de sites Web professionnels.

Plus précisément, avec Toolset Real Estate, vous n'aurez besoin d'aucun autre plugin pour ajouter les fonctionnalités dont un site Web immobilier a besoin. Cela signifie que vous n'avez pas à vous soucier de la compatibilité des plugins ou si le nombre de plugins ralentira votre site Web.

Pendant ce temps, OceanWP est l'un des thèmes les plus populaires pour les sites Web d'entreprises pour une raison. Les sites Web gérés par OceanWP ont un meilleur taux de conversion, des temps de chargement plus rapides et un référencement amélioré - afin que les acheteurs de maison puissent trouver facilement votre site Web.

Ensemble, Toolset Real Estate et OceanWP fonctionnent ensemble de manière transparente, ce qui signifie que vous pouvez créer des sites Web robustes qui ont fière allure sans aucun souci.

N'oubliez pas que vous pouvez télécharger gratuitement des sites Web de test construits à l'aide de Toolset et OceanWP pour expérimenter.

Ce dont vous aurez besoin pour commencer

Lorsque vous créez un site immobilier personnalisé avec Toolset, vous aurez besoin des plugins Toolset suivants :

• Types d'outils - pour configurer des types de publication personnalisés, des champs et des taxonomies, pour les propriétés et les agents
• Blocs Toolset - pour concevoir le front-end de votre site (modèles et recherches de propriétés, etc.)
• Toolset Maps - pour ajouter des fonctionnalités permettant de rechercher et d'afficher des propriétés sur des cartes
• Toolset Forms - pour permettre aux agents de gérer les propriétés via des formulaires frontaux personnalisés
• Toolset Access - pour contrôler les parties du site auxquelles les visiteurs, les clients et les agents peuvent accéder

Une fois que vous avez installé et enregistré ces composants, il est temps de commencer à créer votre site Web immobilier !

1. Créez votre type de publication personnalisé

Tout d'abord, nous devons créer un type de publication personnalisé pour notre section "Maisons" afin que les utilisateurs sachent exactement où aller pour les voir.
1. Allez dans Toolset → Dashboard dans votre administrateur WordPress et cliquez sur Add new post type.

2. Nous devons maintenant nommer notre type de message et l'enregistrer à la position où nous voulons qu'il soit affiché dans le menu d'administration.

3. Cliquez sur Enregistrer le type de publication.

Et c'est tout. Le type de poteau personnalisé de votre maison est prêt.

2. Créez vos champs personnalisés

Maintenant que nous avons notre type de publication personnalisé, nous devons ajouter des champs personnalisés. Nos champs personnalisés constituent un modèle de sections que nous voudrons remplir pour décrire chaque maison et ses caractéristiques.

Par exemple, nous aurons besoin de sections pour le nombre de salles de bains, le prix et l'année de construction de la propriété.

1. Sur le tableau de bord Toolset, cliquez sur Ajouter des champs personnalisés à côté du type de publication personnalisé "Maisons" que nous avons créé.

2. Une boîte Ajouter un nouveau champ apparaîtra où nous pourrons choisir le type de champs personnalisés que nous voulons. Par exemple, un champ personnalisé pour « Année de construction » sera un nombre.

3. Pour chaque champ, vous devrez définir des options telles que s'il est obligatoire de saisir des informations.

4. Une fois que vous avez rempli toutes les options préférées pour un champ, cliquez sur Ajouter un nouveau champ pour passer au suivant dans le groupe. Une fois que vous avez ajouté tous les champs d'un groupe de champs, cliquez sur Enregistrer le groupe de champs.

Maintenant, chaque fois que vous éditez un article "Maison", vous verrez ces champs à remplir.

3. Créez vos taxonomies personnalisées

Les taxonomies personnalisées sont un excellent moyen de séparer les propriétés afin que les utilisateurs puissent facilement trouver celles qui correspondent à leurs critères. Par exemple, s'ils ne veulent voir que des maisons à vendre plutôt qu'à louer.

En prenant cet exemple, voici comment créer des taxonomies pour différencier les maisons à vendre et les maisons à louer.

1. Dans le tableau de bord de l'ensemble d'outils, cliquez sur Ajouter une taxonomie personnalisée dans la ligne Maisons .
2. Entrez ce qui suit dans les cases
   1. Nom au pluriel : Types de propriétés
   2. Nom singulier : élément de propriété
   3. Limace : Caractéristique de la propriété
3. Choisissez si vous voulez que la taxonomie soit hiérarchique ou plate. Pour les besoins de celui-ci, nous le garderons à plat.
4. Sélectionnez le type de publication auquel vous souhaitez associer la taxonomie - dans ce cas, ce sera "Maisons".
5. Cliquez sur Enregistrer la taxonomie

Désormais, lorsque nous modifions ou créons un type de publication "Maisons", nous pouvons créer et sélectionner des taxonomies "Type de propriété" à attribuer au type de publication.

4. Créez un modèle pour afficher les propriétés

Nous avons maintenant les composants de base dont nous avons besoin pour montrer nos propriétés, mais une partie importante du processus reste : comment les afficher sur le front-end ?

C'est ici que nous créons un modèle que nous pouvons utiliser pour afficher chacune de nos maisons.

Pour créer notre modèle pour les «maisons» individuelles, nous utiliserons des blocs Toolset avec l'éditeur de blocs WordPress.

Avec Toolset Blocks, vous pouvez concevoir des modèles pour vos types de publication personnalisés, avec des champs et des taxonomies personnalisés. Pas de HTML, pas de CSS, pas de JavaScript et pas de PHP nécessaires !

1. Accédez à Outils → Tableau de bord et cliquez sur le bouton Créer un modèle de contenu dans la ligne Maisons.
2. Utilisez l'éditeur de blocs WordPress pour concevoir votre modèle.
3. Choisissez des blocs dans la section Ensemble d'outils pour toute partie du modèle qui affiche des champs (et non des éléments statiques). Par exemple, utilisez le bloc Titre de Toolset pour tout titre qui affichera un champ. Toolset ajoute la possibilité d'afficher également du contenu dynamique à partir du noyau WordPress et des plugins tiers les plus populaires.
4. Activez les sources dynamiques pour les blocs qui doivent afficher les champs de la publication que le modèle affiche.

Vous pouvez modifier et styliser votre modèle de plusieurs façons. Par exemple, vous pouvez organiser le contenu en colonnes, afficher des parties du modèle de manière conditionnelle, afficher une liste des publications associées, et bien plus encore.

5. Créez un curseur dynamique pour présenter les images de votre propriété

Un curseur est un excellent moyen de présenter vos propriétés en affichant plusieurs images de chacune.

À l'aide de Toolset, vous pouvez facilement créer des curseurs complexes comportant des transitions sans aucun codage PHP complexe.

1. Une fois que vous avez modifié ou créé une page, une publication ou un modèle, insérez le bloc Vue et créez une nouvelle vue.
2. Dans l'assistant de création de vue, activez la pagination et dans la section Sélectionner le style de boucle de vue , choisissez l' option Non formaté (dernier).
3. Dans la dernière étape, sélectionnez le type de publication pour lequel vous souhaitez afficher les publications.
4. Cliquez pour terminer l'assistant et votre vue est prête.

Afficher les champs de publication et appliquer un style personnalisé

1. Insérez un bloc Conteneur afin de pouvoir ajouter un arrière-plan à votre slider. Par exemple, vous pouvez définir l'arrière-plan de la diapositive comme une image dynamique provenant de l'image sélectionnée de la publication.
2. Utilisez les blocs Toolset pour ajouter d'autres champs dynamiques à votre curseur, comme le titre du message.

Avec Toolset Sliders, en plus d'afficher les champs de publication et d'appliquer un style personnalisé, vous pouvez modifier votre curseur avec un éventail d'autres options, telles que la création automatique de votre diapositive de vue et la modification du style de pagination.

6. Créez une post-relation pour connecter vos maisons avec vos agents

Les relations de publication sont une partie importante mais sous-estimée de tout site Web. Avec les relations de publication, vous pouvez connecter différents types de contenu les uns aux autres.

Pour en savoir plus sur la façon dont ils vous aident, consultez notre guide pour créer des relations de publication à l'aide de Toolset et OceanWP.

Sur notre site immobilier, nous avons des maisons et des agents immobiliers. Créons une relation post entre eux.

Créer la relation de publication

1. Accédez à Toolset → Relations et cliquez sur Ajouter nouveau en haut.
2. L'assistant de relations Toolset s'ouvre. Pour nos agents et nos propriétés, nous voulons une « relation un à plusieurs », car un agent sera en charge de plusieurs propriétés.
3. Sélectionnez les types de publication qui formeront la relation.

4. Sélectionnez si vous souhaitez limiter le nombre de messages que vous pouvez attribuer. Par exemple, vous pouvez souhaiter que chaque agent n'ait qu'un maximum de 20 maisons qui lui sont attribuées.

5. Nommez votre relation.

6. Passez en revue vos relations et cliquez sur Terminer.

Comment attribuer des propriétés à un agent

Nous pouvons maintenant commencer à créer des liens spécifiques entre nos propriétés et les agents immobiliers.

1. Accédez à la page d'un agent à partir du menu d'administration
2. Une nouvelle section sera apparue au bas de la page intitulée Propriété de l'agent. Cliquez sur Connecter une propriété existante , puis tapez pour rechercher le nom d'une propriété ou sélectionnez-la dans la liste disponible.

3. Cliquez sur Mettre à jour pour enregistrer votre publication. Désormais, lorsque vous visitez la page de l'agent, toutes les propriétés auxquelles vous vous êtes connecté seront répertoriées. De plus, si vous modifiez l'une des pages de ces propriétés, vous verrez que la relation a été affichée aux deux extrémités - l'agent sera également répertorié sur la page de la propriété.

Création d'une vue pour afficher votre relation de publication

Il existe deux manières d'afficher votre liste de relations de publication :

• Affichez une liste des « plusieurs » publications associées dans des relations un-à-plusieurs et plusieurs-à-plusieurs.
• Dans les relations un-à-plusieurs, affichez les champs qui appartiennent au côté "un".

Affichage de nombreux éléments connexes

Dans notre exemple, les agents ont de nombreuses propriétés, nous allons donc utiliser une vue pour les afficher.

1. Accédez à votre modèle de contenu "Agents"
2. Insérer un bloc Vue et créer une nouvelle vue
3. Sélectionnez pour afficher le type de publication dont vous avez besoin (par exemple, les propriétés), puis sélectionnez l'option pour afficher les propriétés qui appartiennent à l'agent actuel .
4. Utilisez des blocs pour concevoir la sortie de votre vue. Étant donné que la vue est déjà configurée pour afficher les publications associées, vous n'avez pas besoin de sélectionner la relation dans les blocs que vous utilisez pour afficher le contenu dynamique.

Affichage d'un élément associé (parent)

1. Accédez à votre modèle de contenu "Propriétés".
2. Vous pouvez utiliser n'importe quel bloc Toolset pour afficher les informations sur le parent.
3. Dans les propriétés du bloc, sélectionnez le parent dans Post Source.
4. Sélectionnez le champ que vous souhaitez afficher.

7. Comment ajouter une recherche avancée afin que les utilisateurs puissent facilement trouver leurs propriétés les mieux adaptées

Une recherche personnalisée avancée est le meilleur moyen pour vos utilisateurs de trouver exactement ce qu'ils recherchent. Avec plusieurs filtres, ils pourront sélectionner la meilleure maison en fonction de leurs besoins personnels.

1. Commencez par insérer un bloc Vue dans une page.
2. Dans l'assistant de création de vue, activez l'option Rechercher.

3. Sur la page suivante, sélectionnez "Propriétés" sous Choisir le contenu que cette vue affichera .

4. Après avoir terminé l'assistant de création de vue, il y a une section de recherche de vue dans la zone d'édition de la vue. Utilisez les boutons disponibles pour ajouter un champ de recherche personnalisé, insérer des boutons d'envoi et de réinitialisation ou ajouter d'autres blocs.

Par exemple, vous pouvez cliquer sur Ajouter un champ de recherche et utiliser la liste déroulante Sélectionner un champ . Sélectionnez le type de contenu que vous souhaitez que les utilisateurs puissent rechercher et cliquez sur Suivant .

5. Vous pouvez maintenant utiliser la barre latérale droite pour modifier les options de ce champ de recherche. Cela inclut les principaux paramètres de champ, les options d'étiquette et de style.

6. Nous sommes maintenant prêts à créer la section où les résultats seront affichés. Pour ce faire, nous ajoutons des blocs dans la zone Afficher la boucle de l'éditeur.

7. Cliquez sur Ajouter un bloc .

8. Choisissez un bloc que vous souhaitez utiliser dans le cadre de vos résultats de recherche. Par exemple, vous pouvez utiliser le bloc Titre pour afficher les titres de propriété dans les résultats de la recherche.

8. Afficher des cartes pour montrer les emplacements des propriétés

Les cartes sont un excellent moyen d'aider les utilisateurs à comprendre immédiatement l'emplacement exact d'une propriété.

1. Pour commencer à créer une carte, accédez à la page ou au modèle où vous souhaitez afficher la carte. Insérez le bloc Toolset Map. Si vous devez définir une clé API, Google fournit des instructions détaillées sur la manière de procéder.
2. Dans la section Source du marqueur , activez Dynamic Source .
3. Dans la liste déroulante Source de la publication, sélectionnez "Propriété actuelle". Ensuite, dans la liste déroulante Source , sélectionnez n'importe quel champ personnalisé contenant une adresse pour l'afficher sur la carte.

9. Créez un formulaire frontal permettant aux utilisateurs de soumettre leur propre contenu

Enfin, vous souhaiterez peut-être que les utilisateurs fournissent leurs propres annonces à publier sur votre site Web immobilier. L'un des moyens les plus simples de le faire consiste à utiliser un formulaire sur le front-end qui présente tous les champs que vous souhaitez qu'ils remplissent.

La création du formulaire ne pourrait pas être plus simple grâce à l'éditeur glisser-déposer de Toolset.

1. Accédez à Toolset → Publier des formulaires et cliquez sur Ajouter nouveau.
2. Cliquez sur Continuer dans l'assistant Formulaires et entrez le nom de votre formulaire.
3. Modifiez les paramètres de votre formulaire, notamment :
   1. Le type de message auquel ils ajouteront des soumissions
   2. Le statut du message une fois qu'il est soumis
   3. Ce que les utilisateurs voient après avoir soumis le formulaire (vous pouvez également ajouter un message comme je l'ai fait ci-dessous)

4. Vous atteignez maintenant l'éditeur glisser-déposer où vous pouvez décider quels champs aller et où. Ici, vous pouvez également utiliser les champs CSS Editor et JS Editor pour styliser votre formulaire. Il existe également un certain nombre d'éléments supplémentaires que vous pouvez ajouter.

5. Sur la page suivante, vous pouvez ajouter toutes les notifications par e-mail que vous souhaitez que les utilisateurs ou les éditeurs reçoivent à tout moment. Ci-dessous, j'ai ajouté un e-mail à envoyer aux utilisateurs lorsque leur annonce sera mise en ligne.

6. Cliquez sur Terminer et votre formulaire est maintenant prêt à être affiché.

7. Pour afficher le formulaire, il vous suffit d'accéder à la page à laquelle vous souhaitez ajouter le formulaire, d'ajouter le bloc Toolset Form et de sélectionner le formulaire que vous venez de créer pour la liste déroulante.

Prochaines étapes

Une fois que vous avez suivi ces neuf étapes clés pour créer votre propre site Web immobilier, vous pouvez rendre votre site encore plus impressionnant en suivant le cours immobilier en ligne de Toolset.

Les modules faciles à comprendre constituent un guide complet étape par étape - rempli de vidéos pratiques - qui vous indique tout ce que vous devez savoir pour créer un site Web immobilier remarquable.

Quelle a été votre expérience dans la création d'un site Web immobilier ? Faites le nous savoir dans les commentaires!