---
title: Обзор TemplateToaster 5 Professional. Визуальный редактор шаблонов
description: Редактор шаблонов сайтов TemplateToaster Professional с поддержкой Bootstrap. Экспорт для Joomla, WordPress, Prestashop, Blogger и других CMS
canonical_url: https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla
language: ru-RU
date: 2022-08-28T17:38:25Z
notice: This is a machine-friendly version of the page at https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla.
markdown-tokens: 3702
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla. 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.
# Обзор TemplateToaster 5 Professional. Визуальный редактор шаблонов
- Тип – редактор шаблонов сайтов на Joomla, WordPress и других CMS.
- [Купить TemplateToaster Professional](https://secure.avangate.com/order/checkout.php?PRODS=4576922&QTY=1&AFFILIATE=38667 "Купить TemplateToaster Professional").
- [Купить TemplateToaster Standard](https://secure.avangate.com/order/checkout.php?PRODS=4576923&QTY=1&AFFILIATE=38667 "Купить TemplateToaster Standard").
- [Меню](https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla#menyu "Меню").
- [Боковая панель](https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla#bokovaya-panel "Боковая панель").
- [Модули](https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla#moduli "Модули").
- [Вертикальное меню](https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla#vertikalnoe-menyu "Вертикальное меню").
- [Контент](https://aleksius.com/sozdanie-sajtov/templatetoaster/redaktor-shablonov-joomla#kontent "Контент").
В предыдущей статье «[Обзор TemplateToaster 5. Генератор CSS шаблонов](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov "Обзор TemplateToaster 5. Генератор CSS шаблонов")» мы продолжили обзор инструментов TemplateToaster и рассмотрели новшества, которые появились в 5-й версии программы по сравнению с 4-й.
Как Вы уже могли понять, для настройки различных элементов шаблона сайта используются аналогичные инструменты и их опции. Например, эффекты, настройки заднего фона и т. д. Повторно рассматривать их для каждой вкладки заново нет смысла. Поэтому на элементы, рассмотренные в предыдущих статьях, буду приводить ссылку один раз, а в дальнейшем по тексту буду просто пропускать такие инструменты.
## Меню
Для настройки внешнего вида меню редактор шаблонов предоставляет целый ряд инструментов на одноимённой вкладке (рисунок ниже).
 Меню TemplateToaster 5 **Область *PresetGroup,* инструмент *Пресеты***. Данный инструмент (рисунок ниже) содержит готовые стили оформления меню.
 TemplateToaster Professional **Инструмент** ***Позиция*** ***меню***. Данный инструмент позволяет разместить меню под, над или внутри верхнего колонтитула (хэдэра). Также есть возможность вовсе его отключить.
Все инструменты в областях [Задний фон](https://aleksius.com/sozdanie-sajtov/templatetoaster/templatetoaster-professional#telo-sajta "Обзор TemplateToaster 4.2. Генератор шаблонов")*, [Макет](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov#stranitsa "Обзор TemplateToaster 5. Генератор CSS шаблонов"), [Эффекты](https://aleksius.com/sozdanie-sajtov/templatetoaster/templatetoaster-professional#telo-sajta "Обзор TemplateToaster 4.2. Генератор шаблонов"), [Логотип](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov#kheder "Обзор TemplateToaster 5. Генератор CSS шаблонов"), [Изображение на переднем плане](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov#slideshow "Обзор TemplateToaster 5. Генератор CSS шаблонов"), [Текстовые области](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov#slideshow "Обзор TemplateToaster 5. Генератор CSS шаблонов")* были рассмотрены ранее.
**Область *Кнопка меню,* инструмент *Свойства кнопки меню***. При помощи инструментов и параметров, которые предоставляет Вам визуальный редактор шаблонов в данном разделе Вы можете настроить внешний вид кнопок меню. Доступно множество настроек (рисунок ниже):
- *Разделитель*. Настройка внешнего вида линии между кнопками меню. Можно менять стиль, толщину и цвет линии.
- *Высота*. Высота кнопок меню в процентах от высоты области меню заданной в инструменте *Высота* область *Макет*.
- *Отступ*. Внешний отступ справа и слева между кнопками меню.
- *Отступ*. Внутренний отступ справа и слева от края кнопки до текста (названия) пункта меню.
- *Выравнивание*. Можно задать горизонтальное (по левому, правому краю, по центру или ширине) и вертикальное (вверху, по центру, внизу) выравнивание кнопок меню.
- *Иконки*. Визуальный редактор шаблонов позволяет Вам добавить иконки (изображения), которые будут отображаться рядом с названием пункта меню внутри кнопки. Можно выбрать одно из предлагаемых изображений или загрузить своё. Плюс, Вы можете показать цвета иконки: *Нормальный* (цвет иконки, когда пользователь не навёл курсор мыши на кнопки и когда пользователь не находится на странице сайта, закреплённой за текущим пунктом меню)*, Наведённый* (цвет иконки, когда пользователь навёл курсор мыши на кнопки)*, Активный* (цвет иконки, когда находится на странице сайта, закреплённой за текущим пунктом меню).
 Редактор шаблонов - *Стрелка*. Оформление внешнего вида стрелки, которая будет отображаться на кнопке меню тогда, когда у данного пункта меню есть подменю (рисунок ниже). Можно задать толщину и цвет нормального, наведённого и активного состояния.
- *Текстура*. Можно наложить текстуру и задать тень для кнопки. Это всё настраивается для нормального, наведённого и активного состояния.
 Визуальный редактор шаблонов **Область *Кнопка меню,* инструмент *Задний фон***. В редакторе шаблонов Joomla Вы можете задать сплошной цвет, градиент или изображение для заднего фона кнопки меню. Это настраивается для нормального, наведённого и активного состояния.
**Область *Кнопка меню,* инструмент *Граница***. Можно указать стиль, толщину, радиус скругления и цвет границы кнопки меню (все эти опции были рассмотрены ранее в статьях). Это настраивается для нормального, наведённого и активного состояния.
**Область *Кнопка меню,* инструмент *Типография***. Настройка шрифта заголовка пункта меню для нормального, наведённого и активного состояния. Опции рассмотрены ранее в статье «[Обзор TemplateToaster 5. Генератор CSS шаблонов](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov#kheder "Обзор TemplateToaster 5. Генератор CSS шаблонов")».
**Область *Подменю***. Настройка «макета» и «реакции» подменю.
- *Click*. Открытие подменю по нажатию на кнопку пункта меню.
- *Hover*. Открытие подменю при наведении курсора мыши на кнопку пункта меню.
Переключаясь между инструментами *Мега*, *Вертикальный* и *Горизонтальный* Вы меняете «макет» подменю. На рисунках ниже приведены примеры подменю в зависимости от выбранного инструмента (согласно порядку, в перечне выше).
 Редактор шаблонов Joomla  Редактор шаблонов сайтов  Горизонтальный В зависимости от выбранного инструмента (*Мега*, *Вертикальный* и *Горизонтальный*) будут доступны другие. Например, если выбрать *Мега*, то можно настроить *Область подменю, Пункт меню* и *Заголовок подменю*. Если выбрать *Вертикальный* или *Горизонтальный*, то только *Область подменю* и *Пункт меню*.
**Область *Подменю,* инструмент *Область подменю***. Можно настроить задний фон (цвет, градиент или изображение), границу (стиль, толщину, радиус скругления или цвет) и тень.
**Область *Подменю,* инструменты *Пункт подменю* и *Заголовки подменю***. Опции этих инструментов одинаковые (рисунок ниже). Редактор шаблонов сайтов позволяет Вам настроить такие параметры (все они были рассмотрены выше в статье или ранее в других статьях):
- *Высота.*
- *Ширина.*
- *Задний фон.* Нормальное и наведённое состояние.
- *Граница.*
- *Граница при наведении курсора.*
- *Тень.*
- *Тень при наведении.*
- *Разделитель.*
- *Отступ.* Внешний.
- *Отступ.* Внутренний.
- *Иконка.* Нормальное и наведённое состояние.
- *Типография.* Лучше «типографика» - настройка шрифтов. Нормальное и наведённое состояние.
 Пункт подменю ## Боковая панель
На вкладке *Боковая панель* (рисунок ниже) расположены инструменты для настройки боковых колонок шаблона.
 Боковая панель **Инструмент *Макет.*** Позволяет указать, сколько боковых панелей должно быть, и где они должны располагаться (рисунок ниже).
- *Нет.* Без боковых панелей.
- *Слева боковая панель.* Одна боковая панель слева от области (колонки) содержимого.
- *Справа боковая панель*. Одна боковая панель справа от области содержимого.
- *Слева Слева боковая панель.* Две боковые панели слева от области содержимого.
- *Слева справа боковая панель*. Одна боковая панель слева от области содержимого, одна - справа.
- *Справа Справа боковая панель.* Две боковые панели справа от области содержимого.
 Макет Все инструменты в областях *Задний фон, Макет, Эффекты,* были рассмотрены ранее в статьях.
**Область *Высота.*** Позволяет задать, какой должна быть высота боковых панелей. Или 100% от высоты основной области страницы (контентной) – опция *Высота 100%* или боковая колонка должна подстраиваться под высоту содержимого, которое в ней размещается. Опция *Эквивалентно содержимому*.
## Модули
На данной вкладке (рисунок ниже) Вы найдёте инструменты, при помощи которых можно настроить внешний вид модулей. Редактор шаблонов TemplateToaster 5 Professional предоставляет Вам для этого ряд инструментов. Обратите внимание, что вкладка *Модули* появляется только тогда, когда Вы активируете использование одной или двух боковых панелей на вкладке *Боковая панель*, инструмент *Макет*.
 Модули Причём, инструменты разделены на области, соответствующие областям модулей (рисунок ниже).
- *Контейнер*. Зелёная рамка на рисунке ниже.
- *Хэдэр*. Голубая рамка на рисунке ниже.
- *Контент*. Красная рамка на рисунке ниже.
 Область модуля **Область *Контейнер,* инструмент *Свойства контейнера***. Вы сможете настроить внешний, внутренний отступы, границы (стиль, толщина, радиус скругления, цвет) и тень. Все эти опции уже рассматривались ранее, также, как и инструмент *Задний фон*.
**Область *Хэдэр.*** Все инструменты данной области, включая *Свойства верхнего колонтитула* (иконки, внешний и внутренний отступы, тип заголовка), уже рассмотрены в предыдущих статьях.
**Область *Контент.*** Инструмент *Задний фон* уже рассматривался. Инструмент *Свойства контента* (рисунок ниже) помимо рассмотренных ранее настроек позволяет сконфигурировать новые элементы.
- *Активная ссылка, Наведённая ссылка, Посещённая ссылка.* Вы можете задать оформление текста, по аналогии с другими текстовыми объектами (стиль, размер, цвет и так далее), рассмотренными ранее, для трёх различных состояний гиперссылок.
- *Текст*. Для этого элемента добавлена опция *Отступ*, которая позволяет настроить абзацный отступ (не путать с междустрочным интервалом).
- *Заголовки*. Визуальный редактор шаблонов позволяет задать стиль, размер шрифта (кегль), семейство (гарнитуру), цвет, отступ, эффекты, выравнивание, оформление (подчёркнутый, зачёркнутый). Причём, это можно сделать для заголовка каждого уровня (H1-H6) отдельно.
- *Нумерованный список*. Настройка оформления нумерованного списка. Помимо уже знакомых настроек шрифта можно выбрать стиль. Например: *1, 2, 3; a, b, c* и так далее.
- *Неупорядоченный список.* Настройка оформления маркированного списка. Только настройки шрифта.
 Свойства контента **Инструмент *Быстрые стили***. Содержит набор предварительно установленных вариантов оформления модулей (рисунок ниже).
 Быстрые стили ## Вертикальное меню
Для настройки вертикального меню, меню, как правило, располагаемого в боковой панели Вам будут доступны опции аналогичные опциям из вкладок *Меню* и *Модули*.
 Вертикальное меню Хочу только привести варианты оформления меню (рисунок ниже), в зависимости от выбранного «типа» расширяемого горизонтально подменю: *Мега, Вертикальный, Горизонтальный*.
 Тип Мега  Тип Вертикальный  Тип Горизонтальный ## Контент
В этой вкладке (рисунок ниже) редактор шаблонов Joomla предоставляет Вам ряд возможностей по настройке внешнего вида самого главного, что есть на любом сайте – содержимого (контента). Большинство инструментов и их настроек уже рассматривались ранее. Не будем их затрагивать, а только остановимся на новых.
 Контент Примеры предварительно установленных стилей оформления (прессетов) контента показаны на рисунке ниже.
 Пример приссетов **Область *Контент,* инструмент *Свойства контента***. Помимо уже знакомых опций позволяет настроить высоту строки в пикселях (аналог междустрочного интервала).
Хочу обратить Ваше внимание, что для контента доступно задание нескольких границ:
- Синяя сплошная линия на рисунке ниже. Область *Макет*, инструмент *Свойства контента* – *Граница*.
- Чёрная сплошная линия на рисунке ниже. Область *Публикация*, инструмент *Свойства публикации – Внутренняя рамка* – *Граница*.
- Красная сплошная линия на рисунке ниже. Область *Публикация*, инструмент *Свойства публикации – Граница контента.*
- Зелёная пунктирная линия на рисунке ниже. Область *Публикация*, инструмент *Граница.*
 Границы **Область *Контент,* инструмент *Списки***. В отличие от списков в модуле, для маркированных списков (неупорядоченных) можно указать иконку маркера и её цвет.
**Область *Контент,* инструмент *Таблица***. При помощи настроек данного инструмента (рисунок ниже) редактор шаблонов сайтов позволяет Вам настроить внешний вид таблиц сайта (не путать с CSS-таблицами).
- *Table background.* Фоновый цвет таблицы.
- *Table Margin.* Отступ от верхнего, правого, нижнего, левого края таблицы до окружающих объектов.
- *Table Padding.* Отступ от верхнего, правого, нижнего, левого края ячейки до внутреннего содержимого ячейки.
- *Table Header.* Настройка цвета фона и текста заголовка таблицы.
- *Тип рамки.* Одинарная или двойная обводка.
- *Граница.* Стиль, толщина и цвет границы таблицы.
Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «[Обзор Droptables. Создание прайс листа в Joomla](https://aleksius.com/joomla/rasshireniya/droptables "Обзор Droptables. Создание прайс листа в Joomla")», в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.
**Область *Публикация,* инструмент *Свойства публикации***. Здесь (рисунок ниже) собраны настройки по управлению содержимым области контента, которую можно условно разделить на «заголовок», «содержимое» и «метаданные».
 Свойства публикации На рисунке ниже заголовок обведён синим, содержимое – красным, а метаданные – зелёным.
 Область содержимого Настройки, доступные для этих областей (рассмотрим только новые настройки):
- *Показывать метаданные*. Отображает\\скрывает метаданные.
- *Внутренняя рамка*. Возможно задать рамку для заголовка и\\или метаданных. Можно изменить тип, цвет, ширину и радиус скругления рамки, добавить тень, изменить задний фон и внутренний\\внешний отступы.
- *Поля от контента* и *Отступ содержания* (лучше «Отступ содержимого»). Отступ от контента до границы области содержимого и отступ от границы области содержимого до контента (почти одно и то же).
- *Изображение публикации.* Позволяет добавить изображение к материалу и настроить внешний вид обрамляющей его рамки.
- *Пост на главной.* Это своего рода управление макетом страницы типа «Блог категории» (в Joomla). Пример такой страницы – страница категории с обзорами [TemplateToaster Professional](https://aleksius.com/sozdanie-sajtov/templatetoaster/ "TemplateToaster Professional"). Можно выбрать значение «0» – не отображать в верхней части страницы статью во всю ширину (за исключением тех случаев, когда для опции *Колонки* выбрано «1»), «1» – отображать в верхней части страницы статью во всю ширину.
- *Колонки.* Доступно отображение контента в 1, 2, 3 или 4 колонки. По аналогии с газетными колонками.
**Область *Публикация,* инструмент *Типография*.** Аналогичен рассмотренным ранее одноимённым инструментам, но позволяет изменить свойства шрифтов таких элементов контента как:
- *Заголовок*.
- *Title Hover*. Заголовок, на который наведён курсор мыши.
- *Метаданные*.
- *Мета-ссылка.* Гиперссылка в области метаданных.
- *Наведённая мета-ссылка.* Гиперссылка в области метаданных, на которую наведён курсор мыши.
- *Контент.*
**Область *Публикация,* инструмент *Иконки*.** Редактор шаблонов сайтов позволяет Вам задать иконку для таких элементов:
- *Заголовок публикации.*
- *Автор.*
- *Дата.*
- *Печать.*
- *эл. Почта.*
 Иконки Эти иконки отображаются над материалом (например, на этом сайте вверху есть иконка печати). Вы можете выбрать одну из доступных иконок в библиотеке TemplateToaster 5 Professional, задав ей цвет, или указать своё собственное изображение.
В следующей статье «[Обзор TemplateToaster Professional. Генератор HTML шаблонов](https://aleksius.com/sozdanie-sajtov/templatetoaster/konstruktor-shablonov-joomla "Обзор TemplateToaster Professional. Генератор HTML шаблонов")» мы рассмотрим позиции модулей, настройки внешнего вида различных элементов управления и футэр (подвал сайта или нижний колонтитул).
| Похожие материалы |
|---|
| - [ Обзор TemplateToaster Professional. Программа для создания шаблонов ](https://aleksius.com/sozdanie-sajtov/templatetoaster/templatetoaster) - [ Обзор TemplateToaster 4.2. Генератор шаблонов ](https://aleksius.com/sozdanie-sajtov/templatetoaster/templatetoaster-professional) - [ Обзор TemplateToaster 5. Генератор CSS шаблонов ](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-css-shablonov) - [ Обзор TemplateToaster Professional. Генератор HTML шаблонов ](https://aleksius.com/sozdanie-sajtov/templatetoaster/konstruktor-shablonov-joomla) - [ Обзор TemplateToaster Professional. Генератор HTML CSS шаблонов ](https://aleksius.com/sozdanie-sajtov/templatetoaster/generator-html5-shablonov) - [ Обзор Artisteer (часть 1). Шаблоны Joomla 1.5 ](https://aleksius.com/sozdanie-sajtov/artisteer/artisteer-chast-1) - [ Обзор Artisteer (часть 3). Создание Wordpress шаблонов ](https://aleksius.com/sozdanie-sajtov/artisteer/artisteer-chast-3) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+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/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&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") |
**Полезные ссылки:**
- [Купить TemplateToaster Professional](https://secure.avangate.com/order/checkout.php?PRODS=4576922&QTY=1&AFFILIATE=38667 "Купить TemplateToaster Professional").
- [Купить TemplateToaster Standard](https://secure.avangate.com/order/checkout.php?PRODS=4576923&QTY=1&AFFILIATE=38667 "Купить TemplateToaster Standard").
- [Официальный сайт TemplateToaster](http://templatetoaster.com/ "Официальный сайт TemplateToaster").