Jak zbudować stronę internetową konferencji WordPress w mniej niż 30 minut - FooEvents

Jak zbudować stronę internetową konferencji WordPress w mniej niż 30 minut?

Tworzenie stron internetowych nigdy nie było łatwiejsze. WordPress jest wspierany przez tysiące potężnych narzędzi, które są łatwe w użyciu i umożliwiają tworzenie profesjonalnych stron internetowych w rekordowym czasie. Aby to zilustrować, rzuciłem sobie wyzwanie zbudowania zaawansowanej strony internetowej konferencji WordPress w mniej niż 30 minut. Streszczenie

Streszczenie

  • Stworzenie markowej strony internetowej WordPress dla 3-dniowej konferencji, zawierającej stronę główną, stronę z informacjami, stronę z harmonogramem, formularz kontaktowy i listę blogów.
  • Wdrożenie funkcjonalności e-commerce, która będzie wykorzystywana do sprzedaży biletów i towarów.
  • Podczas zakupu biletu uczestnik będzie musiał wybrać rodzaj biletu (delegat, sponsor lub student) i podać swoje imię i nazwisko, adres e-mail, rozmiar koszulki, uchwyt na Twitterze i adres URL strony internetowej
  • Po dokonaniu zakupu bilety muszą zostać wysłane na adres e-mail kupującego w formacie HTML, a kupujący musi mieć również możliwość pobrania biletu w formacie PDF.
  • Bilety będą również sprzedawane osobiście w dniu wydarzenia, a system będzie musiał zapewnić sposób zarządzania odprawami/rejestracjami uczestników w każdym dniu wydarzenia

30-minutowe wyzwanie

Biorąc pod uwagę ograniczone ramy czasowe, przed rozpoczęciem budowy przygotowałem logo, zakupiłem obrazy stockowe i stworzyłem całą zawartość strony potrzebną do jej stworzenia (z niewielką pomocą ChatGPT).

Ekran wyboru szablonu witryny Instawp.

Następnie udałem się do InstaWP który jest doskonałym narzędziem do tworzenia witryn typu sandbox używanych do programowania lub testowania. Korzystanie z InstaWP znacznie skraca czas potrzebny na skonfigurowanie witryny WordPress. Gdy witryna jest gotowa do uruchomienia, InstaWP oferuje narzędzia do migracji, które ułatwiają przeniesienie witryny do dostawcy usług hostingowych.

Podczas tworzenia witryny w InstaWP wybrałem opcję szablonu WooCommerce, która uruchomiła witrynę WordPress z już zainstalowanym WooCommerce. Następnie zakończyliśmy konfigurację WooCommerce, ustawiliśmy walutę na USD i skonfigurowaliśmy PayPal, abyśmy mogli akceptować płatności.

Następnie zainstalowałem darmową aplikację Elementor kreator stron i darmowy Motyw Astra. Są to narzędzia, z którymi mam już doświadczenie, jednak możesz użyć dowolnego motywu lub kreatora stron, z którym czujesz się komfortowo. Następnie udałem się do sekcji mediów i przesłałem wszystkie nasze zdjęcia i grafiki, które wcześniej pozyskałem.

Następnie utworzyłem puste strony główne, informacje, harmonogram, kontakt i blog, a następnie przeszedłem do ustawień czytania WordPress, aby ustawić strony główne i blog. Utworzyłem menu zawierające wszystkie te strony i ustawiłem je jako menu główne.

Strona główna zbudowana przy użyciu kreatora stron Elementor

Następnie wróciłem do strony głównej i zacząłem dodawać jej zawartość oraz budować efektywny układ. W tym wyzwaniu postanowiłem zbudować wszystkie strony od podstaw i nie używać żadnych szablonów.

Następnie przeszedłem do strony z informacjami i dodałem tytuł, obraz i treść. Następnie dodałem treść do strony kontaktowej i dodałem widżet krótkiego kodu Elementor, który będzie używany do umieszczenia formularza kontaktowego na stronie. zapisałem zmiany i udałem się do sekcji wtyczek i zainstalowałem wtyczkę Formularz kontaktowy 7 plugin. Podczas instalacji Contact Form 7 automatycznie generuje domyślny formularz kontaktowy i udostępnia krótki kod, którego można użyć do dodania formularza kontaktowego do strony. Skopiowałem shortcode i dodałem go do mojej strony kontaktowej za pomocą widżetu shortcode.

Następnie utworzyłem stronę harmonogramu, używając tego samego układu, co na stronie z informacjami i opublikowałem ogłoszenie na blogu.

Zrzut ekranu przedstawiający ustawienia Customizera Wordpress.

Korzystając z ustawień personalizatora, ustawiłem logo i ikonę nagłówka witryny.

Następnie zainstalowałem Wtyczki FooEvents który zostanie użyty do dodania funkcji wydarzeń i biletów do witryny. W większości przypadków korzystałem ze standardowych ustawień FooEvents, jednak przeszedłem do ustawień FooEvents i ustawiłem bilety tak, aby używały kodu QR zamiast kodu kreskowego. To głównie osobiste preferencje, ponieważ kody QR wyglądają świetnie i są łatwiejsze do zeskanowania.

Następnie utworzyłem produkt dla biletów i wypełniłem wszystkie standardowe pola, takie jak tytuł, obraz funkcji i opis. 

Zrzut ekranu 2023 03 17 O 10.22.52 E1679042946105

Korzystanie z funkcji zapewnianych przez FooEvents Wtyczka wielodniowaUstawiłem produkt jako wydarzenie 3-dniowe. 

Zrzut ekranu 2023 03 17 o 10.23.36

Skonfigurowałem wiadomość e-mail z biletem HTML i przy użyciu Wtyczka FooEvents Custom Attendee FieldsStworzyłem niestandardowe pola uczestników, które będą przechwytywane przy kasie.

Następnie stworzyłem standardowy produkt WooCommerce dla koszulki, która będzie sprzedawana online i podczas wydarzenia w celu zebrania funduszy.

Mając niewiele czasu, zainstalowałem darmową aplikację WP SMTP Mail aby usprawnić dostarczanie naszych wiadomości e-mail z biletami. WP SMTP Mail umożliwia wysyłanie wiadomości e-mail z witryny, takich jak wiadomości e-mail z biletami WooCommerce i FooEvents, przy użyciu uwierzytelnionego konta e-mail, a nie bezpośrednio z serwera. 

Gdy pozostało kilka minut, wróciłem na stronę główną i wprowadziłem kilka ostatnich poprawek przed upływem 30-minutowego terminu!

Zrzut ekranu strony internetowej Fooconf

Efektem końcowym jest w pełni funkcjonalna strona internetowa konferencji. Chociaż projekt jest prosty i prawdopodobnie przydałoby mu się kilka godzin projektowania, przekazuje istotne informacje w profesjonalny sposób.

Obszary funkcjonalne, takie jak blog i formularz kontaktowy, działają doskonale, a nasza witryna jest gotowa do rozpoczęcia przetwarzania zamówień eCommerce.

Zrzut ekranu biletu na Fooconf

Uczestnicy mogą zakupić towary i zabezpieczyć swoje miejsce, kupując bilet na konferencję. 

Wszystko, co będą musieli zrobić, to wybrać swoje produkty, przejść do koszyka, a następnie przejść do kasy. 

Tutaj mogą uzupełnić swoje dane rozliczeniowe i podać informacje o uczestniku, które zostaną wykorzystane podczas generowania biletu. 

Następnie mogą wyświetlić swój bilet na ekranie szczegółów zamówienia, a dzięki wtyczce FooEvents PDF Tickets mogą pobrać kopię biletu w formacie PDF. 

Zrzut ekranu biletu wygenerowanego przez Fooevents na ekranie widoku zamówień.

Uczestnik otrzyma również wiadomość e-mail zawierającą kopię biletu w formacie PDF.

E-mail z biletami na Fooevents

Organizatorzy wydarzeń mogą zarządzać zarówno zamówieniami, jak i biletami w panelu administracyjnym WordPress.

Zrzut ekranu z 2023 03 17 o 10.34.59

Korzystanie z Wtyczka FooEvents POSBilety mogą być również sprzedawane osobiście w dniu wydarzenia.

Zrzut ekranu z ekranu kasy Fooevents Pos

Organizatorzy wydarzeń mogą drukowanie biletów podczas wydarzenia bezpośrednio z FooEvents POS przy użyciu większości paragonów termicznych i standardowych drukarek biurkowych.

Zrzut ekranu okna dialogowego wydruku biletu wygenerowanego przez Fooevents Pos

Przetwarzanie płatności bezpośrednio w systemie FooEvents POS przy użyciu niektórych czytników kart Stripe i Square. Możesz również ręcznie wprowadzić dane karty klienta, co jest idealne do przyjmowania zamówień przez telefon lub jeśli sprzęt nie jest dostępny w Twoim kraju.

I wreszcie, co nie mniej ważne, korzystając z bezpłatnego Aplikacje FooEvents Check-insOrganizatorzy wydarzeń mogą również płynnie zarządzać rejestracjami w dniu wydarzenia. Mogą łatwo znaleźć informacje o biletach, wyszukując uczestników według nazwiska lub identyfikatora biletu, lub mogą zeskanować bilet za pomocą wbudowanego skanera kodów QR.

Aplikacje Fooevents Check-Ins

Wnioski

To było zabawne wyzwanie i świetny dowód na to, co można osiągnąć za pomocą WordPress i narzędzi, które go obsługują. Biorąc pod uwagę więcej czasu, z pewnością jest jeszcze kilka rzeczy, nad którymi bym popracował (SEO, design, dostępność, wydajność itp.), ale biorąc pod uwagę 30-minutowe ramy czasowe, jestem całkiem zadowolony z tego, co zostało osiągnięte.

Jeśli chcesz zobaczyć więcej szczegółów, tutaj znajdziesz wideo z pełnym, nieedytowanym 30-minutowym procesem budowy:

Oto wszystkie usługi i wtyczki, których użyłem do stworzenia tego projektu.

Jeśli masz jakiekolwiek pytania związane z FooEvents, przejdź do naszego centrum pomocy i Skontaktuj się

Zapisz się do naszego newslettera

Bądź pierwszym, który otrzyma aktualizacje produktów i oferty specjalne

    Koszyk