- Informacje ogólnie:
- Utworzenie widgetu i jego podstawowa konfiguracja:
- Należy wybrać z górnego panelu zakładkę Witryny:
- Następnie po najechaniu na nią kursorem myszki, wybrać zakładkę Widgety:
- Następnie kliknąć przycisk Dodaj zaznaczony niebieską strzałką w celu utworzenia nowego widgetu:
- W polach zaznaczonych zielonymi strzałkami należy wybrać Odtwarzacz z listą scrollowaną poniżej jako Rodzaj widgetu.
Wybrać witrynę, na której widget zostanie umieszczony, a na końcu wpisać swoją nazwę dla tworzonego widgetu (widoczną tylko na platformie). Następnie kliknąć przycisk Zapisz (niebieska strzałka):
- Zostaniemy przeniesieni do podglądu utworzonego widgetu. Należy dokończyć podstawową konfigurację, aby wygenerować kod osadzenia.
W tym celu należy kliknąć przycisk Edycja zaznaczony niebieską strzałką:
- Następnie należy wybrać playlistę, której elementy będą wyświetlane przez widget (zielona strzałka). Po wybraniu playlisty należy kliknąć przycisk Zapisz (niebieska strzałka):
- Zostaniemy przeniesieni z powrotem do podglądu utworzonego widgetu, gdzie będzie już widoczny kod widgetu (zielona strzałka). Należy go skopiować i umieścić w kodzie źródłowym strony, na której chcemy, aby nasz widget był umieszczony. Po tej czynności widget powinien się wyświetlać na naszej stronie:
- Strona, na której został umieszczony widget wywołana z urządzenia desktopowego:
- Strona, na której został umieszczony widget wywołana z urządzenia mobilnego:
- Konfiguracja zaawansowana dotycząca wyglądu widgetu:
- Aby przejść do ustawień związanych z wyglądem widgetu, należy kliknąć w przycisk Edycja:
- Oprócz ustawień powinien wyświetlać się nam podgląd widgetu razem z elementami playlisty, którą wybraliśmy w konfiguracji podstawowej.
W podglądzie będą widoczne wszystkie wprowadzane zmiany. Kliknięcie ikony zaznaczonej niebieską strzałką spowoduje zminimalizowanie podglądu widgetu:
- Część ustawień jest podzielona na dwie kolumny: jedna dla urządzeń desktopowych (zaznaczono na pomarańczowo), druga dla urządzeń mobilnych (zaznaczono na zielono).
Można przepisać wartości z jednej kolumny do drugiej używając opcji zaznaczonej niebieską strzałką i wybierając Zapis opcji ustawionych dla desktop także jako opcje dla mobile lub
Zapis opcji ustawionych dla mobile także jako opcje dla desktop.
- Wartości dotyczące rozmiarów są wyrażane w pixelach lub jako procenty w stosunku do szerokości widgetu.
W polach zaznaczonych strzałkami można wybrać miarę dla ustawień znajdujących się poniżej.
- Wysokość listy materiałów (czerwoną przerywaną linią zaznaczono granicę między widgetem a stroną):
- Kolor tła listy materiałów:
- Pole nawigacji:
Opcje dotyczące pola nawigacji:- Szerokość nawigacji
- Wysokość nawigacji
- Lewy margines ikony nawigacji
- Prawy margines ikony nawigacji
- Górny margines ikony nawigacji
- Dolny margines ikony nawigacji
- Kolor tła pola nawigacji
- Kolor podświetlonego tła pola nawigacji
- Kolor ikony nawigacji
- Kolor podświetlonej ikony nawigacji
- Lista i jej elementy:
Opcje dotyczące listy i jej elementów:- Szerokość elementu listy
- Kolor tła elementu listy
- Kolor tła podświetlonego elementu listy
- Kolor tła wybranego elementu listy
- Lewy margines postera
- Prawy margines postera
- Górny margines postera
- Dolny margines postera
- Lewy margines tytułu
- Prawy margines tytułu
- Górny margines tytułu
- Dolny margines tytułu
- Rozmiar czcionki tytułu (px)
- Kolor tytułu w liście materiałów
- Kolor tytułu podświetlonego elementu
- Kolor tytułu wybranego elementu
- Rozmiar czcionki czasu trwania (px)
- Kolor tekstu czasu trwania elementu
- Kolor tekstu czasu trwania podświetlonego elementu
- Kolor tekstu czasu trwania wybranego elementu
- Kolor tła czasu trwania elementu
- Kolor tła czasu trwania podświetlonego elementu
- Kolor tła czasu trwania wybranego elementu
- Rozmiar klawisza PLAY
- Kolor koła klawisza PLAY
- Kolor koła klawisza PLAY podświetlonego elementu
- Kolor koła klawisza PLAY wybranego elementu
- Kolor trójkąta klawisza PLAY
- Kolor trójkąta klawisza PLAY podświetlonego elementu
- Kolor trójkąta klawisza PLAY wybranego elementu
- Ustawienia desktopowe i mobilne dla widgetu:
Odtwarzacz z listą scrollowaną poniżej jak inne widgety, playlisty oraz witryny - posiada swoje własne ustawienia mobilne i desktopowe. Wszystkie dostępne w nich opcje wraz z przykładami są dostępne pod linkiem: ustawienia_desktop_mobile.html
Przyciski prowadzące do ustawień desktopowych i mobilnych zaznaczone zieloną strzałką:
Odtwarzacz z listą scrollowaną poniżej jest to nowy, trzeci typ widgetu służący do wizualizacji elementów playlisty i umożliwiający swobodny wybór materiałów do odtwarzania spośród elementów tej playlisty.
Przewijanie listy materiałów może odbywać się poprzez użycie pól nawigacji (strzałki z lewej i prawej krawędzi ekranu) oraz poprzez przeciąganie listy (wersja desktopowa) lub poprzez gesty (wersja mobilna).
Dobrym pomysłem dla wersji mobilnej może okazać się całkowita rezygnacja z pól nawigacji poprzez ustawienie szerokości nawigacji na 0px lub 0% (więcej w Konfiguracja zaawansowana dotycząca wyglądu widgetu). Takie rozwiązanie pozwoli zwiększyć obszar na którym będą wyświetlane elementy listy w postaci miniaturek. [przykład]
Domyślny wygląd Odtwarzacza z listą scrollowaną poniżej w wersji desktopowej: widget_z_lista_scrollowana.html
Domyślny wygląd Odtwarzacza z listą scrollowaną poniżej w wersji mobilnej:
Widget składa się z dwóch części - górnej i dolnej. Górna jest to zwykły player, którego wygląd da się modyfikować w ustawieniach witryny w zakładce Wygląd playera. Natomiast dolną część stanowi przesuwana lista, której wygląd jest możliwy do ustawienia w zakładce Edycja widgetu. Dodatkowo dolna część widgetu może mieć zupełnie inne ustawienia dla urządzeń mobilnych i desktopowych.
Górna część widgetu zaznaczona na zielono, dolna część zaznaczona na pomarańczowo:
