Especialización en creación de sitios web sin código

Wstęp

Zapomnij o wszystkim, co wydawało Ci się niezbędne do stworzenia strony internetowej. To, co kiedyś wymagało skomplikowanego kodu, jest teraz w Twoich rękach – intuicyjne, wizualne i dostępne dla każdego. Zanurz się w kreatywnej swobodzie narzędzi bez kodu i odkryj, jak design, strategia i storytelling łączą się, aby od podstaw tworzyć wartościowe doświadczenia cyfrowe.

2 min

Wpływy | Juan Mora

Tutaj znajdziesz projektantów, którzy wywarli wpływ na moją twórczość, a ja wyjaśnię, dlaczego i jak to zrobili.

2 min

Wpływy | Filip Felbar

Teraz chciałbym porozmawiać o moich największych inspiracjach i o tym, jak wpłynęły na mnie jako twórcę.

7 min

Wpływy | Jan Losert

Chcę, żebyście przyjrzeli się pięciu osobom, które ukształtowały mój styl lub motywowały mnie do pracy. I powiem Ci, dlaczego lubię ich pracę.

11 min

Wpływy | Mónica Durán

W tej lekcji chcę podzielić się z wami niektórymi projektantami stron internetowych specjalizującymi się w Squarespace, których bardzo uważnie śledzę. Pokażę Ci również kilka książek i blogów na temat projektowania i ogólnie projektowania stron internetowych, które były bardzo pomocne w moim procesie szkoleniowym i które nadal często konsultuję.

10 min

Wpływy | Isa Macías

Dla mnie bardzo ważne jest posiadanie kreatywnych referencji, którymi mogę się inspirować na co dzień i ciągłe uczenie się. W tej lekcji pokażę Wam, które studia i projektanci najbardziej mnie dziś przerażają.

2 min

Rodzaje stron docelowych

W tej lekcji poznasz różne typy landing page, a ja nauczę Cię rozpoznawać, który z nich jest najbardziej odpowiedni dla projektu, który zamierzasz przeprowadzić.

7 min

Czym jest dobra strona docelowa?

Teraz wyjaśnię na kilku przykładach, jak zidentyfikować elementy, które składają się na skuteczną stronę internetową.

8 min

Czym jest hierarchia treści?

W tej lekcji powiem Ci, jak ustalać priorytety treści i ich znaczenie w storytellingu strony docelowej.

5 min

Kontrast, równowaga wizualna i zasada 3 sekund

Na koniec przeanalizujemy rolę kontrastu i równowagi w nawigacji po landing page. Zobaczymy też, jak wykorzystać regułę 3 sekund na swoją korzyść.

4 min

Krótkie i jak zbadać

Brief to dokument, który pomaga nam zrozumieć potrzeby klienta. W tej lekcji nauczę Cię, jak prowadzić dochodzenie na podstawie interpretacji briefu.

11 min

Struktura treści dla strony docelowej

Teraz nauczę Cię, jak zorganizować treść, aby opowiedzieć historię na podstawie wcześniejszych badań.

4 min

Jak zrobić mood board

W tej lekcji zobaczymy, jak stworzyć tablicę nastrojów jako narzędzie do analizy, inspiracji i debugowania.

6 min

Właściwa typografia

Na koniec opowiem Ci o znaczeniu typografii i wyjaśnię, jak ją odpowiednio dobrać, aby jak najlepiej pasowała do projektu, który masz w ręku.

4 min

Tworzenie historii

Na tej lekcji nauczysz się brać pod uwagę zachowanie ludzi podczas interakcji z produktem, systemem lub usługą. Również, jak wykorzystać te informacje jako podstawę do organizacji swojej historii wraz ze strukturą zaproponowaną w planowaniu.

7 min

Umieść cały materiał na płótnie!

Czas umieścić na kanwie wszystkie elementy, które zebrałeś podczas kursu, aby rozpocząć projektowanie landing page. W tej lekcji wyjaśniam, jak to zrobić.

11 min

Utwórz zasoby potrzebne do strony docelowej

Na koniec powiem ci, jak stworzyć własne zasoby z materiałów znalezionych w Internecie. Podpowiem również, gdzie ich szukać.

10 min

Definicja projektu

W tej lekcji nauczę Cię, jak stworzyć przewodnik po stylach, aby ukształtować swój landing page. Będziemy musieli zdefiniować elementy graficzne i typograficzne, aby nadać projektowi spójność i jedność.

10 min

Dopracuj swój projekt: informacje zwrotne

Nadszedł czas, aby zasięgnąć opinii na temat tego, co zrobiliśmy do tej pory. W ten sposób możemy dopasować niezbędne szczegóły, aby uzyskać ostateczny projekt projektu kursu.

5 min

Prezentacja u klienta

W tej lekcji pokażę Ci, jak zaprezentować swój projekt klientowi i co powinieneś wziąć pod uwagę, aby wyjaśnić podjęte decyzje, aby pokazać, co zrobiłeś.

4 min

Wprowadzenie do systemów projektowych

W tej lekcji przedstawię krótki przegląd tego, czym są systemy projektowe i jak są zwykle wykorzystywane. Opiszę również, jak dokładnie działa mój proces i dlaczego jest on dla mnie korzystny.

6 min

Jak systemy projektowe mogą przyspieszyć przepływ pracy

Następnie podam kilka krótkich przykładów tego, jak systemy projektowe mogą pomóc w zwiększeniu wydajności, omawiając, w jaki sposób globalne style i komponenty są pomocne.

8 min

Wprowadzenie do projektu i podejścia

Przejdźmy teraz do projektu, nad którym będziemy pracować! Stworzę ogólny podział tego, czego potrzebujemy, aby mieć udany start.

6 min

Konfiguracja pliku Figma i rozpoczęcie pierwszych eksploracji 1

Najpierw omówię, w jaki sposób można tworzyć systemy projektowe w Figmie. Następnie rozpocznę pierwsze eksploracje i zbiorę wstępne komponenty.

18 min

Konfiguracja pliku Figma i rozpoczęcie pierwszych eksploracji 2

Dzięki tym wstępnym badaniom projektowym możemy bawić się wszystkimi pomysłami, które przychodzą nam do głowy. Zobaczmy coś więcej!

16 min

Rozszerzanie systemu eksploracji i projektowania 1

Będę nadal rozwijał moje projekty i układy, a także sam system projektowania. Zobaczysz, w jaki sposób wykorzystuję komponenty i układy automatyczne, więc masz trochę pojęcia, jak to działa.

19 min

Rozszerzanie systemu eksploracji i projektowania 2

Kiedy już mamy jaśniejsze wyobrażenie o tym, w jakim kierunku chcielibyśmy poprowadzić projekt, zmieniamy niektóre z naszych początkowych wyborów i aktualizujemy nasze globalne style w układach. Zobaczmy, jak rozwija się mój projekt!

20 min

Organizacja stron systemu projektowania 1

W tej lekcji przejrzę utworzone przeze mnie komponenty i style i zacznę umieszczać je na dedykowanych stronach, aby mieć wstępne pojęcie o strukturze.

14 min

Organizacja stron systemu projektowania 2

Będę nadal udoskonalać moje pliki systemowe do projektowania. Pamiętaj, że możliwość udoskonalania biblioteki systemu projektowego na tych wcześniejszych etapach może skrócić czas potrzebny na zakończenie projektu, kiedy przygotowujemy wszystko do ostatecznego przekazania.

11 min

Eksplorowanie wariantów podczas tworzenia komponentów

W tej lekcji zagłębimy się nieco w komponenty; zrozumiesz, jak możemy wykorzystać warianty, aby jeszcze bardziej rozbudować nasz zestaw narzędzi. Dowiesz się również, w jaki sposób konwencje nazewnictwa wchodzą w grę w Figma i gdzie możesz zbadać, aby zobaczyć, które funkcje chcesz wyróżnić i mieć do nich łatwy dostęp.

14 min

Udoskonalanie systemu projektowego za pomocą zmontowanej strony 1

W tej lekcji omówimy bardziej rozwinięty projekt. Teraz, na tym etapie, przeszedłem kilka iteracji w moich poszukiwaniach i wylądowałem w kierunku, z którego jestem całkiem zadowolony. Od tego momentu zagłębimy się w tworzenie komponentów i układów automatycznych. Przyjrzymy się również, jak połączenie tych narzędzi może pomóc nam w tworzeniu bardziej dynamicznych przepływów i układów.

20 min

Udoskonalanie systemu projektowego za pomocą zmontowanej strony 2

Będę kontynuował udoskonalanie systemu projektowania. Podczas pracy z witrynami internetowymi, które mają dużo powtarzających się treści, indeksów treści lub ogólnie archiwów, niezwykle pomocne jest zagnieżdżanie wielu automatycznych układów, komponentów i instancji w sobie.

19 min

Udoskonalanie systemu projektowego za pomocą zmontowanej strony 3

Poświęcenie nieco więcej czasu na zbudowanie jednego układu z komponentami i układem automatycznym pomoże Ci zobaczyć, jak różne formaty treści mogą działać w różnych przypadkach. Jeśli po kilku poprawkach zdamy sobie sprawę, że treść, nad którą pracujemy, w rzeczywistości nie zgadza się z naszą początkową wizją, możemy jednocześnie zmodyfikować wiele wystąpień różnych elementów treści, aby lepiej zrozumieć, jak nasza koncepcja można wykorzystać w rzeczywistym środowisku. Zobaczmy, jak będzie zbudowany ten system projektowania i strona internetowa.

15 min

Konfigurowanie nowych stron z kompletnym systemem projektowania 1

Teraz rozszerzę projekty stron internetowych o kilka nowych stron: archiwum blogów, stronę kontaktową i galerię produktów. Następnym krokiem będzie przetestowanie systemu projektowego i sprawdzenie, które elementy działają, co należy zmienić, a co należałoby dodać.

19 min

Konfigurowanie nowych stron z kompletnym systemem projektowania 2

Po utworzeniu archiwum bloga i wpisu na blogu pokażę Ci, jak zbudować stronę kontaktową. To pozwala nam zobaczyć, jak stworzony przez nas system projektowania może pomóc nam szybko stworzyć te nowe elementy.

20 min

Konfigurowanie nowych stron z kompletnym systemem projektowania 3

Tutaj zobaczysz jak tworzę końcową stronę dodatkową, czyli stronę sklepu lub galerię produktów.

20 min

Jak podejść do tworzenia dokumentacji dla systemu projektowego

W tej lekcji omówię dwa przykłady tworzenia dokumentacji dla systemu projektowego przy użyciu Notion i zeroheight.

9 min

Czyszczenie i używanie automatycznego układu

Poświęcimy trochę czasu na tych końcowych etapach, aby przejrzeć stronę internetową i system projektowania oraz upewnić się, że wszystko jest poprawnie skonfigurowane i korzysta z naszych standardowych notatek.

12 min

Wykorzystanie projektu na dalszych elementach marki

Nasz system projektowania nie musi kończyć się na stronie internetowej. W tej lekcji pokażę Ci kilka przykładów wykorzystania zbudowanego przeze mnie systemu projektowego jako punktu wyjścia do tworzenia dodatkowych elementów marki, takich jak posty w mediach społecznościowych i artykuły papiernicze.

13 min

Końcowe przemyślenia

I to jest okład! W tej lekcji omówię kilka dodatkowych przemyśleń na temat całego tego procesu.

2 min

Wprowadzenie do No-Code

W tej lekcji omówię sposób tworzenia witryn internetowych, a Ty poznasz Webflow i bibliotekę zasobów na Webflow University.

10 min

Podstawowe funkcje Webflow

Przyjrzyjmy się wszystkim panelom i funkcjom Webflow i stwórzmy pusty projekt, aby rozpocząć twórczą podróż tego kursu.

17 min

Projekt

Przyjrzymy się projektowi i omówimy, na czym należy się skupić przed rozpoczęciem projektu. Następnie omówię, gdzie można uzyskać obrazy bez tantiem do swojego projektu.

7 min

Przewodnik po stylach

W tej lekcji omówię, dlaczego na początku każdego projektu tworzyć fundamenty i dodawać czcionki do pustego projektu.

11 min

Tworzenie przewodnika po stylach 1

W tej lekcji zaczynamy tworzyć! Najpierw ustawimy wszystkie początkowe elementy, takie jak przyciski i typografię.

18 min

Tworzenie przewodnika po stylach 2

Teraz będziemy kontynuować odkrywanie niektórych przycisków i klas combo.

16 min

Sekcja bohaterów

Zacznijmy od stworzenia górnej części naszej strony z telefonem i rzędem zdjęć.

18 min

Nawigacja

W tej lekcji omówię budowę menu nawigacyjnego witryny i omówię, jak sprawić, by była responsywna. Będziemy stylizować komponent o nazwie Navbar.

20 min

Studium przypadku Sekcje 1

Teraz stworzymy karty obrazkowe przedstawiające studia przypadków studia oraz działy ze statystykami firmy.

16 min

Studium przypadku Sekcje 2

Będziemy kontynuować dodawanie elementów do bloku studium przypadku.

20 min

Kolaż Sekcja 1

W tej lekcji nauczę Cię, jak stworzyć sekcję kolażu ze zdjęciami i referencjami.

11 min

Kolaż Sekcja 2

Ponownie wykorzystamy sekcję z trzema kolumnami, aby utworzyć blok z głównymi wartościami firmy.

10 min

Sekcja klientów i prosty formularz biuletynu

W tej lekcji przyjrzymy się tworzeniu sekcji „Pracowaliśmy z” klientami.

14 min

Stopka

Czas zbudować ostatnią sekcję serwisu – stopkę.

20 min

Widok tabletu

W tej lekcji przygotujemy witrynę dla mniejszych rzutni, zaczynając od widoku tabletu. Podzielę się również kilkoma wskazówkami, które ułatwią Ci życie, stosując bardziej rygorystyczne zasady dotyczące szerokości naszego kontenera i klasy wrap.

20 min

Mobilny widok poziomy i pionowy

Sprawimy, że wszystko będzie jeszcze bardziej zawężone i zadbamy o to, aby strona wyglądała świetnie na mobilnym układzie pionowym i poziomym.

13 min

Testowanie formularzy

Będziemy jeszcze dokładniej badać formularze i stylizować stany sukcesu i błędu. A potem pokażę Ci, gdzie znaleźć przesłane formularze i co możesz z nimi zrobić.

7 min

Interakcje

Na koniec sprawmy, aby strona była bardziej zabawna, dodając subtelne interakcje w sekcji bohaterów. Następnie omówię różnicę między interakcjami „Wczytywanie strony” i „Przewijanie w widoku”.

13 min

Optymalizacja SEO i Hosting

W tej lekcji przyjrzymy się ustawieniu favicon tagów SEO, a następnie udostępnieniu naszej witryny w ramach hostingu Webflow.

10 min

Konserwacja, edytor i panel zasobów

Porozmawiajmy o konserwacji. Pokażę Ci, jak przygotować stronę, jeśli chcesz w przyszłości pracować z większą liczbą osób i utrzymać porządek i porządek w swoim projekcie.

9 min

Poznaj CMS

Pokażę Ci, jak działa CMS w zestawie narzędzi Webflow na prostym blogu. Następnie omówię, jak budować kolekcje i używać danych dynamicznych na stronach statycznych w porównaniu z szablonami kolekcji.

12 min

Zdefiniowanie celu i struktury naszej strony internetowej P1

Aby zaprojektować funkcjonalną (a także atrakcyjną) stronę internetową ważne jest, aby bardzo jasno określić, jaki cel chcemy, aby pomógł nam osiągnąć, ponieważ będzie to polegało na tym, że uporządkujemy strukturę strony i każdego z stron.

12 min

Zdefiniowanie celu i struktury naszej strony internetowej P2

W tej lekcji zobaczymy przykłady, w jaki sposób cele te odpowiadają decyzjom projektowym w sieci oraz elementom, które zdecydujemy się uwzględnić w naszym projekcie (które i jak).

10 min

Ogólny styl naszej strony

Teraz, gdy stworzyliśmy strukturę sieci, zamierzamy szeroko zdefiniować styl wizualny, jaki chcemy, aby miał. Zobaczymy w bardzo prosty sposób, jak łączyć czcionki i kolory, a podam przykłady, jak można je wykorzystać do stworzenia wizualnego stylu na swojej stronie internetowej. Dam ci również kilka zasobów, w których możesz szukać inspiracji.

14 min

Tworzenie, organizacja i przygotowanie plików graficznych

Mamy już wszystkie zasoby graficzne, z których będziemy korzystać na naszej stronie, oraz ogólny zarys projektu każdej strony… teraz musimy przygotować wszystkie pliki, z których będziemy korzystać tak, aby były zoptymalizowane do wykorzystania w sieci i uporządkowane tak, abyśmy mogli je łatwo znaleźć podczas projektowania w Squarespace.

7 min

Zmiany w interfejsie bloku treści Squarespace

W tej lekcji pokrótce wyjaśnię niektóre ostatnie zmiany w Squarespce, aby poznać różnice między interfejsem, który zobaczysz w kolejnych lekcjach, a interfejsem, który zobaczysz w witrynie Squarespace podczas jej tworzenia.

3 min

Jak wybrać szablon dla swojej strony internetowej

W tej lekcji omówimy różne szablony, które znajdziemy w Squarespace, gdy zamierzamy stworzyć nową witrynę. Zobaczymy, jakie mają cechy i na co należy zwrócić uwagę przy wyborze odpowiedniego do swojego projektu.

9 min

Ustawienia początkowe w Squarespace

Po utworzeniu konta przeprowadzimy wycieczkę po całym panelu administracyjnym Squarespace, dzięki czemu zapoznasz się z różnymi sekcjami: Strony, Projekt, Handel, Marketing, Analityka, Komentarze, Ustawienia i Pomoc. [textbox type=alert]Ważna uwaga: Po nagraniu lekcji do tego kursu, Squarespace udostępnił nową sekcję w panelu administracyjnym o nazwie Profile lub Profile . Ta sekcja nie jest szczególnie istotna dla treści kursu, ale warto ją trochę zbadać, ponieważ stąd będziesz mógł przeglądać i zarządzać profilami: - Klienci: osoby, które dokonały zakupu w Twojej witrynie, jeśli masz założony sklep internetowy (a tego nie widzimy w kursie). – Subskrybenci: osoby, które subskrybują Twoją listę mailingową, jeśli korzystasz z natywnej opcji Squarespace. Jeśli korzystasz z zewnętrznego narzędzia do marketingu e-mailowego (takiego jak Mailchimp lub Mailerlite), nie będziesz mógł nimi zarządzać z tego miejsca. Więcej informacji na temat tej nowej sekcji panelu administracyjnego Squarespace pod tym linkiem.[/textbox]

12 min

Tworzenie stron w Squarespace: ich właściwości i ustawienia

W tej lekcji wyjaśnię różne typy elementów, które mamy w Squarespace, aby stworzyć „architekturę” witryny: strony, kolekcje (lub strony kolekcji), foldery i łącza, ponieważ każdy z nich ma inne funkcje i cechy.

18 min

Bloki treści w Squarespace

Teraz, gdy wiesz, jak działa ogólna struktura witryny w Squarespace, zobaczymy, jak tworzona jest struktura każdej ze stron i aby lepiej wyjaśnić, stworzymy stronę, do której dodamy różne bloki treści, które są elementami składającymi się na projekt dowolnej strony w Squarespace.

8 min

Sekcje strony w Squarespace

Teraz, gdy wiemy, jakie są bloki treści, które mamy w Squarespace, zobaczmy, jak zintegrować je z sekcjami strony, aby stworzyć projekt każdej ze stron internetowych.

17 min

Projekt i konfiguracja stron Strona główna, Usługi, O mnie i Kontakt P1

Na podstawie szkiców, które wykonaliśmy w części 2 i treści, które dodaliśmy do naszego skoroszytu, stworzymy strony Strona główna, O mnie, Usługi i Kontakt ze wszystkimi ich sekcjami, tekstami i obrazami.

17 min

Projekt i konfiguracja stron Strona główna, Usługi, O mnie i Kontakt P2

Na razie nie przejmuj się kolorami ani czcionkami, ponieważ dostosujemy to później: teraz ważne jest, aby stworzyć strukturę stron.

16 min

Projekt i konfiguracja stron Strona główna, Usługi, O mnie i Kontakt P3

Na stronie kontaktowej nauczę Cię, jak dodać formularz i co musisz zrobić, aby dołączyć tekst i niezbędne pole, aby zachować zgodność z RGPD (ogólne rozporządzenie o ochronie danych).

16 min

Ustawienia strony portfela P1

W tej lekcji zobaczymy, jak dodać portfolio z projektami do sieci. Pokażę Ci różne opcje projektowe, które masz dla swojej głównej strony portfolio, jak dodawać nowe projekty i różne dostosowania, które możesz wprowadzić do poszczególnych projektów.

12 min

Ustawienia strony portfela P2

16 min

Ustawienia bloga P1

Teraz zobaczymy, jak skonfigurować blog dla Twojej witryny. Pokażę Ci różne opcje projektowania, które masz dla głównej strony bloga, jak dodawać nowe posty i różne ogólne poprawki, które musisz wprowadzić do każdego posta przed jego opublikowaniem.

16 min

Ustawienia bloga P2

18 min

Ustawienia bloga P3

11 min

Tworzenie stopek i korekty nawigacji głównej

W tej lekcji nauczę Cię, jak skonfigurować stopkę strony internetowej (stopkę), aby zawierała wszystko, co zdefiniowaliśmy w Unit 2. Zobaczysz, że bardzo proste i bardzo elastyczne jest wprowadzanie zmian w stopce Twojej witryny , teraz, gdy jesteś już dobrze zorientowany w sekcjach i blokach treści Squarespace.

18 min

Ustawianie czcionek i kolorów witryny P1

W tej lekcji pokażę Ci różne opcje, które musisz zdefiniować, aby zdefiniować styl tytułów, podtytułów i treści witryny. Dowiesz się, jak zmieniać czcionki domyślnie wprowadzane przez szablon i wprowadzać dodatkowe zmiany, aby modyfikować style inne niż domyślne.

20 min

Ustawianie czcionek i kolorów witryny P2

12 min

Ustawienia obrazu i inne ustawienia

Mając gotowe kolory i czcionki, zajmiemy się teraz dostosowaniem obrazu i innymi szczegółami, takimi jak ogólne animacje witryny, odstępy, przyciski, ikona przeglądarki (favicon), obraz w sieciach społecznościowych, specjalne style stron.

13 min

Bonus: Style internetowe w Squarespace 7.0

Ta lekcja jest przeznaczona dla tych, którzy mają tylko Squarespace w wersji 7.0. Poniżej opisano, jak dostosowywać czcionki, kolory i inne elementy internetowe w witrynie zaprojektowanej w starej wersji Squarespace.

10 min

Ustawienia marketingowe

Zobaczymy elementy, które mamy w panelu Squarespace Marketing i pokażę Ci, jak skonfigurować pasek reklamowy w Internecie, a także wyskakujące okienko, które możesz wykorzystać do promowania niektórych informacji lub przyciągnięcia subskrybentów.

13 min

Ogólne ustawienia prywatności

W tej lekcji nauczę Cię, jak tworzyć legalne strony serwisu i linkować je w stopce. Pokażę Ci również, jak skonfigurować pasek reklam plików cookie i ustawienia, które musisz wprowadzić, a także dam ci alternatywną opcję, jeśli potrzebujesz bardziej zaawansowanego paska plików cookie, jeśli zamierzasz załadować dodatkowe pliki cookie na swojej stronie.

8 min

Zróbmy publiczną stronę P1

Na koniec zobaczymy niezbędne kroki, aby upublicznić Twoją witrynę: różne plany płatności, które ma Squarespace, ich cechy i który polecam dla witryny takiej jak ta, którą zrobimy w trakcie kursu.

16 min

Zróbmy publiczną stronę P2

6 min

Śledzenie analityki witryny

Na koniec przyjrzymy się panelowi Analytics na stronie: oprowadzę Cię po jego sekcjach i przedstawię moje zalecenia, aby jak najlepiej go wykorzystać.

10 min

Odniesienia wizualne: gdzie szukać inspiracji

W tej lekcji chcę Ci powiedzieć, jak ważne jest dla mnie szukanie wizualnych odniesień, które mnie inspirują podczas tworzenia projektu strony internetowej. Powiem Ci również, gdzie znajduję i przechowuję te odniesienia, aby zawsze o nich pamiętać podczas całego procesu projektowania witryny.

6 min

Mapa witryny i przewodnik po stylu

Teraz nauczę Cię, jak prześledzić trasę, którą podąża użytkownik po wylądowaniu na Twojej stronie internetowej, co da Ci jaśniejszy obraz tego, które strony musisz zaprojektować i jak są one ze sobą powiązane. Zobaczymy również, jak stworzyć mały przewodnik po stylach, w którym zgromadzimy ogólne elementy i style, które chcemy umieścić w Internecie.

6 min

Przygotowanie propozycji projektowej 1

Po stworzeniu całej koncepcji wizualnej strony przystępujemy do przygotowania propozycji projektu.To jedna z najbardziej ekscytujących części procesu! Zacznę od zaprojektowania nagłówka, stopki i mojej strony głównej.

16 min

Przygotowanie propozycji projektowej 2

Kontynuuję projektowanie w Figma pozostałych sekcji, które zdefiniowałem na mapie serwisu. Podczas tego procesu pamiętaj, aby pamiętać o swoich referencjach!

10 min

Pierwsze kroki w WordPressie

W tej lekcji nauczę Cię, jak zainstalować WordPressa i jakie jest jego podstawowe działanie. W ten sposób będziesz mógł w pełni zapoznać się z możliwościami tego oprogramowania.

10 min

Zainstaluj Elementora

Teraz zainstalujemy Elementora, czyli narzędzie, za pomocą którego zbudujemy cały projekt strony internetowej bez konieczności pisania ani jednej linijki kodu.

9 min

Znajomość Elementora 1

Zamierzamy przenieść do Elementora wszystkie elementy i ogólne style, które zdefiniowaliśmy w przewodniku po stylach. Ponieważ mamy już wszystko przemyślane i zdefiniowane w naszym przewodniku, proces będzie bardzo łatwy!

8 min

Znajomość Elementora 2

Teraz zrobię krótkie podsumowanie konfiguracji, które pokazałem w poprzednim filmie. Następnie będziemy kontynuować konfigurowanie i dostosowywanie innych opcji, takich jak zestaw czcionek.

17 min

Nagłówek i stopka 1

W tej lekcji wyjaśnię, czym jest kreator motywów Elementor i dlaczego jestem jego fanem. Nauczę Cię również, jak wykorzystać go do zaprojektowania nagłówka Twojej strony internetowej.

19 min

Nagłówek i stopka 2

Teraz pokażę ci, jak buduję stopkę mojej strony internetowej za pomocą Elementora. Widzisz jak szybko pracuje się z tym programem?

10 min

Strona główna

Czas zaprojektować pierwszą sekcję sieci. Strona główna jest prawdopodobnie pierwszą stroną, którą zobaczą w Twojej witrynie, więc zawsze lubię być najbardziej kreatywny i wizualny.

10 min

Szablon dla projektów 1

W tej lekcji będziemy pracować z opcjami szablonów Elementora, aby stworzyć indywidualny układ strony projektu. A nawiasem mówiąc, wszystkie projekty uwzględnię również w moim portfolio.

19 min

Szablon dla projektów 2

Teraz pokażę Ci, jak pracuję z responsywną wersją mojego szablonu projektu.

10 min

Archiwum projektu

Następną rzeczą, której nauczę Cię projektowania, jest główna strona portfolio, na której będą archiwizowane wszystkie projekty, które wrzucimy do sieci.

6 min

„O” i „Kontakt”

Na koniec będziemy pracować nad dwiema podstawowymi sekcjami na każdej stronie internetowej: stroną „O” i stroną „Kontakt”.

15 min

Strony dodatkowe: prywatność, 404 i konserwacja

W tej lekcji omówię kilka drugorzędnych sekcji Twojej witryny, które nie są widoczne a priori, ale nadal tam są. Nauczę Cię również, jak wprowadzić witrynę w tryb konserwacji.

13 min

Przetestuj i uruchom stronę

Zanim uruchomimy sieć w świat, przetestujemy ją, aby sprawdzić, czy wszystko działa i wygląda tak, jak chcemy. Nauczę cię, jak to zrobić!

8 min

Aktualizacja witryny

W tej ostatniej lekcji chcę pokazać, jak ważne jest tworzenie kopii zapasowych przed aktualizacją witryny.

3 min