---
title: Відеоурок 2. Самостійна розробка сайтів на Joomla 4
description: Безкоштовний відеоурок з самостійного створення сайту на Joomla 4: встановлення шаблону Helix та розширень, створення шапки, підвалу та меню сайту на Джумла
canonical_url: https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4
language: uk-UA
date: 2025-07-13T13:27:23Z
notice: This is a machine-friendly version of the page at https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4.
markdown-tokens: 2708
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
# Відеоурок 2. Самостійна розробка сайтів на Joomla 4
- [Відеоурок](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#videourok "Відеоурок").
- [Посилання та розширення з відеоуроку](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#posilannya-ta-rozshirennya-z-videouroku "Посилання та розширення з відеоуроку").
- [Компоненти, модулі та плагіни](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#komponenti-moduli-ta-plagini "Компоненти, модулі та плагіни").
- [Де шукати розширення Joomla](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#de-shukati-rozshirennya-joomla "Де шукати розширення Joomla")?
- [Шаблон та його позиції, сітка Bootstrap](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#shablon-ta-yjogo-pozicii-sitka-bootstrap "Шаблон та його позиції, сітка Bootstrap").
- [Меню Joomla та пункти меню](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtiv-na-dzhumla-4#menyu-joomla-ta-punkti-menyu "Меню Joomla та пункти меню").
**Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).**
## Відеоурок
- Запуск XAMPP з теки – 00:00:58.
- Як зайти в адмінку сайту – 00:01:37.
- Збільшення тривалості сесії – 00:02:00.
- Встановлення мови для Джумла 4 з файлу – 00:03:31.
- Встановлення шаблону в Joomla 4 – 00:04:35.
- Встановлення розширень в Joomla 4 – 00:06:20.
- Налаштування шаблону та створення шапки сайту – 00:07:14. Детальніше про налаштування шаблону можна дізнатись у окремих [відеоуроках](https://aleksius.com/uk/helix-ultimate "Helix Ultimate").
- Створення меню в Джумла 4 – 00:18:12.
- Створення підвалу сайту (робота з модулями) – 00:19:44.
- Перегляд позицій будь-якого шаблону – 00:23:11.
- Робота з SP Easy Image Gallery – 00:24:07.
- Помилка генерації мініатюр на XAMPP – 00:25:52.
Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти [на моєму YouTube каналі](https://www.youtube.com/@aleksius-com-uk "Відеоуроки Joomla 4. Самостійне створення сайту").
## Посилання та розширення з відеоуроку
- [Попередній відеоурок](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtu-na-joomla-4 "Відеоурок 1. Самостійне створення сайту на Joomla 4").
- Вхід в адмінку Joomla – «http://localhost/**joomla**/administrator/». У вас замість «joomla» буде назва саме вашої теки з сайтом.
- [Мови для Joomla](https://downloads.joomla.org/ "Joomla! Downloads").
- [Шаблон Helix Ultimate](https://www.joomshaper.com/joomla-templates/helixultimate "Helix Ultimate").
- [Конструктор сторінок SP Page Builder 4 Lite](https://www.joomshaper.com/downloads/extension "SP Page Builder").
- [Компонент галереї SP Easy Image Gallery](https://www.joomshaper.com/joomla-extensions/sp-easyimagegallery "SP Easy Image Gallery").
- Перегляд позицій модулів – «?tp=1».
- Пошук функції PHP у «php.ini» – «extension=gd».
**Файли, доступні для завантаження, під статтею над коментарями.**
У попередньому відеоуроці «[Відеоурок 1. Самостійне створення сайту на Joomla 4](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtu-na-joomla-4 "Відеоурок 1. Самостійне створення сайту на Joomla 4")» ми встановили та налаштували локальний сервер XAMPP, установили в нього Joomla 4, додали до неї українську мову та частково налаштували. У цьому відеоуроці розглянемо, як можна встановлювати розширення, попрацюємо з налаштуваннями шаблону та займемося шапкою та підвалом сайту.
**Примітки щодо відеоуроків.** Наприкінці кожної статті з відеоуроком можуть бути надані посилання на додаткові матеріали та посилання на завантаження різних розширень, які використовувалися у відео (якщо такі були).
В уроці бере участь остання доступна мені, на момент написання статті (01.01.2023), версія Joomla 4.2.6 українською мовою, шаблон та фреймворк Helix Ultimate 2.0.11, локальний сервер XAMPP Windows x64 8.1.12 0 VS16. Тестовий комп’ютер працює на Windows 11 Pro 22H2 х64 (22621.963, Windows Feature Experience Pack 1000.22638.1000.0).
## Компоненти, модулі та плагіни
Функціональність Joomla доповнюється та змінюється, в основному, за рахунок встановлення розширень, які поділяються на:
- Компоненти.
- Плагіни.
- Модулі.
Ще є такі розширення:
- Шаблони.
- Плагіни для компонентів.
- Файли локалізацій (мов).
Під «розширеннями» маю на увазі всі вищезгадані пункти.
Є розширення, результати роботи яких видно лише в адмінці, лише на сайті, або там і там. Здебільшого всі розширення налаштовуються в адмінці Джумла. Але завдяки розмежуванню прав доступу з деякими компонентами можна працювати з фронтальної частини сайту. Причому без прав супер адміністратора.
Усі розширення, крім плагінів для компонентів, установлюються однаково через адмінку в менеджері розширень Joomla (*Система – Розширення* (в області *Встановлення*)). Плагіни для компонентів, зазвичай, встановлюються через відповідні компоненти.
У Joomla є свої власні (вбудовані) розширення. Але можна встановлювати додаткові.
**Компоненти для Joomla.** Доступні для налаштування адміністратора в меню *Компоненти*. Вони, як правило, становлять основну функціональність сайту. Наприклад, компонент SP Page Builder (рисунок нижче) служить для створення сторінок. З ним попрацюємо у [наступних уроках](https://aleksius.com/uk/cms-joomla/stvorennya-ta-administruvannya-sayjtu "Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4").
Щоб відобразити сторінки компонента у фронтальній частині сайту, потрібно створити відповідні їм пункти меню в менеджері меню (про це далі).
Досить часто компоненти встановлюються разом із плагінами, модулями і навіть шаблонами.
 Створення сайтів **Плагіни Joomla.** Доступні для налаштування в адмінці, у меню *Система – Плагіни* (рисунок нижче). Вони можуть розширювати функціональність компонентів або виступати як окремі одиниці. Наприклад, Akeeba Backup дозволяє спростити резервне копіювання сайту, а плагін AllVideos служить для вставки відео з YouTube в матеріалах Joomla (всередині статей) (цей плагін розширює можливості компонента).
Результати дій одних плагінів може бути не видно на сайті, якщо не дивитися у вихідний код. Наприклад, плагіни можуть оптимізувати швидкість завантаження сайту. А результат дій інших плагінів відображається у вигляді галерей, відео, посилань/таблиць на завантаження файлів тощо. Роботу таких плагінів ми наочно розглянемо у наших уроках зі створення сайтів на Joomla 4.
 Розробка сайтів **Модулі Joomla.** Доступні для налаштування в адмінці меню *Система – Модулі сайту* або *Зміст – Модулі сайту* (рисунок нижче). Вони служать для відображення інформації на сайті (як в адмінці, так і у фронтальній частині). Вони можуть відображати галереї, текст, меню, картинки, відео тощо. Модулі можуть виводити інформацію з компонентів або окремими одиницями. Наприклад, RSContact дозволяє відображати форму контактів (це «самостійний» модуль), Tag Transform – модуль, який відображає у фронтальній частині сайту теги стандартного компонента тегів Joomla (цей модуль розширює можливості штатного компонента «Мітки») (com\_tags)).
Модулі відображаються в адмінці та передній частині сайту в позиціях шаблону (про це нижче).
 Як створити власний сайт **Плагіни для компонентів.** Встановлюються через панелі керування компонентів або через менеджер розширень Joomla. Служать для розширення можливостей компонентів. Наприклад, Dependent Custom Fields For All – це плагін для компоненту інтернет-магазину VirtueMart, який дозволяє створювати залежні поля. Як правило, такі плагіни працюють лише за наявності компонента, для яких вони призначені.
**Файли локалізацій (мов).** Переклади інтерфейсів розширень різними мовами (для адмінки та сайту). Встановлюються через менеджера розширень Joomla (або просто копіюються до папок сайту).
## Де шукати розширення Joomla
Існує спеціальний сайт – [Joomla! Extensions Directory](https://extensions.joomla.org/ "Extensions.joomla.org") (JED). Це офіційний каталог розширень Joomla. Там є платні та безкоштовні розширення. На 31.12.2022 у каталозі нараховується 5922 розширення. Є пошук та зручний фільтр. Сайт англійською мовою.
Рекомендую шукати там. Також можна шукати за допомогою пошукових систем. У будь-якому випадку краще завантажувати розширення виключно з офіційних сайтів розробників. Нічого краденого, завантаженого з форумів та різних «лівих» сайтів використовувати не слід.
Щодо пошуку шаблонів, особисто я віддаю перевагу таким розробникам:
- [Unitemplates.com](https://www.unitemplates.com/joomla-templates "Templates").
- [Joomshaper.com](https://www.joomshaper.com/joomla-templates "Joomla Templates").
- [RSJoomla!](https://www.rsjoomla.com/joomla-templates/joomla-4.html "Joomla! Templates").
- [Dj-extensions.com](https://dj-extensions.com/products/joomla-4-x-templates "Joomla 4 Templates / Yootheme").
- [Yootheme.com](https://yootheme.com/joomla-templates "Premium Joomla Templates").
## Шаблон та його позиції, сітка Bootstrap
Шаблон Joomla – це розширення Joomla, яке дозволяє задавати зовнішній вигляд та взаємне розташування різним елементам сайту. Це можна назвати одним словом «дизайн». Сам термін «шаблон» застосовується через те, що в Joomla англійською мовою подібні розширення називають «template» – у перекладі з англійської це якраз і є «шаблон».
У позиціях шаблону відображаються модулі. Шаблони існують для адмінки та фронтальної частини сайту. З шаблоном, його налаштуванням та розміщенням модулів у позиціях шаблону можна ознайомитись у [відеоуроці вище](#videourok "Відеоурок 2. Самостійна розробка сайтів на Joomla 4"). Там ми розглядаємо, як можна створити сайт фірми, і розташувати в позиціях модулі у підвалі сайту. В одній позиції може відображатись кілька модулів.
На даний момент дуже багато шаблонів базуються на фреймворку Bootstrap. Більшість сучасних шаблонів мають редактор макетів, де можна змінювати сітку та позиції шаблонів (рисунок нижче).
 Як створити веб-сайт Позиції шаблонів мають назви. Вказуючи ці назви в налаштуваннях модулів, можна відображати ті чи інші модулі у різних позиціях шаблону.
У готових професійних шаблонів є багато переваг. Але ніхто не заважає вам створювати власні.
У розділі *Система* в області *Шаблони* є посилання на *Шаблони сайтів* *та Стилі шаблону сайту*. Слід урахувати, що наведені нижче визначення шаблону та стилю можуть бути неточними, неповними та не охоплювати всі випадки.
**Шаблон Joomla** – це набір PHP, CSS, JS, PNG, SVG та інших файлів, що містять вихідний код дизайну сайту. Склад та кількість файлів залежить від кожного конкретного шаблону. Серед файлів шаблону може бути файл із налаштуваннями стилю Joomla. На сайті може бути один або декілька шаблонів. Один шаблон може мати один або кілька стилів. Як правило, із шаблоном працюють для зміни вихідного коду або його перевизначення.
**Стиль Joomla** – це набір налаштувань шаблонів Joomla. Налаштування можуть зберігатися у базі даних сайту або серед файлів шаблону. Якщо розробники шаблону передбачають якісь налаштування, вони знаходяться саме в стилях. Стилі можна прив'язати до пунктів меню. У різних пунктах меню можуть бути різні стилі. При цьому можна задавати декільком пунктам меню стилі від різних шаблонів, а можна – від одного. Як правило, з шаблоном працюють для зміни його налаштувань. Для цього не потрібні навичка верстки або програмування, на відміну від випадків зміни вихідного коду шаблону.
## Меню Joomla та пункти меню
Меню Джумла (малюнок нижче) - дуже важливий елемент.
1. Меню може відображатися на сайті та служити як навігація.
2. За допомогою меню виводяться компоненти сайту у його фронтальну частину.
3. Меню бере участь у формуванні URL-адрес сторінок.
4. На основі меню можна керувати відображенням модулів на тій чи іншій сторінці.
Можна створювати меню або пункти меню, але не відображати їх у фронтальній частині сайту. Таке може знадобитися для формування URL-адрес окремих сторінок, на які не повинні вести посилання з основного меню сайту. Наприклад, сторінка з результатами пошуку на сайті.
Пункти меню служать для виведення сторінок компонентів у фронтальній частині сайту. Існує набір пунктів меню, доступних у Joomla за замовчуванням, наприклад, для відображення статей або переліку статей категорії. Список доступних пунктів меню може поповнюватися під час встановлення компонентів. У пунктах меню може бути безліч налаштувань, які впливають на відображення сторінки, яку вони формують.
 Меню Joomla 4 У наступній статті «[Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4](https://aleksius.com/uk/cms-joomla/stvorennya-ta-administruvannya-sayjtu "Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4")» ми створимо головну сторінку сайту у безкоштовному конструкторі контенту SP Page Builder 4 Lite.
| Автор статті – Хорошевський Олексій |
|---|
| [](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") Кандидат технічних наук, викладач [Харківського національного університету радіоелектроніки](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Надає [послуги](https://aleksius.biz/uk "Створення сайтів на Joomla і WebSite X5") зі створення, доопрацювання, супроводу та просування сайтів. [Докладніше про автора…](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") **Контакти:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Зателефонувати через Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Зателефонувати через Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Зателефонувати через WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написати лист") **Соціальні мережі:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/?locale=uk_UA "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/@aleksius-com-uk "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публікації та робота:** - [Google Академія](https://scholar.google.com.ua/citations?hl=uk&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |
| Схожі матеріали |
|---|
| - [ Відеоурок 1. Самостійне створення сайту на Joomla 4 ](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtu-na-joomla-4) - [ Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4 ](https://aleksius.com/uk/cms-joomla/stvorennya-ta-administruvannya-sayjtu) - [ Відеоурок 4. Самостійна розробка сайту візитки на Joomla 4 ](https://aleksius.com/uk/cms-joomla/yak-stvoriti-sviyj-sayjt) - [ Відеоурок 5. Самостійне створення сайту компанії на Joomla 4 ](https://aleksius.com/uk/cms-joomla/stvorennya-sayjtu-kompanii) - [ Відеоурок 6. Створення свого сайту на Joomla 4 ](https://aleksius.com/uk/cms-joomla/rozrobka-vlasnogo-sayjtu) - [ Відеоурок 7. Як створити свій власний сайт на Joomla 4 ](https://aleksius.com/uk/cms-joomla/yak-stvorihtih-sviyj-veb-sayjt) - [ Відеоурок «Самостійне та швидке створення лендінгу на Joomla» ](https://aleksius.com/uk/cms-joomla/rozshyrennia/shvydke-stvorennia-lendinhu) |