귀하의 기능이나 제품을 탭 형태로 제시하고 싶습니까? Divi 호버 효과로?
웹 페이지에서 기능 및/또는 제품을 선보일 새롭고 창의적인 방법을 찾고 계십니까?
그렇다면 계속 읽으십시오. 이 기사에서는 다음과 같은 기본 제공 옵션만 사용하여 호버 시 탭에 기능을 표시하는 방법을 보여줍니다. Divi. 이 접근 방식을 통해 얻을 수 있는 가능성은 무궁무진하며 이를 통해 확실히 이해할 수 있을 것입니다. Divi 더 깊은 수준에서.
탭 호버 효과는 데스크탑에서만 발생합니다. 작은 화면 크기에서는 정상적인 모양으로 나타납니다.
가자!
측량
이 튜토리얼을 시작하기 전에 달성하고자 하는 결과를 살펴보겠습니다.
Divi로 생성 과정을 시작해 봅시다.
새 섹션 추가
그라데이션 배경
새 페이지를 추가하거나 기존 페이지를 열고 새 섹션을 추가합니다. 섹션 설정을 열고 섹션에 그라데이션 배경을 추가합니다.
- 왼쪽 색상: #f2f2f2
- 오른쪽 색상: #ffffff
- 기울기 방향: 87도
- 왼쪽 위치: 20%
- 오른쪽 위치: 80%
간격
다음으로 다음 간격 설정을 변경합니다.
- 패딩(상단 및 하단): 0px
새 행 추가
기둥의 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
배경색
아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 변경하십시오.
- 배경색: #ffffff
크기 조정 및 정렬
탭에서 디자인, 옵션을 아래로 당겨 크기 조정 다음 설정을 변경합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 너비: 400px
- 행 정렬: 왼쪽
호버 크기 조정
옵션 변경 폭 호버 크기 설정에서 이렇게 하면 호버링할 때 줄이 확장될 수 있습니다.
- 너비(호버): 2픽셀
간격
그런 다음 옵션의 간격 설정으로 이동하십시오. 간격
- 패딩(상단 및 하단): 0px
테두리(데스크톱)
선의 오른쪽 상단 모서리에 '20px'를 추가하고 선에 왼쪽 테두리도 추가합니다.
- 둥근 모서리(데스크탑): 20px(오른쪽 위 모서리)
- 왼쪽 테두리 너비: 20px
- 왼쪽 테두리 색상: #6d44ff
마우스 오버 시 테두리
대신 '20px'를 추가하여 마우스를 가져갈 때 '0px'의 오른쪽 상단 둥근 모서리를 제거합니다.
박스 섀도우(데스크탑)
마지막으로 미묘한 그림자를 추가하십시오.
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -10px
- 그림자 색상: rgba(0,0,0,0.11)
호버 섀도우
그리고 마우스를 가져가면 그림자 색상을 완전히 투명한 색상으로 변경합니다.
- 박스 섀도우: rgba(255,255,255,0)
행에 Blurb 모듈 추가
콘텐츠 추가
이제 모든 행 설정을 변경했으므로 열에 Blurb 모듈을 추가할 수 있습니다. 원하는 다른 모듈을 자유롭게 사용하십시오.
모듈을 추가한 후 일부를 추가하세요. 내용 드 votre choix.
아이콘 선택
그런 다음 원하는 아이콘을 선택합니다.
아이콘 설정
아이콘 설정에서 아이콘 모양을 변경합니다. 탭으로 이동 디자인
- 아이콘 색상: #5323ff
- 이미지/아이콘 배치: 상단
- 이미지/아이콘 너비: 50px
텍스트 제목 설정(데스크탑)
그런 다음 제목 설정을 변경합니다.
- 제목 글꼴: Poppins
- 텍스트 정렬: 중앙
- 제목 텍스트 색상: #5323ff
- 제목 텍스트 크기: 25px
- 문자 간격: -1px
- 줄 높이: 1em
마우스 오버 텍스트 제목 설정
마우스를 가져갈 때 제목 행의 높이를 변경합니다.
- 제목 줄 높이: 1,5em
본문 설정(데스크탑)
다음으로 본문 텍스트 설정으로 이동하여 몇 가지를 변경합니다. 여기에는 텍스트 크기를 '0px'로 변경하는 작업이 포함됩니다. 이것은 본문 텍스트가 호버에서만 표시되도록 하는 데 도움이 됩니다.
- 본문 글꼴: Poppins
- 본문 글꼴 무게: light
- 텍스트 정렬: 중앙
- 본문 색상: #000000
- 본문 텍스트 크기: 0px(데스크톱), 15px(태블릿 및 휴대폰)
- 줄 높이: 2,2em
마우스 오버 시 본문 설정
호버에 본문 텍스트가 나타나도록 하려면 호버 텍스트 크기를 변경하십시오.
- 본문 텍스트 크기: 15px
간격(데스크탑)
모듈에 공간을 제공하기 위해 다음 간격 매개변수를 수정합니다.
- 패딩(상단 및 하단): 80px
호버 간격
호버 간격 설정을 변경하겠습니다.
- 패딩(상단 및 하단): 80px
- 패딩(좌우): 20vw
행을 3번 복제
첫 번째 행과 해당 Blurb 모듈 편집이 완료되면 원하는 만큼 행을 복제할 수 있습니다.
라인 및 블러브 모듈 #2 편집
선 테두리 색상 변경
선의 왼쪽 테두리 색상을 변경하여 시작하겠습니다.
- 왼쪽 테두리 색상: #00ffcc
Blurb 콘텐츠 및 아이콘 편집
그런 다음 Blurb 모듈 설정을 열고 아이콘을 변경합니다.
Blurb 모듈 아이콘 색상 변경
아이콘 색상으로.
- 아이콘 색상: #00eda6
제목 색상 변경
그리고 제목 텍스트의 색상입니다.
- 제목 텍스트 색상: #00eda6
편집 라인 및 Burb #3 모듈
선 테두리 색상
왼쪽 행의 테두리 색상을 변경해 보겠습니다.
- 왼쪽 테두리 색상: #afebff
Blurb 콘텐츠 및 아이콘 편집
아이콘도 변경해 보겠습니다. 내용 프레젠테이션 텍스트의
Blurb 모듈 아이콘 색상 변경
아이콘 색상도 변경합니다.
- 아이콘 색상: #68d9ff
제목 텍스트 색상 변경
그리고 제목 텍스트의 색상도.
- 제목 텍스트 색상: #68d9ff
라인 및 블러브 모듈 #4 편집
선 테두리 색상 변경
다음 및 마지막 모듈에서 선의 왼쪽 테두리 색상도 변경합니다.
- 왼쪽 테두리 색상: #dd87cf
Blurb 콘텐츠 및 아이콘 편집
행에서 Blurb 모듈을 열고 아이콘과 내용 뒤 모듈.
Blurb 모듈 아이콘 색상 변경
아이콘 색상으로.
- 아이콘 색상: #dd6aca
제목 텍스트 색상 변경
그리고 제목 텍스트의 색상도.
- 제목 텍스트 색상: #dd6aca
측량
이제 자습서를 살펴보았으므로 마지막으로 결과를 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
이 기사에서는 Divi의 기본 제공 옵션을 사용하여 호버에서 사용할 수 있는 탭을 만드는 방법만 보여주었습니다.
이 접근 방식은 기능이나 제품에 대한 콘텐츠를 대화식으로 공유하는 데 도움이 됩니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
