Tworzenie własnej strony internetowej może od początku wydawać się trudnym i skomplikowanym zajęciem. Ponieważ Internet jest pełen różnych przewodników i podręczników poświęconych temu tematowi, niektórzy z Was mogą być zdezorientowani lub wprowadzeni w błąd przez nieprawidłowo zinterpretowane informacje. Dlatego postanowiliśmy napisać ten przewodnik, który opowie Ci jak stworzyć własną stronę internetową w krótkim czasie.
Oszczędź czas, pieniądze i siły - wykorzystaj do tworzenia strony gotowe rozwiązania od TemplateMonster marketplace. W naszym katalogu są zebrane podnad 26 600 gotowych szablonów różnych typów do wszystkich możliwych celów. W zależności od wybranej platformy będziesz mógł uruchomić witrynę za mniej niż tydzień! Brzmi ciekawie, tak? Sprawdź ten przewodnik!
Darmowa e-Książka o TemplateMonster marketplace: doznaj się jak skutecznie sprzedawać swoje produkty
Osobiście sprawdziłam wiele artykułów i recenzji na temat tworzenia stron www. Bardzo mnie denerwuję, gdy sam podręcznik wygląda dobrze, ale brakuje w nim niektórych ważnych informacji. Wygląda to tak: spoglądasz na swój panel admina, potem na zrzut ekranu z podręcznika, i znów na swój panel admina... Tak, coś poszło nie tak.
Właśnie dlatego zdecydowaliśmy napisać ten artykuł. Przygotowaliśmy dla Ciebie najlepszy przewodnik na temat uruchomienia stron!
Jak wybrać płatformę dla strony
Za każdym razem, gdy ktoś tworzy stronę internetową od zera, możesz usłyszeć skrót "CMS". W tej części artykułu wyjaśnimy szczegółowo, czym jest system CMS i jak korzystać z tego narzędzia. Jeśli masz już tą podstawową wiedzę, możesz po prostu pominąć tą część i przejść dalej.
CMS oznacza "Content Management System". Głównym celem tych systemów jest pomoc w dodawaniu, usuwaniu i zarządzaniu zawartością witryny bez dotykania kodu źródłowego. Zasadniczo CMS zwykle zawiera wszystkie potrzebne skrypty do kontrolowania zawartości witryny i dostarczania jej do odwiedzającego Twoją stronę.
Istnieje wiele różnych systemów zarządzania treścią, ale w tym artykule omówimy najbardziej popularne:
WordPress
Joomla
Drupal
Zebraliśmy potrzebne informacje na temat aktualnej korelacji sił między CMSami na poniższym zdjęciu.
Jak można zauważyć, o WordPress są oparte ponad połowa wszystkich stron internetowych. Miliony programistów wybierają WP jako najlepsze oprogramowanie do tworzenia witryn.
Różnica między pierwszym a drugim miejscem jest ogromna, prawda? Joomla i Drupal zajmują drugie i trzecie z 10 i 9 procent. Zobaczmy, dlaczego twórcy stron internetowych wybierają WordPress i dlaczego ten system jest lepszy od jakichkolwiek innych CMS.
Jaki CMS jest lepszy?
Niektórzy z was mogą powiedzieć, że WordPress jest platformą dla blogów i czasopism. To powszechny błąd, ponieważ obecnie ta platforma oferuje znacznie więcej możliwości.
Możesz użyć WordPressa, aby uruchomić blog, online-magazyn, e-sklep, stronę docelową, portfolio itd. Ten CMS jest wystarczająco elastyczny, aby stać się podstawą dla web serwisu o dowolnym rozmiarze i złożoności.
Wiele dużych stron www są oparte o WordPress. Są to, na przykład, New Yorker, Variety, BBC America, Wired itp.
Wybór tych dużych marek można łatwo wytłumaczyć wielofunkcyjnością i prostotą WordPressa. Bez względu na to, czy próbujesz stworzyć stronę firmową, czy tylko mały blog, WP pomoże spełnić te cele z łatwością.
Główne zalety WordPressa:
Łatwość użycia
Osobiście powiedziałabym, że fraza "Take it easy!" jest nieoficjalnym motto WordPressa, który zainspirował twórców tego CMS. Nie będziesz potrzebował książek o objętości 500 stron, aby dowiedzieć się, jak korzystać z tego CMS, a zostaniesz poprowadzony przez proces instalacji przez sam CMS. Brzmi wspaniale, prawda?
Będziesz mógł dodawać funkcje i wtyczki, które Ci się podobają, za pośrednictwem panelu administracyjnego. Będziesz mogł dostosować każdy element strony za pomocą kilku kliknięć i natychmiast uruchomić go na swojej stronie.
Stylowy wygląd strony
Jeśli mi nie wierzysz, zapoznaj się z naszym katalogiem motywów WordPress, a zobaczysz, o co chodzi.
Responsywny układ i przyjazność dla urządzeń mobilnych
Po zainstalowaniu WordPressa i uruchomieniu go na nowo utworzonej stronie internetowej, nie musisz się martwić o to, jak będzie wyglądała Twoja witryna na urządzeniach mobilnych. Większość motywów WP jest zgodna ze najnowszymi standardami tworzenia stron www, i pozwala na przekazanie treści do odbiorców za pośrednictwem urządzeń mobilnych w najbardziej efektywny sposób.
Wystarczy spojrzeć na dema naszych bestsellerów i sprawdzić, jak wyglądają na smartfonach lub tabletach.
Są to kluczowe zalety systemu WordPress, które powinny Cię zainteresować, jeśli jesteś nowicjuszem w tworzeniu stron i próbujesz wybrać prawidłowy CMS.
Z drugiej strony, Joomla i Drupal są mniej popularne wśród twórców stron internetowych, ale wciąż mają swój udział w rynku i swoich fanów. Celowo dodałam Joomla i Drupal do jednej sekcji, ponieważ w zasadzie mają bardzo podobne wady w porównaniu do WordPressa. Największym problemem związanym z tymi systemami jest złożoność. Po prostu trudniej z nimi pracować. Mimo to, są one wymienione w liście TOP-3, dlatego podam Ci nie jeden tutorial na temat tworzenia stron, ale TRZY przewodniki. Tak, tak, pokażę Ci, jak można stworzyć stronę internetową za pomocą którejkolwiek z tych trzech platform
Wybór nazwy domeny i hostingu
Każda witryna wymaga nazwy domeny i hostingu. Są oni jak dom dla Twojej strony. Nie będą opowiadała Ci o darmowym hostingu na WordPress.com, jesteśmy poważnymi ludźmi, prawda? Używanie poddomeny w witrynie WordPress.com sprawi, że Twoja witryna będzie wyglądała nieprofesjonalnie.
W Internecie jest mnóstwo różnych dostawców usług hostingowych, a ceny różnią się od niskiego poziomu do absurdalnie wysokiego. Osobiście polecam skorzystać z usług:
Co dostawcy oferują hosting dl astron za cenę około 3-6 dolarów. Najlepsze jest to, że mają świetne serwery i za tą cenę zapewnią Ci dobrą obsługę klienta. Jest to bardzo ważne dla każdego, kto prowadzi własną stronę internetową, aby mieć dobre relacje z dostawcą usług hostingowych.
Zalecam aby przyjrzeć się do ofert hostingów BlueHost i InMotion, i wybrać najlepszego dostawcę usług hostingowych. W tym artykule pokażę, jak można zarejestrować się na hostingu BlueHost i umieścić na nim swoją stronę.
Podczas wyboru nazwy domeny dla witryny należy pamiętać o 3 kluczowych kwestiach:
Adres URL Twojej przyszłej witryny to pierwsza rzecz, którą zobaczy użytkownik, więc postaraj się aby sprawiła dobre pierwsze wrażenie na niego.
Nazwa domeny powinna być taka sama, jak nazwa marki lub jak najbliżej do niej. Będzie to ogromny plus do uznania Twojej marki.
Nie komplikuj. Nikt nie chce aby zapamiętywać długie nazwy domeny. Powinna być prosta i łatwa do zapamiętania.
Jak otrzymać nazwę domeny i hosting
W tej części artykułu pokażę krok po kroku, jak zacząć pracę z hostingiem BlueHost. Pomoże Ci to także pracować z dostawcą usług hostingowych InMotion, ponieważ proces jest bardzo podobny na obu platformach.
Przede wszystkim otwórz stronę domową serwisu BlueHost.
Zauważysz, że reklamują swój najpopularniejszy plan hostingowy bezpośrednio w nagłówku.
DOBRE NOWINY : Dostajesz usługi 24/7 Obsługi klienta za darmo.
BARDZO DOBRE NOWINY : Dostajesz nazwę domeny typu .com za darmo na 1 rok.
Kliknij w przycisk "Rozpocznij teraz" i przejdź dalej.
Zauważysz, że oferują 3 różne plany cenowe. Dla Ciebie, jak dla początkującego, podstawowy plan stanie sięł doskonałym wyborem, ponieważ pozwala na korzystanie z usług hostingowych dla 1 strony i wykorzystania 50 GB miejsca na serwerze.
Po kliknięciu przycisku "Wybierz" pod planem podstawowym zostaniesz przekierowany do strony, na której można wybrać nazwę domeny dla przyszłej witryny. Dostaniesz ją za darmo.
Możesz wpisać dowolną nazwę domeny i jeśli taka domena została już zarejestrowana przez kogoś innego, hosting BlueHost poinformuje Cię, a nawet zaoferuje alternatywne nazwy do wyboru. Jako przykład zdecydowałam wybrać nazwę "mywebsite.com". Oczywiście wiem, że taka nazwa domeny została już podjęta, ale dostawca zaproponował mi alternatywę.
Wybrałam nazwę "mywebsitedirectory.com". Wiem, że nie brzmi zachęcająco, ale jest to tylko przykład. Wyjaśniłam już w sekcji powyżej, jak poprawnie wybrać nazwę domeny.
Nadszedł czas, abyś wypełnił wszystkie dane osobowe, w tym swoje imię, nazwisko, kraj, miasto itp. Poniżej bloku informacji o koncie znajdują się bloki z informacjami o planie hostingowym i płatnościach. Tutaj możesz potwierdzić plan, z którego chciałbyś skorzystać i wybrać okres jego trwania.
Myślę, że wiesz jak podawać informacje o karcie kredytowej, prawda?
Gdy zapłacisz za swoje konto, zostaniesz przekierowany do panelu admina BlueHost i będzie on wyglądał następująco.
Jedną z moich ulubionych rzeczy na hostingu BlueHost jest to, że oferują 1-click instalację WordPressa. Nie będziesz musiał przenosić folderów z plikami do FTP, zrobią wszystko za Ciebie.
Będziesz musiał wypełnić tylko ogólne informacje, takie jak tytuł witryny, nazwa użytkownika panelu admina i adres e-mail. Po wprowadzeniu wszystkich informacji, kliknij w przycisk "Zainstaluj WordPress", a będziesz mógł przejść do dostosowywania strony.
WordPress: how to create your own website
Po zainstalowaniu WordPressa możesz przejść do panel admina poprzez link: yourwebsite.com/wp-admin/.
Powinieneś użyć danych uwierzytelniających, które wybrałeś podczas instalacji WordPressa za pośrednictwem panelu admina BlueHost (nazwa użytkownika i hasło, które tam wprowadziłeś).
Panel administracyjny WordPress wygląda następująco. Zobaczysz wszystkie sekcje po lewej stronie, a okno po prawej stronie wyświetli wszystkie ustawienia, z którymi możesz pracować.
Przede wszystkim musimy zmienić motyw domyślny. Na stronie TemplateMonster można znaleźć mnóstwo wspaniałych motywów WordPress, więc zachęcamy do wyboru najbardziej odpowiedniego rozwiązania. Ja postanowiłam skorzystać z motywu Monstroid 2. Jest to uniwersalny motyw, więc stanie się dobrą podstawą dla każdej strony.
Stworzę stronę internetową dla web studio na podstawie domyślnej skórki motywu Monstroid 2, ponieważ podoba się mi najbardziej. Ale Ty możesz wybrać swoją spośród ponad 10 skórek.
Aby zmienić domyślny motyw WordPress, należy przejść do karty Wygląd i kliknąć zakładkę menu Motywy.
Zostaniesz przekierowany do strony z listą motywów.
Aby zainstalować nowy motyw trzeba klinkąć w przycisk Dodaj nowy motyw i przesłać motyw, kóry chciałbyś widzieć na swojej stronie. Ja będę przesyłała motyw Monstroid 2.
Po zakończeniu przesyłania kliknij w przycisk aktywacji aby zastąpić domyślny motyw.
Po aktywacji w WordPress panelu admina wyświetli się wskazówka nad obszarem szablonów. Zobaczysz, że oferuje instalację "TM Wiazrd" - bardzo użetecznego narządzia.
TM Wizard zaproponuje rozpoczęcie procesu instalacji skórek, kliknij w przycisk "START INSTALL" i przejdź dalej.
Kreator sprawdzi, czy wszystkie ustawienia systemu są prawidłowe i powiadomi Cię, jeśli coś jest nie tak. Kiedy zobaczysz, że wszystko jest w porządku, po prostu kliknij w przycisk "Dalej" i kontynuuj.
Po kliknięcu zostaniesz przekierowany do listy wszystkich dostępnych skórek. Tam należy wybrać która skórka będzie najlepiej pasowała do Twoich potrzeb. Jak już wspomniałam, wybierzę domyślną, więc po prostu klikam przycisk "Wybierz skórkę" obók skórki domyślnej.
Dostępne są dwie opcje: możesz wybrać opcję instalacji pełnej lub uproszczonej. Wersja Lite może być używana, jeśli nie masz zbyt wiele miejsca na hostingu. Wybierając opcję instalacji Lite zgadzasz się na otrzymywanie mniejszej ilości wpisów na blogu i innych danych demonstracyjnych.
Jeśli wybrałeś hosting BlueHost, nie musisz się o to martwić, po prostu skorzystaj z opcji pełnej instalacji.
Teraz kreator instalacji pobierze i zainstaluje wszystkie potrzebne wtyczki.
Aby zainstalować treści przykładowe, powinieneś pogodzić się na zastąpienie obecnych treści na stronie przez treści przykładowe . Zasadniczo to ostrzeżenie zostało dodane na wypadek, gdy instalujesz ten motyw na stronie, która posiada dużo starych treści i chciałbyś mieć punkt zwrotny, oraz zapisać poprzednie dane.
Ponieważ moja witryna WordPress jest nowa i nie posiada żadnych treści, nie obchodzi mnie, czy moje posty zostaną zastąpione czy nie, więc zgadzam się i wybieram opcję "Zamień istniejącą zawartość na zawartość demo".
WordPress nie wykona tej akcji bez podania hasła administratora, więc po prostu wpisuję w polu swoje hasło.
Import wszystkich danych przykładowych może zająć trochę czasu...
Gdy wszystko zostanie zainstalowane, otrzymasz stronę, która będzie wyglądała dokładnie tak, jak nasz motyw demo. Teraz nadszedł czas, aby rozpocząć proces dostosowywania strony.
Przechodzimy do panelu admina i zaczynamy edytować stronę domową.
Aby to zrobić, musisz odwiedzić sekcję "Strony" i wybrać stronę domową.
Zostaniesz przekierowany na stronę kreatora Power builder. Jest to bardzo wygodne i intuicyjne narzędzie, które pozwala na bezproblemowe dostosowanie witryny poprzez poruszanie się po blokach i zawartości. Uważam, że jest to najlepsze narzędzie do edycji witryn dla małych firm!
Usunąłam suwak z sekcji nagłówka strony i zdecydowałam zostawić jedno zdjęcie w górnej części. Po usunięciu samego Slidera, należy kliknąć w przycisk ‘Insert module’ i wybrać moduł ‘Image’ z listy modułów.
Teraz nasza strona domowa wygląda tak:
Zastąpić logo. Aby to zrobić, należy kliknąć w przycisk edycji w górnym panelu witryny. Po tym otworzy się dodatkowe menu po lewej stronie okna przeglądarki.
Wystarczy przejść do karty ‘General Site settings’ > ‘Logo & Favicon’ i przesłać logo, które chcesz użyć zamiast domyślnego logo motywu Monstroid 2.
Podczas przewijania mojej nowo utworzonej strony z treścią przykładową zauważyłam, że nie potrzebuję bloku "Zalety licencji GPL3", więc po prostu przeszłam do zakładki kreatora Power builder i usunęłam ją.
Nie podoba mi się również CTA-przycisk Buy Theme’. Dlatego zmienię tekst przycisku na ‘Order a story’. Aby dokonać tej zmiany, trzeba przejść do menu ‘Header’.
Then go to the ‘Header Elements’.
Zmianiam tekst w CTA-przycisku i klikam w przycisk zapisywania.
Ponieważ pracujemy z nagłówkiem, zmienię pozycje menu. Dodam pozycje menu, które będą przekierowywały moich klientów na następujące strony:
Strona domowa
O Firmie
Usługi
Portfolio
Kontakty
Myślę, że to są strony, które dostarczą moim klientom wszystkie potrzebne informacje dotyczące mojej firmy i tego dlaczego powinni z nami współpracować.
Aby dodać te pozycje menu, przechodzę do karty ‘Menus’ > ‘Main’ i usuwam wszystkie istniejące elementy menu. Potem dodaję wszystkie potrzebne mi pozycje i powiązuję je ze stronami, które utworzyłam w sekcji "Strony".
Teraz menu wygląda tak:
Zmienię tekst wprowadzający pod zdjęciem. Dlatego muszę powrócić do kreatora stron Power Builder i otworzyć ustawienia modułu ‘Text‘ pod modulem ‘Image’.
W nim możemy dodać informacje o naszej firmie i wyjaśnić klientowi, kim jesteśmy i co robimy.
W domyślnej skórcę motywu Monstroid 2 znajduje się blok, w którym wymieniono główne zalety motywu. Wykorzystamy z ten blok aby przedstawić 3 główne usługi firmy:
Speech writing
Content marketing
Tworzenie treści dla strony
Przechodzomy do kreatora stron Power page builder i modułu z 3 modułami "BLURB". Można dostosować zawartość każdego modułu, klikając ikonę ustawień po prawej stronie.
Możesz wybrać tytuł, tekst główny i ikonę dla każdej usługi, jest to bardzo proste.
Zedytowałam wszystkie trzy moduły i teraz strona wygląda tak:
Jeśli otworzysz Power Builder, zobaczysz, że na naszej stronie znajdują się dwa podobne wiersze.
Oba zawierają moduł ‘Text’, ale znajdują się po różnych stronach strony. Usuwam drugi. Ponieważ przeniosłam blok ‘Services’ powyżej aby był wyświetłany bliżej do tekstu wprowadzającego, teraz mam dwa bloki z szarym tłem.
Więc zmienię tło i zdjęcie dla tego bloku. Ustawię białe tło i dodam zdjęcie, który odpowiada tematowi strony.
Postanowiłem poinformować przyszłych klientów, że jesteśmy odpowiedzialni za jedno z wystąpień, które były częścią wydarzeń organizowanych przez Prezydenta.
Teraz wygląda tak.
Jest również blok z prezentacją projektów. Będę potrzebowała go na swojej przyszlej stronie, więc zmienię zdjęcia na przykłady stron, dla których moje studio stworzyło treść.
W Power Builder klikam w przycisk opcji obok modułu ‘Projects’. A ponieważ wszystkie te projekty pochodzą z kategorii ‘Projects’ trzeba przejść do kategorii ‘Projects’ po lewej stronie panelu admina i zmienić każdy projekt lub po prostu usunąć stare i dodać nowe.
To bardzo proste i wygląda jak edycja wpisu na blogu. Opisywane zdjęcie można zmienić po prawej stronie, a bloki tekstowe znajdują się w środku.
Po tym jak zmieniłam informacje o projektach, strona będzie wyglądała tak:
Postanowiłam przenieść także moduł Testimonials powyżej modułu Projects i zastąpić tekst referencji.
Aby to zrobić, musisz przejść do sekcji "Testimonials" w panelu admina WordPress i zastąpić każdą referencję
Właśnie zmieniłam nazwę firmy w referencjach, ponieważ moja firma nie jest prawdziwa, ale Ty będziesz musiał dodać referencje od prawdziwych klientów.
Jedynym problemem jest teraz tytuł "Przedstaw swój personel". Chciałabym go zmienić na bardziej odpowiedni.
Dalej przechodzimy do kreatora stron Power builder, wybrany moduł "Cherry Testimonials" i wpisujemy tekst, który chcemy tam zobaczyć.
Nie chcę mieć tych wszystkich widżetów w stopce, więc usunę je. Można to zrobić, przechodząc do menu ‘Customize’ i wybierając opcje ’Widets’.
Po prostu usuń wszystkie widżety w tym obszarze i kliknij przycisk "Zapisz i opublikuj".
Poniżej możesz zobaczyć końcowy rezultat naszej pracy. Wydaje mi się, że wygląda świetnie i nie powiedziałabym, że ciężko było pracować z motywem Monstroid 2. W ciągu dnia można założyć w pełni funkcjonalną i ładną stronę.
Tworzenie strony internetowej na Joomla
Proces instalacji Joomla CMS może być trochę trudny. To dlatego, że nie wszyscy dostawcy usług hostingowych oferują proces instalacji Joomla poprzez 1-klik. Musisz więc samodzielnie przenieść pliki do FTP i stworzyć własną bazę danych.
Ale nie bój się, nie jest to takie trudne, pokażę Ci wszystko i przeprowadzę cię krok po kroku przez proces instalacji.
Przede wszystkim trzeba pobrać najnowszą wersję Joomla. Możesz to zrobić na oficjalnej stronie Joomla, ponieważ jest to darmowy open-source CMS.
Po pobraniu Joomla powinieneś rozpakować archiwum i przenieść pliki do FTP BlueHost. W ten sposób możesz uzyskać dostęp do swojego folderu FTP.
Wystarczy kliknąć przycisk "Menedżer plików" w panelu sterowania BlueHost.
Potem należy kliknąć na ‘Home Directory’ i potwierdzić żądanie.
Zostaniesz przekierowany do głównego folderu, do którego powinieneś załadować pakiet Joomla.
Aby zainstalować dowolny CMS, musisz mieć bazę danych. BlueHost przygotował nawet tutorial wideo na temat tego jak stworzyć bazę danych, polecam jej sprawdzenie.
Teraz możemy rozpocząć pracę na naszej stronie. Zalecam zapoznać się z naszymi premium szablonami Joomla i wybrać jeden dla swojej strony. Jedną z zalet takiego podejścia jest to, że szablon zawiera opcję Quickstart package. W ramch tej opcji otrzymasz wstępnie zainstalowany szablon Joomla i ze wszystkimi danymi demo, wystarczy pogodzić się na instalację danych przykładowych.
Pokażę Ci jak pracować z Joomla na przykładzie naszego flagowego szablonu Jumerix. Jest uniwersalne rozwiązanie do tworzenia stron, który posiada różne warianty układu strony domwej i mnóstwo narzędzi.
Zacznijmy naszą pracę! Stworzę stronę internetową dla web studio. Uważam, że tworzenie stron internetowych na te same tematy, ale na różnych systemach zarządzania treścią da Ci wiedzę na temat tego, jak dobrze może działać każdy system CMS.
Po przeniesieniu wszystkich elementów na FTP i utworzeniu bazy danych dla witryny Joomla, możesz kontynuować instalację. Otwórz swoją stronę, a zostaniesz przekierowany na stronę instalacji Joomla CMS.
Tam podajesz ogólne informacje: nazwę administratora, adres e-mail i hasło. Masz również możliwość zamknięcia witryny od samego początku. Oznacza to, że podczas pracy na swojej stronie nikt nie będzie mogł ją zobaczyć. Jeśli ktoś otworzy stronę, zobaczy komunikat informujący, że strona jest obecnie w trakcie rekonstrukcji.
Kolejny krok obejmuje wypełnienie informacji o bazie danych, adres hosta itp.
Dalej przechodzisz do ‘Install sample data’ > ‘sample_theme3311’ w celu automatycznego zainstalowania wszystkich danych demo.
Jedna z ważnych rzeczy w instalacji Joomla: zawsze należy usuwać folder "Instalacja" ze swojej witryny. W starszych wersjach musiałaś przejść do FTP i usunąć go samodzielnie, ale teraz możesz po prostu kliknąć przycisk "Usuń folder instalacji", a CMS zrobi to za Ciebie.
Tak wygląda strona domowa szablonu Jumerix. Ten szablon również posiada inne warianty układu strony domowej, ale postanowiłam wybrać ten, ponieważ najbardziej pasuję do web studio.
Zasadniczo wszystkie zmiany są wykonywane w panelu admina systemu Joomla CMS. Możesz zalogować się, korzystając z linku: mywebsite.com/administrator/. Tutaj będziesz musiał wypełnić dane, które wprowadziłeś podczas instalacji.
Tak wygląda panel admina systemu Joomla. Wszystkie menu znajdują się na górnym panelu, a wszystkie ustawienia pojawią się w obszarze okna poniżej.
Oczywiście standardowe zdjęcia suwaków nie pasują do tematu firmy, więc zmienię teksty i zdjęcia.
Aby to zrobić trzeba przejść do karty do Content > Articles i przefiltruj artykuły według kategorii "Suwak". Zobaczysz 3 artykuły, które są używane w suwaku. Każdy artykuł zawiera tekst i zdjęcia.
Dalej zmienię tytuł i zdjęcie w sekcji ‘Images and Links’.
Text na slajdach można zmienić w sekcji ‘Content’.
Teraz wygląda tak. Możesz edytować pozostałe slajdy w ten sam sposób.
Dalej zmienię logo i dodam do niego nazwę web studio. Aby to zrobić trzeba przejść do karty Extensions > Templates > Styles.
Dalej trzeba kliknąć na styl ‘theme3311-Default’. Zostaniesz przekierowany do strony ustawień, na której można zmienić logo.
Dalej zmienię blok ‘Co oferujemy’ i dodamy do niego odpowiednie informacje. Wszystkie 6 elementów w tym bloku to artykuły i można je zmienić w karcie Content > Articles, filtrując artykuły według kategorii ‘Co oferujemy’.
Nie będą mi potrzebne wszystkie 6 elementów, więc usunę 3 z nich, a pozostałe 3.
Każdy element może być edytowany jak zwykły artykuł, więc możesz tam umieścić tytuł i treść.
Trochę trudniej wygląda zmiana ikon. Aby zmienić ikonę każdego elementu należy przejść do zakładki Images and Links i zmienić kod ikony w polu podpisu.
Są tam wpisane kody Awesome Font Icons. Możesz przejrzeć ogromną bibliotekę ikon na oficjalnej stronie Awesome Font i wybrać tę, które Ci się podobają i pasują do tematu Twojej strony. Po kliknięciu na ikonę można uzyskać jej kod.
Na przykład:
Teraz musimy zmienić wprowadzający tekst bloku "Co oferujemy". Aby to zrobić trzeba przejść do zakładki Extensions > Modules i znaleźć moduły "Co oferujemy".
Zobaczysz listę modułów o tej samej nazwie. Potrzebujemy tego, który znajduje się na pozycji "nawigacja".
Po rozpoczęciu edycji pojawi się pole Pretext w dolnej części strony. Tam należy wpisać tekst, który ma być wyświetlany zamiast tekstu przykładowego.
Zmieniłam tekst i teraz wygląda tak:
Nadszedł czas, aby wyłączyć bloki, które nie chcemy widzieć na stronie. Przede wszystkim wyłączę moduł ‘Flexible pricing’.
Należy po prostu przejść do karty Extensions > Modules i wyłączyć je.
Teraz wyłączmy pozostałe niepotrzebne moduły w taki sam sposób, jak w przypadku bloku cenowego.
W demie jest blok, który chciałabym trochę dostosować. Zmienię zdjęcie za pomocą Photoshopa i ponownie go załaduję. Zmienię również tekst w panelu administracyjnym.
Przejdź do karty Content > Articles i wybierz artykuł ‘Ty i twój biznes wyglądacie zachwycająco’.
Gdy go znajdziesz, możesz zedytować w razie potrzeby.
Ale zdjęcie nie znajduje się w artykule, więc będziemy musieli szukać modułu, który wyświetla to zdjęcie z efektem paralaksy.
Przejdź do karty Extensions > Modules i wybierz moduł Home parallax, który znajduje się na pozycji "prezentacja".
Otwórz go i prześlij własne zdjęcie. Upewnij się, że zdjęcie jest w formacie .png i ma przezroczyste tło, ponieważ w przeciwnym razie będzie źle wyglądało.
Teraz zmieńmy moduł, który wyświetla teksty z informacjami na temat usług firmy.Przejdź do karty Extensions > Modules i znajdź moduł "Nasze usługi". Istnieje kilka modułów o tej samej nazwie, należy otworzyć moduł z pozycją "brak".
Jak widać, ten moduł jest połączony z artykułem o tej samej nazwie. Wystarczy kliknąć przycisk edycji aby dostosować artykuł bezpośrednio z tego miejsca.
Jak można zauważyć, górny panel menu i stopka mają zdjęcia w tle, które nie pasuje do ogólnego stylu projektu.
I decided that the top panel should be black and the footer should be dark grey.
Te ustawienia można zmienić w pliku template.css szablonu Jumerix. Przejdź do foldera z szablonem na serwerze FTP i otwórz plik ‘template.css’ w folderze CSS.
Znajdź wiersz z id ‘#top’ id i skomentuj lub usuń wiersz ze zdjęciem tła. Potem dodaj poniższy kod:
background-color: #000000;
Teraz górny panel będzie wyglądał tak:
Kolor stopki można zmienić w ten sam sposób. Znajdź w kodzie wiersz z id ‘#copyright-top’ i skomentuj lub usuń wiersz ze zdjęciem tła.
Potem dodaję poniższy wiersz:
background-color: #1a1b1d;
Terz ona będzie wyglądała tak:
Ostatnią rzeczą do zrobienia jest zmiana głównego menu. To bardzo proste, wystarczy przejść do karty menu głównego Menu"> Main menu i dodać linki do stron, które chcesz wyświetlić.
Oto jak wygląda końcowy wynik:
Jak stworzyć stronę na Drupal
Teraz pokażę Ci jak szybko stworzyć stronę internetową, opartą o CMS Drupal. Proces instalacji jest prosty i szybki, więc jak widać, Drupal jest bardzo przyjaznym dla użytkownika systemem.
Po wprowadzeniu nazwy bazy danych, nazwy użytkownika i hasła, nie zapomnij otworzyć kartę "Ustawienia zaawansowane" i wpisać tam host bazy danych. To jest adres serwera hostingowego, który można pobrać z panelu sterowania swojego hostingu. Drupal zazwyczaj domyślnie ustawia tą wartość pola na "localhost".
Po podaniu do Drupala wszystkich informacji, takich jak nazwa przyszłej witryny, nazwa administratora, hasło i adres e-mail, proces instalacji jest zakończony. Zostaniesz przekierowany na stronę domową swojej nowo utworzonej strony internetowej. Będzie oparta o ogólny domyślny szablon Drupala, więc jeszcze nie skończyliśmy. Dalej instalujemy swój szablon Drupal.
Aby zainstalować nowy motyw, należy przejść do sekcji "Wygląd". Zostaniesz przekierowany na stronę z listą dostępnych szablonów. Kliknij w przycisk "Zainstaluj nowy szablon" i wybierz archiwum zip ze swoim szablonem.
Po ustawieniu nowego szablonu jako domyślnego zobaczysz, że strona domowa witryny wygląda teraz inaczej. Posiada nowe logo i schemat kolorów. Aby strona wyglądała jak na demo wersji trzeba wykonać jeszcze jeden krok, aby zakończyć proces instalacji szablonu.
Teraz trzeba zainstalowanć dane demo dla strony. Aby to zrobić, trzeba przejść do panelu phpMyAdmin:
Dalej klikamy w nazwę Twojej bazy danych (każdy będzie miał inną nazwę). Zostaniesz przekierowany do strony ze wszystkimi tabelami swojej bazy danych. Dalej będziemy musieli zaimportować nowe dane.
Kliknij w kartę ‘Improtować’ i ‘Wybierz plik’.
Dalej wybierz plik .sql z szablonem.
Dalej wracamy do strony i logujemy się do panelu admina. Ten link pomoże to zrobić: mywebsite.com/user/.
Po zainstalowaniu szablonu nazwa użytkownika i hasło zostaną ustawione domyślnie:
Nazwa użytkownika: admin
Hasło: admin123
Te ustawienia można zmienić lub utworzyć nowego użytkownika przez panel admina.
Można również zmienić strukturę witryny, zmieniając, dodając lub usuwając blok w sekcji panelu admina Struktura -> Bloki.
Postanowiłam usunąć górny panel z danymi kontaktowymi i przenieść sekcję "Obserwuj nas" do panelu "Menu".
Teraz strona będzie wyglądała tak:
Dalej dostosujemy tło suwaka aby pasowało do tematu strony. Przechodzimy do karty "Wygląd" -> "Ustawienia" -> "Ustawienia regionu".
Klikamy w przycisk ‘Wybierz media’ i przesyłamy zdjęcie.
Teraz zastąpimy teksty w suwaku.
Przechodzimy do karty "Struktura'-> 'Bloki" i klikamy w przycisk edycji tuż obok wiersza 'Blok nagłówka'.
Po wprowadzeniu wszystkich danych suwak wygląda tak.
Teraz przejdziemy do dostosowania menu. W panelu admina przechodzimy do karty Struktura -> Menu.
Po kliknięciu zostanie wyświetlona lista pozycji menu. Usuwam pozycję menu "Dokumentacja" i zmieniam nazwę pozycji "O nas" na "Kim jesteśmy", a pozycję "Usługi" na "Dlaczego my".
Już dostosowaliśmy suwak, menu i linki social media, teraz nadszedł czas, aby przesłać nowe logo. Postanowiłam naśladować ten sam schemat kolorów, więc moje nowe logo będzie miało zielone elementy.
Musimy zastąpić treści w sekcji projektów, aby pasowli do ogólnego tematu strony. Każdy projket można lekko dostosować na stroniegłównej. Po prostu otwórz projekt i kliknij kartę "Edytuj".
Dodałam tytuł, opisanie meta i przesłałam zdjęcie.
Potem zrobiłam to samo dla wszystkich innych projektów mojej agencji:
Jak widać, tekst wprowadzający pasuje tylko do wersji demo, więc należy zmienię go. Aby to zrobić trzeba najechać na ten blok, kliknąć w przycisk edycji i dodać potrzebne treści.
Będziemy także potrzebowali modułu podstawowych cech, który jest świetnym sposobem na prezentację głównych usług Twojej firmy.
Postanowiłam reklamować trzy usługi mojej agencji: speech writing, tworzenie treści i conntent marketing.
Możesz zmienić ich wygląd, przechodząc do karty "Treści" i edytując artykuły z kategorii "Usługi".
Nie chcę, aby strona miała blok wiadomości, więc przejdę do karty Structure - > Blocks i wyłączę wszystkie bloki, których nie chcę widzieć na stronie.
Teraz trzeba przejść do karty ‘Wygląd’ - > ‘Ustawienia’ - > ‘Ustawienia regionu’ i zmienić zdjęcie w stopce. Nie jest to wymagane, ale mam zdjęcie, które chciałbym wykorzystać.
Oto jak wygląda końcowy wynik:
* * *
Jeśli chcesz stworzyć stronę o dowolnej złożoności, ogromny sklep lub mały blog, stronę docelową lub online magazyn, możesz użyć WordPressa i zostaniesz więcej niż zadowolony z mnóstwa wspaniałych funkcji tego CMS. Jest niewiarygodnie łatwy w użyciu i zrozumienu, więc będziesz mógł stworzyć stronę od podstaw samodzielnie. W dodatku w Internecie można znaleźć mnóstwo premium motywów WordPress, które mogą stać się dobrą podstawą dla Twojej przyszlej strony.
Praca z Joomla i Drupalem prawdopodobnie będziesz trochę trudniejsza, ponieważ Joomla jest nieco bardziej złożona, a Drupal jest bardzo skomplikowanym systemem. Pamiętaj o tym przy wyborze CMSa dla swojej strony.
Zestaw szablonów Drupala i premium szablonów Joomla jest nieco mniejszy ze względu na fakt, że mniejszy odsetek użytkowników wybiera te platformy. Zawsze jednak możesz znaleźć dla nich również gotowe rozwiązania.
Stworzyliśmy ten obszerny artykuł dla wszystkich ludzi, którzy chcieliby uruchomić stronę i mamy nadzieję, że pomoże Ci szybko uruchomić dowolny web serwis. Będziemy aktualizować ten przewodnik i chcielibyśmy poinformować, że możesz zostawić swoje pytania na temat tworzenia stron w komentarzach, a my postaramy się pomóc w rozwiązaniu problemów, które możesz napotkać w procesie.
W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.
