TinyMCE joomla-4

Создать красивый функциональный сайт на joomla-4 можно штатными средствами, без установки тяжеловесных билдеров. Используйте Bootstrap-5 для создания Шаблонов HTML в редакторе TinyMCE.

Для начала необходимо понять основную задачу любого билдера - создание красивой страницы без знания программирования. Берешь объект, перетягиваешь его в любую позицию, устанавливаешь в нем нужный элемент, цвет, ширина, размер и т.п. делаются интуитивно понятными визуальными средствами. Это плюс. А минус таких билдеров - огромный вспомогательный код, который тянется вместе с установленными библиотеками скриптов. Оно вам надо?

Второй немаловажный фактор, о котором многие не задумываются - "А сколько таких красивых страниц вы создаете на своем сайте?" Из личного опыта - 2-3 страницы: Главная, О нас, Контакты. Сюда же относятся и лэндинги. Я видел сайты, где 20 страниц сделаны в билдере. Красиво, но цель создания непонятна, и тяжелый конский код, и пользователь очень редко туда заходит.

Запомните навсегда
Основная задача любого сайта - донесение информации до пользователя, регулярное наполнение контента. А контент создается в материалах - текст, картинка, видео. Всё.

Многие элементы, которые вам нужны для создания сайта, уже установлены в ядро joomla-4. Ими нужно научится пользоваться. Итак, приступим.

  1. Позиция на странице - создается в файле index.php
  2. Создание объекта - модуль HTML-код и редактор TinyMCE
    1. В позиции создается div section, container или row.
    2. Если хотите на всю ширину "от края до края" - в пункте меню нужно добавить class, чтобы разметка grid стала широкой. Это делается для красоты и концентрации на объект - залить бэкграунд весь объект. Думаю, вы часто встречали чередования цветных широких полос с контентом. Смотрится красиво.
    3. Это можно сделать переопределением модуля. Переименовать файл в section_fluid.php и добавить туда классы разметки. (пример можно скачать внизу страницы)
  3. Размещение объекта на странице - добавление class объекта в редакторе TinyMCE. Количество в строке, ширина, высота, слева, справа, внизу, вверху и т.д.
  4. Создание самого объекта - карусель, модал окно, аккордеон, выпадающие списки и т.д.

Первое, что надо сделать - настроить редактор TinyMCE

Заходим в Плагины, выбираем Редактор - TinyMCE

  • Наборы TinyMCE, нажимаем Набор 0
  • Каталог шаблонов контента, выбираем cassiopeia/html/tinymce

Теперь в эту папку загружаете свои шаблоны HTML ! Название файла шаблона HTML пишите латинскими буквами, примеры смотрите в моих файлах на этом сайте. Подробная информация в разделе Конструктор в редакторе