Divi로 독특한 프레임 디자인을 만들기 위한 재사용 가능한 레이아웃

Divi를 사용하여 행에 대한 고유한 프레임 디자인을 구축하는 것은 페이지 콘텐츠를 창의적으로 준비하는 유용하고 재미있는 방법이 될 수 있습니다. Divi의 섹션 구분선을 컴팩트한 행 구조와 결합하여 콘텐츠 프레임을 위한 수많은 디자인 가능성을 탐색할 수 있습니다. 이 기술은 이전 튜토리얼이나 미리 만들어진 레이아웃에서 이미 보았을 것입니다. 하지만 오늘은 이 디자인 기법을 직접 탐색할 수 있는 쉬운 방법을 보여 드리겠습니다. 이 튜토리얼에서는 라이브러리에 저장할 수 있는 재사용 가능한 섹션 레이아웃을 빠르게 구축하는 방법을 보여 드리겠습니다. 그런 다음 해당 레이아웃을 사용하여 새로운 프레임 디자인과 색 구성표를 탐색할 수 있습니다. 레이아웃은 고유한 디자인으로 행을 구성하여 작동하므로 모든 열 구조와 모듈을 행 내부에서 사용할 수 있습니다.

시작하자.

재사용 가능한 프레임 디자인 레이아웃 만들기

일을 시작하기 위해 1열 레이아웃으로 새 섹션을 생성해 보겠습니다. 이 시점에서 모듈을 추가할 필요가 없습니다. 대신 행과 섹션을 먼저 디자인하여 나중에 원하는 내용으로 행을 채울 수 있습니다.

행 디자인

다음과 같이 행 설정을 업데이트합니다.

배경색: #333333
행 정렬: 가운데
사용자 정의 너비: 775px
거터 폭: 2
맞춤 패딩: 상단 130px, 하단 130px, 왼쪽 50px, 오른쪽 50px
맞춤 여백: 위쪽 0px, 아래쪽 0px

단면 설계

다음과 같이 섹션 설정을 업데이트합니다.

배경색: #ffffff
상단 구분선 스타일: 스크린샷 참조
상단 구분선 색상: #ffffff
하단 구분선 스타일: 스크린샷 참조
하단 구분선 색상: #ffffff

다음으로 위쪽 및 아래쪽 패딩을 0px로 설정하고 다음과 같이 테두리를 사용하여 위쪽 및 아래쪽 공간을 만듭니다.

맞춤 패딩: 상단 0px, 하단 0px
상단 테두리 너비: 5vw
상단 테두리 색상: #ffffff
하단 테두리 너비: 5vw
하단 테두리 색상: #ffffff

위쪽 및 아래쪽 테두리를 사용하여 섹션의 간격을 만들면 행과 겹치는 섹션 구분선에 사용할 수 있는 공간이 최대화됩니다. 이 방법을 사용하면 디자인에 대한 디바이더 높이를 선택할 수 있습니다.

라이브러리에 레이아웃 저장

이것이 프레임 행 디자인의 기본 레이아웃 구조에 대한 것입니다. 이 시점에서 향후 디자인을 위해 섹션 레이아웃을 사용하기 위해 이 섹션을 Divi 라이브러리에 저장하려고 합니다.

섹션 메뉴에서 라이브러리에 저장 아이콘을 클릭합니다.

그런 다음 레이아웃 이름(예: "행 프레임 레이아웃")을 입력하고 라이브러리에 저장 버튼을 클릭합니다.

프레임 디자인 완성 #1

이제 향후 작업을 위해 섹션 레이아웃을 저장했으므로 행에 콘텐츠를 추가하여 첫 번째 디자인 예제를 완성해 보겠습니다.

열 구조 변경

이 디자인의 경우 6열 이미지 갤러리를 추가하는 것이 좋을 것 같습니다. 작은 열 구조를 사용하면 좁은 행 내부에 멋지게 구성된 작은 이미지 클러스터를 만들 수 있습니다.

이렇게 하려면 먼저 행 구조를 6열 레이아웃으로 변경합니다.

행에 콘텐츠 추가

그런 다음 각 열에 세 개의 이미지 모듈(이미지 포함)을 추가합니다. 크기/크기가 다른 세로 방향(가로가 아닌)이 더 많은 이미지를 사용하고 있습니다.

다음은 최종 디자인입니다.

보너스 디자인 팁

더 많은 프레임 디자인 가능성을 계속 탐색하기 전에 프레임을 페이지의 한쪽으로 확장하는 쉬운 트릭을 지적하고 싶었습니다. 이렇게 하려면 섹션 설정으로 이동하여 다음과 같이 배경 그라디언트를 추가합니다.

배경 그라데이션 왼쪽 색상: #333333
배경 그라데이션 오른쪽 색상: #ffffff
기울기 방향: 90deg
시작 위치: 50%
최종 위치: 0%

이 디자인을 확인하십시오.

다양한 프레임 디자인 및 콘텐츠에 대한 레이아웃 사용자 지정

이 단순한 레이아웃의 흥미로운 가능성은 말할 것도 없이 많습니다. 색 구성표, 구분선 스타일, 열 레이아웃 및 모듈 내용을 사용자 지정하여 모든 종류의 다양한 레이아웃 디자인을 만들 수 있습니다. 또한 "찾기 및 바꾸기"와 같은 멋진 Divi 기능을 사용하여 몇 번의 클릭으로 광범위한 색 구성표를 변경할 수 있습니다.

레이아웃 업데이트를 위한 기본 프로세스는 다음과 같습니다.

1. 페이지에 저장된 섹션 레이아웃 로드
2. "찾기 및 바꾸기"를 사용하여 섹션의 색 구성표를 업데이트합니다.
3. 구분선 스타일 변경
4. 새로운 배경 및 열 구조로 행을 사용자 정의하십시오.
5. 열에 모듈 추가

이 과정에서 새로운 디자인을 탐색하는 것은 꽤 재미있을 것입니다! 계속하자.

프레임 디자인 #2

이 다음 디자인에서는 이전에 만든 저장된 섹션 레이아웃을 사용할 것입니다. 이렇게 하려면 Visual Builder에서 새 섹션을 클릭하여 추가합니다. 그런 다음 라이브러리에서 추가 탭을 선택하고 목록에서 섹션 레이아웃을 클릭합니다.

이제 새로운 디자인을 위해 섹션을 사용자 정의할 준비가 되었습니다.

이 레이아웃에 사용된 색 구성표를 변경하기 위해 찾기 및 바꾸기 기능을 사용하여 일부 Divi 디자인 기능을 불러올 수 있습니다. 복제된 섹션의 섹션 설정으로 이동하여 배경색을 마우스 오른쪽 버튼으로 클릭하고 "찾기 및 바꾸기"를 선택합니다.

찾기 및 바꾸기 모달에서 다음을 업데이트합니다.

내: 이 섹션
다음으로 교체: #443850
모두 바꾸기 선택

이렇게 하면 섹션 배경, 테두리 및 구분선에 사용된 흰색이 새 색상으로 바뀝니다.

이제 새로운 구분선 스타일로 섹션 설정을 업데이트하십시오.

그런 다음 흰색 배경색과 상자 그림자로 행 설정을 업데이트하여 행에 대한 새 프레임 디자인을 완성합니다.

내용의 경우 일부 광고 문구가 포함된 5열 레이아웃을 사용해 보겠습니다. 계속해서 행의 열 레이아웃을 5열 레이아웃으로 업데이트하십시오.

그런 다음 첫 번째 열에 광고 문구를 추가합니다. 기본 콘텐츠 텍스트를 제거하고 제목 텍스트만 남겨둡니다. 그런 다음 광고 이미지를 별표 아이콘으로 바꿉니다. 다음과 같이 디자인 설정을 업데이트합니다.

아이콘 색상: #7d8491
아이콘 글꼴 크기: 80px
텍스트 방향: 중앙

블러브 모듈을 복제하고 다음과 같이 설정을 업데이트합니다.

아이콘 색상: #8cd845
아이콘 글꼴 크기: 50px

이제 각 열에 3개의 모듈이 있는 5개의 열 전체에 걸쳐 해당 두 모듈을 복제하거나 복사하여 붙여넣습니다.

다음은 최종 디자인입니다.

프레임 디자인 #3

세 번째 프레임 디자인의 경우 이전에 두 번째 디자인에서 했던 것처럼 먼저 저장된 섹션 레이아웃을 로드해야 합니다.

그런 다음 섹션 배경색에서 찾기 및 바꾸기(이전 디자인에서와 같이)를 사용하여 섹션 배경, 구분선 및 테두리에 사용된 흰색을 멋진 파란색으로 바꿀 수 있습니다. 이렇게 하려면 섹션 설정으로 이동하여 배경색을 마우스 오른쪽 버튼으로 클릭하고 찾기 및 바꾸기를 선택합니다. 그런 다음 다음을 업데이트합니다.

내: 이 섹션
다음으로 대체: #1e3888
모두 바꾸기 선택

그런 다음 새로운 상단 및 하단 구분선 스타일(구름)로 섹션 구분선을 업데이트합니다.

다음으로 행 설정으로 이동합니다. 다음과 같이 행에 그라데이션 배경을 지정합니다.

배경 그라데이션 왼쪽 색상: 기본값(#2b87da)
배경 그라데이션 오른쪽 색상: #1E3888(섹션 배경과 동일한 색상)
그라디언트 유형: 방사형(행에 둥근 "구름 같은" 느낌을 주기 위해)
끝 위치: 83%(행 가장자리를 약간 숨기기 위해)

이제 프레임 행에 콘텐츠를 추가하기만 하면 됩니다. 행에 행동 유도 모듈을 추가하고 다음과 같이 설정을 업데이트하겠습니다.

버튼을 표시하려면 링크 입력 상자에 "#"을 추가하십시오.
배경색 사용: 아니요

제목 텍스트 색상: #ffc338
버튼 텍스트 색상: #ffc338

다음은 최종 디자인입니다.

모바일은 어떻습니까?

궁금하시다면. 다음은 모바일 장치에서 디자인이 어떻게 보이는지 보여줍니다.

마지막 생각들

이 튜토리얼에서 만든 프레임 디자인은 완전히 세련된 디자인 조각을 보여주기보다는 디자인 가능성을 강조하기 위한 것입니다. 그렇기 때문에 프레임 디자인에 집중하고 기본적인 내용 예시를 활용했습니다. 다른 섹션 구분선, 색 구성표 및 콘텐츠를 사용하여 새로운 디자인을 탐색하도록 최소한 영감을 줄 수 있기를 바랍니다.

나는 당신의 의견을 듣기를 기대합니다.

건배!