Divi의 내장 옵션만 사용하여 복사본에 그라디언트 텍스트 색상을 적용하는 방법

어떤 종류의 웹사이트를 만들고 있든, 카피와 콘텐츠를 강조하는 것은 여전히 ​​최우선 순위 중 하나입니다. Divi의 기본 제공 옵션을 사용하면 거기에 도달할 수 있는 방법이 많이 있습니다. 가능한 한 가지 방법은 복사본에 그라디언트 텍스트 색상을 적용하는 것입니다. 이것은 특히 웹사이트의 나머지 부분을 깨끗하고 최소한으로 유지하는 경우 웹사이트에 색상을 추가하는 훌륭한 접근 방식입니다. 여백의 균형을 맞추는 데 도움이 되며 웹사이트에 신선한 공기를 불어넣을 수 있습니다.

이 자습서에서는 Divi의 기본 제공 옵션만 사용하여 텍스트에 그라데이션 색상을 지정하는 방법을 보여줍니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴보겠습니다. 밝은 색상과 어두운 색상 팔레트를 모두 사용하여 이 작업을 수행하는 방법을 보여 드리겠습니다. 접근 방식을 익히면 그라디언트 텍스트로 모든 종류의 디자인을 만들 수 있습니다.

접근하다

1. Divi 블렌드 모드 이해하기

블렌드 모드는 이미지 편집 소프트웨어에서 익숙한 방식으로 정확하게 작동합니다. 레이어 구조를 기반으로 합니다. 구체적으로 말하면 Divi의 블렌드 모드는 특정 계층 구조를 따릅니다.

• 모듈에 적용된 혼합 모드는 그 아래의 모듈 + 열을 혼합합니다.
• 열에 적용된 혼합 모드는 그 아래의 열 + 행을 혼합합니다.
• 행에 적용된 혼합 모드는 그 아래의 행 + 섹션을 혼합합니다.

이 튜토리얼에서는 모듈에 적용된 혼합 모드가 그 아래의 열과 혼합된다는 것을 이해해야 합니다. 열에 그라디언트 배경과 해당 모듈을 혼합 모드로 지정하면 그라디언트 색상의 텍스트를 얻을 수 있습니다.

2. 완전히 어둡거나 밝은 색상 팔레트 중에서 선택하기

이 작업을 수행하려면 완전히 어둡거나 밝은 색상 팔레트를 사용해야 합니다. 우리가 사용하고 있는 밝게 및 어둡게 하는 혼합 모드는 완전히 검은색 또는 흰색을 사용할 때만 원하는 결과를 제공합니다. 다른 색상을 사용할 때 우리가 적용한 효과가 보일 것입니다.

3. 열과 모듈 사이의 모든 여백 너비 제거

접근 방식의 첫 번째 부분에서 언급했듯이 열 그라데이션 배경을 사용할 것입니다. 이 그라디언트 배경이 원하지 않는 곳에 표시되지 않도록 하기 위해 모든 여백 너비를 제거합니다. 이렇게 하면 모듈 간에 기본 사용자 지정 여백이 적용되지 않도록 합니다. 손실된 공간을 보충하기 위해 대신 사용자 지정 패딩을 수동으로 추가합니다.

4. 요소의 너비를 변경하는 대신 패딩 사용하기

그리고 디자인 요소의 너비를 조정하기 위해 사용자 지정 왼쪽 및 오른쪽 패딩을 사용합니다. 크기 설정에서 너비를 변경하면 전체 모듈의 너비가 변경되고 열 그라디언트 배경이 왼쪽과 오른쪽에 표시될 수 있습니다. 이는 우리가 원하지 않는 것입니다.

만들기 시작합시다!

YouTube 채널 구독

새 섹션 추가

배경색

시작하자! 새 페이지나 기존 페이지에 일반 섹션을 추가하고 올바른 배경색을 지정합니다(밝은 레이아웃 또는 어두운 레이아웃을 다시 만들려는 경우에 따라 다름).

• 배경색: #ffffff(밝은 레이아웃), #000000(어두운 레이아웃)

간격

섹션에 사용자 정의 패딩을 추가하여 계속하십시오.

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

행 #1 추가

열 구조

그런 다음 다음 열 구조를 사용하여 새 행을 추가합니다.

2열 그라데이션 배경

행의 두 번째 열에 그라데이션 배경을 추가합니다. 여기에서 튜토리얼의 다음 부분에서 제목 텍스트 모듈을 배치할 것입니다.

• 색상 1: #c700ff
• 색상 2: #32f1ff
• 열 2 기울기 방향: 150deg
• 열 2 시작 위치: 20%
• 열 2 끝 위치: 60%

사이징

크기 설정도 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

그리고 간격 설정을 수정합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

열 2에 텍스트 모듈 추가

콘텐츠 추가

이제 추가한 행의 두 번째 열에 텍스트 모듈을 추가합니다.

배경색

재생성하려는 레이아웃 유형에 따라 모듈에 올바른 배경을 지정하십시오.

• 배경색: #ffffff(밝은 레이아웃), #000000(어두운 레이아웃)

제목 텍스트 설정

다음으로 제목 텍스트 설정을 변경합니다.

• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 색상: #000000(밝은 레이아웃), #ffffff(어두운 레이아웃)
• 제목 2 텍스트 크기: 67px(데스크톱), 50px(태블릿), 40px(전화)
• 제목 2 글자 간격: -2px

간격

그리고 하단 패딩을 추가합니다. 열 그라데이션 배경이 표시되지 않도록 하기 위해 여백 대신 아래쪽 패딩을 사용하고 있음을 기억하십시오.

• 하단 패딩: 50px

혼합 모드

열의 그라데이션 배경을 추가한 모듈에 적용하려면 필터 설정에서 혼합 모드를 적용하십시오.

• 혼합 모드: 밝게(밝은 레이아웃), 어둡게(어두운 레이아웃)

행에 구분선 모듈 추가

시계

이 행에서 필요한 두 번째이자 마지막 모듈은 Divider 모듈입니다.

• 디바이더 표시: 예

배경색

다시 만들고 있는 레이아웃 유형에 따라 배경색을 변경합니다.

• 배경색: #ffffff(밝은 레이아웃), #000000(어두운 레이아웃)

간격

구분선의 너비를 줄이기 위해 왼쪽과 오른쪽에 사용자 지정 패딩을 추가합니다.

• 왼쪽 패딩: 250px
• 오른쪽 패딩: 250px

혼합 모드

다시 블렌드 모드를 추가하여 열 그라데이션 배경이 표시되도록 합니다.

• 혼합 모드: 밝게(밝은 레이아웃), 어둡게(어두운 레이아웃)

행 #2 추가

열 구조

다음 줄로! 다음 열 구조를 사용합니다.

열 1 그라데이션 배경

첫 번째 열에 그라데이션 배경을 추가하여 계속합니다.

• 색상 1: #c700ff
• 색상 2: #32f1ff
• 열 1 그라데이션 유형: 선형
• 열 1 기울기 방향: 105deg
• 열 1 시작 위치: 20%
• 열 1 끝 위치: 50%

2열 그라데이션 배경

두 번째 열에도 그라데이션 배경을 사용하고 있습니다.

• 색상 1: #32f1ff
• 색상 2: #c700ff
• 2열 그라디언트 유형: 선형
• 열 2 기울기 방향: 90deg
• 열 2 시작 위치: 40%
• 열 2 끝 위치: 60%

열 3 그라데이션 배경

세 번째 열도 마찬가지입니다.

• 색상 1: #c700ff
• 색상 2: #32f1ff
• 3열 그라디언트 유형: 선형
• 열 3 기울기 방향: 85deg
• 열 3 시작 위치: 20%
• 열 3 끝 위치: 50%

사이징

다음으로 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

그리고 사용자 정의 왼쪽 및 오른쪽 패딩을 추가하십시오.

• 왼쪽 패딩: 100px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 패딩: 100px(데스크톱 및 태블릿), 50px(전화)

열 1에 Blurb 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 선택한 제목과 함께 1열에 Blurb 모듈을 추가합니다. 게시물의 뒷부분에서 별도의 모듈을 사용하여 본문 콘텐츠를 추가할 것입니다.

아이콘 선택

원하는 아이콘을 선택합니다.

배경색

그리고 Blurb 모듈의 배경색을 수정합니다.

• 배경색: #ffffff(밝은 레이아웃), #000000(어두운 레이아웃)

아이콘 설정

계속해서 아이콘 설정으로 이동하고 거기에서 몇 가지를 변경합니다.

• 아이콘 색상: #000000(밝은 레이아웃), #ffffff(어두운 레이아웃)
• 이미지/아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 51px

제목 텍스트 설정

제목 텍스트 설정도 변경합니다.

• 제목 글꼴 두께: 굵게
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: #000000(밝은 레이아웃), #ffffff(어두운 레이아웃)
• 제목 문자 간격: -1px
• 제목 줄 높이: 1.2em

간격

그런 다음 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 추가합니다.

• 하단 여백: 5px
• 상단 패딩: 50px
• 하단 패딩: 50px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

혼합 모드

마지막으로 올바른 혼합 모드를 적용하십시오.

• 혼합 모드: 밝게(밝은 레이아웃), 어둡게(어두운 레이아웃)

열 1에 텍스트 모듈 추가

콘텐츠 추가

블러브 모듈의 제목과 본문을 두 개의 모듈로 분리하여 블렌드 모드가 아이콘과 제목에만 적용되도록 합니다. 본문 내용이 포함된 Blurb 모듈 바로 아래에 텍스트 모듈을 추가합니다.

배경색

다음으로 배경색을 추가합니다.

• 배경색: #ffffff(밝은 레이아웃), #0c0c0c(어두운 레이아웃)

텍스트 설정

그리고 텍스트 설정을 변경합니다.

• 텍스트 문자 간격: 0.5px
• 텍스트 줄 높이: 2.3em
• 텍스트 방향: 양쪽 맞춤
• 텍스트 색상: 어둡게(밝은 레이아웃), 밝게(어두운 레이아웃)

간격

모듈에 숨을 쉴 수 있는 공간을 제공하려면 간격 설정에서 사용자 정의 패딩 값을 추가하십시오.

• 상단 패딩: 100px
• 하단 패딩: 100px
• 왼쪽 패딩: 70px
• 오른쪽 패딩: 70px

박스 섀도우

그리고 그 위에 미묘한 상자 그림자도 추가하십시오.

• 상자 그림자 흐림 강도: 56px
• 상자 그림자 확산 강도: -12px
• 그림자 색상: rgba(0,0,0,0.3)

Blurb 모듈 및 텍스트 모듈을 두 번 복제 + 나머지 열에 배치

마지막으로 열 1에서 찾을 수 있는 두 모듈을 모두 복제하고 나머지 두 열에 복제본을 배치합니다. 그에 따라 내용도 변경하십시오.

시사

이제 모든 단계를 거쳤으므로 최종 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 게시물에서는 Divi의 기본 제공 옵션만 사용하여 웹사이트에 그라디언트 텍스트를 만드는 방법을 보여주었습니다. 이 튜토리얼이 작동하도록 하고 다른 디자인에서도 접근 방식을 연습할 수 있으려면 이 게시물의 접근 방식 섹션을 살펴보고 디자인을 다시 만드는 동안 이해해야 합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!