So erstellen Sie eine Immobilien-Website mit Toolset Real Estate und OceanWP

Eine Immobilien-Website muss so stabil und zuverlässig sein wie die Häuser, die Sie verkaufen.

Aber der Aufbau einer soliden Immobilien-Website, die die Benutzer gerne nutzen, kann manchmal so schwierig sein wie der Bau der Häuser, die Sie verkaufen – wenn Sie die falschen Tools verwenden.

Glücklicherweise erhalten Sie durch die Kombination von Toolset Real Estate mit OceanWP nachweislich eine professionelle Immobilien-Website mit allen Funktionen, die Sie möglicherweise benötigen.

In dieser Anleitung zeigen wir Ihnen, wie Sie die folgenden Funktionen erstellen:

• Benutzerdefinierte Beitragstypen für Ihre verschiedenen Unterkünfte und Agenten
• Benutzerdefinierte Felder zum Hinzufügen von Informationen wie der Anzahl der Badezimmer
• Taxonomien zur Trennung Ihrer Immobilien nach Merkmalen (Einfamilienhäuser, Bungalows etc.)
• Vorlagen, um Ihre Eigenschaften mit der gleichen Struktur anzuzeigen
• Ein Schieberegler zum Anzeigen von Bildern Ihrer Unterkünfte
• Post-Beziehungen, um die Immobilienmakler mit den von ihnen betreuten Immobilien zu verbinden
• Eine Suche, damit Benutzer leicht die beste Immobilie für sie finden können
• Karten, um die Standorte der Immobilien und Suchergebnisse anzuzeigen
• Ein Front-End-Formular, mit dem Benutzer ihre eigenen Immobilienangebote einreichen können

Wenn Sie diese Schritte beim Lesen ausführen möchten, können Sie Ihre eigene kostenlose Testimmobilien-Website verwenden , die von Toolset und OceanWP erstellt wurde.

Warum wir Toolset Real Estate und OceanWP verwenden

Toolset Real Estate ist Teil von Toolset, das Ihnen alle Funktionen bietet, die Sie zum Erstellen verschiedener Arten professioneller Websites benötigen.

Insbesondere benötigen Sie mit Toolset Real Estate kein weiteres Plugin, um die Funktionen hinzuzufügen, die eine Immobilien-Website benötigt. Das bedeutet, dass Sie sich keine Gedanken über die Plugin-Kompatibilität machen müssen oder ob die schiere Anzahl von Plugins Ihre Website verlangsamt.

Inzwischen ist OceanWP aus gutem Grund eines der beliebtesten Themen für Unternehmenswebsites. Websites, die von OceanWP betrieben werden, haben eine bessere Konversionsrate, schnellere Ladezeiten und verbessertes SEO – sodass Hauskäufer Ihre Website leicht finden können.

Zusammen arbeiten Toolset Real Estate und OceanWP nahtlos zusammen, was bedeutet, dass Sie robuste Websites erstellen können, die ohne Bedenken großartig aussehen.

Vergessen Sie nicht, dass Sie mit Toolset und OceanWP erstellte Test-Websites kostenlos herunterladen können, um damit zu experimentieren.

Was Sie brauchen, um loszulegen

Wenn Sie mit Toolset eine benutzerdefinierte Immobilien-Website erstellen, benötigen Sie die folgenden Toolset-Plug-ins:

• Toolset-Typen – zum Einrichten benutzerdefinierter Beitragstypen, Felder und Taxonomien für die Eigenschaften und Agenten
• Toolset-Blöcke – zum Entwerfen des Frontends Ihrer Website (Vorlagen und Suchen nach Eigenschaften usw.)
• Toolset Maps – zum Hinzufügen von Funktionen, die das Suchen und Anzeigen von Immobilien auf Karten ermöglichen
• Toolset-Formulare – damit Agenten Immobilien über benutzerdefinierte Front-End-Formulare verwalten können
• Toolset-Zugriff – um zu steuern, auf welche Teile der Website Besucher, Kunden und Agenten zugreifen können

Sobald Sie diese Komponenten installiert und registriert haben, ist es an der Zeit, mit dem Aufbau Ihrer Immobilien-Website zu beginnen!

1. Erstellen Sie Ihren benutzerdefinierten Beitragstyp

Zuerst müssen wir einen benutzerdefinierten Beitragstyp für unseren Abschnitt „Häuser“ erstellen, damit die Benutzer genau wissen, wo sie hingehen müssen, um sie anzuzeigen.
1. Gehen Sie zu Toolset → Dashboard in Ihrem WordPress-Adminbereich und klicken Sie auf Neuen Beitragstyp hinzufügen.

2. Jetzt müssen wir unseren Beitragstyp benennen und an der Position speichern, an der er im Admin-Menü angezeigt werden soll.

3. Klicken Sie auf Beitragstyp speichern.

Und das ist es. Der benutzerdefinierte Beitragstyp Ihres Hauses ist fertig.

2. Erstellen Sie Ihre benutzerdefinierten Felder

Jetzt, da wir unseren benutzerdefinierten Beitragstyp haben, müssen wir einige benutzerdefinierte Felder hinzufügen. Unsere benutzerdefinierten Felder bilden eine Vorlage mit Abschnitten, die wir ausfüllen möchten, um jedes Haus und seine Merkmale zu beschreiben.

Beispielsweise benötigen wir Abschnitte für die Anzahl der Badezimmer, den Preis und das Baujahr der Immobilie.

1. Klicken Sie im Toolset-Dashboard neben dem von uns erstellten benutzerdefinierten Beitragstyp „Häuser“ auf Benutzerdefinierte Felder hinzufügen.

2. Ein Feld Neues Feld hinzufügen wird eingeblendet, in dem wir auswählen können, welche Art von benutzerdefinierten Feldern wir möchten. Beispielsweise ist ein benutzerdefiniertes Feld für „Baujahr“ eine Zahl.

3. Für jedes Feld müssen Sie Optionen festlegen, z. B. ob die Eingabe von Informationen obligatorisch ist.

4. Nachdem Sie alle bevorzugten Optionen für ein Feld ausgefüllt haben, klicken Sie auf Neues Feld hinzufügen , um zum nächsten Feld in der Gruppe zu wechseln. Wenn Sie alle Felder für eine Feldgruppe hinzugefügt haben, klicken Sie auf Feldgruppe speichern.

Jedes Mal , wenn Sie einen „Haus“-Beitrag bearbeiten, sehen Sie diese Felder zum Ausfüllen.

3. Erstellen Sie Ihre benutzerdefinierten Taxonomien

Benutzerdefinierte Taxonomien sind eine großartige Möglichkeit, Eigenschaften zu trennen, sodass Benutzer leicht diejenigen finden können, die ihren Kriterien entsprechen. Zum Beispiel, wenn sie nur Häuser sehen wollen, die zum Verkauf stehen und nicht zur Miete.

Anhand dieses Beispiels erfahren Sie hier, wie Sie Taxonomien erstellen, um zwischen Häusern, die zum Verkauf stehen, und Häusern zur Miete zu unterscheiden.

1. Klicken Sie im Toolset-Dashboard in der Zeile Häuser auf Benutzerdefinierte Taxonomie hinzufügen.
2. Geben Sie Folgendes in die Felder ein
   1. Name Plural: Eigenschaftstypen
   2. Name Singular: Eigenschaftsmerkmal
   3. Schnecke: Eigenschaftsmerkmal
3. Wählen Sie aus, ob die Taxonomie hierarchisch oder flach sein soll. Für diesen Zweck werden wir es flach halten.
4. Wählen Sie aus, mit welchem ​​Beitragstyp Sie die Taxonomie verknüpfen möchten – in diesem Fall ist es „Häuser“.
5. Klicken Sie auf Taxonomie speichern

Wenn wir jetzt einen Beitragstyp „Häuser“ bearbeiten oder erstellen, können wir Taxonomien des Typs „Immobilientyp“ erstellen und auswählen, um sie dem Beitragstyp zuzuordnen.

4. Erstellen Sie eine Vorlage zum Anzeigen der Eigenschaften

Wir haben jetzt die Kernkomponenten, die wir brauchen, um unsere Immobilien zu präsentieren, aber ein wichtiger Teil des Prozesses bleibt – wie zeigen wir sie im Frontend an?

Hier erstellen wir eine Vorlage, mit der wir jedes unserer Häuser anzeigen können.

Um unsere Vorlage für einzelne „Häuser“ zu erstellen, verwenden wir Toolset-Blöcke mit dem WordPress-Blockeditor.

Mit Toolset-Blöcken können Sie Vorlagen für Ihre benutzerdefinierten Beitragstypen mit benutzerdefinierten Feldern und Taxonomien entwerfen. Kein HTML, kein CSS, kein JavaScript und kein PHP erforderlich!

1. Gehen Sie zu Toolset → Dashboard und klicken Sie in der Zeile Häuser auf die Schaltfläche Inhaltsvorlage erstellen.
2. Verwenden Sie den WordPress-Blockeditor, um Ihre Vorlage zu entwerfen.
3. Wählen Sie Blöcke aus dem Abschnitt Toolset für jeden Teil der Vorlage aus, der Felder anzeigt (keine statischen Elemente). Verwenden Sie beispielsweise den Heading-Block von Toolset für jede Überschrift, die ein Feld anzeigt. Toolset fügt die Option hinzu, dynamische Inhalte auch aus dem WordPress-Kern und den beliebtesten Plugins von Drittanbietern anzuzeigen.
4. Aktivieren Sie dynamische Quellen für Blöcke, die Felder des Beitrags anzeigen sollen, die die Vorlage anzeigt.

Sie können Ihre Vorlage auf viele Arten ändern und gestalten. Sie können beispielsweise Inhalte in Spalten anordnen, Teile der Vorlage bedingt anzeigen, eine Liste verwandter Beiträge anzeigen und vieles mehr.

5. Erstellen Sie einen dynamischen Schieberegler, um Ihre Immobilienbilder zu zeigen

Ein Schieberegler ist eine großartige Möglichkeit, Ihre Eigenschaften zu präsentieren, indem Sie mehrere Bilder von jedem anzeigen.

Mit Toolset können Sie ganz einfach komplexe Schieberegler mit Übergängen ohne komplexe PHP-Codierung erstellen.

1. Nachdem Sie eine Seite, einen Beitrag oder eine Vorlage bearbeitet oder erstellt haben, fügen Sie den Ansichtsblock ein und erstellen Sie eine neue Ansicht .
2. Aktivieren Sie im Assistenten zum Erstellen von Ansichten die Paginierung, und wählen Sie im Abschnitt Ansichtsschleifenstil auswählen die Option Unformatiert ( letzte) aus.
3. Wählen Sie im letzten Schritt den Beitragstyp aus, für den Sie Beiträge anzeigen möchten.
4. Klicken Sie auf , um den Assistenten zu beenden, und Ihre Ansicht ist bereit.

Beitragsfelder anzeigen und benutzerdefiniertes Styling anwenden

1. Fügen Sie einen Container -Block ein, damit Sie Ihrem Slider einen Hintergrund hinzufügen können. Sie können beispielsweise den Hintergrund der Folie auf ein dynamisches Bild festlegen, das aus dem Beitragsbild des Beitrags stammt.
2. Verwenden Sie Toolset-Blöcke, um Ihrem Schieberegler andere dynamische Felder hinzuzufügen, z. B. den Titel des Beitrags.

Mit Toolset-Schiebereglern können Sie Ihren Schieberegler nicht nur anzeigen, Post-Felder anzeigen und benutzerdefinierte Stile anwenden, sondern Ihren Schieberegler auch mit einer Reihe anderer Optionen optimieren, z.

6. Erstellen Sie eine Post-Beziehung, um Ihre Häuser mit Ihren Agenten zu verbinden

Post-Beziehungen sind ein wichtiger, aber unterschätzter Teil jeder Website. Mit Post-Beziehungen können Sie verschiedene Arten von Inhalten miteinander verbinden.

Um mehr darüber zu erfahren, wie sie Ihnen helfen, lesen Sie unseren Leitfaden zum Erstellen von Post-Beziehungen mit Toolset und OceanWP.

Auf unserer Immobilien-Website haben wir Häuser und Immobilienmakler. Lassen Sie uns eine Post-Beziehung zwischen ihnen erstellen.

Erstellen Sie die Post-Beziehung

1. Gehen Sie zu Toolset → Beziehungen und klicken Sie oben auf Neu hinzufügen.
2. Der Assistent für Toolset-Beziehungen wird geöffnet. Für unsere Agenten und Immobilien möchten wir eine „Eins-zu-Viele-Beziehung“, da ein Agent für mehrere Immobilien verantwortlich ist.
3. Wählen Sie die Beitragstypen aus, die die Beziehung bilden.

4. Wählen Sie aus, ob Sie die Anzahl der Beiträge begrenzen möchten, die Sie zuweisen können. Sie möchten beispielsweise, dass jedem Agenten nur maximal 20 Häuser zugewiesen werden.

5. Benennen Sie Ihre Beziehung.

6. Überprüfen Sie Ihre Beziehungen und klicken Sie auf Fertig stellen.

So weisen Sie einem Agenten Eigenschaften zu

Jetzt können wir damit beginnen, spezifische Verbindungen zwischen unseren Immobilien und Immobilienmaklern herzustellen.

1. Navigieren Sie über das Admin-Menü zur Seite eines Agenten
2. Unten auf der Seite wird ein neuer Abschnitt mit dem Namen Agent Property angezeigt. Klicken Sie auf Vorhandene Eigenschaft verbinden und geben Sie dann ein, um den Namen einer Eigenschaft zu finden, oder wählen Sie ihn aus der verfügbaren Liste aus.

3. Klicken Sie auf Aktualisieren , um Ihren Beitrag zu speichern. Wenn Sie jetzt die Seite des Agenten besuchen, werden alle Eigenschaften aufgelistet, die Sie mit ihm verbunden haben. Wenn Sie eine dieser Eigenschaftenseiten bearbeiten, werden Sie außerdem sehen, dass die Beziehung an beiden Enden angezeigt wurde – der Agent wird auch auf der Eigenschaftsseite aufgeführt.

Erstellen einer Ansicht zum Anzeigen Ihrer Beitragsbeziehung

Es gibt zwei Möglichkeiten, Ihre Liste mit Post-Beziehungen anzuzeigen:

• Zeigen Sie eine Liste der „vielen“ verwandten Posts in Eins-zu-Viele- und Viele-zu-Viele-Beziehungen an.
• Zeigen Sie in 1:n-Beziehungen Felder an, die zur „Eins“-Seite gehören.

Anzeige vieler verwandter Artikel

In unserem Beispiel haben Agenten viele Eigenschaften, daher verwenden wir eine Ansicht, um sie anzuzeigen.

1. Navigieren Sie zu Ihrer Inhaltsvorlage „Agenten“.
2. Fügen Sie einen Ansichtsblock ein und erstellen Sie eine neue Ansicht
3. Wählen Sie diese Option aus, um den benötigten Beitragstyp (dh Eigenschaften) anzuzeigen, und wählen Sie dann die Option zum Anzeigen von Eigenschaften aus, die zum aktuellen Agenten gehören .
4. Verwenden Sie Blöcke, um die Ausgabe für Ihre Ansicht zu entwerfen. Da die Ansicht bereits so eingestellt ist, dass verwandte Beiträge angezeigt werden, müssen Sie die Beziehung in Blöcken, die Sie zum Anzeigen dynamischer Inhalte verwenden, nicht auswählen.

Anzeigen eines verwandten Elements (übergeordnet)

1. Navigieren Sie zu Ihrer Inhaltsvorlage „Eigenschaften“.
2. Sie können jeden Toolset-Block verwenden, um übergeordnete Informationen anzuzeigen.
3. Wählen Sie in den Blockeigenschaften das übergeordnete Element aus Post Source aus.
4. Wählen Sie das Feld aus, das Sie anzeigen möchten.

7. So fügen Sie eine erweiterte Suche hinzu, damit Benutzer ihre am besten passenden Eigenschaften leicht finden können

Eine erweiterte benutzerdefinierte Suche ist der beste Weg für Ihre Benutzer, genau das zu finden, wonach sie suchen. Mit mehreren Filtern können sie das beste Haus basierend auf ihren persönlichen Anforderungen auswählen.

1. Beginnen Sie mit dem Einfügen eines View-Blocks in eine Seite.
2. Aktivieren Sie im Assistenten zum Erstellen von Ansichten die Option Suchen.

3. Wählen Sie auf der nächsten Seite „Eigenschaften“ unter Inhalt auswählen, der in dieser Ansicht angezeigt werden soll .

4. Nachdem Sie den Assistenten zum Erstellen von Ansichten beendet haben, gibt es im Bearbeitungsbereich der Ansicht einen Abschnitt Suche . Verwenden Sie die verfügbaren Schaltflächen, um ein benutzerdefiniertes Suchfeld hinzuzufügen, Schaltflächen zum Senden und Zurücksetzen einzufügen oder andere Blöcke hinzuzufügen.

Sie können beispielsweise auf „Suchfeld hinzufügen “ klicken und die Dropdown-Liste „ Feld auswählen“ verwenden. Wählen Sie aus, nach welchem ​​Inhaltstyp Benutzer suchen können sollen, und klicken Sie auf Weiter .

5. Sie können jetzt die rechte Seitenleiste verwenden, um die Optionen für dieses Suchfeld zu optimieren. Dazu gehören die Hauptfeldeinstellungen, Beschriftungs- und Stiloptionen.

6. Jetzt können wir den Abschnitt erstellen, in dem die Ergebnisse angezeigt werden. Dazu fügen wir Blöcke im View Loop- Bereich des Editors hinzu.

7. Klicken Sie auf Block hinzufügen .

8. Wählen Sie einen Block aus, den Sie als Teil Ihrer Suchergebnisse verwenden möchten. Beispielsweise könnten Sie den Heading -Block verwenden, um Eigenschaftstitel in den Suchergebnissen anzuzeigen.

8. Zeigen Sie Karten an, um die Standorte von Immobilien anzuzeigen

Karten sind eine großartige Möglichkeit, Benutzern dabei zu helfen, den genauen Standort einer Immobilie sofort zu verstehen.

1. Um mit dem Erstellen einer Karte zu beginnen, navigieren Sie zu der Seite oder Vorlage, auf der Sie die Karte anzeigen möchten. Fügen Sie den Block Toolset Map ein. Wenn Sie einen API-Schlüssel festlegen müssen, bietet Google detaillierte Anweisungen dazu.
2. Aktivieren Sie im Bereich Source for the marker die Option Dynamic Source .
3. Wählen Sie im Dropdown-Menü „ Post Source “ die Option „Current Property“ aus. Wählen Sie dann in der Dropdown-Liste Quelle ein beliebiges benutzerdefiniertes Feld aus, das eine Adresse enthält, um sie auf der Karte anzuzeigen

9. Erstellen Sie ein Front-End-Formular, mit dem Benutzer ihre eigenen Inhalte übermitteln können

Schließlich möchten Sie vielleicht, dass Benutzer ihre eigenen Einträge bereitstellen, um auf Ihrer Immobilien-Website zu werben. Eine der einfachsten Möglichkeiten, dies zu tun, ist ein Formular im Frontend, das alle Felder enthält, die Sie ausfüllen möchten.

Das Erstellen des Formulars könnte dank des Drag-and-Drop-Editors von Toolset nicht einfacher sein.

1. Gehen Sie zu Toolset → Post Forms und klicken Sie auf Neu hinzufügen.
2. Klicken Sie im Formularassistenten auf Weiter und geben Sie den Namen für Ihr Formular ein.
3. Bearbeiten Sie die Einstellungen für Ihr Formular, einschließlich:
   1. Der Beitragstyp, zu dem Beiträge hinzugefügt werden
   2. Der Status des Beitrags nach dem Absenden
   3. Was Benutzer sehen, nachdem sie das Formular gesendet haben (Sie können auch eine Nachricht hinzufügen, wie ich es unten getan habe)

4. Nun gelangen Sie in den Drag-and-Drop-Editor, wo Sie entscheiden können, welche Felder wohin gehören. Hier können Sie auch die Felder CSS-Editor und JS-Editor verwenden, um Ihr Formular zu gestalten. Es gibt auch eine Reihe von zusätzlichen Elementen, die Sie hinzufügen können.

5. Auf der nächsten Seite können Sie beliebige E-Mail-Benachrichtigungen hinzufügen, die Benutzer oder Bearbeiter jederzeit erhalten sollen. Unten habe ich eine E-Mail hinzugefügt, die an Benutzer gesendet wird, wenn ihr Eintrag live geht.

6. Klicken Sie auf Fertig stellen und Ihr Formular kann nun angezeigt werden.

7. Alles, was Sie tun müssen, um das Formular anzuzeigen, ist, zu der Seite zu gehen, zu der das Formular hinzugefügt werden soll, den Toolset-Formularblock hinzuzufügen und das soeben erstellte Formular für die Dropdown-Liste auszuwählen.

Nächste Schritte

Sobald Sie diese neun wichtigen Schritte zum Erstellen Ihrer eigenen Immobilien-Website durchgearbeitet haben, können Sie Ihre Website noch eindrucksvoller gestalten, indem Sie den Immobilien-Online-Kurs von Toolset absolvieren.

Die leicht verständlichen Module bilden eine umfassende Schritt-für-Schritt-Anleitung – voller praktischer Videos – die Ihnen alles erzählt, was Sie wissen müssen, um eine bemerkenswerte Immobilien-Website zu erstellen.

Welche Erfahrungen haben Sie mit der Erstellung einer Immobilien-Website gemacht? Lass es uns in den Kommentaren wissen!