Jak zbudować witrynę nieruchomości za pomocą Toolset Real Estate i OceanWP

Strona internetowa z nieruchomościami musi być tak stabilna i niezawodna jak domy, które sprzedajesz.

Jednak zbudowanie solidnej witryny internetowej poświęconej nieruchomościom, z której użytkownicy będą czerpać przyjemność, może być czasami tak samo trudne, jak budowa domów, które sprzedajesz – jeśli użyjesz niewłaściwego zestawu narzędzi.

Na szczęście udowodniono, że połączenie Toolset Real Estate z OceanWP daje profesjonalną witrynę z nieruchomościami ze wszystkimi funkcjami, których możesz potrzebować.

W tym przewodniku pokażemy, jak zbudować następujące funkcje:

• Niestandardowe typy postów dla różnych nieruchomości i agentów
• Niestandardowe pola do dodania informacji, takich jak liczba łazienek
• Taksonomie do oddzielenia nieruchomości na podstawie cech (domy wolnostojące, bungalowy itp.)
• Szablony do wyświetlania Twoich właściwości o tej samej strukturze
• Suwak do wyświetlania zdjęć Twoich nieruchomości
• Post-relacje mające na celu powiązanie agentów nieruchomości z nieruchomościami, którymi zarządzają
• Wyszukiwarka, dzięki której użytkownicy mogą łatwo znaleźć najlepszą dla siebie nieruchomość
• Mapy pokazujące lokalizacje nieruchomości i wyniki wyszukiwania
• Formularz front-endowy, dzięki któremu użytkownicy mogą przesyłać własne wykazy nieruchomości

Jeśli chcesz wykonać te kroki podczas ich czytania, możesz skorzystać z własnej bezpłatnej testowej strony internetowej poświęconej nieruchomościom stworzonej przez Toolset i OceanWP.

Dlaczego używamy Toolset Real Estate i OceanWP

Toolset Real Estate jest częścią zestawu narzędzi, który zapewnia wszystkie funkcje potrzebne do tworzenia wielu typów profesjonalnych witryn internetowych.

W szczególności dzięki narzędziom Toolset Real Estate nie potrzebujesz żadnej innej wtyczki, aby dodać funkcje, których potrzebuje strona z nieruchomościami. Oznacza to, że nie musisz się martwić o kompatybilność wtyczek lub o to, czy sama liczba wtyczek spowolni Twoją witrynę.

Tymczasem OceanWP nie bez powodu jest jednym z najpopularniejszych motywów dla witryn biznesowych. Strony internetowe prowadzone przez OceanWP mają lepszy współczynnik konwersji, szybsze ładowanie i ulepszone SEO – dzięki czemu nabywcy domów mogą łatwo znaleźć Twoją witrynę.

Toolset Real Estate i OceanWP współpracują ze sobą płynnie, co oznacza, że ​​możesz tworzyć solidne strony internetowe, które wyglądają świetnie bez żadnych obaw.

Nie zapomnij, że możesz bezpłatnie pobrać testowe strony internetowe zbudowane przy użyciu zestawu narzędzi i OceanWP, aby eksperymentować.

Czego potrzebujesz, aby zacząć

Kiedy tworzysz niestandardową witrynę nieruchomości za pomocą zestawu narzędzi, będziesz potrzebować następujących wtyczek zestawu narzędzi:

• Typy zestawu narzędzi – do konfigurowania niestandardowych typów postów, pól i taksonomii, dla właściwości i agentów
• Bloki zestawu narzędzi – do projektowania interfejsu witryny (szablony i wyszukiwanie właściwości itp.)
• Mapy zestawu narzędzi – do dodawania funkcji umożliwiających wyszukiwanie i wyświetlanie właściwości na mapach
• Formularze zestawu narzędzi – umożliwiające agentom zarządzanie właściwościami za pomocą niestandardowych formularzy front-end
• Dostęp do zestawu narzędzi – do kontrolowania, do jakich części witryny mogą uzyskać dostęp odwiedzający, klienci i agenci

Po zainstalowaniu i zarejestrowaniu tych komponentów nadszedł czas, aby rozpocząć tworzenie witryny internetowej z nieruchomościami!

1. Stwórz swój niestandardowy typ postu

Najpierw musimy stworzyć niestandardowy typ postu dla naszej sekcji „Domy”, aby użytkownicy dokładnie wiedzieli, gdzie mogą się udać, aby je wyświetlić.
1. Przejdź do Zestawu narzędzi → Pulpit nawigacyjny w panelu administracyjnym WordPress i kliknij Dodaj nowy typ wpisu.

2. Teraz musimy nazwać nasz typ posta i zapisać go w pozycji, w której chcemy, aby był wyświetlany w menu administratora.

3. Kliknij Zapisz typ publikacji.

I to wszystko. Twój niestandardowy typ postu jest gotowy.

2. Utwórz własne pola

Teraz, gdy mamy nasz niestandardowy typ posta, musimy dodać kilka niestandardowych pól. Nasze niestandardowe pola tworzą szablon sekcji, które będziemy chcieli wypełnić, aby opisać każdy dom i jego cechy.

Na przykład będziemy potrzebować sekcji dotyczących liczby łazienek, ceny i roku wybudowania nieruchomości.

1. Na pulpicie nawigacyjnym zestawu narzędzi kliknij Dodaj pola niestandardowe obok utworzonego przez nas niestandardowego typu postu „Domy”.

2. Pojawi się okno Dodaj nowe pole, w którym możemy wybrać rodzaj pól niestandardowych, które chcemy. Na przykład niestandardowe pole „Rok budowy” będzie liczbą.

3. Dla każdego pola musisz ustawić opcje, np. czy obowiązkowe jest wprowadzanie informacji.

4. Po wypełnieniu wszystkich preferowanych opcji pola, kliknij Dodaj nowe pole , aby przejść do następnego w grupie. Po dodaniu wszystkich pól do grupy pól kliknij Zapisz grupę pól.

Teraz za każdym razem, gdy edytujesz post „Dom”, zobaczysz te pola do wypełnienia.

3. Stwórz własne taksonomie

Taksonomie niestandardowe to świetny sposób na oddzielenie właściwości, dzięki czemu użytkownicy mogą łatwo znaleźć te, które spełniają ich kryteria. Na przykład, jeśli chcą tylko zobaczyć domy, które są na sprzedaż, a nie do wynajęcia.

Biorąc ten przykład, oto jak tworzyć taksonomie, aby odróżnić domy przeznaczone na sprzedaż i domy do wynajęcia.

1. Na pulpicie nawigacyjnym zestawu narzędzi kliknij Dodaj niestandardową taksonomię w wierszu Domy .
2. Wpisz następujące pola w polach
   1. Imię i nazwisko w liczbie mnogiej: Rodzaje własności
   2. Nazwa w liczbie pojedynczej: Cecha nieruchomości
   3. Ślimak: Cecha nieruchomości
3. Wybierz, czy chcesz, aby taksonomia była hierarchiczna czy płaska. Na potrzeby tego utrzymamy go na płasko.
4. Wybierz typ posta, z którym chcesz powiązać taksonomię – w tym przypadku będzie to „Domy”.
5. Kliknij Zapisz taksonomię

Teraz, kiedy edytujemy lub tworzymy typ postu „Domy”, możemy utworzyć i wybrać taksonomie „Typ nieruchomości”, aby przypisać je do typu postu.

4. Utwórz szablon, aby wyświetlić właściwości

Mamy teraz podstawowe komponenty, których potrzebujemy, aby pokazać nasze właściwości, ale ważna część procesu pozostaje – jak wyświetlić je na interfejsie użytkownika?

W tym miejscu tworzymy szablon, za pomocą którego możemy wyświetlić każdy z naszych domów.

Aby zbudować nasz szablon dla pojedynczych „domów”, użyjemy bloków zestawu narzędzi z edytorem bloków WordPress.

Dzięki blokom zestawu narzędzi możesz projektować szablony dla niestandardowych typów postów z niestandardowymi polami i taksonomiami. Bez HTML, bez CSS, bez JavaScript i bez PHP!

1. Przejdź do Zestaw narzędzi → Pulpit i kliknij przycisk Utwórz szablon treści w rzędzie Domy.
2. Użyj edytora bloków WordPress, aby zaprojektować swój szablon.
3. Wybierz bloki z sekcji Zestaw narzędzi dla dowolnej części szablonu, która wyświetla pola (nie elementy statyczne). Na przykład użyj bloku Nagłówek zestawu narzędzi dla dowolnego nagłówka, w którym będzie wyświetlane pole. Zestaw narzędzi dodaje opcję wyświetlania treści dynamicznych również z rdzenia WordPress i najpopularniejszych wtyczek innych firm.
4. Włącz źródła dynamiczne dla bloków, które powinny wyświetlać pola posta wyświetlanego w szablonie.

Możesz modyfikować i stylizować swój szablon na wiele sposobów. Na przykład możesz rozmieścić zawartość w kolumnach, wyświetlić części szablonu warunkowo, wyświetlić listę powiązanych postów i wiele więcej.

5. Utwórz dynamiczny suwak, aby zaprezentować zdjęcia swojej nieruchomości

Suwak to świetny sposób na zaprezentowanie swoich właściwości, wyświetlając wiele obrazów każdego z nich.

Korzystając z zestawu narzędzi, możesz łatwo tworzyć złożone suwaki z przejściami bez skomplikowanego kodowania PHP.

1. Po edycji lub utworzeniu strony, wpisu lub szablonu wstaw blok Widok i utwórz nowy Widok.
2. W kreatorze tworzenia widoku włącz podział na strony iw sekcji Wybierz styl pętli widoku wybierz opcję Niesformatowany (ostatni).
3. W ostatnim kroku wybierz typ posta, dla którego chcesz wyświetlić posty.
4. Kliknij, aby zakończyć kreatora, a Twój widok jest gotowy.

Wyświetlanie pól postów i stosowanie niestandardowego stylu

1. Wstaw blok kontenera , aby móc dodać tło do suwaka. Na przykład możesz ustawić tło slajdu tak, aby było dynamicznym obrazem pochodzącym z polecanego obrazu posta.
2. Użyj bloków zestawu narzędzi, aby dodać inne dynamiczne pola do suwaka, takie jak tytuł posta.

Dzięki suwakom zestawu narzędzi, oprócz wyświetlania pól postów i stosowania niestandardowego stylu, możesz dostosować swój suwak za pomocą szeregu innych opcji, takich jak automatyczne tworzenie slajdu widoku i zmiana stylu paginacji.

6. Stwórz post-relację, aby połączyć swoje domy z agentami

Relacje pocztowe są ważną, ale niedocenianą częścią każdej strony internetowej. Dzięki relacjom postów możesz łączyć ze sobą różne rodzaje treści.

Aby dowiedzieć się więcej o tym, jak pomagają, zapoznaj się z naszym przewodnikiem po tworzeniu relacji postów za pomocą zestawu narzędzi i OceanWP.

Na naszej stronie internetowej nieruchomości mamy domy i pośredników w obrocie nieruchomościami. Stwórzmy między nimi relację postu.

Utwórz relację post

1. Przejdź do Zestaw narzędzi → Relacje i kliknij Dodaj nowy u góry.
2. Zostanie otwarty kreator relacji zestawu narzędzi. W przypadku naszych agentów i nieruchomości chcemy „relacji jeden-do-wielu”, ponieważ jeden agent będzie odpowiedzialny za wiele nieruchomości.
3. Wybierz typy postów, które będą tworzyć relację.

4. Wybierz, czy chcesz ograniczyć liczbę postów, które możesz przypisać. Na przykład możesz chcieć, aby każdy agent miał przypisanych maksymalnie 20 domów.

5. Nazwij swój związek.

6. Przejrzyj swoje relacje i kliknij Zakończ.

Jak przypisać właściwości do agenta

Teraz możemy zacząć tworzyć konkretne powiązania między naszymi nieruchomościami a agentami nieruchomości.

1. Przejdź do strony agenta z menu administratora
2. Na dole strony pojawi się nowa sekcja o nazwie Agent Property. Kliknij Połącz istniejącą właściwość , a następnie wpisz, aby znaleźć nazwę właściwości lub wybierz ją z dostępnej listy.

3. Kliknij Aktualizuj , aby zapisać swój wpis. Teraz, gdy odwiedzasz stronę agenta, wszystkie właściwości, które z nim połączyłeś, zostaną wyświetlone. Ponadto, jeśli edytujesz jedną ze stron tych właściwości, zobaczysz, że relacja została wyświetlona na obu końcach – agent będzie również wymieniony na stronie nieruchomości.

Tworzenie widoku w celu wyświetlenia relacji post

Istnieją dwa sposoby wyświetlania listy relacji postów:

• Wyświetl listę „wielu” powiązanych postów w relacjach jeden-do-wielu i wiele-do-wielu.
• W relacjach jeden-do-wielu wyświetlaj pola należące do strony „jeden”.

Wyświetlanie wielu powiązanych elementów

W naszym przykładzie agenci mają wiele właściwości, więc do ich wyświetlenia użyjemy widoku.

1. Przejdź do szablonu treści „Agenci”
2. Wstaw blok widoku i utwórz nowy widok
3. Wybierz, aby wyświetlić żądany typ wiadomości (tj. właściwości), a następnie wybierz opcję wyświetlania właściwości należących do bieżącego agenta .
4. Użyj bloków, aby zaprojektować dane wyjściowe dla swojego widoku. Ponieważ widok jest już ustawiony na wyświetlanie powiązanych postów, nie musisz wybierać relacji w blokach używanych do wyświetlania zawartości dynamicznej.

Wyświetlanie jednego powiązanego elementu (nadrzędnego)

1. Przejdź do szablonu treści „Właściwości”.
2. Możesz użyć dowolnego bloku zestawu narzędzi, aby wyświetlić informacje o rodzicach.
3. We właściwościach bloku wybierz rodzica ze źródła postu.
4. Wybierz pole, które chcesz wyświetlić.

7. Jak dodać zaawansowane wyszukiwanie, aby użytkownicy mogli łatwo znaleźć ich najlepiej dopasowane właściwości?

Zaawansowane wyszukiwanie niestandardowe to najlepszy sposób, aby użytkownicy mogli znaleźć dokładnie to, czego szukają. Dzięki wielu filtrom będą mogli wybrać najlepszy dom w oparciu o ich osobiste wymagania.

1. Zacznij od wstawienia bloku widoku na stronę.
2. W kreatorze tworzenia widoku włącz opcję Wyszukaj.

3. Na następnej stronie wybierz „Właściwości” w obszarze Wybierz zawartość, którą wyświetli ten widok .

4. Po zakończeniu pracy kreatora tworzenia widoków w obszarze edycji widoku znajduje się sekcja Wyszukiwanie widoków. Użyj dostępnych przycisków, aby dodać niestandardowe pole wyszukiwania, wstawić przyciski przesyłania i resetowania lub dodać inne bloki.

Na przykład możesz kliknąć Dodaj pole wyszukiwania i użyć menu rozwijanego Wybierz pole . Wybierz typ zawartości, według którego użytkownicy będą mogli wyszukiwać, i kliknij Dalej .

5. Możesz teraz użyć prawego paska bocznego, aby dostosować opcje tego pola wyszukiwania. Obejmuje to główne ustawienia pola, opcje etykiety i stylu.

6. Teraz jesteśmy gotowi do stworzenia sekcji, w której będą wyświetlane wyniki. Robimy to dodając bloki w obszarze View Loop edytora.

7. Kliknij Dodaj blok .

8. Wybierz blok, który chcesz wykorzystać jako część wyników wyszukiwania. Na przykład możesz użyć bloku Nagłówek , aby wyświetlić tytuły właściwości w wynikach wyszukiwania.

8. Wyświetl mapy, aby pokazać lokalizacje nieruchomości

Mapy to świetny sposób, aby pomóc użytkownikom natychmiast zrozumieć dokładną lokalizację nieruchomości.

1. Aby rozpocząć tworzenie mapy, przejdź do strony lub szablonu, na którym chcesz wyświetlić mapę. Wstaw blok Mapa zestawu narzędzi. Jeśli musisz ustawić klucz API, Google udostępnia szczegółowe instrukcje, jak to zrobić.
2. W sekcji Źródło dla znacznika włącz opcję Źródło dynamiczne .
3. Z listy rozwijanej Źródło posta wybierz „Właściwość bieżąca”. Następnie w menu rozwijanym Źródło wybierz dowolne pole niestandardowe zawierające adres, aby wyświetlić je na mapie

9. Zbuduj formularz front-endowy, w którym użytkownicy będą mogli przesyłać własne treści

Na koniec możesz chcieć, aby użytkownicy udostępniali własne oferty w celu reklamowania się w Twojej witrynie z nieruchomościami. Jednym z najłatwiejszych sposobów, aby to zrobić, jest użycie formularza w interfejsie użytkownika, który zawiera wszystkie pola, które chcesz wypełnić.

Tworzenie formularza nie może być prostsze dzięki edytorowi przeciągania i upuszczania w Toolset.

1. Przejdź do Zestaw narzędzi → Formularze publikowania i kliknij Dodaj nowy.
2. Kliknij przycisk Kontynuuj w kreatorze formularzy i wprowadź nazwę formularza.
3. Edytuj ustawienia formularza, w tym:
   1. Typ posta, do którego będą dodawać zgłoszenia
   2. Stan posta po przesłaniu
   3. Co widzą użytkownicy po przesłaniu formularza (możesz również dodać wiadomość, tak jak ja to zrobiłem poniżej)

4. Teraz dochodzisz do edytora „przeciągnij i upuść”, w którym możesz zdecydować, które pola mają się znajdować i gdzie. Tutaj możesz również użyć pól Edytor CSS i Edytor JS , aby nadać styl swojemu formularzowi. Istnieje również szereg dodatkowych elementów, które możesz dodać.

5. Na następnej stronie możesz dodać dowolne powiadomienia e-mail, które chcesz, aby użytkownicy lub redaktorzy otrzymywali na dowolnym etapie. Poniżej dodałem wiadomość e-mail do wysłania użytkownikom, gdy ich oferta zostanie opublikowana.

6. Kliknij Zakończ , a formularz jest gotowy do wyświetlenia.

7. Wszystko, co musisz zrobić, aby wyświetlić formularz, to przejść do strony, do której chcesz dodać formularz, dodać blok Toolset Form i wybrać formularz, który właśnie utworzyłeś z listy rozwijanej.

Następne kroki

Po przejściu tych dziewięciu kluczowych etapów tworzenia własnej witryny internetowej poświęconej nieruchomościom możesz uczynić swoją witrynę jeszcze bardziej imponującą, biorąc udział w internetowym kursie dotyczącym nieruchomości w Toolset.

Łatwe do zrozumienia moduły składają się na obszerny przewodnik krok po kroku – pełen przydatnych filmów – który zawiera wszystko, co musisz wiedzieć, aby zbudować niezwykłą witrynę internetową dotyczącą nieruchomości.

Jakie masz doświadczenie w budowaniu strony internetowej poświęconej nieruchomościom? Daj nam znać w komentarzach!