ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Текст в два столбца в WordPress. Адаптивная верстка

Чем занимается свадебное агентство i-svadba.ru. .

dvaТекст в два столбца в WordPress. Адаптивная верстка

Всем привет!

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

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

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

Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.

Текст в два столбца из редактора WordPress

Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML:

dvas

Чтобы не прописывать код текста в два столбца каждый раз вручную можно один раз добавить кнопку в текстовый редактор WordPress, без использования плагина. Это очень удобно.

Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу:

div class="left-col" — левая колонка с классом .left-col

div class="right-col" — правая колонка с классом .right-col

div class="clearfix" — специальный блок для отмены float. См. далее.

.left-col и .right-col задается ширина не фиксированная, а в процентах —width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.

Но, при достижении 180px, каждый столбец больше не уменьшается.
min-width: 180px; — задан минимальный размер колонок.

Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%;.

height: auto; — высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.

box-sizing: border-box; — желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding, рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае .left-col и .right-col.

float: left; — свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; — два столбца.

@media (max-width: 479px) — так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:

.left-col и .right-col {width: 100%;}

Используя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов.
Рекомендовано использовать 4 точки прерывания, я беру точки от Bootstrap.

Сложно? Только на первый взгляд.

Адаптивная верстка. Текст в два столбца с картинками

Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.

Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.

Картинки желательно подбирать 500px в ширину, чтобы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
HTML разметка для адаптивных столбцов с картинками:

Здесь просто добавлены картинки.

Сделайте свой сайт адаптивным ! Не можете сами? Воспользуйтесь моими недорогими услугами. Просто заполните контактную форму и через пару дней Ваш сайт станет адаптированным под все разрешения мониторов !

Текст в два столбца при помощи таблицы

Итак, как публиковать запись в два столбца на Вордпресс. Иногда нужно опубликовать текст в два столбца, а может быть в три или более. Помимо этого столбцы нужно оформить фотографиями или картинками. На Вордпресс в редакторе стоит перенос текста и просто так, по умолчанию не получится опубликовать текст в два столбца.

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

По сути запись в два столбца — это банальная и простейшая html таблица в два столбца. составить которую сможет даже незнакомый с html человек. А уж начинающий веб-мастер должен знать как составлять html таблицу в два столбца. Так как это основа вашего сайта.

Для того, чтобы у вас получилось как на скриншоте, вам нужно открыть встроенный редактор и обязательно в текстовом режиме вставить в запись в нужном месте такую таблицу:

html таблица в два столбца:

Где <td>первый столбец</td> ;<td>второй столбец</td>; два столбца одной таблицы.

После этого между <td>первый столбец</td>, заменяем надпись «первый столбец» на заранее приготовленную картинку 1 , которые должны быть для эстетичности одинакового размера. Например 250 на 200, тогда столбцы получатся одинаково ровные по умолчанию. И текст.

Аналогично делаем с <td>второй столбец</td> надпись «второй столбец» заменяем на заранее приготовленную картинку 2 и текст. Должна выйти запись в два столбца или текст в два столбца.

Добавляем картинки и текст в html таблицу в два столбца так-же как и в обычную запись. Ставим выравнивание по центру и полный размер. Редактор сам подгонит картинку под размер столбца.

Давайте посмотрим на скриншот. Красиво?

Можно так-же добавить и третью запись с картинками в третий столбец. Нужно просто в html таблицу поставить третий столбец <td>третий столбец</td>; после второго.

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

На этом на сегодня все!

БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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