Jak vytvořit obchodní web pomocí WordPress & Elementor

Naučte se, jak vytvořit web pro svou firmu pomocí WordPress, Elementor a Astra. To vše jsou 100% bezplatné nástroje, které osobně používám.


V tomto návodu, jak vytvořit web 2019 tutoriál, vám ukážu víc, než jen to, jak vytvořit web, naučím vás také, jak optimalizovat web SEO a jak z něj generovat potenciální zákazníky..

Tento tutoriál je komplexní, můj nejdelší způsob, jak vytvořit webový tutorial. Doufám, že se vám to bude líbit.

Věci, které potřebujete:

  • Hosting. Doporučuji SiteGround.
  • A doménové jméno.
  • WordPress Téma. Pro tento tutoriál používáme zdarma téma Astra.
  • WordPress Page Builder. K tomu používáme bezplatný tvůrce stránek Elementor.

Začněme!

Krok 1: Kupte si webhosting a doménové jméno.

Nejdůležitější součástí vaší firemní webové stránky je hosting. Hosting bude určovat, jak rychle se vaše webové stránky načte, což je velmi důležitý faktor, který ovlivňuje generování a konverzi olova. Google také upřednostňuje rychlejší weby s nízkou mírou okamžitého opuštění, takže rychlejší web zvyšuje vaše šance na hodnocení na Googlu.

Jedna věc, na kterou bych rád poukázal, je vyhnout se společnostem EIG a GoDaddy v maximální možné míře. EIG znamená Endurance International Group a ovládá více než 60 hostingových společností. Vypaluje své interní podpůrné pracovníky a konsoliduje vše pod jedním deštníkem. Stává se zákaznická podpora, kvalita hostingu a celková kvalita služeb.

Zde jsou některé ze známých společností EIG:

  • Hostgator
  • BlueHost
  • iPage
  • Arvixe
  • Tlustá kráva
  • HostMonster Small Orange

GoDaddy má také spoustu špatných recenzí týkajících se kvality a zákaznických služeb a webové stránky, které hostují, se načítají opravdu pomalu.

Také se budete chtít vyhnout hostitelům „maminek a popů“, protože jim chybí zdroje k použití pokročilých hostitelských technologií, které vašemu webu poskytnou výhodu.

Chcete také zvolit hosting, který poskytuje bezplatné certifikáty SSL. Bez certifikátu SSL bude mít váš web tento ošklivý štítek „Not Secure“ nahoře:

není bezpečné

Pokud jste firma, můžete se s touto značkou prakticky rozloučit s potenciálními klienty. Pokud váš hosting neposkytuje certifikáty SSL zdarma, jeden certifikát SSL vás může stát 50 až 100 USD ročně na web.

Chcete také službu, která vám umožní upgradovat na něco, co se nazývá PHP7, díky kterému bude váš web mnohem rychlejší.

Siteground, Moje preferovaná webhostingová služba

Hostitelská služba, kterou jsem zjistil a která splňuje všechna tato kritéria, je SiteGround. SiteGround nabízí bezplatný SSL certifikát, umožňuje vám upgradovat na PHP7, má kvalitní hosting a úžasnou zákaznickou podporu. Je to opravdu nejlepší tam.

Zde jsou klíčové vlastnosti SiteGround:

  • Certifikát SSL zdarma
  • FAST Znalostní podpora
  • Pracovní prostředí WordPress
  • Zdarma migrace webových stránek
  • 30 dní zálohování

Udělal jsem s nimi úžasný obchod a poskytl 70% slevu každému, kdo se zaregistruje pomocí tento odkaz. Pokud tedy chcete na svém hostingu ušetřit peníze, klikněte na tento odkaz a zakupte si svůj hosting hned teď.

Chcete-li zakoupit svůj hosting od společnosti SiteGround, klikněte na tento odkaz. Po přistání na domovské stránce uvidíte čtyři různé typy hostingu:

zvolte plán lokality

Vyberte hosting WordPress a klikněte na Začít. Zobrazí se tři cenové plány:

siteground wordpress hosting ceny

Vyberte si podle svých potřeb a rozpočtu. Můžete se také podívat na jejich srovnání každého hostovacího plánu abyste se mohli rozhodnout, který z nich vyhovuje vašim podnikovým potřebám.

Jakmile si vyberete plán, klikněte na Získejte plán. Poté přejdete k dalšímu kroku, kterým je výběr domény. Pokud již název domény máte, vyberte „Už mám doménu“. Ale pokud jej nemáte, vyberte „Zaregistrujte novou doménu“ takže si můžete koupit doménu přímo uvnitř SiteGround. To stojí 15,95 $ ročně.

vyberte doménu

Nezapomeňte, že pokud již název domény, který chcete koupit, není k dispozici, SiteGround vám to oznámí a budete si muset vybrat jiný. Jakmile máte doménové jméno, klikněte na Pokračovat.

Dalším krokem k dokončení nákupu je poskytnutí přesných osobních a fakturačních údajů. Po dokončení klikněte na Zaplať teď. Nyní máte spolehlivý webhosting a doménové jméno.

Krok 2: Nainstalujte WordPress.

WordPress je nástroj pro vytváření webových stránek, který použijeme k vytvoření vašich firemních webových stránek. Je zcela zdarma, velmi snadno použitelný a přesto velmi silný. Dodává se s tisíci pluginy a motivy, které vám umožní dělat, co chcete, se svým webem.

SiteGround ve skutečnosti přichází s instalací WordPress jedním kliknutím, která rychle nainstaluje WordPress za vás.

Po dokončení hostování se zobrazí obrazovka s odkazem „Přejít do zákaznické oblasti“. Klikněte na to a dostanete se na stránku, kde si můžete nastavit nový hostingový účet. Pod Nastavte si svůj web, vybrat Spusťte nový web.

Zobrazí se seznam softwaru, který můžete nainstalovat. Vybrat WordPress.

nainstalovat wordpress

Chcete-li tento proces dokončit, musíte pro svůj web zadat přihlašovací údaje správce (e-mailovou adresu, uživatelské jméno a heslo). Toto jsou podrobnosti, které budete používat pro přístup k backendu vašeho webu, proto je ujistěte se, že jsou v bezpečí.

Po dokončení klikněte na Potvrdit > Kompletní nastavení. A nyní máte živý, hostovaný web WordPress.

Krok 3: Nainstalujte certifikát SSL.

Než udělám cokoli jiného, ​​chci vám nejprve ukázat, jak nainstalovat certifikát SSL, abyste se zbavili nezabezpečeného štítku, který jsem vám předtím ukázal. Pod Moje účty, klikněte Přejít na cPanel.

jdi na cpanel

CPanel je místo, kde můžete na svůj web nainstalovat jiný software a nástroje. Pokud posunete celou cestu dolů, měla by se zobrazit část nazvaná Bezpečnostní. V této části klikněte na Pojďme se zašifrovat.

umožňuje šifrování

Vyberte doménu, na kterou chcete nainstalovat SSL certifikát, vyberte Pojďme šifrovat SSL, a klikněte Nainstalujte.

Nyní je čas se přihlásit na nový web. Klikněte na Moje účty znovu nahoře a klikněte na Zařízení tab. Zde uvidíte název domény, který jste zaregistrovali. Naproti je zelená Přejděte na administrátorský portál knoflík. Kliknutím na toto tlačítko přejdete na svou přihlašovací stránku WordPress.

přejděte na řídicí panel wordpress

Přihlašovací stránky WordPress obvykle následují tyto formáty: yourdomain.com/wp-admin a yourdomain.com/wp-login. Váš může být jiný. Musíte si však pamatovat nebo poznamenat si adresu URL své přihlašovací stránky, aby se příště k ní přistupovalo přímým zadáním adresy URL do adresního řádku, aniž byste se museli přihlašovat do Siteground.

Přihlašovací stránka WordPress vypadá takto:

přihlašovací stránka wordpress

Sem zadejte své uživatelské jméno a heslo a přihlaste se na svůj web poprvé.

Jakmile jste uvnitř, první věcí, kterou musíte udělat, je říct WordPress, že máte SSL certifikát. To je docela jednoduché.

Na levém postranním panelu přejděte na Nastavení > Všeobecné. Na obrazovce se zobrazí dvě pole s názvem vaší domény: Adresa WordPress (URL) a Adresa webu (URL). Musíte zadat písmeno „s“ za „http“ a před dvojtečku „:“ pro obě pole.

přidání ssl certifikátu v wordpress

Po dokončení klikněte na Uložit změny. Váš web by nyní měl mít vedle názvu domény ikonu visacího zámku:

zabezpečený web s https

Poslední věcí, kterou musíme pro SSL certifikát udělat, je zajistit, aby lidé, kteří do své adresy zadají „http“, byli přesměrováni na vaši „https“ URL. K tomu potřebujeme plugin.

Chcete-li nainstalovat plugin, přejděte na Pluginy > Přidat nový. Na vyhledávacím panelu v pravém horním rohu vyhledejte plugin Opravdu jednoduchý SSL. Nainstalujte a aktivujte jej.

nainstalovat opravdu jednoduchý ssl

Tato vyskakovací zpráva se poté zobrazí na hlavním panelu:

aktivovat opravdu jednoduchý ssl

Klikněte na modrou Pokračujte, aktivujte SSL! knoflík. Budete odhlášeni a jakmile se znovu přihlásíte, bude plugin Really Simple SSL plně funkční.

Krok 4: Nainstalujte Astra Theme a Astra Sites.

Pro firemní web chcete téma s čistým kódem a flexibilními funkcemi, aby bylo přizpůsobení co nejsnadnější a nejrychlejší. Existuje spousta kvalitních WordPress témat, ale téma, které zde budeme používat, je Astra Theme.

Astra Theme je zdarma téma WordPress, které má vynikající rychlost a jednoduchost. Nejvíc se mi na tom líbí, je to, že se konfiguruje na základě nástrojů, které potřebujete, a to vám na konci usnadní věci. K dispozici je také verze Pro, pokud chcete získat přístup k prémiovým funkcím.

astra téma

Zde jsou funkce, které se mi na Astra nejvíce líbí:

  • Jeden z nejrychlejších dostupných témat
  • Více než 100 startovacích webů (většina z nich je 100% zdarma)
  • Flexibilní funkce menu Mega
  • Výkonný doplňkový balíček
  • Rozsáhlá podpora WooCommerce

Chcete-li nainstalovat Astra, přejděte na Vzhled > Téma > Přidat nový. Vyhledejte Astra, klikněte na Nainstalujte, a aktivovat.

instalace astra

Další úžasnou věcí na Astra je skutečnost, že má plugin nazvaný Webové stránky Astra Starter. Tento plugin obsahuje knihovnu předem vytvořených bezplatných a prémiových šablon, které můžete použít na svém vlastním webu pomocí několika kliknutí. Použijeme šablonu Astra Site, abychom zkrátili dobu vytváření webových stránek na polovinu.

Po instalaci Astra se tato zpráva zobrazí na hlavním panelu:

začít s webem Astra

Klikněte na Začít. Tím se nainstalují startovací stránky Astra. Webové stránky Astra můžete také nainstalovat na adrese Pluginy > Přidat nový. Hledat Astra Sites a nainstalovat a aktivovat. Chcete-li se dostat na stránky Astra, přejděte na Vzhledy >Webové stránky Astra Starter.

Výběr Tvůrce stránek

Po instalaci serverů Astra budete dotázáni, který tvůrce stránek dáváte přednost: Gutenberg, Elementor, Beaver Builder nebo Brizy. V tomto tutoriálu budu používat Elementora.

Elementor je program pro tvorbu stránek WordPress, který vytvořil stránku na novou úroveň. Má hlubokou sadu funkcí, ale je velmi snadné jej ovládat a ovládat. Bezplatná verze je dostačující pro vytvoření slušné webové stránky, ale pokud chcete více pokročilých funkcí, jako je možnost přidávat kontaktní formuláře, jezdce, cenové tabulky a další, můžete upgradovat na verzi Pro.

Výběr motivu stránky Astra

Jakmile vyberete tvůrce stránek, budete přesměrováni do knihovny šablon Astra Sites. Můžete si vybrat z mnoha elegantních, profesionálně vypadajících šablon – bezplatných i prémiových. Šablony jsou uspořádány do následujících kategorií: Blog, Business, eCommerce, Free a Other. Vzhledem k tomu, že vytváříte firemní web, je nejlepší procházet web Podnikání sekce.

Udělejte si čas na výběr šablony, o které se domníváte, že se bude nejvíce blížit vaší značce. Tyto šablony jsou plně upravitelné pomocí zvoleného tvůrce stránek, což znamená, že můžete snadno měnit text, obrázky, rozvržení, tlačítka a v podstatě všechno na stránce.

Pro tento tutoriál budu používat Účetní šablony, protože to vypadá úžasně a snadno na očích.

Chcete-li nainstalovat motiv, stačí na něj kliknout a přejít do náhledu. Pokud se vám líbí, co vidíte, klikněte na ikonu Importovat motiv a ujistěte se, že jsou všechna políčka zaškrtnuta.

pole astra weby téma

Pokud si to všimnete, je tu krabice, která říká „Nainstalujte požadované doplňky“. Zaškrtnutím tohoto políčka nainstalujete všechny požadované doplňky pro motiv, aby vypadal přesně tak, jak je. Pro toto téma byla nainstalována zásuvná jednotka WPForms Lite, která umožňuje vytvářet jednoduché kontaktní formuláře, a Elementor, nástroj pro tvorbu stránek, který budu používat. Kliknutím na malý otazník vedle něj zobrazíte, jaké doplňky budou nainstalovány.

WPForms je plugin, který vám pomůže získat kvalitní potenciální zákazníky pro vaši firmu prostřednictvím efektivních formulářů. Chcete-li se o tom dozvědět více, můžete se podívat na mou recenzi WPForms. Pokud chcete použít jiný plugin plugin, stačí deaktivovat / smazat WPForms v Pluginy > Nainstalované doplňky a nainstalujte si preferovaného tvůrce formulářů.

instalace motivu stránky astra

Import motivu může chvíli trvat. Nezavírejte prohlížeč ani nezasahujte. Počkejte, a až bude hotovo, uvidíte modrou Zobrazit web knoflík. Kliknutím na toto tlačítko přejdete na svůj web, který má nyní téma, které jste právě importovali.

Krok 5. Výběr konstrukčních prvků.

Vaše webové stránky nyní vypadají úžasně, ale budete si chtít vytvořit svůj vlastní. K tomu potřebujete vlastní barevné schéma, typografii a logo.

Začněme s vaší paletou barev. Pokud již máte barvu značky, bude to snazší.

Výběr palety barev

Web má obvykle sadu 2–3 barev: základní, akcentní a populární. základní barva je dominantní barva vašeho webu a pravděpodobně i barva vaší značky. To je barva, kterou chcete, aby si lidé pamatovali vaši značku.

Při výběru primární barvy musíte zkoumat psychologii barev nebo to, jak barvy ovlivňují vnímání nebo chování lidí. Některé barvy způsobují, že lidé něco cítí, např. červená způsobuje, že se cítí strach, takže při výběru primární barvy musíte tyto věci zvážit.

přízvuková barva se obvykle používá k tomu, aby určité prvky vynikly než ostatní, jako nadpisy nebo titulky.

A konečně, popová barva kontrastuje se zbývajícími barvami, díky nimž vynikají důležité prvky webu, jako jsou tlačítka s výzvou k akci nebo formuláře pro generování potenciálních zákazníků.

Při výběru barevné palety se mi líbí dva nástroje. První z nich je Coolors.co, web, kde můžete procházet různé palety barev a získat nápady nebo inspiraci. Pokud vidíte něco, co se vám líbí, můžete rychle zkopírovat hexadecimální kód a použít jej na WordPress.

Pokud kliknete na Prozkoumat v záhlaví uvidíte tuto rozsáhlou sbírku palet:

barevné palety barev

Pokud vidíte paletu, která se vám líbí, umístěte na ni kurzor myši a klikněte Pohled, a budete přesměrováni do nového okna, kde uvidíte hexadecimální kódy každé barvy.

hex kódy barevných palet

Tyto hexadecimální kódy jsou to, co potřebujete k použití těchto barev na svém webu. Později vám ukážu, jak používat tyto hexadecimální kódy na backendu WordPress.

Dalším skvělým nástrojem je Colorzilla. Toto je rozšíření Google Chrome, které vám umožní získat hexadecimální kód jakékoli barvy, kterou vidíte na jakémkoli webu, pouhým kliknutím na něj.

Pokud chcete získat rozšíření Colorzilla, klikněte zde. Poté klikněte na Přidat do Chromu.

colorzilla

Na panelu nástrojů se pak zobrazí tato ikona:

ikona colorzilla

Takže pokud chcete znát hexadecimální kód barvy, kterou jste viděli na webu, stačí kliknout na tuto ikonu a poté na barvu, kterou chcete zkopírovat. Hexový kód bude poté automaticky zkopírován. Tento kód Hex můžete vložit do konkrétních oblastí v aplikaci WordPress.

Přizpůsobení typografie

Chcete také použít vlastní typografii, která odpovídá vaší identitě značky a pomůže vašemu webu vyniknout. Webové stránky mají obvykle 2-3 písma. Stejně jako u barev budete mít primární písmo což jsou písma pro titulky nebo nabídky. Potřebujete také tělo písmo za odstavce textů a také „popové písmo“, Aby některé texty vynikly.

Stejně jako barvy potřebujete typografii, která zůstane věrná vaší značce, vypadá příjemně pro oči a vysílá správnou zprávu o vaší značce.

Jedním z mých oblíbených nástrojů při výběru typografie je Fontpair.co. Toto je web, který vám ukáže, jak spolu vypadají dvě různá písma.

fontpair.co

Pokud vidíte něco, co se vám líbí, poznamenejte si, jak se jmenuje, abyste jej mohli vyhledat v WordPressu a použít na svém webu.

Také se mi líbí použití WhatFont, rozšíření Google Chrome, které vám řekne, jaké písmo se používá na jakémkoli webu pouhým přesunutím myši nad něj.

Chcete-li nainstalovat WhatFont, klikněte zde potom klikněte na Přidat do Chromu. Na panelu nástrojů se pak zobrazí tato ikona:

co

Chcete-li znát název písma, klikněte na tuto ikonu a najeďte myší nad text. WhatFont vám řekne název tohoto písma a pokud na něj kliknete, uvidíte také velikost písma, barvu, rodinu, styl, váhu a další.

pomocí Whatfont

Získání loga

Nakonec vaše firma potřebuje krásné logo, které hovoří o tom, o čem je vaše značka. Zde můžete jít se třemi různými trasami. Logo si můžete vytvořit sami pomocí bezplatného nástroje s názvem Canva, populární nástroj pro navrhování, který usnadňuje navrhování i pro začátečníky.

Budete překvapeni, kolik šablon logo má společnost Canva a všechny vypadají úžasně. Tyto šablony můžete upravit tak, aby byly vlastní.

Měli byste však vědět, že pokud chcete exportovat logo s průhledným pozadím, musíte upgradovat na Pro. K dispozici je však měsíční zkušební verze zdarma, takže můžete upgradovat na Pro, exportovat své průhledné logo a zrušit před ukončením zkušební doby.

loga canva

Můžete si také najmout návrháře loga, aby to pro vás udělal. Můžete vyzkoušet weby, jako je Fiverr.com nebo 99design, ale při výběru interpreta musíte být opatrní na základě jejich stylu, záznamů, recenzí, hodnocení a dalších..

Třetí cestou a pravděpodobně dobrým nápadem, pokud chcete silné logo značky, je najmout designového stratéga / konzultanta. Lidé jako tito jsou profesionálové, kteří si udělají čas, aby pochopili, o čem vaše značka je, kam vaše firma směřuje a jaké jsou vaše základní hodnoty, aby ji mohli začlenit do loga.

Krok 6. Upravte si svůj web.

Jakmile pro svůj web použijete paletu barev, písma a logo, je nyní čas je použít na vašem webu. Pokud jste v backendovém panelu WordPress, přejděte na Vzhled > Přizpůsobte otevřete přizpůsobovač motivu.

přizpůsobit téma

Můžete také jít sem, pokud jste na rozhraní vašeho webu. V horní části obrazovky by měl být černý pruh, který je viditelný pouze pro ty, kteří jsou přihlášeni na váš web. Klikněte na Přizpůsobte otevřete přizpůsobovač motivu.

přizpůsobit frontend tématu

Jakmile jste uvnitř nástroje pro přizpůsobení motivů, budete moci přidat své logo, změnit barvy, změnit rozvržení webu a mnoho dalšího.

přizpůsobitel motivu

Na levém postranním panelu se zobrazují různé možnosti úpravy vašeho webu. Každé téma má různé možnosti přizpůsobení, takže pokud používáte jiné téma, může se to, co zde vidíte, trochu lišit od mého. Všechny změny, které zde provedete, se na vašem webu zobrazí v reálném čase.

V tomto motivu můžete změnit barvy svých stránek na Barvy a pozadí. Budete mít možnost změnit základní barvy, strouhanku, záhlaví a zápatí.

editor barev pozadí

Základní barvy jsou barva motivu, barva odkazu, barva textu a barva přechodu na odkaz vašeho webu. Chcete-li změnit základní barvy, klikněte na Základní barvy. Uvnitř uvidíte tlačítka, která říkají Vyberte možnost Barva. Kliknutím na tato tlačítka změníte konkrétní barvu.

Chcete-li například změnit barvu motivu, klikněte na Vyberte možnost Barva vedle toho. Uvidíte dva způsoby, jak vybrat barvu. Nejprve můžete do pole vložit hexadecimální kód. Pokud si pamatujete, o čem jsme hovořili o hexadecimálních kódech v předchozím kroku, můžete tyto hexadecimální kódy zadat do těchto polí.

Takže pokud jste našli barvu v Coolors.co nebo na jiných místech, můžete sem vložit hexadecimální kód. Můžete také vybrat barvu v integrovaném nástroji pro výběr barev.

základní barevný editor

Další je změna vaší typografie. Vraťte se zpět do přizpůsobovače kliknutím na šipku zpět v horní části postranního panelu a klikněte na Typografie. Budete moci změnit typografii základny, strouhanku, obsah a blog.

typografie

Nakonec nahrajte své logo na adresu Rozložení > Záhlaví > Identita stránek. V části Logo klikněte na ikonu Změnit Logo a nahrajte své logo.

změnit logo

Astra také umožňuje použít jiné logo pro sítnice nebo zařízení s vysokým rozlišením a také pro mobilní zařízení. Můžete také upravit šířku loga. Pokud přejdete dolů, budete také moci změnit název svého webu, přidat popisek webu a ikonu webu nebo favicon.

Navrhuji, abyste prozkoumali přizpůsobovač motivu a zjistili, co zde můžete dělat. Téma Astra vám umožní dělat víc, jako změnit rozvržení záhlaví a zápatí, změnit strukturu příspěvků na blogu, změnit, jak široká bude vaše stránka, a mnoho dalších.

Jakmile přizpůsobení provedete, nezapomeňte kliknout Publikovat aby vaše změny byly zveřejněny na vašem webu.

Krok 7. Přizpůsobení webu pomocí Elementoru.

Nyní, když jsou barvy, typografie a logo vašeho webu nastaveny, je čas skočit do Elementoru a úplně změnit vzhled webu tak, aby odpovídal vaší značce. Budeme měnit obrázky, texty, tlačítka, rozvržení a mnoho dalšího.

Existují dva způsoby, jak upravit stránku pomocí Elementoru. Nejprve, pokud jste v backendu, jděte na Stránky a měl by se zobrazit seznam všech stránek vašeho webu. To zahrnuje stránky, které Astra Site automaticky vytvořil. Stránky, které byly vytvořeny s konkrétním tvůrcem stránek (např. Elementor), budou takto označeny:

stránky

Umístěte kurzor myši na stránku, kterou chcete upravit, pomocí Elementoru a klikněte Upravit pomocí Elementoru.

editovat s backend elementu

To vás zavede dovnitř Elementora.

Pokud jste na rozhraní svého webu, můžete vstoupit do Elementoru tak, že přejdete na stránku, kterou chcete upravit, a klikněte na Upravit pomocí Elementoru na černém pruhu nahoře:

editovat s frontendem elementoru

Rozhraní Elementor je snadno pochopitelné a zvyklé, protože je velmi podobné přizpůsobiteli motivu. Většina obrazovky zobrazuje stránku, kterou upravujete, zatímco vlevo je postranní panel s ovládacími prvky a možnostmi.

elementor

Pokud jste si všimli, záhlaví není uvnitř Elementoru vidět. Důvodem je, že bezplatná verze Elementoru není schopna upravovat záhlaví a zápatí. Tato funkce je k dispozici pouze pro Elementor Pro.

Levý postranní panel je místo, kde můžete najít elementy které můžete přidat na svou stránku. Jak vidíte, můžete přidat nadpis, obrázek, video, tlačítko, dělič a další. Tyto prvky můžete přidat přetažením do požadované oblasti.

Elementor také umožňuje inline úpravu textu, což znamená, že můžete změnit text v samotné oblasti obsahu. Zde jsou některé z věcí, které můžete dělat s texty uvnitř Elementoru:

editace textu v elementu

Jak vidíte, můžete text upravovat nebo mazat přímo v oblasti obsahu, což je mnohem snazší. Na postranním panelu najdete další možnosti přizpůsobení, například změnu velikosti, barvy, hmotnosti, rodiny typografií a stínů. Můžete také přidat animace, jako jsou jednoduché mizení, přibližování, skákání a další.

Také byste chtěli použít své vlastní obrázky k úplnému vytvoření tohoto webu. Pokud chcete, můžete snadno nahradit nebo odstranit obrázek. Chcete-li přizpůsobit obrázek, stačí na něj kliknout a možnosti se zobrazí na levém postranním panelu. Můžete nahrát nový obrázek, změnit jeho velikost, přidat ohraničení nebo stín, přidat animaci a další.

úprava obrázku v elementu

U svého webu chci tento obrázek úplně odstranit a použít pouze jiný obrázek na pozadí. Chcete-li obrázek odstranit, umístěte na něj kurzor myši a klepněte pravým tlačítkem myši ikona modré pero v pravém horním rohu. Objeví se rozbalovací nabídka. Klikněte na Odstranit obrázek odeberete.

odstranění obrázku v elementu

Chcete-li upravit nadpis, umístěte na něj kurzor myši a klikněte na tečkovanou ikonu v horní části:

přizpůsobení nadpisu v elementu

Možnosti přizpůsobení nadpisu se poté zobrazí na levém postranním panelu. Chcete-li změnit obrázek na pozadí nadpisu, klikněte na Styl a jít do Pozadí. Zde můžete nahrát nové pozadí.

přizpůsobení nadpisu

Jak vidíte, po nahrání obrázku jsem upravil překrytí pozadí, aby byl obrázek jasně viditelný. Udělal jsem to tím, že jsem šel Pozadí překrytí a přizpůsobení krytí.

Také jsem upravil barvu textu, aby byl viditelný, a upravil jsem šířku textu tak, aby se nepřekrýval s obrázkem. Udělal jsem to tím, že jsem šel Pokročilý > Vlastní polohování a výběr Zvyk pro šířku.

Vytváření ohromující webové stránky je s Elementorem tak snadné. Existuje jen tolik možností, takže je to jen otázka zkoumání každého zákoutí. Můžete to prozkoumat svým vlastním tempem, a pokud existuje něco, čemu nerozumíte, můžete se na mě obrátit skrze sekci komentářů níže nebo dokonce prohledat obsáhlý Elementor znalostní báze.

Mám také tutoriál Elementor, kde vám ukážu, jak začít s Elementorem rychle. Můžete to sledovat tady.

Krok 8. Zabezpečte svůj web.

Je také zásadní, aby obchodní web byl co nejbezpečnější před možnými schématy hackování a krádeží identity. Skutečností je, že někteří z vás mohou být zranitelní vůči kybernetickým útokům kvůli slabým heslům, zranitelnostem pluginů a zastaralému softwaru. Tyto věci ponechávají na vašem webu díru a je třeba najít způsob, jak tyto otvory zablokovat.

Nejlepší plugin WordPress, který jsem dosud našel, je iThemes Security. Bezplatná verze tohoto pluginu vám již nabízí silné bezpečnostní funkce a můžete jej aktivovat jediným kliknutím.

Chcete-li nainstalovat iThemes Security, přejděte na Pluginy > Přidat nový pak hledejte iThemes Security.

nainstalovat ithemes

Po aktivaci uvidíte na postranním panelu novou možnost s názvem Bezpečnostní. Jít do Bezpečnostní > Nastavení a měli byste vidět zprávu o různých funkcích, které pro vás může služba iThemes udělat.

bezpečné stránky ithemes

Povolení všech těchto funkcí vyžaduje pouze jedno kliknutí na modrou Zabezpečený web knoflík. Po kliknutí na toto tlačítko se zobrazí tato zpráva:

aktivovat síťovou ochranu hrubou silou

Síťová ochrana proti hrubé síle je funkce, kdy uživatelé, kteří se pokusili proniknout na jiné weby, kteří jsou členy této sítě, mají automaticky zakázáno proniknout do vaší. Toto je docela dobrá funkce, kterou má pouze iThemes, takže k aktivaci stačí zadat vaši e-mailovou adresu a kliknout Aktivujte ochranu síťové síly.

Váš web je nyní na několik kliknutí bezpečný. S tímto pluginem můžete udělat mnohem víc a pokud se o něm chcete dozvědět více, můžete si prohlédnout můj tutoriál pro kontrolu a nastavení iThemes Security tady.

Krok 9. Zálohujte svůj web.

Musíte také zálohovat svůj web, abyste se zachránili před možnou nešťastnou událostí ztráty vašich dat. K tomu použijeme Záloha UpdraftPlus.

Chcete-li nainstalovat tento plugin, přejděte na Pluginy > Přidat nový a hledat Záloha UpdraftPlus. Nainstalujte a aktivujte jej.

nainstalovat updraftplus

Jakmile je aktivována, vytvoří se pod ní nová možnost Nastavení volala Zálohy UpdraftPlus. Klepnutím na něj zahájíte konfiguraci nastavení zálohování.

zálohy updraftplus v nastavení

Jakmile jste uvnitř, klikněte Nastavení. Zde to nastavíme tak, aby se pravidelně vytvářely automatické zálohy mimo pracoviště. Pro Plán zálohování souborů, Doporučuji nastavit na týdně a udržení jednoho záloha. Soubory se nemění často, takže je to dost dobré.

jako pro Plán zálohování databáze, protože se to často mění, nastavte ji na denně a ponechat si 7 záloh.

Jakmile nastavíte plány, přejděte dolů a stiskněte Uložit změny. Poté přejděte zpět nahoru a vyberte, kam chcete zálohovat. Dropbox obvykle doporučuji, protože se velmi snadno používá, ale můžete použít cokoli a tolik, kolik chcete.

nastavení zálohy updraftplus

Klikněte na upřednostňované vzdálené úložiště a klikněte na Uložit změny znovu. Zobrazí se tato zpráva:

ověření vzdáleného úložiště

Musíte kliknout na tento odkaz a autorizovat UpdraftPlus Backups k ukládání záloh do vybraného úložiště. V tomto příkladu, protože jsem vybral Dropbox, kliknutím na tento odkaz se dostanete na přihlašovací stránku Dropbox. Po přihlášení se zobrazí tato zpráva:

Kompletní nastavení zálohy updraftsplus

Musím jen kliknout Kompletní nastavení, a vrátím se zpět na backend UpdraftsPlus ve WordPressu s touto potvrzovací zprávou nahoře:

autentizace dokončena

Pokud jsem chtěl udělat zálohu, stačí kliknout na modrou Nyní zálohujte knoflík. UpdraftPlus také vytvoří zálohy podle plánu, který jsem vytvořil dříve, a vloží je do DropBoxu.

Pokud chcete obnovit zálohu, stačí kliknout na Existující zálohy a klikněte na Obnovit.

Krok 10. Optimalizujte svůj web.

Jdeme na poslední krok a v tomto kroku se podíváme, jak optimalizovat váš web pro vyhledávače, jako je Google. Jsem si jistý, že většina z vás už slyšela o SEO nebo optimalizaci vyhledávače. Stručně řečeno, je to zvyk, jak zajistit, aby byl váš web optimalizován správným způsobem, který usnadní vyhledávacím vyhledávačům najít vaše stránky a zobrazit vás na stránkách s výsledky..

SEO má aspekt nazvaný SEO na stránce, a to jsou postupy, které můžete implementovat na svůj web přímo uvnitř WordPressu, abyste jasně informovali vyhledávačům, o čem váš web a obsah jsou.

Toto jsou některé doporučené postupy SEO na stránce, které je třeba implementovat:

  • Napište název metadat a popis metadat pro každou stránku a příspěvek.
  • Přidejte klíčová slova nebo klíčové fráze a použijte je v celém obsahu.
  • Přidejte ALT TXT pro každý obrázek na vaší stránce / příspěvku.

Teď, pokud nejste obeznámeni s tím, co tyto věci jsou, to je v pořádku. Dají se snadno naučit. Název metadat je název, který se zobrazuje ve výsledcích Google, a meta popis je krátký popis pod nadpisem. Zde je příklad:

Příklad výsledku vyhledávání google

Klíčové slovo je to, co uživatelé zadají do vyhledávače, aby něco našli. Metaditum je název výsledku a popis metadat je krátký popis níže. Jedná se o důležité podrobnosti, protože sdělují Googlu, o čem je stránka a že je relevantní pro klíčovou frázi „salon New York“.

Toto je krátký seznam technik SEO na stránce, protože zde je doslova tolik, kolik děláte. Ale prozatím se na ně zaměříme.

K tomu je potřeba plugin. Jeden z nejlepších on-page SEO WordPress pluginů je Yoast SEO, a my to budeme používat v tomto tutoriálu. Chcete-li nainstalovat tento plugin, stačí přejít na Pluginy > Přidat nový a hledat Váš SEO. Klikněte na Nainstalovat nyní a aktivovat.

nainstalujte si seo

Nyní, když přejdete na jakoukoli stránku nebo příspěvek, uvidíte toto nové pole pod oblastí editoru:

yoast seo box

Zde můžete přidat název metadat, popis metadat a klíčová slova. Chcete-li přidat klíčové slovo, zadejte jej do pole níže Zaškrtávací frázi:

přidat klíčové slovo

Chcete-li přidat název a popis metadat, klikněte na ikonu Upravit úryvek knoflík.

upravit úryvek

Pod názvem SEO je místo, kam byste měli přidat svůj meta titul. Je dobré uvést sem frázi zaměřenou na fokus. V poli popisu metadat byste měli dát jasnou představu o tom, o čem je stránka, a sem také přidat klíčovou frázi.

Když něco zadáte do pole SEO title a meta description, uvidíte pod ním oranžový indikátor průběhu. To znamená, že text je stále příliš krátký. Jakmile se barva změní na zelenou, znamená to, že délka textu je správná. Pokud zčervená, je příliš dlouhá a měli byste ji zkrátit. Dlouhé tituly a popisy jsou ořezány ve výsledcích, takže je lepší zůstat v zelené oblasti.

Další věc, kterou chcete udělat, je zajistit, aby váš soubor Sitemap byl povolen a skutečně funkční. Chcete-li to udělat, jděte na Váš SEO > Všeobecné > Funkce. Přejděte dolů, dokud neuvidíte Soubory XML. Ujistěte se, že je toto povoleno, a potom klepněte na modrou ikona otazník. Uvidíte odkaz, který říká Podívejte se na soubor Sitemap XML. Kliknutím na toto zobrazíte svůj soubor Sitemap.

umožňující soubory Sitemap

Pro mnoho z vás to může vést na stránku 404. Ale nedělej si starosti. Oprava je celkem jednoduchá. Jediné, co musíte udělat, je jít na Nastavení > Permalinky. Vybrat Název příspěvku a zasáhnout Uložit změny.

post jméno permalink

Když se pokusíte znovu získat přístup k souboru Sitemap XML, uvidíte něco podobného:

xml sitemap

Zabalení

A to zabalí tento tutoriál o tom, jak vytvořit obchodní web s WordPress. Chtěl bych vám klepnout na ramena, protože jste toho udělali tolik a toho, čeho jste dosáhli, následováním tohoto tutoriálu. Pokud máte nějaké dotazy, jednoduše je vypusťte níže v sekci komentářů a my vám rádi pomůžeme.

SiteGround

SiteGround je vysoce doporučený webhosting online, protože se starali o uživatele WordPress a přesto mají cenově dostupné ceny. Oni jsou nejvíce známí pro jejich rychlý výkon a stejně rychlou podporu.

Klíčové funkce SiteGround:

  • Certifikát SSL zdarma
  • FAST Znalostní podpora
  • WordPress Staging Enviroment
  • Zdarma migrace webových stránek
  • Denní zálohy

SiteGround je solidní volbou pro vaše potřeby webhostingu. Zajišťují webové stránky WordPress a nabízejí méně zdrojů než jejich konkurenti, ale vyšší spolehlivost.

Podívejte se na SiteGround

Téma Astra

Astra je zdarma téma WordPress, které je zaměřeno na rychlost. Volitelně si můžete zakoupit verzi Pro za 59 USD, která přidává některá další nastavení a možnosti.

Klíčové vlastnosti motivu Astra:

  • Ne téma půstu, ale není to slyšet
  • Spousta bezplatných demo stránek
  • Flexibilní funkce menu Mega
  • Možnosti vlastních rozvržení
  • Podpora WooCommerce
  • Podpora LearnDash

Téma Astra je spravedlivou volbou pro jakýkoli projekt webového designu WordPress. Předpokládám, že největší otázkou je, zda v dnešní době potřebujete dokonce zakoupit téma, protože tvůrci stránek dělají všechny stejné věci, jako byste potřebovali. Například prvek Elementor má bezplatný motiv Hello, díky kterému může tvůrce stránek dělat veškerou práci.

Stále existuje několik dobrých důvodů pro zakoupení profilového motivu, ale pro většinu lidí bude s volným motivem pravděpodobně dobré.

Myslím si však, že Astra Theme nesledovala aktuální trendy a už to nedoporučuji.

K dispozici jsou mnohem lepší moderní témata, která nabízejí vestavěné nástroje pro tvorbu záhlaví a zápatí, přičemž jsou omezena na 3 rozvržení a flexibilnější rozvržení stránek a příspěvků.

Podívejte se na motiv Astra

Elementor

Elementor je program pro tvorbu stránek WordPress, který přijal návrh webu WordPress bouří. Má nejhlubší sadu funkcí, přesto se velmi snadno používá a ovládá. Elementor je nejoblíbenější bezplatný tvůrce stránek. K dispozici je také doplněk Pro pro přidání dalších funkcí pro vývojáře.

Klíčové vlastnosti elementu:

  • Live Front End Page Editor
  • Funkce personifikace webových stránek
  • Knihovna šablon a bloků
  • Rozsáhlé možnosti mobilní reakce
  • Nejvýkonnější tvůrce vyskakovacích oken
  • PRO Vytvořte vlastní záhlaví / zápatí
  • PRO Vytvořit rozvržení typu příspěvku

Elementor je v současné době nejsilnějším tvůrcem stránek. Neustále vydávají nové funkce, které odpovídají současným trendům designu. To znamená, že budete moci udržovat svůj web relevantní.

Elementor Pro je neuvěřitelná hodnota s ohledem na všechny další moduly a výkonové funkce, které obsahuje.

Kdybych dnes zahajoval nový webový projekt, Elementor by byl tvůrcem stránek, který bych si vybral. Považuji to za nutné mít tvůrce stránek WordPress, který je pro nás potěšením.

Podívejte se na Elementora

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map