VIDEO TRANSCRIPTION
Dariusz Pichalski. WordPress & Marketing
🤖 Rewolucja AI w WordPress: Jak Zrobić Stronę Internetową w 30 Minut 🚀 Tutorial
Description generated by Skrybot
No description has been generated for this video.
Transcription generated by Skrybot
Cześć! W tym video pokażę Ci jak w nieco ponad pół godziny zrobić kompletną stronę internetową na WordPress przy wykorzystaniu w 100% ze sztucznej inteligencji. Jest to realna strona mojego klienta, do której link znajdziesz w opisie tego filmu. Przy tworzeniu tej strony skorzystamy z motywu Astra, który dosłownie kilka dni temu wprowadził AI website Baldir, dzięki czemu w 100% możemy tę stronę zbudować dzięki AI. Wszystkie teksty, które widzisz teraz na tej stronie właśnie zostały wygenerowane przez sztuczną inteligencję zdjęcia, zostały pobrane z darmowych banków zdjęć. Całość razem z instalacją WordPressa zajęła trochę ponad 30 minut. Mamy tu 4 zakładki. O nas usługi kontakt. Każda z tych zakładek jest wypełniona w 100% treścią stworzoną przez sztuczną inteligencję. W pierwszym kroku kupimy domenę oraz szybki hosting WordPress.
Następnie zainstalujemy motyw Astra. Najlepszy i najszybszy motyw do tworzenia stron internetowych na WordPress przy użyciu edytora Gutenberg. A następnie korzystając właśnie z AI website Baldir stworzymy taką prostą filmową stronę internetową, którą będziesz mógł oczywiście dalej edytować. Strona jak widzisz jest zoptymalizowana pod kątem szybkości i bardzo szybko wczytuje się zarówno na urządzeniach stacjonarnych, jak i na urządzeniach mobilnych. Wynik poniżej 90 punktów. W opisie tego filmu oraz w przypiętym moim komentarzu znajdziesz znaczniki czasu, dzięki czemu możesz pominąć pewne rozdziały jak np. instalację WordPressa, jeśli Ciebie to nie interesuje. Tylko w pół godzinki. Czas start, zaczynamy. W pierwszym kroku kupimy domenę, hosting oraz zainstalujemy na naszej domenie WordPressa.
Także jeśli już masz na swojej domenie, na której chcesz zbudować stronę internetową zainstalowanego WordPressa, śmiało możesz pominąć ten krok. Natomiast jeśli jeszcze nie masz domeny, nie masz hostingu, to są to te dwie rzeczy, które będą Ci niezbędne do tego, aby postawić swoją wymarzoną stronę na WordPressie. Domena, czyli adres Twojej strony internetowej, pod którą będzie ona się wyświetlała. Natomiast hosting to jest taki komputer, który pracuje 24h na dobę przez 7 dni w tygodniu. Taki dysk, na którym są przechowane pliki Twojej strony i z którego ta strona się po prostu czytuje. Ja ze swojej strony polecam usługi Cyberfolks. Z firmą to związane jestem od 2010 roku. Wtedy ona nazywała się bodajże Hecko. I tutaj właśnie mamy pakiet hosting WordPress. Szybki hosting WordPress.
To jest bardzo ważna rzecz, która będzie wpływała w dużej mierze na szybkość Twojej strony internetowej, czyli hosting. Hosting w Cyberfolks. Tutaj mamy właśnie pakiety. Jest bardzo szybki. Tutaj właśnie chociażby widzisz, jest technologia Lightspeed Cash, Redis. I tutaj właśnie mamy różne pakiety. Jeśli jest to taka strona, wizytówka, czy też mały sklep internetowy, śmiało możesz wybierać między tymi pakietami WPAP, WP GO. W opisie tego filmu znajdziesz w ogóle link afiliacyjny z moim kodem rabatowym, dzięki czemu ta cena, którą tutaj widzisz, będzie jeszcze niższa. Czym różnią się te pakiety WPAP od WP GO? Głównie tutaj widzimy ceną. W pierwszym roku WPAP jest droższy, natomiast po roku przy przedłużaniu jest sporo tańszy.
Tutaj oczywiście mamy transfer bez limitów, konta email bez limitu, natomiast tak jak mówię na małą stronę internetową 500 giga i 15 kont email śmiało Tobie wystarczy. Co też jest bardzo ważnego, jeśli chodzi o hosting WordPress w Cyberfolks. Oprócz tego, że jest to bardzo szybki hosting, to sama instalacja WordPressa razem z certyfikatem SSL, dzięki czemu Twoja strona internetowa wyświetla się jako połączenie bezpieczne, zajmuje dosłownie jedno kliknięcie myszy, co bardzo ważne, aby optymalizować właśnie czas pracy. Także zdecyduj się na któryś z tych dwóch pakietów, najlepiej z mojego linku, wtedy będzie to jeszcze tańsze i wybierz opcję uruchom bezpłatnie.
Tutaj w koszyku możesz dodać do koszyka monitoring Twojej strony, ja z tej usługi nie korzystam, natomiast jeśli na przykład masz stronę internetową u innego operatora niż Cyberfolks, możesz zupełnie za darmo przenieść swoje usługi właśnie do Cyberfolks, wystarczy tutaj dodać do koszyka przeniesienie strony gratis, skontaktować się z kimś z zespołu Cyberfolks, możesz na przykład na czacie korzystając z tej chmurki. Teraz tak, jeśli jeszcze nie masz domeny, no to oczywiście tutaj możesz dobrać domenę, kupić domenę, czyli adres Twojej strony internetowej. Na początku oczywiście znajdziemy taką domenę, czy ona w ogóle jest wolna, z końcówką pl. Widzimy, że taka domena jest wolna, kosztuje 9,90, możemy z tego poziomu dodać domenę właśnie do koszyka i klikamy dalej.
Następnie po raz kolejny klikamy dalej i tutaj oczywiście tworzymy konto klienta i dokonujemy zakupu za pośrednictwem szybkich płatności online. Gdy hosting i domena są już kupione, czas zalogować się w Twoim profilu panelu klienta właśnie w Cyberfolks. Logujemy się tutaj w prawym górnym rogu i tutaj mamy dwie takie bardzo ważne rzeczy. Pierwszy to jest właśnie panel klienta po zalogowaniu się, w którym będziemy widzieć wszystkie nasze kupione, zamówione usługi, natomiast tu też jest bardzo ważna rzecz panel admin. Panel admin jest to logowanie się już do Twojego hostingu, gdzie będziemy instalować u WordPressa. Na razie zalogujemy się w panelu klienta, ponieważ z panelu klienta możemy też przeklikać się do panelu hostingowego. Tak właśnie wygląda panel klienta w Cyberfolks. Tutaj mamy bardzo ważną zakładkę Hosting.
Przechodzimy sobie do niej i tutaj możemy zalogować się właśnie do naszego panelu hostingowego. Jeśli jeszcze tutaj nie masz opcji, zaloguj się do DirectAdmin i na przykład masz skonfiguruj konto, no to klikasz tą opcję i ustawiasz sobie hasło do Twojego panelu hostingowego. Ja zaloguję się już do mojego panelu hostingowego, który otwiera mi się w oddzielnym oknie i tutaj należy dodać naszą domenę, na której będziemy stawiać naszą stronę dzięki AI plus WordPress. Klikamy Dodaj domenę i tutaj bardzo ważna rzecz. Klikamy Zainstaluj WordPress z Redis oraz zostawiamy tę opcję domyślną włącz separację domeny. Dzięki czemu nasza domena będzie odseparowana w naszym hostingu. Ma to duże znaczenie, jeśli na naszym profilu hostingowym będziemy mieć więcej niż jedną stronę.
W momencie, gdy jedna z naszych stron na przykład zostanie zhakowana, zarażona jakąś infekcją, to ta infekcja nie przejdzie na inne strony, dzięki właśnie tej separacji. I to jest ta cała magia, o której mówiłem, jeśli chodzi o hosting w CyberFolks i jednym kliknięciem myszy zainstalujemy WordPress z Redis. Klikamy Dodaj domenę i mamy informację, domena została utworzona. Przechodzimy tutaj na stronę główną, mamy tutaj właśnie naszą domenę, możemy ją kliknąć i mamy tu opcję Moje aplikacje. Moje aplikacje i tutaj będziesz widział wszystkie swoje aktywne instalacje WordPressa. Jak widzisz, nie ma tutaj tej instalacji WordPress, którą przed chwilą zrobiłem, spokojnie, za chwilę ona się tutaj pojawi.
Generalnie jeśli dopiero kupiłeś domenę oraz hosting i stawiasz tutaj właśnie świeżego WordPressa, to jest potrzebny czas na propagację, aż internet przemieli twoją domenę, swój hosting i zacznie się ona właśnie pod adresem www wyświetlać. Odświeżam po chwili właśnie tutaj moją stronę i jak widzisz mamy tutaj ten domenę. Tutaj wchodząc w tą ikonę klucza możemy właśnie ustawić też login oraz hasło do logowania się do naszego WordPressa i tutaj zalecam właśnie w kwestii bezpieczeństwa ustawić bardzo silne hasło i bardzo trudne do zgadnięcia login. Gdy ustawicie, klikacie Zapisz wszystkie. I teraz już możemy właśnie zalogować się do kokpitu naszej świeżej instalacji WordPress. Mamy nazwę domeny, a poniżej właśnie mamy link do logowania, czyli jest to domyślnie, jest to nazwa domeny slash WP myślnik admin.
Klikam w tę opcję i będę już auto zalogowany właśnie w kokpicie WordPressa na mojej domenie, na której będziemy stawiać sobie stronę dzięki AI. Strona w najnowszej wersji WordPressa właśnie wygląda w ten sposób i tutaj już za chwilę właśnie pojawi się strona stworzona dzięki AI. Aby wrócić do kokpitu WordPressa klikam tutaj tę opcję i cockpit. Jest tu jak widzisz sporo zakładek, nie będę ich teraz tutaj omawiał, na to przyjdzie pora w stosownym momencie, ponieważ gdybym teraz to omawiał, to i tak byś nic z tego nie zapamiętał.
Co bardzo ważne, o czym tylko wspomnę, jest od razu zainstalowana wtyczka Lightspeed Cache, gdzie wchodzimy w zakładkę Object i jak widzisz mamy rozszerzenie Redis włączono, czyli ta technologia Redis już działa, dzięki czemu nasza strona na hostingu w CyberFox jest sporo szybsza. Dobrze, także zabierajmy się teraz za stworzenie strony internetowej dzięki AI i motywu Astra. Wchodzimy sobie w pierwsze okazje w zakładkę Wygląd oraz Motywy i tutaj należy kliknąć Dodaj nowy motyw i tutaj wybieramy Astra. Wpisujemy Astra, Astra jest to najpopularniejszy, najlepiej oceniany i najszybszy motyw WordPress, tak? Jest dostępny zarówno w wersji darmowej, z której tu będziemy korzystać jak i w wersji płatnej.
Gdybyś chciał zainwestować w Astra w wersji płatnej, to w opisie tego filmu znajdziesz mój link afiliacyjny, dzięki czemu zyskam na małą kawkę, jeśli kupisz właśnie z tego linku. Dobrze, to jest właśnie ten motyw, klikamy Zainstaluj i klikamy Włącz. Na razie tutaj nic jeszcze nie robimy, przejdziemy sobie tylko na chwilę tutaj do ustawień. Wchodzimy sobie w ustawienia oraz czytanie i tutaj zmieniamy tę opcję, klikamy Poprość wyszukiwarki o nieindeksowanie tej witryny. Bardzo ważna opcja, nie chcemy aby na razie Google indeksowało naszą stronę. Nasza strona jest teraz takim placem budowy, więc dopiero poprosimy Google o zaindeksowanie naszej strony, jak będzie ona już gotowa. Więc jeśli będzie już gotowa, wejdź tutaj w ustawienia, czytanie, pamiętaj o tym i tu na dole odznacz ten checkbox.
Na razie go zaznaczamy, klikamy Zapisz zmiany. Następna bardzo ważna rzecz, wchodzimy sobie w ustawienia oraz bezpośrednie odnośniki i wybieramy tą przedostatnią opcję, tak aby linki do naszych zakładek na naszej stronie były po prostu przyjazne pod kątem SEO, to ma wpływ na pozycjonowanie się strony. Klikamy Zapisz zmiany. I teraz już możemy sobie tutaj przejść do zakładki Astra. Ta zakładka Astra tutaj pojawiła się właśnie po instalacji naszego motywu Astra. I tutaj mamy opcję Starter Templates. Możemy właśnie zainstalować ten importer stron demo szablonów, a także to narzędzie dzięki któremu Zip WP, dzięki któremu właśnie będziemy tworzyć naszą stronę w odpresie przy wykorzystaniu AI, sztucznej inteligencji. Klikamy Install and Activate i za moment właśnie to ta wtyczka będzie już aktywna.
I tutaj pojawi się taka właśnie opcja do wyboru. Nas oczywiście interesuje opcja druga, czyli AI Website Baldier, tak? Klikamy właśnie tę opcję, Try the new AI Baldier. W tym momencie będziemy właśnie łączyć się z narzędziem Zip WP, które właśnie służy do tworzenia stron na Wordpressie w oparciu o AI. Klikamy opcję Let's get started. It's free. I tutaj należy właśnie zalogować się do narzędzia Zip WP. Możesz zalogować się właśnie jednym kliknięciem myszy, logując się poprzez twoje konto na Gmailu. W darmowej wersji Zip WP możesz stworzyć w ten sposób trzy strony. Tak więc w zupleności na naszą stronę to wystarczy. Klikamy login with Google in one click.
Łączymy naszą stronę na Wordpressie właśnie z narzędziem Zip WP, klikamy continue i w tym momencie już zostajemy przekierowani do konfiguratora naszej strony internetowej, konfiguratora właśnie opartego o sztuczną inteligencję, gdzie wyklikamy sobie dosłownie za pomocą kilku kliknięć myszy naszą stronę internetową. W pierwszym kroku tego konfiguratora AI wybieramy rodzaj działalności, czego dotyczy nasza strona internetowa na Wordpressie. Mamy tu kilka opcji do wyboru. Generalnie mi najbardziej odpowiadają opcje te biznesowe. Oczywiście jeśli masz restaurację to tutaj wybierz restaurację. Jeśli jest to strona dla freelancera gdzie główną rolę grasz ty jako twoja persona wybierz personę. Jeśli jest to strona sprzedażowa one page typu sales page, landing page wybierz oczywiście landing page a tak jeśli jest to strona medyczna na przykład gabinetu stomatologicznego, okulisty, pediatry no to oczywiście medical.
Ja wybiorę tutaj opcje biznes ponieważ jest to będzie to strona internetowa dla firmy usługowej zajmującej się układaniem paneli. Klikamy continue tutaj wpisujemy nazwę naszej firmy i klikamy continue. I tutaj następnie jest bardzo ważna rzecz. Tutaj należy dać ten kontekst sztucznej inteligencji tak aby strona internetowa, którą zrobi AI była jak najbardziej zbieżna z naszą firmą, z naszymi oczekiwaniami. I tutaj dzieje się magia. Cały na biało wchodzi chat GPT. Pokażę ci właśnie moje prompty jak to tutaj w moim przypadku wygląda. Poniżej znajdziesz zresztą te prompty w opisie tego filmu także nie musisz tutaj notować długopisem. Wystarczy, że je skopiujesz u siebie. I prompt wygląda następująco. Wciel się wybitnego projektanta stron internetowych z pięcioletnim starzem.
Czyli dajemy ten kontekst sztucznej inteligencji jak ma się zachowywać, że ma się zachować jako wybitny projektant stron internetowych. Zaprojektuj schemat strony internetowej dla jednoosobowej firmy czyli z tym się montażem, układaniem paneli podłogowych laminowanych i hybrydowych. Czyli piszemy co i dla kogo ma zrobić sztuczna inteligencja. Strona ma składać się z następujących zakładek. Strona główna usługi ONAS Contact. I tutaj mamy właśnie już schemat. Sztuczna inteligencja zaprojektowała nam zakładki tak jak chcieliśmy i zaprojektowała wstępnie sekcje jakie mają być na tej stronie. Na przykład mamy zakładkę usługi i widzimy że jest tam opis usługi, cenik, galeria usług. Mamy ONAS Contact czyli to co sobie tutaj chcieliśmy. I teraz dajemy kolejny prompt sztucznej inteligencji. Teraz wciel się wybitnego kopyrajtera z dziesięcioletnim starzem i wypełnij te elementy tekstem.
Pisz w sposób perswazyjny językiem korzyści stosuj krótkie zdania. Czyli tutaj dajemy znowu kontekst, że sztuczna inteligencja AI ma zachowywać się jako właśnie ten wybitny kopyrajter i wypełnić te tutaj sekcje utworzone właśnie tekstem stosując właśnie język korzyści, czyli ten język perswazyjny tak aby tutaj przekonać do skorzystania z naszych usług odwiedzającego stronę internetową i aby AI prosimy stosowało krótkie zdania. Na stronach piszemy krótkie akapity, krótkie zdania. Widzimy już, że sztuczna inteligencja znowu nam dała ten tutaj wsad niejako. Mamy nagłówek, jaki tekst ma być na banerze głównym. Tutaj widzimy sekcję informacyjną, widzimy usługi, ONAS, kontakt. I usługi oraz sekcja ONAS tutaj jest moim zdaniem zbyt krótka, więc poprosiłem tutaj Chad GPT aby mi te rozwinął. Rozwin zakładkę ONAS. I już mamy tutaj piękną zakładkę ONAS.
Następnie poprosiłem o rozwinięcie zakładki usługi i mam dużo więcej tekstu. I aby rozwinął mi Chad GPT także sekcję krótką informacyjną na stronie główną. Tutaj również mamy rozwinięcie tego. I teraz to, co tutaj właśnie widzisz, to jest ten kontekst, ten wsad, który tutaj wsadzimy, aby AI, sztuczna inteligencja na WordPressie zrobiła nam właśnie taką stronę według tego schematu. Ona nie zrobi tego niestety 1 do 1. To nie jest jeszcze na tyle mądre, ale później oczywiście w toku edycji naszej strony będziemy mogli wklejać dokładnie te teksty, które tutaj sobie zażyczyliśmy. I tutaj wklejam w języku angielskim taki właśnie oto tekst. Poniżej struktura strony internetowej oraz tekst na stronę internetową. Chcę aby strona była w języku polskim z dokładnie takimi tekstami jak poniżej.
Chcę aby były na niej następujące zakładki. Tak? Tutaj wypisuję oto struktura i tekst na stronę internetową. I teraz właśnie ten taki wstęp wklejam właśnie w tym miejscu. I tutaj stawiamy sobie w klamereczkę bierzemy i kopiujemy tutaj właśnie to, co sztuczna inteligencja nam zaproponowała. Kopiujemy. I teraz jeszcze tylko podmienimy tutaj właśnie ten tekst o nas na ten dłuższy, który mamy właśnie tutaj. Tutaj sekcja zespół to może sobie usuniemy, to nie jest potrzebne. Skopiujemy sobie jeszcze tutaj usługi, nasza oferta. Podmienimy właśnie za ten krótki tekst. I jeszcze tutaj była zakładka sekcja krótka sekcja informacyjna, to również tutaj skopiujemy. Ta krótka sekcja informacyjna jest właśnie tutaj jako jedna z sekcji na stronie głównej. Całość tutaj wezmę właśnie może w klamerkę, w nawias kwadratowy.
Dobrze i tutaj mamy już ten krok mamy właśnie wykonany i klikamy continue. W kolejnym kroku uzupełniamy dane kontaktowe do nas, e-mail, adres fizyczny oraz numer telefonu, a także linki do social media. Możemy oczywiście dodać więcej social media, ja zostawię na razie Facebooka, klikamy continue i tutaj w kolejnym kroku też dzieje się magia, że tak powiem, ponieważ wybieramy zdjęcia z darmowego banku zdjęć Pexels. Tutaj mamy frazy kluczowe, możemy też tutaj wpisać, ja wpiszę flooring, podłogi i tutaj możemy właśnie wybrać te zdjęcia, które nas interesują na naszą stronę internetową. Odhaczymy te, które uważamy za niepasujące do naszej strony. Warto tutaj wziąć zdjęcia zarówno w poziomie jak i w pionie. Zdjęcia hotelu to nie, tutaj też nie. Zdjęcia armatury, ceramiki w łazience też nie.
Także możesz tutaj wpisać kilka fraz, klikając enter i tutaj właśnie wpisałem teraz laminowane podłogi, najlepiej właśnie robić to w języku angielskim. Wtedy te wyniki są najlepsze, najwięcej po prostu mamy do wyboru tych zdjęć. Dobrze, wybrałem w sumie 19 zdjęć, uważam, że to i tak jest dość dużo. Także klikamy continue i kolejny krok już jest bardzo, bardzo przyjemny, ponieważ tutaj wybieramy już szablon naszej strony internetowej. Tutaj mamy dużo szablonów, jest kilka, możemy sobie wybrać. Jak najedziemy myszką, to tak się pomalutku też scrolluje, więc widzimy jak będzie na przykład wyglądała strona główna. Też tutaj to narzędzie nam rekomenduje zwykle jeden właśnie taki szablon. Ja wybiorę powiedzmy ten. Tutaj też jest taka informacja, możemy kliknąć i zobaczyć jakie tutaj zakładki nam sztuczna inteligencja stworzy.
Tak więc mamy tutaj, wybierzemy ten szablon i klikamy continue. I tutaj mamy takie podsumowanie, tak, mamy nazwę naszej firmy, ten wsad, który tutaj daliśmy, ten kontekst, teksty na naszą stronę internetową, dane kontaktowe. Wszystko jest OK, wszystko jest gotowe, możemy zacząć właśnie budowanie strony. Klikamy ten, oto przycisk i czekamy, tak. Tutaj ten proces trwa maksymalnie do kilku minut, tak że dzieje się to naprawdę bardzo, bardzo szybko. Dobrze i zobacz, tu mamy już wstępny projekt w kolorze takim błękitnym. Jak widzisz teksty są w języku polskim, jedynie tutaj nazwy zakładek mamy po angielsku, to za chwilę będziemy sobie spolszczać, ale tutaj już wszystko jest tak jak być powinno, tak. Widzimy, jest to OK, jest to z tym zbieżne co chcieliśmy uzyskać, więc klikamy start importing.
Tutaj w tym momencie znowu należy odczekać do kilku minut, aż to wszystko, te treści, te zdjęcia, które wybraliśmy nam się zaimportują na naszą domenę. Zanim to się zaimportuje, zapraszam Ciebie na moją stronę eacademia. online, gdzie możesz kupić właśnie mój autorski, najwyżej oceniany kurs WordPress w Polsce. Kurs tworzenia stron i sklepów internetowych właśnie na WordPressie. A gdybyś chciał zwiększyć widoczność swojej strony internetowej, zapraszam Cię na mój kurs SEO, pozycjonowanie stron internetowych. Natomiast jeśli chcesz zarabiać na tworzeniu właśnie takich prostych stron internetowych, to mam dla Ciebie kurs Jak zarabiać na tworzeniu stron internetowych. 8 godzin bitej wiedzy, jak pozyskiwać klientów do Twojego biznesu, jak współpracować z klientem, jak ich dalej monetyzować. No i mamy wiadomość, że nasza strona jest już gotowa.
Możemy przejść do personalizacji i konfiguracji naszej strony. Klikamy Start Customizations i w tym kroku możemy już wgrać na przykład logo na naszą stronę. Oczywiście nie musimy robić to teraz tego, możemy to też zrobić później. Za chwilę też Ci pokażę w którym miejscu można to zrobić. Natomiast ja wgram to od ręki. Wybieram z dysku logo. Tutaj mogę troszkę zwiększyć szerokość tego logo. Weźmy na przykład na 170 pikseli i klikam Continue. W kolejnym kroku mogę wybrać schemat kolorystyczny. Domyślnie jak widzisz tutaj mam taką mam tę moją stroną w odcieniach błękitów. Są tu błękitne elementy. Moje logo jest takie żywe. Mogę wybrać podobny kolor i jak widzisz wszystko tutaj się ładnie dostosowuje. Następnie mogę wybrać schemat jeśli chodzi o fonty.
Wybiorę powiedzmy font pop-ins dla nagłówków i lato dla tekstów. Później też możemy kolory własne ustawić, własne fonty jeśli chcemy. Natomiast ten zestaw mi tutaj jak najbardziej pasuje. Klikamy Zapisz Customizations i jak widzisz strona jest już gotowa. Zobacz. Oprócz tak jak mówiłem tych zakładek które zainportowały się w języku angielskim. Wszystko inne tutaj mam w języku polskim. Zainportowały się usługi które podałem. Mamy call to action. Dlaczego warto wybrać nasze usługi, opinie naszych klientów. Wszystko to tutaj jest. Zobaczmy jak wyglądają inne zakładki. Mamy zakładkę About. Nasza historia dlaczego nas warto wybrać. Jeśli nie wszystkie tutaj teksty z chat GPT do zakładki o nas się zainportowały to oczywiście tutaj będziemy mogli za chwilę też dodać. I mamy zakładkę usługi.
Mamy montaż paneli laminowych, hybrydowych. Doradztwo i projektowanie. Renowacje i konserwacja. I na każdej stronie mamy call to action, stopka. Wygląda to naprawdę bardzo fajnie. Mamy też oczywiście zakładkę Contact. Są te dane które właśnie podałem. Dobrze byłoby tu wstawić też mapkę. Dobrze. Teraz co w pierwszym kroku tutaj zrobimy. Przejdziemy sobie tutaj do kokpitu Wordpress. No i w pierwszym kroku dobrze by było przetłumaczyć te anglojęzyczne zakładki. Mamy tutaj właśnie zakładkę pages, all pages. I jak widzisz są tutaj te zakładki. Mamy na przykład zakładkę About czyli o nas. Klikamy tutaj w edycję. I przetłumaczymy sobie teraz właśnie tę zakładkę na język polski. Przede wszystkim tutaj wchodzimy. Klikamy i piszemy o nas.
Następnie wchodzimy tutaj w link URL. I tutaj również nie About us tylko o myślnik nas. Tak? I w ten sam sposób tłumaczyłem sobie również te inne zakładki. Przechodzimy do kontaktu. I klikamy update. I tak robimy z każdą kolejną zakładką. Tutaj mamy też stronę sample page oraz privacy policy. Sample page usuwamy. Przenosimy właśnie do kosza. Wchodzimy sobie tutaj właśnie do kosza. I tutaj tę stronę usuwamy. Oczywiście zakładkę polityka prywatności należy stworzyć w języku polskim. I należy oczywiście ją uzupełnić. Jest to wymóg w Polsce jako kraju należącego do Unii Europejskiej. Musimy napisać w polityce prywatności jakie dane gromadzimy.
A gromadzimy jeśli na przykład chociażby mamy na stronie w jaki sposób zabezpieczamy dane naszych tutaj użytkowników czy komuś udostępniamy te dane i w jaki sposób je chronimy. Więcej na ten temat jakie generatory darmowe polityki prywatności omawiam właśnie w moim kursie WordPress dostępny na mojej stronie eacademia. online. Tak? Więc tutaj przetłumaczyliśmy sobie zakładki. Możemy sobie przejść w zakładkę Wygląd menu i tutaj właśnie tworzymy menu. Jeśli któraś z tych zakładek jest nam niepotrzebna możemy rozwinąć i usunąć. Jeśli stworzymy jakieś inne zakładki to one się tutaj pojawią. Kliknijmy View All czyli zobacz wszystkie i możemy daną zakładkę dodać do naszego menu. Tak? Więc to menu tutaj się pojawia. Dobrze przejdźmy sobie teraz do zakładki Plugins czyli wtyczki. Zobaczmy jakie mamy tutaj zainstalowane wtyczki.
Mamy na ten moment dwie wtyczki zainstalowane. Pierwsza to Spectra druga Starter Wtuczka WebP. Należałoby też zainstalować wtyczki chociażby właśnie do optymalizacji grafik i zdjęć na naszej stronie internetowej. Jest to wtyczka WebP. Instalujemy tę wtyczkę i aktywujemy. Następnie przechodzimy tutaj do ustawień wtyczek i aby zoptimalizować wszystkie grafiki to tutaj na samym dole klikamy Start Optimization i wszystkie te 173 grafiki mi się ładnie zoptimalizują. Więcej na temat optymalizacji naszej strony tak aby szybko się czytywała oczywiście znajdziesz w moim kursie Wordpress. Przejdźmy na naszą stronę. Możemy tutaj właśnie wejść z tego poziomu i teraz zajmiemy się właśnie już edycją naszej strony poprawianiem tych tutaj elementów, które widzisz.
Tak? Więc aby przejść do edycji tutaj dla przykładu strony głównej możemy to zrobić z tego poziomu klikając tutaj Edit Page albo z poziomu Cockpitu Wordpressa wchodząc sobie tutaj Wygląd i Dostosuj Customize. Tak? W tym momencie właśnie przechodzimy sobie do ustawień naszego motywu. Motyw odpowiada za takie rzeczy jak chociażby właśnie nagłówek. Tutaj jak widzisz zdublowało mi się logo z tytułem tej witryny. Mogę przejść sobie tutaj do opcji Header Baldier. Tutaj właśnie budujemy nagłówek naszej strony. Klikamy Site Title i widzimy mamy logo tu możemy wgrać. Jeśli nie wgraliśmy możemy też je usunąć. Mamy Site Title i jak widzisz ono jest widoczne dla komputerów. Odhaczymy tą opcję i już nie jest. Tak? Możemy też zmienić widoczność dla smartfonów, dla tabletów.
Tutaj w tym miejscu mamy widoczność dla urządzeń mobilnych jak nasza strona się prezentuje. Tak? Tutaj mamy menu i tutaj możemy edytować. Na przykład te krechy takie czarne, brzydkie, czarne możemy edytować. Kliknijmy tutaj off canvas menu mamy tutaj zakładkę Design i tutaj mamy jak widzisz Dividersize 1 pixel. Brzydki kolor czarny. Zmieńmy go tutaj na przykład na ten kolor pomarańczowy. Jak widzisz on tutaj już się naniósł. Tak? Tutaj oczywiście w zakładce Design możemy też edytować wielkość fontów kolory. Tych tutaj właśnie mamy domyśle czcionkę czarną. Jak widzisz po najechaniu jest pomarańczowa. Tutaj mogę to oczywiście sobie zmieniać wybierając tutaj kolory z mojej palety kolorystycznej. Do palety kolorystycznej zaraz też tutaj dojdziemy. Tak? Tak samo zmieniamy widok tutaj na komputerach.
Możemy kliknąć primary menu i zmienić chociażby tutaj font. A zmienimy font na pop-ins czyli ten font, który jest tutaj w nagłówkach. Klikamy w ten sposób właśnie zmieniamy font pop-ins. Jak widzisz już tutaj font się zmienił. Ustawimy jego grubość. O niech będzie tak jak jest na 600. Natomiast tekst troszkę moim zdaniem tutaj jest taki dziwny kolor. Zmienimy na czarny. O właśnie w ten sposób. Jest to dużo czytelniejsze. Może trochę za grube. Ten font zmienimy na 500. O w ten sposób. Teraz jest myślę bardzo bardzo ok. Wszelkie zmiany oczywiście tutaj klikamy publish. Tutaj wycofujemy się z edycji header. Baldier przejdziemy sobie do zakładki global. Tutaj możemy ustawić właśnie fonty. Jeśli tego nie zrobiliśmy wcześniej.
Możemy wybierać fonty spośród darmowych fontów od Google'a. Są tu wszystkie darmowe fonty od Google'a. Body font czyli czcionka dla tutaj. O tutaj właśnie dla tekstu. Mamy niżej headings font. Tutaj możemy sobie również ustawić od H1 do H6. Tak? Więc tutaj właśnie to zmieniamy. Wychodzimy z typografii i mamy dalej kolory. Tutaj mamy naszą paletę kolorystyczną. Możemy oczywiście zmieniać te kolory. Jeśli mamy nasz kolor w zapisie cyfrowym. Tu możemy go właśnie wkleić. I tu zmieniamy kolory. Tutaj mamy akcent czyli ten kolor przewodni. Kolory linków. Kolory na główka. Kolor tekstu. Kolor tekstu zmienimy na ciemniejszy. Bo jest moim zdaniem troszkę zbyt jasny.
I troszkę ten font moim zdaniem też jest za mały dla tego tekstu. Przejdziemy sobie do typografii. Body. I tutaj widzimy jaki tutaj jest font. Zmienimy może na open sans. Moim zdaniem będzie trochę czytelniejszy. I możemy tutaj zmienić na przykład font na siedemnastkę. O! W ten właśnie sposób. Dobrze. Zmiany oczywiście publikujemy. I przechodzimy sobie niżej. Niżej mamy kontenery. Tutaj nic nie zmieniamy. Domyślne wartości są tutaj bardzo dobre. Jeśli chciałbyś więcej wiedzy zapraszam Cię oczywiście na mój kurs WordPress na mojej stronie eacademia. online. Ja tutaj zawsze zostawiam te wiadomo. . . te domyślne wartości. Wychodzimy sobie z kontenera. Niżej mamy buttons czyli przyciski. Tutaj ustawiamy jaki styl mają być nasze przyciski.
I na przykład widzę, że taki ten no biały kolor fontu na tym pomarańczowym tle nie za bardzo. Tutaj to gra, więc zmienimy sobie na czarny. Tutaj będzie na pewno to czytelniejsze. Mogę też tutaj wybrać różne style tych przycisków. Zobacz zaokrąglone. W ten sposób. Więc tak. Ta pierwotna opcja była najlepsza, więc tutaj mogę skasować i przywrócić te wartości domyślne. Więc w ten sposób tutaj robimy to. Wychodzimy sobie z przycisków. Dalej mamy scroll to button. Jest aktywny. Czyli te właśnie przyciski, które po kliknięciu w których będziemy przekierowani na początek naszej strony internetowej. Tutaj nic więcej nie zmieniamy. Pokażę Ci też gdzie tutaj możemy przejść do edycji naszej stopki. Bo stopka jest właśnie jak widzisz zrobiona.
Mamy tutaj footer, baldiere. Mamy tu różne widgety. Klikamy lewym przyciskiem myszy. Got it. I tutaj możemy właśnie edytować. Tak? Chcemy edytować i tutaj ten widget przechodzimy i tutaj sobie właśnie edytujemy. Możemy dodawać inne bloki. Za chwilę powiem Ci o korzystaniu z bloków jak przejdziemy sobie do edycji już naszej strony. Czyli generalnie ustawienia tej personalizacji i konfiguracji motywu to mamy tutaj mamy tutaj opcję edycji nagłówka, wyboru kolorów, wyboru fontów, wyboru edycji stopki. Tak? Natomiast tutaj jeśli byśmy chcieli pomiędzy, że tak powiem, nagłówkiem a stopką edytować, to za chwilę przejdziemy sobie właśnie do edycji strony głównej. Więcej na temat personalizacji i motywu Astra konfiguracji oczywiście znajdziesz w moim kursie WordPress na mojej stronie eacademia. online.
Zajrzyj tam koniecznie, bo jest tam właśnie czasowo ograniczona dobra promocja. Możesz zgarnąć zniżkę, ale więcej informacji właśnie na mojej stronie. Jak wejdziesz tutaj chociażby w zakładkę sklep masz tutaj właśnie prezencik do odbioru. Dobrze, wychodzimy sobie stąd, zapiszemy zmiany klikając tutaj publish opublikuj i zamykamy to tutaj tym krzyżykiem. Teraz przejdziemy sobie właśnie do edycji strony głównej. Przechodzimy sobie tutaj wchodząc w pages, all pages i mamy tutaj zakładkę strona główna, wchodzimy w edit. I teraz wchodząc w edit, jak widzisz mamy tutaj podgląd do tych wszystkich kontenerów tak zwanych, tych wszystkich elementów, które są na mojej stronie głównej. Aby je podejrzeć przechodzimy sobie tutaj klikając w tę ikonkę i jak widzisz ona składa się z kontenerów.
To jest kontener pierwszy, tak? Tu klikając to jest kontener drugi, czyli tutaj kontener trzeci, czyli wszystko ma tutaj swój porządek. Jeśli tutaj takie brzydkie informacje tutaj ci będą wyskakiwać, to po prostu to kliknij i zaakceptuj. No właśnie w ten sposób. Więc każdy kontener tutaj jest i w każdym kontenerze rozwijając go oczywiście też tutaj masz odpowiednie elementy dla tego kontenera, tak? W tym kontenerze mamy nagłówek, ten. Nadgłówek kolejny. Tutaj mamy batons, czyli przycisk. W tym kontenerze rozwijmy go, mamy tutaj rozwijane można powiedzieć kontenery, kontenery w kontenerze. Mamy te trzy infoboxy, ten, ten i ten, tak? Tutaj nam coś się zdjęcie nie zaczytało. W tym kontenerze mamy dwa kontenery wewnętrzne.
W pierwszym mamy image, czyli obraz, a w drugim mamy tutaj nagłówek oraz tekst. Gdybyśmy chcieli to edytować ten tekst, wystarczy kliknąć lewym przyciskiem myszy i już tutaj możesz sobie nanieść swój tekst, tak? Jeśli najedziesz na dany element na stronie, czy to będzie kontener, czy to będzie już nagłówek, to tutaj po prawej stronie wyświetlają się opcje do edycji. General, style i advance, tak? General, no to generalnie tutaj widzisz, co tutaj jest, tak? Mamy chociażby wyrównanie, możemy wstawić separator, na przykład po jeden czytły, już się właśnie wstawił, a w stylach generalnie nanosimy zmiany wizualne, na przykład kolor, wielkość fontu, jeśli tu wstawiłem ten separator, to mogę mu zmienić kolor, na przykład na pomarańczowy, o tutaj, widzisz, pojawił się.
Jeśli kliknę przycisk, no to mogę wybrać jeden z presetów przycisku, mogę wybrać tutaj w general chociażby linkowanie, gdzie ma ten przycisk linkować, do zakładki kontakt, w stylach, tak jak mówię, wizualnie, czyli mogę ostylować kolor tego przycisku, tak? Na przykład tutaj odstępy nad przyciskiem, czyli to wszystko, tak? Gdybym chciał na przykład zmienić zdjęcie, dajmy na to to, klikam lewe przyciskiem myszy i jak widzisz, tutaj mam już jak to zdjęcie się wyświetla. Klikam change image i tutaj oczywiście mogę zmienić na zdjęcie inne, tak? Wybieramy na przykład to zdjęcie. Co też bardzo ważne jest w motywie Astra i w korzystaniu z tej wtyczki starter templates, to automatycznie tutaj mamy trzecią opcję, której w innych motywach nie używających tej wtyczki nie ma, czyli free images.
Tutaj właśnie za pomocą tej opcji łączymy się z darmowym bankiem Pixabay i możemy ściągać stockowe zdjęcia wprost na naszą stronę internetową, klikając save and its insert. I tutaj ja wybiorę coś może z mojej bioteki mediów, na przykład tutaj tego pana Montera, klikam select i jak widzisz tutaj już się to ładnie tutaj to zdjęcie podmieniło, tak? Czyli każdy element mogę edytować, oczywiście więcej, bo to jest temat rzeka, jak tutaj edytować więcej informacji na ten temat, znajdziesz w moim kursie WordPress na mojej stronie eacademia. online, tak? Tutaj jak widzisz, jest takie zdjęcie z tyłu w tle, możemy sobie je zmienić, wchodzimy sobie w style i widzimy, że to jest to właśnie zdjęcie, które jest tutaj niejako takim tłem, zmienimy powiedzmy na to.
Widzisz też na przykład, że tutaj mamy taką poświatę na tym zdjęciu, taką szarą, to on jest takie przyciemione, wyszarzone, tzw. overlay. Tutaj mamy właśnie ten overlay color i tutaj możemy wybrać ten overlay na przykład na ciemniejszy, a tutaj tym słowaczkiem możemy sobie zmieniać intensywność, że się tak wyrażę tego, tak? Więc mamy tutaj właśnie to ogarnięte, tutaj też mamy ten właśnie taki overlay, możemy sobie właśnie wejść, zmienimy sobie na taki ciemniejszy, o, właśnie ten sposób. Także w ten sposób właśnie edytujemy.
Tutaj też mamy podgląd naszej strony na urządzeniach mobilnych, możemy edytować oczywiście na urządzeniach mobilnych, no bo na przykład jeśli uznamy, że na urządzeniach mobilnych ten nagłówek jest zbyt mały, no to wystarczy po prostu w niego kliknąć, wchodzimy sobie w style, mamy typografia i tutaj marzemy sobie paseczkiem wpisywać jak to ma być duże, tak? Tutaj nie będziemy teraz tego może zapisywać, zostawimy opcję domyślną. Mamy też podgląd oczywiście na tableta, wrócimy sobie do widoku na desk topy, więc jest to bardzo fajna opcja. Oczywiście jeśli dany element na tej stronie chcielibyśmy usunąć, na przykład to uznajemy, że to jest bed na naszej stronie, w ogóle zobacz, jak klikam na dany element, to on tutaj na tym drzewie się podświetla na niebiesko, tak? Więc widzimy, gdzie jesteśmy. Świetna nawigacja.
No i na przykład tutaj widzimy, że ten element, nie chcemy go, klikamy w niego i tu widzimy, że to jest ten właśnie kontener. Rozwijam to i klikam Delay. Jak widzisz, on się tutaj już usunął. Gdybym chciał wycofać tę operację, tutaj mam opcję Wycofaj i już widzisz, że to się przywróciło. Gdybym na przykład chciał tutaj ten kontener przenieść gdzieś w inne miejsce, na przykład pod tę sekcję, to wystarczy, że go złapię lewym przyciskiem myszy i przeciągam niżej w to miejsce i on tutaj już mi. . . O, jak widzisz, przeskoczył, tak? Był pod tym, a już się teraz pojawił tutaj niżej. Tutaj też możemy ten Overlay, ten kolor zmienić, zmienimy go właśnie tutaj na ciemny. O, i w ten sposób.
Całość zmiany, oczywiście tutaj klikamy Update, aby zaktualizować i tutaj mamy też opcję Podglądu i możemy podrzeć, jak nasza strona będzie się prezentować. Tutaj też pokażę Ci fajny taki trick. Jak widzisz, jak scrolluję, to to zdjęcie jest nieruchome niejako. A zobacz, tutaj, jeśli teraz weźmiemy w edycję tego kontenera, tego zdjęcia i tutaj ustawisz opcję Fixed, zaktualizujmy i podejrzyjmy, to w tym momencie, jak widzisz, to zdjęcie jest niejako przyklejone, tak? Ten napis idzie do góry podczas scrollowania, natomiast zdjęcie jest nieruchome. Tutaj mamy fajny, tutaj, że tak powiem, buyer, tak? I tak właśnie ta nasza strona się prezentuje, możemy oczywiście ją dalej konfigurować.
Jeśli któreś z tych tekstów, które wkleiliśmy w ChartGPT tutaj by się nie przekleił, no to oczywiście możemy sobie tutaj zmienić, wkleić, po prostu klikając na dany element, na dany blok tekstowy, czy też grafikę, zdjęcie i dany tekst po prostu edytować. Jak widzisz, jest to bardzo proste, zajęło nam bardzo, bardzo niewielki odcinek, że tak powiem, czasu. Oczywiście tutaj dużo rzeczy jest też do powiedzenia innych, właśnie chociażby kwestia optymalizacji strony, kwestia zbudowania też na tej stronie bloga z wpisami, tak aby ona się pozycjonowała, tak? Jeśli tworzysz sklep, to trzeba by tu zainstalować wtyczkę WooCommerce, aby zacząć sprzedaż na tej stronie. Oczywiście o tym wszystkim uczę w moim kursie, WordPress, na mojej stronie e-academia. online.
Natomiast jeśli chciałbyś zarabiać na stronach, tworząc właśnie takie proste strony i wizytówki, zapraszam Cię na mój kurs jak zarabiać na tworzeniu stron internetowych. Jeśli materiał wideo podobał się, daj łapkę w górę już teraz. Do następnego wideo, trzymaj się, cześć!.
S K R Y B O T
Skrybot. 2023, Video transcriptions from YouTube
By visiting or using our website, you agree that our website or the websites of our partners may use cookies to store information for the purpose of delivering better, faster, and more secure services, as well as for marketing purposes.