마스터 애드온에 의한 사용자 정의 요소 중단점 설정 및 구성 #
무료 Elementor에 대한 사용자 정의 중단점 마스터 애드온에서 플러그인 (3 사용자 정의 중단점 무료, 마스터 애드온 프로 무제한) 당신이 만들 수 있습니다 완벽하게 반응하는 웹사이트 레이아웃 elementor 의 내장 장치 뷰를 넘어서는 화면 크기에 최적화되었습니다. 이를 통해 모든 장치에서 일관되고 고품질의 사용자 경험을 보장합니다.
사용자 정의 요소 중단점을 사용하면 다음과 같은 작업을 수행할 수 있습니다:
- 필요한 만큼 사용자 지정 중단점 (화면 너비) 을 추가합니다 (Master Addons Pro 로 무제한).
- Small Mobile, Large Tablet 또는 사용자 정의 화면 크기와 같은 장치에 대한 특정 레이아웃, 글꼴 크기, 간격 및 정렬을 정의합니다.
- 정확한 픽셀 너비에서 Elementor의 기본 반응 동작을 재정의합니다.
사용자 정의 요소 중단점이란 무엇입니까? #
사용자 정의 Elementor 중단점은 레이아웃이 Elementor 의 내장 뷰가 다루지 않는 크기에 적응할 수 있도록 해주는 추가 사용자 정의 화면 너비입니다. Elementor 에는 최대 7 개의 장치 뷰 (모바일 세로,모바일 가로,태블릿 세로,태블릿 가로,노트북, 데스크탑 및 와이드스크린) 가 있습니다. 사용자 정의 중단점은 예를 들어 600px 소형 모바일 보기와 같이 선택한 정확한 최대 너비에 또 다른 하나를 추가합니다. 마스터 애드온은 무료 요금제에 최대 3 개의 사용자 정의 중단점을 추가하고 Pro 와 함께 무제한 중단점을 추가하여 코드를 건드리지 않고도 반응형 디자인을 정밀하게 제어할 수 있습니다.
그럼 이 기능을 어떻게 설정하고 구성하는지 살펴보겠습니다.
사용자 정의 요소 중단점 설정 #
빠른 답변: 사용자 지정 중단점 확장자를 에서 설치합니다 마스터 애드온 > 확장, 새 것을 엽니다 중단점 마스터 애드온 메뉴 아래에 페이지를 입력한 다음 a를 입력합니다 최대 너비 타겟팅하려는 각 장치 크기에 대한 픽셀 단위 (예를 들어,소형 모바일의 경우 600px).
다음 단계에 따라 사용자 지정 중단점을 설치하고 정의합니다.
1 단계: 확장 프로그램 설치 및 활성화 #
- 로 이동합니다 마스터 애드온 wordpress 대시보드의 메뉴.
- 로 이동 확장 탭.
- 찾기 “사용자 정의 중단점” 옵션을 선택하고 다운로드 버튼을 클릭하여 웹사이트에 설치하고 활성화하세요.
2단계: 중단점 설정에 액세스합니다 #
- WordPress 대시보드에서 마우스 위로 마우스를 가져가세요 마스터 애드온 메뉴.
- 라는 제목의 새로운 메뉴 항목 “브레이크포인트” 가 나타납니다. 그것을 클릭하십시오. 이것은 사용자 정의 중단점 입력 페이지로 리디렉션됩니다.
3 단계: 사용자 지정 중단점 추가 #
중단점 입력 페이지에서 활성 Elementor 중단점과 해당 픽셀 범위가 표시됩니다.
새로운 사용자 정의 중단점을 추가하려면 입력 필드를 사용하여 설정만 하세요 최대 너비 (픽셀 단위).
예를 들어, 소형 모바일 장치를 대상으로 하려면 입력하십시오 600px 최대 너비로.
저장 후 시스템은 다음 기본 중단점에 대한 Min-Width 를 자동으로 조정합니다. 위의 예에서 “Small Mobile” 중단점은 모든 화면에 적용됩니다 600px 보다 작거나 같습니다기본 “모바일” 중단점은 에서 시작됩니다 601px 그리고 Tablet breakpoint 의 최소 너비에서 끝납니다.
이 페이지에서 필요에 따라 중단점을 추가하거나 제거할 수 있습니다.
사용자 정의 요소 중단점 사용하기 #
마스터 애드온 설정에서 구성되면 사용자 정의 중단점을 Elementor 페이지 편집기에서 직접 사용할 수 있게 됩니다.
1 단계: Elementor 에서 반응형 모드 열기 #
아무 페이지나 가서 클릭하세요 “Elementor 로 편집하십시오.” 를 클릭합니다 반응형 모드 패널 왼쪽 하단에 아이콘(보통 모니터 및 휴대폰 아이콘)이 있습니다.
2 단계: 사용자 지정 중단점 선택 #
상단 바에는 사용자가 만든 사용자 지정 중단점 (예를 들어, “소형 모바일”) 을 포함하여 사용 가능한 모든 중단점이 표시됩니다.
클릭하세요 사용자 지정 중단점 편집기 보기를 해당 특정 화면 크기로 변경하려면.
3 단계: 사용자 지정 스타일 적용 #
어떤 요소 (예를 들어, Heading 위젯) 를 선택합니다.
요소의 로 이동 스타일 탭.
를 클릭합니다 반응형 아이콘 (데스크탑 모니터)와 같은 모든 스타일 설정 옆에 있습니다 타이포그래피 > 크기 또는 내용 > 정렬.
그 중단점에 대한 특정 값을 정의 (예를 들어, 글꼴 크기를 로 설정 20px). 이 값은 브라우저 너비가 해당 사용자 지정 중단점에 대해 정의된 범위 내에 있을 때만 적용됩니다.
4 단계: 저장 및 미리보기 #
필요한 모든 중단점에 대한 반응형 스타일을 정의한 후 를 클릭합니다 업데이트 페이지를 저장하려면.
페이지를 실시간으로 미리 보고 브라우저 창의 크기를 조정하여 사용자 정의 중단점이 정의한 고유한 스타일을 트리거하는 것을 확인하세요.
자주 묻는 질문 #
Elementor 에서 몇 개의 사용자 지정 중단점을 추가할 수 있습니까?
마스터 애드온은 무료 플랜에 최대 3개의 사용자 정의 중단점과 무제한 중단점을 추가합니다 마스터 애드온 프로. 각 중단점은 Elementor 의 내장 장치 보기 위에 레이어드된 추가 최대 너비 화면 크기입니다 완전 반응형 레이아웃.
Elementor 에서 사용자 지정 중단점을 추가하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 사용자 지정 중단점 확장자를 설치하고 마스터 애드온 메뉴 아래에서 새 중단점 페이지를 열고 픽셀 단위의 최대 너비를 입력합니다. — 예를 들어 소형 모바일의 경우 600px 를 저장한 후 새로운 중단점이 Elementor 의 반응형 모드에서 스타일 지정 준비가 완료된 상태로 나타납니다.
사용자 지정 중단점에 Elementor Pro 가 필요합니까?
아니요. 사용자 정의 중단점은 다음과 같습니다 마스터 애드온 플러그인elementor Pro 기능이 아닙니다. 무료 Custom Breakpoints 플러그인은 최대 3 개의 사용자 정의 중단점을 제공하며 더 높은 한도에서만 Master Addons Pro 가 필요합니다.
각 중단점에 대해 최소 너비를 설정해야 합니까?
아니요. Max-Width 만 입력합니다. Master Addon 은 다음 중단점의 Min-Width 를 자동으로 조정하여 범위가 겹치지 않도록 합니다. — 예를 들어 600px 소형 모바일 중단점은 기본 Mobile 보기를 601px 에서 시작하게 합니다.
사용자 지정 중단점으로 인해 내 웹 사이트 속도가 느려지나요?
아니요. 중단점은 가벼운 표준 CSS 미디어 쿼리와 Elementor 의 내장 반응형 스타일과 정확히 동일하게 로드하도록 설정한 스타일만 추가합니다. 일반에 따름 Elementor 속도 모범 사례 사용 중단점 수에 관계없이 페이지를 빠르게 유지합니다.
Elementor의 내장 중단점 및 라이브 데모와의 비교는 다음을 참조하세요 사용자 정의 중단점 플러그인 페이지.
