Ключевые выводы
- Каменная кладка означает, что изображения сохраняют свои пропорции, а не обрезаются на единую карту, поэтому портретная фотография остается высокой.
- Бесплатный виджет Image Gallery от Elementor не имеет опции кладки. его элементы управления компоновкой - столбцы и зазор.
- В галерее фильтруемых изображений Master Addons есть переключатель Masonry, который останавливает обрезку, но передний сценарий раскладывает элементы рядами, поэтому высокие карты оставляют зазор под короткими в одном ряду.
- Если вам нужны плотно упакованные колонны без зазоров, колонки CSS на контейнере - это честный путь при бесплатной установке.
- Для снимков продукта и фотографий команды однородная сетка обычно читается лучше, чем каменная кладка, поэтому вместо этого включите соотношение сторон изображения.
Каменная кладка - это макет, где изображения располагаются на своей естественной высоте, а колонны шатаются, форма, которую Pinterest сделал знакомой. Это подходит для фотографии, где обрезка портретной рамки в квадрат отбрасывает половину изображения.
Элементор может приблизиться к этому тремя разными способами, и они не все производят одно и то же. У одного из них есть переключатель с надписью "Масонство", который делает меньше, чем предполагает название, и эту часть стоит прочитать перед тем, как построить.
Оглавление
Кладка, сетка и обоснованность: разница
| Макет | Что это делает с изображениями | Читает лучше для |
|---|---|---|
| Сетка | Обрезает каждое изображение до одинакового размера карты | Товары, фотографии команд, логотипы, все, что вы хотите, аккуратно |
| Масонство | Держит каждое изображение в росте, колонны шатаются | Смешанная фотография, портреты рядом с пейзажами |
| Оправданный | Сохраняет пропорции, но растягивает каждый ряд на одинаковую высоту | Фоторепортажи и контактные листы |
Каменная кладка и обоснованные обе защищают исходный урожай. Разница в том, в каком направлении движется математика: каменная кладка фиксирует ширину колонны и позволяет изменять высоту, обоснованно фиксирует высоту ряда и позволяет изменять ширину.
Маршрут 1: Виджет Галерея Элементора (Pro)
Бесплатный виджет Галерея изображений Элементора имеет два элемента управления макета, Столбцы и Пространство, и он посевает до единой карты. виджет Галерея, который является Pro, имеет элемент управления макет с тремя значениями: Сетка, Обоснованный и масонство. масонство там реальная вещь, столбцы упакованы без пробелов, и виджет Pro Портфолио имеет свой собственный переключатель Каменной кладки также. если вы уже владеете Pro, это самый короткий путь и нечего установить.
Маршрут 2: переключатель каменной кладки в фильтруемой галерее
При бесплатной установке Elementor Фильтруемая галерея изображений имеет переключатель Masonry в разделе "Настройки" рядом с соотношением сторон изображения и желобом.
С включенным Masonry и выключенным Соотношением Аспектов Изображения, изображения сохраняют свои собственные пропорции, поэтому рамка портрета остается высокой, и ничто не обрезается.Упаковка столбцов - это та часть, которую вы не получаете.В текущем выпуске сценарий, который выкладывает сетку, упорядочивает элементы в строках, поэтому короткое изображение оставляет под ним пустое пространство до начала следующего ряда.
Это полезно, когда ваши изображения примерно похожи по форме, поскольку ничего не обрезается и ряды остаются аккуратными. Для упакованного образа Pinterest при бесплатной установке ответ - маршрут 3.
Маршрут 3: Колонки CSS на контейнере
CSS имеет макет столбца, который упаковывает контент так, как должна быть каменная кладка. Поместите свои изображения в контейнер, добавьте к нему несколько строк CSS, и браузер выполнит работу без сценария.
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}выше selector ключевое слово нацелено на элемент, который вы редактируете, поэтому этот фрагмент помещается в поле "Настраиваемый CSS" на самом контейнере. На бесплатном элементере установите это поле из такого дополнения, как Пользовательские CSS, поскольку Elementor отмечает свое собственное поле Custom CSS как Pro.
Компромисс упорядочен. столбцы CSS заполняются сверху вниз в каждом столбце, поэтому порядок чтения спускается вниз по столбцу один, затем вниз по столбцу два. Для галереи никто не читает последовательно, что хорошо. Для чего-либо хронологического это не так.
Размеры изображений, благодаря которым кладка выглядит правильно
- Загрузить на постоянной ширине. около 1200px достаточно для трехстолбчатой сетки и сохраняет свет страницы.
- Пусть высоты меняются и ширина остается прежней, поскольку кладка работает путем фиксации ширины колонны.
- Установите разрешение изображения намеренно. полноразмерные файлы в сетке из девяти изображений - это медленная страница без визуального усиления.
- Ползунок Gutter отзывчив и работает от 0 до 40px, поэтому на телефонах его можно затянуть.
- Избегайте одного экстремального кадра. одна очень высокая панорама среди квадратных изображений оттягивает взгляд от всего остального.
Когда лучше однородная сетка
Включите соотношение сторон изображения, и вы получите единую сетку, чего хотят снимки продукта, фотографии команды и логотипы, а также все остальное, что должно выглядеть как набор.
Простой способ выбора: если изображения были сняты за один сеанс с одной установкой камеры, обрезайте их до сетки. если они происходят из разных снимков в разных ориентациях, пусть сохраняют свою форму.
Часто задаваемые вопросы
Есть ли у Элементора каменная галерея?
Нет в бесплатном виджете Image Gallery, который предлагает только столбцы и пробел. виджет Elementor's Gallery с опциями макета находится в ее списке Pro.
Почему в моей каменной галерее до сих пор есть пробелы?
Потому что сетка выложена в строки, а не упакованные столбцы Изображения сохраняют свою естественную высоту, поэтому короткое изображение, сидящее в ряд с высоким, оставляет пространство под ним. CSS столбцы - это путь к истинной упаковке.
Работает ли каменная кладка с вкладками фильтра?
Да. Фильтрация и макет разделены, поэтому щелчок по категории сужает сетку, а остальные элементы перекладываются.
Могу ли я установить каменную кладку только на мобильный телефон?
Нет. переключатель Masonry применяется к каждому размеру экрана. ползунок Gutter - это элемент управления, который меняется на одно устройство.
Плоха ли каменная кладка для скорости страницы?
Сам макет дешев. что стоит вам изображения, поэтому установите разумное разрешение изображений, а не полноразмерные файлы, и помните, что каждый элемент в галерее загружается вместе со страницей.
Заключительные мысли
Три маршрута, три разных результата Виджет Elementor Pro Gallery упаковывает столбцы для вас. переключатель Masonry на фильтруемой галерее останавливает обрезку и сохраняет строки, чего часто бывает достаточно. столбцы CSS дают упакованный вид при бесплатной установке, ценой порядка чтения.
Защита исходного урожая и поддержание порядка в сетке - две разные цели, поэтому выберите маршрут, соответствующий тому, который у вас есть на самом деле.
Связанное чтение
