1. W tym filmie dowiesz się jak stworzyć podstronę kontaktu za pomocą paru kliknięć. Strona kontaktu składać się będzie z danych firmowych podzielonych na 2 kolumny, formularza kontaktowego, zdjęcia oraz mapy google z lokalizacją firmy.
2. Aby dodać podstronę kontaktu, z lewej belki menu administratora, wybieramy zakładkę „Strony„, a następnie „Dodaj nową„.
3. Uzupełniamy tytuł naszej podstrony, czyli wpisujemy Kontakt. Następnie z prawej strony, z modułu Atrybuty strony, wybieramy Szablon/Kontakt. Jeżeli ten moduł na naszej stronie sięnie wyświetlił, upewnijmy się, że w Opcje ekranu (prawy górny róg), mamy zaznaczone Atrybuty strony. Po wybraniu szablonu, wyświetlą się nam dodatkowe pola do uzupełnienia.
4. Pierwsze pole to Nazwa firmy, także rozpoczynamy od jego uzupełnienia. Następnie ustalamy na ile kolumn, mają być podzielone nasze dane firmowe. Na tym przykładzie podział kolumn naszych danych firmowych ustawię na „2„, dzięki czemu nasze dane wyświetlą się w estetyczny sposób. Możemy teraz dodać najważniejsze informacje o naszej firmie. Klikamy „Dodaj wiersz” i wpisujemy: Adres firmy, E-mail, NIP firmy, Telefon.
Przy podaniu adresu email, warto umieścić go w znaczniku html: <a href="mailto:nasz_email@przykladowa-domena.pl">nasz_email@przykladowa-domena.pl</a> dzięki temu sprawimy, iż użytkownik po kliknięciu w podany adres mailowy, będzie mógł bezpośrednio wywołać program pocztowy.
Przy podawaniu telefonu, warto umieścić go w znaczniku html: <a href=”tel:+48000000000″>+48 000 000 000</a> dzięki temu sprawimy, iż użytkownik po kliknięciu w link z numerem telefonu, będzie mógł bezpośrednio zadzwonić ze swojej komórki.
Oczywiście danych firmowych możemy wpisać więcej, jednak w tym przykładzie, zaprezentowałem 4 najczęściej używane.
5. Teraz uzupełniamy Nagłówek nad formularzem (opcjonalnie).
6. Pozostało nam umieścić kod naszego formularza kontaktowego, który możemy znaleźć w zakładce Kontakt. Kopiujemy kod np. [contact-form-7 id=”786″ title=”Formularz kontaktowy”] i wklejamy do naszego pola.
7. Dodatkowo możemy umieścić zdjęcie, w celu uatrakcyjnienia naszej podstrony. Klikamy „Dodaj obraz„, następnie możemy wybrać czy chcemy umieścić zdjęcie bazując na grafikach, które przesłaliśmy na serwer naszej strony lub wybrać zakładkę „Prześlij pliki„, by wybrać lokalnie z naszego komputera. Po wybraniu zdjęcia, potwierdzamy przyciskiem „Wybierz„.
8. Ostatnim krokiem jest możliwość umieszczenia kodu mapy z lokalizacją siedziby naszej firmy. Aby to zrobić otwieramy mapy google w osobnej zakładce https://www.google.pl/maps, wpisujemy adres naszej firmy, klikamy ikonę „Udostępnij„, a następnie wybieramy zakładkę „Umieszczanie mapy” i kopiujemy kod mapy do naszego pola. W kodzie mapy możemy zmienić parametr szerokości width=”600″ na width=”100%”, oraz parametr wysokości height=”450″ na height=”330″.
9. I gotowe. Stworzyliśmy podstronę kontaktu. Możemy teraz w prawym górnym rogu strony kliknąć „Opublikuj” lub „Aktualizuj” nasze dokonane zmiany i podejrzeć efekt pracy.