Разбиваем главную страницу на колонки, плитки с помощью CSS

колончатые и плиточные макеты страницы сайта

Здравствуйте, сегодня поговорим о том как с помощью только CSS стилей разбить/разделить любую страницу (в данной статье возьмем главную страницу) сайта на колонки/плитки (pinterest стиль)/ кирпичики.

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

Начнем с того, как добавить CSS стили в тему вашего сайта, способы:

1. Непосредственно изменять файл стилей темы — style.css.

Для этого нужно войти в админ панель wordpress, в левом меню выбрать пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов найти файл стилей — style.css.

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

2. В некоторых темах есть пункт «Пользовательские стили CSS» (Custom CSS).

3. Воспользоваться плагинами, например:

Simple Custom CSS, сведения о плагине:

Последнее обновление: 2014-6-5
Загрузок: 98,743
Сайт плагина: “wordpress.org/plugins/simple-custom-css/”

4. Использовать дочернюю тему сайта

Более подробно о создании дочерней темы сайта на wordpress читайте здесь (на русском языке) — «codex.wordpress.org/Дочерние_темы»

 

Приступим же к верстке главной страницы сайта!

Для тестирования примеров использовал стандартную тему wordpress - Twenty Twelve, данные способы должны подойти для большинства тем wordpress.

1. Начнем с разбивки главной страницы на колонки.

Для этого достаточно использовать следующий CSS код:

/* 3 колонки Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

В итоге получиться следующее:
разбиваем главную страницу сайта на колонки

2. Разбиваем главную страницу сайта на плитки (кирпичики) — «Pinterest.com» стиль.

Для этого достаточно использовать следующий CSS код:

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

В итоге у вас получиться следующее:
плиточный макет сайта на CSS

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Разбиваем главную страницу на колонки, плитки с помощью CSS: Один комментарий

  1. Константин

    Бесплатные «плиточные» темы:
    - Baskerville (wordpress.org/themes/baskerville);
    - Celebrate (wordpress.org/themes/celebrate);
    - Jkreativ Lite (wordpress.org/themes/jkreativ-lite);
    - Gridz (wordpress.org/themes/gridz);
    - Pinpress (wordpress.org/themes/pinpress);
    - Alpha Trinity (wordpress.org/themes/alpha-trinity);
    - Carton (wordpress.org/themes/carton).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>