Eng
Укр

Joomla

Featured

Видео урок по Joomla 4 (часть 7). Бесплатное создание сайта с нуля

Алексей Хорошевский 06.02.2022

Информация почти полностью актуальна для Joomla 5 (примечание добавлено 21.10.2023).

В предыдущей статье «Видео урок по Joomla 4 (часть 6). Блог с комментариями» мы добавили на сайт блог с комментариями и кнопками шеринга в социальные сети. А также рассмотрели вопрос вставки видео в материалы Джумла 4 с YouTube.

Видео урок

Установка и настройка Akeeba Backup Core – 00:00:49.
Перенос Joomla 4 на Хостинг Украина – 00:03:03.
Перенос Джумла 4 на хостинг Reg.ru – 00:12:22.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Ссылки и расширения из видео урока

Цикл видео уроков по самостоятельному созданию сайта с нуля на Joomla 4.
Предыдущая статья.
Скачать Akeeba Backup Core.
Хостинг Украина.
«Домен и поддомен. Что это такое, зачем нужен, как выбрать и зарегистрировать».
Reg.ru.
Перенос Joomla 3 на хостинг Хостингер (Hostinger). Смотрите с 00:09:31.
Перенос Joomla 3 на хостинг Макхост (Mchost). Смотрите с 00:01:37.
Перенос Joomla 3 на хостинг Редо (Redo.ua). Смотрите с 00:14:01.
Перенос Joomla 3 на хостинг HTS.ru (ООО «Хостинговые Телесистемы»). Смотрите с 00:09:18.

Пример тестового домена Reg.ru: «u1589792.isp.regruhosting.ru» Вместо «u1589792» укажите свой вариант.

В этой статье рассмотрим перенос сайта с локального сервера Open Server Panel на реальный хостинг. Для примера возьму Хостинг Украина и Reg.ru. Чтобы упростить процесс переноса буду использовать бесплатный компонент Akeeba Backup Core (рисунок ниже).

В статье «Відеоурок 7. Як створити свій власний сайт на Joomla 4» Вы найдёте аналогичную информацию на украинском языке и для более новых версий Joomla.

Установка Joomla 4 на хостинг

В уроке участвует последняя доступная мне, на момент написания статьи (04.02.2022), русскоязычная версия Joomla 4.0.6 и Akeeba Backup Core 9.0.11.

В следующей статье «Видео урок по Joomla 4 (часть 8). Базовая защита и ускорение сайта» мы поговорим о повышении защищённости сайта от взлома и его ускорении.

Похожие материалы

Автор статьи – Хорошевский Алексей

Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе…

Контакты:

Социальные сети:

Публикации и работа:

Скачать файл	Описание
zip Akeeba Backup Core 9.0.11	Резервное копирование сайта
zip Русификатор для Akeeba Backup	Проверен в Joomla 4.0.6. Перевод не мой

Комментариев - 3

Подписаться Отписаться

Загрузка комментария... Комментарий будет обновлён через 00:00.

Этот комментарий не опубликован.
Гость · 14:33 08.02.2022
Алексей, добрый день.
Спасибо Вам за видео о настройке сайта на шаблоне Joomla 4.
Очень грамотно и профессионально вы рассказываете. Таким как я учень полезно когда капитала нет и приходиться экономить на всем. В этом есть выгода когда вникаешь в разработку сайта проще его продвигать и рекламировать.
Хотел спросить, не могу нигде найти как настроить меню.
У меня 5 категорий, для того чтобы они влезли необходимо сделать текст меньше. Но выглядит это не очень удобно для пользователей. Поиск перенесу выше. Но все равно места маловато.
Как можно перенести слова в названии?

Допустим
Написано Аудит отдела продаж
Сделать Аудит
отдела продаж
Предполагаю, что не я один этим вопросам задаюсь. Может подготовите видео.
ПРИМЕР МЕНЮ ПОЛНОСТЬЮ

image.png

Спасибо
С уважением,
Владимир.
- Ответить
- Этот комментарий не опубликован.
  Алексей Хорошевский · 16:38 08.02.2022
  
  Здравствуйте, Владимир. Рад, что информация Вам пригодилась.
  Как можно перенести слова в названии?
  В стандартном меню такой возможности нет. Попробуйте добавить этот CSS код: .sp-menu-item {width: 50px;} .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: 20px;} .sp-dropdown-items .sp-menu-item {width: 100%;} Первая стока устанавливает ширину всех пунктов меню, верхнего уровня, равной 50 пикселей. Вторая - уменьшает высоту строки пункта меню. А третья делает так, что бы все вложенные меню были шириной 100%. Возможно Вам понадобиться изменить значение "50px" первой строки в зависимости от своих пунктов меню. Обратите внимание, что это может сработать только в рамках шаблона из моих видео уроков.
  
  Ответить
- Этот комментарий не опубликован.
  Алексей Хорошевский · 16:39 08.02.2022
  
  Правда не уверен, что это нормально будет на мобильном смотреться. ;-
  
  Ответить
Этот комментарий не опубликован.
Гость · 18:58 09.02.2022
Алексей, добрый день.
Решил пока в CSS по меню не лезть.
Поменял шрифт, увеличил размер до 16 думаю пока достаточно.

Еще один вопрос?
Контакты и иконки соц сетей, совсем маленькие, через код посмотрел вроде 10 размер. Расположен в top.
На мобильном более менее, на компьютере маловат размер.
Можно ли как то больше сделать иконки и контакты?

Спасибо за помощь!

С уважением,
Владимир.
- Ответить
- Этот комментарий не опубликован.
  Алексей Хорошевский · 19:25 09.02.2022
  
  Здравствуйте. Добавьте этот стиль:
  #sp-top-bar {font-size: 1.1rem;}
  Размер шрифта можете указать в пикселях.
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 21:02 09.02.2022
  
  Алексей, переживаю что бы, что-то сделать не так.
  Открываю шаблон - Css.
  Далее темплейт или другую папку?
  
  Код вставить в начало, в середину, в конец?
  
  Код не показывает. В joomla3 в этом плане легче было строку посмотреть.
  
  Спасибо.
  
  С уважением,
  Владимир
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 07:51 10.02.2022
  
  В корневой папке сайта перейдите в "templates/shaper_helixultimate/css" и создайте там файл "custom.css". Обратите внимание, что нужно создать именно "custom.css", а не "custom.css.txt" или "custom.txt". Если не знаете как изменить расширение файла, то зайдя в папку "templates/shaper_helixultimate/css" скопируйте файл "template.css", переименуйте его в "custom.css", зайдите в переименованный файл и удалите всё его содержимое. Что бы увидеть расширение файлов включите опцию Расширения имен файлов в верхней панели проводника Windows на вкладке Вид (рисунок ниже). В этот файл добавляйте все нужные Вам стили. Рекомендую подписывать их. Например, вот так: /*Изменение размера шрифта верхней панели*/ #sp-top-bar {font-size: 1.1rem;}
  
  ">
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 11:27 10.02.2022
  
  Немного другой способ нашел.
  В стилях шаблона - шрифт - нижняя вкладка, туда код Ваш вставил. Все гуд!
  Ранее смотрел про тройку, тоже мучился со шрифтом в меню, нашел два варианта через CSS, очень удобно, код смотришь на сайте, видно строки и потом в папке CSS меняешь. Второй вариант тот что выше описал.
  
  Будем ждать новые видео, про безопасность про SEO.
  
  Спасибо Вам. Век живи, век учись!
  
  С уважением,
  Владимир.
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 11:32 10.02.2022
  
  Рад, что Ваша проблема решена.
  В стилях шаблона - шрифт - нижняя вкладка, туда код Ваш вставил.
  Для небольшого количества стилей, например, до 10 строк, это приемлемый вариант. Более 10 строк - не очень удачная идея.
  
  Ответить
- Этот комментарий не опубликован.
  Гость · 13:23 10.02.2022
  
  Только с Вами все решили, проблема возникла.
  На главной странице на компьютере изображение есть, на мобильном, картинки нет.
  Вчера еще все было хорошо.
  Не подскажите что могло произойти?
  
  С уважением,
  Владимир.
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 14:05 10.02.2022
  
  Опишите ситуацию подробнее. При помощи какого расширения сделана та часть страницы, в которой вставлена проблемная картинка? В какой позиции или в какой части сайта она расположена?
  Прикрепите скриншоты (в комментариях это можно сделать - самый правый инструмент). Или пришлите ссылку на страницу сайта, где наблюдается проблема.
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 07:07 12.02.2022
  
  Алексей, добрый день!
  Все тоже решилось.
  Перед тем как начал размещать материал по категориям, в медиа менеджере убрал старое изображение.
  Там была связка. На компьютере пока не перезагрузил наверное с кэша показывала. А на мобильном изображения нет.
  В общем разместил назад изображение, связал. Теперь все показывает.
  Спасибо что помогаете.
  С уважением,
  Владимир.
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 08:03 12.02.2022
  
  Здравствуйте, Владимир. Рад, что Ваша проблема решена.
  
  Ответить
Этот комментарий не опубликован.
Гость · 07:21 12.02.2022
Алексей, подскажите как можно вопрос решить с подкатегориями.
Разместил весь материал, картинки, метатеги.
Но при открытии основной категории, после материала, начинается перечень подкатегорий.
Размер шрифта подкатегорий больше, чем размер шрифта материала (материал установил шрифт 18).

Подкатегории - Размер шрифта 1.3.
Посмотрел код страницы
bootstrap.minss6
font-size cale (1.3rem+.6vw)
Когда в коде поставил 1, размер стал приемлемый.
Но в коде изменения не сохраняются.

Зашел в шаблон - css - bootstrap.minss строка 6 (90% кода) - нашел две font-size cale (1.3rem+.6vw) - изменил в этих двух местах на 1 - сохранил.
На сайте не чего, не поменялось, отковываю показать код, размер показывает 1.3 в папке css размер 1.
Что сделал не так, не пойму. Может не там менял.

Как вы говорили можно в шрифтах в нижнем поле прописать до 10 исправлений. Но не знаю как правильно прописать.

В общем опять в ступоре со шрифтами!
Буду признателен за подсказку.

С уважением,
Владимир
- Ответить
- Этот комментарий не опубликован.
  Алексей Хорошевский · 08:05 12.02.2022
  
  Вносите изменения вот так.
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 09:55 12.02.2022
  
  Алексей, так это вариант с контактами в шапке, а у меня в каждой категории, откалываем главную категорию, идет текст с описанием, потом подкатегория и список тем.
  Всего основных категорий 5.
  
  А в CSS почему не происходят изменения?
  Может проще строку вставить
  как пример
  #sp-top-bar {font-size: 1.1rem;}
  только про подкатегорию
  #?????????
  
  С уважением,
  Владимир
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 10:59 12.02.2022
  
  Сложно угадывать. Дайте, пожалуйста, ссылку на станицу сайта. Надо глянуть код.
  Или так попробуйте:
  #sp-top-bar {font-size: 1.1rem !important;}
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 07:58 13.02.2022
  
  Алексей, добрый день!
  Сайт еще не транслируется в сети. Так как его еще создаем.
  top-bar это шапка страницы
  У меня в меню указаны категории, в этих категориях есть подкатегории, вот я и хочу изменить шрифт.
  Когда я на главной странице нажимаю в меню на основную категорию, открывается страница с описанием этой категории, в нижней части список подкатегорий.
  Код писал в предыдущих письмах. Вот он.
  Подкатегории - Размер шрифта 1.3.
  Посмотрел код страницы
  bootstrap.minss6
  font-size cale (1.3rem+.6vw)
  Когда в коде поставил 1, размер стал приемлемый.
  Но в коде изменения не сохраняются.
  
  При изменении кода в папке CSS, нужных результатов не дает.
  В папке CSS в строке размер 1, на сайте, просматривая код размер 1.3.
  Предполагаю не там корректирую.
  
  Я думаю что подкатегории они у всех одинаковые.
  
  Спасибо
  С уважением, Владимир.
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 08:10 13.02.2022
  
  Здравствуйте. Попробуйте так: .sp-megamenu-parent .sp-dropdown li.sp-menu-item a { font-size: 20px !important; } Это увеличивает размер шрифта подпунктов меню. Показал их на рисунке ниже. Если я не угадал, что именно нужно увеличить, прикрепите снимок экрана к комме натрию. О том, как сделать снимок экрана Вы можете узнать тут.
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 10:20 13.02.2022
  
  Извините Алексей нужно меньше сделать текст Подкатегорий
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 10:30 13.02.2022
  
  Попробуйте так:
  .page-header.item-title {
  font-size: 16px;
  }
  
  Ответить
  
  Этот комментарий не опубликован.
  Гость · 12:43 13.02.2022
  
  Алексей, спасибо.
  Вы волшебник!
  Все получилось.
  
  С уважением,
  Владимир.
  
  Ответить
  
  Этот комментарий не опубликован.
  Алексей Хорошевский · 13:57 13.02.2022
  
  Не за что. Рад ,что Ваша проблема решена.
  
  Ответить

или оставить комментарий как гость