Strony WWW bez Kodowania: Tworzenie Sekcji Hero

0:00Cześć!

0:00Witaj w kolejnej lekcji, w której stworzymy następny projekt w Carrds.

0:03Wystarczy przejść do swojego dashboard'u.

0:05Tutaj można zarządzać widokiem jakimiś różnymi opcjami, które są bardzo

0:08intuicyjne i stąd możemy wybrać polecenie New Site, czyli tworzymy nową stronę.

0:13I tym razem jako Starting Point nie wybiorę jakiegoś gotowego szablonu, tylko

0:17stworzę stronę od podstaw, a więc wybiorę tą opcję start from scratch.

0:22W tym momencie ładuje się pusty edytor.

0:24Nic tutaj jeszcze nie ma poza ogólnym kontenerem, czyli ogólnym tym Page.

0:28To tutaj znajdą się wszystkie rzeczy, które będzie zawierać nasza strona.

0:32No i został wstawiony tutaj jakiś przykładowy tekst.

0:35Ten tekst można sobie od razu wyrzucić.

0:37Natomiast kontener Page jest w pewien sposób skonfigurowany.

0:41Ma on styl, który jest domyślny, ale możemy zmienić go np.

0:44na Box, ewentualnie Wide Box, czyli na

0:47całą szerokość, jak również Tall Box, czyli na całą wysokość.

0:52My wybierzemy Wide Box, ale pozycja nie

0:54będzie center, czyli nie chcemy całej naszej strony wertykalnie, czyli w pionie

0:58centrować, tylko będziemy chcieli po prostu umieścić ją na górze i wewnątrz

1:03naszej strony będziemy dodawali kolejne elementy.

1:05Czyli zaczniemy od takich elementów głównych grupujące, czyli od kontenerów.

1:10Kontenery możemy właśnie umieszczać wewnątrz Page'a.

1:13Nie możemy zagnieździć jednego kontenera w drugim, ale dla kontenera możemy wybrać

1:17jakieś predefiniowane ustawienia, czyli jego typ możemy zmienić z Default na

1:21Columns i w ten sposób możemy uzyskać 2, 3, 4, 5 kolumn.

1:25Możemy sobie tutaj je dodawać.

1:27Zmieńmy jeszcze jedno ustawienie.

1:29Gdy kliknę na cokolwiek poza moją stroną, to przeniosę się do sekcji Background.

1:33Domyślnie Background, czyli tło naszej strony ma ustawiony kolor szary.

1:37Chciałbym to zmienić po prostu na kolor biały.

1:39No i teraz mamy stronę wewnątrz kontener.

1:42W nim mamy dwie kolumny, a całe tło strony jest białe i wszystko jest

1:45wyrównane jeśli chodzi o oś wertykalne od góry.

1:47Natomiast jeśli chodzi o oś horyzontalną do środka, czyli nasza strona i tak będzie

1:52powodowała, że ten kontener będzie wycentrowany.

1:55No to teraz zastanówmy się, jaką stronę w ogóle chcemy stworzyć.

1:58Moja propozycja jest związana z takim Lean Starup'owym podejściem, czyli odtworzeniem

2:02jednej ze wczesnych stron, jednej z wielkich firm, które teraz funkcjonują.

2:07Niektóre z nich to miliardowe firmy, np.

2:09takie jak Dropbox czy Uber

2:11czy Airbnb, natomiast charakteryzują się one tym, że zaczynały od bardzo prostych

2:16stron, czyli takich MVP landing page'y, które w jakiś sposób

2:20próbowały sprawdzić czy ta idea jest wartościowa, czy np.

2:25Dropbox się przyjmie.

2:26I to jest bardzo ciekawe podejście.

2:29Tutaj możecie w artykule zobaczyć jakieś wczesne wersje Airbnb, które w zasadzie z

2:33pomocą narzędzi no-code teraz w jeden wieczór odtworzyć.

2:36Możecie zobaczyć też prezentację, możecie właśnie zobaczyć te wczesne landing page Dropboxa

2:44i tutaj akurat historia była taka, że oni nawet jeszcze nie mieli produktu, a już

2:49umieścili jakiś tam link page gdzie zbierali zapisy, umieścili jakieś krótkie demo

2:53explainer video Dropboxa, które na Hacker News zrobiło jakąś ogromną karierę i

2:57zapisało się tam dziesiątki czy setki tysięcy ludzi.

3:00I wtedy oni dopiero zaczęli budować finalne rozwiązanie.

3:03Uber poszedł jeszcze chyba dalej,

3:04tutaj gdzieś poniżej powinna być też lekcja z Ubera.

3:08Tu jest Groupon, więc Uber wyglądał na początku tak, że

3:12po prostu opublikowali stronę, na której przedstawili trzy główne rzeczy,

3:16które Uber robi w zasadzie w trzech krokach jak można publikować automatycznie

3:20tweety, następnie guzik Plans and Pricing i wtedy po przejściu do guzika Plans and Pricing

3:25przechodziło się do strony, że "ok, wiesz co? jeszcze nie jesteśmy gotowi, więc zostaw

3:30swój email i jeśli ta idea Ci się podoba i poinformujemy Cię, kiedy wystartujemy.''

3:35To jest genialne podejście, bo po prostu oszczędza nam mnóstwo czasu i pozwala

3:39sprawdzić taką ideę przed tym, jeszcze zanim zaczniemy budować rozwiązanie.

3:42To jest też taka, takie podejście, do którego ja chcę Was ośmielić.

3:46Zresztą strona Buffer'a została później z upgrade'owana o jeden krok po drodze,

3:50czyli nawet po kliknięciu Plans and Pricing

3:52wyświetlały się wstępne plany z cenami i ludzie po prostu wybierali jakiś plan np.

3:57pięć dolarów na miesiąc i wtedy dopiero

3:59dostawali informację, "że wiesz co? Jeszcze tego planu nie ma,

4:01ale pracujemy nad tym,

4:02zostaw nam maila."

4:03W ten sposób bardzo łatwo było sprawdzić, jak takie rozwiązanie będzie działać.

4:07Natomiast przygotowanie takiej strony np.

4:10z pomocą Carrd jest banalnie proste i potrwa może z pół godziny.

4:14Mamy tutaj jeszcze przykład Ubera, ale ja w zasadzie chciałbym się skupić na

4:20przykładzie jeszcze innym na przykładzie Slack'a.

4:23Jeżeli wejdziesz na stronę The Wayback Machine, to tutaj możesz sprawdzić np.

4:29adresy takie jak właśnie Uber czy Dropbox i

4:31zobaczyć ich wersję przykładowo z 2010 roku.

4:35Ja wybrałem sobie którąś wersję strony Slack'a z 2014 roku.

4:38Wtedy kiedy zaczynali, też nie mieli jeszcze gotowego produktu, a dopiero

4:41zbierali listę osób i chciałbym taką stronę odtworzyć

4:45teraz z pomocą Carrds. Pobrałem potrzebne

4:47zasoby, czyli w zasadzie kilka obrazków i spróbujemy w miarę wiernie ją odtworzyć.

4:51Oczywiście bez logowania i rejestracji, bo nie jest nam to na razie potrzebne, ale

4:55chcemy zbierać jakieś maile, więc to co robimy na początku to staramy się

5:00utworzyć taką strukturę,

5:01jeżeli chcemy mieć coś np. po lewej i po prawej stronie albo w środku, to dobrym

5:05pomysłem jest zorganizowanie właśnie takiego kontenera w kolumny.

5:10Jeżeli wybierzemy Default to wszystko, będziemy mogli mieć np.

5:12wyśrodkowane, ale jeśli wybierzemy kolumny.

5:15To teraz dobrą sztuczką jest możliwość zrobienia trzech kolumn,

5:18gdzie widzisz one będą rozłożone w ten sposób, że będziemy mogli mieć coś na

5:21środku i będziemy mogli mieć też coś po lewej i po prawej stronie.

5:24Potrzebujemy też pod cały taki kontener

5:26umieścić tło, więc przejdźmy do jego sekcji Appearance i w tym miejscu, gdzie znajduje się

5:31Background, wybierzmy image, obrazek, a następnie z upload'ujmy obrazek.

5:35Ja pobrałem te obrazki do sekcji Landing Page

5:37i to jest akurat ten obrazek, który wgram.

5:40Teraz go przeciągne.

5:43I zaakceptuje te zmiany.

5:46No i teraz musimy zadbać o jego pozycjonowanie.

5:48Czyli przydałoby się, żeby cały ten

5:51kontener był rozciągnięty na całą szerokość strony.

5:53Czyli Width, szerokość przeciągamy do

5:55prawej strony i zobacz, że mamy tutaj opcję full, max,

5:59mamy procenty, ale mamy też opcję full screen,

6:02czyli rozciągnięcie tego na całą szerokość strony.

6:05Wysokość na razie możemy powiększyć trochę

6:08później, ewentualnie zmienimy ją na auto, ale teraz

6:11powiększymy, żeby trochę łatwiej nam się z tym pracowało.

6:14OK, zostawmy to tak jak jest i dodajemy kolejne elementy.

6:17Potrzebujemy na pewno obrazek, image,

6:19który został automatycznie wstawione do lewej kolumny.

6:22I bardzo dobrze.

6:22Możemy dla niego szybko z upload'ować logo i to jest to

6:25logo Landing logo white wybierzemy i powiększymy.

6:29Później dostosujemy jeszcze położenie tych elementów.

6:31Wszystkie inne rzeczy.

6:31Na razie zróbmy podstawową strukturę, czyli dodajemy kolejny element.

6:34Będzie to tekst i zobaczmy na ten tekst.

6:36To jest ten główny nagłówek strony,

6:39więc zaznaczmy może nawet ten tekst od razu i wypełnijmy go, a następnie zmieńmy

6:43to na albo Side Title, albo Main Heading,

6:47nieważne. I umieśćmy go tutaj. Znów,

6:49na razie zależy mi tylko i wyłącznie na strukturze więc zduplikuję

6:52sobie to pole pod spodem, a następnie

6:55przerzucę do niego tekst, który się tutaj znajduje.

6:58Później zrobimy wszystkie style, jakoś to ładnie do stylujmy.

7:02No i potrzebujemy też, potrzebujemy signup form, czyli formularz.

7:07Jeśli wybiorę teraz ikonkę plusa to możemy po prostu wstawić sobie tutaj formularz.

7:11No i domyślnie jest tutaj name, email i message.

7:14Typ tego formularza to Contact.

7:16Możemy zmienić jeszcze go na Signup

7:19i jeśli dysponujesz darmową wersję to chyba to jest ostatnia opcja, z której

7:22możesz skorzystać, więc możesz to zrobić właśnie jako Signup.

7:25Możesz ewentualnie to zrobić jako custom.

7:27Pokażę Ci w wersji Pro jak można sobie

7:29zrobić taki swój własny customowe formularz i wtedy po wyborze opcji custom

7:35mamy możliwość zdefiniowania każdego z pól.

7:38Czyli to pierwsze pole to będzie email adres.

7:45I jego tekst, jego typ wybieramy

7:46na email po to, żeby Carrd pomógł nam walidować maile, czy są poprawnie tutaj wpisywane.

7:51Chcemy, żeby było to obowiązkowe, więc nie

7:53zaznaczamy optional, identyfikator i Default Value na razie zostawiamy bez zmian, a następnie

7:59dodajemy kolejne pole i kolejne pole to będzie Company Name.

8:03Teraz wypełniamy sobie Company Name.

8:06Zobacz jaka sprytna sztuczka.

8:08W ten sposób od razu zakładamy, że Dropbox

8:11jest dla firm albo do używania przez osoby, które pracują w jakiś firmach.

8:15I tutaj możemy zostawić po prostu Text.

8:17Zostawiamy to też jako pole obowiązkowe i wybieramy polecenie Done.

8:21Mamy jeszcze guzik Sign Up for free, czyli musimy zmienić nazwę na guziku submit.

8:26W trzeciej zakładce znajduje się Button i tutaj zmieniamy na Sign Up for Free.

8:34I po kliknięciu co się stanie? Możemy tutaj już kogoś z charge'ować z pomocą Stripe'a.

8:39Na razie zostawiamy Default, a to Default ustalimy sobie tutaj za chwilę.

8:43Na razie zależy mi tak jak powiedziałem na strukturze, a nie na funkcjach.

8:47Także, zrobiliśmy strukturę tej głównej sekcji, aczkolwiek potrzebujemy jeszcze jeden

8:51kawałek tekstu, który będzie wyświetlany pod formularzem.

8:54Możemy od razu go tutaj wrzucić jako text.

8:57I mamy już tekst zrobiony.

8:59Następnie spróbujmy całość

9:01do stylować, zaczynając od tego, jak układają się kolumny.

9:04Jeśli wybiorę logo Slacka, mogę szybko

9:06zmniejszyć jego szerokość, natomiast on dalej jest w taki kolumnie.

9:10Ona ma 33, to ma około 33, to ma 34, a ta ma 33%,

9:15ale chcielibyśmy, żeby te wszystkie

9:17kolumny były jednak rozciągnięte na całą szerokość.

9:20Jeśli przejdziemy do głównego kontenera, no to okaże się, że co

9:23prawda dla niego szerokość wybraliśmy na fullscreen, co zresztą jest oczywiste, no bo

9:27obrazek się wyświetla od lewej do prawej krawędzi, ale jeszcze dodatkowo on ma

9:32takie ustawienie jak Contents, czyli jak mają wyświetlać się właśnie te kolumny w

9:35środku i możemy wybrać ich pozycję, ale też możemy zarządzać ich szerokością.

9:40W tym momencie jest ona wybrana na auto,

9:43ale to co możemy zrobić to po prostu przeciągnąć to do prawej strony i w ten

9:47sposób okaże się, że rozciągniemy to od lewej do prawej strony.

9:51Cała treść zostanie rozciągnięta tak jak chcieliśmy.

9:53No i ewentualnie jeszcze możemy

9:56zarządzać takim odstępem pomiędzy kolumnami, który jest tutaj zdefiniowany jako Gutters.

10:01Czyli to jest ten margines

10:03tutaj ewentualnie tym możemy coś troszeczkę jeszcze pozmieniać.

10:06To co możemy jeszcze pozmieniać to np.

10:08jeżeli wybierzemy logo, to jego położenie możemy też zmienić.

10:14Tutaj musielibyśmy

10:15przejść do tej pierwszej kolumny, w której się znajduje, w kontenerze, w której się

10:19znajduje logo, czyli do tej i moglibyśmy Alignment zmienić np.

10:22na Center czy na Right i wtedy nasze logo powinno się wyświetlić bliżej treści.

10:26I chyba tak rzeczywiście byśmy je chcieli.

10:29Dobra, no to teraz zaznaczamy sobie Be less busy i przechodzimy do sekcji Appearance

10:33zmieniamy kolor na kolor biały.

10:36Zmieniamy font na font Lato

10:37wydaje mi się, że taki tam jest albo bardzo podobny i mniej więcej zmieniamy

10:42wielkość tak, żeby nam się może zmieściło rzeczywiście w tej jednej linii.

10:45Ale zobaczmy. No chyba jest okej.

10:48Tyle, że fajnie by było zmienić Weight.

10:50Więc muszę trochę zmniejszyć, tak aby to było pogrubione.

10:54Co tutaj jeszcze mamy?

10:55Mamy taki delikatny cień pod tymi w zasadzie wszystkimi tekstami,

10:59co ciekawe, tutaj jest taka sekcja jak Drop Shadow i możemy z niej wybrać cień,

11:03czyli możemy wybrać jakiś ciemny cień i zobacz, że on domyślnie wygląda bardzo podobnie.

11:07Możemy zmienić jego kąt padania Angle,

11:10aczkolwiek zostawimy taki Distance, możemy go bardziej odsunąć lub mniej.

11:14Wybierzemy sobie ten Distance na 125 czy troszeczkę więcej np. tyle

11:18możemy zawsze tutaj kliknąć i wpisać

11:20odpowiednią wartość z palca i Blur rozmycie trochę zmniejszymy.

11:24Czyli możemy zrobić albo 0 albo jakąś naprawdę bardzo niską wartość, że to

11:29rozmycie jest prawie niewidoczne tak jak tutaj.

11:31Może nawet moglibyśmy zrobić tutaj 0.125

11:35i byłoby trochę jeszcze bardziej podobne do tego.

11:37No dobra, zostawmy.

11:38Wydaje mi się, że mamy to, co chcieliśmy osiągnąć.

11:42No i jak jeszcze zrobić tutaj margines dla tego elementu od góry?

11:45No i co prawda mamy tutaj coś takiego jak Margins, ale to akurat nie zadziała w tym

11:48przypadku, bo to po prostu robi margines od dołu.

11:51Moglibyśmy przejść do całej sekcji ogólnie

11:53i zrobić trochę większy Vertical Padding np. w ten sposób.

11:56Aczkolwiek tutaj problematyczne jest to, że to też przesuwa logo Slack'a w dół, a my

12:00chcielibyśmy, żeby to logo pozostało na górze.

12:02Więc jak to zrobić? No cóż,

12:04tu można trochę hakować Carrd, bo można

12:07powiedzieć, że to jest jakieś jedno z ograniczeń, na które trafiliśmy, ale

12:10zawsze kreatywnie przesuwając różne suwaki można coś wymyślić.

12:13Przykładowo proponuję, żeby zmienić na tym

12:15elemencie Line Spacing na 2.5 maksymalną wartość i już wygląda to

12:19prawie tak jak byśmy chcieli, więc teraz jest praktycznie dobrze.

12:23Gdybyśmy chcieli to możemy w zasadzie nawet jeszcze zduplikować sobie to.

12:27A tutaj zamiast Be less busy wpisać po prostu nic się nie da.

12:32Ale da się np.

12:33kropkę i gdybyśmy chcieli, możemy taki element nawet ukryć.

12:37W tych zaawansowanych ustawieniach

12:39odnośnie stylów możemy wpisać sobie nawet customowy CSS jeżeli go znamy np.

12:43opacity i tutaj wybrać wartość 0 i po prostu to ukryjemy.

12:48No i teraz taki element już pozwoli nam na np.

12:50możemy zmieniać, zmieniać dla niego

12:52teraz Line Spacing i będziemy mogli

12:54odsuwać, przesuwać dokładnie tak jak chcemy, więc no opcji jest naprawdę dużo.

12:58I to nie jest wcale tak, że jeżeli czegoś nie ma w Carrds, nie da się tego wymyślić.

13:02Ja to usunę, bo wystarczy mi taki odstęp,

13:04czyli właśnie ten Line Spacing i przejdę do sterowania drugiego fragmentu tekstu.

13:08Widzę, że ten tekst został jakoś tutaj rozbity na linie

13:11niepotrzebnie więc skasuję te entery i zastąpię je spacjami.

13:14Teraz wybiorę style i kolor biały.

13:18Wybierzemy tutaj też ten efekt Drop Shadow,

13:20czyli jakiś taki delikatny czarny czy bardzo ciemny cień.

13:25Zostawię ustawienia, może Blur tylko

13:27troszeczkę zmniejszymy i no trochę jest za duży, czyli znowu 125, ale zostawmy to.

13:35Jest naprawdę bardzo podobne do tego co mamy tutaj.

13:38Rozmiarem fonta też nie będę się już aż tak przejmował, ale zmienię to jednak na

13:42Lato, tak żeby było podobne do tego co mamy tutaj.

13:45Wydaje mi się, że jest ok.

13:47W związku z tym to co możemy zrobić teraz

13:49to sekcji Appearance, dodać to jako styl, czyli dodajmy sobie styl i to będzie np.

13:54Paragraph.

13:57Teraz będziemy mogli tego typu styl zastosować sobie np.

14:00na to pole tekstowe, czyli po prostu klikamy paragraph i jest zrobiona.

14:04No dobrze, to można powiedzieć, że główną strukturę mamy zrobioną.

14:08Wypadałoby teraz zająć się formularzem, ponieważ jest tu trochę więcej ustawień.

14:12Myślę, że warto to zrobić w osobnej lekcji, na którą Cię zapraszam.