Вы здесь

Как создать макет для страницы типа лендинга с помощью Panels

0

Назрела необходимость создавать страницы с элементами, свойственными лендингам (landing page). Основным свойством подобных страниц - являются фоны на всю ширину страницы. Так вот вопрос: можно ли, например, с помощью модуля Panels, создавать макеты с возможностью отдельным регионам задавать фон во всю ширину страницы? Возможно вы подскажете какие либо другие способы для реализации данной задачи, не трогая *.tpl.php

Версия Drupal: 
7.x
Связанные проекты: 
PanelsViews
Вопрос задан 13.01.2015 - 21:40

Да, CSS подходит, я им и буду пользоваться. Вопрос был больше в том, чтобы динамически (с помощью админки) добавлять блоки во всю ширину сайта с необходимыми классами, которым потом и будут присваиваться свойства CSS.

Комментарий оставлен 20.01.2015 - 18:13

Ответы

5

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

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

  1. В корне темы создаем новую папку, допустим layouts.
  2. В .info файле темы добавляем следующую строку:
plugins[panels][layouts] = layouts

Он указывает панелям в какой папке искать макеты.
3. Далее создаем внутри папки layouts папку для нового макета, допустим он будет называться landing, так называем называем и папку.
4. Внутри папки landing нам необходимо создать 4 файла:
- landing.png - картинка макета, отображается при выборе в панелях.;
- landing.css - файл стилей для нашего макета, который будет подключаться при отображении, можно оставить пустым, если нет в нем необходимости;
- landing.inc - файл в котором объявляется макет, его регионы и вся необходимая информация.;
- landing.tpl.php - файл макета, в нем вся необходимая html разметка и вывод регионов.

Теперь непосредственно пробежимся по двум основным файлам.

landing.inc

Файл в котором объявляется весь макет для панелей. Без него он не появится на выбор. Примерное содержимое.

<?php
// Объявляем наш макет.
$plugin = array(
  // Заголовок\название макета.
  'title' => 'Макет для посадочной страницы',
  // Категория где будет предложен макет. Для удобства можете указать свой, где будут наборы макетов для посадочной страницы.
  'category' => 'Посадочная страница',
  // Указывается название файла-изображения макета.
  'icon' => 'landing.png',
  // Указывается машинное имя нашего макета.
  'theme' => 'landing',
  // Указывается наш css файл со стилями.
  'css' => 'landing.css',
  // Здесь мы объявляем сколько угодно регионов для макета. Предположим нам надо два сверху и один под ними.
  'regions' => array(
    // Машинное имя => метка
    'top_left' => 'Верхний левый',
    'top_right' => 'Верхний правый',
    'bottom' => 'Низ'
  ),
);

landing.tpl.php

Файл в котором происходит вывод макета. Классы указаны на моё усмотрение.

<div class="landing-layout" <?php if (!empty($css_id)) { print "id="$css_id""; } ?>>
  <div class="landing-layout-top">
    <div class="landing-layout-top-left"><?php print $content['top_left']; ?></div>
    <div class="landing-layout-top-right"><?php print $content['top_right']; ?></div>
  </div>

  <div class="landing-layout-top-right"><?php print $content['bottom']; ?></div>
</div>

landing.css

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

.landing-layout-top-left,
.landing-layout-top-right {
    float: left;
    width: 50%;
}

Всё, теперь в Panels можно выбрать данный макет и размещать что угодно в этих трёх регионах.

Ответ дан 13.01.2015 - 22:19
Аватар пользователя Niklan
Niklan
445