Петля HTML шаблоны
Для повторяющихся товаров, публикаций, проектов и записей в каталоге необходима предсказуемая структура, которая останется читаемой по мере роста списка. HTML-шаблоны Loop предоставляют многократно используемые разделы разметки, которые адаптируются к макетам настольных компьютеров и мобильных устройств.
-
EN
-
EN
-
EN
-
-
EN
-
EN
Ещё HTML шаблоны из категории Архитектура и строительство
Другой Архитектура и строительство HTML шаблоны
HTML-шаблоны циклов для повторяющегося контента
HTML-шаблон цикла определяет один повторяющийся элемент и заполняет его динамическим контентом из записей постов, товаров или проектов. Вы выбираете готовый блок элемента, адаптируете его к публикуемым записям, и цикл отображает эту разметку для каждой записи. Ничего не дублируется вручную, поэтому один блок определяет, как будет выглядеть вся сетка.
Где заканчивается шаблон и начинается контент
Обычно при работе с циклами путают шаблон с элементом. Шаблон содержит пустые ячейки: часто это область изображения, заголовок и строка метаданных. Измените название товара, и изменится одна запись; измените разметку, и вся сетка изменится одновременно.
Такое разделение оставляет цикл с тремя подвижными частями:
Разметка элемента, которая фиксирует иерархию и порядок чтения;
Динамические поля, которые извлекают значения в эту разметку;
Внешняя сетка, которая определяет, сколько элементов будет располагаться рядом.
Эти три части определяют, подходит ли готовый шаблон для использования. Блок элемента с двумя полями не будет содержать записи, содержащие пять полей.
Наборы полей различаются в зависимости от цикла
Не каждый цикл содержит изображение, заголовок и описание. Набор полей зависит от типа контента и определяет, на что читатель обратит внимание в первую очередь.
Три распространенных примера показывают, насколько сильно эти наборы различаются:
В цикле записей дата, автор и отрывок привязаны к заголовку, поэтому отрывок никогда не перевешивает его;
В цикле событий сначала указываются дата и местоположение, поэтому блок времени имеет больший вес, чем изображение;
В цикле каталога содержатся категория, адрес и контактные данные, а рядом с ними — кнопка действия.
Все три повторяют один и тот же каркас, но вес внутри него меняется, и подбор шаблона к этому весу составляет большую часть работы по выбору. Адаптация макета записи для записей событий означает перестановку полей.
Сохранение порядка на разных размерах экрана
Повторяющиеся блоки хорошо читаются на широком мониторе, но становятся сложнее для чтения, когда столбцы сворачиваются. В этом случае важно, сохраняет ли запись целостность: изображение над собственным заголовком, цена рядом с собственным названием, действие, привязанное к отдельной записи.
В демонстрационном контенте это не так очевидно, поскольку элементы обычно имеют одинаковую высоту. Проблемы возникают, когда заголовок одного проекта занимает три строки, а следующий почти не содержит описания. Стоит загрузить самые длинные и самые короткие записи в выбранный шаблон перед масштабной публикацией.
В Nicepage элемент Grid размещает повторяющиеся элементы в адаптивных ячейках; Руководство по адаптивному веб-дизайну описывает его элементы управления.
Кольцевой HTML-шаблон оправдывает себя, когда структура, читаемость и порядок данных сохраняются при любом количестве записей и любой ширине экрана.