Divi 전폭 헤더 모듈에서 이미지 스타일을 지정하는 방법

Divi의 전체 너비 헤더 모듈에는 많은 이미지 스타일 옵션이 포함되어 있어 Divi 사용자가 헤더를 위한 아름다운 이미지와 레이아웃을 만들 수 있습니다. 헤더 이미지는 흥미로운 레이아웃과 디자인을 만들기 위해 다양한 방법으로 스타일을 지정할 수 있습니다. 다양한 텍스트와 버튼 디자인이 결합되어 더욱 흥미롭습니다. 이 게시물에서는 Divi 전폭 헤더 모듈에서 이미지의 스타일을 지정하는 방법과 전폭 헤더 모듈을 설계하는 데 도움이 되는 세 가지 예를 공유합니다.

시작하자!

시사

데스크탑 전체 너비 헤더 이미지 예 1

전화 전체 너비 헤더 이미지 예 1

데스크탑 전체 너비 헤더 이미지 예 2

전화 전체 너비 헤더 이미지 예 2

데스크탑 전체 너비 헤더 이미지 예 3

전화 전체 너비 헤더 이미지 예 3

전체 너비 헤더에 이미지 추가

다음은 이 예에서 사용할 전체 너비 헤더입니다. 먼저 빌드 방법을 알아보겠습니다. 우리는 Divi 내에서 사용할 수 있는 무료 꽃 농장 레이아웃 팩의 이미지와 디자인 대기열을 사용하고 있습니다.

페이지에 Divi Fullwidth Header 모듈을 추가하려면 1열 행이 있는 새 섹션 컨테이너가 필요합니다. 일단 가지고 있으면 전체 너비 헤더 모듈을 행의 열에 추가하십시오.

전각 헤더 텍스트

다음으로 Title, Subtitle, Button One 텍스트, Button Two 텍스트 및 콘텐츠를 추가합니다.

• 제목: Divi 꽃 농장에 오신 것을 환영합니다
• 부제: 회사 소개
• 버튼 1: 추가 정보
• 버튼 2: 쇼핑
• 내용: 귀하의 텍스트

헤더 이미지

이미지까지 아래로 스크롤하고 헤더 이미지 를 선택하고 이미지를 추가합니다.

배경

그런 다음 Background 로 스크롤하고 Gradient 탭을 선택하고 4개의 Gradient Stops를 추가합니다.

• 기울기 정지 1: 0%, #000000
• 정지 2: 25%, rgba(0,0,0,0.8)
• 그라데이션 3: 75%, rgba(0,0,0,0.8)
• 그라데이션 4: 100%, #000000

그런 다음 배경 이미지 위에 그라디언트 배치 를 활성화합니다. 다른 설정은 기본값으로 둡니다.

• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지 탭을 선택하고 이미지를 추가합니다. 다음으로 전체 너비 헤더 모듈의 스타일을 지정합니다.

제목 텍스트

디자인 탭을 선택하고 제목 텍스트 까지 아래로 스크롤합니다. H1을 선택하고 글꼴로 Italiana를 선택합니다. 정렬을 왼쪽으로 설정하고 색상으로 흰색을 선택합니다.

• 표제 수준: H1
• 글꼴: 이탈리아나
• 정렬: 왼쪽
• 색상: #ffffff

바탕 화면 크기를 80px로, 태블릿 크기를 40px로, 휴대폰 크기를 32px로 설정합니다.

• 크기: 80px 데스크탑, 40px 태블릿, 32px 전화

본문

다음으로 본문 텍스트 까지 아래로 스크롤합니다. 정렬을 왼쪽으로 설정하고 글꼴로 Roboto를 선택한 다음 색상을 흰색으로 변경합니다.

• 정렬: 왼쪽
• 글꼴: Roboto
• 색상: #ffffff

바탕 화면 크기를 18px로, 태블릿 크기를 16px로, 휴대폰 크기를 14px로 변경합니다.

• 텍스트 크기: 18px 데스크탑, 16px 태블릿, 14px 전화

자막 텍스트

그런 다음 자막 텍스트 까지 아래로 스크롤합니다. 글꼴로 Roboto를 선택하고 Weight를 Heavy로 설정합니다. 스타일로 TT를 선택하고 정렬을 왼쪽으로 설정하고 색상을 #b5a68f로 변경합니다.

• 글꼴: Roboto
• 무게: 무거운
• 스타일: TT
• 정렬: 왼쪽
• 색상: #b5a68f

다음으로 Spacing 을 0.2em으로, Line Height를 1.7em으로 변경합니다. 글꼴 크기를 기본값인 18px로 둡니다.

• 간격: 0.2em
• 라인 높이: 1.7em

버튼 1

버튼 1까지 아래로 스크롤하고 버튼 1 에 사용자 정의 스타일 사용 을 선택합니다. 글꼴 크기를 14px로, 텍스트 색상을 #aa6a3c로, 배경색을 #f5f3ef로 설정합니다.

• 버튼 1에 사용자 정의 스타일 사용: 예
• 글꼴 크기: 14px
• 텍스트 색상: #aa6a3c
• 배경색: #f5f3ef

테두리 색상을 #aa6a3c로, 글자 간격을 0.15em으로, 글꼴을 Roboto로, 두께를 굵게, 스타일을 TT로 설정합니다.

• 테두리 색상: #aa6a3c
• 문자 간격: 0.15em
• 글꼴: Roboto
• 무게: 굵게
• 스타일: TT

버튼 1 패딩 까지 아래로 스크롤합니다. 위쪽 및 아래쪽 패딩을 20px로 변경하고 왼쪽 및 오른쪽 패딩을 30px로 변경합니다.

• 패딩: 위, 아래 20px, 왼쪽, 오른쪽 30px

버튼 2

그런 다음 버튼 2 까지 아래로 스크롤합니다. 버튼 2에 사용자 정의 스타일 사용을 선택합니다. 글꼴 크기를 14px로, 텍스트 색상을 흰색으로, 배경색을 rgba(255,255,255,0)로 설정합니다.

• 버튼 2에 사용자 정의 스타일 사용: 예
• 글꼴 크기: 14px
• 텍스트 색상: #ffffff
• 배경색: rgba(255,255,255,0)

테두리 색상을 흰색으로, 문자 간격을 0.15em으로, 글꼴을 Roboto로, 두께를 굵게, 스타일을 TT로 설정합니다.

• 테두리 색상: #ffffff
• 문자 간격: 0.15em
• 글꼴: Roboto
• 무게: 굵게
• 스타일: TT

Button Two Padding 까지 아래로 스크롤하여 상단 및 하단 패딩을 20px로, 왼쪽 및 오른쪽 패딩을 30px로 설정합니다. 이것이 전체 너비 헤더 모듈 스타일링에 대한 것입니다. 이제 이미지 스타일을 지정하는 세 가지 방법을 살펴보겠습니다.

• 패딩: 위, 아래 20px, 왼쪽, 오른쪽 30px

전각 헤더 이미지 스타일의 예

다음은 레이아웃을 시작점으로 사용하는 세 가지 예입니다. 각 예제의 레이아웃을 약간 조정하겠습니다.

전체 너비 헤더 이미지 예 1

첫 번째 전체 너비 헤더 이미지 예제에서는 테두리가 있는 둥근 상단을 만듭니다. 디자인 탭으로 이동하여 이미지 까지 아래로 스크롤합니다. 값의 동기화를 해제하고 위쪽 테두리를 400px로 변경합니다.

• 상단 오른쪽 및 왼쪽 테두리: 400px
• 하단 오른쪽 및 왼쪽 테두리: 0px

테두리 너비를 2px로, 테두리 색상을 흰색으로 변경합니다.

• 너비: 2px
• 색상: #ffffff

다음으로 텍스트와 이미지의 정렬 을 조정하여 화면에서의 배치를 조정합니다. 이 예에서는 이미지와 텍스트를 현재 위치에 그대로 두고 텍스트와 버튼의 수직 정렬을 변경할 것입니다. 전체 화면 을 선택하면 텍스트 옵션에서 세로 텍스트 정렬 옵션이 열립니다.

먼저 디자인 탭으로 이동합니다. 레이아웃에서 텍스트 정렬을 오른쪽으로 설정하고 전체 화면 만들기를 활성화합니다.

• 전체 화면 만들기: 예

마지막으로 Text 까지 아래로 스크롤합니다. 이제 Text Vertical Alignment 라는 옵션이 표시됩니다. 하단으로 설정합니다. 모듈을 닫고 설정을 저장합니다.

• 텍스트 세로 정렬: 아래쪽

전체 너비 헤더 이미지 예 2

이 예에서는 다른 버튼 텍스트와 이미지를 사용합니다. 먼저 Button One 텍스트 를 정보로 변경합니다.

• 버튼 1 텍스트: 정보

그런 다음 배경 으로 스크롤하여 다른 이미지를 선택합니다. 이 이미지는 화면 너비의 약 1/3을 차지합니다. 배경과 동일한 이미지를 사용하고 있습니다.

• 헤더 이미지: 큰 이미지

그런 다음 고급 탭 으로 이동하여 헤더 이미지 필드까지 아래로 스크롤합니다. CSS 를 추가하여 너비를 150%로, 높이를 자동으로 설정합니다. 모듈을 닫고 설정을 저장합니다.

헤더 이미지 CSS:

max-width: 150%;
height: auto;

이제 이미지와 버튼 텍스트가 제자리에 있으면 조정을 수행합니다. 텍스트와 이미지의 정렬 을 조정하여 화면에서의 배치를 조정할 수 있습니다. 먼저 디자인 탭으로 이동합니다. 레이아웃에서 텍스트 정렬을 왼쪽으로 두고 전체 화면 만들기 를 활성화합니다.

• 전체 화면 만들기: 예

다음으로 Title Text 로 스크롤하고 Alignment를 Center로 설정합니다.

• 제목 텍스트 정렬: 가운데

다음으로 본문 텍스트 까지 아래로 스크롤합니다. 텍스트 정렬을 가운데로 변경합니다.

• 정렬: 중앙

그런 다음 자막 텍스트 로 스크롤하고 정렬을 가운데로 설정합니다.

• 자막 텍스트 정렬: 가운데

버튼 1 여백 까지 아래로 스크롤하여 왼쪽 여백을 데스크톱의 경우 29%, 태블릿의 경우 18%, 휴대폰의 경우 19%로 변경합니다.

• 버튼 1 왼쪽 여백: 데스크톱 29%, 태블릿 18%, 휴대폰 19%

버튼 2 여백 까지 아래로 스크롤하고 왼쪽 여백을 태블릿의 경우 30%, 휴대폰의 경우 31%로 변경합니다.

• 버튼 2 왼쪽 여백: 태블릿 30%, 휴대폰 31%

크기 조정 까지 아래로 스크롤하고 휴대폰의 경우 너비를 104%로 설정합니다. 이렇게 하면 좁은 화면에 맞게 콘텐츠가 중앙에 올바르게 표시됩니다.

• 너비: 104% 전화

전체 너비 헤더 이미지 예 3

먼저 디자인 탭으로 이동합니다. 레이아웃 아래에서 텍스트 정렬을 오른쪽으로 설정합니다. 제 경우에는 텍스트가 왼쪽 정렬되지만 정렬을 지정하지 않은 경우 텍스트가 가운데 정렬될 수 있습니다.

• 텍스트 및 로고 정렬: 중앙

이미지 까지 아래로 스크롤합니다. 테두리 너비를 4px로, 테두리 색상을 #b5a68f로 변경합니다.

• 테두리 너비: 4px
• 테두리 색상: #b5a68f

그런 다음 제목 텍스트 로 스크롤하고 정렬을 가운데로 변경합니다.

• 제목 텍스트 정렬: 가운데

본문 텍스트 로 스크롤하고 정렬을 가운데로 변경합니다.

• 본문 정렬: 가운데

그런 다음 자막 텍스트 로 스크롤하고 정렬을 가운데로 변경합니다.

• 자막 텍스트 정렬: 가운데

그런 다음 콘텐츠 탭으로 이동하여 Button One 텍스트 를 휴대폰 전용 정보로 변경합니다.

• 전화용 버튼 1 콘텐츠: 정보

디자인 탭으로 돌아가서 Button Two의 전화 탭에 5% 오른쪽 여백 을 추가합니다.

• 오른쪽 여백: 5% 전화

마지막으로 크기 조정 까지 아래로 스크롤하여 콘텐츠 너비를 데스크톱의 경우 52%로, 태블릿 및 휴대폰의 경우 100%로 설정합니다. 모듈을 닫고 설정을 저장합니다.

• 콘텐츠 너비: 데스크톱 52%, 태블릿 및 휴대폰 100%

결과

데스크탑 전체 너비 헤더 이미지 예 1

전화 전체 너비 헤더 이미지 예 1

데스크탑 전체 너비 헤더 이미지 예 2

전화 전체 너비 헤더 이미지 예 2

데스크탑 전체 너비 헤더 이미지 예 3

전화 전체 너비 헤더 이미지 예 3

마무리 생각

이것이 Divi Fullwidth Header Module의 스타일을 지정하는 방법입니다. 이미지는 스타일 지정하기 쉽고 모듈 내의 여러 위치에 배치할 수 있습니다. 모듈의 다양한 레이아웃 옵션은 많은 디자인 가능성을 제공합니다. 최고의 사용자 경험을 보장하기 위해 모든 화면 크기에서 디자인을 테스트하십시오.

우리는 당신의 의견을 듣고 싶습니다. Divi의 Fullwidth Header Module에서 이미지의 스타일을 지정했습니까? 의견에 귀하의 경험에 대해 알려주십시오.