Как да направите уебсайт за бизнес с помощта на WordPress & Elementor

Научете как да направите уебсайт за вашия бизнес с помощта на WordPress, Elementor и Astra. Всичко това са 100% безплатни инструменти, които аз лично използвам.


В това как да направите урок за уебсайт 2019, ще ви покажа повече от това как да създадете уебсайт, аз също ще ви науча как да оптимизирате уебсайта си и как да генерирате потенциални клиенти от него.

Този урок е изчерпателен, най-дългият ми как да изградя урок за уебсайт. Надявам се да ти хареса.

Необходими неща:

  • Хостинг. Препоръчвам SiteGround.
  • А име на домейн.
  • Тема на WordPress. За този урок използваме безплатната тема Astra.
  • WordPress Page Builder. За това използваме безплатния конструктор на страници на Elementor.

Да започваме!

Стъпка 1: Купете уеб хостинг и име на домейн.

Най-важната част от вашия бизнес уеб сайт е хостинг. Хостингът ще определи колко бързо се зарежда уебсайтът ви, което е много важен фактор, който влияе върху генерирането и конвертирането на олово. Google също така предпочита по-бързи уебсайтове с ниска степен на отпадане, така че по-бързият уеб сайт увеличава шансовете ви за класиране в Google.

Едно нещо, което искам да отбележа, е да избягвам EIG и GoDaddy компаниите колкото е възможно повече. EIG означава Endurance International Group и контролира над 60 хостинг компании. Той разпалва техния вътрешен помощен персонал и консолидира всичко под един чадър. Случва се поддръжката на клиентите, качеството на хостинга и цялостното качество на услугата.

Ето някои от добре познатите компании EIG:

  • Hostgator
  • BlueHost
  • Ipage
  • Arvixe
  • Дебела крава
  • HostMonster Small Orange

GoDaddy също има много лоши отзиви по отношение на качеството и обслужването на клиентите, а уебсайтовете, които хоства, просто се зареждат много бавно.

Също така ще искате да избягвате домакините на „мама и поп“, тъй като им липсват ресурси за използване на модерни хостинг технологии, които ще дадат предимство на уебсайта ви.

Освен това искате да изберете хостинг, който предоставя безплатни SSL сертификати. Без SSL сертификат, вашият уебсайт ще има този грозен етикет „Not Secure“ в горната част:

не е сигурно

Ако сте бизнес, на практика можете да се сбогувате с потенциалните клиенти с този етикет. Ако вашият хостинг не предоставя SSL сертификати безплатно, един SSL сертификат може да ви струва $ 50 – $ 100 на година на уебсайт.

Вие също искате услуга, която ще ви позволи да надстроите до нещо, наречено PHP7, което ще направи уебсайта ви много по-бърз.

Siteground, Моята предпочитана уеб хостинг услуга

Хостинг услуга, която открих, че отговаря на всички тези критерии е SiteGround. SiteGround предлага безплатен SSL сертификат, позволява ви да надстроите до PHP7, има качествен хостинг и невероятна поддръжка на клиенти. Наистина е най-доброто там.

Ето основните функции на SiteGround:

  • Безплатен SSL сертификат
  • БЪРЗА Поддръжка
  • Сценична среда на WordPress
  • Безплатна миграция на уебсайтове
  • 30 дни резервни копия

Сключих невероятна сделка с тях, за да дам 70% отстъпка на всеки, който се регистрира да използва тази връзка. Така че, ако искате да спестите пари от вашия хостинг, кликнете върху тази връзка и закупете вашия хостинг сега.

За да закупите вашия хостинг от SiteGround, кликнете върху тази връзка. След като кацнете на началната им страница, ще видите четири различни типа хостинг:

изберете план на площадката

Изберете хостинг на WordPress и щракнете Първи стъпки. След това ще видите три плана за ценообразуване:

ценообразуване на хостинг за wordpress wordground

Изберете такъв според вашите нужди и бюджет. Можете също да проверите техните сравнение на всеки хостинг план за да можете да решите кой от тях отговаря на нуждите на вашия бизнес.

След като изберете план, щракнете върху Вземете план. След това ще преминете към следващата стъпка, която е избор на домейн. Ако вече имате име на домейн, изберете „Вече имам домейн“. Но ако нямате такъв, изберете „Регистрирайте нов домейн“ така че можете да си купите домейн точно в SiteGround. Това струва $ 15,95 на година.

изберете домейн

Имайте предвид, че ако името на домейна, което искате да закупите, вече не е достъпно, SiteGround ще ви уведоми и ще трябва да изберете друго. След като имате име на домейн, щракнете Продължи.

Следващата стъпка за завършване на покупката ви е предоставянето на вашите точни лични и данни за плащане. След като направите това, щракнете Плати сега. Вече имате надежден уеб хостинг и име на домейн.

Стъпка 2: Инсталирайте WordPress.

WordPress е инструмент за създаване на уебсайт, който ще използваме за създаването на вашия бизнес уебсайт. Той е напълно безплатен, много лесен за използване, но същевременно много мощен. Той се предлага с хиляди приставки и теми, които ще ви позволят да правите каквото искате с вашия уебсайт.

SiteGround всъщност идва с инсталиране на WordPress с едно щракване, което бързо ще инсталира WordPress за вас.

След като приключите с покупката на хостинг, ще видите екран с връзка „Продължете към зоната на клиентите“. Кликнете върху това и ще бъдете отведени на страница, където можете да настроите вашия нов хостинг акаунт. при Настройте своя уебсайт, изберете Стартирайте нов уебсайт.

След това ще видите списък на софтуера, който можете да инсталирате. Изберете WordPress.

инсталирайте wordpress

За да завършите процеса, ще трябва да предоставите администраторски данни за вход (имейл адрес, потребителско име и парола) за вашия уебсайт. Това са подробностите, които ще използвате за достъп до задния сайт на вашия уебсайт, така че не забравяйте да ги запазите.

След като направите това, щракнете Потвърждение > Цялостна настройка. И сега имате жив уебсайт на WordPress на живо.

Стъпка 3: Инсталирайте SSL сертификат.

Преди да направя нещо друго, искам първо да ви покажа как да инсталирате SSL сертификат, за да се отървете от етикета Not Secure, който ви показах преди. при Моите акаунти, кликване Отидете на cPanel.

отидете на cpanel

CPanel е мястото, където можете да инсталирате различен софтуер и инструменти за вашия уебсайт. Ако превъртите докрай надолу, трябва да видите раздел, наречен Сигурност. В този раздел кликнете върху Да шифроваме.

позволява криптиране

Изберете домейна, на който искате да инсталирате SSL сертификата, изберете Да шифроваме SSL, и щракнете Инсталирай.

Сега е време да влезете в новия си уебсайт. Кликнете Моите акаунти отново в горната част и щракнете върху инсталации раздел. Тук ще видите името на домейна, което сте регистрирали. Отвъд него е зелено Отидете на портала за администратори бутон. Кликнете върху този бутон, за да отидете на вашата страница за вход в WordPress.

отидете на таблото за управление на wordpress admin

Страниците за вход в WordPress обикновено следват следните формати: yourdomain.com/wp-admin и yourdomain.com/wp-login. Вашите може да са различни. Но трябва да запомните или да отбележите URL адреса на страницата за вход, така че следващия път да имате достъп до нея, като въведете директно URL адреса в адресната си лента и без да се налага да влизате в Siteground.

Страницата за вход в WordPress изглежда така:

страница за вход в wordpress

Въведете вашето потребителско име и парола тук, за да влезете в уебсайта си за първи път.

След като сте вътре, първото нещо, което трябва да направите, е да кажете на WordPress, че имате SSL сертификат. Това е доста просто да се направи.

От лявата странична лента отидете на Настройки > Общ. На екрана ще видите две полета с името на вашия домейн: Адрес на WordPress (URL) и Адрес на сайта (URL). Трябва да напишете буквата „s“ след „http“ и преди двоеточието „:“ и за двете полета.

добавяне на ssl сертификат в wordpress

След като сте готови, щракнете Запазите промените. Сега вашият уебсайт трябва да има икона на катинар точно до името на домейна:

защитен уебсайт с https

Сега последното нещо, което трябва да направим за SSL сертификата, е да се уверим, че хората, които въведат „http“ в своя адрес, ще бъдат пренасочени към вашия „https“ URL адрес. За това ни трябва плъгин.

За да инсталирате приставка, отидете на Plugins > Добави нов. На лентата за търсене горе вдясно потърсете приставката Наистина проста SSL. Инсталирайте и активирайте.

инсталирайте наистина прост ssl

След това ще видите това изскачащо съобщение на таблото си за управление:

активирайте наистина прост ssl

Щракнете върху синьото Върви напред, активирай SSL! бутон. Ще излезете и след като влезете отново, приставката Really Simple SSL е в пълна сила.

Стъпка 4: Инсталирайте темата Astra и сайтовете Astra.

За бизнес уебсайт искате тема, която има чист код и гъвкави функции, за да направите персонализирането възможно най-лесно и бързо. Има много качествени теми за WordPress, но темата, която ще използваме тук, е темата Astra.

Темата Astra е безплатна тема на WordPress, която има отлична скорост и простота. Това, което най-много ми харесва е, че той се конфигурира въз основа на необходимите инструменти и това улеснява нещата във вашия край. Има и Pro версия, ако искате да получите достъп до премиум функции.

тема на astra

Ето функциите, които най-много обичам при Астра:

  • Една от най-бързите налични теми
  • Над 100 сайтове за начинаещи (повечето са 100% безплатни)
  • Гъвкава функция на Mega Menu
  • Мощен пакет с добавки
  • Обширна поддръжка на WooCommerce

За да инсталирате Astra, отидете на Външен вид > тема > Добави нов. Търсете Astra, щракнете Инсталирай, и Активирате.

инсталиране на astra

Друго страхотно нещо за Astra е фактът, че има плъгин, наречен Сайтове за начинаещи Astra. Този плъгин има библиотека от предварително изградени безплатни и премиум шаблони, които можете да използвате на собствения си уебсайт само с няколко кликвания. Ще използваме шаблон на Astra Site, за да намалим наполовина времето за създаване на уебсайта си.

След като инсталирате Astra, на таблото за управление ще видите това съобщение:

започнете с сайта на astra

Кликнете Първи стъпки. Това ще инсталира Astra Starter Sites за вас. Можете също да инсталирате Astra Sites, като отидете на Plugins > Добави нов. Търся Сайтове в Астра и го инсталирайте и активирайте. За достъп до сайтовете Astra, отидете на Изяви >Сайтове за начинаещи Astra.

Избор на вашия създател на страници

След инсталирането на Astra Sites ще бъдете попитани кой конструктор на страници предпочитате: Gutenberg, Elementor, Beaver Builder или Brizy. В този урок ще използвам Elementor.

Elementor е създател на WordPress страници, който изведе изграждането на страници на ново ниво. Той има дълбок набор от функции, но е много лесен за използване и овладяване. Безплатната версия е достатъчна за изграждането на прилична уеб страница, но ако искате по-разширени функции, като например възможност за добавяне на формуляри за контакт, плъзгачи, таблици за ценообразуване и други, можете да надстроите до Pro версията.

Избор на вашата тема на Astra Site

След като изберете създателя на страницата си, ще бъдете отведени в библиотеката на шаблоните на Astra Sites. Има много елегантни, професионално изглеждащи шаблони – безплатни и първокласни, от които можете да избирате. Шаблоните са организирани от следните категории: Блог, Бизнес, Електронна търговия, Безплатна и Други. Тъй като създавате бизнес уебсайт, най-добре е да разгледате в Бизнес раздел.

Отделете време в избора на кой шаблон, който смятате, че ще бъде най-точно съобразен с вашата марка. Тези шаблони са напълно редактируеми с избрания от вас създател на страници, което означава, че можете лесно да променяте текста, изображенията, оформлението, бутоните и основно всичко на страницата.

За този урок, ще използвам касиер счетоводител шаблон, защото изглежда невероятно и лесно на очите.

За да инсталирате тема, просто трябва да кликнете върху нея, за да бъдете отведени до визуализацията. Ако ви харесва това, което виждате, щракнете върху Тема за импортиране бутон и се уверете, че кутиите са всички.

тема сайтове за кутии astra

Ако забележите, има кутия с надпис „Инсталиране на необходимите приставки“. Ако поставите отметка в това поле, ще инсталирате всички необходими плъгини за темата, за да изглеждат точно както е. За тази тема той инсталира WPForms Lite, плъгин, който ви позволява да създавате прости форми за контакт и Elementor, създателя на страници, който ще използвам. Можете да кликнете върху малкия въпросник до него, за да видите какви плъгини ще бъдат инсталирани.

WPForms е плъгин, който може да ви помогне да получите качествени клиенти за вашия бизнес чрез ефективни форми. Можете да разгледате ревюто ми за WPForms, за да знаете повече за него. ако искате да използвате приставка за различни форми, можете просто да деактивирате / изтриете WPForms в Plugins > Инсталирани приставки и инсталирайте предпочитания си конструктор на формуляри.

инсталиране на тема на сайта на Astra

Импортирането на темата може да отнеме известно време. Не затваряйте браузъра си или не натискайте опресняване. Изчакайте и когато свърши, ще видите синьо Вижте сайта бутон. Щракнете върху този бутон, за да бъдете отведени до вашия уебсайт, който вече има темата, която току-що сте импортирали.

Стъпка 5. Избор на дизайнерски елементи.

Вашият уебсайт сега изглежда зашеметяващо, но ще искате да го направите свой собствен. За целта се нуждаете от собствена цветова схема, типография и лого.

Нека започнем с вашата цветова палитра Ако вече имате цвета на марката си, това ще бъде по-лесно.

Избор на цветова палитра

Уебсайтът обикновено има набор от 2-3 цвята: основен, акцент и поп цвят. Най- основен цвят е доминиращият цвят на вашия уебсайт и най-вероятно цветът на вашата марка. Това е цветът, с който искате хората да запомнят вашата марка.

Когато избирате основния си цвят, трябва да изследвате цветовата психология или как цветовете влияят на възприятието или поведението на хората. Определени цветове карат хората да усещат нещо, напр. червеното ги кара да се чувстват притеснително, така че трябва да вземете предвид тези неща, когато избирате основния си цвят.

Най- цвят на акцента обикновено се използва, за да се откроят определени елементи от останалите като заглавия или публикации на публикации.

И накрая, поп цвят контрастира с останалите цветове, за да се откроят важни елементи на уебсайта, като бутони за призив към действие или формуляри за генериране на олово.

Има два инструмента, които харесвам да използвам при избора на цветова палитра. Първият е Coolors.co, уебсайт, където можете да разглеждате различни цветови палитри, за да получите идеи или вдъхновение. Ако видите нещо, което ви харесва, можете бързо да копирате шестнадесетичния код, за да го използвате в WordPress.

Ако щракнете изследвам в заглавието ще видите тази огромна колекция от палитри:

цветни палитри

Ако видите палитра, която ви харесва, задръжте курсора на мишката върху нея и щракнете върху изглед, и ще бъдете отведени в нов прозорец, където ще видите шестнадесетичните кодове на всеки цвят.

шестнадесетични кодове на цветни палитри

Тези шестнадесетични кодове са това, което трябва да използвате тези цветове на вашия уебсайт. По-късно ще ви покажа как да използвате тези шестнадесетични кода в WordPress бекенда.

Друг готин инструмент е Colorzilla. Това е разширение на Google Chrome, което ви позволява да получите шестнадесетичен код от всеки цвят, който виждате на всеки уебсайт, само като щракнете върху него.

Ако искате да получите разширението Colorzilla, Натисни тук. След това щракнете Добавяне към Chrome.

colorzilla

След това ще видите тази икона на лентата с инструменти:

икона на colorzilla

Така че сега, ако искате да знаете шестнадесетичния код на цвят, който видяхте на уебсайт, просто щракнете върху тази икона, след което щракнете върху цвета, който искате да копирате. След това шестнадесетичният код ще бъде автоматично копиран. Можете да поставите този шестнадесетичен код в определени области в WordPress.

Персонализиране на типография

Освен това искате да използвате собствена типография, която съответства на идентичността на вашата марка и помага на вашия уебсайт да се открои. Уебсайтовете обикновено имат 2-3 шрифта. Точно както с цветовете, ще имате и основен шрифт които са шрифтове за заглавия или меню. Имате нужда и от шрифт на тялото за абзаци от текстове, а също и допълнително “поп шрифт”, За да помогне на някои текстове да се откроят.

Подобно на цветовете, имате нужда от типография, която остава вярна на вашата марка, изглежда приятна за очите и изпраща правилното съобщение за вашата марка.

Един от любимите ми инструменти при избора на типография е Fontpair.co. Това е уебсайт, който ви показва как изглеждат два различни шрифта заедно.

fontpair.co

Ако видите нещо, което харесвате, обърнете внимание на това, което се нарича, за да можете да го търсите в WordPress и да го използвате на уебсайта си.

Харесва ми също да използвам WhatFont, разширение за Google Chrome, което ви казва какъв шрифт се използва на всеки уебсайт, само като задържите курсора на мишката върху него.

За да инсталирате WhatFont, Натисни тук след това щракнете Добавяне към Chrome. След това ще видите тази икона на лентата с инструменти:

whatfont

За да знаете името на шрифт, щракнете върху тази икона и задръжте курсора на мишката върху текста. WhatFont ще ви каже името на този шрифт и ако щракнете върху него, ще видите също размера на шрифта, цвета, семейството, стила, теглото и други.

използвайки whatfont

Получаване на лого

И накрая, вашият бизнес се нуждае от красиво лого, което говори за това какво представлява вашата марка. Можете да отидете с три различни маршрута тук. Можете сами да създадете логото си с помощта на безплатен инструмент, наречен Canva, популярен инструмент за проектиране, който прави проектирането наистина лесно дори за начинаещи.

Ще се изненадате с колко лого шаблони има Canva и всички те изглеждат невероятно. Можете да промените тези шаблони, за да ги направите свои.

Трябва да знаете обаче, че трябва да надстроите до Pro, ако искате да експортирате логото с прозрачен фон. Въпреки това има едномесечна безплатна пробна версия, така че това, което можете да направите, е да надстроите до Pro, да експортирате прозрачното си лого и да анулирате, преди изпитването да приключи.

лого лого

Можете също да наемете дизайнер на лого, за да го направите вместо вас. Можете да опитате уебсайтове като Fiverr.com или 99design, но трябва да внимавате при избора на изпълнител въз основа на техния стил, запис, рецензии, рейтинги и други.

Третият маршрут и вероятно добра идея, ако искате силно лого на марката, е да наемете дизайнер стратег / консултант. Хора като тези са професионалисти, които отделят време, за да разберат за каква е вашата марка, къде се намира бизнесът ви и какви са основните ви ценности, за да могат да го включат в логото.

Стъпка 6. Персонализирайте уебсайта си.

След като имате цветова палитра, шрифтове и лого за вашия уебсайт, сега е време да ги използвате на уебсайта си. Ако сте в задния панел на WordPress, отидете на Външен вид > Персонализиране за да отворите персонализатора на тема.

персонализирайте тема

Можете също да отидете тук, ако сте на фронта на вашия уебсайт. В горната част на екрана трябва да има черна лента, която се вижда само от онези, които са влезли в уебсайта ви. Кликнете Персонализиране за да отворите персонализатора на тема.

персонализирайте фронтен темата

След като влезете в персонализатора на теми, ще можете да добавите логото си, да промените цветове, да промените оформлението на сайта и много други.

тема за персонализиране

В лявата странична лента ще видите различни опции за промяна на вашия уебсайт. Всяка тема има различни опции за персонализиране, така че ако използвате различна тема, това, което виждате тук, може да е малко по-различно от моето. Всички промени, които правите тук, се показват в реално време на вашия уебсайт.

В тази тема, за да промените цветовете на вашия сайт, отидете на Цветове и фон. Ще имате възможност да промените базовите цветове, галетата, заглавката и лентата на долния колонтитул.

цветен фон редактор

Основните цветове са цвят на темата, цвят на връзката, цвят на текста и цвят на курсора на връзката на вашия уебсайт. За да промените основните цветове, щракнете Основни цветове. Вътре ще видите бутони, които казват Изберете Цвят. Кликнете върху тези бутони, за да промените конкретен цвят.

Например, за да промените цвета на темата, щракнете върху Изберете Цвят до него. След това ще видите два начина за избор на цвят. Първо можете да поставите Hex код в кутия. Ако си спомняте за какво говорихме относно шестнадесетичните кодове в предишната стъпка, в полета като тези можете да въведете тези шестнадесетични кодове.

Така че, ако сте намерили цвят в Coolors.co или на други места, можете да поставите Hex кода тук. Можете също да изберете цвят във вграден инструмент за избор на цвят.

основен цветен редактор

На следващо място е да промените вашата типография. Върнете се към персонализатора, като щракнете върху стрелката назад в горната част на страничната лента и щракнете върху книгопечатане. Ще можете да промените базата, галетата, съдържанието и типографията на блога.

книгопечатане

И накрая, за да качите вашето лого, отидете на оформление > удар с глава > Идентичност на сайта. В секцията Лого щракнете върху Промяна на логото бутон и качете вашето лого.

промяна на логото

Astra също ви позволява да използвате различно лого за ретината или устройства с висока разделителна способност, както и за мобилни устройства. Можете също да регулирате ширината на логото. Ако превъртите надолу, ще можете също да промените заглавието на сайта си, да добавите етикет на сайта и икона на сайта или favicon.

Предлагам ви да проучите персонализатора на теми, за да видите различните неща, които можете да направите тук. Темата на Astra ви позволява да правите повече като промяна на оформлението на заглавката и долния си колонтитул, промяна на структурата на публикациите в блога, промяна на широчината на вашия сайт и много други.

След като извършите персонализирането, не забравяйте да щракнете публикувам за да направите промените си на живо на вашия сайт.

Стъпка 7. Персонализиране на уебсайта ви с Elementor.

Сега, когато цветовете, типографията и логото на вашия уебсайт са зададени, е време да скочите в Elementor и напълно да промените как изглежда уебсайтът, за да съответства на вашата марка. Ще променим изображенията, текстовете, бутоните, оформлението и много други.

Има два начина да редактирате страница с Elementor. Първо, ако сте в бекенда, отидете на Страници и трябва да видите списък на всички страници на вашия уебсайт. Това включва страниците, които Astra Site автоматично създава. Страниците, направени с конкретен конструктор на страници (например Elementor), ще бъдат етикетирани като такива:

страници

Задръжте курсора на мишката върху страницата, която искате да редактирате с Elementor и щракнете Редактиране с Elementor.

редактирайте с елемент от архива

Това ще ви отведе в Елементър.

Ако сте на лицевата страна на уебсайта си, можете да въведете Elementor, като отидете на страницата, която искате да редактирате, и кликнете върху Редактиране с Elementor на черната лента в горната част:

редактирайте с фронтенд на елементите

Интерфейсът на Elementor е лесен за разбиране и свикване, защото е доста подобен на персонализатора на теми. По-голямата част от екрана показва страницата, която редактирате, докато вляво е странична лента с контролите и опциите.

elementor

Ако забележите, заглавката не може да се види в Elementor. Причината е, че безплатната версия на Elementor не е в състояние да редактира колонтитулите и колонтитулите. Тази функция е достъпна само за Elementor Pro.

Лявата странична лента е мястото, където можете да намерите елементи които можете да добавите към страницата си. Както можете да видите, можете да добавите заглавие, изображение, видео, бутон, разделител и други. Можете да добавите тези елементи, като ги плъзнете и пуснете в желаната от вас област.

Elementor също позволява редактиране на вграден текст, което означава, че можете да промените текста в самата област на съдържанието. Ето някои от нещата, които можете да правите с текстове в Elementor:

редактиране на текст в елемент

Както можете да видите, можете да редактирате или изтриете текста право в областта на съдържанието, което го прави много по-лесно. На страничната лента ще намерите още опции за персонализиране, като например промяна на размера, цвета, теглото, семейството на типографията и сянката. Можете също да добавите анимации като прости избледнявания, увеличаване, подскачане и други.

Освен това бихте искали да използвате свои собствени изображения, за да направите този уебсайт изцяло свой. Можете лесно да замените или премахнете изображение, ако това е, което искате. За да персонализирате изображение, просто кликнете върху него и опциите ще се появят в лявата странична лента. Можете да качите ново изображение, да промените неговия размер, да добавите рамка или сянка, да добавите анимация и др.

редактиране на изображение в елемент

За моя уебсайт искам да премахна изцяло това изображение и просто да използвам различно фоново изображение. За да изтриете изображение, задръжте курсора на мишката върху него и щракнете с десния бутон върху синя писалка икона в горния десен ъгъл. Ще се появи изскачащо меню. Кликнете Изтрий за да премахнете изображението.

изтриване на изображение в елемент

За да персонализирате заглавието, задръжте курсора на мишката върху него и щракнете върху иконата с пунктир в горната част:

персонализиране на заглавието в елемент

След това опциите за персонализиране на заглавието ще се покажат в лявата странична лента. За да промените фоновото изображение на заглавието си, щракнете стил и отидете на Заден план. Тук можете да качите нов фон.

персонализиране на заглавието

Както можете да видите, след като качих изображението, коригирах наслояването на фона, за да се уверя, че изображението се вижда ясно. Направих това като отидох Фоново наслагване и регулиране на непрозрачността.

Също така коригирах цвета на текста, за да се уверя, че може да се види, и коригирах ширината на текста, така че да не се припокрива с изображението. Направих това като отидох напреднал > Персонализирано позициониране и избор Персонализиран за ширината.

Изграждането на зашеметяваща уеб страница е толкова лесно с Elementor. Налични са толкова много опции, така че е въпрос на проучване на всяко кътче. Можете да го изследвате със собствено темпо и ако има нещо, което не разбирате, можете да се свържете с мен чрез секцията за коментари по-долу или дори да търсите изчерпателния елемент на Elementor знание.

Имам и урок за Elementor, където ви показвам как да започнете бързо с Elementor. Можете да го гледате тук.

Стъпка 8. Защитете уебсайта си.

Също така е важно бизнес уебсайтът да бъде максимално защитен от възможните схеми за хакване и кражба на самоличност. Фактът е, че някои от вас може да са уязвими към кибератаки поради слаби пароли, уязвимости на плъгини и остарял софтуер. Тези неща оставят дупка в уебсайта ви и трябва да намерите начин да блокирате тези дупки.

Най-добрият плъгин за WordPress, който открих досега, който прави това, е iThemes Security. Безплатната версия на този плъгин вече ви предлага силни защитни функции и можете да го активирате само с едно щракване.

За да инсталирате iThemes Security, преминете към Plugins > Добави нов след това търсете iThemes Security.

инсталирайте ithemes

След като се активира, ще видите нова опция в страничната лента, наречена Сигурност. Отидете на Сигурност > Настройки и трябва да видите съобщение за различните функции, които iThemes могат да направят за вас.

сигурни ithemes на сайта

Активирането на всички тези функции отнема само едно щракване на синьото Сигурен сайт бутон. След като щракнете върху този бутон, ще видите това съобщение:

активирайте мрежова защита от груба сила

Мрежовата защита от груба сила е функция, при която на потребителите, които са се опитали да пробият в други сайтове, които са членове на тази мрежа, автоматично е забранено да проникват във вашия. Това е доста добра функция, която има само iThemes, така че за да активирате това, просто въведете своя имейл адрес и щракнете Активирайте мрежовата защита от груба сила.

Само с няколко кликвания вашият уебсайт вече е защитен. Можете да направите много повече с този плъгин и ако искате да научите повече за него, можете да гледате моето ръководство за преглед и настройка на iThemes Security. тук.

Стъпка 9. Архивирайте уебсайта си.

Освен това трябва да направите резервно копие на уебсайта си, за да се спасите от възможното злощастно събитие от загуба на някоя от вашите данни. За това ще използваме Резервно копие на UpdraftPlus.

За да инсталирате този плъгин, отидете на Plugins > Добави нов и търси Резервно копие на UpdraftPlus. Инсталирайте и активирайте.

инсталирайте updraftplus

След като се активира, ще създаде нова опция под Настройки Наречен Резервни копия UpdraftPlus. Кликнете върху него, за да започнете да конфигурирате настройките за архивиране.

updraftplus архивиране в настройките

Щом сте вътре, щракнете Настройки. Тук ще го настроим така, че да се правят редовни автоматични резервни копия извън сайта. За График за архивиране на файлове, Препоръчвам да го настроите на седмично и запазване на такъв резервно копие. Файловете не се променят често, така че това е достатъчно добро.

Колкото до График за архивиране на база данни, тъй като това се променя често, задайте го на ежедневно и запазете 7 резервни копия.

След като зададете графиците, превъртете надолу и натиснете Запазите промените. След това превъртете отново назад, за да изберете къде искате да съхранявате своите резервни копия. Обикновено препоръчвам Dropbox, защото той е много лесен за използване, но можете да използвате всичко и колкото искате.

настройка на резервни копия updraftplus

Щракнете върху предпочитаното от вас отдалечено хранилище и щракнете Запазите промените отново. След това ще видите това съобщение:

удостоверяване на отдалечено съхранение

Трябва да щракнете върху тази връзка, за да упълномощите UpdraftPlus Backups да съхранява архиви в избраното от вас хранилище. В този пример, тъй като избрах Dropbox, щракването върху тази връзка ще ме отведе до страницата за вход в Dropbox. След като вляза, ще видя това съобщение:

пълна настройка updraftsplus архивиране

Просто трябва да щракна Пълна настройка, и ще бъда върнат обратно в UpdraftsPlus бекенд в WordPress с това съобщение за потвърждение в горната част:

удостоверяване пълна updraftplus

Ако исках да направя резервно копие, всичко, което трябва да направя, е да кликнете върху синьото Архивиране сега бутон. UpdraftPlus също ще създаде резервни копия в съответствие с графика, който направих по-рано и ще ги избута в DropBox.

Ако искате да възстановите резервно копие, просто кликнете върху Съществуващи резервни копия и щракнете върху Възстанови.

Стъпка 10. Оптимизирайте уебсайта си.

Ние сме до последната стъпка и в тази стъпка ще видим как да оптимизираме уебсайта си за търсачки като Google. Сигурен съм, че повечето от вас вече са чували за SEO или оптимизация за търсачки. С две думи, практиката е да се гарантира, че уебсайтът ви е оптимизиран правилния начин, за да улесните търсещите машини да намерят вашите страници и да ви показват на страниците с резултати..

SEO има аспект, наречен на страница SEO, и това са практики, които можете да внедрите на вашия уебсайт точно в WordPress, за да комуникирате ясно в търсачките за какво се отнасят вашия уебсайт и съдържание.

Това са някои най-добри SEO практики на страница, които трябва да приложите:

  • Напишете мета заглавие и мета описание за всяка страница и публикация.
  • Добавете ключови думи или ключови фрази и ги използвайте в цялото съдържание.
  • Добавете ALT TXT за всяко изображение на вашата страница / публикация.

Сега, ако не сте запознати какви са тези неща, това е добре. Те са доста лесни за учене. Мета заглавието е заглавието, което се показва в резултатите от Google, а мета описанието е краткото описание под заглавието. Ето пример:

пример за резултат от google search

Ключовата дума е това, което потребителите въвеждат в търсачката, за да търсят нещо. Мета заглавието е заглавието на резултата, а мета описанието е краткото описание по-долу. Това са важни подробности, защото те казват на Google за какво става дума и че е от значение за ключовата фраза „salon New York“.

Това е кратък списък на SEO техники на страница, защото тук има буквално толкова много. Но засега ще се съсредоточим върху тях.

За да направим тези неща, се нуждаем от плъгин. Един от най-добрите на страницата SEO WordPress плъгини е Yoast SEO и ние ще го използваме в този урок. За да инсталирате този плъгин, просто отидете на Plugins > Добави нов и търси Йоаст SEO. Кликнете Инсталирай сега и Активирате.

инсталирате yoast seo

Сега, когато отидете на която и да е страница или публикация, ще видите това ново поле под редакторната област:

кутия yoast seo

Тук можете да добавите своето мета заглавие, мета описание и ключови думи. За да добавите ключова дума, въведете я в полето по-долу Фокусиране на ключова фраза:

добавете ключова дума

За да добавите мета заглавие и описание, щракнете върху Редактиране на фрагмент бутон.

редактиране на фрагмент

Под SEO заглавие е мястото, където трябва да добавите мета заглавието си. Добра практика е тук да включите ключовата си фраза за фокусиране. В полето за мета описание трябва да дадете ясна представа за какво е страницата и също да включите ключовата фраза тук.

Докато въвеждате нещо в полето за заглавие на SEO и мета описание, ще видите оранжева лента за напредък под него. Това означава, че текстът все още е твърде кратък. След като стане зелен, това означава, че дължината на вашия текст е точно правилна. Ако стане червен, той е твърде дълъг и трябва да го съкратите. Дългите заглавия и описания отрязват резултати, така че е по-добре да останете в зелената зона.

Друго нещо, което искате да направите, е да се уверите, че вашата Sitemap е активирана и действително работи. За да направите това, отидете на Йоаст SEO > Общ > Характеристика. Превъртете надолу, докато видите XML Sitemap. Уверете се, че това е активирано, след което щракнете върху синьото икона на въпросителен знак. След това ще видите линк, който казва Вижте XML карта на сайта. Кликнете върху това, за да видите вашата карта на сайта.

разрешаване на Sitemaps

За много от вас това може да ви отведе до страница 404. Но не се притеснявайте Поправката е съвсем проста. Всичко, което трябва да направите, е да отидете на Настройки > Постоянните. Изберете Име на публикацията и удари Запазите промените.

поща име

Сега, когато се опитате отново да получите достъп до XML карта на сайта, ще видите нещо подобно:

xml карта на сайта

Обобщавайки

И това приключва този урок за това как да създадете бизнес уебсайт с WordPress. Бих искал да ви чукам по раменете, защото сте направили толкова много и сте постигнали толкова, като следвате този урок. Ако имате въпроси, просто ги пуснете по-долу в секцията за коментари и ще се радвам да ви помогна.

SiteGround

SiteGround е силно препоръчан уеб хост онлайн, тъй като са се погрижили за потребителите на WordPress и все още имат достъпни цени. Най-известни са с бързото си представяне и еднакво бърза подкрепа.

Основни характеристики на SiteGround:

  • Безплатен SSL сертификат
  • БЪРЗА Поддръжка
  • WordPress Staging Enviroment
  • Безплатна миграция на уебсайтове
  • Ежедневно архивиране

SiteGround е солиден избор за вашите нужди от уеб хостинг. Те се погрижат за уебсайтовете на WordPress и предлагат по-малко ресурси от своите конкуренти, но по-висока надеждност.

Вижте SiteGround

Тема на Астра

Astra е безплатна тема на WordPress, която е фокусирана върху скоростта. По желание можете да закупите Pro версията за $ 59, която добавя някои допълнителни настройки и опции.

Основни характеристики на темата Astra:

  • Не е темата за фастите, но това не е Slouch
  • Много безплатни демо сайтове
  • Функция за гъвкаво мега меню
  • Опции за персонализирани оформления
  • Поддръжка на WooCommerce
  • Поддръжка на LearnDash

Темата Astra е добър избор за всеки проект за уеб дизайн на WordPress. Предполагам, че най-големият въпрос е дали дори е необходимо да закупите тема в наши дни, тъй като създателите на страници правят всички същите неща, за които би трябвало да имате тема. Например, Elementor има безплатната тема Hello, която позволява на вашия създател на страница да върши цялата работа.

Все още има някои добри причини да закупите професионална тема, но за повечето хора те най-вероятно ще се оправят с безплатна тема.

За мен обаче смятам, че темата Astra не е в крак с актуалните тенденции и вече не я препоръчвам.

Налични са много по-добри съвременни теми, които предлагат вградени конструктори на заглавия и долни колонтитули, като се ограничават до 3 оформления, плюс по-гъвкави оформления на страници и публикации.

Вижте темата Astra

Elementor

Elementor е създател на WordPress страници, който е взел WordPress уеб дизайн от буря. Той има най-дълбокия набор от функции, но въпреки това е много лесен за използване и овладяване. Elementor е най-пълнофункционалният създател на безплатни страници. Има и Pro добавка за добавяне на допълнителни функции за разработчици.

Основни характеристики на елемента:

  • Жив редактор на предни страни
  • Функции за персонализиране на уебсайтове
  • Библиотека с шаблони и блокове
  • Обширни възможности за отзивчиви мобилни устройства
  • Най-мощният създател на изскачащи прозорци
  • PRO Създавайте персонализирани заглавки / долни колонтитули
  • PRO Създайте оформления на типа публикация

Elementor е най-силният създател на страници в момента. Те последователно пускат нови функции, които са в съответствие с актуалните тенденции в дизайна. Това означава, че ще можете да поддържате уебсайта си подходящ.

Elementor Pro е невероятна стойност, като се имат предвид всички допълнителни модули и характеристики на захранването, които включва.

Ако днес започвах нов проект за уебсайт, Elementor ще бъде създателят на страницата, който бих избрал. Считам, че трябва да има WordPress създател на страници, което е удоволствие да се използва.

Вижте Elementor

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