Divi의 하단 바닥글 막대에 창의적인 배경 디자인을 추가하는 방법

Divi의 하단 바닥글 표시줄은 웹사이트의 작지만 중요한 부분입니다. 그리고 특정 페이지 레이아웃의 경우 해당 하단 표시줄에 창의적인 최종 터치를 추가해야 할 수도 있습니다.

이 튜토리얼에서는 Divi의 하단 바닥글 바에 사용자 정의 배경 디자인을 추가하는 방법을 보여 드리겠습니다. 하단 바닥글 막대의 기본 배경색을 제거하고 섹션에 사용자 지정 여백을 추가하여 섹션의 디자인 설정을 활용하여 멋진 배경 디자인을 만들 수 있습니다.

시작하자.

엿보기

다음은 이 튜토리얼을 사용하여 구축할 수 있는 몇 가지 예제 디자인을 살짝 엿본 것입니다.

테마 커스터마이저에서 하단 푸터 바 커스터마이징하기

하단 바닥글 막대 뒤에 사용자 정의 배경을 추가하기 전에 사용 중인 기본 배경색을 제거해야 합니다.

테마 사용자 정의 도구로 이동하여 바닥글 > 하단 표시줄로 이동합니다. 그런 다음 배경색을 완전히 투명하게 변경합니다.

하단 바 뒤에 여전히 바닥글 배경색이 있기 때문에 미리보기에서 많은 변화를 눈치채지 못할 수도 있습니다. 바닥글 배경색은 바닥글 > 레이아웃에서 변경할 수 있지만 해당 배경색을 대체로 활성 상태로 두는 것이 좋습니다. 사용자 정의 배경은 페이지별로 섹션을 사용하여 하단 표시줄에 추가됩니다. 따라서 이 배경을 사용하면 하단 표시줄 콘텐츠가 사용자 정의 배경이 없는 페이지에 배경을 갖게 됩니다.

배경 디자인을 더 어둡게 하려는 경우 하단 표시줄 텍스트 색상과 소셜 아이콘 색상을 흰색으로 변경할 수도 있습니다. 이렇게 하면 콘텐츠를 더 읽기 쉽게 만들 수 있습니다.

하단 바의 단면 배경 디자인 만들기

바닥글 하단 막대에 투명한 배경이 있으므로 섹션 배경을 디자인하고 막대 뒤에 배치할 준비가 되었습니다.

아직 만들지 않았다면 새 페이지를 만들고 "처음부터 만들기"를 선택합니다. 그런 다음 섹션 행에 대해 한 열 레이아웃을 삽입합니다.

배경 디자인을 위한 섹션과 행만 필요하기 때문에 행에 모듈을 추가할 필요가 없습니다.

그런 다음 행 설정으로 이동하여 다음과 같이 간격을 추가합니다.

맞춤 여백: 위쪽 0px, 아래쪽 0px
맞춤 패딩(데스크톱): 상단 80px, 하단 80px
맞춤 패딩(태블릿): 상단 100px, 하단 100px

이 간격은 배경 디자인을 위해 추가할 섹션 구분선에 필요한 공간을 유지하면서 섹션에 약간의 높이를 제공하는 데 필요합니다.

이제 섹션 설정으로 이동하여 다음과 같이 간격을 업데이트합니다.

사용자 정의 여백(데스크톱): -55px 하단
사용자 정의 여백(태블릿): -94px 하단
맞춤 패딩: 상단 0px, 하단 0px

-55px 하단 여백은 하단 바를 섹션 영역으로 끌어당겨 섹션에 추가한 디자인이 하단 바 뒤에 놓이도록 합니다. 기본적으로 하단 막대는 데스크톱에서 높이가 54px이고 태블릿에서 높이가 약 94px이므로 태블릿의 경우 더 큰 음수 여백이 필요합니다.

상단 및 하단 패딩을 제거하면 나중에 추가할 섹션 구분선에 필요한 공간이 최대화됩니다.

하단 디바이더 추가

다음으로 섹션에 하단 구분선을 추가하여 다음과 같이 바닥글 콘텐츠의 프레임을 지정합니다.

하단 구분선 스타일: 스크린샷 참조
디바이더 색상: #121212
디바이더 높이: 120px(데스크탑), 150px(태블릿), 150px(스마트폰)
디바이더 수평 반복: 0.9x(데스크톱), 0.5x(태블릿), 0.5x(스마트폰)
디바이더 플립: 수직

지금은 구분선 배열이 섹션 콘텐츠 아래로 설정되어 있어도 하단 바 콘텐츠(텍스트 및 소셜 아이콘)가 구분선 뒤에 숨겨져 있습니다. 이는 하단 바닥글이 기술적으로 섹션 콘텐츠의 일부가 아니기 때문입니다. 이 문제를 해결하려면 섹션에 사용자 지정 z-색인을 추가하여 하단 바닥글 뒤에 위치하도록 해야 합니다.

고급 탭에서 다음 사용자 정의 CSS 스니펫을 기본 요소에 추가합니다.

z-index: 0;

이제 바닥글 막대 콘텐츠가 섹션 위에 배치되고 바닥글 막대를 구성하는 멋진 배경 디자인이 생겼습니다.

모바일에서도 잘 조정됩니다.

이 기본 구조가 있으면 구축할 수 있는 멋진 섹션 디자인을 갖게 됩니다. 이를 염두에 두고 이 섹션을 라이브러리에 저장하여 이 구조를 현재 디자인을 탐색하기 위한 시작점으로 사용할 수 있습니다.

이제 새로운 디자인을 탐색할 준비가 되었습니다. 하단 디바이더를 다양한 스타일과 색상으로 변경하여 수많은 배경 프레임 디자인을 생성할 수 있습니다. 선택한 디바이더 스타일에 따라 디바이더 높이와 수평 반복 값을 추가로 조정해야 할 수도 있습니다.

다음은 몇 가지 예입니다.

사용자 정의 배경 그라디언트와 함께 상단 구분선 사용

하단 바닥글에 대한 배경 프레임 디자인으로 단일 하단 구분선을 사용하는 것은 다소 제한적입니다. 그러나 상단 구분선을 프레임 디자인으로 사용하는 경우 섹션에 사용자 정의 배경 그라디언트를 사용할 수 있습니다. 이것은 탐색할 새로운 문을 열 것입니다.

섹션 설정으로 이동하여 하단 구분선 스타일을 없음으로 설정합니다. 그런 다음 섹션 배경으로 배경 그라디언트를 추가합니다.

이제 섹션에 상단 구분선 스타일을 추가하여 완전히 새로운 모습을 만들 수 있습니다.

다음은 그라데이션 배경과 구분선 스타일을 변경하는 것만으로 가능한 몇 가지 디자인 예입니다.

여러 가지 빛깔의 테두리 프레임 디자인을 위한 배경 그라디언트와 구분선 결합

이제 한 단계 높여야 할 때입니다. 섹션과 행 내에서 고유한 배경 디자인을 만들 수 있는 가능성이 많다는 것을 기억하십시오. 따라서 이 마지막 예에서는 이러한 기능을 결합하여 완전히 독특한 디자인을 만드는 방법을 보여 드리겠습니다.

이 디자인을 바로 시작하려면 Visual Builder에서 새 섹션을 클릭하여 추가하고 라이브러리에서 추가 탭을 선택한 다음 섹션 레이아웃을 선택하여 라이브러리에 저장한 섹션을 사용합니다.

섹션이 페이지에 추가되면 사용자 정의할 준비가 됩니다.

우선 섹션 설정으로 이동하여 다음을 업데이트하십시오.

배경 그라데이션 왼쪽 색상: #29c4a9
배경 그라데이션 왼쪽 색상: #2b87da

기울기 방향: 90deg
시작 위치: 50%
종료 위치: 0%

이제 다음과 같이 상단 구분선을 추가합니다.

상단 구분선 스타일: 스크린샷 참조
구분선 색상: #ffffff
디바이더 높이: 120px(데스크탑), 150px(태블릿), 150px(스마트폰)
디바이더 수평 반복: 0.9x(데스크톱), 0.5x(태블릿), 0.5x(스마트폰)
디바이더 플립: 수직

이러한 구분선 설정은 하단 구분선을 완전히 미러링하여 하단 구분선을 둘러싸는 테두리를 만듭니다. 디바이더 자체가 흰색이기 때문에 배경 그라디언트가 하단 디바이더의 확장이라는 인상을 남깁니다.

이제 행 설정으로 이동하여 다음과 같이 배경 그라디언트를 추가합니다.

배경 그라데이션 왼쪽 색상: #df52ff
배경 그라데이션 왼쪽 색상: #2b87da

기울기 방향: 90deg
시작 위치: 50%
종료 위치: 0%

배경에 대한 각 색상 세그먼트의 너비를 동일하게 하려면 행의 사용자 정의 너비를 50%로 지정합니다.

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

마지막 생각들

Divi의 하단 바닥글 바에 대한 사용자 정의 배경 디자인을 갖는 것은 페이지에 상쾌한 추가가 될 수 있습니다. 필요한 것은 페이지 하단에 있는 섹션에 대한 몇 가지 사용자 정의입니다. 불행히도 디자인은 단일 페이지로 제한되어 있으며 사이트 전체에 적용할 수 없습니다. 이것이 바닥글 배경색이 대체로 사용되는 이유입니다. 그러나 섹션을 라이브러리에 저장하면 원하는 페이지에 쉽게 놓을 수 있습니다. 다음 프로젝트에서 사용할 미리 만들어진 레이아웃에 추가할 수도 있습니다. 페이지 맨 아래에 섹션을 추가하기만 하면 됩니다. 유용하게 사용하실 수 있기를 바랍니다!

또한 유사한 기술을 사용하여 탐색 메뉴를 구성하는 데 관심이 있을 수 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!