마우스를 올리면 회전하는 휠 형태의 독창적인 Divi 메뉴를 만들고 싶나요?
마우스 오버 시 회전하는 메뉴 휠을 만드는 것은 유용한 링크를 표시할 수 있는 재미있는 방법입니다. 사이트 웹. 이는 헤더에 여러 개의 클릭 유도 문구를 제공하여 사용자가 가야 할 곳을 안내하는 좋은 방법이 될 것입니다. 또한 이는 다음을 위한 멋진 하위 카테고리 메뉴가 될 것입니다. 블로그.
이 튜토리얼에서는 Divi에서 마우스를 가져갈 때 회전하는 메뉴 휠을 만드는 방법을 보여줍니다. 이것은 기본 제공 Divi 옵션과 일부 사용자 정의 CSS 스니펫의 조합을 사용하여 수행할 수 있습니다.
측량
이 튜토리얼을 시작하기 전에 달성하고자 하는 결과를 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
Divi Builder로 새 페이지 만들기
시작하려면 다음이 필요합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi에서 회전하는 메뉴 휠 디자인
섹션 및 라인 1 생성
기본적으로 존재하는 섹션에 다음 열 구조의 행을 추가합니다.
그런 다음 다음 내용이 있는 줄에 텍스트 모듈을 추가합니다.
다음으로 텍스트 디자인을 다음과 같이 업데이트합니다.
- 텍스트 글꼴: 기술 공유
- 텍스트 문자 간격: 1px
- 제목 2 텍스트 크기: 8vw
2행을 추가하여 바퀴를 만듭니다.
다음으로 행 1 아래의 열에 새 행을 추가해야 합니다.
링크에 대한 텍스트 모듈을 추가하기 전에 선을 바퀴로 디자인해야 합니다. 우리의 휠 디자인을 만들기 위해 행에서 많은 최적화가 필요할 것입니다.
읽기 : Divi에서 섹션 구분선 위로 마우스를 가져갈 때 콘텐츠를 표시하는 방법
시작하려면 행 2 설정을 열고 다음을 업데이트하십시오.
- 배경색: #02366b
- 왼쪽 배경 그라데이션 색상: rgba(0,0,0,0.45)
- 오른쪽 배경 그라데이션 색상: #02366b
- 그라디언트 유형: 원형
- 방사형 방향: 중심
- 시작 위치: 36%
- 종료 위치: 0%
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 너비: 500px
- 최대 너비: 500px(데스크톱), 자동(태블릿 및 휴대폰)
- 높이: 500px(데스크톱), 자동(태블릿 및 휴대폰)
- 패딩(데스크탑): 0px(상단 및 하단)
- 패딩(태블릿 및 휴대폰): 20px(상단, 하단 및 왼쪽)
- 마진(전화): -10%(오른쪽)
완전한 정사각형이 되도록 선의 높이와 너비를 모두 500픽셀로 설정해야 합니다. 이렇게 하면 Divi의 둥근 모서리(테두리 반경) 옵션을 사용하여 완벽한 원형 모양을 만들 수 있습니다.
- 둥근 모서리: 50%
다음으로 다음과 같이 상자 그림자를 사용하여 다른 수준의 원 디자인을 추가할 수 있습니다.
- 상자 그림자 흐림 강도: 0px
- 상자 그림자 확산 강도: 210px
- 그림자 색상: rgba(2,54,107,0.66)
다음으로 작은 CSS 스니펫을 추가하여 행의 내용을 세로 중앙에 배치합니다. 탭 아래 Advnaced, 기본 요소에 다음 사용자 정의 CSS를 추가하십시오.
display:flex;align-items:center;
링크 추가
휠의 각 링크는 모듈로 생성됩니다. 본문. 총 XNUMX개의 모듈을 생성합니다. 본문. XNUMX개의 모듈 본문 휠에 대한 링크가 포함되고 다른 하나에는 메뉴 제목이 포함됩니다.
새로운 "텍스트" 모듈을 생성하여 시작하십시오.
다음으로 텍스트 설정을 다음과 같이 업데이트합니다.
- 바디수트: "요소 1"
- 텍스트 글꼴: 기술 공유
- 텍스트 색상: #ffffff
- 크기: 16px(기본값), 20px(호버)
- 문자 간격: 1px
- 텍스트 줄 높이: 60px
- 너비: 250px(데스크톱), 자동(태블릿 및 휴대폰)
- 높이: 60px
- 패딩(왼쪽): 20px
지금은 설정을 저장합니다. 그런 다음 텍스트 모듈을 4번 복제하여 총 5개의 텍스트 모듈을 만듭니다.
텍스트 링크/모듈 위치 지정
이제 바퀴 둘레를 따라 링크를 배치할 준비가 되었습니다. 이를 위해 각 모듈을 업데이트합니다. 본문 모듈을 제자리에서 이동/변환하고 회전하는 변환 옵션이 있습니다.
발견 : divi에서 마우스를 가져갈 때 유체 기둥 그리드를 만드는 방법
이를 용이하게 하려면 와이어프레임 표시 모드를 배포하고 상단의 링크 1에서 시작하여 하단의 링크 5까지 텍스트 모듈에 레이블을 지정합니다.
유치권 1
링크 1을 편집하여 시작하겠습니다. 링크 1에 대한 텍스트 모듈 설정을 열고 다음을 업데이트합니다.
- 변환 변환(Y축): 120픽셀(데스크톱), 0픽셀(태블릿 및 휴대폰)
- 변환 회전(Z축): 60도(데스크톱), 0픽셀(태블릿 및 휴대폰)
- 원점: 50%(중앙 오른쪽)
유치권 2
링크 2에 대한 텍스트 모듈 설정을 열고 다음을 업데이트하십시오.
- 변환
- 번역(Y축): 60px(데스크톱), 0px(태블릿 및 휴대전화)
- Z축 회전: 30deg(데스크톱), 0px(태블릿 및 휴대폰)
- 원점: 50%(중앙 오른쪽)
유치권 3
링크 3의 텍스트 모듈이 중간에 있으므로 그대로 둘 수 있습니다.
유치권 4
링크 2에 대한 텍스트 모듈 설정을 열고 다음을 업데이트하십시오.
- 변환:
- Y축 변환: -60px(데스크톱), 0px(태블릿 및 휴대전화)
- Z축 회전: -30deg(데스크톱), 0px(태블릿 및 휴대폰)
- 원점: 50%(중앙 오른쪽)
유치권 5
링크 2에 대한 텍스트 모듈 설정을 열고 다음을 업데이트하십시오.
- 변환:
- Y축 변환: -120px(데스크톱), 0px(태블릿 및 휴대전화)
- Z축 회전: -60deg(데스크톱), 0px(태블릿 및 휴대폰)
- 원점: 50%(중앙 오른쪽)
이제 지금까지의 결과를 보자. 텍스트 모듈의 링크/텍스트가 원의 둘레를 따라 어떻게 완벽하게 실행되는지 확인하십시오.
메뉴 라벨 추가
메뉴 레이블을 추가하려면 이미 가지고 있는 1개의 텍스트 모듈 위에 다른 텍스트 모듈을 추가해야 합니다. 계속해서 링크 XNUMX 위에 새 텍스트 모듈을 추가하십시오.
다음으로 본문 내용을 다음으로 업데이트합니다.
Menu
그런 다음 디자인 속도를 높이려면 링크 3의 텍스트 모듈 스타일을 복사하고 이 모듈 스타일을 새 텍스트 모듈에 붙여넣습니다.
그런 다음 다음을 업데이트합니다.
- 텍스트 줄 높이: 300px(데스크톱), 20px(태블릿 및 휴대폰)
- 높이: 기본 설정 복원(자동)
- 변환 회전(Z축): 180도(데스크톱), 0도(태블릿 및 휴대폰)
- 변형 원점: 50%(중앙 오른쪽)
완료되면 메뉴 레이블 텍스트 모듈에 절대 위치를 지정해야 합니다. 이렇게 하려면 기본 요소에 다음 사용자 정의 CSS를 추가합니다.
position: absolute!important;
이제 결과를 알아보십시오. 메뉴 항목이 휠의 오른쪽에 거꾸로 있는 것을 볼 수 있습니다.
선/휠에 회전 호버 효과 추가
행에 회전 호버 효과를 추가하려면 다음과 같이 행 설정을 업데이트하십시오.
- 변환 회전(Z축): 180도(데스크탑), 0도(호버), 0도(태블릿 및 휴대폰)
다음으로 전환 설정을 다음과 같이 업데이트합니다.
- 전환 시간: 450ms
- 속도 곡선 전환: Ease-in-Out
이제 바퀴 위로 마우스를 가져갔을 때 바퀴가 어떻게 회전하는지 보십시오.
섹션에 대한 XNUMX열 레이아웃 만들기
현재 레이아웃은 서로의 위에 쌓인 두 개의 XNUMX열 행으로 구성됩니다. 그러나 flex css 속성을 사용하여 두 줄을 수평으로 정렬할 수 있습니다.
이를 위해 섹션에 사용자 정의 CSS의 작은 스니펫을 추가할 수 있습니다. 완료되면 간격을 약간 조정하여 작업을 올바르게 수행해야 합니다.
섹션 설정을 열고 다음 사용자 정의 CSS를 기본 요소에 추가하십시오.
display:flex;
줄 1 간격 업데이트
다음으로 줄 1의 크기와 간격을 다음과 같이 업데이트합니다.
- 너비: 40%(데스크탑)
- 여백(데스크톱): 5% 남음
최종 결과
이제 최종 결과를 보자.
지금 DIVI를 다운로드하세요!!!
대체 반바퀴 디자인
좋은 대안 디자인은 섹션 외부에 있는 휠의 오른쪽 절반을 숨겨서 링크가 숨겨졌다가 호버링할 때 표시되도록 하는 것입니다.
이렇게 하려면 방금 만든 도면이 포함된 전체 섹션을 복제합니다.
복제 섹션에서 다음과 같이 1행의 매개변수를 업데이트합니다.
- 너비: 70%(데스크톱)
다음으로 2행의 설정을 업데이트하여 다음과 같이 휠을 섹션 밖으로 밀어냅니다.
- 여백: -250px 오른쪽
휠의 전체 너비가 250px이고 줄의 정확히 절반을 숨기고 싶기 때문에 -500px를 사용해야 합니다.
그런 다음 다음과 같이 섹션의 가시성을 숨김으로 설정합니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
최종 결과는 다음과 같습니다.
지금 DIVI를 다운로드하세요!!!
결론
회전 링크 휠은 멋진 디자인 요소 중 하나입니다. 방문자 미묘하고 독특한 호버 효과. 그리고 Divi의 내장 디자인 설정으로 이 디자인을 얼마나 쉽게 수행할 수 있는지 정말 놀랍습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
