Как на Tilda: создаем лендинг на WordPress

создание сайта на wordpress
Как создать лен­динг на WordPress сво­и­ми сила­ми. Изоб­ра­же­ние с сай­та unsplash.com

Лен­динг на Wordpress, да еще и сво­и­ми рука­ми – это совсем неслож­но. В этой ста­тье я рас­ска­жу о пре­иму­ще­ствах и воз­мож­но­стях WordPress как откры­той систе­мы. Раз­бе­рем по шагам, как сде­лать лен­динг на WordPress с мини­маль­ны­ми зна­ни­я­ми HTML и CSS. Нако­нец, в фина­ле будет живой при­мер создан­но­го одно­стра­нич­но­го сай­та, что­бы посмот­реть его и при­ме­рить для сво­е­го про­ек­та.

Зачем WordPress, если есть онлайн-конструкторы?

Создать свой сайт сего­дня неслож­но. Есть мно­го сер­ви­сов, кото­рые пред­ла­га­ют услу­ги онлайн-кон­струк­то­ров сай­тов. Сре­ди них как рус­ско­языч­ные (Wix, Tilda, uKit), так и англо­языч­ные сай­ты (Squarespace, Weebly). Раз­ни­ца меж­ду ними, что назы­ва­ет­ся, на вкус и цвет. Отли­чия в тари­фах, интер­фей­се, воз­мож­но­стях тон­кой настрой­ки и про­чих дета­лях. При этом с помо­щью каж­до­го вы смо­же­те создать сайт онлайн, в визу­аль­ном режи­ме, когда вам вид­на раз­мет­ка буду­ще­го сай­та и его стра­ниц. Там нет (или совсем мини­мум) тре­бо­ва­ний по зна­нию html-кода и дру­гих для мно­гих непо­нят­ных и по сути ненуж­ных слов.

Когда нуж­но создать неболь­шой сайт из одной стра­ни­цы для пред­сто­я­щей акции, веби­на­ра или дру­го­го собы­тия, то все долж­но быть про­сто и понят­но. В этом смыс­ле онлайн-кон­струк­то­ры выру­ча­ют – вам не нуж­но думать про домен, хостинг, пла­ги­ны, SEO, мобиль­ную адап­та­цию. Все это уже есть и гото­во. Нуж­но про­сто заре­ги­стри­ро­вать­ся и дви­гать бло­ки, поэтап­но созда­вая струк­ту­ру стра­ни­цы.

А вот зачем

Если сайт (пусть и одно­стра­нич­ный) нужен нена­дол­го – под акцию или веби­нар, то воз­мож­но­стей онлайн-кон­струк­то­ров с боль­шой веро­ят­но­стью хва­тит. Но как толь­ко тре­бо­ва­ния к сай­ту воз­рас­та­ют – нужен на про­дол­жи­тель­ное вре­мя или посто­ян­но (как основ­ной ресурс для НКО), ста­но­вит­ся нужен допол­ни­тель­ный функ­ци­о­нал, кото­ро­го нет в выбран­ном тари­фе онлайн-сер­ви­са, то здесь и выле­за­ют вро­де неболь­шие, но с каж­дым разом все более замет­ные неудоб­ства. Кото­рые, к сло­ву, впо­след­ствии решать ста­но­вит­ся все труд­нее и труд­нее.

Я срав­ню воз­мож­но­сти WordPress и Tilda как одной из самых попу­ляр­ных плат­форм сре­ди НКО. Выде­лю несколь­ко неудобств, с кото­ры­ми НКО могут столк­нуть­ся в сво­ей рабо­те.

  • Пона­до­би­лось под­клю­чить на сай­те при­ем пожерт­во­ва­ний. А наи­бо­лее удоб­ный и попу­ляр­ный пла­гин для этих целей «Онлайн-Лей­ка» рабо­та­ет как пла­гин для WordPress. И уста­но­вить его напря­мую в сайт, создан­ный на Tilda, не полу­чит­ся. Един­ствен­ный вари­ант, к кото­ро­му при­хо­дят в таких слу­ча­ях, – это созда­ние WordPress сай­та на под­до­мене и уста­нов­ка туда «Лей­ки». И вот изна­чаль­но вро­де про­стая схе­ма уже начи­на­ет услож­нять­ся.
  • Сна­ча­ла орга­ни­за­ции хва­та­ло воз­мож­но­стей бес­плат­но­го тари­фа. Затем пона­до­би­лось под­клю­чить кон­такт­ную фор­му и фор­му запи­си на веби­нар. А такие фор­мы под­клю­ча­ют­ся уже на плат­ном тари­фе, кото­рый сто­ит 6000 руб. в год (при опла­те за год). Для неболь­шой орга­ни­за­ции это весь­ма замет­ная сум­ма в бюд­же­те.
  • Нако­нец, недав­ний слу­чай по бло­ки­ров­ке сай­та rostovcase.ru, когда неко­то­рое вре­мя сайт был недо­сту­пен. Конеч­но, сама по себе ситу­а­ция, когда сайт не рабо­та­ет, нисколь­ко не ред­кость. Мно­гие хостин­ги вре­мя от вре­ме­ни испы­ты­ва­ют на себе раз­лич­но­го рода DDOS-ата­ки, быва­ют тех­ни­че­ские непо­лад­ки или даже захва­ты дата-цен­тра. Но от подоб­ных слу­ча­ев мож­но хоть как-то под­стра­хо­вать­ся, имея у себя на ком­пью­те­ре резерв­ную копию сай­та. Тогда хоть есть воз­мож­ность под­нять сайт на дру­гом хостин­ге и сохра­нить всю инфор­ма­цию. В слу­чае же с Tilda экс­порт исход­но­го кода сай­та мож­но сде­лать толь­ко на тари­фе Business сто­и­мо­стью 12000 руб. в год (при опла­те за год). На бес­плат­ном тари­фе забрать себе код сай­та не полу­чит­ся.

Вот и полу­ча­ет­ся, что для сай­тов НКО выгод­нее и с тех­ни­че­ской, и с финан­со­вой сто­ро­ны созда­вать сай­ты на откры­тых плат­фор­мах. И WordPress здесь вне кон­ку­рен­ции.

Преимущества WordPress как открытой системы управления контентом

  • Соб­ствен­ный домен вто­ро­го уров­ня (mysite.ru).
  • Пол­ный кон­троль над сай­том (воз­мож­ность в любой момент вно­сить изме­не­ния в код сай­та, делать резерв­ные копии, пере­но­сить сайт на дру­гой хостинг).
  • Доступ к огром­но­му ката­ло­гу пла­ги­нов, рас­ши­ря­ю­щих функ­ци­о­нал сай­та (55’000 пла­ги­нов – это вам не шут­ки).
  • Эко­но­мия в день­гах. Здесь чуть подроб­нее и на при­ме­ре хостин­га Timeweb. Реги­стра­ция доме­на в зоне .ru сто­ит 179 р. (на один год), сам хостинг (для раз­ме­ще­ния одно­го сай­та) сто­ит 1’548 р. (при опла­те за год). Ито­го полу­ча­ем 1’727 р. в год. Срав­ни­те с 6’000 р. у Tilda.

Недостатки WordPress

Для мно­гих глав­ным недо­стат­ком было, есть и будет, что «все это слож­но», «разо­брать­ся может толь­ко про­грам­мист» и «да луч­ше я на кон­струк­то­ре сде­лаю». Но, зна­е­те, сего­дня уста­но­вить WordPress на хостин­ге – это дело бук­валь­но пары минут.

“- Тоже мне, бином Ньютона!”. Скриншот из фильма “Мастер и Маргарита”
«Тоже мне, бином Нью­то­на!» Скрин­шот из филь­ма «Мастер и Мар­га­ри­та».

Регистрация домена и хостинга

Выбрать домен, опла­тить его и под­клю­чить к вновь создан­но­му сай­ту неслож­но. В любом слу­чае, если у вас на этом момен­те воз­ни­ка­ют вопро­сы – создай­те зада­чу на it-волон­те­ре, и все будет реше­но. Сего­дня на мно­гих хостин­гах уста­нов­ка WordPress – дело пары кли­ков: выбор CMS и ука­за­ние, в какую пап­ку сай­та эту систе­му уста­но­вить. И вот мы подо­шли к глав­ной части повест­во­ва­ния – сей­час будем настра­и­вать сайт и тво­рить.

Выбор темы оформления

Итак, наша зада­ча – создать одно­стра­нич­ный сайт со вполне типич­ны­ми бло­ка­ми: заглав­ное изоб­ра­же­ние, опи­са­ние про­дук­та, его пре­иму­ществ. Доба­вим видео с YouTube и неболь­шую фото­га­ле­рею. По мак­си­му­му будем исполь­зо­вать уже суще­ству­ю­щий функ­ци­о­нал WordPress и мини­мум под­клю­че­ний сто­рон­них пла­ги­нов (тему возь­мем тоже бес­плат­ную).

С темы и нач­нем. Ката­лог WordPress пред­ла­га­ет на выбор огром­ное коли­че­ство тем, почти 4000. Сре­ди них плат­ные и бес­плат­ные, новые и ста­рые, кра­си­вые и так себе. Выбор есть, глав­ное – сде­лать его пра­виль­но.

Темы оформления сайтов. Скриншот каталога тем WordPress
Темы оформ­ле­ния сай­тов. Скрин­шот ката­ло­га тем WordPress.

Нам нуж­на тема бес­плат­ная, но с воз­мож­но­стью (потом, если потре­бу­ет­ся) доку­пить пол­ный функ­ци­о­нал. Тема долж­на быть совре­мен­ная, рус­ско­языч­ная, регу­ляр­но обнов­ля­е­мая и под­дер­жи­ва­е­мая раз­ра­бот­чи­ка­ми. Таких в ката­ло­ге мно­го, но пред­ла­гаю сде­лать наш лен­динг на теме Astra. Это одна из самых попу­ляр­ных тем в ката­ло­ге, и она под­хо­дит под все наши тре­бо­ва­ния.

Страница темы “Астра”. Скриншот сайта каталога тем WordPress
Стра­ни­ца темы Astra. Скрин­шот сай­та ката­ло­га тем WordPress.

Установка и настройка темы

Захо­дим в кон­соль сай­та (она же панель управ­ле­ния, она же панель адми­ни­стри­ро­ва­ния, она же админ­ка), затем раз­дел Внеш­ний вид – Темы – Доба­вить новую. В поис­ке пишем Astra, уста­нав­ли­ва­ем и акти­ви­ру­ем тему. Сра­зу после это­го нас ждет хоро­шая новость – Astra пред­ла­га­ет уста­но­вить пла­гин, с помо­щью кото­ро­го мож­но импор­ти­ро­вать уже гото­вые шаб­ло­ны сай­тов. Это нам еще более упро­ща­ет зада­чу, ведь там есть из чего выбрать!

Как установить готовые шаблоны для темы Astra. Скриншот страницы тем в консоли WordPress
Как уста­но­вить гото­вые шаб­ло­ны для темы Astra. Скрин­шот стра­ни­цы тем в кон­со­ли WordPress.

На стра­ни­це гото­вых шаб­ло­нов обра­ти­те вни­ма­ние, что искать нуж­но шаб­ло­ны для редак­то­ра Gutenberg. Это совре­мен­ный редак­тор стра­ниц для WordPress, кото­рый сей­час пред­уста­нав­ли­ва­ет­ся сра­зу после уста­нов­ки сай­та.

Страница выбор стартовых шаблонов для темы Astra. Скриншот сайта Astra
Стра­ни­ца – выбор стар­то­вых шаб­ло­нов для темы Astra. Скрин­шот сай­та Astra.

Вари­ан­ты стар­то­вых тем посмот­ре­ли, воз­вра­ща­ем­ся на наш сайт в раз­дел темы, где висит уве­дом­ле­ние от Astra про этот пла­гин гото­вых шаб­ло­нов. Нажи­ма­ем «Начать», пла­гин сам уста­но­вит­ся и акти­ви­ру­ет­ся. Даль­ше в окне Select Page Builder выби­ра­ем Gutenberg, и перед нами во всей кра­се откры­ва­ет­ся окно с 20 гото­вы­ми шаб­ло­на­ми для ваше­го сай­та. Два­дцать! Гото­вых! Шаб­ло­нов! Все уже сде­ла­но, настро­е­но, оста­лось толь­ко заме­нить кон­тент на ваш и все.

Примеры готовых шаблонов для редактора Gutenberg. Скриншот страницы консоли WordPress
При­ме­ры гото­вых шаб­ло­нов для редак­то­ра Gutenberg. Скрин­шот стра­ни­цы кон­со­ли WordPress.

Клик­нув на выбран­ный шаб­лон, откро­е­те новую стра­ни­цу, где мож­но посмот­реть дета­ли этой темы – как выгля­дят глав­ная и внут­рен­ние стра­ни­цы. Там же мож­но выбрать стра­ни­цы, кото­рые нуж­но импор­ти­ро­вать на ваш сайт. Мож­но взять себе толь­ко одну стра­ни­цу (нас инте­ре­су­ет глав­ная, в первую оче­редь), а мож­но забрать себе весь шаб­лон, вклю­чая внут­рен­ние стра­ни­цы.

Берем за обра­зец шаб­лон Outdoor Adventure. Кли­ка­ем на него и нажи­ма­ем Import Complete Site. Посколь­ку в этих шаб­ло­нах есть свя­зан­ные меж­ду собой моду­ли, кото­рые рас­ки­да­ны по несколь­ким стра­ни­цам, то луч­ше импор­ти­ро­вать их все. Потом уда­лим ненуж­ные. На скрин­шо­те ниже вни­ма­тель­нее – неко­то­рые темы име­ют свои внут­рен­ние настрой­ки импор­та. Мож­но импор­ти­ро­вать демо-кон­тент (это хоро­шо, будет вид­но, как выгля­дит сайт и где мож­но заме­нить фото/тексты). Так­же может пона­до­бить­ся уста­нов­ка пла­ги­нов. Здесь про­сто нажи­ма­ем Import, все будет сде­ла­но авто­ма­ти­че­ски.

Выбор элементов для импорта шаблона. Скриншот консоли WordPress
Выбор эле­мен­тов для импор­та шаб­ло­на. Скрин­шот кон­со­ли WordPress.

После успеш­но­го импор­та немно­го настро­им сайт. Идем в раз­дел Настрой­ки – Чте­ние. Ввер­ху в стро­ке «На глав­ной стра­ни­це отоб­ра­жать» выби­ра­ем ста­ти­че­скую стра­ни­цу и для глав­ной стра­ни­цы зада­ем Home. Здесь пока все, вни­зу нажи­ма­ем «Сохра­нить изме­не­ния». Теперь, открыв сайт, мы уви­дим имен­но ту глав­ную стра­ни­цу шаб­ло­на, кото­рая была в пред­про­смот­ре несколь­ки­ми шага­ми ранее.

Главная страница сайта после импорта шаблона
Глав­ная стра­ни­ца сай­та после импор­та шаб­ло­на.

Настра­и­ва­ем даль­ше. Сей­час при­ве­дем в поря­док глав­ное меню и убе­рем отту­да все лиш­нее. Для это­го в кон­со­ли идем во Внеш­ний вид – Меню и в «Струк­ту­ре меню» уда­ля­ем все пунк­ты. После это­го сохра­ня­ем меню. И при­шло вре­мя для изме­не­ния кон­тен­та глав­ной стра­ни­цы. Она нахо­дит­ся в кон­со­ли в раз­де­ле «Стра­ни­цы». Там кли­ка­ем на «Home – Глав­ная стра­ни­ца». И во всей кра­се откры­ва­ет­ся мощь редак­то­ра Gutenberg. Кли­ка­е­те на любой текст, меня­е­те на свой. То же самое с кар­тин­ка­ми и дру­ги­ми эле­мен­та­ми. Обра­ща­ем вни­ма­ние на пра­вую колон­ку на стра­ни­це – там мно­го допол­ни­тель­ных настро­ек для бло­ков – цве­та, раз­ме­ры, пози­ции. Если нужен блок, кото­ро­го нет в выбран­ном шаб­лоне, добав­ля­ем его через стан­дарт­ную функ­цию редак­то­ра – сле­ва ввер­ху зна­чок «плюс» (доба­вить блок). После всех изме­не­ний обя­за­тель­но нажать «Обно­вить» (спра­ва ввер­ху). И заметь­те, под мобиль­ные устрой­ства сайт адап­ти­ру­ет­ся авто­ма­ти­че­ски. Это дико удоб­но.

Так­же мно­го настро­ек есть во Внеш­ний вид – Опции Astra. Там про лого­тип, шриф­ты, цве­та, настрой­ки шап­ки, футе­ра. Все это мож­но поме­нять и настро­ить под ваши тре­бо­ва­ния. Это был пер­вый спо­соб, когда мы пра­ви­ли гото­вый шаб­лон, меняя его под свои тек­сты и фото.

Вто­рой спо­соб – это созда­ние сво­е­го соб­ствен­но­го маке­та глав­ной стра­ни­цы. Без при­ме­не­ния гото­во­го шаб­ло­на от Astra и исполь­зуя толь­ко воз­мож­но­сти редак­то­ра Gutenberg. Для это­го все так же уста­нав­ли­ва­ем тему Astra, но про­пус­ка­ем пункт про уста­нов­ку пла­ги­на гото­вых шаб­ло­нов. Даль­ше все сво­дит­ся к рабо­те с бло­ка­ми Gutenberg. Ника­ких зна­ний HTML и CSS не нуж­но, все дела­ет­ся в визу­аль­ном редак­то­ре, где сра­зу вид­но, как будет рас­по­ла­гать­ся кон­тент.

Скриншот лендинга на WordPress
Скрин­шот лен­дин­га на WordPress.

Создан­ную стра­ни­цу мож­но посмот­реть и вжи­вую, по ссыл­ке.

Пере­фра­зи­руя веду­ще­го одной (не самой новой) пере­да­чи на MTV – «Мы про­ка­ча­ли ваш сайт». Все живы-здо­ро­вы, ни один про­грам­мист не постра­дал. Хва­ла совре­мен­ным тех­но­ло­ги­ям, ведь несколь­ко лет назад такая рабо­та заня­ла бы куда боль­ше вре­ме­ни и отня­ла бы куда боль­ше сил, вре­ме­ни и нер­вов.

Если после про­чте­ния оста­лись вопро­сы – с удо­воль­стви­ем отве­чу в ком­мен­та­ри­ях. Пиши­те, дели­тесь сво­им опы­том. Тема очень боль­шая, мно­го нюан­сов, но все реаль­но, это глав­ное.

Еще по теме