행은 섹션 내부에 배치할 수 있는 다양한 열 배열입니다. 모듈과 마찬가지로 행에는 행의 왼쪽 상단에 있는 설정 아이콘을 클릭하여 액세스할 수 있는 다양한 설정이 있습니다. 이 튜토리얼에서는 몇 가지 기능과 매우 독특한 레이아웃을 만드는 데 사용할 수 있는 방법을 살펴보겠습니다. 특히 라인 설정을 사용하여 생성된 레이아웃의 다양성을 크게 높일 수 있습니다. Divi 빌더는 모듈이 호스팅되는 구조를 생성하기 때문입니다.
콘텐츠 설정
배경 색상
배경 이미지는 라인 전체에 적용할 수 있습니다. 기본적으로 선의 배경색은 투명합니다.
배경 이미지
배경 이미지는 라인 전체에 적용할 수 있습니다.
MP4 배경 비디오
숲 동영상 선에 배경을 적용할 수 있습니다. 배경영상을 적용하려면 MP4, WEBM 영상을 업로드하고 동영상 시오.
배경 웹 비디오
숲 동영상 선에 배경을 적용할 수 있습니다. 배경 비디오를 적용하려면 MP4 및 WEBM 비디오를 다운로드하고 여기에 비디오를 입력해야 합니다.
배경 비디오 너비
동영상이 업로드되면 여기에 동영상의 너비를 입력해야 합니다. 비디오의 실제 너비와 같아야 합니다. 그렇지 않으면 배경의 위치가 올바르지 않습니다.
배경 비디오 높이
동영상이 업로드되면 여기에 동영상 높이를 입력해야 합니다. 비디오의 실제 높이와 같아야 합니다. 그렇지 않으면 배경 위치가 올바르지 않게 됩니다.
비디오 일시정지
클릭 시 비디오를 일시 중지하려면 이 옵션을 활성화하십시오.
열 배경 색상
행의 각 열에 대해 고유한 배경색을 할당할 수 있습니다.
열 배경 이미지
행의 각 열에 대해 고유한 배경 이미지를 할당할 수 있습니다.
관리 레이블
이렇게 하면 쉽게 식별할 수 있도록 생성기의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame 보기를 사용할 때 이러한 레이블은 인터페이스의 모듈 블록에 나타납니다. Divi 빌더.
설계 매개변수
시차 효과 사용
라인 배경 이미지에 시차 효과를 사용하려면 여기에서 활성화한 다음 원하는 시차 방법을 선택할 수 있습니다.
열 시차 효과
여기에서 행에 있는 특정 열의 배경 이미지에 대해 시차 효과를 사용할지 여부를 선택할 수 있습니다.
이 줄을 전체 너비로 설정
사용하도록 설정하면 행이 브라우저 창의 전체 너비에 걸쳐 표시됩니다(전체 너비 섹션과 유사). 멋진 전체 너비 열 레이아웃을 만드는 좋은 방법입니다.
맞춤 너비 사용
선에 사용자 지정 너비를 할당할 수도 있습니다. 예를 들어 페이지 흐름에 변형을 추가하고 한 행을 나머지 행보다 크게 만들고 싶다면 여기에 사용자 정의 너비 값을 입력할 수 있습니다.
맞춤 여백 너비 사용
거터의 너비는 기둥 사이의 거리를 설정합니다. 4부터 시작하여 0개의 여백 크기가 있습니다. 정의 거터 너비를 1로 설정하면 열 사이에 간격이 없습니다. 전체 너비 옵션과 결합하면 포트폴리오 전체 화면 모듈과 유사한 효과를 생성할 수 있습니다.
열 높이 균등화
이 옵션은 개별 열에 배경색을 적용한 경우 특히 유용한 옵션입니다. 이 옵션을 활성화하면 행의 모든 열이 동일한 높이 값을 갖게 됩니다.
맞춤 패딩
줄 채우기를 조정하려면 여기에서 수행할 수 있습니다.
맞춤 여백
행 여백을 조정하려면 여기에서 수행할 수 있습니다.
맞춤 열 패딩
행에서 특정 열의 여백을 조정하려는 경우 여기에서 수행할 수 있습니다.
열 맞춤 여백
행의 특정 열에 대한 여백을 조정하려면 여기에서 수행할 수 있습니다.
고급 설정
CSS ID
스타일시트에서 또는 앵커 링크를 사용하여 대상으로 지정하려는 경우 행에 CSS ID를 할당할 수 있습니다.
CSS 클래스
스타일시트에서 대상으로 지정하려는 경우 줄에 CSS 클래스를 할당할 수 있습니다.
열 CSS ID
스타일시트에서 또는 앵커 링크를 사용하여 대상으로 지정하려는 경우 행의 특정 열에 CSS ID를 할당할 수 있습니다.
CSS 클래스 열
스타일시트에서 대상으로 지정하려는 경우 행의 특정 열에 CSS 클래스를 할당할 수 있습니다.
전위
적용할 CSS 항목: 메인 라인 div 이전.
주요 요소
메인 라인 div에 적용할 CSS 입력입니다.
애프터
적용할 CSS 항목: 메인 라인 div 이후.
프론트 컬럼
적용할 CSS 입력: 지정된 열 div 앞.
열 주요 요소
지정된 div 열에 적용할 CSS를 여기에 입력합니다.
이후의 열
적용할 CSS 항목: 지정된 열 div 뒤.
시계
이 옵션을 사용하면 라인 모듈이 표시되는 장치를 제어할 수 있습니다. 태블릿, 스마트폰 또는 데스크톱 컴퓨터에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 이것은 다른 장치에서 다른 모듈을 사용하려는 경우 또는 페이지에서 특정 요소를 제거하여 모바일 디자인을 단순화하려는 경우에 유용합니다.
튜토리얼을 실행에 옮기기
이제 모든 설정을 다루었으므로 몇 가지를 테스트하여 각 설정을 창의적으로 사용할 때 무엇이 가능한지 보여드리겠습니다. 이 예에서는 전체 화면 행 설정을 소개로 다루겠습니다. "전체 화면" 라인을 생성하는 옵션은 세트에서 가장 다양한 옵션 중 하나입니다. 이렇게 하면 전체 화면(또는 FullWidth) 섹션과 유사하게 라인의 너비가 브라우저 가장자리까지 확장됩니다. 그러나 Fullwidth 섹션과 달리 FullWidth 행은 열 구조를 가질 수 있으며 모든 모듈을 포함할 수 있습니다! 아래 예에서는 열이 4개인 행을 만들고 각 열에 정사각형 이미지를 추가했습니다. 그런 다음 "이 선을 전체 너비로 만들기"를 활성화하여 선을 브라우저 창의 가장자리까지 확장했습니다.
그런 다음 행 열 사이의 간격을 제거하기 위해 "Gutter" 크기를 "1"로 줄였습니다.
마지막으로 "Custom padding" 옵션으로 상단과 하단 값을 "0"으로 변경하여 라인 위와 아래의 패딩을 제거했습니다.
그 결과 전체 행 변환이 이루어지며, 일반적인 4열 이미지 행을 아래의 녹색 섹션과 비교하여 멋지게 보이는 전체 너비의 풀 블리드 이미지 갤러리로 바꿉니다. 사용자 지정 열 배경색과 텍스트 기반 모듈을 사용하여 이와 동일한 효과를 만들 수도 있습니다. 가능성은 무한합니다!
