Divi로 행 테두리를 가로로 겹치는 방법

상호 작용하는 페이지 디자인을 만드는 것이 항상 쉬운 일은 아닙니다. 사용자 경험, 디자인 원칙 및 디자인 트렌드에 중점을 두는 것 외에도 회사 브랜딩과 일치하고 방문자를 첫눈에 매료시키는 무언가를 만들어야 합니다.

블로그를 검색하면 Divi 및 Divi의 다양한 내장 옵션을 사용하여 웹 디자인에 접근할 수 있는 수많은 창의적인 방법을 찾을 수 있습니다. 오늘 우리는 그 목록에 또 다른 창의적인 접근 방식을 추가하고 있습니다. 멋진 디자인을 만들기 위해 줄 테두리를 창의적으로 겹치는 방법을 보여 드리겠습니다. 모든 화면 크기에서 동일한 유형의 디자인을 사용하도록 하고 있습니다.

가자!

YouTube 채널 구독

시사

처음부터 예제를 만들겠지만 본격적으로 들어가기 전에 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.

무료 Mightype 글꼴 다운로드

가장 먼저 해야 할 일은 AF studio에서 무료 Mightype 손글씨 글꼴을 다운로드하는 것입니다. 다음 링크로 이동하여 이메일을 통해 무료 다운로드를 활성화하십시오.

새 섹션 추가

간격

이전 단계에서 언급한 무료 글꼴을 다운로드했으면 계속해서 새 페이지를 만들 수 있습니다. 그런 다음 Visual Builder를 활성화하고 새 페이지의 첫 번째 섹션을 열고 몇 가지 사용자 지정 패딩을 추가합니다.

• 상단 패딩: 250px
• 하단 패딩: 250px

새 행 추가

열 구조

총 2개의 행이 필요합니다. 첫 번째 것으로 시작하고 완료되면 나중에 복제합니다. 다음 열 구조를 사용하여 섹션에 새 행을 추가합니다.

열 1 그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 다음 열 1 그라데이션 배경을 추가하십시오.

• 색상 1: #ffffff
• 색상 2: rgba(0,255,233,0.25)
• 기둥 그라데이션 유형: 방사형
• 열 방사형 방향: 왼쪽
• 컬럼 시작 위치: 59%
• 열 끝 위치: 59%
• 배경 이미지 위의 기둥 배치 그라데이션: 예

열 1 배경 패턴

계속해서 다음 패턴을 컴퓨터에 저장하고 열 1 배경 이미지로 업로드하십시오.

패턴을 업로드했으면 다음 배경 이미지 설정을 사용하십시오.

• 열 배경 이미지 크기: 실제 크기
• 열 배경 이미지 반복: 공백

행 정렬

오른쪽 행 정렬도 활성화하십시오.

사이징

또한 이 행에 대해 몇 가지 사용자 지정 크기 설정을 사용하고 있습니다.

• 사용자 정의 너비 사용: 예
• 맞춤 너비: 950px

간격

다음은 다음에 추가해야 하는 간격 값입니다.

• 하단 여백: 100px
• 오른쪽 여백: -30px(태블릿 및 휴대폰)
• 상단 패딩: 0px
• 하단 패딩: 0px

국경

마지막으로 행의 상단, 왼쪽 및 하단에 테두리를 추가합니다.

• 테두리 너비: 14px
• 테두리 색상: #000000
• 왼쪽 테두리 스타일: 이중

제목 텍스트 모듈 추가

H2 사본 추가

이제 모듈 추가를 시작할 수 있습니다! 제목 텍스트 모듈을 추가하고 사본이 H2인지 확인하십시오.

배경색

텍스트 모듈에 흰색 배경색을 추가하여 행의 왼쪽 테두리를 중단할 것입니다.

Mightype 글꼴 업로드

다음 컴퓨터에서 Mightype 글꼴을 찾아 글꼴 목록에서 업로드 버튼을 클릭하여 글꼴 라이브러리에 업로드합니다.

Mightype 글꼴 파일을 선택하고 글꼴 이름을 지정한 다음 글꼴 라이브러리에 업로드합니다.

H2 텍스트 설정

새 글꼴을 추가했으면 계속해서 H2 텍스트 설정을 변경합니다.

• 제목 2 글꼴: Mightype
• 제목 텍스트 색상: #000000
• 제목 2 텍스트 크기: 150px(데스크톱), 100px(태블릿), 60px(전화)

간격

행 경계와 겹치려는 각 모듈에 대해 음수 여백을 추가해야 합니다. 이 음수 여백은 모듈이 배치된 행이 아니라 해당 모듈에만 영향을 미칩니다. 추가해야 하는 음수 여백은 사본에 사용된 문자 수에 따라 다릅니다.

• 상단 여백: 200px
• 하단 여백: 100px
• 왼쪽 여백: -35%
• 상단 패딩: 50px
• 하단 패딩: 50px

혼합 모드

그리고 텍스트 모듈 배경색이 행의 테두리에만 영향을 미치고 열 1 배경에는 영향을 미치지 않도록 하려면 필터 설정에서 '곱하기' 혼합 모드를 활성화하십시오.

설명 텍스트 모듈 추가

배경색

제목 텍스트 모듈 바로 아래에 흰색 배경색으로 설명 텍스트 모듈을 추가하십시오.

텍스트 설정

텍스트 설정으로 이동하여 다음과 같이 변경합니다.

• 텍스트 크기: 22px(데스크톱), 18px(태블릿), 15px(전화)
• 텍스트 줄 높이: 1.8em
• 텍스트 방향: 중앙

사이징

다음으로 이 텍스트 모듈의 크기를 '96%'로 줄이십시오.

간격

약간의 간격도 추가하십시오.

• 하단 여백: 200px
• 왼쪽 여백: -50%
• 상단 패딩: 20px
• 하단 패딩: 20px

혼합 모드

여기에서도 '곱하기' 혼합 모드를 사용하십시오.

복제 행

첫 번째 행 수정을 완료했습니다! 페이지의 반대편에 동일한 결과를 생성해 보겠습니다. 시간을 절약하기 위해 이미 있는 행을 복제하고 도중에 일부 변경을 수행합니다.

행 설정 변경

열 1 그라데이션 배경

가장 먼저 변경해야 할 것은 열 1 그라데이션 배경입니다.

• 색상 2: rgba(255,187,0,0.33)
• 기둥 반경 방향: 오른쪽

행 정렬

행이 반대쪽에 나타나도록 하기 위해 왼쪽 행 정렬을 선택합니다.

간격

간격 설정도 조정하고 있습니다.

• 왼쪽 여백: -25%(태블릿 및 휴대폰)

국경

행에 적용된 왼쪽 테두리를 제거하고 대신 오른쪽에 적용합니다.

• 오른쪽 테두리 너비: 14px
• 오른쪽 테두리 색상: #000000
• 오른쪽 테두리 스타일: 이중

제목 텍스트 모듈 설정 변경

간격

다음 제목 텍스트 모듈의 간격 설정을 변경합니다.

• 왼쪽 여백: 52%(데스크톱 및 태블릿), 58%(전화)
• 오른쪽 여백: -52%(데스크톱 및 태블릿), 58%(전화)

설명 텍스트 설정 변경

간격

마지막으로 설명 텍스트 모듈에는 다른 간격 값도 필요합니다.

• 왼쪽 여백: 50%
• 오른쪽 여백: -50%

시사

이제 다양한 단계를 거쳤으므로 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.

마지막 생각들

Divi의 기본 제공 옵션을 사용하여 행 테두리를 겹치면 웹 사이트를 사용자 정의하고 찾고 있던 개인화할 수 있습니다. 이 게시물에서 우리는 정확히 그 방법을 보여주었습니다. 우리는 처음부터 아름다운 예를 다시 만들었습니다. 이 예는 모든 화면 크기에서 멋지게 보이며 우리는 Divi의 내장 옵션만 사용했습니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!