\n Wymagania tego samouczka
\n<\/h5>\n
\n Aby utworzy\u0107 t\u0119 witryn\u0119, musisz pobra\u0107 okre\u015blone obrazy, wektory i czcionki. Ale nadal mo\u017cesz pod\u0105\u017ca\u0107 bez tych zasob\u00f3w. Aby odpowiednio uporz\u0105dkowa\u0107 zawarto\u015b\u0107, utw\u00f3rz osobny folder dla swojej witryny.\n<\/p>\n
- \n
- \n
\n Wejd\u017a na pexels.com<\/a> i pobierz:\n <\/p>\n
- \n
- \n
\n 4 obrazy o rozmiarze 1160 x 480 do pokazu slajd\u00f3w. Oto zrzut ekranu z pexels. Mo\u017cesz umie\u015bci\u0107 ten rozmiar w polu \u201erozmiar niestandardowy” na tej stronie.\n <\/p>\n<\/li>\n
- \n
\n 6 obraz\u00f3w o rozmiarze 271 x 208 do sekcji \u201eus\u0142ugi”.\n <\/p>\n<\/li>\n
- \n
\n 1 obraz o rozmiarze 1160 x 692 w sekcji \u201eKontakt”.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Wejd\u017a na freepik.com<\/a> i pobierz:\n <\/p>\n
- \n
- Jedna ikona krzy\u017cyka (mo\u017cesz edytowa\u0107 t\u0119 ikon\u0119 w programie Illustrator lub po prostu pobra\u0107 plik png z feepik).\n <\/li>\n
- 6 obraz\u00f3w twarzy do sekcji \u201e\u015awiadectwa”.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Wejd\u017a na subtelnepatterns.com<\/a> i pobierz wz\u00f3r 'brickwall' do dzia\u0142u 'Testimonials'.\n <\/p>\n<\/li>\n
- \n
\n Gdy b\u0119dziesz kontynuowa\u0107 ten samouczek, powiem ci, jak pobra\u0107 wymagane czcionki (mo\u017cna to zrobi\u0107 w programie Muse).\n <\/p>\n<\/li>\n
- \n
\n U\u017cyj fa\u0142szywego tekstu z lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n ZACZNIJMY!\n<\/p>\n
\n Przygotowanie przestrzeni roboczej i ustawienie nag\u0142\u00f3wka\n<\/p>\n
\n 1 Utw\u00f3rz now\u0105 witryn\u0119, przechodz\u0105c do Plik > Nowa witryna (Ctrl+N) i wprowad\u017a warto\u015bci, jak pokazano poni\u017cej. Nie zapomnij zaznaczy\u0107 pola wyboru \u201eSticky Footer”. Kliknij OK, aby przej\u015b\u0107 do trybu PLAN. Kliknij dwukrotnie A-Master znajduj\u0105cy si\u0119 na dole w szarym obszarze. Wszystko utworzysz na tej stronie wzorcowej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Wybierz narz\u0119dzie tekstowe z przybornika znajduj\u0105cego si\u0119 po lewej stronie okna aplikacji. Kliknij i przeci\u0105gnij na p\u0142\u00f3tnie lub stronie, aby utworzy\u0107 pole tekstowe. Przejd\u017a do panelu tekstowego (Ctrl+T), pod list\u0105 czcionek, poszukaj czcionek internetowych i wybierz \u201eDodaj czcionki internetowe” i pobierz nast\u0119puj\u0105ce czcionki:\n<\/p>\n
- \n
- Rametto Jeden\n <\/li>\n
- Kawa\u0142ek\n <\/li>\n
- Questrialny\n <\/li>\n
- Raleway\n <\/li>\n
- szlachetny\n <\/li>\n
- PT Bez\n <\/li>\n
- Ubuntu\n <\/li>\n
- Homar\n <\/li>\n<\/ul>\n
\n Po pobraniu tych czcionek usu\u0144 to pole tekstowe.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Przejd\u017a do panelu Warstwy znajduj\u0105cego si\u0119 po prawej stronie okna aplikacji. Je\u015bli go tam nie ma, przejd\u017a do menu Okno > Warstwy. Zobaczysz tam warstw\u0119 o nazwie Layer 1 (kolor niebieski). Jest to domy\u015blna warstwa i wszystko, co tworzysz lub umieszczasz na p\u0142\u00f3tnie, jest tam umieszczane. Kliknij dwukrotnie t\u0119 warstw\u0119 i nazwij j\u0105 jako \u201eNag\u0142\u00f3wek”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Wewn\u0105trz panelu warstw kliknij ma\u0142\u0105 ikon\u0119 zagi\u0119tego papieru znajduj\u0105c\u0105 si\u0119 w prawym dolnym rogu. Klikni\u0119cie tego spowoduje utworzenie nowej warstwy w kolorze czerwonym. Ponownie kliknij dwukrotnie t\u0119 warstw\u0119 i zmie\u0144 jej nazw\u0119 na \u201eZawarto\u015b\u0107”.\n<\/p>\n
\n 5 Kliknij i przeci\u0105gnij t\u0119 warstw\u0119 tre\u015bci i umie\u015b\u0107 j\u0105 poni\u017cej warstwy nag\u0142\u00f3wka. Zrobili\u015bmy to, poniewa\u017c chcemy, aby nasz nag\u0142\u00f3wek by\u0142 na szczycie wszystkiego.\n<\/p>\n
\n 6 Wybierz warstw\u0119 nag\u0142\u00f3wka i zwi\u0144 panel warstw.\n<\/p>\n
\n 7 Wybierz narz\u0119dzie Prostok\u0105t z przybornika lub naci\u015bnij \u201em” na klawiaturze.\n<\/p>\n
\n 8 Narysuj ma\u0142y prostok\u0105t na p\u0142\u00f3tnie i upewnij si\u0119, \u017ce kolor jego obramowania jest niebieski, co wskazuje, \u017ce ten obiekt znajduje si\u0119 w warstwie nag\u0142\u00f3wka.\n<\/p>\n
\n 9 Przejd\u017a do panelu Przekszta\u0142\u0107 znajduj\u0105cego si\u0119 w prawym g\u00f3rnym rogu okna aplikacji. Pozostaw szeroko\u015b\u0107 (W) i wpisz 50 w polu wysoko\u015bci wewn\u0119trznej (H) i naci\u015bnij enter. (Nie przejmuj si\u0119 warto\u015bciami X i Y).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 Na g\u00f3rze strony zobaczysz dwie linie koloru niebieskiego (pokazane na zrzucie ekranu poni\u017cej). S\u0105 to tak zwane \u201eprzewodniki”. Gdy najedziesz kursorem na pierwszy przewodnik, pojawi si\u0119 komunikat \u201eG\u00f3ra strony, przeci\u0105gnij, aby dostosowa\u0107 dope\u0142nienie nad stron\u0105”, a drugi komunikat \u201eNag\u0142\u00f3wek, przeci\u0105gnij, aby dostosowa\u0107 pozycj\u0119”. Ustawienie tych przewodnik\u00f3w na samym pocz\u0105tku jest bardzo wa\u017cne.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Teraz, gdy stworzyli\u015bmy prostok\u0105t o wysoko\u015bci H=50, kliknij, przytrzymaj i przeci\u0105gnij prowadnic\u0119 \u201eg\u00f3ry strony”, a\u017c pole, kt\u00f3re pojawi si\u0119 poni\u017cej po rozpocz\u0119ciu przeci\u0105gania, powie Y=50.\n<\/p>\n
\n 12 Podobnie przeci\u0105gnij powy\u017csz\u0105 prowadnic\u0119 nag\u0142\u00f3wka na prowadnic\u0119 g\u00f3rnej strony, a\u017c wy\u015bwietli si\u0119 Y=0. Zrobili\u015bmy to, aby skonfigurowa\u0107 nasz obszar nag\u0142\u00f3wka. (Mo\u017cesz poeksperymentowa\u0107 z umieszczeniem tych prowadnic w r\u00f3\u017cnych pozycjach, aby uzyska\u0107 r\u00f3\u017cne wyniki, ale na razie jest to dobre).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 Zaznacz prostok\u0105t, kt\u00f3ry w\u0142a\u015bnie utworzyli\u015bmy, przeci\u0105gnij go do obszaru nag\u0142\u00f3wka, tak aby pasowa\u0142.\n<\/p>\n
\n 14 Teraz musimy zwi\u0119kszy\u0107 szeroko\u015b\u0107 prostok\u0105ta do 100%, aby nag\u0142\u00f3wek wygl\u0105da\u0142 idealnie na ka\u017cdym rozmiarze ekranu. Rozwi\u0144 prostok\u0105t do obu kraw\u0119dzi i upewnij si\u0119, \u017ce \u0142\u0105czy si\u0119 z kraw\u0119dziami. Pojawi si\u0119 pomara\u0144czowy przewodnik, kt\u00f3ry zapewnia, \u017ce \u200b\u200bobiekt zosta\u0142 przyci\u0105gni\u0119ty. Gdy zwi\u0119kszysz szeroko\u015b\u0107 prostok\u0105ta, wyskakuj\u0105ce okienko powie W=100% lub W=1160, gdy dotrzesz do kraw\u0119dzi.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Pozostaw wybrany prostok\u0105t, kliknij s\u0142owo Wype\u0142nij pod menu aplikacji i ustaw opcje w nast\u0119puj\u0105cy spos\u00f3b. Wybierz pierwszy kolor jako Czarny, a drugi kolor: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Przejd\u017a do Plik > Zapisz witryn\u0119. Zapisz swoj\u0105 witryn\u0119 za ka\u017cdym razem, gdy dokonasz zmiany.\n<\/p>\n
\n 17 Utw\u00f3rz pole tekstowe i wpisz \u2013 \u201eexample.com” i zmie\u0144 jego formatowanie, jak pokazano poni\u017cej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Dopasuj rozmiar pola tekstowego tak, aby ca\u0142y tekst znajdowa\u0142 si\u0119 w jednym wierszu. Zaznacz to pole tekstowe i przeci\u0105gnij je nad czarny prostok\u0105t. Wyr\u00f3wnaj go do pionowego \u015brodka prostok\u0105ta (niebieska linia poinformuje Ci\u0119, kiedy jest wy\u015brodkowany) i przyci\u0105gnij go do lewej kraw\u0119dzi, jak pokazano poni\u017cej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Utw\u00f3rz pole tekstowe i wpisz \u2013 \u201eDom”. Zmie\u0144 jego formatowanie w nast\u0119puj\u0105cy spos\u00f3b. Odpowiednio dostosuj szeroko\u015b\u0107 i wysoko\u015b\u0107 pola tekstowego. Mo\u017cesz to zrobi\u0107 r\u00f3wnie\u017c z panelu transformacji. M\u00f3j ma szer.=52, wys.=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Skopiuj i wklej to pole tekstowe i wpisz \u201eUs\u0142ugi” w nowym polu. Dopasuj szeroko\u015b\u0107. Przeci\u0105gnij i umie\u015b\u0107 to pole tekstowe obok domu z bardzo ma\u0142\u0105 r\u00f3\u017cnic\u0105 mi\u0119dzy nimi. Ponownie, prowadnice pomog\u0105 ci we w\u0142a\u015bciwym ustawieniu.\n<\/p>\n
\n 21 Skopiuj i wklej to pole tekstowe jeszcze cztery razy i wpisz \u2013 Dlaczego my, Referencje, Kontakt z nami i Biuletyn. Umie\u015b\u0107 te pola tekstowe jedno po drugim w r\u00f3wnych odst\u0119pach obok \u201eus\u0142ug”.\n<\/p>\n
\n 22 Po wybraniu narz\u0119dzia do zaznaczania i naci\u015bni\u0119ciu klawisza Shift zaznacz wszystkie te pola tekstowe jeden po drugim. Przejd\u017a do panelu tekstowego, zmie\u0144 kolor na bia\u0142y. Wybierz grup\u0119 tych p\u00f3l i umie\u015b\u0107 j\u0105 nad prostok\u0105tem nag\u0142\u00f3wka. (Wy\u015brodkowany w pionie i wyr\u00f3wnany do prawego marginesu strony). To jest nasze Menu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 Ponownie, przy wybranym narz\u0119dziu do zaznaczania i wci\u015bni\u0119tym klawiszu Shift, zaznacz te pola tekstowe, prostok\u0105t i pole tekstowe example.com. W prawym g\u00f3rnym rogu zobaczysz opcj\u0119 o nazwie Pin. Kliknij jego g\u00f3rne \u015brodkowe pole, aby przypi\u0105\u0107 te elementy. Oznacza to, \u017ce gdy u\u017cytkownik b\u0119dzie przewija\u0142 Twoj\u0105 witryn\u0119, ten nag\u0142\u00f3wek pozostanie na g\u00f3rze. Jest to bardzo przydatne, poniewa\u017c u\u017cytkownik nie b\u0119dzie musia\u0142 przewija\u0107 do ko\u0144ca, aby wybra\u0107 inn\u0105 opcj\u0119.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Przejd\u017a do panelu Warstwy i zablokuj warstw\u0119 nag\u0142\u00f3wka. Mo\u017cna to zrobi\u0107, klikaj\u0105c wewn\u0105trz pola po lewej stronie nazwy warstwy. Gdy zablokujesz warstw\u0119 lub dowolny obiekt, nie wp\u0142ynie to na jego wygl\u0105d, ale nie b\u0119dziesz m\u00f3g\u0142 wybra\u0107 tych element\u00f3w, chyba \u017ce je odblokujesz. Zrobili\u015bmy to, aby ca\u0142kowicie wyeliminowa\u0107 ryzyko przypadkowego przeniesienia przedmiot\u00f3w.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 Wybierz warstw\u0119 zawarto\u015bci i zwi\u0144 panel warstw.\n<\/p>\n
\n Ustanawianie pokazu slajd\u00f3w
\n<\/h3>\n\n 26 Przejd\u017a do biblioteki wid\u017cet\u00f3w znajduj\u0105cej si\u0119 po prawej stronie okna aplikacji. Je\u015bli go tam nie ma, przejd\u017a do menu Okno > wybierz Biblioteka wid\u017cet\u00f3w. Rozwi\u0144 sekcj\u0119 \u201epokazy slajd\u00f3w” i wybierz \u201ePuste”. Kliknij i przeci\u0105gnij ten obiekt na p\u0142\u00f3tno. Pojawi si\u0119 czarne okno z opcjami pokazu slajd\u00f3w.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Upewnij si\u0119, \u017ce opcje s\u0105 ustawione tak, jak pokazano na poni\u017cszym obrazku. W sekcji cz\u0119\u015bci na dole odznacz pola wyboru Poprzedni, Nast\u0119pny, Podpisy i Licznik. Nic z tego nie jest nam potrzebne.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Kliknij w dowolnym miejscu obszaru roboczego, aby znikn\u0119\u0142o to wyskakuj\u0105ce okienko. Teraz ostro\u017cnie kliknij wewn\u0105trz pokazu slajd\u00f3w. Klikaj\u0105c go raz, zobaczysz, \u017ce \u201ePokaz slajd\u00f3w” zosta\u0142 zapisany w \u201eTypie bie\u017c\u0105cego obszaru zaznaczenia”. Znajduje si\u0119 w lewym g\u00f3rnym rogu pod menu aplikacji. W tym obszarze mo\u017cesz zobaczy\u0107, co wybra\u0142e\u015b. Jest to bardzo przydatna funkcja, gdy uk\u0142ad staje si\u0119 skomplikowany. Kliknij ponownie, a zobaczysz, \u017ce w opisie jest napisane \u201eObraz bohatera”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 R\u0119cznie zwi\u0119ksz szeroko\u015b\u0107 obrazu bohatera, rozszerzaj\u0105c go od \u015brodka. Przyci\u0105gnij go do obu kraw\u0119dzi strony (aby mia\u0142a 100% szeroko\u015bci) i do do\u0142u prostok\u0105ta nag\u0142\u00f3wka, jak pokazano poni\u017cej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Przejd\u017a do panelu transformacji i wstaw H=500.\n<\/p>\n
\n 31 Ponownie otw\u00f3rz opcje pokazu slajd\u00f3w, klikaj\u0105c ma\u0142e niebieskie k\u00f3\u0142ko z bia\u0142ym prostok\u0105tem w \u015brodku (znajduje si\u0119 ono w prawym g\u00f3rnym rogu pokazu slajd\u00f3w).\n<\/p>\n
\n 32 Kliknij ikon\u0119 folderu obok opcji \u201eDodaj obrazy\u2026”, wyszukaj obrazy, kt\u00f3re pobrali\u015bmy do pokazu slajd\u00f3w. Wybierz wszystkie cztery i kliknij otw\u00f3rz.\n<\/p>\n
\n 33 Przejd\u017a do Plik > wybierz \u201ePodgl\u0105d strony w przegl\u0105darce” lub Ctrl+Shift+E i zobacz, jak b\u0119dzie wygl\u0105da\u0142 pokaz slajd\u00f3w, gdy strona b\u0119dzie ju\u017c dost\u0119pna. Zalecam zapami\u0119tanie skr\u00f3t\u00f3w klawiaturowych, kt\u00f3rych u\u017cywam w tym samouczku. W ten spos\u00f3b przyspieszysz proces projektowania.\n<\/p>\n
\n Tworzenie sekcji \u201eUs\u0142ugi”.
\n<\/h3>\n\n 34 Teraz, gdy mamy ustawiony nag\u0142\u00f3wek i pokaz slajd\u00f3w, nadszed\u0142 czas na utworzenie sekcji dla ka\u017cdej pozycji, kt\u00f3r\u0105 dodali\u015bmy do naszego menu. Zacznijmy od \u201eus\u0142ug”. Utw\u00f3rz pole tekstowe i wpisz w nim us\u0142ugi (wszystkie ma\u0142e litery) i zmie\u0144 jego formatowanie w nast\u0119puj\u0105cy spos\u00f3b.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Kliknij dwukrotnie wewn\u0105trz tego pola tekstowego i wybierz tylko liter\u0119 \u201eI”. Zmie\u0144 czcionk\u0119 na \u201eChunk” i pozostaw wszystko bez zmian. Dostosuj wysoko\u015b\u0107 tego pola tekstowego. Kiedy zmniejszysz jego wysoko\u015b\u0107, w pewnym miejscu pojawi si\u0119 przerywana linia i pude\u0142ko nie b\u0119dzie si\u0119 skraca\u0107. Nie zmniejszaj p\u00f3\u017aniej rozmiaru. Jest to najni\u017csza mo\u017cliwa wysoko\u015b\u0107 przy tym rozmiarze czcionki.\n<\/p>\n
\n 36 Po zaznaczeniu pola tekstowego przejd\u017a do panelu przekszta\u0142cania i ustaw k\u0105t obrotu na -90 stopni (90 stopni minus).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Przenie\u015b pole tekstowe na lew\u0105 stron\u0119 p\u0142\u00f3tna, jak pokazano poni\u017cej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Mo\u017cesz troch\u0119 pomniejszy\u0107, aby zobaczy\u0107 ca\u0142\u0105 zawarto\u015b\u0107 na raz lub odpowiednio dopasowa\u0107 obiekty. Aby to zrobi\u0107, spr\u00f3buj wpisa\u0107 inne warto\u015bci (mniej ni\u017c 100%) w sekcji poziomu powi\u0119kszenia u g\u00f3ry. Po wpisaniu warto\u015bci naci\u015bnij enter.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Przejd\u017a do Plik > wybierz \u201eMiejsce”. Wybierz pierwszy obraz, kt\u00f3ry pobrali\u015bmy do naszej sekcji us\u0142ug. Kliknij otw\u00f3rz.\n<\/p>\n
\n 40 Kursor zmieni sw\u00f3j wygl\u0105d na pistolet za\u0142adowany obrazem. Kliknij p\u0142\u00f3tno, aby je umie\u015bci\u0107. Przesu\u0144 i umie\u015b\u0107 go tak, aby by\u0142 wyr\u00f3wnany z g\u00f3rn\u0105 kraw\u0119dzi\u0105 pola tekstowego \u201eus\u0142ugi”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Skopiuj ten obraz i wklej go dwukrotnie. Wybierz te wklejone obrazy jeden po drugim i wyr\u00f3wnaj je w r\u00f3wnych odst\u0119pach z pierwszym obrazem.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 Wybierz drugi obraz, kliknij go prawym przyciskiem myszy i wybierz \u201ezast\u0105p obraz” (jest to ostatnia opcja). Wyszukaj drugi obraz i kliknij otw\u00f3rz. Zast\u0105p r\u00f3wnie\u017c trzeci obraz.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Utw\u00f3rz pola tekstowe na informacje o us\u0142ugach i zastosuj formatowanie nag\u0142\u00f3wk\u00f3w i akapit\u00f3w, jak opisano poni\u017cej. Prowadnice pomog\u0105 ci odpowiednio je wyr\u00f3wna\u0107.\n<\/p>\n
- \n
- \n Nag\u0142\u00f3wki:<\/strong> czcionka: Raleway Bold, rozmiar = 20, kolor: czarny, wyr\u00f3wnanie do lewej i 100% interlinii.\n <\/li>\n
- \n Dla akapit\u00f3w:<\/strong> czcionka: Questrial, rozmiar=15, kolor: R=67 G=67 B=67, wyr\u00f3wnanie do lewej i 120% interlinii.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Umie\u015b\u0107 jeszcze trzy obrazy, tak jak to zrobili\u015bmy w poprzednich krokach, i podobnie utw\u00f3rz dla nich tekst opisu. Powiniene\u015b mie\u0107 nast\u0119puj\u0105cy wynik.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Wynik ko\u0144cowy sekcji \u201eUs\u0142ugi”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Tworzenie sekcji \u201eDlaczego my”.
\n<\/h3>\n\n 45 Nast\u0119pna jest sekcja \u201eDlaczego my”. Ten jest troch\u0119 skomplikowany. Zachowaj ostro\u017cno\u015b\u0107 przy wybieraniu obiekt\u00f3w. Najpierw utw\u00f3rz prostok\u0105t o szeroko\u015bci 100% i H=996. Wype\u0142nij go kolorem (R=47, G=48, B=55). Kliknij prawym przyciskiem myszy ten prostok\u0105t> U\u0142\u00f3\u017c> wybierz \u201eprze\u015blij do ty\u0142u” (nie wysy\u0142aj do ty\u0142u).\n<\/p>\n
\n 46 Rozszerz sw\u00f3j obszar roboczy, klikaj\u0105c i przeci\u0105gaj\u0105c prowadnic\u0119 \u201ed\u00f3\u0142 strony”, aby mie\u0107 wystarczaj\u0105co du\u017co miejsca na tworzenie tre\u015bci, kt\u00f3re zostan\u0105 umieszczone na w\u0142a\u015bnie utworzonym prostok\u0105cie.\n<\/p>\n
\n 47 Przewi\u0144 w d\u00f3\u0142 do bia\u0142ej pustej przestrzeni i utw\u00f3rz kolejny prostok\u0105t o wymiarach W=351 i H=351. Wype\u0142nij go bia\u0142ym kolorem i bez obrysu.\n<\/p>\n
\n 48 Przejd\u017a do opcji 'promie\u0144 naro\u017ca' (znajduje si\u0119 obok obrysu pod menu aplikacji). Kliknij wszystkie rogi, aby je zaokr\u0105gli\u0107 i umie\u015b\u0107 500 w pude\u0142ku obok.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 B\u0119dziesz mia\u0142 kr\u0105g. Przeci\u0105gnij ten okr\u0105g na prostok\u0105t i dostosuj go w nast\u0119puj\u0105cy spos\u00f3b. Obok promienia naro\u017cnika znajduje si\u0119 opcja o nazwie \u201eKrycie”. Po zaznaczeniu ko\u0142a wpisz 14 w tym polu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Utw\u00f3rz pole tekstowe i wpisz \u2013 dlaczego my (wszystkie ma\u0142e). Zmie\u0144 czcionk\u0119 na Rammetto One, size=100, Color R=241 G=244 B=247, interlinia 100% i wyr\u00f3wnaj j\u0105 do \u015brodka. Umie\u015b\u0107 to pole tekstowe wewn\u0105trz okr\u0119gu i odpowiednio je wyr\u00f3wnaj.\n<\/p>\n
\n 51 Teraz utworzymy linie przerywane. Utw\u00f3rz prostok\u0105t o wymiarach W=9 i H=9, bez wype\u0142nienia. Kliknij s\u0142owo \u201eobrys” obok wype\u0142nienia. Wybierz kolor R=241 G=244 B=247. Kliknij ikon\u0119 \u0142a\u0144cucha, aby go zerwa\u0107 i wpisz \u201e1″ w wadze dolnego uderzenia.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Skopiuj ten prostok\u0105t obrysu z jednej strony i wklej go kilka razy. U\u0142\u00f3\u017c je w jednej linii (powi\u0119ksz troch\u0119 za pomoc\u0105 narz\u0119dzia powi\u0119kszania, je\u015bli trudno ci zobaczy\u0107 te prostok\u0105ty). Po uzyskaniu po\u017c\u0105danej d\u0142ugo\u015bci linii przerywanej zaznacz wszystkie te prostok\u0105ty, kliknij prawym przyciskiem myszy i wybierz \u201eGrupuj”. Skopiuj i wklej t\u0119 grup\u0119 dla innych przerywanych linii.\n<\/p>\n
\n 53 W przypadku nachylonych linii przerywanych spr\u00f3buj ustawi\u0107 r\u00f3\u017cne k\u0105ty obrotu w panelu transformacji. U\u017cy\u0142em 150 i 30 stopni. B\u0119dziesz musia\u0142 usun\u0105\u0107 niekt\u00f3re prostok\u0105ty z tej grupy, aby mie\u0107 kr\u00f3tsze d\u0142ugo\u015bci. Dostosuj te linie w pobli\u017cu okr\u0119gu, jak pokazano poni\u017cej.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Teraz dodamy troch\u0119 wi\u0119cej tekstu dla numer\u00f3w, nag\u0142\u00f3wk\u00f3w i opis\u00f3w. U\u017cyj nast\u0119puj\u0105cych ustawie\u0144 dla ka\u017cdego z nich i dostosuj te pola tekstowe, jak pokazano poni\u017cej.\n<\/p>\n
- \n
- \n Dla liczb:<\/strong> Czcionka=Rammetto One, Kolor: R=196 G=214 B=193, wyr\u00f3wnany do \u015brodka i 100% interlinii, rozmiar: 200 (dla numeru \u201e1″), 160 (dla numer\u00f3w \u201e2″ i \u201e3″) i 120 (dla numer\u00f3w \u201e4″ i \u201e5″).\n <\/li>\n
- \n Dla nag\u0142\u00f3wk\u00f3w:<\/strong> czcionka=Raleway Bold, rozmiar=18, kolor:bia\u0142y, wyr\u00f3wnanie do \u015brodka i 100% interlinii.\n <\/li>\n
- \n Dla akapit\u00f3w:<\/strong> czcionka=Questrial, rozmiar=16, kolor: R=241 G=244 B=247, wyr\u00f3wnanie do \u015brodka i 120% interlinii.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Ostateczny wynik sekcji \u201eDlaczego my”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Tworzenie sekcji \u201eReferencje”.
\n<\/h3>\n\n 55 Ponownie stw\u00f3rz troch\u0119 miejsca do pracy, przeci\u0105gaj\u0105c doln\u0105 cz\u0119\u015b\u0107 prowadnicy strony. Zr\u00f3b prostok\u0105t o szeroko\u015bci 100% i H=486.\n<\/p>\n
\n 56 Po zaznaczeniu prostok\u0105ta kliknij s\u0142owo \u201eWype\u0142nij” i kliknij \u201eDodaj obraz” obok opcji obrazu. Wyszukaj pobrany przez nas obraz wzoru ceg\u0142y. W opcji Dopasowanie wybierz \u201eS\u0105siaduj\u0105co”, aby wype\u0142ni\u0107 ca\u0142y prostok\u0105t t\u0105 tekstur\u0105.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Przewi\u0144 w d\u00f3\u0142 do pustego miejsca i utw\u00f3rz pole tekstowe o wymiarach W=406, H=289 za pomoc\u0105 panelu transformacji. Wpisz \u2013 \u201eco inni maj\u0105 do powiedzenia” (wszystkie ma\u0142e). Zmie\u0144 jego czcionk\u0119 na Rammetto One, rozmiar=70, wyr\u00f3wnaj do lewej, warto\u015bci kolor\u00f3w R=37 G=37 B=37 i interlinia=100%.\n<\/p>\n
\n 58 Po zaznaczeniu tego pola tekstowego kliknij obrys s\u0142owa, zastosuj obrys prawy o grubo\u015bci jeden i koloru czarnego. Przeci\u0105gnij to pole tekstowe i umie\u015b\u0107 je nad prostok\u0105tem ze wzorem ceglanej \u015bciany.\n<\/p>\n
\n 59 Kolejnym krokiem jest dodanie referencji klient\u00f3w. W tym celu u\u017cyjemy obraz\u00f3w wektorowych okr\u0105g\u0142ej twarzy, kt\u00f3re pobrali\u015bmy z freepik.com. Ponownie zejd\u017a do bia\u0142ej pustej przestrzeni, aby\u015b m\u00f3g\u0142 odpowiednio dostosowa\u0107 swoj\u0105 kompozycj\u0119.\n<\/p>\n
\n 60 Przejd\u017a do biblioteki wid\u017cet\u00f3w i przeci\u0105gnij \u201eBlank” z sekcji kompozycji na p\u0142\u00f3tno. Kliknij znak plus, aby doda\u0107 trzy kolejne wyzwalacze. Ostro\u017cnie wybierz pierwszy wyzwalacz i potwierd\u017a sw\u00f3j wyb\u00f3r za pomoc\u0105 bie\u017c\u0105cego obszaru wyboru, kt\u00f3ry m\u00f3wi wyzwalacz. A tu\u017c obok znajduje si\u0119 opcja o nazwie \u201eAktywny”. Kliknij to, aby rozwin\u0105\u0107. Wybierz stan \u201eNormalny” i wybierz \u201ebez wype\u0142nienia” i \u201ebez obrysu” dla tego stanu. Powt\u00f3rz to dla ka\u017cdego stanu Rollover, Mouse Down i Active. Przejd\u017a do panelu transformacji z wybranym pierwszym wyzwalaczem i ustaw W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Powt\u00f3rz poprzedni krok dla ka\u017cdego wyzwalacza, jaki mamy. Oznacza to, \u017ce nie stosuj wype\u0142nienia ani obrysu dla ka\u017cdego stanu i przekszta\u0142\u0107 wyzwalacze do rozmiaru 10 x 10. Przesu\u0144 wyzwalacze bli\u017cej siebie.\n<\/p>\n
\n 62 Teraz. Dostosujemy cele dla ka\u017cdego z tych wyzwalaczy. Du\u017cy prostok\u0105t, kt\u00f3ry widzisz, jest celem. Wybierz pierwszy wyzwalacz i wybierz jego normalny stan z panelu stan\u00f3w. Nast\u0119pnie wybierz cel dla tego wyzwalacza i nie stosuj wype\u0142nienia ani obrysu dla ka\u017cdego stanu. Nast\u0119pnie przejd\u017a do panelu transformacji i ustaw cel W=360, H=370.\n<\/p>\n
\n 63 Powt\u00f3rz poprzedni krok dla ka\u017cdego celu. Tylko upewnij si\u0119, \u017ce najpierw wybra\u0142e\u015b wyzwalacz, ustawi\u0142e\u015b go w normalnym stanie, a nast\u0119pnie wybra\u0142e\u015b odpowiedni cel w normalnym stanie, a nast\u0119pnie nie zastosowa\u0142e\u015b wype\u0142nienia ani obrysu. Nie b\u0119dziesz musia\u0142 zmienia\u0107 rozmiaru ka\u017cdego celu. Po prostu zr\u00f3b to dla jednego, a zostanie to zastosowane do wszystkich.\n<\/p>\n
\n 64 Teraz zaczniemy dodawa\u0107 tre\u015b\u0107 do tej kompozycji. Przejd\u017a do Plik > Umie\u015b\u0107 i otw\u00f3rz pierwszy obraz twarzy i umie\u015b\u0107 go poza kompozycj\u0105. Przeci\u0105gnij ten obraz i umie\u015b\u0107 go teraz w kompozycji. Zobaczysz, \u017ce w prawym g\u00f3rnym rogu pojawi si\u0119 niebieskie k\u00f3\u0142ko, co oznacza, \u017ce \u200b\u200bten obraz jest teraz cz\u0119\u015bci\u0105 kompozycji.\n<\/p>\n
\n 65 Utw\u00f3rz trzy pola tekstowe \u2013 jedno na imi\u0119 i nazwisko osoby, jedno na jej oznaczenie i jedno na o\u015bwiadczenie lub recenzj\u0119. Zastosuj formatowanie zgodnie z poni\u017cszym opisem i umie\u015b\u0107 te pola tekstowe w kompozycji. Tylko upewnij si\u0119, \u017ce ka\u017cdy z nich ma niebieskie k\u00f3\u0142ko w rogu.\n<\/p>\n
- \n
- \n Imi\u0119 i nazwisko osoby:<\/strong> Czcionka: Nobile Medium Italic, rozmiar = 18, Kolor: R = 37 G = 37 B = 37, wyr\u00f3wnana do \u015brodka i 100% interlinii.\n <\/li>\n
- \n Oznaczenie:<\/strong> Czcionka: Nobile, rozmiar = 15, Kolor: R = 37 G = 37 B = 37, wyr\u00f3wnana do \u015brodka i 100% z przodu.\n <\/li>\n
- \n Dla O\u015bwiadcze\u0144 (z cudzys\u0142owami):<\/strong> Czcionka: PT Sans Italic, rozmiar=18, kolor: R=69 G=64 B=68, wyr\u00f3wnana do \u015brodka i 100% interlinii.\n <\/li>\n<\/ul>\n
\n 66 Po wybraniu obrazu twarzy, zastosuj poci\u0105gni\u0119cie o wadze 4 z ka\u017cdej strony, kolor: bia\u0142y, zaokr\u0105glij wszystkie rogi i zwi\u0119ksz promie\u0144, a\u017c owinie si\u0119 wok\u00f3\u0142 obrazu. U\u017cywam 100 jako promieni naro\u017cnych.\n<\/p>\n
\n 67 Przejd\u017a do zak\u0142adki \u201eEfekty” (znajduj\u0105cej si\u0119 obok opcji zaokr\u0105glenia rog\u00f3w) i zaznacz pole wyboru \u201ecie\u0144”. Umie\u015b\u0107 warto\u015bci jako; Kolor=Czarny, Krycie=37%, Rozmycie=12, K\u0105t=78 i Odleg\u0142o\u015b\u0107=5.\n<\/p>\n
\n 68 Powt\u00f3rz poprzednie kroki (od 64 do 67) dla dodania tre\u015bci do ka\u017cdego celu i zapisz zmiany (Ctrl+S). Umie\u015b\u0107 t\u0119 kompozycj\u0119 na prostok\u0105cie ze wzorem ceglanego muru.\n<\/p>\n
\n 69 Teraz zaznacz ca\u0142\u0105 kompozycj\u0119 (upewnij si\u0119 z aktualnym obszarem zaznaczenia) i rozwi\u0144 jej opcje klikaj\u0105c w ma\u0142e niebieskie k\u00f3\u0142ko. Ustaw opcje, jak pokazano poni\u017cej. Naci\u015bnij Ctrl + Shift + E i sprawd\u017a, czy dzia\u0142a dobrze.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Powiniene\u015b otrzyma\u0107 nast\u0119puj\u0105cy wynik.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Ostateczny wynik sekcji \u201e\u015awiadectwa”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Tworzenie sekcji \u201eKontakt”.
\n<\/h3>\n\n 71 Nast\u0119pna sekcja to Skontaktuj si\u0119 z nami. W tej sekcji dodamy obraz t\u0142a, formularz i kilka p\u00f3l tekstowych. Najpierw utw\u00f3rz prostok\u0105t o szeroko\u015bci 100% i H=692. Wype\u0142nij go obrazem, kt\u00f3ry pobrali\u015bmy dla tej sekcji i wybierz \u201eskala do wype\u0142nienia” w obszarze Dopasowanie. Zmie\u0144 jego krycie na 72%.\n<\/p>\n
\n 72 Utw\u00f3rz kolejny prostok\u0105t o tej samej szeroko\u015bci i wysoko\u015bci i wype\u0142nij go gradientem. Umie\u015b\u0107 warto\u015bci gradientu jako; Krycie=90% do 46%, Kolor: Czarny do R=69 G=64 B=68, Punkt skupienia=66%, Kierunek: Poziomy i Rozmiar: automatyczny. Umie\u015b\u0107 ten prostok\u0105t nad obrazem i upewnij si\u0119, \u017ce zatrza\u015bnie si\u0119 przy ka\u017cdej kraw\u0119dzi.\n<\/p>\n
\n 73 Przejd\u017a do biblioteki wid\u017cet\u00f3w. W formularzach wybierz \u201eprosty kontakt” i przeci\u0105gnij go na kanw\u0119. Pojawi si\u0119 okno z opcjami formularza. Wpisz nazw\u0119 formularza: Formularz kontaktowy, Wy\u015blij e-mail na adres: wpisz sw\u00f3j adres e-mail, na kt\u00f3ry chcesz otrzymywa\u0107 informacje wprowadzane przez odwiedzaj\u0105cych, Po wys\u0142aniu: wybierz opcj\u0119 \u201epozosta\u0144 na bie\u017c\u0105cej stronie”. Ostatnia opcja to \u201eEdytuj razem”. Upewnij si\u0119, \u017ce jest zaznaczone. W ten spos\u00f3b b\u0119dziesz musia\u0142 wprowadzi\u0107 zmiany tylko w jednym polu, a zostan\u0105 one zastosowane we wszystkich. Kliknij dowolne miejsce na p\u0142\u00f3tnie, aby znikn\u0119\u0142o pole opcji.\n<\/p>\n
\n 74 Wybierz formularz. Kliknij etykiet\u0119 \u201eNazwa” i klikaj j\u0105 ponownie, a\u017c zobaczysz napis \u201eEtykieta” w bie\u017c\u0105cym obszarze wyboru. Naci\u015bnij usu\u0144. Powt\u00f3rz t\u0119 czynno\u015b\u0107 dla etykiet wiadomo\u015bci e-mail i wiadomo\u015bci i usu\u0144 je.\n<\/p>\n
\n 75 Wybierz formularz ponownie i wybierz pierwsze pole formularza z napisem \u201eWprowad\u017a nazw\u0119”, a\u017c zobaczysz \u201eWprowadzanie tekstu” w bie\u017c\u0105cym obszarze wyboru. Zastosuj brak wype\u0142nienia i obrys dolny (waga jeden i kolor bia\u0142y) dla ka\u017cdego stanu, czyli od Pusty do Fokus. Jako stan b\u0142\u0119du wybierz brak wype\u0142nienia i doln\u0105 obrys koloru czerwonego o wadze 1.\n<\/p>\n
\n 76 Nast\u0119pnie przy zaznaczonym polu e-mail > ponownie wybierz jego pusty stan i dostosuj czcionk\u0119 i kolor tekstu dla ka\u017cdego stanu, jak opisano poni\u017cej.\n<\/p>\n
- \n
- \n Dla stanu pustego, niepustego i skupionego:<\/strong> Czcionka: Questrial, rozmiar=14, kolor: bia\u0142y, wyr\u00f3wnanie do lewej, 100% interlinii i bez kursywy.\n <\/li>\n
- \n Dla stanu najazdu:<\/strong> po prostu zmie\u0144 kolor tekstu na R=196 G=196 B=196 i bez kursywy.\n <\/li>\n
- \n Dla stanu b\u0142\u0119du:<\/strong> zmie\u0144 kolor tekstu na czerwony i bez kursywy.\n <\/li>\n<\/ul>\n
\n 77 Kliknij i wybierz przycisk Prze\u015blij. Wybierz jego normalny stan, zaokr\u0105glij wszystkie rogi o 40 promieni i zwi\u0119ksz jego szeroko\u015b\u0107, jak pokazano na zrzucie ekranu poni\u017cej. Zmie\u0144 czcionk\u0119 na Raleway Bold, rozmiar = 20, wyr\u00f3wnanie do \u015brodka, kolor: R = 241 G = 244 B = 247, interlinia: dostosuj tekst \u201eprze\u015blij” na \u015brodku przycisku, zwi\u0119kszaj\u0105c t\u0119 \u200b\u200bwarto\u015b\u0107 (u\u017cy\u0142em 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Dla stan\u00f3w najechania i wci\u015bni\u0119cia myszy zmie\u0144 kolor obrysu i kolor tekstu na szary (R=127 G=127 B=127). Na koniec dla stanu \u201eprzesy\u0142anie w toku” zmie\u0144 obrys i kolor tekstu na b\u0142\u0119kitny (R=41 G=171 B=226).\n<\/p>\n
\n 79 Gdy wybierzesz stan \u201ewysy\u0142anie w toku” dla tego przycisku wysy\u0142ania, zobaczysz inne pole tekstowe z napisem \u201eprzesy\u0142anie formularza\u2026”. Zaznacz to pole i wybierz jego stan \u201ewysy\u0142anie w toku”. Zmie\u0144 czcionk\u0119 na Questrial, rozmiar=14, kolor: szary, wyr\u00f3wnany do \u015brodka i bez kursywy. Wybierz stan \u201eprze\u015blij pomy\u015blnie” i zmie\u0144 kolor tekstu na b\u0142\u0119kitny (bez kursywy). Wybierz jego stan \u201eb\u0142\u0105d przesy\u0142ania” i zmie\u0144 kolor tekstu na czerwony (bez kursywy). Formularz kontaktowy jest gotowy.\n<\/p>\n
\n 80 Zr\u00f3b dwa pola tekstowe. Wpisz \u2013 skontaktuj si\u0119 z nami i w drugiej linii wpisz \u201ewszystkie pola s\u0105 wymagane”. W przypadku kontaktu u\u017cyj czcionki: Rammetto One, rozmiar=60, kolor: R=241 G=244 B=247, interlinia=100% i wyr\u00f3wnanie do lewej. Dla tekstu \u201ewszystkie pola s\u0105 wymagane” u\u017cyj czcionki: Nobile italic, rozmiar=26, kolor: R=241 G=244 B=247, interlinia=100% i wyr\u00f3wnanie do lewej. W tym polu tekstowym zastosuj doln\u0105 kresk\u0119 o grubo\u015bci 1 i pokoloruj na bia\u0142o.\n<\/p>\n
\n 81 Wpisz akapit w drugim polu tekstowym, kt\u00f3re utworzyli\u015bmy. U\u017cyj czcionki: PT Sans Italic, rozmiar=14, kolor: R=241 G=244 B=247, interlinia=120%, wyr\u00f3wnanie do lewej i spacja przed=15.\n<\/p>\n
\n 82 Umie\u015b\u0107 te pola tekstowe i formularz na obrazie, kt\u00f3ry umie\u015bcili\u015bmy. Wyreguluj je w nast\u0119puj\u0105cy spos\u00f3b.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Utw\u00f3rz jeszcze jedno pole tekstowe na niekt\u00f3re informacje kontaktowe, takie jak adres biura, adres e-mail i numery telefon\u00f3w. Umie\u015b\u0107 to pole tekstowe na obrazie. Powiniene\u015b mie\u0107 nast\u0119puj\u0105cy wynik.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Wynik ko\u0144cowy sekcji \u201eKontakt”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Tworzenie stopki
\n<\/h3>\n\n 84 Ostatnia sekcja to stopka. Na dole znajduj\u0105 si\u0119 trzy prowadnice, a mianowicie \u2013 d\u00f3\u0142 strony, stopka i d\u00f3\u0142 przegl\u0105darki. Teraz musisz upewni\u0107 si\u0119, \u017ce prowadnica \u201ed\u00f3\u0142 strony” \u0142\u0105czy si\u0119 z do\u0142em sekcji kontaktowej, a prowadnica \u201estopka” pokrywa si\u0119 z prowadnic\u0105 \u201ed\u00f3\u0142 strony”. Nast\u0119pnie mo\u017cesz przeci\u0105gn\u0105\u0107 prowadnic\u0119 \u201edolnej cz\u0119\u015bci przegl\u0105darki” w d\u00f3\u0142, aby dostosowa\u0107 miejsce potrzebne na stopk\u0119.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Utw\u00f3rz dwa prostok\u0105ty o szeroko\u015bci 100% i H=168 dla pierwszego i H=37 dla drugiego. Zmie\u0144 kolor wype\u0142nienia du\u017cego prostok\u0105ta na bia\u0142y i u\u017cyj R=47, G=48, B=55 dla kr\u00f3tszego.\n<\/p>\n
\n 86 Wybierz pierwszy prostok\u0105t i spr\u00f3buj umie\u015bci\u0107 go w obszarze stopki. Nie p\u00f3jdzie tam. Zamiast tego dolna cz\u0119\u015b\u0107 prowadnicy strony zacznie si\u0119 rozszerza\u0107 w d\u00f3\u0142. Aby uczyni\u0107 ten prostok\u0105t elementem stopki, zaznacz pole wyboru \u201eStopka” znajduj\u0105ce si\u0119 w prawym g\u00f3rnym obszarze okna aplikacji. Zr\u00f3b to r\u00f3wnie\u017c dla drugiego prostok\u0105ta.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Teraz umie\u015b\u0107 te prostok\u0105ty w obszarze stopki i upewnij si\u0119, \u017ce du\u017cy prostok\u0105t znajduje si\u0119 nieco powy\u017cej prowadnicy stopki. Dolna cz\u0119\u015b\u0107 kolorowego prostok\u0105ta musi przylega\u0107 do dolnej kraw\u0119dzi prowadnicy przegl\u0105darki. W przeciwnym razie zobaczysz ma\u0142\u0105 bia\u0142\u0105 szczelin\u0119 po stopce, kt\u00f3ra nie wygl\u0105da \u0142adnie.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Utw\u00f3rz pola tekstowe dla stopki i wpisz, co chcesz. Po prostu zaznacz pole wyboru \u201estopka” dla p\u00f3l tekstowych, kt\u00f3re chcesz doda\u0107. Doda\u0142em tekst zawieraj\u0105cy wy\u0142\u0105czenie odpowiedzialno\u015bci i informacje o prawach autorskich.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 Odznak\u0119 \u201eMade with Adobe Muse CC” mo\u017cna doda\u0107 z biblioteki wid\u017cet\u00f3w w sekcji spo\u0142eczno\u015bciowej. Mo\u017cesz r\u00f3wnie\u017c doda\u0107 linki do swojej strony na Facebooku, Twitterze, Google+, LinkedIn, Pinterest, kanale YouTube lub link vimeo.\n<\/p>\n
\n 90 Symbol praw autorskich i wiele innych symboli widocznych obok tekstu Wszelkie prawa zastrze\u017cone mo\u017cna doda\u0107 z panelu \u201eGlify” znajduj\u0105cego si\u0119 po prawej stronie okna aplikacji. Je\u015bli go tam nie ma, przejd\u017a do menu Okno> wybierz Glify.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Tworzenie sekcji \u201eNewsletter”.
\n<\/h3>\n\n 91 Do tej pory zaprojektowali\u015bmy sekcje dla wszystkich pozycji menu opr\u00f3cz jednej, czyli \u201eNewslettera”. Zr\u00f3bmy z tym co\u015b ciekawego. Zapami\u0119taj symbol krzy\u017cyka, kt\u00f3ry pobrali\u015bmy, b\u0119dzie on u\u017cywany tutaj (mo\u017cesz go nie pobra\u0107, nadal mo\u017cesz \u015bledzi\u0107). Najpierw zaznacz pole tekstowe Newsletter i zanotuj jego szeroko\u015b\u0107 i wysoko\u015b\u0107 z panelu transformacji. M\u00f3j ma 81×17.\n<\/p>\n
\n 92 Teraz otw\u00f3rz bibliotek\u0119 wid\u017cet\u00f3w i przeci\u0105gnij \u201eLightbox Display” z sekcji kompozycji. Usu\u0144 pierwsze dwa wyzwalacze (znajduj\u0105ce si\u0119 na g\u00f3rze) i usu\u0144 wszystkie napisy (znajduj\u0105ce si\u0119 na dole). Ustaw rozmiar trzeciego wyzwalacza taki sam jak w polu tekstowym biuletynu, czyli 81 x 17. Zmie\u0144 jego wype\u0142nienie i obrys na brak dla wszystkich stan\u00f3w.\n<\/p>\n
\n 93 Przeci\u0105gnij pole tekstowe newslettera i umie\u015b\u0107 je w tym wyzwalaczu w taki spos\u00f3b, aby wszystkie kraw\u0119dzie pola tekstowego pokrywa\u0142y si\u0119 z kraw\u0119dziami wyzwalacza. Teraz przeci\u0105gnij t\u0119 grup\u0119 i umie\u015b\u0107 j\u0105 ponownie w menu, w kt\u00f3rym by\u0142a wcze\u015bniej umieszczona. To, co zrobili\u015bmy, to zastosowanie linku do pola tekstowego Newsletter. Gdy u\u017cytkownik go kliknie, witryna zniknie i pojawi si\u0119 cel.\n<\/p>\n
\n 94 Nast\u0119pnym krokiem jest dostosowanie naszego celu. Wybierz szary obszar i upewnij si\u0119, \u017ce bie\u017c\u0105cy obszar zaznaczenia m\u00f3wi \u201eCel”. B\u0119dziesz musia\u0142 klikn\u0105\u0107 trzy razy, aby go wybra\u0107. Zmie\u0144 wype\u0142nienie i obrys na brak dla wszystkich jego stan\u00f3w.\n<\/p>\n
\n 95 Dodaj dwa pola tekstowe i prosty formularz kontaktowy (usu\u0144 jego nazw\u0119 i pola wiadomo\u015bci i pozostaw tylko pole e-mail). Przeci\u0105gnij je do tej kompozycji i upewnij si\u0119, \u017ce wszystkie maj\u0105 niebieskie k\u00f3\u0142ko w rogach.\n<\/p>\n
\n 96 Dostosuj formularz tak, jak zrobili\u015bmy to w sekcji kontakt. Powiniene\u015b mie\u0107 nast\u0119puj\u0105cy wynik. W polu tekstowym \u201eB\u0105d\u017a w kontakcie” u\u017cyj czcionki: Lobster, rozmiar = 40, kolor: bia\u0142y, wyr\u00f3wnanie do \u015brodka i 100% interlinii. W tek\u015bcie opisu poni\u017cej u\u017cyj czcionki: Ubuntu Light Italic, rozmiar=14, kolor: bia\u0142y, wyr\u00f3wnany do \u015brodka i 120% interlinii. Zmie\u0144 tekst przycisku przesy\u0142ania na \u201eSubskrybuj”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Teraz wybierz przycisk zamykania, przesu\u0144 go i umie\u015b\u0107 w prawym g\u00f3rnym rogu tego wy\u015bwietlacza lightbox, jak pokazano poni\u017cej. Klikaj wewn\u0105trz, a\u017c zobaczysz napis \u201eEtykieta” w bie\u017c\u0105cym obszarze wyboru. Usu\u0144 etykiet\u0119.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Zmie\u0144 wype\u0142nienie i obrys tego przycisku zamykania na brak dla wszystkich stan\u00f3w i ustaw jego W=40 i H=40. Przejd\u017a do opcji Wype\u0142nij > dodaj obraz i wyszukaj krzy\u017cyk. Wybierz opcj\u0119 \u201eSkaluj, aby dopasowa\u0107” w opcji dopasowania.\n<\/p>\n
\n 99 Kliknij Biuletyn, aw jego rogu zobaczysz niebieskie k\u00f3\u0142ko. Kliknij go i upewnij si\u0119, \u017ce opcje s\u0105 ustawione w nast\u0119puj\u0105cy spos\u00f3b.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Wynik ko\u0144cowy Sekcji \u201eNewsletter”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Tworzenie hiper\u0142\u0105czy
\n<\/h3>\n\n 100 Ostatnim zadaniem, kt\u00f3re pozosta\u0142o, jest zastosowanie link\u00f3w do ka\u017cdej sekcji. Aby to zrobi\u0107, wybierz opcj\u0119 \u201ekotwicy linku” znajduj\u0105c\u0105 si\u0119 w g\u00f3rnym \u015brodkowym obszarze lub naci\u015bnij liter\u0119 \u201ea” na klawiaturze. Zobaczysz, \u017ce kursor zmieni sw\u00f3j wygl\u0105d na pistolet za\u0142adowany kotwic\u0105 \u0142\u0105cz\u0105c\u0105.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Kiedy klikniesz na p\u0142\u00f3tno, aby to umie\u015bci\u0107, pojawi si\u0119 okno dialogowe, w kt\u00f3rym mo\u017cesz zmieni\u0107 nazw\u0119 kotwicy.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Utw\u00f3rz kotwice link\u00f3w dla ka\u017cdej zaprojektowanej przez nas sekcji, czyli Strona g\u0142\u00f3wna, Us\u0142ugi, Dlaczego my, Referencje i Kontakt. Umie\u015b\u0107 kotwy na g\u00f3rze ka\u017cdej sekcji. Kotwica domowa jest pokazana poni\u017cej jako przyk\u0142ad. Umieszczenie tych kotew jest wa\u017cnym krokiem i powinno by\u0107 wykonane ostro\u017cnie. Gdy u\u017cytkownik kliknie w konkretny link, strona przewinie si\u0119 do miejsca, w kt\u00f3rym zosta\u0142a umieszczona kotwica.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Teraz zastosujemy linki. Aby to zrobi\u0107, wybierz pole tekstowe \u201eDom”. Przejd\u017a do opcji \u201eHiper\u0142\u0105cza” (znajduj\u0105cej si\u0119 u g\u00f3ry), kliknij ma\u0142\u0105 strza\u0142k\u0119 w d\u00f3\u0142, aby rozwin\u0105\u0107 list\u0119. Tutaj mo\u017cesz zobaczy\u0107 wszystkie kotwice, kt\u00f3re w\u0142a\u015bnie umie\u015bcili\u015bmy. Po\u0142\u0105cz go z kotwic\u0105 \u201eDom”. Powt\u00f3rz ten krok dla innych p\u00f3l tekstowych z wyj\u0105tkiem biuletynu, poniewa\u017c zastosowali\u015bmy do niego wy\u015bwietlanie lightbox.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Ostateczny wynik po utworzeniu hiper\u0142\u0105czy
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Ostatnie poprawki \u2013 zmiana w\u0142a\u015bciwo\u015bci strony i dodanie Favicon
\n<\/h3>\n\n 104 Inside Plan Mode, kliknij prawym przyciskiem myszy stron\u0119 g\u0142\u00f3wn\u0105 i wybierz 'W\u0142a\u015bciwo\u015bci strony. Pojawi si\u0119 okno dialogowe. Wybierz zak\u0142adk\u0119 \u201eOpcje” i pod nazw\u0105 strony umie\u015b\u0107 \u2013 \u201eWitamy w example.com” i kliknij OK. To jest tekst, kt\u00f3ry pojawi si\u0119 w g\u00f3rnej cz\u0119\u015bci okna przegl\u0105darki.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Przejd\u017a do Plik > W\u0142a\u015bciwo\u015bci witryny. Na karcie Uk\u0142ad ostatni\u0105 opcj\u0105 jest \u201eFavicon”. Po najechaniu na ni\u0105 kursorem pojawi si\u0119 wyskakuj\u0105ce okienko opisuj\u0105ce, czym jest favicon i jaki powinien by\u0107 optymalny rozmiar. Dobrze jest doda\u0107 favicon, poniewa\u017c pomaga to wyr\u00f3\u017cni\u0107 Twoj\u0105 mark\u0119, a tak\u017ce pomaga u\u017cytkownikom w \u0142atwej identyfikacji Twojej witryny, je\u015bli dodali j\u0105 do zak\u0142adek.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Testowanie i eksportowanie
\n<\/h3>\n\n 106 Przetestuj swoj\u0105 witryn\u0119, przechodz\u0105c do Plik > Podgl\u0105d witryny w przegl\u0105darce lub Ctrl+Alt+E. Nie wybieraj tym razem opcji \u201ePodgl\u0105d strony w przegl\u0105darce”, poniewa\u017c linki nie dzia\u0142aj\u0105 w podgl\u0105dzie strony. Mo\u017cesz spr\u00f3bowa\u0107 umie\u015bci\u0107 kotwice w r\u00f3\u017cnych miejscach, aby mie\u0107 pewno\u015b\u0107, \u017ce gdy u\u017cytkownik kliknie link, strona przewinie si\u0119 do w\u0142a\u015bciwej sekcji i w\u0142a\u015bciwej pozycji.\n<\/p>\n
\n 107 W ko\u0144cu przejd\u017a do Plik > Eksportuj jako HTML (Ctrl+E). Pod adresem URL witryny umie\u015b\u0107 dowoln\u0105 nazw\u0119, np. \u201eexample.com” i wybierz lokalizacj\u0119. Kliknij OK. Strona jest gotowa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Ko\u0144cowy wynik ka\u017cdej strony
\n<\/h3>\n\n Pierwsza strona
\n<\/h5>\n<\/a><\/p>\n\n Sekcja \u201eUs\u0142ugi”.
\n<\/h5>\n<\/a><\/p>\n\n Sekcja \u201eDlaczego My”.
\n<\/h5>\n<\/a><\/p>\n\n Sekcja \u201e\u015awiadectwa”.
\n<\/h5>\n<\/a><\/p>\n\n Sekcja \u201eKontakt”.
\n<\/h5>\n<\/a><\/p>\n\n Sekcja stopki
\n<\/h5>\n - \n Dla stanu najazdu:<\/strong> po prostu zmie\u0144 kolor tekstu na R=196 G=196 B=196 i bez kursywy.\n <\/li>\n
- \n Oznaczenie:<\/strong> Czcionka: Nobile, rozmiar = 15, Kolor: R = 37 G = 37 B = 37, wyr\u00f3wnana do \u015brodka i 100% z przodu.\n <\/li>\n
- \n Dla nag\u0142\u00f3wk\u00f3w:<\/strong> czcionka=Raleway Bold, rozmiar=18, kolor:bia\u0142y, wyr\u00f3wnanie do \u015brodka i 100% interlinii.\n <\/li>\n
- \n Dla akapit\u00f3w:<\/strong> czcionka: Questrial, rozmiar=15, kolor: R=67 G=67 B=67, wyr\u00f3wnanie do lewej i 120% interlinii.\n <\/li>\n<\/ul>\n
- \n Nag\u0142\u00f3wki:<\/strong> czcionka: Raleway Bold, rozmiar = 20, kolor: czarny, wyr\u00f3wnanie do lewej i 100% interlinii.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n