Кастомизатор шаблонов

В нашем каталоге шаблонов уже имеется несколько кастомизированных шаблонов, а вот информации о работе с такими шаблонами мало. Поэтому, нужно ликвидировать этот недостаток информации. Начнем с того, что дадим определение кастомизированного шаблона в системе движка My Engine.

Кастомизированный шаблон – это шаблон, к которому автоматически подключается модуль «Customize», предназначенный для динамичного редактирования контента прямо на страницах сайта.

Работу этого модуля рассмотрим на примере шаблона «Морской прибой». В этом шаблоне модуль кастомизатора подключается только к главной странице, т.к. на вложенных страницах редактирование предусмотрено только через административную панель сайта.

Открываем главную страницу сайта и внизу экрана находим вот такую иконку

Если иконки нет, то нужно войти в панель управления сайтом и тогда иконка появится. Нажимаем на эту иконку и страница переходит в режим редактирования, а внизу экрана появится вот такая иконка

Элементы контента предназначенные для редактирования будут выделены синей рамкой или синим фоном. Поставьте курсор внутрь такого элемента, например, заголовка «Морской прибой». Появится красная граница и панель инструментов текстового редактора, что указывает на готовность к редактированию. Введите новый текст заголовка. Так же редактируется другие заголовки и тексты.

Далее переходим к редактированию слайдера. Здесь нас будет интересовать редактирование кнопок и слайдов.

Кнопка – это всегда ссылка оформленная таким образом, поэтому редактирование кнопки будет равнозначно редактированию ссылки.

Поместим курсор во внутрь первой кнопки слайдера перед словом «ПОДРОБНЕЕ». Кнопка откроется для редактирования и попробуем ввести слово «Читать».

Это слово выйдет за пределы кнопки. То же самое произойдет, если начать вводить текст после слова «ПОДРОБНЕЕ». Нельзя так же удалять это слово и пытаться ввести вместо него другой текст. В этом случае, кнопка исчезнет и превратится в обычную ссылку. Что делать в такой ситуации, когда нужно быстро изменить текст кнопки? Нужно поместить курсор внутрь текста кнопки и ввести новый текст, например – «ЧИТАТЬ ДАЛЕЕ».

После этого нужно аккуратно удалить остатки старого текста.

Можно воспользоваться другим способом редактирования. Открываем кнопку для редактирования, для чего ставим курсор во внутрь кнопки.

В открывшейся панели инструментов текстового редактора нажимаем на иконку ссылки. Откроется диалоговое окно редактирования ссылки.

В поле «Отображаемый текст» вводим новый текст. Затем в списке «Тип ссылки» выбираем опцию «Ссылка».

Появится дополнительные настройки. В списке «Протокол» выбираем нужную нам опцию. Если вы хотите ввести ссылку ведущую на другой ресурс, то нужно выбирать опцию «http://» или «https://». Мы же будем вводить ссылку на страницу нашего ресурса, поэтому выбираем опцию «Другой». В поле «Ссылка» вводим абсолютную ссылку на страницу «Компания», которая будет иметь вид - /about. Нажимаем кнопку «ОК».

Все, редактирование кнопки закончено. Для сохранения результата нажимаем на иконку

внизу экрана.

У нас все получилось. Теперь наведем курсор на кнопку, она поменяет цвет, т.е. станет активной, а внизу экрана появится подсказка с адресом ссылки.

Теперь переходим к редактированию слайдов. Для этого, нажимаем на иконку

внизу страницы и переходим в режим редактирования.

Кликнем левой кнопкой мыши по среднему слайду. Появится панель инструментов текстового редактора, а сам слайд будет выделен синим полупрозрачным цветом. Для начала редактирования слайда нажимаем на иконку в панели инструментов.

Откроется диалоговое окно для редактирования слайда. Это стандартное окно текстового редактора было описано в инструкции к CKEditor 4, поэтому подробно описывать работу с ним не будем.