Advertisement
  1. Web Design
  2. WordPress
  3. WordPress Themes

Як зробити простий односторінковий сайт за допомогою теми Parallax WordPress

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

Простий односторінковий веб-сайт – чудовий спосіб презентувати свою компанію в Інтернеті. Ви ділитесь важливою інформацією про ваш бізнес і відвідувачі відразу все бачать.

Одна з причин популярності односторінкових сайтів заключається в тому, що вони відмінно використовують ефект паралаксу для візуальної привабливості, при цьому не сповільнюючи роботу сайту. І це ще не всі переваги ефекту.

Навіщо створювати односторінковий сайт (з ефектом Parallax)

Даний тип веб-сайту являється чудовим вибором для будь-якого власника бізнесу, у якого не так багато часу на його обслуговування, або для бізнесу, який тільки починає працювати. Зайняті фрілансери чи дизайн-агенства також можуть отримати вигоду від демонстрації своєї компанії через даний тип сайту.

І на кінець, односторінкові сайти ідеально підходять для розробників додатків, або компаній, які прагнуть пришвидшити запуск продукту. Оскільки сайти з однією сторінкою зазвичай декілька раз спонукають свого відвідувача до дії, вони можуть стати чудовим способом створення списку для email розсилання, перш ніж ви будете готові до офіційного запуску.

Як завжди з WordPress в односторінкових темах з красивими ефектами паралаксу немає жодного недоліку. В великому розмаїтті корпоративних тем та портфоліо можна знайти тему, яка відповідатиме вашій сфері і характеру вашого бізнесу. Тут представлені найпопулярніші теми WP:

Как використовувати односторінкову тему Parallax для створення сайту

В цій статті ми покажемо, як використовувати одну із прекрасних тем WordPress, щоб створити простий односторінковий сайт з ефектом parallax.

Для початку нам знадобиться…

Давайте розглянемо, як зробити односторінковий сайт. Перш ніж створювати сайт, нам потрібно дещо зробити. Окрім теми, яку ви будете використовувати, необхідно придбати доменне ім’я та хостинг. Пошук хорошої підбірки зображень, щоб використовувати ефект parallax, рекомендується в повній мірі. Отже, починаємо:

1. Придбайте доменне ім’я.

Перш за все вам потрібен домен для нового веб-сайту. Це ваш онлайн дім та обличчя вашого бізнесу. Якщо у вас є ім'я вашої компанії, логічно буде використати його в якості імені домену. Але якщо ви фрілансер, займаєтесь бізнесом під своїм іменем, ваше доменне ім'я повинне це відображати.

2. Виберіть якісний план хостингу.

Після вибору імені домена, наступним кроком буде покупка хостинг-плану. Більшість хостинг-компаній запропонують вибір домена одночасно з підпискою на план хостинг. Більшість з них будуть підтримувати доменне ім'я протягом року безкоштовно. План сумісного хостингу -  хороший для початку, ви зможете пізніше обновити свій план, якщо вирішите перейти на багатосторінковий сайт.

3. Візьміть найкращу тему One Page WordPress 

Для WordPress доступні як безкоштовні, так і преміум теми, але часто радять обирати преміум тему. Premium WordPress тема підтримується її розробником, тому вона завжди буде оновлюватися до найкращого рівня.

І якщо знадобиться допомога в налаштуванні преміум теми, її розробник своєчасно відгукнеться. Також можете придбати додаткову підтримку теми в момент покупки.

В цьому уроці я використовую потужну тему The Ark з ThemeForest. Дана односторінкова тема містить декілька варіантів макетів, демоверсій.

The Ark WordPress theme with multiple layout options ready to use quicklyThe Ark WordPress theme with multiple layout options ready to use quicklyThe Ark WordPress theme with multiple layout options ready to use quickly
Тема WordPress The Ark з різноманітними налаштуваннями, готова до роботи.

Головне, вона дуже гнучка, тому ваш сайт буде відмінно відображатись на різних екранах. Також є конструктор сторінок, який створить абсолютно унікальний макет односторінкового сайту з нуля або додасть розділи на ваш сайт на ваш розсуд.

The Ark WordPress themeThe Ark WordPress themeThe Ark WordPress theme
Тема WordPress The Ark дозволяє створювати односторінковий сайт швидко. 

Ви можете переглянути односторінкові теми, щоб знайти ту, яка вам сподобається. Коли знайдете таку, що відповідає вашим потребам, не вагаючись, придбайте та завантажте її файли на ваш комп'ютер .

The Ark one page WordPress theme comes with several demosThe Ark one page WordPress theme comes with several demosThe Ark one page WordPress theme comes with several demos
The Ark, WordPress тема, включає в себе декілька демо.

4. Підберіть наповнення сайту та зображення.

Останнє в нашому списку – контент та зображення. Хоча односторінкові сайти обмежені в плані об'єму контенту, краще підготувати його заздалегідь, а не придумувати на ходу.

Вам знадобиться час і на вибір зображень. Сюди входять фонові зображення для parallax - це можуть бути фото вашого робочого місця, ваших співробітників, компанії і навіть вашого продукту. Не забудьте включити фотографії ваших клієнтів в розділ відгуків та знімки членів команди, якщо ви хочете надати індивідуального підходу до свого бренду. 

Починаємо

Після покупки хостингу разом з доменом і темою, прийшов час розпочати роботу над вашим сайтом. Першим кроком являється установка WordPress, потім – вашої теми, а також будь-яких необхідних плагінів.

1. Установка WordPress

Ваша хостинг-компанія відправила вам привітальний лист зі всією необхідною інформацією щодо вашого плану. Відкрийте лист і запишіть ім'я користувача та пароль для вашої cPanel. Клікніть на посиланні, яке одразу приведе вас на сторінку входу cPanel. Введіть ім’я користувача і пароль, і ви будете готові встановити WordPress.

  1. В cPanel знайдіть інсталяторів веб-сайту, або інсталяторів Fantastico чи Softaculous. Натисніть на значок WordPress і на кнопку Install. Вам буде запропоновано вказати ім'я користувача та пароль, а також вибрати домен для установки WordPress.
  2. Виберіть ім’я користувача та надійний пароль, який містить виликі та маленькі літери, а також цифри та спеціальний символ. Запишіть ім'я користувача і пароль в безпечному місці.
  3. Натисніть кнопку Install ще раз, щоб завершити процес установки.

Коли WordPress завершить установку, ви побачите екран повідомлень з посиланням на вашу панель інструментів WordPress. Натисніть на посиланні і введіть ім'я користувача та пароль, які ви обрали в процесі установки.

2. Установка вашої теми WordPress  

Тепер, когда ви ввійшли в свій веб-сайт WordPress, виберіте Appearance > Themes > Add new. На екрані, що завантажився, виберіть Upload Theme.

Installing your WordPress themeInstalling your WordPress themeInstalling your WordPress theme
Встановіть вашу тему WordPress швидко.

Натисніть кнопку, щоб вибрати папку-архів теми, а потім натисніть Upload. Після установки теми натисніть Activate.

3. Встановіть та активуйте необхідні плагіни.

Після активації теми WordPress ви отримаєте повідомлення про необхідність установки додаткових плагінів. Щоб встановити їх, натисніть Begin Installing Plugins, виберіть всі плагіни і натисніть Install в спадаючому меню.

WordPress Plugins to InstallWordPress Plugins to InstallWordPress Plugins to Install
Плагіни WordPress для установки.

Після цього, перейдіть в Plugins > Installed Plugins і виберіть плагіни, які ви щойно встановили, та виберіть Activate.

Activate your WordPress PluginsActivate your WordPress PluginsActivate your WordPress Plugins
Активація плагінів WordPress.

Як налаштувати односторінковий сайт WordPress

Коли ваша тема WordPress активована, встановлені додаткові плагіни, прийшов час налаштувати тему відповідно до вашого бренду та додати свій контент. Один із самих простих способів налаштувати односторінковий сайт – почати з готового макету.

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

Як тільки обрана демо-версія установлена, ви можете почати налаштування теми та заміну інформації.

Спочатку натисніть Settings > Reading > Front Page Displays a Static Page та виберіть один з макетів сторінки в якості головної. Потім виберіть потрібний макет сторінки для постів на натисніть Save Settings.

Щоб замінити контент, перейдіть в Pages > All Pages, виберіть домашню сторінку та натисніть Edit.

Щоб налаштувати зображення в заголовку, клікніть на іконці Edit для того розділу, який ви хочете відредагувати, а потім виберіть Box Model. Прокрутіть сторінку до розділу Image, або Parallax і замініть зображення на своє. Не забудьте використовувати зображення, які не відволікають від тексту про вашу компанію.

Add your companys messagingAdd your companys messagingAdd your companys messaging
Як додати повідомлень в WordPress.

Робіть заголовки та основний текст короткими та по темі, текст не повинен бути таким, який важко прочитати. Ви можете налаштувати кольори, поля і відступи в даній області, а також налаштувати шрифти.

Щоб відредагувати контент, клікніть розділ, який містить текст, і вставте свою копію в Visual Editor. Повторіть цей процес для кожного розділу, який потребує редагування. Коли ви правите розділи, перейдіть на вкладку element.style і введіть ID маленькими буквами в поле ID. Це допоможе вам швидко налаштувати меню  навігації.

Adding ID attributes to your WordPress themeAdding ID attributes to your WordPress themeAdding ID attributes to your WordPress theme
Вставка атрибутів ID в тему WordPress.
Крім того, ви можете додатково налаштувати макет, або створити його з нуля, перейшовши в Ark> Sitemap.

Підменю Ark має опції для налаштування шапки, футера, sidebars та ін.

Після того, як ви замінили контент на свій власний, давайте налаштуємо меню навігації. Перейдіть в розділ Appearance > Menus та виберіть One Page Navigation в спадаючому меню. Встановіть галочку поруч з Main Navigation в розділі Display Location та клікніть Save.

Adding a menu to your one page WordPress theme setupAdding a menu to your one page WordPress theme setupAdding a menu to your one page WordPress theme setup
Додаємо меню на вашу тему WordPress.

Натисніть Custom URL і введіть ID усіх розділів, які ви назвали в процесі правки контенту в полі URL. Натисніть Update Menu і ваша навігація налаштована.

Останній крок – налаштування теми WordPress відповідно до вашого брендінгу. На панелі інструментів натисніть Ark > Theme Options. На цій сторінці ви можете змінити заголовки сайту, налаштувати кольори, додати свої шрифти, або шрифти Google.

Work with the WordPress theme Options panelWork with the WordPress theme Options panelWork with the WordPress theme Options panel
Робота на панелі Options теми WordPress.

Майте на увазі, що кольори повинні доповнювати один одного, але основний колір має виділятися. Це допоможе розмістити кнопки, які закликають до потрібної нам дії, в центрі уваги.

Як додати розділи на односторінковий сайт

Якщо вам потрібно додати декілька розділів на сайт, ви можете це легко зробити, перейшовши на свою сторінку, прокрутивши її вниз, та натиснувши іконку додати розділ, рядок чи будь-який інший елемент.

Add sections to your one page website in your WordPress themeAdd sections to your one page website in your WordPress themeAdd sections to your one page website in your WordPress theme
Швидке додавання розділів на сайт в темі WordPress.

Ви можете створити абсолютно новий макет, натиснувши Pages > Add New > Use Fresh Builder, та додавши розділи в вигляді елементів так, як ви бажаєте їх бачити. Можна створити новий макет, перейшовши в Ark > Sitemap > Default Page і натиснувши на значок «+» внизу. Дайте вашому шаблону ім'я, натисніть Save, а потім додайте вам потрібні розділи і елементи.

Adding a new page layout to your WordPress theme setupAdding a new page layout to your WordPress theme setupAdding a new page layout to your WordPress theme setup
Додавання нового макету сторінки теми WordPress.

Тепер ваш односторінковий сайт налаштований. Коли ви дізналися, як зробити односторінковий сайт за допомогою теми WordPress, настав час направити на нього трафік.

Що робити після того, як ваш сайт ожив (просувайте його)

Той факт, що у вас з’явився сайт не означає, що люди дізнаються про ваш бізнес. Першим кроком є оновлення профілів в соцмережах та додання посилання на ваш сайт в розділі профіля.

Ще один простий спосіб просування вашого сайту – включити посилання на нього в візитних карточках та інших додаткових засобах, які напевне у вас є: фірмові бланкиброшурилистівки. Включіть  ваш веб-сайт в email signature, оскільки електронна пошта і сьогодні широко використовується.

Проте краще за все – додати блог та опублікувати контент на регулярній основі. Це не тільки дасть вам можливість представити ваш власний контент для обміну в соцмережах, але і допоможе привабити трафік на ваш сайт, де люди зможуть більше дізнатися про вашу діяльність.

Почніть роботу швидко з чудовою односторінковою темою WordPress

Бізнес-сайт не завжди повинен включати безліч сторінок для передачі інформації про ваші товари чи послуги. Інколи, однієї сторінки більш, ніж достатньо, щоб зацікавити вашу цільову аудиторію та спонукати зв'язатися з вами. Скористайтесь можливістю представити свою інформацію на одній сторінці з однією з наших преміум тем WordPress, щоб створити відмінний веб-сайт для вашого бізнесу.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.