Poniższa porada dotyczy oprogramowania Gridbox oraz BaForms dla CMS Joomla! - jeśli masz stronę na tym systemie, to sprawdź też inne moje porady na easyblog.pl!
Czasem dostaję od swoich klientów pytania o jakiś plugin, który pokazuje przycisk do kontaktu na każdej stronie - zwykle w prawym dolnym rogu. W przypadku gdy korzystamy z pakietu Gridbox na CMS Joomla!, żaden dodatkowy plugin czy moduł nie jest potrzebny. Możemy rozwiązać to na co najmniej kilka sposobów, a poniżej pokażę trzy, na tyle proste, że każdy sobie z tym poradzi.
Pierwsza opcja
Wstawiamy w sekcji footer przycisk "Sekcja overlay". Po kolei:
- Najlepiej przycisk umieścić właśnie w sekcji footer
- Nadajemy jakiś styl - zmiana ikony, kolory, odstępy itp.
- Wybieramy z której strony pojawi się panel (może to być też "lightbox")
- W panelu umieszczamy na przykład formularz, linki z kontaktami i to co uznasz za stosowne
- Umieszczamy przycisk w pozycji"Fixed" (co oznacza, że będzie widoczny cały czas), pozycjonujemy go na przykład w prawym dolnym rogu - i to w zasadzie wszystko :)
Wszystkie powyższe kroki pokazuję na filmiku:
Druga opcja
Wykorzystanie dodatku Hotspot, który znajdziemy w przyborniku Gridbox. Zwykle służy do czegoś innego, ale znakomicie przyda się też jako "pływający" przycisk z kontaktem. W tym przypadku umieścimy przycisk po prawej stronie, w połowie wysokości. Po kolei:
- Podobnie jak w poprzednim przykładzie umieszczamy "HotSpot" w sekcji footer
- Zmieniamy ikonę na taką, jaka nam odpowiada, nadajemy jej style (kolor, odstępy)
- Wybieramy z której strony pojawi się "dymek" z formularzem - w tym przykładzie będzie z lewej - ustalamy też szerokość owego "dymka"
- Na koniec ustalamy pozycję - czyli "Fixed" i tym razem wyrównujemy do lewej oraz do środka strony - przycisk będzie więc widoczny po środku
- Umieszczamy w okienku to, co nam jest potrzebne - linki, formularz itd.
Powyższe kroki widać na moim filmiku:
Trzecia opcja
Użycie ustawień komponent BaForms z balbooa.com. W tym przypadku ustalamy w panelu formularza, że ma się wyświetlać w wyskaującym okienku. W takiej sytuacji formularz wygeneruje nazwę klasy - dodanie jej do dowolnego elementu na stronie spowoduje możliwość otworzenia okienka z formularzem. Po kolei:
- W panelu formularza klikamy "Projektowanie" i wybieramy układ "Lightbox", tutaj możemy też zadbać o wygląd okienka, jego umiejscowienie itd.
- Klikamy ikonę opcji i wybieramy wyzwalacz - w tym przypadku chcemy żeby okienko pokazało się po kliknięciu w link
- W tym samym miejscu mamy wygenerowaną nazwę klasy - kopiujemy ją. Możemy ją umieścić na przykład na przycisku, albo też w dowolnym linku - kliknięcie go spowoduje wtedy otworzenie się okienka z formularzem
- Jak widać poniżej na przykładzie klasa została nadana do zwykłego przycisku więc jego naciśnięcie spowoduje otworzenie się okienka
Poniżej wszystkie kroki na moim filmiku. Przycisk został umieszczony w prawym dolnym rogu na tej samej zasadzie, co w poprzednich 2 przykładach. Pamiętaj, że w tej opcji, jeśli chcesz dodać coś więcej niż formularz, musisz zrobić to w panelu formularza, w edycji strony nic dodać do okienka się nie da.
To tyle, jak widać można w błyskawiczny sposób dodać formularz kontaktowy, albo inne dane potrzebne internaucie (np. zamiast kontaktu może być ciągle widoczny koszyk w sklepie, może być moduł czatu z jakiegoś komponentu itd.) - a co najważniejsze, są to proste i szybkie do wprowadzenia rozwiązania.
Porada na zakończenie. Nie zapomnij o osobnych stylach dla urządzeń mobilnych, zwłaszcza smartfonów. Nie chcesz pzecież, żeby wielki przycisk przesłonił pół ekranu w telefonie, dotyczy to również wyskakujących okienek i ilości zawartych tam elementów.