Elementor에서 석조 갤러리를 만드는 방법(3가지 방법)

주요 시사점

• 석조란 이미지가 균일한 카드로 잘리는 대신 고유한 비율을 유지하므로 인물 사진이 높게 유지된다는 것을 의미합니다.
• Elementor 의 무료 이미지 갤러리 위젯에는 석조 옵션이 없습니다. 레이아웃 컨트롤은 열과 간격입니다.
• 마스터 애드온 필터링 가능한 이미지 갤러리에는 자르기를 중지하는 프리메이슨 스위치가 있지만 프런트 엔드 스크립트는 항목을 행으로 배치하므로 키가 큰 카드는 같은 행의 짧은 카드 아래에 간격을 둡니다.
• 간격 없이 단단히 채워진 열을 원하는 경우 컨테이너의 CSS 열은 무료 설치의 정직한 경로입니다.
• 제품 사진과 팀 사진의 경우 균일한 그리드가 일반적으로 석조보다 더 잘 읽히므로 대신 이미지 종횡비를 켜십시오.

석공술은 이미지가 자연스러운 높이에 자리잡고 기둥이 비틀거리며 핀터레스트가 친숙하게 만든 모양입니다. 사진에 어울리는데,인물상 프레임을 사각형으로 자르면 그림의 절반이 버려집니다.

Elementor 는 세 가지 다른 방법으로 이것에 근접할 수 있으며,모두 동일한 것을 생산하지는 않습니다. 그 중 하나는 Masonry 라는 레이블이 붙은 스위치가 있는데,이름에서 알 수 있는 것보다 적은 작업을 수행하며,이는 빌드하기 전에 읽을 가치가 있는 부분입니다.

석조, 그리드 및 정당화: 차이점

석공술과 정당화 모두 원래 작물을 보호합니다. 차이점은 수학이 실행되는 방향입니다: 석공술은 열 너비를 고정하고 높이를 변경하게 하고, 정당화는 행 높이를 수정하고 너비를 변경하게 합니다.

루트 1: Elementor 의 갤러리 위젯 (Pro)

Elementor 의 무료 이미지 갤러리 위젯에는 열과 간격이라는 두 개의 레이아웃 컨트롤이 있으며,균일 한 카드로 자릅니다. Pro 인 갤러리 위젯에는 세 가지 값으로 레이아웃 컨트롤이 있습니다: 그리드,정당화 및 석조. 석조에는 실제가 있고 열에는 간격이 없으며 Pro 포트폴리오 위젯에는 자체 석조 스위치도 있습니다. 이미 Pro 를 소유하고 있다면 그것이 가장 짧은 경로이며 설치할 것이 없습니다.

경로 2: 필터링 가능한 갤러리의 벽돌 스위치

무료 Elementor 설치 시 필터링 가능한 이미지 갤러리 이미지 종횡비 및 홈통 옆의 설정 섹션에 석조 스위치가 있습니다.

Masonry on 과 Image Aspect Ratio off 를 사용하면 이미지가 자체 비율을 유지하므로 세로 프레임이 높게 유지되고 아무것도 잘리지 않습니다. 열 패킹은 얻지 못하는 부분입니다. 현재 릴리스에서는 그리드를 배치하는 스크립트가 항목을 행으로 배열하므로 짧은 이미지는 다음 행이 시작될 때까지 그 아래에 빈 공간을 남깁니다.

아무 것도 잘리지 않고 행이 깔끔하게 유지되므로 이미지의 모양이 대략 비슷할 때 유용합니다. 무료 설치 시 포장된 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; }
}

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X selector 키워드는 편집 중인 요소를 대상으로 하므로 이 스니펫은 컨테이너 자체의 사용자 정의 CSS 상자에 들어갑니다. 무료 Elementor 설치에서 해당 상자는 다음과 같은 애드온에서 나옵니다 사용자 정의 CSSelementor는 자체 사용자 정의 CSS 필드를 Pro로 표시하므로.

절충안은 순서입니다. CSS 열은 각 열에서 위에서 아래로 채워지므로 읽기 순서는 첫 번째 열을 따라 실행된 다음 두 번째 열을 따라 실행됩니다. 갤러리의 경우 아무도 순서대로 읽지 않으므로 괜찮습니다. 연대순으로 읽지 않습니다.

석조물을 올바르게 보이게 만드는 이미지 크기

• 일관된 너비로 업로드하십시오. 1,200px 주변은 3 열 그리드에 충분하며 페이지를 가볍게 유지합니다.
• 석조 공사는 기둥 너비를 고정하여 작동하므로 높이를 다양하게 하고 너비를 동일하게 유지하십시오.
• 이미지 해상도를 의도적으로 설정하십시오. 9 개의 이미지 그리드에있는 전체 크기 파일은 시각적 이득이없는 느린 페이지입니다.
• Gutter 슬라이더는 반응성이 뛰어나고 0 에서 40px까지 실행되므로 전화기에서 조일 수 있습니다.
• 극단적인 프레임 하나를 피하세요. 정사각형 이미지 중 매우 높은 파노라마 하나가 다른 모든 것에서 눈을 떼게 합니다.

균일한 격자가 더 나은 답일 때

이미지 종횡비를 켜면 제품 사진, 팀 사진, 로고 및 세트처럼 보이는 모든 것이 원하는 균일한 그리드를 얻을 수 있습니다.

간단한 선택 방법: 이미지가 하나의 카메라 설정으로 한 세션에서 촬영 된 경우 그리드로 자릅니다. 다른 방향의 다른 촬영에서 나온 경우 모양을 유지하게하십시오.

자주 묻는 질문

최종 생각

세 가지 경로,세 가지 다른 결과. Elementor Pro 의 갤러리 위젯은 기둥을 포장합니다. 필터링 가능한 갤러리의 Masonry 스위치는 자르기를 중지하고 행을 유지하므로 종종 충분합니다. CSS 열은 읽기 순서를 희생하여 무료 설치로 포장 된 모양을 제공합니다.

원래 작물을 보호하고 깔끔한 그리드를 유지하는 것은 두 가지 다른 목표이므로 실제로 가지고 있는 경로와 일치하는 경로를 선택하세요.

관련 읽기

• 필터링 가능한 이미지 갤러리 위젯
• Elementor 에서 필터링 가능한 갤러리를 만드는 방법
• Elementor 갤러리 위젯: 기본, Pro 및 애드온 비교
• 사용자 정의 CSS 확장
• 갤러리 슬라이더 위젯