모바일 장치에서 Divi의 열 스태킹 순서를 조정하는 방법
게시 됨: 2017-05-05Divi는 데스크탑에서 모바일 디스플레이로 이동할 때 특정 방식으로 열을 쌓거나 정렬하는 반응형 그리드를 기반으로 합니다. 열은 왼쪽에서 오른쪽으로 순서대로 쌓입니다. 따라서 데스크탑에 3개의 열이 있는 경우 모바일에서는 왼쪽(첫 번째) 열이 먼저 쌓이고 그 아래에 2열과 3열이 쌓입니다. 이것은 의미가 있으며 일반적으로 대부분의 웹 사이트에 필요한 것입니다. 그러나 때로는 데스크탑에서 멋지게 보이는 특정 디자인이 모바일에서 일관성 없는 콘텐츠 순서를 생성합니다. 이 경우 모바일에서 보다 일관된 사용자 환경을 만들기 위해 열 순서를 변경해야 합니다.
오늘은 모바일 장치에서 Divi의 열 스택 순서를 변경할 수 있는 두 가지 방법을 보여 드리겠습니다. 첫 번째는 Divi 내에서 "사용 안 함 켜기" 기능을 사용하여 특별히 모바일 장치용 콘텐츠의 대체 버전을 만드는 것입니다. 두 번째 방법은 맞춤 CSS를 사용하여 모바일에서 순서를 지정하는 클래스를 열에 추가하는 것입니다.
시작하자!
콘텐츠 만들기
YouTube 채널 구독
새 페이지에서 클릭하여 Divi Builder를 사용하고 Visual Builder를 시작합니다.
비주얼 빌더에서 2열(1/2 – 1/2) 레이아웃을 선택합니다.
행 내부의 첫 번째 열에 이미지 모듈을 추가합니다.
이미지 설정에서 이미지를 업로드하고 삽입합니다. (나는 unsplash.com의 770 x 433 이미지를 사용하고 있습니다)
그런 다음 행의 두 번째 열에 텍스트 모듈을 삽입합니다.
일반 텍스트 설정에서 콘텐츠 텍스트 상자에 텍스트를 추가합니다.
구하다
이제 이미지가 포함된 첫 번째 행과 텍스트가 포함된 두 번째 행이 있는 2개의 열이 있는 하나의 행이 있어야 합니다. 다음 이미지에서 열에 레이블을 지정했습니다.
시각적 빌더에서 행 복제 아이콘을 클릭하여 동일한 2개의 열이 있는 행을 복제하십시오.
두 번째 행(방금 생성한 복제 행)에서 이미지 모듈을 두 번째 열로 드래그하고 텍스트 모듈을 첫 번째 열로 드래그합니다.
이와 같이 각 행의 이미지와 텍스트 위치를 번갈아 가며 웹페이지에 콘텐츠를 표시하는 창의적이고 효과적인 방법이 될 수 있습니다. 그러나 모바일에서 열이 쌓일 때도 문제가 발생합니다. 브라우저 너비를 980px(모바일 장치의 경우 중단점) 미만으로 축소하면 각 행의 내용이 왼쪽에서 오른쪽으로 누적됩니다. 즉, 행의 첫 번째 열이 두 번째 열 위에 쌓입니다. 모바일 장치에서 콘텐츠 흐름을 일관되게 유지하려는 경우 문제가 발생할 수 있습니다. 현재 레이아웃에서 모바일의 콘텐츠 흐름은 다음 순서로 쌓입니다.
1열(이미지)
2열(텍스트)
1열(텍스트)
2열(이미지)
모바일을 위한 더 나은 레이아웃은 행 중 하나에서 열의 스택 순서를 변경하여 보다 일관된 콘텐츠 레이아웃을 얻는 것입니다.
모바일에서 열 스택 순서를 변경하는 두 가지 방법
1: Divi의 "비활성화 켜기" 기능을 사용하여 모바일에서 열 스택 순서 변경
Divi의 "사용 안 함" 기능을 사용하면 휴대폰, 태블릿 및 데스크탑 디스플레이에서 다양한 버전의 콘텐츠를 만들 수 있습니다. 몇 번의 클릭으로 모든 장치에서 콘텐츠 섹션을 숨기거나 표시할 수 있습니다.
이 예의 경우 두 번째 행은 데스크톱에서는 계속 표시되지만 모바일 장치에서는 숨겨야 합니다. 그런 다음 모바일에서만 볼 수 있도록 두 번째 행의 다른 버전을 만들어야 합니다.
Visual Builder를 사용하여 두 번째 행을 복제합니다.
복제된 새 행을 편집하기 전에 두 번째 행에서 행 설정을 엽니다.
일반 행 설정에서 휴대폰 및 태블릿에서 행을 비활성화하려면 선택합니다.
구하다
이제 두 번째 행이 모바일 장치에서 숨겨집니다. 다음으로 새로운 세 번째 행의 레이아웃을 모바일에서 원하는 열 순서로 변경해야 합니다.
텍스트 모듈 콘텐츠를 두 번째 열로 드래그하고 이미지 모듈을 첫 번째 열로 드래그합니다.
이제 세 번째 행의 일반 행 설정으로 이동하여 바탕 화면에서 행을 비활성화하는 확인란을 선택합니다.
구하다
이제 결과를 확인하십시오. 세 번째 열은 데스크톱에서 비활성화된 다음 모바일 장치에서 활성화된 것을 알 수 있습니다. 이렇게 하면 모바일에서 보다 일관된 레이아웃이 생성됩니다.
그게 다야!
콘텐츠의 특정 섹션을 비활성화 및 활성화하는 이 기능을 사용하면 모든 유형의 레이아웃을 쉽게 변경/재정렬할 수 있습니다.
또한 Visual Builder에서 페이지를 볼 때 Divi는 페이지에 숨겨진 콘텐츠를 편리하게 페이드하여 비활성화된 콘텐츠를 식별할 수 있습니다.
열과 행을 숨기기 위해 "Disabled On" 기능을 사용하는 것은 안전한 방법입니다. 그러나 이 작업을 너무 많이 수행하거나 콘텐츠가 많으면 페이지 편집이 혼란스러울 수 있습니다. 그리고 콘텐츠를 업데이트할 때 한 버전이 아닌 모든 버전에서 콘텐츠를 업데이트해야 합니다.
콘텐츠를 비활성화하고 활성화하는 것이 올바른 솔루션이 아닌 경우 CSS 클래스를 사용하여 모바일에서 콘텐츠를 주문하는 다른 방법이 있습니다.
2. CSS 클래스를 사용하여 모바일에서 열 스택 순서 변경
이를 위해 사용자 정의 CSS를 사용하여 모바일 디스플레이에서 원하는 대로 정렬할 클래스를 열에 추가할 수 있습니다.
그런 다음 WordPress 대시보드에서 Divi → Theme Customizer → Additional CSS로 이동하여 다음 CSS를 추가합니다.
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
}
저장 및 게시
방금 추가한 CSS를 보면 모든 CSS에 모바일 장치용 CSS만 사용하는 미디어 쿼리가 포함되어 있습니다(화면 크기가 980px 미만인 경우).
또한 "custom row"라는 첫 번째 클래스도 볼 수 있습니다. 이 클래스는 모바일에서 열 스택 순서를 변경하려는 행에 추가됩니다.
다음 4개 클래스("first-on-mobile", "second-on-mobile", "third-on-mobile" 및 "fourth-on-mobile")에는 order 속성과 할당된 숫자 값이 있습니다. 이러한 클래스는 모바일에 표시할 순서를 지정하기 위해 "사용자 정의" 행 내의 열에 추가됩니다.
이제 CSS가 준비되었으므로 이 클래스를 페이지에 적용해 보겠습니다.
지시에 따라 두 개의 행이 생성되었는지 확인하십시오. 또한 모바일 또는 데스크톱에서 비활성화된 행이 없는지 확인하십시오.
이 예에서는 모바일에서 두 번째 행의 열 순서를 변경합니다. 다음은 우리가 달성하고자 하는 것에 대한 예시입니다.
Visual Builder를 사용하여 두 번째 행에 대한 행 설정을 엽니다.
행 설정의 CSS 탭에서 다음을 추가합니다.
CSS 클래스 텍스트 상자에 "custom_row"를 추가합니다. (플렉스 상자에서 행을 래핑)
열 1 CSS 클래스 텍스트 상자에 "second-on-mobile"을 추가합니다(이렇게 하면 열 1의 순서가 모바일에서 두 번째로 표시되도록 변경됩니다. 클래스 이름은 기억하기 쉽도록 해야 합니다.)
열 2 CSS 클래스 텍스트 상자에 "first-on-mobile"을 추가합니다(이렇게 하면 열 2의 순서가 모바일에서 먼저 표시되도록 변경됩니다.)
참고: 각 열에 순서 지정 클래스를 추가하는 것이 중요합니다.
이제 결과를 확인해보자. 모바일에서 두 번째 행 열이 첫 번째 행과 동일하게 표시되도록 어떻게 변경되었는지 확인하십시오. 이것은 이미지 → 텍스트 → 이미지 → 텍스트의 일관된 흐름을 만듭니다.
CSS 클래스를 사용하여 레이아웃의 열 스택 순서 변경
이 동일한 방법을 사용하여 열 레이아웃의 순서를 변경할 수 있습니다. 맞춤 CSS를 사용하면 첫 번째, 두 번째, 세 번째 및 네 번째 배치 값을 추가할 수 있습니다. 예를 들어 다음과 같이 1/4 1/2 1/4 레이아웃의 순서를 변경하려는 경우:
이전에 수행한 것과 동일한 단계를 따르십시오. 행 설정의 CSS 탭에서 "custom_row" 클래스를 행에 추가하고 주문 클래스("first-on-mobile", "second-on-mobile", "third-on-mobile")를 추가합니다. 각 열에. 각 열에 클래스를 추가하여 모두 지정된 순서 값을 갖도록 하십시오.
그게 다야!
선호하는 방법
각 장치에 대해 고유한 레이아웃을 생성해야 하거나 모바일에서 열 순서 외에 콘텐츠를 변경할 계획이라면 Divi의 "비활성화됨" 기능을 사용하여 레이아웃을 사용자 정의해야 합니다.
콘텐츠를 변경하지 않고 모바일에서 열의 순서를 변경하기만 하고 콘텐츠의 여러 비활성화/활성화 버전을 저글링하는 것을 귀찮게 하고 싶지 않다면 CSS 방법의 이점을 누릴 수 있습니다.
SEO 고려 사항
검색 엔진이 페이지에서 비활성화되거나 숨겨진 콘텐츠를 처리하는 방법에 대해 수년 동안 많은 논쟁이 있었습니다. 특정 기기의 콘텐츠를 숨길 수 있지만 콘텐츠는 여전히 Google에서 크롤링할 수 있습니다. 이것은 중복 콘텐츠로 간주될 수 있으며 "사용 중지" 기능을 사용하면 페이지 순위에 부정적인 영향을 미칠 수 있습니다. 그러나 Google과 같은 검색 엔진은 반응형 레이아웃을 위해 콘텐츠가 숨겨져 있는지 식별하는 데 꽤 능숙합니다. 간단히 말해서, Google은 귀하가 다른 기기에 대해 콘텐츠를 복제하고 있는지 알고 있으며 이에 대해 귀하에게 불이익을 주지 않습니다. 악의적인 이유로 콘텐츠를 숨기지 않는 한 안전하게 사용할 수 있습니다.
마지막 생각들
열의 스택 순서를 변경할 수 있는 것은 매우 유용하고 때로는 필요합니다. 우리 모두는 모바일에서 콘텐츠 흐름의 일관성을 손상시키지 않으면서 데스크탑 디스플레이를 위한 고유한 디자인 레이아웃을 생성할 수 있는 능력이 필요합니다. Divi의 "Disable On" 기능을 사용하면 각 장치에 대해 완전히 다른 레이아웃을 만들 수 있습니다. 또한 몇 줄의 사용자 정의 CSS를 사용하여 행과 열에 클래스를 쉽게 추가하여 모바일 장치에 대해 원하는 대로 정렬할 수 있습니다.
이 게시물이 모바일 디스플레이를 더 잘 제어하는 데 도움이 되기를 바랍니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!