Divi: 전체 너비 헤더 모듈의 기본 버튼과 보조 버튼의 균형을 맞추는 방법

기본 버튼과 보조 버튼의 균형을 맞춰 Divi의 Fullwidth Header 모듈을 맞춤설정하고 싶으신가요?

모듈 Divi Fullwidth Header를 사용하면 아름다운 Hero 섹션을 사이트 웹. 이 모듈에는 두 개의 버튼, 제목 텍스트, 자막 텍스트, 본문 텍스트, 로고 및 이미지가 있어 사용자 지정 옵션을 무한대로 만들 수 있습니다.

오늘 기사에서는 Divi 전폭 헤더. 미리 만들어진 3개의 레이아웃 팩을 사용하여 디자인을 시작하고 기본 및 보조 버튼 균형에 중점을 두고 섹션을 디자인합니다. 

우리는 기본 버튼을 추월하지 않고 보조 버튼을 표시하고 액세스할 수 있도록 유지하면서 기본 클릭 유도문안이기 때문에 기본 버튼이 눈에 띄기를 원합니다.

기본 및 보조 버튼 디자인의 원리

기본 버튼 및 보조 버튼 도움말 안내 방문자 당신의 사이트 웹 특정 주식에. 기본 버튼은 일반적으로 가장 일반적이거나 원하는 작업이며 보조 버튼은 덜 일반적인 작업입니다. 이는 다음을 안내하는 데 도움이 됩니다. 방문자 그들이 가고 싶은 곳으로.

그러기 위해서는 기본 버튼은 시각적으로 눈에 띄어야 하고 보조 버튼은 눈에 띄지 않아야 합니다. 즉, 더 많은 관심을 끌기 위해서는 기본 버튼이 더 독특하고 시각적인 무게감을 더 가져야 한다는 의미입니다.

기본 버튼과 보조 버튼의 작동 방식을 이해했으므로 이제 튜토리얼을 시작하겠습니다!

측량

오늘 디자인할 XNUMX개의 전체 너비 헤더를 살펴보겠습니다.

Divi Builder로 새 페이지를 만들어 봅시다.

WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.

이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용

그런 다음 클릭 건물 시작 (처음부터 구축)

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

읽기 : Divi: 영웅 섹션에 마스크 및 배경 패턴을 사용하는 방법

첫 번째 예제의 디자인

이제 페이지가 설정되었으므로 UX 랜딩 페이지의 전체 너비 헤더부터 시작하겠습니다.

페이지 구성

커스터마이징을 시작하기 전에 미리 정의된 레이아웃 팩을 로드해야 합니다. UX Divi 라이브러리에서. Visual Builder를 활성화하면 세 가지 옵션 팝업이 표시됩니다. 레이아웃 찾아보기.

레이아웃 팩 로드

페이지에 UX 레이아웃 팩을 로드하려면:

1. 탭에서 "미리 만들어진 레이아웃", 검색 기능을 사용하여 UX 레이아웃 팩을 찾습니다.
2. 찾았으면 클릭합니다. 그러면 레이아웃 세부 정보와 사용 가능한 페이지가 나타납니다.
3. 클릭 상륙그리고 클릭 "이 레이아웃 사용".

레이아웃의 상단 섹션을 모듈로 다시 생성합니다. 전폭 헤더.

첫 번째 섹션 삭제

대신 Fullwidth Header 모듈을 사용하여 첫 번째 섹션을 다시 생성할 것이므로 이 섹션을 삭제해야 합니다. 섹션 위로 마우스를 이동하고 휴지통 아이콘을 클릭합니다.

전체 너비 섹션 추가

전폭 헤더를 추가하기 전에 전폭 섹션을 추가해야 합니다.

화살표를 클릭 "+" Divi 섹션을 표시한 다음 "전체 넓이". 그러면 자동으로 Divi Fullwidth Module 라이브러리가 나타납니다.

전체 너비 헤더 추가

Divi Fullwidth 모듈 라이브러리에서 " 전폭 헤더".

콘텐츠 추가

모듈 사용자 정의를 시작하기 전에 모듈을 추가해 보겠습니다. 내용 이 모듈에 필요합니다.

텍스트 콘텐츠 추가

텍스트 탭 아래에 내용 suivant :

1. 제목: UX 디자인 지식 향상
2. 부제: UX 디자인 코스
3. 버튼 #1: 과정 개요
4. 버튼 #2: 자세히 알아보기
5. 본문: 기본값

이미지 추가

이제 우리는 내용 텍스트가 제자리에 있으면 디자인에 두 개의 이미지를 추가해야 합니다.

1. 탭에서 이미지, 로고 이미지(별) 및 헤더 이미지(휴대폰을 들고 있는 사람의 사진)를 추가합니다.

배경색 변경

탭에서 배경, 다음 매개변수를 구성합니다.

1. 배경 색상: #131517

전체 너비 헤더 사용자 지정

이제 콘텐츠가 설정되었으므로 디자인.

아래로 스크롤 아이콘

아래로 스크롤 아이콘인 아래쪽 화살표를 추가해 보겠습니다.

1. 아래로 스크롤 버튼 표시: 예.
2. 아래쪽 화살표 아이콘을 선택합니다.
3. 아래로 스크롤 아이콘 색상: #000

영상

모서리를 둥글게 하여 이미지에 곡선을 추가해 보겠습니다.

탭에서 영상, 다음 설정을 구성합니다.

1. 이미지 둥근 모서리 : 체인 연결 버튼을 클릭하여 모서리 연결을 해제한 후 왼쪽 하단 및 오른쪽 하단 입력 상자에 1000px를 입력합니다. 이렇게 하면 이미지의 왼쪽 하단과 오른쪽 하단 모서리가 둥글게 됩니다.

제목 텍스트

여기에서 이 모듈의 제목 텍스트를 사용자 지정하겠습니다. 탭에서 제목 텍스트, 다음 설정을 구성합니다.

• 제목 :
  • 글꼴: PT Sans
  • 글꼴 두께: 굵게
  • 텍스트 크기: 5렘
  • 줄 높이: 1,2em

본문 텍스트

여기에서 이 모듈의 본문 텍스트를 사용자 정의합니다. 탭에서 본문, 다음 설정을 구성합니다.

1. 본문 글꼴: Mukta
2. 본문 텍스트 크기: 18px

자막 텍스트

여기에서 이 모듈의 캡션 텍스트를 사용자 정의합니다. 탭에서 자막 텍스트, 다음 설정을 구성합니다.

• 부제:
  • 글꼴: 묵타
  • 글꼴 두께: 굵게
  • 스타일: 대문자
  • 텍스트 색상: #13d678
  • 문자 간격: 3px

버튼 하나

여기에서 버튼 XNUMX에 대한 사용자 정의 스타일을 정의할 수 있습니다. 메인 버튼. 탭에서 버튼원, 다음 설정을 구성합니다.

• 버튼 XNUMX에 사용자 지정 스타일 사용: 예
• 버튼 XNUMX:
  • 텍스트 색상: #ffffff
  • 배경 색상: #13d678
  • 테두리 너비: 0픽셀
  • 테두리 반경: 100px
  • 글꼴: 묵타
  • 글꼴 두께: 굵게
• 버튼 하나 아이콘 표시: 예
• 아이콘: 오른쪽 화살표
• 버튼 XNUMX에 대한 마우스 오버 시 아이콘만 표시: 아니요

버튼 XNUMX

이제 두 번째 항목을 사용자 지정해 보겠습니다. 보조 버튼. 탭에서 버튼 XNUMX, 다음 설정을 구성합니다.

• 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 XNUMX
  • 텍스트 색상: #ffffff
  • 배경 색상: #303030
  • 테두리 너비: 0픽셀
  • 테두리 반경: 100픽셀
  • 글꼴: 묵타
  • 글꼴 두께: 굵게
• 버튼 XNUMX 아이콘 표시: 예
• 버튼 XNUMX 아이콘: 오른쪽 화살표
• 호버 버튼 XNUMX에만 아이콘 표시 : 예

버튼 링크 추가

버튼에 링크를 추가하는 것을 잊지 마십시오! 탭에서 (링크), 다음 설정을 구성합니다.

1. 버튼 1 링크 URL: 여기에 버튼 1의 URL을 붙여넣습니다.
2. 버튼 1 링크 URL: 여기에 버튼 2의 URL을 붙여넣습니다.

작업 저장

이제 완전히 디자인된 전체 너비 헤더가 있으므로 디자인을 저장해야 합니다!

• 모듈 창의 오른쪽 하단에 있는 녹색 화살표를 클릭합니다.
• 찜하기
• 비주얼빌더를 종료합니다.

읽기 : Divi: Fluid Hero 섹션을 만드는 방법

즐겁게 실험하세요

Divi Fullwidth Header 모듈을 사용자 정의하는 방법은 끝이 없습니다. 기본 버튼과 보조 버튼을 활용하면 방향을 잡는 데 도움이 될 수 있습니다. 방문자 다른 사람이 보길 원하는 페이지로 이동하거나 원하는 작업(예: 요청 제출)을 수행할 수 있습니다.

눈에 띄는 기본 버튼이 있는 전체 너비 헤더 예를 두 개 더 살펴보겠습니다.

"은퇴 센터" 팩의 전체 너비 헤더

버튼 스타일

고유한 기본 및 보조 버튼 스타일을 살펴보겠습니다.

버튼 하나

Button One 탭에서 다음 설정을 구성합니다.

• 버튼 XNUMX에 사용자 정의 스타일 사용: 예
• 버튼 XNUMX:
  • 텍스트 크기: 14px
  • 텍스트 색상: #ffffff
  • 배경색: #0a0a0a
  • 테두리 너비: 0픽셀
  • 테두리 반경: 10px
  • 문자 간격: 3px
  • 글꼴 두께: 굵게
  • 글꼴 스타일: TT
• Buttpn One에 대한 마우스 오버 시 아이콘만 표시: 예
• 버튼 원 패딩: 15px(상하), 25px(좌우)

버튼 XNUMX

탭에서 버튼 XNUMX, 다음 설정을 구성합니다.

• 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 XNUMX:
  • 텍스트 크기: 14px
  • 텍스트 색상: #ffffff
  • 배경색: #0a0a0a
  • 테두리 너비: 0픽셀
  • 테두리 반경: 10px
  • 글꼴 두께: 굵게
  • 글꼴 스타일: TT
• 버튼 10 패딩: 10px(하단), XNUMXpx(좌우)

그리고 당신은 간다! 두 개의 고유한 버튼, 하나는 눈에 띄고 다른 하나는 두 번째 자리를 차지합니다.

"재무 계획" 팩의 전체 너비 헤더

버튼 스타일

고유한 기본 및 보조 버튼 스타일을 살펴보겠습니다.

버튼 하나

탭에서 버튼 XNUMX, 다음 설정을 구성합니다.

• 버튼 XNUMX에 사용자 지정 스타일 사용: 예
• 버튼 XNUMX:
  • 텍스트 크기: 18px
  • 텍스트 색상: #ffffff
  • 배경 색상: #1b4ffe
  • 패딩: 15px()위쪽 및 아래쪽); 25px(좌우)

버튼 XNUMX

탭에서 버튼 XNUMX, 다음 설정을 구성합니다.

• 버튼 XNUMX에 사용자 정의 스타일 사용: 예
• 버튼 XNUMX:
  • 텍스트 색상: #1b4ff
  • 배경색: 클리어
  • 아이콘 색상: #1b4ff

지금 DIVI를 다운로드하세요!!!

결론

Divi의 Fullwidth Header 모듈을 사용하면 멋진 Hero 섹션을 쉽게 만들 수 있습니다. 사이트 웹. 

기본 및 보조 버튼을 전략적으로 사용하면 사용자 경험이 향상되고 웹사이트 방문자가 원하는 작업을 수행할 수 있습니다. 

전체 너비 헤더에는 사용자 정의 옵션이 무한하므로 재미있게 실험해 보세요!

우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.

상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.

주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...