{"id":367224,"date":"2023-02-25T12:34:00","date_gmt":"2023-02-25T09:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367224"},"modified":"2023-04-13T10:25:40","modified_gmt":"2023-04-13T07:25:40","slug":"jak-tworzyc-karty-wordpress-z-dodatkami-qi-dla-elementora","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-tworzyc-karty-wordpress-z-dodatkami-qi-dla-elementora\/","title":{"rendered":"Jak tworzy\u0107 karty WordPress z dodatkami Qi dla Elementora"},"content":{"rendered":"\n

Jako\u015b\u0107 tre\u015bci Twojej witryny zale\u017cy w du\u017cej mierze od Twojej wiedzy i umiej\u0119tno\u015bci, ale spos\u00f3b, w jaki j\u0105 wy\u015bwietlasz, odgrywa r\u00f3wnie\u017c wa\u017cn\u0105 rol\u0119 w postrzeganiu jej przez innych. Karty WordPress to \u015bwietny spos\u00f3b na uporz\u0105dkowanie i uporz\u0105dkowanie tre\u015bci oraz u\u0142atwienie ich strawienia<\/strong>, zw\u0142aszcza je\u015bli chodzi o d\u0142ugie artyku\u0142y. Utrzymanie czytelnika na stronie nigdy nie by\u0142o \u0142atwe, wi\u0119c utrudnianie tego poprzez oferowanie tre\u015bci, kt\u00f3re nie s\u0105 atrakcyjne wizualnie, po prostu nie jest m\u0105drym posuni\u0119ciem.<\/p>\n

Karty pomagaj\u0105 podzieli\u0107 artyku\u0142 na czytelne sekcje i uczyni\u0107 go bardziej dost\u0119pnym dla czytelnika, kt\u00f3ry mo\u017ce wtedy p\u0142ynniej porusza\u0107 si\u0119 po tek\u015bcie. Oczywi\u015bcie istnieje wiele innych wskaz\u00f3wek dotycz\u0105cych pisania<\/a>, kt\u00f3re pomog\u0105 ci uatrakcyjni\u0107 tre\u015b\u0107, ale ustawianie kart jest jednym z podstawowych. W tym artykule poka\u017cemy, jak dodawa\u0107 pi\u0119kne zak\u0142adki do tre\u015bci za pomoc\u0105 dodatk\u00f3w Qi dla Elementora<\/strong>.<\/p>\n

Dodawanie zak\u0142adek za pomoc\u0105 wtyczki<\/h2>\n

Dodatki Qi do Elementora<\/a> to pot\u0119\u017cne, bezp\u0142atne narz\u0119dzie, kt\u00f3re pozwala z \u0142atwo\u015bci\u0105 dodawa\u0107 do witryny szerok\u0105 gam\u0119 pi\u0119knych element\u00f3w<\/strong>. Jest wyposa\u017cony w intuicyjny, przyjazny dla u\u017cytkownika interfejs, a zar\u00f3wno pocz\u0105tkuj\u0105cy, jak i zaawansowani u\u017cytkownicy uznaj\u0105 go za \u0142atwy w u\u017cyciu. To, co jest szczeg\u00f3lnie wspania\u0142e w Qi, to skupienie si\u0119 na projektowaniu, wi\u0119c opr\u00f3cz przydatnych element\u00f3w zapewnia r\u00f3wnie\u017c odrobin\u0119 wsp\u00f3\u0142czesnej elegancji<\/strong>.<\/p>\n

Proces instalacji<\/a> dodatk\u00f3w QI dla Elementora nie r\u00f3\u017cni si\u0119 od jakiejkolwiek innej instalacji wtyczek. Je\u015bli masz jakie\u015b pytania, sprawd\u017a link, kt\u00f3ry podali\u015bmy powy\u017cej, a tak\u017ce mo\u017cesz napisa\u0107 do nas w sekcji komentarzy.<\/p>\n

Poniewa\u017c jest to wtyczka Elementora, pami\u0119taj, aby prze\u0142\u0105czy\u0107 si\u0119 na edytor Elementor podczas tworzenia nowego posta. Wszystkie wid\u017cety Qi Addons b\u0119d\u0105 \u0142adnie wy\u015bwietlane w menu element\u00f3w po lewej stronie<\/strong>. Po prostu przewi\u0144 menu, aby je znale\u017a\u0107.<\/p>\n

\"Jak<\/a><\/p>\n

Teraz nie ma potrzeby przegl\u0105dania wszystkich element\u00f3w Qi. Mo\u017cesz po prostu wpisa\u0107 t\u0119, kt\u00f3r\u0105 chcesz doda\u0107<\/strong>, w tym przypadku tabulator w polu wyszukiwania, a zostanie ona wy\u015bwietlona w wynikach wyszukiwania. Jak wida\u0107 poni\u017cej, dodatki Qi zapewniaj\u0105 dwa elementy zak\u0142adek \u2013 zak\u0142adk\u0119 poziom\u0105<\/a> i zak\u0142adk\u0119 pionow\u0105<\/a>.<\/p>\n

\"Jak<\/a><\/p>\n

Aby doda\u0107 pionow\u0105 zak\u0142adk\u0119, przeci\u0105gnij i upu\u015b\u0107 element Elementor w wybranym miejscu. Po dodaniu karty pionowej wszystkie ustawienia b\u0119d\u0105 znajdowa\u0107 si\u0119 po lewej stronie, a na kartach Tre\u015b\u0107 i Styl znajduj\u0105 si\u0119 wszystkie opcje zwi\u0105zane z kartami<\/strong>. Opcja Zaawansowane jest w rzeczywisto\u015bci domy\u015bln\u0105 grup\u0105 Elementora dla kolumny.<\/p>\n

\"Jak<\/a><\/p>\n

Pierwsze ustawienia, kt\u00f3re zobaczysz, to Ustawienia og\u00f3lne, kt\u00f3re zawieraj\u0105 wszystkie opcje potrzebne do optymalnego dostosowania tre\u015bci<\/strong>.<\/p>\n

\"Jak<\/a><\/p>\n

Opcja Umie\u015b\u0107 zawarto\u015b\u0107 poni\u017cej zak\u0142adki na ekranie poni\u017cej umo\u017cliwia ustawienie pionowej zak\u0142adki zgodnie z docelowym rozmiarem ekranu. Mo\u017cesz wybra\u0107 jeden z czterech rozmiar\u00f3w ekranu. Na przyk\u0142ad, je\u015bli rozmiar ekranu jest mniejszy ni\u017c 480 pikseli, tytu\u0142 karty zostanie umieszczony nad tekstem, a nie obok. Ta opcja dotyczy tylko kart pionowych. Poni\u017cszy obraz ilustruje, jak pionowa karta jest widoczna na du\u017cym ekranie i jak po ustawieniu rozmiaru ekranu w opcji Umie\u015b\u0107 zawarto\u015b\u0107 pod kart\u0105 na ekranie poni\u017cej.<\/p>\n

\"Jak<\/a><\/p>\n

Aby wprowadzi\u0107 i rozmie\u015bci\u0107 tekst na karcie pionowej, kliknij opcj\u0119 Elementy<\/strong>, a otworzy si\u0119 menu z polem poni\u017cej, w kt\u00f3rym mo\u017cna bezpo\u015brednio wpisa\u0107 tekst<\/strong>. Mo\u017cesz tak\u017ce od razu dostosowa\u0107 ustawienia tekstu pod wzgl\u0119dem wyr\u00f3wnania, typografii. Nie ma potrzeby ustawiania og\u00f3lnych ustawie\u0144 typografii, poniewa\u017c mo\u017cesz to zrobi\u0107 p\u00f3\u017aniej na karcie Styl. Jest to r\u00f3wnie\u017c miejsce, w kt\u00f3rym ustawiasz tytu\u0142 pionowej zak\u0142adki<\/strong>, wpisuj\u0105c go w polu Tytu\u0142. Po prawej stronie ekranu natychmiast zobaczysz podgl\u0105d wszystkich wprowadzonych zmian.<\/p>\n

\"Jak<\/a><\/p>\n

Po wpisaniu tekstu mo\u017cesz kontynuowa\u0107 stylizowanie go bardziej szczeg\u00f3\u0142owo<\/strong>. Kliknij opcj\u0119 Styl<\/strong> obok opcji Tre\u015b\u0107 w menu, aby otworzy\u0107 wszystkie ustawienia stylu.<\/p>\n

\"Jak<\/a><\/p>\n

Ustawienie Tag tytu\u0142u pozwala wybra\u0107, czy tytu\u0142em karty ma by\u0107 pionowy\/poziomy H1, H2 i tak dalej. Na powy\u017cszym obrazku zdecydowali\u015bmy si\u0119 na H1.<\/p>\n

Bardzo ciekawa jest opcja Typografia tytu\u0142\u00f3w .<\/strong> Pierwsza ikona z kul\u0105 ziemsk\u0105 otwiera niestandardowe menu, kt\u00f3re pozwala wybra\u0107 typ typografii spo\u015br\u00f3d czcionek globalnych<\/strong>. Jest to bezpieczny wyb\u00f3r, je\u015bli chcesz mie\u0107 pewno\u015b\u0107, \u017ce Twoja karta jest zgodna z og\u00f3lnym stylem Twojej witryny.<\/p>\n

\"Jak<\/a><\/p>\n

Je\u015bli czujesz si\u0119 na tyle pewnie, aby samodzielnie ustawi\u0107 typografi\u0119 tytu\u0142u lub po prostu chcesz pozna\u0107 wi\u0119cej opcji, kliknij ikon\u0119 o\u0142\u00f3wka obok kuli ziemskiej, aby wy\u015bwietli\u0107 wszystkie dost\u0119pne ustawienia typografii<\/strong>. Mo\u017cesz je wszystkie \u0142atwo przetestowa\u0107, poniewa\u017c natychmiast zobaczysz efekt po prawej stronie ekranu.<\/p>\n

\"Jak<\/a><\/p>\n

Opcja Rodzina<\/strong> pozwala wybra\u0107 czcionk\u0119<\/strong>, a wszystkie poni\u017csze opcje umo\u017cliwiaj\u0105 dalsze dostosowywanie wybranej czcionki<\/strong>.<\/p>\n

Ustawienie Rozmiar w tym menu pozwala na samodzielne ustawienie rozmiaru liter<\/strong>, opcja Waga pozwala dostosowa\u0107 szeroko\u015b\u0107 liter w czcionce<\/strong>. Opcja Przekszta\u0142\u0107 pozwala wybra\u0107, czy tekst ma by\u0107 pisany wielkimi lub ma\u0142ymi literami lub wielkimi literami itp. Opcja Dekoracja pozwala wybra\u0107 mi\u0119dzy stylami tej samej czcionki \u2014 domy\u015blnym, normalnym, kursyw\u0105 lub uko\u015bn\u0105. Mo\u017cesz tak\u017ce samodzielnie dostosowa\u0107 wysoko\u015b\u0107 linii<\/strong> i odst\u0119py mi\u0119dzy literami.<\/p>\n

Ustawienia typografii s\u0105 naprawd\u0119 zabawne w dostosowywaniu, poniewa\u017c jest tak du\u017cy wyb\u00f3r i naprawd\u0119 mo\u017cesz ustawi\u0107 zar\u00f3wno tytu\u0142, jak i tekst, aby wygl\u0105da\u0142y dok\u0142adnie tak, jak to sobie wyobra\u017ca\u0142e\u015b. Po nadaniu mu ostatecznego szlifu mo\u017cesz przej\u015b\u0107 do innych ustawie\u0144 stylu, kt\u00f3re obejmuj\u0105 wyb\u00f3r koloru czcionki, koloru t\u0142a i obramowania, je\u015bli chcesz je mie\u0107<\/strong>. Je\u015bli wybra\u0142e\u015b rodzaj gradientu t\u0142a, opcja Lokalizacja umo\u017cliwia precyzyjne dostrojenie efektu gradientu.<\/p>\n

Poni\u017cej mo\u017cesz zobaczy\u0107 przyk\u0142ad tego, jak zaaran\u017cowali\u015bmy tytu\u0142, znale\u017ali\u015bmy opcj\u0119 Obramowanie, kt\u00f3ra pozwala dostosowa\u0107 szeroko\u015b\u0107 tytu\u0142u, aby by\u0142a bardzo interesuj\u0105ca. U\u017cyli\u015bmy tylko jednej strony tytu\u0142u, ale mo\u017cesz poeksperymentowa\u0107 i zobaczy\u0107, co dzia\u0142a najlepiej dla Ciebie.<\/p>\n

\"Jak<\/a><\/p>\n

Mo\u017cesz tak\u017ce dostosowa\u0107 tekst pod wzgl\u0119dem koloru czcionki, koloru t\u0142a, typografii i rodzaju obramowania. Poniewa\u017c masz podgl\u0105d na \u017cywo wszystkich wprowadzanych zmian, masz du\u017co miejsca na eksperymentowanie, a\u017c znajdziesz to, co \u015bwietnie wygl\u0105da na stronie.<\/p>\n

\"Jak<\/a><\/p>\n

Poni\u017cszy obraz to przyk\u0142ad tego, jak dostosowali\u015bmy tekst, aby pasowa\u0142 do reszty tre\u015bci na stronie.<\/p>\n

\"Jak<\/a><\/p>\n

Kolejnym wa\u017cnym ustawieniem, kt\u00f3re nale\u017cy zauwa\u017cy\u0107 w tym menu, jest opcja Active\/Hover<\/strong>. Tutaj mo\u017cesz ustawi\u0107 wygl\u0105d karty po najechaniu na<\/strong>. Opcje s\u0105 takie same jak wszystkie poprzednio wspomniane powy\u017cej, wi\u0119c je\u015bli chcesz, aby zawarto\u015b\u0107 wygl\u0105da\u0142a inaczej po najechaniu kursorem, tutaj mo\u017cesz dok\u0142adnie ustawi\u0107, jak inaczej ma wygl\u0105da\u0107.<\/p>\n

Znajduj\u0105ce si\u0119 tutaj opcje linii bocznej<\/strong> s\u0142u\u017c\u0105 do dodawania animowanych efekt\u00f3w najechania kursorem. Zalecamy troch\u0119 poeksperymentowa\u0107 z tym i zobaczy\u0107, co b\u0119dzie najlepiej wygl\u0105da\u0107 na Twoich stronach.<\/p>\n

\"Jak<\/a><\/p>\n

Je\u015bli jeste\u015b zadowolony z dotychczasowego ustawienia karty, mo\u017cesz kontynuowa\u0107 eksploracj\u0119 ustawie\u0144 stylu odst\u0119p\u00f3w. Umo\u017cliwi\u0105 one dostosowanie odst\u0119p\u00f3w w tytule, tre\u015bci i elementach u\u017cytych na karcie.<\/p>\n

\"Jak<\/a><\/p>\n

W przypadku konieczno\u015bci wstawienia zak\u0142adki poziomej procedura jest w zasadzie taka sama. B\u0119dziesz mia\u0142 do dyspozycji wszystkie te same opcje, z wyj\u0105tkiem opcji Umie\u015b\u0107 zawarto\u015b\u0107 pod zak\u0142adk\u0105 na ekranie pod opcj\u0105.<\/p>\n

Wi\u0119cej szczeg\u00f3\u0142owych informacji znajdziesz w kolejnych filmach:<\/p>\n