Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Модули Panels и Page Manager. Создаем собственный макет страницы на Drupal 7.

Раздел: 

Создание макета страницы-панелей с модулем Panels

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

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

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

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

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

Включение модулей

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

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

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

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

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

Включение модуля page manager

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

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

Новые разделы в структуре

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

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

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

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

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

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

Страница панелей

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

Макеты

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

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

Добавление нового макета

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

форма создания макета

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

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

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

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

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

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

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

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

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

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

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

Добавление строки

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

Настройка строки

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

Добавить регион

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

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

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

Настройка региона

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

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

Ширина колонки

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

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

Настройка региона

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

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

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

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

Страница с панелями