Divi: Fullwidth Header 모듈에 아래로 스크롤 버튼을 포함하는 방법

다음의 전체 너비 헤더 모듈에 추가하시겠습니까? Divi 스크롤 다운 버튼?

의 전체 너비 헤더 모듈 Divi 아래로 스크롤할 수 있음을 사용자에게 알리는 버튼이 포함되어 있습니다. 클릭하면 자동으로 다음 섹션으로 리디렉션됩니다. 선택할 수 있는 여러 아이콘이 있는 간단한 버튼이며 색상과 크기를 완전히 사용자 지정할 수 있습니다. 

이 문서에서는 이를 사용자 지정하는 방법과 Fullwidth Header 모듈에 포함할 수 있는 XNUMX개의 스크롤 다운 버튼을 살펴봅니다. 또한 더 많은 디자인 옵션을 위해 CSS로 사용자 지정하는 방법도 살펴봅니다.

시작하자!

아래로 스크롤 버튼 개요

먼저 이 기사에서 만들 디자인을 살펴보겠습니다.

예 1

예 2

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

예 3

예 4

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

아래로 스크롤 버튼 전체 너비 헤더 디자인

먼저 전체 너비 헤더 디자인을 만듭니다. 의 디자인을 사용하여 처음부터 다시 만들고 있습니다. Divi에서 사용 가능한 무료 치료 레이아웃 팩 . 새 페이지를 만들고 추가 전폭 헤더 모듈 새로운 전각 섹션으로 이동합니다.

또한보십시오: Divi: Blurb 모듈로 조직도를 만드는 방법

전폭 섹션 디바이더

이 전체 너비 헤더에 구분선을 추가합니다. 의 설정을 엽니다. 전폭 섹션 .

그런 다음 아래로 스크롤하여 분할기 . 탭을 클릭하십시오 바닥 8번째 구분 기호 스타일을 선택합니다. 색상을 #e5e8f0으로 설정하고 높이에 10vw를 입력합니다. 섹션 설정을 닫습니다.

• 디바이더: 낮음
• 스타일: 8번째 스타일
• 색상: #e5e8f0
• 높이: 10vw

헤더 텍스트

다음으로, Fullwidth Header 모듈을 열고 제목, 부제, 버튼 텍스트를 추가하세요. 더미 텍스트를 제거하십시오. 내용 몸체를 비워 둡니다.

• 제목: 오늘 기분이 좋아지는 여정을 시작하세요.
• 자막: Leslie Saidon, 면허 있는 치료사
• 버튼 #1: 예약하기
• 바디수트: 없음

헤더 이미지

다음으로 스크롤 이미지 헤더 이미지를 선택합니다. 함께 제공된 이미지를 선택합니다. 치료 레이아웃 팩.

헤더 배경

다음으로 스크롤 배경. 배경색 제거 및 탭 선택 배경 그라데이션.

• 그라데이션 중지:
  • 25%: #2e5b61
  • 100%: RGBA(46, 91, 97, 0,5)

사용 배경 이미지 위에 그라디언트 배치 .

• 배경 이미지 위의 정사각형 그라데이션 : 예

전체 너비 헤더 배경 이미지

그런 다음배경 이미지 탭 전체 화면 이미지를 선택합니다. Therapy Layout Pack의 다른 이미지를 사용하고 있습니다.

• 배경 이미지 위치: 상단 중앙

전체 너비 헤더 레이아웃

그런 다음디자인 탭 활성화 전체 화면으로 만들기 .

• 전체 화면 만들기: 예

전체 너비 헤더 아래로 스크롤 아이콘

그런 다음 활성화 아래로 스크롤 버튼 표시. 예제에서 이 버튼의 스타일을 지정할 것이므로 지금은 기본 설정으로 둡니다.

• 아래로 스크롤 버튼 표시: 예

헤더 이미지

그런 다음 아래로 스크롤하여 영상 데스크탑의 경우 왼쪽 상단의 둥근 모서리를 200px로 변경합니다. 나머지 둥근 모서리를 0px로 설정합니다. 태블릿 및 휴대폰의 경우 둥근 모서리를 100픽셀로 변경합니다.

• 그림 둥근 모서리:
  • 바탕 화면: 왼쪽 상단 200px, 기타 0px
  • 태블릿 및 휴대전화: 왼쪽 상단 100px, 기타 0px

헤더 제목 텍스트

그런 다음 아래로 스크롤하여 제목 텍스트. 제목 수준에 H1을 사용합니다. 제목 글꼴로 Cormorant Garamond를 선택하고 두께를 Bold로, 색상을 #e1ecea로 설정합니다.

• 제목 :
  • 표제 수준: H1
  • 글꼴: 가마우지 Garamond
  • 글꼴 두께: 굵게
  • 텍스트 색상: #e1ecea

그런 다음 설정 taille 세 가지 화면 크기 모두에 대해 데스크톱에는 90픽셀, 태블릿에는 40픽셀, 휴대폰에는 24픽셀을 사용합니다. 줄 높이를 1.1em으로 변경합니다.

• 제목 텍스트 크기: 90px, 40px, 24px
• 제목 줄 높이: 1,1em

전체 너비 헤더 자막 텍스트

그런 다음 아래로 스크롤하여 자막 텍스트. 글꼴을 Inter로, 두께를 굵게, 색상을 #e1ecea로 변경합니다.

• 부제:
  • 글꼴: 인터
  • 글꼴 두께: 굵게
  • 텍스트 색상: #e1ecea

설정 taille 데스크톱의 경우 22픽셀, 태블릿의 경우 20픽셀, 휴대폰의 경우 16픽셀입니다. 변경 행 높이 1,6시.

• 자막 텍스트 크기: 22px, 20px, 16px
• 자막 줄 높이: 1,6 em

헤더 버튼

아래로 스크롤하여 설정 버튼 XNUMX 활성화 버튼 XNUMX에 사용자 지정 스타일 사용 . 크기를 14px로, 텍스트 색상을 #2e5b61로, 배경색을 #e1ecea로 변경합니다.

• 버튼 XNUMX에 사용자 정의 스타일 사용: 예
• 버튼 XNUMX
  • 텍스트 크기: 14px
  • 텍스트 색상: #2e5b61
  • 배경: #e1ecea

의 너비를 변경합니다. 국경 0px 및 반경에서 국경 50px에서. 글꼴에 Inter를 사용하고 두께를 semi-bold로 변경합니다.

• 버튼 XNUMX:
  • 테두리 너비: 0px
  • 테두리 반경: 50px
  • 글꼴: 인터
  • 무게: 굵게

용 버튼 패딩 , 위쪽 및 아래쪽에 20px, 왼쪽 및 오른쪽에 40px를 사용하십시오.

• 버튼 원 패딩: 상하 20px, 좌우 40px

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

아래로 스크롤 버튼의 예

이제 전체 너비 헤더가 있으므로 스크롤 다운 버튼을 사용자 정의하는 방법을 살펴보겠습니다. 아이콘, 색상 및 크기의 다양한 조합이 있는 네 가지 예를 살펴보겠습니다.

아래로 스크롤 버튼에는 세 가지 매개변수가 있습니다. 각 설정은 각 화면 크기에 대해 독립적으로 조정할 수 있습니다. 매개변수는 다음과 같습니다.

• 아이콘 선택 – 11개의 아이콘 중에서 선택합니다. 여기에는 원형, 원형 ​​및 솔리드를 포함하여 배경이 있거나 없는 다양한 화살표 디자인이 포함됩니다.
• 색 – 색상 선택기 Divi 표준.
• 허리 – 표준 Divi 크기 조정.

고급 탭에 CSS 필드도 포함되어 있습니다. 

이 모든 매개 변수를 사용합니다.

또한보십시오: Divi: 배경 이미지에 적용할 수 있는 5개의 마스크 및 패턴 오버레이

예 #1

첫 번째 예에서는 배경이 없는 원이 없는 아이콘을 사용합니다. 첫 번째 아이콘을 선택하고 색상을 #e1ecea로 변경하고 크기를 데스크톱의 경우 66px, 태블릿의 경우 60px, 휴대폰의 경우 50px로 변경합니다.

• 아이콘: 첫 번째 아이콘
• 색상: #e1ecea
• 크기: 66px(데스크톱 및 태블릿), 50px(휴대폰)

이것은 디자인의 나머지 부분과 잘 작동하고 사용자에게 충분히 눈에 띄는 밝은 녹색 아래쪽 화살표를 만듭니다.

예 2

두 번째 예에서는 동그라미 아이콘을 사용합니다. 일곱 번째 아이콘을 선택하고 색상을 #e8c553으로 변경합니다. 이 아이콘을 확대하겠습니다. 데스크톱의 경우 크기를 78px, 태블릿의 경우 70px, 휴대폰의 경우 60px로 변경하세요.

• 아이콘: 7번째 아이콘
• 색상: #e8c553
• 크기: 78px(데스크톱), 70px(태블릿), 60px(휴대폰)

이 색상은 레이아웃 팩의 노란색 변형이지만 더 가볍고 녹색 배경에서 가장 잘 작동합니다. 아이콘의 모서리는 뾰족하지만 원은 레이아웃의 둥근 디자인과 일치합니다.

예 3

세 번째 예에서는 주위에 원이 있고 배경이 있는 아이콘을 사용합니다. 이렇게 하면 배경에 색상이 지정되고 배경 이미지를 나타내는 조리개가 있는 아이콘이 생성됩니다. 사이트 웹. 

최상의 결과를 얻으려면 아이콘 크기와 버튼 배경색에 세심한 주의를 기울여야 합니다.

여덟 번째 아이콘을 선택하고 색상을 #0e4951로 변경합니다. 데스크톱의 경우 크기를 60px, 태블릿의 경우 56pc, 휴대폰의 경우 50px로 설정합니다.

• 아이콘: 8번째 아이콘
• 색상: #0e4951
• 크기: 60px(데스크톱), 56px(태블릿), 50px(휴대폰)

녹색은 배경의 더 어두운 녹색 음영입니다. 더 어두운 음영은 녹색에 대해 눈에 띄고 여전히 레이아웃의 나머지 부분과 일치합니다.

예 4

컷아웃 아이콘 뒤에 배경색이 있도록 색상을 결합하려면 어떻게 해야 합니까? 우리는 CSS로 이것을 할 수 있습니다. 

이 예에서는 CSS를 사용하여 컷아웃 아이콘을 통해 표시될 아이콘 뒤에 배경 모양을 만듭니다. 아이콘 자체는 ​​표준 설정을 사용합니다.

열한 번째 아이콘을 선택하고 색상을 #e1ecea로 변경합니다. 이 아이콘을 더 작게 설정하고 큰 배경 모양을 만듭니다. 크기를 데스크톱의 경우 50px, 태블릿의 경우 40px, 휴대폰의 경우 30px로 변경합니다.

• 아이콘: 11^EME
• 색상: #e1ecea
• 크기: 50px(데스크톱), 40px(태블릿), 30px(휴대폰)

그런 다음 탭으로 이동하십시오. Advnaced 필드로 스크롤 아래로 스크롤 버튼 이 CSS를 입력하십시오.

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

이 CSS 형식은 위쪽, 오른쪽, 아래쪽 및 왼쪽에 패딩을 추가합니다. 이 패딩을 사용하여 레이아웃 디자인 가이드를 사용하여 헤더 디자인과 잘 어울리는 배경 타원을 만들었습니다.

다양한 예의 결과

예 1

예 2

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

예 3

예 4

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

결론

이것은 Fullwidth Header Divi 모듈에 포함할 수 있는 XNUMX개의 스크롤 다운 버튼에 대한 개요입니다. 스크롤 버튼에는 선택할 수 있는 여러 아이콘이 포함되어 있으며 색상과 크기를 설정할 수 있습니다. 

CSS 필드를 사용하여 버튼을 추가로 사용자 정의할 수 있습니다. 버튼 스타일 옵션과 CSS의 조합은 스크롤 다운 버튼으로 다양한 디자인 가능성을 제공합니다.

이것이 다음 블로그 사이트에 유용하기를 바랍니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.

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

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

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

...