Obarek, Pokoński, Pazdrijowski, Zaprucki ul. Kościuszki 1c ...186 WordPress 5. Rewolucja Gutenberga RYSUNEK 7.1. Elementor w kokpicie WordPressa W pozycji Saved Templates widoczna

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Redaktor prowadzący: Małgorzata Kulik

Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, ZapruckiGrafika na okładce została wykorzystana za zgodą Shutterstock.com

Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/wp5regMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

ISBN: 978-83-283-5619-1

Copyright © Helion 2020

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/wp5reg

http://helion.pl/rf/wp5reg

http://helion.pl/ro/wp5reg

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis treściRozdział 1. Czym jest Gutenberg? ................................................................................... 7

Rozdział 2. WordPress we wspólnej domenie ................................................................ 11Zarządzanie blokami .......................................................................................................11Sekcja: Podstawowe bloki ...............................................................................................16

Nagłówek ................................................................................................................ 16Akapit ...................................................................................................................... 17Obrazek ................................................................................................................... 18Cytat ........................................................................................................................ 20Lista ......................................................................................................................... 20Galeria ..................................................................................................................... 21Plik dźwiękowy ...................................................................................................... 22Okładka ................................................................................................................... 23Plik ........................................................................................................................... 24Filmy ........................................................................................................................ 26

Sekcja: Formatowanie ......................................................................................................27SyntaxHighlighter Code ....................................................................................... 27Kod .......................................................................................................................... 29Klasyczny ................................................................................................................ 29Własny HTML ....................................................................................................... 30Tekst preformatowany .......................................................................................... 32Wyróżniony cytat .................................................................................................. 33Tabela ...................................................................................................................... 34Werset ..................................................................................................................... 36

Sekcja: Układ strony ........................................................................................................37Separator ................................................................................................................. 37Przycisk ................................................................................................................... 37Liczba kolumn ........................................................................................................ 38Media i tekst ........................................................................................................... 40Czytaj dalej ............................................................................................................. 42Odstęp ..................................................................................................................... 42Podział strony ........................................................................................................ 43

Poleć książkęKup książkę



4 WordPress 5. Rewolucja Gutenberga

Sekcja: Widżety ................................................................................................................44Shortcode ................................................................................................................ 44Archiwum ............................................................................................................... 50Kategorie ................................................................................................................. 51Kalendarz ................................................................................................................ 52Komentarze ............................................................................................................ 52Ostatnie wpisy ........................................................................................................ 53RSS ........................................................................................................................... 55Szukaj ...................................................................................................................... 56Tag Cloud ............................................................................................................... 57

Sekcja: Wstawione treści .................................................................................................58YouTube ................................................................................................................. 58Osadź ....................................................................................................................... 59Twitter ..................................................................................................................... 60Facebook ................................................................................................................. 61Spotify ..................................................................................................................... 61Scribd ....................................................................................................................... 62TED ......................................................................................................................... 63

Sekcja: JetPack ..................................................................................................................64Business Hours ....................................................................................................... 64Contact Info ........................................................................................................... 66Form ........................................................................................................................ 67Slideshow ................................................................................................................ 69Subscription Form ................................................................................................. 70Tiled Gallery ........................................................................................................... 71

Rozdział 3. Ultimate Addons for Gutenberg .................................................................. 75Advanced Heading ..........................................................................................................75Post Grid ...........................................................................................................................79Post Carousel ....................................................................................................................86Multi Buttons ...................................................................................................................88Team ..................................................................................................................................91Google Map ......................................................................................................................95Content Timeline .............................................................................................................97Post Timeline ..................................................................................................................101Table of Contents ...........................................................................................................103

Rozdział 4. Kadence Blocks — Gutenberg Page Builder Toolkit .................................... 109Advanced Heading ........................................................................................................110Row Layout .....................................................................................................................115Spacer/Divider ................................................................................................................121Tabs ..................................................................................................................................123




Spis treści 5

Accordion .......................................................................................................................126Icon ..................................................................................................................................130Icon List ...........................................................................................................................133

Rozdział 5. Advanced Gutenberg ................................................................................ 137Images Slider ..................................................................................................................137Social Link .......................................................................................................................141Advanced Button ...........................................................................................................142Advanced Image .............................................................................................................145Advanced Video .............................................................................................................147Advanced Table ..............................................................................................................149Count Up ........................................................................................................................154

Rozdział 6. Ultra Blocks ............................................................................................. 157Heading ...........................................................................................................................157Paragraph ........................................................................................................................162Countdown .....................................................................................................................165Timeline ..........................................................................................................................169Stats Counter ..................................................................................................................172Flip Box ...........................................................................................................................175iHover ..............................................................................................................................179Team ................................................................................................................................181Interactive Banner .........................................................................................................182

Rozdział 7. Elementor Blocks for Gutenberg ................................................................ 185

Dodatek A Style ....................................................................................................... 195Wprowadzenie ...............................................................................................................195Budowa stylu ..................................................................................................................197Klasy stylów ....................................................................................................................199Tworzenie klasy w blogu ...............................................................................................200Użycie klasy w blogu .....................................................................................................201Przydatne kody ...............................................................................................................204

Skorowidz ............................................................................................... 211








Rozdział 7.

Elementor Blocksfor Gutenberg

Wtyczka Elementor Blocks for Gutenberg jest narzędziem zaprojektowanym przez twórcównajpopularniejszego obecnie page buildera dla platformy WordPress, czyli Elementora. Elementorjest osobnym „ekosystemem”, który składa się z bezpłatnej wtyczki Elementor oraz zbioru bez-płatnych i płatnych wtyczek wspierających działanie Elementora.

Firma produkująca program Elementor musi mieć oczywiście jakiś model biznesowy, który po-zwala jej utrzymywać zespół programistów i uzyskiwać dochody wystarczające do utrzymania się natym wymagającym rynku. Dochody przynosi Elementor Pro, czyli komercyjna wtyczka do bez-płatnego Elementora. Działa ona w oparciu o model subskrypcyjny, w rozmaitych odmianach— np. najbardziej popularny jest model najdroższy, który pozwala posługiwać się ElementoremPro w nieograniczonej liczbie blogów. Popularny jest też model najprostszy — roczna opłata zawersję jednostanowiskową.

Wokół Elementora uwija się wiele firm, które oferują płatne i bezpłatne wtyczki, rozbudowującbardzo szeroki już wachlarz bloków konstrukcyjnych — setki bardzo nieraz pomysłowych i cen-nych kreatorów rozmaitych zadań.

Sytuację tę postanowili spożytkować twórcy Elementora, integrując go z Gutenbergiem za po-mocą pośredniczącej wtyczki Elementor Blocks for Gutenberg. Działa ona w ten sposób, że najpierwinstalujemy bezpłatną wersję Elementora, następnie wtyczkę pośredniczącą, a potem, pracując zapomocą Gutenberga, przywołujemy bloki dostępne w „ekosystemie” Elementora. Oczywiściemożemy także zainstalować wtyczki do Elementora, dzięki czemu będą one mogły być wykorzysta-ne w Gutenbergu.

Jak zatem korzystamy z wtyczki Elementor?

Aby zintegrować bloki (widżety w terminologii Elementora) z wpisami tworzonymi za pomocąGutenberga, musimy utworzyć w Elementorze potrzebne nam szablony, a następnie wkompo-nować je we wpisy.

Najlepszą metodą tworzenia szablonów jest budowanie ich z poziomu menu Elementora w kokpicieWordPressa.





RYSUNEK 7.1. Elementor w kokpicie WordPressa

W pozycji Saved Templates widoczna jest lista utworzonych szablonów. Sporządzimy trzy przykła-dowe szablony.

Aby utworzyć szablon, kliknij przycisk Dodaj Nowy. Na ekranie ukaże się interfejs Elementora,w którym sporządzisz konkretny szablon.

W menu Typ szablonu wybierz Sekcja, a w polu Nazwa podaj własną nazwę, np. Kolorowy se-parator.

RYSUNEK 7.2. Typ i nazwa szablonu




Rozdział 7. Elementor Blocks for Gutenberg 187

Po kliknięciu przycisku Stwórz szablon ukaże się interfejs Elementora. Po lewej stronie widocz-ne są dwie grupy bloków (w terminologii Elementora nazywanych widżetami), Podstawowyi Ogólne, razem 30 bloków.

RYSUNEK 7.3. Interfejs Elementora do tworzenia szablonów

Przeciągnij widżet Separator na pole otoczone przerywaną linią.

Gdy kursor spoczywa na widżecie, na karcie Treść zmień grubość separatora na 5 pikseli, wy-bierz niebieski kolor i zwiększ przerwę do 20 pikseli.

RYSUNEK 7.4. Formatowanie szablonu separatora





Kliknij na dole przycisk Publikuj.

Wróć do sekcji Saved Templates w kokpicie WordPressa — na liście zobaczysz swój pierwszyszablon wielokrotnego użytku.

RYSUNEK 7.5. Pierwszy szablon gotowy do użytku

W analogiczny sposób przygotuj inne szablony. Na przykład ozdobny nagłówek:

RYSUNEK 7.6. Szablon zawierający ozdobny nagłówek

I jeszcze jeden szablon, np. mapka z położeniem Wydawnictwa Helion w Gliwicach.





RYSUNEK 7.7. Szablon zawierający mapę Google

Ostatecznie, po sporządzeniu trzech szablonów, widnieją one na liście Saved Templates.

RYSUNEK 7.8. Lista szablonów czekających na wykorzystanie





Przychodzi wreszcie czas, by wykorzystać sporządzone szablony sekcji jako bloki Gutenberga.

Wtyczkę Elementor wywołujemy na liście bloków Gutenberga z sekcji Podstawowe bloki.

RYSUNEK 7.9.WywoływanieElementoraw Gutenbergu

Ukazuje się interfejs bloku Elementor Library i rozwijane menu Select a Template.

RYSUNEK 7.10. Wybieranie szablonu do wstawienia do wpisu

Zauważ, że widoczne jest też polecenie Create a new one, które pozwala utworzyć nowy sza-blon. Wygodniejsza wydaje się jednak metoda podana wyżej — tworzenie bezpośrednio w sek-cji szablonów.





Kliknij teraz potrzebny Ci szablon, aby wstawić go do wpisu.

RYSUNEK 7.11. Wybieranie szablonu do wstawienia do wpisu

Aby zmienić postać separatora, np. zwiększyć jego grubość i zmienić kolor, musisz dokonaćponownej edycji szablonu. W tym celu kliknij po prawej stronie przycisk Edit Template withElementor.

W wyświetlonym interfejsie Elementora wprowadź poprawki.

Po dokonaniu poprawek kliknij na dole przycisk Aktualizuj.

Powróć do wpisu i wczytaj go ponownie — ukaże się poprawiona postać szablonu.

RYSUNEK 7.12. Szablon po poprawkach

A tak wygląda szablon z ozdobnym nagłówkiem:

RYSUNEK 7.13. Szablon z nagłówkiem

Aby wstawić właściwy tytuł, kliknij przycisk edycji szablonu i zmień treść tytułu.

Należy oczywiście pamiętać, że zmiana zawartości szablonu oznacza zmianę we wszystkich jegowystąpieniach we wpisie. Aby się przed tym ustrzec, możemy wyedytować szablon w Elemento-rze, a następnie zapisać jako szablon pod inną nazwą. Trudno jednak nie zauważyć, że szablony





z tekstem mniej się nadają do wykorzystania jako bloki Gutenberga (wygodniejsze są elementygraficzne), chyba że tworzymy kombinacje elementów graficznych i tekstowych, złożone z kil-ku widżetów.

RYSUNEK 7.14. Szablon zapisany pod inną nazwą

A tak wygląda uzupełniona biblioteka szablonów:

RYSUNEK 7.15. Rozszerzona biblioteka szablonów

I jeszcze widok szablonu mapki (rysunek 7.16).

Możliwość wykorzystania Elementora we współpracy z Gutenbergiem znacznie rozszerza po-tencjał podstawowego edytora WordPressa. Można zatem zalecać w miarę dogłębne poznanieGutenberga, a potem sukcesywne spenetrowanie możliwości bezpłatnej wersji Elementora. Stop-niowo włączając rozmaite widżety Elementora, możemy nauczyć się korzystać z poszerzonychmożliwości, a potem nawet uzupełniać je o zewnętrzne wtyczki do Elementora.





RYSUNEK 7.16. Szablon z mapką Google

Praca z WordPressem to proces nieustannego podnoszenia stanu wiedzy, poszerzania umiejętności.Ogromne znaczenie ma nabranie wprawy, nabycie doświadczenia, a to wymaga czasu i pracy.Regularnie korzystając z możliwości tej platformy, możemy uzbroić się w zestaw niezbędnychnarzędzi najlepiej odpowiadających naszym potrzebom. Program Elementor warto potraktować ja-ko naprawdę cenne uzupełnienie blogowego instrumentarium.








Skorowidz

AAccordion, 126Advanced

Button, 142Gutenberg, 137Heading, 75, 110Image, 145Table, 149Video, 147

Akapit, 17Archiwum, 50

BBusiness Hours, 64blok

Accordion, 126Advanced Button, 142Advanced Heading, 75, 110Advanced Image, 145Advanced Table, 149Advanced Video, 147Akapit, 17Archiwum, 50Contact Info, 66Content Timeline, 97Count Up, 154Countdown, 165Cytat, 20Czytaj dalej, 42Facebook, 61Filmy, 26Flip Box, 175Form, 67Galeria, 21Google Map, 95

Heading, 157Icon, 130Icon List, 133iHover, 179Images Slider, 137Interactive Banner, 182Kalendarz, 52Kategorie, 51Klasyczny, 29Kod, 29Komentarze, 52Liczba kolumn, 38Lista, 20Media i tekst, 40Multi Buttons, 88Obrazek, 18Odstęp, 42Okładka, 23Osadź, 59Ostatnie wpisy, 53Paragraph, 162Plik, 24Plik dźwiękowy, 22Podział strony, 43Post Carousel, 86Post Grid, 79Post Timeline, 101Przycisk, 37Row Layout, 115RSS, 55Separator, 37Shortcode, 44Slideshow, 69Social Link, 141Spacer/Divider, 121Spotify, 61Stats Counter, 172





blokSubscription Form, 70Szukaj, 56Tabela, 34Table of Contents, 103Tabs, 123Tag Cloud, 57Team, 91, 181TED, 63Tekst preformatowany, 32Tiled Gallery, 71Timeline, 169Twitter, 60Werset, 36Własny HTML, 30Wyróżniony cytat, 33YouTube, 58

bloki, 11aktywowanie, 15dodawanie, 14konstrukcyjne, 109

budowa stylu, 197

Ccecha, 197Contact Info, 66Content Timeline, 97Count Up, 154Countdown, 165CSS, 195Cytat, 20Czytaj dalej, 42

Ddefiniowanie stylów, 198dodawanie bloku, 13, 14

Eedytor WordPressa, 8Elementor Blocks for Gutenberg, 185

biblioteka szablonów, 192menu Select a Template, 190podstawowe bloki, 190szablon mapki, 193szablon mapy, 189szablon z nagłówkiem, 191tworzenie szablonów, 187

FFacebook, 61Filmy, 26Flip Box, 175Form, 67Formatowanie, 27

GGaleria, 21

miniatur, 72Google Map, 95Gutenberg, 7Gutenberg Page Builder Toolkit, 109

HHeading, 157

IIcon, 130Icon List, 133iHover, 179Images Slider, 137Interactive Banner, 182interfejs page buildera Elementor, 9

JJetPack, 64

KKadence Blocks, 109Kalendarz, 52Kategorie, 51Klasyczny, 29Kod, 29Komentarze, 52klasy stylów, 199

w blogu, 200

LLiczba kolumn, 38Lista, 20

shortcodów, 50




Skorowidz 213

M

Media i tekst, 40Multi Buttons, 88

Nnagłówek, 195

OObrazek, 18Odstęp, 42Okładka, 23Osadź, 59Ostatnie wpisy, 53

PParagraph, 162parametry shortcodu, 50Plik, 24Plik dźwiękowy, 22podstawowe bloki, 16Podział strony, 43pole Dodatkowe klasy CSS, 199, 201, 202

kody, 204Post Carousel, 86Post Grid, 79Post Timeline, 101Przycisk, 37

Wyrównaj tekst do środka, 196publikacja osadzona w blogu, 63

RRow Layout, 115RSS, 55

Ssekcja

Formatowanie, 27JetPack, 64Podstawowe bloki, 16Układ strony, 37Widżety, 44Wstawione treści, 58

selektor, 197

Separator, 37Shortcode, 44Slideshow, 69Social Link, 141Spacer/Divider, 121Spotify, 61Stats Counter, 172style, 195

klasy, 199lokalne, 197

Subscription Form, 70Szukaj, 56

TTabela, 34Table of Contents, 103Tabs, 123Tag Cloud, 57Team, 91, 181TED, 63Tekst preformatowany, 32Tiled Gallery, 71Timeline, 169Twitter, 60

UUkład strony, 37Ultimate Addons for Gutenberg, 75Ultra Blocks, 157

Wwartość, 197Werset, 36widok nagłówka, 195Widżety, 44Własny HTML, 30Wstawione treści, 58wtyczka

Advanced Gutenberg, 137Elementor Blocks for Gutenberg, 185Kadence Blocks, 109Ultimate Addons for Gutenberg, 75Ultra Blocks, 157

Wyróżniony cytat, 33wyświetlanie

cytatu, 49mapy, 49





YYouTube, 58

Zzarządzanie blokami, 11




http://program-partnerski.helion.pl

Documents

Obarek, Pokoński, Pazdrijowski, Zaprucki ul. Kościuszki 1c ...186 WordPress 5. Rewolucja Gutenberga RYSUNEK 7.1. Elementor w kokpicie WordPressa W pozycji Saved Templates widoczna