Если вы хотите создать персональный макет страницы или воспользоваться уже существующим, а потом в нём выводить содержимое сайта то без Panels вам не обойтись. Этот набор содержит в себе четыре модуля, начиная от основного функционального модуля заканчивая удобным интерфейсом.

Его функционал можно значительно увеличить за счет совместной работы с другим модулем, а именно Page manager. Стоит отметить, что Page manager Не является самостоятельным модулем, а входит в состав Ctools.

Установка и активация модулей

Начнём с установки пакета Panels, который можно скачать перейдя по ссылке.

После установки модуля перейдём в раздел модули и активируем все модули из пакета.

Panels – основной модуль, который несёт в себе главный функционал.

Panel node – с помощью этого модуля можно будет создавать материалы, которые содержат панели.

Mini panels — с помощью него мы будем создавать панели, которые можно будет размещать в различных регионах сайта, практически как обычные блоки.

Panel In-Place Editor – добавляет удобный интерфейс для быстрого редактирования созданных панелей.

И сразу включим менеджер страниц.

Создание макета

Теперь у нас добавилась две новые ссылки в разделе «Структура», а именно «Панели» и «Мини-панели». На данном этапе нас интересуют «Панели» на неё мы и перейдём.

Но перед тем как создавать макет, немного остановимся на составляющих страницы.

Первая группа ссылок имеет обобщённое название «Создать…» и далее перечисляются все типы материалов, которые вы можете создать.

Затем идёт группа под названием «Управление мини-панелями» - сейчас она пустая, но в дальнейшем в ней будут выведены все мини-панели созданные на сайте.

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

Управление страницами — в этой группе перечислены все страницы-панели содержащиеся на Вашем проекте, а также ссылки на их управление.

Управления пользовательскими макетами — также пока что пуст, но в нём будут выведены все ваши макеты страниц после их создания.

Познакомившись с элементами страницы перейдём к созданию собственного макета страницы-панелей. Для этого перейдём в подраздел макеты, находящийся в правом верхнем углу окна.

Перед нами откроется окно с разными фильтрами и сортировками, которые помогут в поиске конкретного макета.

Для того что бы создать свой необходимо нажать на ссылку Add flexible layout .

В форме мы стандартно заполняем административный заголовок — это будет названием нашей страницы и вводим машинное имя. По необходимости заполняем категорию и описание страницы, и переходим к созданию панелей.

Но перед тем как создавать макет рассмотрим его структуру.

Структура макета

Вся структура макета базируется на принципе матрёшки. Следовательно, есть основной элемент внутри которого выводятся меньшие блоки и так далее.

Самая большая матрёшка, внутри которой содержатся все остальные, называется Канва. Канва в структуре можем быть только одна и выступает в роли общего блока.

Следом идёт «Колонка», начиная с этого элемента мы можем игратся с количеством. Их может быть несколько, а выстраиваются они по горизонтали драг за другом, как столбцы в таблице.

Строка- третий элемент, который входит в колонку и выстраивается друг под другом по вертикали. Внутри себя может содержать области или другие колонки.

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

Такое большое количество вложений необходимо для более гибкого управления структурой макета, с долей фантазии из которого можно создать сложные проекты.

Добавление новых полей и регионов

Теперь познакомившись со структурой макета создадим свой. Сильно фантазировать мы не будем - создадим простой макет состоящий из двух строк. В верхней строке будет два региона, соответственно левый будет отвечать за обложку книги, а в правом выведем остальные поля. Нижняя строка будет отвечать за вывод представления с автором.

Следовательно нам необходимо создать новую строку. Для этого нам необходимо нажать на «Колонка» и выбрать «Add row to …» ну а где именно добавлять это на ваше усмотрение.

После нажатия на ссылку добавления перед нами откроется окно с настройкой. В настройках мы можем задать свой уникальный класс, выбрать что будет содержатся внутри строки , колонки или области, также можно скрыть если она пустая. В нашем случае поставим уникальный класс «row1», в содержании поставим «Области», а галочку оставим не тронутой и нажмём сохранить.

Теперь внутри этой строки добавим две области занимающие половину от общей ширины. Для этого нажмём на «Строка» и в выплывающем списке нажмём добавить регион.

В настройках региона заполняем его название.

Также задаём уникальный класс, если он требуется, и выставляем какой будет ширина - фиксированной или плавающей.

Повторяем те же действия и создаём второй регион.

Теперь, когда у нас есть несколько областей, между ними появился ползунок, с помощью которого мы можем менять размеры колонок.

Последнее что необходимо сделать в нашем макете — это изменить имя уже существующей области с Русского языка на английский, для избежания возникновения проблемы с машинным именем.

Для этого нажимаем на область и нажимаем на ссылку «Настройки региона»

Перед нами появится знакомое окно, в котором меняем имя на «region3»

Воспользовавшись «Живым» предпросмотром мы можем увидеть как будет выглядеть наша страница.

Если вы добились нужного вам результата то смело нажимаем на кнопку Сохранить.

После нажатия на кнопку сохранить нас выкинет на страницу макетов панелей, и в списке появиться наш собственный проект страницы.