Widgets, czyli łidżety

Co to jest widget?

Widget to taki mały moduł, często gadżeciarski, niekiedy bardzo użyteczny, który można wbudować w WordPressa. Może pojawić się w strukturze serwisu, może być też użyty w treści wpisu lub strony.

Widgety są swoistymi gotowcami na szczególne okazje, które pojawiają się w trakcie budowy serwisu. Wraz z ambicjami rośnie więc zapotrzebowanie na dopieszczenie graficzne i lepsze dopasowanie do wymagań, ale niekiedy bywa to przerost formy nad treścią. Poniższa zawartość została stworzona przy wykorzystaniu widgetów samego WordPressa oraz zestawów z SiteOrigin oraz Shortcodes Ultimate. W zależności od twórcy widgetów, ich użycie może wiązać się z uazależnieniem od PageBuildera, czyli dodatkowego systemu zarządzania strukturą treści we wpisach i stronach. Niestety, raczej jest to uzależnienie z gatunku złych, gdyż utrudnia ręczne poprawki i niepotrzebnie komplikuje WP i generuje mnóstwo dodatkowego kodu, co jak można się domyślić opóźnia działanie i naraża serwis na powstawanie błędów.

Jeśli nie zniechęciłem, zapraszam do zapoznania się z przykładami widgetów – oby w działaniu 😉

Hero

Hero, czyli bohater, ale bardziej chodzi o coś w rodzaju slidera, w którym można lokalnie wyróżniać różne strony czy wpisy w postaci slajdów z opisem i grafiką w tle

Divider, czyli rozdzielacz

Button

Button, czyli przycisk

Divider, czyli rozdzielacz

Call-to-action

Widget zachęcający do wykonania jakiegoś działania przez zwrócenie uwagi wyróżnieniem i łatwym dostępem do przycisku wywołującego daną akcję

Call-to-action

Zrób coś! Ale to tylko demonstracja działania tego wigdetu i wylądujesz na stronie o smutkach WP...

Divider, czyli rozdzielacz

Image

Wstawienie grafiki jest zazwyczaj proste, ale można trochę pokomplikować to użyciem widgetu z dodatkowymi opcjami dotyczącymi wyrównania, tła czy obramowania

obrazek

Divider, czyli rozdzielacz

Features

Features, czyli cechy wyróżniające, wyróżniki. Chodzi o możliwość przystępnego przedstawienia cech na które chce się zwrócić uwagę

Parametry
  • parametr 1
  • parametr 2
  • parametr 3
  • parametr 4
  • ...
  • parametr n-ty
Zalety

Zaleta 1 - nie trzeba bawić się z kolumnami czy tabelami

Zaleta 2 - gotowiec zapewnia dostęp do ikon

Zaleta 3 - duże możliwości doboru kolorów

Zaleta 4 - łatwe dopasowywanie i edycja treści

Zaleta 5

Zaleta 6

...

Zaleta n-ta

 

Fakty

Fakt 1

Fakt 2

Fakt 3

Fakt 4

Fakt 5

Fakt 6

...

Fakt n-ty

 

Divider, czyli rozdzielacz

Accordion

Accordion, czyli akordeon. Skojarzenia z tym śmiesznym instrumentem są jak najbardziej uprawnione, gdyż w tym wigdecie sposób prezentacji treści przez kompresowanie do nagłówków przypomina zasadę działania akordeonu, tyle że w pionie.

Accordion

Tu przykładowa zawartość panelu numer 1.

Może być to zwyczajna stronka.

Tutaj losowy obrazek

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodosequat. Duis aute irure dolor in voluptrender. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Divider, czyli rozdzielacz

Divider, czyli rozdzielacz

Divider, czyli rozdzielacz

Divider, czyli rozdzielacz

Tabs

Tabs, czyli zakładki. Może być to dobry sposób na prezentację na jednej stronie wielu skategoryzowanych treści podzielonych na różne zakładki.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodosequat. Duis aute irure dolor in voluptrender. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Zakładki Shortcodes Ultimate

123
Pierewsze Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodosequat. Duis aute irure dolor in voluptrender. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Drugie Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodosequat. Duis aute irure dolor in voluptrender. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Trzecie Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodosequat. Duis aute irure dolor in voluptrender. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Divider, czyli rozdzielacz

Divider, czyli rozdzielacz

caret-down caret-up caret-left caret-right

Divider, czyli rozdzielacz

Social Media

Social Media czyli łatwa prezentacja linków do serwisów społecznościowych – nie trzeba biedzić się dokładaniem ikonek – wystarczy wybrać i wpisać adres swojego profilu