Zmiana wyglądu i opcji
W naszym trzecim odcinku „jak to zrobić” przyjrzymy się kilku innym opcjom dostępnym w Yclas. W dwóch poprzednich artykułach omówiliśmy jak stworzyć naszą pierwszą stronę z ogłoszeniami oraz jak zmienić szablon naszej strony, jak stworzyć kategorie i jak opublikować nasze pierwsze ogłoszenie. Czas więc na kolejne kroki i kilka nowych opcji.
Krok 1 – zmiana koloru szablonu
Ostatnio zmieniliśmy szablon z Ocean na Responsive. Standardowym kolorem szablonu jest czerwony, ale zmienimy go na zielony.
Aby to zrobić, przejdź do „Appearance”, a potem do „Theme Options”. Tutaj możemy zmienić kolor na zielony w selektorze „change the color scheme and style of the theme”. Wybieramy tutaj zielony i zapisujemy zmiany, klikając niebieski przycisk „update” na dole strony.
Nasza strona będzie teraz wyglądać tak:
Krok 2 – dodawanie widżetów
Aby dodać więcej funkcjonalności do naszej strony, możemy też dodać tak zwane widżety. To bardzo małe aplikacje, które można łatwo zainstalować w określonej części strony. Na przykład w pasku bocznym, nagłówku lub stopce.
Przejdźmy do „Appearance”, a potem „Widgets”. Tutaj znajdziemy przegląd wszystkich dostępnych widżetów.
Aby zainstalować widżet, wystarczy kliknąć niebieski przycisk „create” przy wybranym widżecie. Najpierw zainstalujemy widżet „categories”. Po kliknięciu przycisku create przy widżecie „categories” zobaczymy to okno. Tutaj możemy wybrać, gdzie chcemy umieścić widżet. Wybieramy wyświetlanie kategorii w pasku bocznym. Klikamy niebieski przycisk „save changes” i nasz widżet zostanie zainstalowany.
Robimy to samo dla widżetu „contact”.
Po zainstalowaniu obu widżetów zobaczymy, że są one umieszczone w pasku bocznym. Widać to po prawej stronie naszego ekranu.
Gdy teraz wejdziemy na naszą stronę i klikniemy jedno z ogłoszeń, zobaczymy widżety kategorii i kontaktu wyświetlane po prawej stronie w pasku bocznym.
Dzięki widżetowi kategorii widzimy, w jakiej kategorii aktualnie się znajdujemy. W naszym przypadku jest to „complete bicycles”. Poza tym, z tego widżetu możemy przejść do innych dostępnych kategorii.
Jest tam też formularz kontaktowy. Za jego pomocą możemy skontaktować się z ogłoszeniodawcą. Wypełnienie tematu, treści wiadomości i poprawnej captchy wyśle e-mail do osoby, która opublikowała ogłoszenie. Tak to jest proste!
Personalizacja marketplace'u w 2026 roku: opcje szablonu Nova i obszary widżetów
Powyższe kroki zostały napisane dla starszych szablonów i starszego panelu administracyjnego. Szablon Ocean nie jest już dostępny, a każda nowa strona Yclas zaczyna teraz z szablonem Nova. Menu, które wcześniej nazywało się „Appearance”, nazywa się teraz Design i ma pięć pozycji: Themes, Theme Options, Widgets, Menu oraz Custom CSS. Sama koncepcja się nie zmieniła, ale niektóre ustawienia zostały przeniesione.
Kolory: jeden kolor akcentu zamiast gotowych schematów
Starsze szablony, takie jak Responsive Listings (wciąż dostępny w wersjach czerwonej, różowej i zielonej), pozwalały wybierać z ustalonej listy kolorów. Nova działa inaczej. W Design › Theme Options › Color wybierasz jeden kolor akcentu dla przycisków, linków i wyróżnień. Jak to ujmuje strona funkcji Yclas, ten jeden kolor zmienia styl całej strony. Pozostaw pole puste, aby zachować domyślny zielony kolor Nova. Drugie pole ustawia kolor po najechaniu kursorem (hover), a jeśli pozostawisz je puste, Nova automatycznie przyciemni twój kolor akcentu.
Nova wyświetla biały tekst na przyciskach w kolorze akcentu, więc wybierz kolor wystarczająco ciemny. Wytyczna kontrastu WCAG 2.2 (SC 1.4.3) W3C wymaga współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, który definiuje jako co najmniej 18 punktów, albo 14 punktów pogrubionych. Bladożółte, jasnozielone i jasnoróżowe kolory zwykle nie spełniają tego wymogu na tle białym. Sprawdź swój kolor w narzędziu do sprawdzania kontrastu, zanim go zapiszesz.
Inne ustawienia wyglądu w Nova
| Co chcesz zmienić | Co można ustawić w Design › Theme Options |
|---|---|
| Logo | Wgraj plik PNG, zalecany rozmiar 250 × 40 px. Bez logo możesz wyświetlić ikonę Czcionka Awesome przy nazwie strony. |
| Sekcja hero na stronie głównej | Obraz tła (zalecane 1920 × 640 px), nagłówek i tekst pod nim |
| Pasek „How it works” | Pokaż lub ukryj go, i edytuj trzy kroki dla sprzedających oraz trzy dla kupujących |
| Czcionka | Plus Jakarta Sans z Nova, albo systemowa czcionka odwiedzającego |
| Układ | Pozycja paska bocznego (albo brak paska bocznego), ścieżka nawigacyjna, nieskończone przewijanie na stronach z ogłoszeniami oraz tekst od prawej do lewej |
Do wszystkiego, czego nie obejmuje Theme Options, użyj Design › Custom CSS.
Widżety w Nova
Widżety Categories i Contact opisane w tym przewodniku wciąż istnieją, podobnie jak Text (HTML), Image, Pages, Share, Follow, Search, Locations oraz Featured Ads. Nova ma trzy obszary widżetów: Sidebar, Footer oraz Post a listing (strona, na której użytkownicy publikują ogłoszenia). Nie ma obszaru nagłówka. Przeciągnij widżety do Inactive, aby je ukryć, zachowując ich ustawienia.
Jedna rzecz, o której warto wiedzieć przed dodaniem widżetów do paska bocznego: gdy pasek boczny jest pusty, Nova wyświetla własne filtry na stronach kategorii (słowo kluczowe, kategoria, lokalizacja, cena i pola niestandardowe). Gdy dodasz jakikolwiek widżet do paska bocznego, te filtry nie będą już pokazywane na stronach kategorii. Strona wyników wyszukiwania wciąż je wyświetla. Jeśli chcesz tylko dodatkowe pole, na przykład widżet kontaktu lub tekstu, dodaj też widżet Search do paska bocznego, aby odwiedzający mogli wciąż filtrować. Możesz też całkowicie wyłączyć filtry Nova w Theme Options.
Jak widzisz, bardzo łatwo zmienić swoją stronę i dodać dodatkowe funkcjonalności. Nie jest też potrzebna żadna wiedza techniczna. Następnym razem odkryjemy kolejne opcje, jakie oferuje Yclas!
