Nowoczesne rozwiązania z zakresu budowy sklepów internetowych na oprogramowaniu wooCoommerce WordPress pozwalają szybko stworzyć prosty sklep internetowy. Także i dostosowanie jego wyglądu do indywidualnych preferencji sprzedawców i rynku docelowego. Nakładki programowe określane mianem kreatorów wizualnych pozwalają opracować wygląd sklepu internetowego metodą przeciągnij i upuść. Choć nakładki typu DIVI, Elementor czy Visual Composer sprawdzają się przy prostych projektach, tak szczegółowa indywidualizacja wyglądu sklepu internetowego wymaga już znajomości języka CSS i Java Script.
Jednym z takich urozmaiceń, których nie można wykonać przy użyciu podstawowych funkcji kreatora stron internetowych DIVI jest umieszczenie napisu na zdjęciu i nadanie całemu obiektowi funkcji odnośnika obrazkowego. Istnieje kilka sposobów na dodanie napisu na zdjęcie. WordPress nie jest jednak zwykłą stroną internetową, którą możemy otworzyć i łatwo nanieść zmiany w kodzie HTML. Na tego typu oprogramowaniu większość zmian możemy nanosić po stronie front-endu. Korzystając z podstawowej wersji kreatora stron internetowych DIVI mamy do wyboru kilka modułów, które mogę spełnić nasze oczekiwania.
Jednym z modułów jest OBRAZ. W module tym jednak nie możemy dodać tekstu. Istnieje rozwiązanie w postaci selektora CONTENT, ale trzeba byłoby go poprzedzić pseudoklasą mającą odniesienie w tekście zapisanym między znacznikami HTML. Modułowy charakter wizualnych kompozytorów stron internetowych przywodzi na myśl inne rozwiązanie, a mianowicie, otwarcie pod obrazem modułu TEKST i przesunięcie jego zawartości na obszar modułu OBRAZ . Do tego typu operacji służy funkcja PRZEKSZTAŁĆ. Jak definiują tę funkcję autorzy oprogramowania: “korzystając z elementów sterujących transformacją można wykonać korekty wizualne dowolnego elementu za pomocą kombinacji ustawień Skala, Przesuwanie, Obrót, Przechylenie, Pochodzenie”. Pozwala to tworzyć zaawansowane efekty projektowe bez konieczności stosowania oddzielnego programu do projektowania graficznego”.
Nie jest to rozwiązanie idealne, bo napis lubi się przesunąć i trzeba uważać, aby nie wystąpił z obramowania. Dlatego napis nie może zajmować pozycji zbyt blisko obramowania, nie może być zbyt długi ani za wysoki. Poza tym jest to rozwiązanie pozwalające na naniesienie tła na tekst i uzyskania jeszcze lepszego efektu. Naniesienie tekstu na obraz nie przeszkadza też w stworzeniu odnośnika obrazkowego, musimy jednak pamiętać o potrzebie pod-linkowania zarówno modułu tekst, jak i obrazu (muszą być dwa odnośniki, inaczej bowiem po najechaniu na moduł tekst nie będzie żadnego odnośnika).
Nie jest to jedyny sposób na naniesienie tekstu na obraz i stworzenie odnośnika obrazkowego z nagłówkiem (oczywiście nie jest to ostatni sposób, ale kolejny z licznych trików). Do tego celu można wykorzystać moduł GALERIA. W odróżnieniu od modułu OBRAZ wyświetla on bowiem tekst będący tytułem obrazu. Wystarczy więc wprowadzić odpowiednią wartość tekstową do okienka “Tytuł” w bibliotece medialnej WordPress, a tekst ten pojawi się pod obrazkiem. Niemniej jednak naszym celem jest ustawienie tekstu “na”, a nie “pod” obrazem. W związku z tym musimy dokonać przesunięcia tego tekstu poprzez zastosowanie odpowiedniej kombinacji kodu CSS i umieszczenie go w zakładce Zaawansowane / Niestandardowe CSS dla “Tytuł elementu galerii” ukierunkowany na klasę .et_pb_gallery_0 .et_pb_gallery_title:
position: absolute;
left: 0px;
top: 0;
z-index: 1;
bottom: 0;
right: 0;
margin-top: 0%;
padding-top: 50%;
background: #00000052;
Rozwiązanie to daje nieco inny efekt, nie można też wprowadzić tła tylko dla samego napisu. Niemniej jednak rozwiązanie to pozwala na utrzymanie dość dobrej kontroli nad pozycją tekstu w obrębie obrazka.
Można jeszcze zastosować dwie metody oparte na modułach kreatorów wizualnych, takich jak DIVI, Elementor, Visual Composer czy WPBakery (przedstawiane rozwiązania testujemy na DIVI). Pierwszą z nich niech wykonamy za pomocą modułu SLIDER. Odpowiednia modyfikacja tego modułu pozwala uzyskać pożądany efekt. Rozwiązanie to pozwala na dość dużą elastyczność w kształtowaniu sposobu wyświetlania się treści na obrazie. Do dyspozycji mamy szereg modyfikatorów znaczników tekstu i obrazu, co sprawia, że układ ten możemy kształtować w praktyce dowolnie. Tekst na obrazie jest też najbardziej stabilny ze wszystkich dotychczasowych metod. Utrzymuje się we wstępnie określonej pozycji niezależnie od wielkości ekranu urządzenia.
Na koniec pozostaje wspomnieć o module PRZYCISK. Moduł ten też możemy odpowiednio zmodyfikować, aby otrzymać odnośnik obrazkowy z tekstem na zdjęciu. Metodę tę cechuje doskonała kontrola położenia tekstu w określonej pozycji na obrazie. Brakuje jednak możliwości dodania tła do samej treści, przez co nie sposób łatwo jej uwypuklić.
Budowa sklepu internetowego przy pomocy wizualnego kreatora stron internetowych, obarczona jest ograniczeniem modułowym. Ograniczenia te wpływają na wygląd naszego sklepu internetowego, na jego powtarzalność, typowość i brak efektu WOW! Barierę tę można pokonać na 3 sposoby. Po pierwsze można postarać się o dokupienie rozszerzenia do wizualnego kreatora stron. Na przykład oprogramowanie DIVI od Eleghant Theams, które zostało napisane z myślą o tworzeniu stron internetowych na silniku WordPress, można wzbogacić oprogramowaniem DIVI Kingdom, które napisano z myślą o poprawie wyglądu pluginu wooCommerce (wtyczka sklepowa dla WordPress).
Drugim sposobem na poprawę wyglądu sklepu internetowego jest odpowiednia konfiguracja modułów wizualnego konstruktora stron. Większość pożądanych przez nas efektów, choć na pierwszy rzut oka wydaje się to być niewykonalne, można uzyskać poprzez mniej lub bardziej sprytną modyfikację ustawień dostępnego pakietu modułów. Umiejętna konfiguracja tych modułów w obrębie dostępnych opcji i funkcji zazwyczaj wystarcza do osiągnięcia nieco bardziej wyróżniającego się i zindywidualizowanego wyglądu sklepu internetowego.
Trzecią metodą na poprawę wyglądu sklepu internetowego wooCommerce jest dopisywanie kodu CSS w obrębie klas modułowych lub całego sklepu. Choć WordPress udostępnia okienko umożliwiające łatwe dodanie CSS do kodu strony, a wizualne kreatory stron wyposażone są w podobne rozwiązania, tak poprawa wyglądu sklepu poprzez modyfikację kodu CSS wymaga znajomości tego języka, testowania kilku rozwiązać i umiejętności odszukiwania właściwych klas i pozycji dla kodu CSS.