Divi를 사용하여 불규칙한 모양의 섹션 전환을 만드는 방법

웹사이트 디자인을 향상시키는 가장 좋은 방법 중 하나는 다양한 섹션 전환을 사용하는 것입니다. 이전 게시물에서 Divi 내장 옵션만 사용하여 이를 수행하는 방법을 보여주었습니다. 그러나 조금 더 고급스럽거나 개인화된 것을 만들려는 경우 불규칙한 모양의 섹션 전환도 만들 수 있습니다. 복잡성 때문에 이에 접근하는 가장 좋은 방법은 투명한 테두리가 있는 이미지를 사용하는 것입니다.

이 게시물에서 우리는 당신이 그것을 할 수 있는 방법을 보여줄 것입니다. Divi Builder 내에서 수행할 작업을 보여줄 뿐만 아니라 Photoshop을 사용하여 몇 단계를 거쳐 이미지에 투명 테두리를 만드는 방법도 보여줍니다.

예시 결과

놀랍도록 불규칙한 모양의 섹션 전환이 있는 레이아웃 샘플을 살펴보겠습니다.

알 수 있듯이 전체 사이트와 다른 섹션 내에서 이러한 투명한 테두리를 사용할 수 있습니다. 투명 테두리의 크기에 따라 공유하려는 다양한 콘텐츠에 맞게 섹션 내에 충분한 공간이 있어야 한다는 점을 기억하는 것이 중요합니다. 또한 다양한 섹션 사이에 좋은 균형을 만들 것입니다.

Divi를 사용하여 불규칙한 모양의 섹션 전환을 만드는 방법

YouTube 채널 구독

Photoshop으로 투명한 테두리 만들기

Photoshop에서 원하는 대로 원본 모양을 얻을 수 있습니다. GimpShop이라는 무료 대안을 선택할 수도 있습니다. 이 튜토리얼에서는 Photoshop을 사용할 것입니다.

포토샵 열기

컴퓨터에서 Photoshop을 열어 시작합니다.

이미지 열기

작업이 끝나면 작업할 이미지를 엽니다.

이미지를 두 번 클릭하고 레이어 만들기

Photoshop 내에서 이미지가 업로드되면 이미지 레이어를 두 번 클릭하고 새 레이어를 만듭니다(레이어 0).

다른 레이어 추가

투명 테두리를 추가하려면 다른 레이어도 필요하므로 아래 인쇄 화면에서 표시한 아이콘을 클릭하여 추가합니다. 레이어(레이어 1)를 만든 후에는 이미지가 포함된 레이어 위에 배치되었는지 확인합니다.

브러시 및 크기 선택

레이어 1을 활성화한 상태에서 브러시 아이콘을 클릭합니다.

일단 브러시에 사용되는 크기와 패턴을 원하는 대로 조정할 수 있습니다. 인터넷에는 수많은 무료 Photoshop 브러시가 있으므로 만들고 있는 웹 사이트 유형에 따라 적합한 브러시를 선택하십시오. 또한 불투명도가 100%로 설정되어 있는지 확인하십시오.

테두리에 브러시 사용 시작

브러시가 제자리에 있으면 투명하게 만들고 싶은 면에 브러시를 사용합니다. 나중에 모두 투명해질 수 있도록 브러시로 전체 테두리를 덮어야 합니다.

CTRL(Windows) 또는 Command(Mac) + 새 레이어 선택

완료되면 키보드에서 CTRL(Windows의 경우) 또는 Command(Mac의 경우)를 누르고 동시에 레이어 1을 클릭할 수 있습니다. Photoshop에서 해당 레이어에 추가한 모든 항목(이 경우 모양 테두리)이 선택되는 것을 볼 수 있습니다.

새 레이어를 보이지 않게 만들기

그런 다음 아래 인쇄 화면에 표시된 대로 눈을 제거하여 Layer 1을 보이지 않게 합니다.

이미지 선택 및 새 레이어 삭제

그런 다음 이미지가 포함된 레이어를 클릭하고 키보드의 삭제 버튼을 누릅니다. 그렇게 하면 테두리가 투명해지는 것을 볼 수 있습니다.

직사각형 선택 윤곽 도구를 선택하고 이미지를 클릭하십시오.

직사각형 선택 윤곽 도구를 클릭하고 이미지의 아무 곳이나 무작위로 누릅니다.

PNG로 이미지 저장

마지막으로 웹사이트에서 사용할 수 있도록 이미지를 PNG로 저장해야 합니다.

Divi에 배경 추가

위의 Photoshop 기술을 사용하여 Divi 웹 사이트 내에서 사용하려는 다른 이미지를 만들고 나면 나머지는 간단합니다. 생성한 이미지는 특정 섹션의 배경으로 사용됩니다. 다른 섹션에도 동일한 방법이 적용되므로 예제의 영웅 섹션을 구축하는 방법만 보여드리겠습니다.

새 표준 섹션 추가

새 페이지를 추가하고 Visual Builder로 전환한 다음 해당 페이지에 새 표준 섹션을 추가하십시오.

배경 이미지 업로드

영웅 섹션에 표시할 모든 모듈을 배치했으면 이 게시물의 이전 부분에서 생성한 이미지를 추가할 수 있습니다.

배경색 추가

이 작업을 완료하면 이미지의 투명한 부분에 표시할 색상을 결정할 수 있습니다. 이 예에서는 '#dddddd'를 배경색으로 사용했습니다. 색상이 이미지의 투명한 부분에 바로 나타나는 것을 즉시 확인할 수 있습니다.

패딩이 충분한지 확인

영웅 섹션에서 사용한 모듈의 수와 투명 테두리의 크기에 따라 사용자 지정 패딩을 추가해야 할 수도 있습니다. 다른 섹션 패딩 값을 가지고 놀고 어떤 것이 최상의 결과를 제공하는지 확인하십시오.

다음 섹션에 동일한 배경색 추가

다른 섹션이 서로 잘 섞이도록 하려면 다음 섹션에서도 영웅 섹션에서 사용한 것과 동일한 배경색을 사용하세요. 그렇다고 해서 다음 섹션에 단색 배경색을 사용해야 하는 것은 아닙니다. 두 섹션의 색상이 아름답게 혼합되기만 하면 그라디언트 배경을 사용할 수 있습니다.

예시

앞서 언급했듯이 이미지 테두리를 원하는 만큼 만들고 웹사이트 전체에서 창의적인 방식으로 사용할 수 있습니다. 맛보기를 위해 다음 예제 미리보기를 만들었습니다.

마지막 생각들

이 게시물에서는 불규칙한 모양의 섹션 전환을 쉽게 사용하는 방법을 보여 주었습니다. 이 방법을 사용하면 기본적으로 원하는 모든 종류의 섹션 전환을 만들 수 있습니다. Photoshop에서 몇 가지 단계로 이러한 불규칙한 모양을 만드는 방법을 보여주는 것 외에도 Divi Builder 내에서 작동하도록 만드는 방법도 보여주었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!