디자이너들은 기둥 격자 위에서 작업합니다. 헤드라인,카드, 버튼이 몇 픽셀을 떨어져 표류하는 대신 정렬되는 방식입니다. Elementor 는 하나를 보여주지 않으므로 정렬은 일반적으로 눈으로 이루어집니다. The 그리드 라인 확장 Elementor용 마스터 애드온 편집기 내부에서 바로 전환할 수 있는 열 그리드 오버레이를 수정합니다.
Elementor 의 페이지 설정에서 바로 열 수,홈통, 최대 너비,오프셋 및 오버레이 색상을 제어합니다. 활성화 방법 및 각 옵션의 기능은 다음과 같습니다.
그리드 라인 확장이 수행하는 작업 #
Grid Line 은 Elementor 편집기 내부의 페이지 위에 균등하게 간격을 둔 수직 열 세트를 그립니다. 오버레이는 디자인 위에 위치하므로 디자이너가 Figma 또는 Photoshop 에서 사용할 그리드에 섹션과 위젯이 실제로 정렬되어 있는지 확인할 수 있습니다.
기본값은 40px 홈통이 있는 최대 너비 1280px 의 12 열 그리드이며,대부분의 설계 시스템에서 사용하는 것과 동일한 규칙입니다. 모든 값은 장치당 조정 가능하며 전체 오버레이는 하나의 토글로 켜고 끕니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- Grid Line은 무료 확장 프로그램이므로 Pro 라이센스가 필요하지 않습니다.
Grid Line 확장을 활성화하는 방법 #
1 단계: 확장 탭에서 켜십시오 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 그리드 라인은 에 살고 있습니다 디스플레이 위젯 glassmorphism 과 Patterns 옆에 Popular 배지가 있는 그룹. 보라색으로 변하도록 토글을 클릭합니다.
2 단계: 변경 사항을 저장합니다 #
맨 위로 스크롤하고 클릭합니다 변경 사항 저장. 녹색 “성공적으로 저장된 설정” 공지는 확장 프로그램이 활성 상태임을 확인합니다. Elementor 편집기가 열려 있으면 한 번 다시 로드합니다.
Elementor 편집기에서 그리드를 표시하는 방법 #
Elementor로 페이지를 열고 다음을 클릭하세요 페이지 설정 상단 막대의 아이콘. Under the 설정 탭을 누르면 새로운 것을 찾을 수 있습니다 그리드 라인 보라색 MA 배지로 표시된 섹션. 뒤집기 활성화 켜짐으로 이동하면 열 오버레이가 캔버스 전체에 즉시 나타납니다.
설정은 페이지 설정에 살고 있기 때문에, 그리드는 페이지 당: 당신은 그것이 표시 위치를 결정, 그리고 모든 문서에 당신을 따라 하지 않습니다.
그리드 라인 설정 설명 #
- 활성화: 이 페이지의 오버레이를 켜고 끕니다.
- 격자 색상: 열의 색상. 전역 견본을 선택하거나 선택기로 사용자 지정 색상을 설정합니다. 불투명도가 낮은 값은 오버레이 아래에서 콘텐츠를 읽을 수 있도록 유지합니다.
- 열: 몇 개의 열을 그려야 할까요. 12 가 표준이지만,디자인이 사용하는 모든 그리드를 일치시킬 수 있습니다.
- 최대 너비: 그리드의 총 너비,기본적으로 1280px. 사이트의 콘텐츠 너비와 일치시켜 열이 실제 레이아웃과 정렬되도록 합니다.
- 오프셋: 레이아웃이 필요할 때 그리드를 가장자리에서 밀어 넣습니다.
- 홈통: 열 사이의 공간, 기본적으로 40px.
- Z-인덱스: 오버레이의 스태킹 순서는 기본적으로 999이므로 그리드는 콘텐츠 위에 계속 표시됩니다.
열, 최대 너비, 오프셋 및 홈통은 반응형 컨트롤입니다: 각 항목 옆에 있는 장치 아이콘을 클릭하여 데스크톱, 태블릿 및 모바일에 대해 서로 다른 값을 설정합니다.
격자 색상 변경 #
옆에 있는 사용자 지정 견본을 클릭합니다.Click the custom swatch next to 격자 색상 색상 선택기를 열려면. 어떤 HEXA 값도 작동하고,알파 채널이 가장 중요합니다: 50 퍼센트 불투명도와 같은 것은 아래에 디자인을 숨기지 않고 볼 수있는 열을 제공합니다.
기둥과 홈통을 조정합니다 #
슬라이더와 오버레이 업데이트를 실시간으로 드래그하십시오. 아래 예에서 홈통은 최대 58px 이고 그리드는 사용자 정의 색조를 전달하므로 가격 카드가 읽을 수있는 상태로 유지되는 동안 밝은 배경에 대해 명확하게 읽습니다.
레이아웃이 정렬되면 뒤집습니다 활성화 뒤로 물러서십시오. 설정은 페이지와 함께 저장되므로 오버레이를 잊어 버리기 쉽습니다.
Grid Line이 시간을 절약해 줄 때 #
- 디자인 파일 일치. 눈의 거리 대신 설계된 것과 동일한 12개 열 그리드에 Figma 또는 XD 레이아웃을 재구성합니다.
- 섹션 정렬. 다른 섹션의 요소가 동일한 열에서 시작하고 끝나는지 확인하세요.
- 일관된 페이지 시리즈. 하나의 공유 그리드에 다른 팀원이 구축한 랜딩 페이지를 유지하세요.
- 가져온 템플릿을 연마합니다. 오버레이를 a의 페이지에 놓습니다 템플릿 키트 그리고 독립형으로 배치된 요소를 찾아보세요.
- 간격 결정. 열 너비와 패딩을 설정할 때 홈통 선을 빠른 눈금자로 사용하십시오.
비디오 자습서 #
동작으로 보는 것을 선호하시나요? 이 비디오는 그리드 라인 활성화와 Elementor 편집기의 오버레이 조정을 안내합니다.
자주 묻는 질문 #
Master Addons의 그리드 라인 확장은 무엇입니까?
Elementor 편집기에서 열 그리드 오버레이를 그리는 무료 확장 기능입니다. 페이지 설정에서 열 수,홈통, 최대 너비,오프셋 및 색상을 설정한 다음 열을 사용하여 Figma 에서 디자이너가 수행하는 방식으로 섹션과 위젯을 정렬합니다.
그리드 라인 설정은 어디에서 찾을 수 있습니까?
Elementor 편집기에서 상단 표시줄에서 페이지 설정을 열고 설정 탭에 있습니다. 마스터 애드온 대시보드에서 확장을 활성화한 후 MA 배지가 있는 그리드 라인 섹션이 나타나며 토글 활성화 및 모든 그리드 옵션이 표시됩니다.
열 수와 홈통을 변경할 수 있나요?
예. 열 필드는 기본적으로 12 의 숫자를 사용하며,Gutter 슬라이더는 열 사이의 공간을 제어합니다. Max Width 와 Offset 은 그리드의 설치 공간을 형성합니다. 이들 각각은 반응형이므로 데스크톱,태블릿 및 모바일에서 서로 다른 값을 사용할 수 있습니다.
그리드 오버레이가 모든 페이지에 표시됩니까?
아니요. 그리드 라인은 페이지 설정 내부의 페이지당 설정이므로 오버레이를 원하는 페이지에서만 활성화합니다. 정렬을 마치면 활성화 토글을 끄면 해당 페이지는 다시 깨끗한 캔버스로 돌아갑니다.
Grid Line 연장은 무료인가요?
예. Grid Line 은 확장 프로그램 탭의 디스플레이 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. 확인 가격 페이지 무료 확장 프로그램 외에 Pro 플랜이 무엇을 추가하는지 확인하세요.
감싸는 #
그리드 라인 확장 기능은 Elementor 에게 모든 디자인 도구가 이미 가지고 있는 한 가지를 제공합니다: 실제 열 그리드를 기반으로 빌드할 수 있습니다. 대시보드에서 한 번 사용하도록 설정하고 필요할 때 페이지 설정에서 뒤집은 다음 열,홈통 및 색상을 조정하여 디자인 시스템의 나머지 부분을 찾아봅니다 마스터 애드온 위젯 및 확장 다음을 포함하여 이와 같은 더 많은 도구의 경우 어떤 요소 편집기의 레이블을 호버링합니다.
