의 아이콘 모듈을 사용하는 방법을 알고 싶으십니까? Divi 사용자 정의 아이콘을 만들려면?
아이콘 버튼은 웹 디자인 세계의 필수품이 되었습니다. 아이콘은 많은 공간을 차지하지 않기 때문에 모바일 장치에 적합한 간결한 시각적 클릭 유도문안을 제공합니다. 또한 사용자가 텍스트 없이도 직관적으로 인식할 수 있는 토글 또는 팝업 버튼으로 잘 작동합니다.
오늘 튜토리얼에서 우리는 아이콘 버튼을 디자인하는 방법을 보여줄 것입니다. Divi. 아이콘 버튼 생성 Divi 아주 간단하고 재미있습니다.
아이콘 모듈을 사용하면 수백 개의 아이콘 중에서 선택할 수 있으며 다음과 같은 수많은 내장 디자인 옵션을 사용할 수 있습니다. Divi 여러분이 생각할 수 있는 거의 모든 유형의 아이콘 버튼을 생성할 수 있는 빌더입니다.
이 기사가 다음 프로젝트를 위한 멋진 아이콘 버튼을 만드는 데 도움이 되기를 바랍니다.
시작하자!
측량
다음은 이 튜토리얼에서 만들 아이콘 버튼에 대한 간략한 개요입니다.
Divi Builder로 새 페이지 만들기
또한보십시오: Divi: "전각 메뉴" 모듈의 바구니 및 검색 아이콘을 사용자 정의하는 방법
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi 아이콘 모듈로 아이콘 버튼 만들기
1부: 아이콘 버튼 만들기
시작하려면 기본 일반 섹션에 XNUMX열 행을 추가해 보겠습니다.
그런 다음 새 모듈을 추가하십시오. 아이콘 열에.
아이콘, 링크 URL 및 배경색
탭 아래 내용 아이콘 모듈 설정에서 다음을 업데이트하십시오.
- 아이콘: 오른쪽 화살표(스크린샷 참조)
- 아이콘 링크 URL: #(지금은 필러일 뿐)
- 배경: #3e22ff
테두리 및 테두리 반경
탭 아래 디자인, 다음을 업데이트합니다.
- 둥근 모서리: 10px
- 테두리 너비: 2px
- 테두리 색상: #7272ff
그림자 상자
- 박스 섀도우: 스크린샷 참조
- 그림자 색상: rgba(62,34,255,0.48)
아이콘 버튼 크기와 클릭 가능한 공간 일치
현재 아이콘 모듈은 상위 컨테이너(또는 열)의 전체 너비에 걸쳐 있습니다. 즉, 클릭 가능한 공간이 실제 아이콘 버튼보다 큽니다.
클릭 가능한 공간을 아이콘 버튼의 크기와 일치시키기 위해 아이콘 버튼의 너비와 동일한 최대 너비를 모듈에 지정할 수 있습니다.
이 예에서 버튼의 총 너비는 94픽셀입니다.
고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.
max-width: 94px
결과는 다음과 같습니다.
2부: 사각형 아이콘 버튼 만들기
사각형 아이콘 버튼을 만들려면 방금 만든 첫 번째 아이콘 버튼이 포함된 행을 복제합니다. 이렇게 하면 작업할 행에 중복 버튼이 생깁니다.
아이콘을 중앙에 유지하면서 동일한 높이와 너비를 제공하십시오.
아이콘 모듈에서 사용할 수 있는 아이콘 모음에는 Divi 아이콘과 Fontawesome 아이콘이 모두 포함되어 있습니다. 그러나 모든 아이콘의 높이와 너비가 같지는 않습니다. 이것은 아이콘 버튼의 정확한 너비와 높이를 결정하는 것을 조금 더 어렵게 만듭니다.
호버 시 아이콘을 연결하는 완벽한 정사각형 버튼을 만들기 위해 사용자 정의 CSS를 추가하여 아이콘의 높이와 너비를 설정하고 CSS Flex 속성을 사용하여 아이콘을 가운데에 둘 수 있습니다.
방법은 다음과 같습니다.
먼저 복제 아이콘 설정을 엽니다. 그런 다음 아이콘 선택기에서 새 아이콘으로 아이콘을 업데이트합니다.
아이콘 모듈에서 패딩을 제거합니다. 아이콘의 높이와 너비를 설정할 것이기 때문에 이것은 필요하지 않습니다.
고급 탭에서 다음 사용자 정의 CSS를 추가하십시오. 아이콘 요소 :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
이제 아이콘 버튼의 높이와 너비가 90픽셀과 같아 완벽한 정사각형이 됩니다. 또한 flex 속성은 아이콘을 모듈 중앙에 정렬합니다. 이를 통해 아이콘 모듈에서 아이콘 크기를 쉽게 업데이트할 수 있습니다.
이 버튼을 완성하기 위해 다음과 같이 배경 그라디언트와 흰색 테두리 색상을 지정해 보겠습니다.
- 그라데이션 중지:
- 0%: #3e22ff
- 100%: #ff2000
- 테두리 색상: #fff
최종 결과는 다음과 같습니다.
원형 아이콘 버튼 생성
아이콘 버튼이 완전한 정사각형이 되면 원형으로 만드는 것은 간단합니다. 그러나 이 간단한 트릭을 보여주기 전에 이전 줄을 복제하여 원형 아이콘 버튼을 작성해 보겠습니다.
이제 새로운 복제 아이콘에 대한 설정을 열고 탭 아래에서 디자인, 다음과 같이 테두리 반경(또는 둥근 모서리)을 업데이트합니다.
- 둥근 모서리: 50%
그리고 마찬가지로 원형 아이콘 버튼이 있습니다!
디자인을 약간 변경하려면 아이콘 모듈에 다음과 같이 다른 아이콘과 배경색을 지정해 보겠습니다.
- 아이콘: 스크린샷 참조
- 배경: #121212
결과는 다음과 같습니다.
아이콘 버튼 가로 메뉴 만들기
인기 있는 추세는 아이콘을 사용하여 일반적으로 나란히 배치된 여러 버튼으로 구성된 아이콘 메뉴를 만드는 것입니다. 이를 위해 flex 속성을 사용할 수 있습니다.
방법은 다음과 같습니다.
먼저 페이지의 열에 새 행을 추가합니다.
선 설정을 열고 거터 너비를 1로 업데이트합니다.
- 거터 폭: 1
다음으로, 행 내부의 열 설정을 열고 다음 사용자 정의 CSS를 기본 열 요소에 추가합니다.
display:flex;
align-items:center;
새 모듈 추가 아이콘 열에.
탭 아래 내용 아이콘 설정에서 아이콘을 선택하고 아이콘 링크 URL을 추가합니다.
탭 아래 디자인, 다음을 업데이트합니다.
- 아이콘 색상: #3e22ff
- 아이콘 크기: 40px
- 여백(좌우): 10px
- 테두리 너비: 2px
- 테두리 색상: #3e22ff
노트 : 여백은 나중에 추가하면 인접한 버튼 사이에 공간이 생깁니다.
탭 아래 Advnaced, 필드에 다음 사용자 정의 CSS를 추가하십시오. 아이콘 요소 (앞서 사각형 아이콘 버튼에 대해 했던 것처럼):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
이제 새 아이콘 버튼을 추가할 때마다 나란히 표시됩니다. 이를 설명하기 위해 기존 아이콘 버튼을 세 번 복제하여 가로 메뉴에 총 XNUMX개의 아이콘 버튼을 생성해 보겠습니다.
그런 다음 필요에 따라 돌아가서 아이콘을 업데이트할 수 있습니다.
결과는 다음과 같습니다.
아이콘 버튼에 호버 효과 추가
호버 효과를 언급하지 않고 아이콘 버튼 디자인에 대해 이야기하기는 어렵습니다. 무시하기에는 너무 재미있습니다.
마우스 오버 시 배경색 및 아이콘 색상 변경
버튼 색상 변경은 인기 있고 효과적인 호버 효과입니다. 예를 들어 사용자가 버튼 위로 마우스를 가져갈 때 배경색과 아이콘 색상을 동시에 변경할 수 있습니다.
이렇게 하려면 아이콘 모듈 설정을 열고 배경색에 대한 호버 옵션을 활성화하고 호버 상태에 대해 다른 색상을 선택합니다. 그런 다음 아이콘에 대해 동일한 작업을 수행할 수 있습니다.
이 예에서는 배경색을 흰색에서 파란색으로, 아이콘을 파란색에서 흰색으로 변경합니다.
마우스 오버 시 아이콘 변경
또 다른 호버 효과는 아이콘을 완전히 변경하는 것입니다. 이렇게 하려면 아이콘 설정에서 아이콘을 선택할 때 호버 상태에 대해 다른 아이콘을 선택할 수 있습니다.
마우스 오버 시 아이콘 버튼 크기
무시하기 어려운 호버 효과는 크기 조정 호버 효과입니다. 아이콘 버튼을 확대하거나 확대합니다. 이러한 유형의 호버 효과를 추가하는 가장 좋은 방법은 Divi의 변형 옵션을 사용하는 것입니다. 이렇게 하면 주변 요소에 영향을 주지 않고 버튼이 커질 수 있습니다.
아이콘 버튼에 스케일 호버 효과를 추가하려면 아이콘 설정을 열고 탭 아래 디자인, 변형 옵션을 찾습니다. 호버 옵션을 활성화한 다음 호버 상태에 다음 변환 배율을 할당합니다.
- 변환 Y: 118%
- 변환 X: 118%
이렇게 하면 사용자가 아이콘 버튼 위로 마우스를 가져갈 때 아이콘 버튼의 크기가 18% 증가합니다.
마우스 오버 시 아이콘 버튼 회전
공중에 떠 있는 개체를 회전하는 것은 항상 재미있는 마이크로 인터랙션입니다. 호버에서 아이콘 버튼을 회전하려면 변환 회전 옵션을 사용할 수 있습니다. 하지만 그 전에 아이콘만 회전하는 것처럼 보이도록 버튼을 원형으로 만들어 보겠습니다.
버튼이 정사각형이라고 가정하고 아이콘을 원형으로 만들려면 네 모서리 모두에서 둥근 모서리 설정을 50%로 업데이트하기만 하면 됩니다.
그런 다음 호버 상태에 다음 변환 회전 값을 포함하도록 변환 옵션을 업데이트합니다.
- 변환 Z 회전: 180deg
작동 중인 4가지 호버 효과를 살펴보겠습니다.
최종 결과
튜토리얼의 최종 결과를 살펴보겠습니다.
다음은 세 가지 아이콘 버튼(표준, 정사각형 및 원형)입니다.
그리고 여기에 호버 효과가 있는 수평 아이콘 버튼 메뉴가 있습니다.
지금 DIVI를 다운로드하세요!!!
결론
아이콘 버튼을 디자인하는 방법을 알고 사이트 웹 필수적이다. 그리고 이 튜토리얼에서 보았듯이 Divi에서는 그렇게 어렵지 않습니다. Divi의 아이콘 모듈에는 창의적인 아이콘 버튼 디자인의 문을 여는 다양한 내장 옵션이 있습니다.
이 기사의 기술이 고유한 아이콘 버튼 디자인의 마법을 해제하는 데 도움이 되기를 바랍니다.
우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
