Divi: "그라디언트 빌더"를 사용하여 이미지를 아름답게 하는 방법

그래디언트 생성기를 사용하여 이미지에 모양을 지정하시겠습니까? Divi ?

이미지 마스크는 종종 이미지에 흥미로운 모양을 추가하는 데 사용됩니다. 이미지가 모양을 통해 볼 수 있도록 하여 페이지에 고유한 디자인 요소를 부여합니다.

와 그라디언트 빌더 de Divi, 모양을 만들기 위해 반드시 마스크를 사용할 필요는 없습니다. 대신 다음을 사용할 수 있습니다. 그라디언트 정지 그리고 그것들을 생성하기 위한 매개변수들!

이 기사에서는 Gradient Builder를 사용하여 이미지를 아름답게 만드는 방법을 살펴보겠습니다. Divi 이미지에 독특한 디자인을 추가하는 데 도움이 됩니다.

시작하자.

측량

먼저 이 튜토리얼에서 다양한 화면 크기로 무엇을 만들지 봅시다.

첫 번째 예 – 원형 이미지 모양

데스크탑 컴퓨터

했던 Tablette

전화

두 번째 예 – 선형 이미지 모양

국

했던 Tablette

전화

세 번째 예 – 타원형 이미지 모양

데스크탑 컴퓨터

했던 Tablette

전화

네 번째 예 – 원뿔형 이미지 모양

데스크탑 컴퓨터

했던 Tablette

전화

Divi를 사용한 레이아웃 디자인

모든 예제에서 사용할 레이아웃을 만드는 것으로 시작하겠습니다. 이 레이아웃은 영웅 섹션으로 사용할 수 있습니다.

한 면에는 제목과 설명이, 다른 면에는 이미지가 포함됩니다. 그런 다음 예제에 이 레이아웃과 이미지를 사용합니다.

섹션 사용자 지정

먼저 새 Divi 페이지를 만들고 섹션을 사용자 지정합니다. 섹션 설정을 열고 변경 뢰르 #f0f3fb의 배경.

배경: #f0f3fb

그런 다음 탭으로 이동하십시오. 디자인 다음과 같이 간격 설정을 변경합니다.

패딩(상단 및 하단): 10%

라인 추가

그런 다음 추가 라인 아래 열 구조로.

탭에서 라인 매개변수에 액세스 디자인, 옵션으로 이동 크기 조정 크기 조정 매개변수를 수정합니다.

사용자 지정 거터 너비 사용: 예
최대 너비: 1px

첫 번째 열 설정

탭에서 내용 행의 첫 번째 열 설정을 열고 탭으로 이동하십시오. 디자인. 다음과 같이 간격을 수정합니다.

패딩(왼쪽 및 오른쪽): 9% 왼쪽, 오른쪽

첫 번째 텍스트 모듈의 매개변수

그런 다음 추가 텍스트 모듈 왼쪽 열로.

선택 4 제목 텍스트의 경우 내용 그리고 내용 당신의 몸의.

텍스트: "BlogPasCher에 오신 것을 환영합니다"

그런 다음 탭으로 이동 디자인 및 제목 설정을 변경합니다.

글꼴: 몬세라트
글꼴 두께: 굵게
스타일: TT
텍스트 색상: #1d4eff

텍스트 크기: 데스크톱 16px, 태블릿 14px, 전화 12px
문자 간격: 0,3em
줄 높이: 1,6em

다음으로 스크롤 간격 하단 여백을 변경합니다.

여백(하단): 0px

두 번째 텍스트 모듈의 매개변수

그런 다음 추가 텍스트 모듈 첫 번째 아래.

텍스트 유형을 다음으로 설정하십시오. "제목 1" 그리고 내용 당신의 몸의.

내용: "금융 미래를 계획하십시오"

그런 다음 탭을 선택하십시오. 디자인 제목의 옵션을 수정합니다.

글꼴: 몬세라트
글꼴 두께: 굵게
텍스트 색상: #0f1154

크기: 80px 데스크탑, 40px 태블릿, 24px 폰
행 높이: 110%

세 번째 텍스트 모듈의 매개변수

그런 다음 추가 텍스트 모듈 두 번째 아래.

텍스트 유형을 "단락"으로 두고 본문 내용을 추가합니다.

본문: 내용

그런 다음 탭으로 이동 임신 텍스트 설정을 변경합니다.

텍스트 글꼴: Roboto
글꼴 두께: 중간
텍스트 색상: #000000

텍스트 크기: 18px(데스크톱 및 태블릿), 14px(전화)
라인 높이: 180%

마지막으로 아래로 스크롤하여 간격 그리고 하단 여백을 설정합니다. 모듈 설정을 닫습니다.

여백(하단): 0px

이미지 모듈 설정

이제 추가 그림 모듈 오른쪽 열로 이동합니다.

먼저, 더미 이미지 제거 휴지통 또는 이미지 위의 재설정 아이콘을 클릭하여

그런 다음 아래로 스크롤 배경 , 탭 선택 이미지를 만들고 이미지를 추가합니다. 모든 이미지 설정을 기본값으로 둡니다. 처음에는 이미지가 많이 표시되지 않습니다. 우리는 이동하면서 이것을 정리할 것입니다.

그런 다음 탭을 선택하십시오. 스타일 그리고 스크롤 간격.

여백(데스크탑): -10%(상단), -30%(왼쪽), 10%(오른쪽)
패딩(상단 및 하단): 300px

여백(태블릿/휴대폰): 0%(상단), 0%(왼쪽 및 오른쪽)

패딩(전화): 150px(상단 및 하단)

Divi의 Gradient Builder로 모양을 만든 이미지의 예

첫 번째 예 – 원형

첫 번째 예에서는 이미지에 중앙에 구멍이 있는 원형 모양을 제공합니다.

이미지 모듈 설정을 열고 아래로 스크롤하여 배경 . 선택 배경 그라데이션 탭 6개의 그래디언트 정지점을 설정합니다.

첫 번째 중지: 0%, #f0f3fb
두 번째: 45%, #f0f3fb
45위(41,196,169,0위 이상): XNUMX%, rgba(XNUMX)
69위: 250,255,214,0%, rgba(XNUMX)
69위(0위 이상): 3%, #fXNUMXfXNUMXfb
여섯 번째: 100%, #f0f3fb

유형: 라운드
위치: 센터
단위: 퍼센트
배경 이미지 위의 정사각형 그라데이션 : 예

두 번째 예 - 선형 형식

다음은 두 번째 이미지 모양 예제의 미리보기입니다. 이 예에서는 이미지에 대각선을 배치합니다.

설정을 열고 아래로 스크롤하여 배경 를 선택하고배경 그라데이션 탭. XNUMX개의 그라디언트 정지점을 추가합니다.

첫 번째 중지: 0%, #f0f3fb
두 번째: 5%, #f0f3fb
5위(175,175,175,0위 이상): XNUMX%, rgba(XNUMX)
13위: 41,196,169,0%, rgba(XNUMX)

유형: 선형
조향: 150도
그라디언트 반복: 예
기울기 단위: 백분율
배경 이미지 위의 정사각형 그라데이션 : 예

세 번째 예 - 타원형

이것은 세 번째 이미지 모양의 예입니다. 이것은 타원형을 사용합니다.

이미지 모듈 설정을 열고 아래로 스크롤하여 배경 . 탭 선택 배경 그라데이션 XNUMX개의 그래디언트 정지점을 만듭니다.

첫 번째 중지: 0%, #f0f3fb
두 번째: 9%, #f0f3fb
9위(175,175,175,0위 이상): XNUMX%, rgba(XNUMX)
21위: 41,196,169,0%, rgba(XNUMX)

유형: 타원형
그라데이션 위치: 왼쪽 상단
그라디언트 반복: 예
기울기 단위: 백분율
배경 이미지 위의 정사각형 그라디언트 : 예

네 번째 예 – 원추형

네 번째 예제는 다음을 사용합니다. "원추형" 단일 이미지 모양을 만듭니다.

이미지 모듈 설정을 열고 아래로 스크롤하여 배경 탭을 선택하고 배경 이미지. 여기에는 5개의 그라디언트 스톱이 있습니다.

첫 번째 중지: 23%, #f0f3fb
두 번째: 35%, #f0f3fb
35위(41,196,169,0위 이상): XNUMX%, rgba(XNUMX)
65위: 250,255,214,0%, rgba(XNUMX)
65위(0위 이상): 3%, #fXNUMXfXNUMXfb

유형: 테이퍼
기울기 방향: 180도
그라데이션 위치: 하단
단위: 백분율
배경 이미지 위의 정사각형 그라데이션 : 예