Strony WWW bez Kodowania: Wprowadzenie do Carrd

0:00Cześć! Tak jak obiecałem, zaczynamy od

0:02kompletnych podstaw, czyli zajmiemy się chyba najprostszym edytorem na świecie,

0:06czyli edytorem kart, który pozwala nam tworzyć za darmo albo w jakimś planie,

0:11który kosztuje dosłownie półtora dolara miesięcznie.

0:15W pełni responsywne strony, które

0:17zawierają jedną stronę, czyli takie One pages sides, które mogą być np.

0:22jakąś wizytówką, mogą zapraszać na jakieś

0:25wydarzenie, mogą promować jakiś Twój produkt.

0:28No i stopniowo będziemy uzupełniali je o

0:31dodatkowe funkcje z pomocą narzędzi no-code, które omówimy.

0:34Natomiast korzystam z takiego bardzo prostego edytora po to, żebym mógł właśnie pokazać

0:39Ci po kolei ten proces, żeby wejście w ten świat było stosunkowo proste.

0:43To zawsze jest tak, że mając do dyspozycji rozmaite narzędzia, musimy zastanowić się

0:47nad celem biznesowym, nad celem, który nam przyświeca przy konkretnym projekcie.

0:52Czy jest to proste MVP? Czy jest to jakaś wizytówka firmowa?

0:55Czy jest to strona, która ma zbierać leady czy cokolwiek innego.

1:00My mając przegląd

1:01takiego ekosystemu, tej przestrzeni, narzędzi no-code, jesteśmy w stanie

1:06wybrać odpowiedni skalpel do właściwego zadania.

1:09No i jednym właśnie z takich narzędzi jest Carrd.

1:12Wydaje mi się, że jest to najprostsze obecnie narzędzie, które jednocześnie

1:16daje nam naprawdę sporo możliwości, ale jest też bardzo przyjazne w użyciu, bardzo

1:20intuicyjne nawet dla osób całkiem początkujących.

1:22W związku z tym od niego zaczniemy.

1:24No i klikniemy What's Carrd i zobacz jakie funkcje ma ten edytor.

1:29Są to przede wszystkim predefiniowane szablony, z których możesz korzystać.

1:33Czyli mamy mnóstwo różnych szablonów, które możesz,

1:36od których możesz rozpocząć pracę, ale możesz także wybrać jakiś

1:39po prostu pusty projekt, od którego zaczniesz przygotowywanie swojej strony.

1:44Jest to automatycznie responsywne, czyli wszystkie komponenty, które stworzysz.

1:48W zasadzie tutaj w ogóle nie musimy się

1:49przejmować widokiem telefonu czy tableta, bo on po prostu będzie działał.

1:53Te wszystkie komponenty, które tu są są dostosowane do mniejszych czy większych

1:58urządzeń, no ale też dają nam z tego tytułu trochę mniejszą kontrolę nad

2:02tym, jak to się będzie wyświetlało na innych urządzeniach.

2:04Ale tutaj w Carrd nie o to chodzi.

2:06Jeżeli chcesz

2:07przygotować coś według jakiegoś zaprojektowanego layoutu i wyrównać

2:11co do pixela, no to Carrds nie będzie Twoim wyborem.

2:13Dlatego, że tutaj bardzo często nie mamy takich możliwości.

2:17Nawet często będzie nam trudno umieścić np.

2:20coś do lewej strony czy do prawej,

2:23ale to właśnie nie o to chodzi.

2:24Chodzi o to, żeby tworzyć szybko bardzo proste projekty.

2:27No i co ciekawe możemy zacząć za darmo

2:30i uruchomić sobie też taki 7 dniowy trial, czyli wersję próbną planu Pro.

2:37I w tym planie Pro mamy możliwość podpięcia własnej domeny.

2:39Mamy możliwość stworzenia wielu landing page, możliwość pracy z formularzami

2:44predefiniowanymi, które połączą nas z MailChimp'em, Review, ConverKit'em itd.

2:47Lub też swoje własne customowe formularze.

2:50Mamy też możliwość embedowania różnych

2:53widget'ów takich jak płatności ze Stripe'em czy PayPalem.

2:56To wszystko Ci pokażę w kolejnych lekcjach.

2:57Możemy podpiąć też Google Analytics.

2:59No i w końcu w darmowej wersji mamy taki

3:01branding ''Made with Carrd'', a w wersji płatnej go nie mamy.

3:04Najlepsze jest to, że ta wersja płatna przynajmniej na moment, kiedy to nagrywam,

3:08kosztuje chyba w najlepszej wersji 49 dolarów rocznie,

3:13a zaczyna się od 9 dolarów rocznie, więc jest to naprawdę bardzo tanie narzędzie.

3:19No i teraz wybieramy sobie Starting Point,

3:21czyli zaczynamy od jakiegoś gotowego szablonu, które tutaj są poukładane

3:26w takie zakładki.

3:27Np. mamy landing page i mamy

3:29szereg szablonów przygotowanych pod landing page.

3:31Niektóre są dla wersji Pro, niektóre są też darmowe dla wszystkich.

3:35No i możemy zacząć od tego szablonu.

3:37Możemy też zacząć od pustej kartki, czyli

3:39z pomocą tego przycisku po prostu rozpocząć tworzenie strony od podstaw.

3:44Warto przejrzeć sobie rozmaite szablony, które tutaj są.

3:47One mają zawsze taką stronę demo.

3:49Na tej stronie demo zobaczysz, że

3:52są jakieś animacje, jakoś to się fajnie ładuje.

3:56Jest to też w ciekawy sposób zoptymalizowane.

3:58No i jeżeli zdecydujesz się na jakiś

4:01szablon od którego chcesz zacząć, możesz wybrać po prostu Select

4:05i proponuje Ci zacząć od jakiegoś darmowego czy płatnego szablonu.

4:08Jeśli uruchomię sobie triala i zobaczyć jak to wygląda, czyli najpierw

4:12warto zapoznać się z tym jak takie szablony są skonstruowane.

4:14Jak widzisz to jest bardzo prosto operują na jakiś takich boxach, które możemy dostosowywać.

4:19Jeżeli klikniemy sobie w taki box otrzymujemy jego właściwości.

4:22Te właściwości są podzielone na kilka zakładek.

4:25W pierwszej z nich znajdziemy informacje o konkretnym elemencie, z którego

4:28korzystamy, bo w Carrds nazywa się to właśnie elements.

4:31To, co możemy dodawać też z pomocą plusa,

4:33czyli różne takie rzeczy na naszą stronę typu obrazki, button'y, listy, ikony itd.

4:38To wszystko możemy wybrać sobie z listy i tutaj dodać.

4:40A jak już jest na canvas'ie, na polu pracy, to możemy to kliknąć i edytować.

4:44No i np. tu możemy zmienić tekst, który się

4:46pojawia w środku, jak również możemy w pewien sposób go

4:49sformatować używając takiej składni jak Markdown, czyli takiej składni do plain

4:54text'u, która pozwala nam coś pogrubić w momencie gdy np.

4:57weźmiemy to w dwie gwiazdki itd. więc

5:00możemy korzystać z takiego prostego formatowania.

5:03Możemy też zmienić typ tego komponentu np.

5:05na Heading, Paragraph czy Sitle Title.

5:08No i jeśli chcielibyśmy przejść do jego

5:10stylowania, to odpowiada za to druga zakładka Appearance.

5:14I w tej zakładce możemy zmieniać takie

5:15rzeczy jak krój pisma, jak kolor tekstu, jak jego grubość, line spacing itd.

5:20czyli znajdziemy tu większość właściwości jeśli chodzi o wygląd styli CSS.

5:25No i co ciekawe w momencie gdy wykonamy jakieś zmiany, dostosujemy ten wygląd, to możemy

5:30również zapisać to sobie jako jakiś preset wyglądu, czyli możemy dodać nasz własny

5:35styl, nazwać go jakość, czyli wyedytuję nazwę, mój styl np.

5:40I będziemy mogli zawsze zastosować to do w zasadzie dowolnego elementu, czyli

5:44np. zmienić fonty czy zmienić kolory na dowolnym elemencie.

5:48Mamy też szereg predefiniowanych stylów, czyli np.

5:50styl od Content'u, Baner Text'u, Footer.

5:52To wszystko jest właściwe dla konkretnego jednego projektu, z którym pracujemy.

5:57No i w końcu są jeszcze zaawansowane bardziej ustawienia.

6:00One są dostępne dla tych najwyższych planów, gdzie możemy nadać np.

6:03identyfikatory, nazwę klas, jakieś różne atrybuty itd.

6:06Więc na razie nie będę tego tłumaczył.

6:08W ogóle w zasadzie nie będziemy pewnie zajmować

6:10się tymi bardziej zaawansowanymi ustawieniami, ale pamiętaj, że one tu są i

6:13są oczywiście kontekstowe dla każdego elementu, z którego korzystamy.

6:18Jeżeli chcemy taki element powielić, możemy to zrobić tutaj, a jeśli chcemy go

6:21usunąć, możemy to zrobić z pomocą ikonki kosza.

6:23I teraz wejdźmy sobie do drugiego elementu.

6:25Przejdźmy do jego ustawień tekstu.

6:27Mamy tutaj Source Sans Pro.

6:29Możemy oczywiście zmienić font na dowolny, zobacz, że

6:31jest tutaj mnóstwo fontów i są one zaciągnięte z biblioteki Google Fonts,

6:36więc naprawdę bardzo dużo rozmaitych fontów możemy tutaj wybierać.

6:41Jest ich pewnie kilkadziesiąt.

6:42Może nie są to wszystkie fonty z Google Fonts, ale jest na pewno

6:46ich wiele i są takie, które są i szeryfowe, i bezszeryfowe.

6:51Więc naprawdę wybór jest całkiem duży.

6:54A my możemy teraz przejść do sekcji, w

6:56której zmienimy treść i powiemy tutaj, że to będzie np.

7:00Warszawa w obiektywie i powiedzmy, że chcemy zrobić taki prosty

7:06landing page dla wycieczki po Warszawie z aparatem, którą organizujemy.

7:12No i jeśli uznamy, że ten rozmiar jest trochę zbyt duży,

7:16chcielibyśmy, żeby to się mieściło w jednej linii.

7:18Możemy bardzo łatwo zmienić rozmiar Weight, czyli grubość fonta

7:21też możemy zmienić stąd lub użyć takiego pogrubienia, które

7:27zrobimy tutaj z pomocą gwiazdek, ale zawsze jest lepiej robić to tym parametrem

7:31Weight, ponieważ to korzysta z konkretnego kroju pisma.

7:34Następnie mamy Line Spacing czyli wysokości linii Letter Spacing

7:38odległości liter od siebie, jakieś marginesy dodatkowe.

7:41Zawsze możemy tutaj dodać

7:43jeszcze kilka rzeczy, którymi na razie nie będę się zajmował.

7:46Natomiast tutaj znajduje się co ważne

7:47sekcja Mobile i dla każdego takiego elementu możemy zaznaczyć sekcję Mobile Auto,

7:51czyli automatycznie zoptymalizuje to ten element

7:55dla ekranów mobilnych jest to opcja zalecana.

7:59Jeśli przejdziemy do ekranu mobilnego, będzie on wyglądał tak np.

8:02Troszeczkę się tekst zmniejszy automatycznie.

8:04Jeżeli chcemy na to wpłynąć samodzielnie, przełączamy się na manual i po prostu

8:08zmieniamy tutaj jakieś parametry, które chcielibyśmy, aby było inne.

8:12W mobilnej wersji takiej strony.

8:15No dobrze, to teraz klikniemy na tło.

8:16Klikam na element, który znajduje się w tle i jest to zwykły kontener.

8:21Ma jakiś tam typ default, a my przejdźmy do jego stylowania, ponieważ chciałbym

8:24zjechać do sekcji gdzie znajduje się background czyli tło.

8:27Tło jest tutaj ustawione na obrazek, image.

8:29Możemy wybrać jakiś kolor, gradient itd.

8:31Ale domyślnie jest to obrazek.

8:33Zresztą mamy taki placeholder z takim X'em jakby,

8:35który sygnalizuje, że możemy tutaj osadzić w tle ten obrazek.

8:38Będziemy mogli wybrać spośród szeregu

8:40plików, które przygotowałem w postaci screenów.

8:42Robiliśmy ostatnio taki film o Warszawie i z niego zrobiłem szereg screenów.

8:47Niestety one były dość duże, ponieważ

8:49robiłem je w tej najlepszej jakości jako screenshoty i w związku z tym skorzystałem

8:53z takiego narzędzia jak ImageOptim i to narzędzie pozwala mi po prostu

8:57przeciągnąć tutaj pliki, a następnie automatycznie redukuje ich rozmiar.

9:01Zobacz, że

9:02to zredukowało rozmiar o aż 62% np. dla tego pliku czy ponad 70% dla tego pliku.

9:08W związku z tym czekam aż ta operacja się

9:10zakończy i będę mógł wtedy wybrać sobie polecenie upload, a następnie wskazać z

9:16tej sekcji Warszawa plik, który chcę umieścić w tle.

9:20No i wybieram sobie taki plik, a następnie określam jego, jego wielkość, jego zakres.

9:27Tutaj mogę jeszcze skorzystać z pewnych opcji dotyczących np.

9:31polepszenia jakości czy zmiany.

9:33Mamy tutaj coś takiego jak adjustments i w tym przypadku gdybym chciał, żeby taki

9:37element znalazł się w tle, a nad nim byłby napis to zobacz, że ja np.

9:41tutaj mogę zmniejszyć Brightness, wewnątrz tego narzędzia.

9:45Jest to niezwykle przydatne, ponieważ

9:46zmniejszamy sobie teraz Brightness, możemy trochę, lekko zwiększyć kontrast i dzięki

9:51temu możemy automatycznie przyciemnić taki obrazek.

9:53Nie musimy dodawać tu jakiejś API itd.

9:55Więc ten element mamy gotowy.

9:57Teraz zaznaczmy tekst, który się tutaj znajduje.

10:00Przejdźmy do jego właściwości.

10:01Ja mam już kawałek tekstu przygotowany, który teraz chciałbym wkleić.

10:04Zapraszam na wyjątkową wycieczkę z aparatem.

10:07Zobaczę jakie właściwości dla tego tekstu użyłem. Font Chivo,

10:10OK, no to możemy spróbować wykorzystać ten sam font.

10:14I przypominam, że masz możliwość też.

10:16W tym momencie może zmniejszymy troszeczkę

10:19Line Spacing i masz możliwość w tym momencie ustalenia jakiś właściwości i np.

10:24zmiany tego,

10:26tu akurat korzystamy z Banner Text, takiego

10:28predefiniowanego stylu, więc zawsze jak wybiorę teraz Banner Text, no to będę miał

10:33odpowiedni font, odpowiedni Line Spacing, który zmieniłem itd. więc tutaj

10:36jeszcze sporo możliwości mamy.

10:39Ja chciałbym usunąć tą ikonę i ponieważ nasza,

10:42czyli klikam na ikonce kosza.

10:43Nasza wycieczka po Warszawie będzie odbywać się w jakimś konkretnym terminie.

10:46Kliknę teraz na tekst po to, żeby pod tym elementem dodać sobie nowy element.

10:51Klikam na plus add element, a następnie

10:54wybieram timer i ten timer umieścił mi się pod spodem.

10:58Timer będzie odliczał do wycieczki.

10:59Jest to jeden z elementów, które możemy tutaj zrobić i np.

11:03wrzucimy sobie jakieś 31.06, o której o 9:30.

11:07Wybieramy strefę czasową, która

11:10w ramach której ma timer odliczać, czyli tą z Warszawy i typ.

11:14Mamy coś takiego jak Default albo Countdown.

11:17Jeżeli wybierzemy Default będzie to odliczać do zera, a później od zera do góry.

11:21A jeśli wybierzemy Countdown to będzie odliczać do zera i później automatycznie

11:24przekieruje nas na jakiś adres email po zakończeniu odliczania.

11:27W naszym przypadku opcja Default się sprawdzi.

11:31Jeśli chodzi o właściwości to możemy wybrać precyzję, czyli np.

11:35w tym momencie mamy 4 segmenty precyzji i

11:36działa to w ten sposób, że jak zmienimy to na 3 to wyrzucimy dni, jak zmienimy to na 2

11:41to wyrzucimy sekundy, jak zmienimy to na 1 to wyrzucimy wszystko poza godzinami.

11:46Ja zostawię sobie 4 i mamy jeszcze możliwość zmiany szerokości.

11:51Chciałbym żeby mniej więcej było to tej

11:52szerokości, może trochę węższe niż tekst, który mam wyżej.

11:57Możemy zmienić spacing jak również mamy możliwość zmiany stylu.

12:01Czyli teraz chcemy zrobić białe cyferki.

12:04Styl w ogóle możemy wybrać z jakiś predefiniowanych, czyli outline, gdzie

12:08mamy jeszcze dodatkowo taką fajną ramkę, która nam się pojawia dookoła.

12:12Możemy zmienić jej kolor.

12:14Może właśnie zróbmy.

12:15Wybierzmy tutaj sobie kolor biały dla tej ramki.

12:18Font zmieńmy na nasz ulubiony, czyli taki, żeby był zgodny z projektem.

12:23Grubość tego fontu też możemy sobie zmienić.

12:25Kształt zobaczę, czy Możemy to zmienić na

12:27kółeczka albo prostokąty też fajnie to wygląda i te prostokąty dodatkowo mogą

12:33mieć jakieś zaokrąglenie narożników, które dla nich wybierzemy.

12:37Jeśli chodzi o Delimiter, czyli czy

12:39chcemy to przydzielić liniami czy dwukropkami w sumie ich na razie nie widać.

12:44Musielibyśmy zmienić kolor na kolor biały. Zobacz, że

12:47teraz rozdzieliłem to liniami, ale mogę to zmienić na Colons.

12:50Czyli dwukropki fajnie wygląda albo poprostu w ogóle to usunąć.

12:53Także chcę Ci pokazać, że jest tutaj

12:55szereg ustawień dla każdego z takich predefiniowanych elementów, ale ich

12:59ustawienie jest naprawdę dziecinnie proste.

13:01Dodatkowo Label'e, czyli to co znajduje się tutaj na dole też

13:05zmienimy kolor na kolor biały, albo może trochę ciemniejszy.

13:08Teraz, żeby w sumie nie aż tak bardzo się te elementy nie wyróżniały.

13:13OK, w tym przypadku niestety nie mamy możliwości zmiany tego na język polski,

13:17days, hours, minutes and seconds, ale możemy zmienić to w ten sposób, aby w

13:20ogóle nie było wyświetlane i dalej jest intuicyjne.

13:23Możemy też zmienić to na jakąś opcję, np.

13:27tą, która tylko pokazuje days, hours, minutes, seconds. Więc możemy wybrać teraz None

13:31aczkolwiek wydaje mi się, że ewentualnie można by było sprawdzić, czy po

13:34opublikowaniu w sekcji Publish this site, tutaj w ustawieniach podaje się język.

13:39Jeśli ustawimy język polski, być może

13:42niektóre z tych właściwości zostaną przetłumaczone.

13:44Akurat tego nie sprawdzałem, ale możemy zostawić to na razie tak jak jest.

13:47No i jeśli chodzi o kolejne właściwości, to mamy tutaj ustawione np.

13:51na całą sekcje jakąś wysokość, jakiś Padding.

13:53Możemy to wszystko sobie zmieniać tak jak chcemy.

13:56Zobaczmy co jest poniżej.

13:57Poniżej znajduje się taki Divider.

14:00To jest coś takiego, co nazywa się komponentem Control.

14:04I ten element możemy sobie dodawać.

14:06To jest właśnie to sekcja Control i ma on kilka zastosowań.

14:10Możemy z pomocą takiej sekcji Control

14:13zaznaczyć sobie różne takie podsekcje na naszej stronie.

14:16Carrds jest edytorem, który służy raczej do

14:19robienia stron typu one page, czyli że mamy jedną długą scrollującą się stronę.

14:23No ale możemy w ramach tej strony zrobić takie sekcje i do tych sekcji będziemy

14:28przykładowo mogli kierować użytkownika z przycisków.

14:31Czyli tu moglibyśmy wrzucić jakiś przycisk np.

14:35zarejestruj się, może w sumie zróbmy to i dodamy button.

14:39Teraz przejdźmy do jego właściwości.

14:42Zapisz się czy zarejestruj się.

14:44Możemy zmienić tekst.

14:48I teraz z pomocą tego przycisku możemy iść albo do jakiegoś konkretnego URL'a, ale w

14:52naszym przypadku chcemy iść do jakiejś sekcji.

14:54Gdybyśmy chcieli iść do tej sekcji to po prostu wpisali byśmy tutaj one.

14:58I w tym momencie automatycznie

15:00zostalibyśmy zescrollowani do tej sekcji.

15:02I znów w guziku możemy sobie bardzo dużo różnych rzeczy pozmieniać, np.

15:07zmienić kolor tekstu.

15:09Możemy też zmienić to, jak ten kolor będzie się prezentował po najechaniu na

15:14przycisk, czyli zarządzać tym ustawieniem hover.

15:16Zobacz, że to widać już tutaj w podglądzie,

15:18że jak najadę to zmienia się ten kolor na trochę bardziej czerwony.

15:21Jeśli chodzi o label można go dodać i jakieś opcjonalne rzeczy.

15:24Ja już to tutaj na razie zostawię, ale przejdę do stylowania, bo tutaj są znajome

15:29ustawienia jeśli chodzi o właśnie taki przycisk.

15:32Czyli możemy wybrać jeszcze jego styl np.

15:34outline albo solid.

15:36Mamy do wyboru tylko label albo np.

15:39label i jeszcze jakaś ikona.

15:41Mamy możliwość zmiany kolorów tekstu.

15:43Czyli przykładowo teraz label możemy zmienić na kolor czarny.

15:47No i oczywiście też właściwości tego tekstu możemy dostosować.

15:51Zmieńmy na nasz font Chivo

15:52i Weight zmieńmy na na zdecydowanie grubszy.

15:56OK, możemy to tak zostawić, chyba, że

15:58jeszcze zmienimy sobie trochę zaokrąglenie narożników.

16:02Corner Reunding mamy tutaj do dyspozycji.

16:05Możemy to zmienić np.

16:06na całkiem zaokrąglone krawędzie.

16:08No chciałem Ci jedynie pokazać, jakby zasygnalizować, co można tutaj osiągnąć.

16:12Natomiast nie będę wypełniał całego tego

16:15layoutu, ale jest to bardzo, bardzo proste, bo zobaczysz, że teraz możesz

16:18kliknąć na dowolny inny element, wybrać upload.

16:21Mamy kolejne zdjęcia i możemy tutaj po

16:23prostu zacząć umieszczać kolejne fotografie, np.

16:27te chcemy wstawić w ten sposób i ona automatycznie została dodana.

16:31Tutaj możemy wstawić jakąś kolejną fotografię.

16:33Wybieram upload.

16:35Zobaczcie jak proste to jest.

16:36Z pomocą spacji na macu mogę sobie podejrzeć różne zdjęcia, które tutaj mam

16:40i jeżeli jakieś mi się szczególnie spodoba, mogę je po prostu bardzo łatwo

16:44tutaj umieścić, wykadrować dodatkowo, no i zostanie wstawione.

16:48Także w ten sposób można sobie po

16:51podmieniać wszystkie komponenty, ale jak widzisz też możemy te komponenty usuwać.

16:55Możemy je zmieniać. Domyślnie tutaj są stworzone takie

16:57strzałki, które jak widzisz mają taką funkcję, że kierują nas do odpowiedniej

17:01sekcji, three czyli ta trzecia sekcja ona jest tutaj.

17:04Jak się w to kliknie, to automatycznie podjedziemy sobie do sekcji trzeciej.

17:07Zresztą zaraz Ci to pokażę.

17:09No i tu mamy w ogóle jakiś taki układ Gallery.

17:12Zobacz, że jest przerzucony komponent

17:13Gallery, który możemy też bardzo łatwo edytować.

17:16Chyba nie ma naprawdę prostszego edytora.

17:18Chyba nie ma to tutaj zbyt dużo tłumaczyć, więc po prostu zobacz czy ta galeria też

17:23fajnie działa, bo w zależności od tego jakie mamy zdjęcia, czy one są kwadratowe

17:27czy prostokątne, one też jakoś fajnie się dostosowuje.

17:31Możemy też zmienić zachowanie po kliknięciu.

17:34Możemy ustawić kilka opcji dotyczących optymalizacji czy ładowania tych zdjęć.

17:38No i jeszcze jedna fajna rzecz, które tutaj jest to formularz kontaktowy.

17:42W zasadzie z tej pierwszej sekcji, o tutaj

17:44warto by było właśnie iść do tego formularza kontaktowego, czyli w

17:48ustawieniach zamiast one wybierzmy contact i zatwierdzimy te zmiany i będziemy

17:52przechodzić teraz do formularza kontaktowego, który został tutaj umieszczony.

17:55Formularz też ma bardzo dużo różnych opcji.

17:57My te opcje będziemy w kolejnych lekcjach jeszcze sobie sprawdzać.

18:00W każdym razie on pozwoli nam

18:02wysyłać wiadomości albo podpiąć się do jakiegoś narzędzia do e-mailingu.

18:06Będziemy tym wszystkim się zajmować.

18:07Pozostaję też pytanie, jak Carrd radzi sobie

18:09z tego typu formularzami i pomówimy jeszcze o tym trochę więcej.

18:12Ale generalnie to jest tak, że nie musimy

18:14w ogóle jakiegoś serwera podpinać, jakiegoś języka scryptowego, serwerowego,

18:18który obsłuży nam ten formularz. Carrd, obsługuje go domyślnie i wysyła zgłoszenia

18:21z tego formularza na nasz email do konta albo email wskazany tutaj jako Recipient Email.

18:26No i to jest bardzo pomocne, aczkolwiek my

18:29możemy z tego formularza dane odbierać w zupełnie też inny sposób.

18:32Jeżeli mamy wersję pro Carrd, możemy

18:34naprawdę dużo tutaj fajnych rzeczy zrobić, co jeszcze później Ci pokażę.

18:37Poniżej jakieś ikonki social media.

18:39Możemy dodać kolejne ikony, możemy usunąć,

18:41połączyć je z naszymi stronami social media.

18:44No i jeszcze jedna rzecz, którą warto

18:46omówić, czyli kolejny ten sam element control, jednak przestawiony.

18:51On jest tutaj jako done.

18:52Jednak przestawiony z tego

18:55Scroll Point, czyli takiej sekcji, do której możemy się scrollować przyciskami na

18:59coś takiego jak Section Break. Section Break powoduje, że

19:04mimo że jest to strona typu one page, czyli robimy w Carrd po prostu jedną długą

19:08stronę, ale tak naprawdę ona może mieć jakieś swoje poszczególne sekcje.

19:12Wyobraź sobie taką stronę SPA, czyli Single Page Application.

19:16Chodzi w tym o to, że ma ona jeden adres URL, aczkolwiek ma np.

19:20zakładki i dane do tych zakładek są ładowane w locie i strona bez

19:23przeładowania pozwala nam wyświetlać jakieś inne swoje stany.

19:27Na takiej zasadzie działa właśnie Section Break.

19:29W momencie gdy go dodamy, wszystko co jest

19:31poniżej Section Break będzie ukryte na tej naszej głównej stronie,

19:34a będzie się wyświetlać dopiero wtedy, kiedy zdefiniujemy jakąś funkcjonalność,

19:39która prowadzi do tego, czyli w tym przypadku akurat w momencie kiedy ktoś

19:43kliknie na send message i wyśle formularz, to on Completion

19:47po wypełnieniu takiego formularza

19:49przekierujemy to na URL i ten URL to będzie done.

19:53Czyli właśnie ta nasza kolejna sekcja z podziękowaniem za przesłanie formularza.

19:58Mimo, że Carrd jest builder'em stron takich

20:01one page, to jak widzisz te strony one page mogą mieć różne takie

20:06stany, które są ładowane zależnie, w zależności od sytuacji np.

20:09stan podziękowania za rejestrację itd.

20:12I takich właśnie sekcji możemy robić

20:14oczywiście wiele, czyli możemy dodawać sobie tutaj kolejne elementy.

20:17Kolejny element Control, który będzie znowu Section Break'iem i np.

20:21nazwiemy go jakoś,

20:22zrobimy tutaj stronę błędu przykładowo formularza albo jakiejś rejestracji, która

20:27też będzie wyświetlana w specyficznej sytuacji.

20:30Ja na razie to usunę, ale chcę, żebyś znał tę koncepcję.

20:33No i dodatkowo po tych sekcjach możemy

20:36poruszać się z pomocą tej małej ikonki, jeśli wybierzemy section to

20:39widzisz, że tutaj mamy dwa stany tej strony.

20:41Pierwszy to home, czyli cała nasza strona,

20:43a drugi to done, czyli właśnie podziękowanie za wysłanie formularza.

20:47Tak jak wspomniałem, możemy też podglądać sobie responsywną wersję.

20:50Możemy ją sobie rozszerzyć, możemy zwinąć w ten sposób.

20:54A ostatnia rzecz, która jest dosyć ciekawa to możliwość wprowadzenie tutaj animacji.

20:59Jeżeli klikniesz tą ikonkę play to

21:01zobaczysz, że nasza strona w jakiś sposób cała działa się ładuje, ona po prostu mignęła.

21:06Czyli jest zastosowany tu taki efekt Fade in,

21:08że wszystko wchodzi, aczkolwiek my możemy ten efekt zmienić.

21:11Mamy na razie przynajmniej w Carrds dwie możliwości tworzenia takich animacji.

21:15Jedna to jest na pustym tle,

21:17gdy tutaj klikniemy mamy sekcję Background,

21:19gdzie możemy ustawić kolor tła dla całej strony i animacje dla tła.

21:23W momencie gdy strona się ładuje tło może

21:25się pojawić, ale to jest dosyć ograniczona funkcjonalność.

21:29Natomiast jeżeli trafimy sobie na cały

21:31taki kontener, który tu wyświetla się na górze jako page, czyli całą naszą stronę,

21:35ona zawiera wszystkie te elementy, to teraz możemy dopracować po pierwsze

21:39ustawienia, różne strony czy jakieś marginesy globalne itd.

21:43ale też ustawienia dotyczące animacji.

21:46No i po pierwsze możemy zadecydować co się

21:48dzieje w momencie gdy strona się ładuje on load.

21:50Możemy to zmienić z takiego pojawiania się zwykłego np.

21:53na Blur In, że najpierw będzie rozmyta, a

21:55później się wyostrzy. Możemy to zrobić z jakimś opóźnieniem,

21:57możemy ustawić czas trwania takiej animacji początkowej.

22:01No i później możemy ustawić też animacje

22:03dla poszczególnych elementów, gdy się ładują.

22:06Czyli przykładowo te kolejne elementy

22:07mogłyby się pojawiać Fade In, z jakimś nawet, zrobimy sobie drobny Delay,

22:12może w ten sposób i ta animacja też będzie trwała.

22:16Może zrobimy ją trochę krótszą 75 setnych sekundy, czyli wszystkie kolejne sekcje

22:20będą też się automatycznie animować w momencie, gdy zescrollujemy je do widoku.

22:24No i On Section Change jeszcze, czyli w momencie, gdy będziemy

22:28się poruszać pomiędzy poszczególnymi sekcjami np.

22:31z pomocą przycisków, możemy zrobić coś takiego jak Zoom In np.

22:35przez jakieś krótkie Duration 25 setnych sekund. Wybieram polecenie done.

22:40I teraz ostatnia rzecz, która nam została.

22:42Żeby to w zasadzie podejrzeć, to jest opublikowanie naszej strony.

22:45Klikamy na tą ikonkę Publish this site i na razie pokarzę Ci tylko bardzo proste

22:49ustawienia, czyli przechodzimy do sekcji Publish.

22:52Wstawiamy tu jakiś tytuł np.

22:53Warszawa, następnie Description.

22:57Na razie użyję tej samej i mamy do wyboru URL w ramach domeny carrd.co

23:01krótko na razie użyjemy właśnie takiego URL'a i musimy tutaj podać nazwę np.

23:06Warszawa.cardd.co, sprawdza to czy taki URL jest dostępny, jest dostępny.

23:10Wybieramy polecenie Publish

23:13i mam informację, że mamy jakieś dwa nie skonfigurowane elementy, więc zobaczmy.

23:17Przejdę do takiego elementu i

23:19zobaczymy który tutaj element może być nie skonfigurowany.

23:22Pokazuje mi to, że galeria jest nie

23:24skonfigurowana, czyli nie ma wgranych prawdopodobnie wszystkich miniaturek.

23:27Ja po prostu ją na chwilę usunę.

23:29To mi jeszcze pokazuje, że ten obrazek chyba jest nie skonfigurowany.

23:31Może spróbuję go usunąć i opublikować to jeszcze raz.

23:35I teraz publikowanie trwa, czyli ta strona wystawia się pod konkretną domeną.

23:39Nie muszę mieć żadnego hostingu, nie muszę nic dodatkowo robić, automatycznie

23:44Carrd dla mnie też przypisał adres SSL do tego.

23:47No i na razie jest to pod adresem Warszawa.carrd.co

23:49mogę zobaczyć tą stronę i teraz zobaczę jak one się ładuje to będzie

23:52automatycznie pokazywana ta animacja, którą wybrałem.

23:55Timer już tutaj działa.

23:57Mogę kliknąć guzik zarejestruj się i przejdę do odpowiedniej sekcji.

24:00W momencie gdy taki formularz wypełnię i

24:02wyśle wiadomość jestem automatycznie przenoszony,

24:04tutaj tej sekcji nie ma, ale ja

24:06po wysłaniu formularza będę automatycznie przeniesiony z animacją do strony

24:10podziękowania, czyli do tej ukrytej sekcji.

24:13I dodatkowo już teraz dostałem maila od Carrds właśnie z tym zgłoszeniem.

24:17Także tak to działa.

24:18Out of the box na modyfikacji gotowego szablonu, a w kolejnych lekcjach zajmiemy

24:22się stworzeniem strony w Carrds od podstaw od czystej kartki.

24:26Do usłyszenia!