Адаптация HTML шаблона (футер)

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

Адаптация HTML шаблона (футер)

Исходный код футера в шаблоне

Исходный html код футера в шаблоне выглядит так:

<div class="fbg">
  <div class="fbg_resize">
    <div class="col c1">
      <h2><span>Image Gallery</span></h2>
      <a href="#"><img src="images/gallery_1.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_2.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_3.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_4.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_5.jpg" width="58" height="58" alt="pix" /></a> <a href="#"><img src="images/gallery_6.jpg" width="58" height="58" alt="pix" /></a> </div>
    <div class="col c2">
      <h2><span>Lorem Ipsum</span></h2>
      <p>Lorem ipsum dolor<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Morbi tincidunt, orci ac convallis aliquam</a>, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
    </div>
    <div class="col c3">
      <h2><span>Contact</span></h2>
      <p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui. Nulla pharetra, mauris vitae interdum dignissim, justo nunc suscipit ipsum. <a href="#">mail@example.com</a><br />
        <a href="#">+1 (123) 444-5677</a></p>
    </div>
    <div class="clr"></div>
  </div>
  <div class="footer">
    <p class="lr">&copy; Copyright <a href="#">MyWebSite</a>.</p>
    <p class="lf">Layout by Cool <a href="http://www.coolwebtemplates.net/">Website Templates</a></p>
    <div class="clr"></div>
  </div>
</div>

В футере определены 3 блока и информация об авторстве сайта и шаблона.

Три блока футера

Для начала работы над кодом зададим 3 виджета в структуре сайта для соответствующих блоков футера. Для этого выделим основной элемент сайта в дереве проекта и выполним пункт меню Добавить/Виджет. Опустим элемент виджета вниз проекта, чтоб он не мешал основным элементам сайта, клавишами Ctrl+Down, либо используя пункты контекстного меню. Затем добавим еще 2 виджета через команду контекстного меню Дублировать (Ctrl+Ins), щелкнув правой кнопкой мыши на элементе добавленного виджета.

Позиционирование виджетов

Позиционирование виджетов

Мы создали 3 элемента для блоков футера в которых укажем информацию для размещения. Для определения какой блок относится к какому положению в футере мы должны распределить их по группам. Для этого на вкладке Настройки виджетов в поле Группа укажем соответственно: footer1, footer2 и footer3. А затем к виджету группы footer1 добавим 6 изображений из исходного шаблона через команду Добавить фото..., а к остальным соотвествующий текст.

Код шаблона футера

Вернемся в редактор шаблона через меню Сайт/Шаблон и заменим код футера на следующий:

<div class="fbg">
  <div class="fbg_resize">
    <!--{widget:footer1}-->
    <div class="col c1">
      <h2><span>{title}</span></h2>
      <!--{photos}-->
      <a href="{url}"><img src="{thumb(58)}" width="58" height="58" alt="{title}" /></a>
      <!--{/}-->
    </div>
    <!--{/}-->
    <!--{widget:footer2}-->
    <div class="col c2">
      <h2><span>{title}</span></h2>
      {text}
    </div>
    <!--{/}-->
    <!--{widget:footer3}-->
    <div class="col c3">
      <h2><span>{title}</span></h2>
      {text}
    </div>
    <!--{/}-->
    <div class="clr"></div>
  </div>
  <div class="footer">
    <p class="lr">&copy; Copyright <a href="{site.url}">{site.name}</a>.</p>
    <p class="lf">Layout by Cool <a href="http://www.coolwebtemplates.net/">Website Templates</a></p>
    <div class="clr"></div>
  </div>
</div>

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

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