아이콘 글꼴이있는 버튼은 웹 디자인 세계에서 많이 사용됩니다. 상징적 인 글꼴은 다양한 크기로 확장 될 때 색상과 디자인이 선명하게 유지되므로 버튼에 사용하는 것이 좋습니다. 그리고 Divi에서 상징적 인 글꼴로 버튼을 만드는 것은 실제로 라이브러리의 글꼴을 사용하여 매우 쉽습니다. " ElegantIcons". 이 튜토리얼에서는 Divi 버튼 모듈과 함께 아이콘 글꼴을 사용하여 단일 아이콘 버튼을 만드는 방법을 보여줍니다.
이 자습서의 주요 내용은 다음과 같습니다.
- 댓글 활용 자 ElegantIcons 아이콘을 버튼 텍스트로 추가
- 패딩 및 테두리 반경을 추가하여 버튼을 완벽한 정사각형 또는 원처럼 보이게 만드는 방법
- 마우스를 올릴 때 버튼 아이콘을 다른 아이콘으로 바꾸는 방법
- 버튼 아이콘을 배치하여 이미지를 오버레이하는 방법
- 그리고 더 ...
측량
다가오는 일의 미리보기가 있습니다 ...
뭐가 필요해?
이 튜토리얼에서는 다음을 사용합니다.
- 디비 테마 (확실히)
- 세련된 글꼴 아이콘, 튜토리얼 우아한 테마 훨씬 더 정확합니다. 블로그 게시물에서 zip 파일을 다운로드 한 후에는이를 eleganticons.ttf 글꼴 파일로 드래그하여 버튼 모듈의 사용자 지정 글꼴로 사용합니다.
- Bed & Breakfast 홈페이지 (Divi Builder에서 무료로 사용 가능)
시작하자!
버튼 모듈에 Elegant Icons 글꼴 추가
버튼 모듈 추가
시작하려면 새 페이지를 만들고 비주얼 빌더를 배포하세요. "Build from Scratch"를 선택한 다음 비주얼 빌더가 배포 된 후 섹션에 열 행을 추가 한 다음 행에 단추 모듈을 추가합니다.
드래그 세련된 아이콘 글꼴
컬러 게임을 얻으려면 ElegantFonts당신은 다운로드 할 수 있습니다 이 링크를 통해이 글꼴 팩. 추출 내용 zip 파일에서 Elegant_font > HTML CSS > class로 이동하여 우아한 아이콘 글꼴 파일을 찾으세요. 그런 다음 "ElegantIcons.ttf" 파일을 컴퓨터로 끌어서 비주얼 빌더에 놓습니다.
그러면 자동으로 글꼴 다운로드 모달이 나타납니다. 다운로드 버튼을 클릭하여 Divi Builder에 글꼴을 다운로드하십시오.
이제 비주얼 빌더에서 모드 글꼴을 사용자 정의 할 때 세련된 아이콘 글꼴에 액세스 할 수 있습니다.
단추 모듈 설정으로 이동하여 방금 다운로드 한 새 Elegant Icon 글꼴로 단추 글꼴을 업데이트하십시오. "사용자 정의 글꼴"아래의 아이콘 목록에 나타납니다.
버튼 텍스트가 아이콘 모음으로 바뀌 었음을 알 수 있습니다. 실제로 버튼 텍스트 입력 영역에 입력 된 각 문자는 현재 사용되는 문자 / 문자에 해당하는 아이콘을 갖습니다.
버튼에는 아이콘이 하나만 필요하므로 키보드에서 아무 문자 나 선택하여 해당 문자와 관련된 아이콘을 생성 할 수 있습니다. 예를 들어 오른쪽 갈매기 형 화살표를 얻으려면 버튼 텍스트에 숫자 5를 입력합니다.
마우스 오버시 Exchange 버튼 아이콘
아시다시피 버튼 모듈에는 마우스 오버시 아이콘을 추가하는 옵션이 포함되어 있습니다. 이 기능을 사용하여 아이콘 글꼴을 호버 아이콘으로 대체하여 멋진 호버 효과를 얻을 수 있습니다. 다음과 같이 버튼 설정을 변경하기 만하면됩니다.
버튼 텍스트 크기 : 30px 버튼 아이콘 : 스크린 샷 참조 (버튼에 사용되는 글꼴 아이콘을 대체하는 아이콘이 됨) 아이콘 버튼 색상 : # 0c71c3 (버튼 텍스트에 사용 된 색상과 일치해야 함) ) 버튼 아이콘 배치 : 왼쪽 버튼 호버 텍스트 색상 : rgba (255,255,255,0) (호버 버튼 아이콘의 글꼴을 숨기기 위해 완전히 투명합니다). 맞춤 채우기 : 첫 번째 왼쪽, 첫 번째 오른쪽 (이 채우기는 마우스를 올리는 동안 펼쳐지는 것을 대체 함)
이제 우리가해야 할 일은 사용자 정의 CSS에서 앞 요소의 여백을 바꾸는 것입니다. 고급 탭으로 이동하여 전면 상자에 다음 CSS 코드를 입력합니다.
margin-left: 0 !important; |
이제 버튼 아이콘이 마우스 오버 아이콘으로 대체됩니다.
버튼 텍스트 크기로 조정 된 원이있는 크리에이티브 아이콘 버튼
원형 모양의 버튼은 단일 아이콘 버튼에 적합합니다. 그리고 버튼 모듈 간격의 내부 동작을 이해한다면 버튼 텍스트의 크기에 맞게 크기가 조정되는 완벽한 원형 버튼을 만들 수 있습니다.
비결은 길이의 "em"단위를 사용하여 버튼의 간격을 두는 것입니다. 이 길이 단위는 버튼의 텍스트 크기에 상대적입니다. 따라서 버튼 텍스트 크기가 30px이면 1em도 30px입니다 (2em은 60px 등…). 이를 알면 버튼 주위의 패딩이 4면 모두에서 동일하게 유지되도록해야합니다. 그러나 고려하지 않았을 수있는 것은 버튼 텍스트 줄 높이가 기본적으로 1.7em이라는 것입니다. 즉, 상단 및 하단 패딩 값을 추가 할 때이를 고려해야합니다.
원 버튼을 만들어야하는 패딩 값 뒤에있는 계산을 알고 싶은 분은 다음과 같습니다.
왼쪽 및 오른쪽 채우기의 경우 둘 다 1em으로 설정합니다. 즉, 버튼의 총 너비는 90px (또는 3em)이됩니다.
왼쪽 30px 패딩 + 글꼴 아이콘의 경우 30px + 오른쪽 30px 패딩 = 총 90px
버튼 텍스트 행의 높이는 1.7em으로, 170px 인 버튼 텍스트 크기 (30px)의 51 %에 해당합니다.
상단 및 하단 채우기의 경우 둘 다 0,65em으로 설정합니다. 0.65em은 버튼 텍스트 크기 (65px)의 30 %에 해당하며 19.5px에 해당합니다.
그래서 ...
19.5px 상단 패딩 + 51px 줄 높이 + 19.5px 하단 패딩 = 총 90px
즉, 버튼 텍스트가 30px로 설정되면 총 버튼 크기는 90px x 90px (완벽한 정사각형)가됩니다. 사실 그렇게 생각할 수 있습니다. 버튼 텍스트 크기에 관계없이 총 버튼 크기는 값의 3 배입니다. 따라서 40px 버튼 텍스트는 120px x 120px 버튼 등을 만듭니다.
현재 버튼의 크기는 정확하지만 여전히 정사각형입니다. 우리가해야 할 일은 50 % 테두리 반경을 추가하여 사각형 버튼을 완벽한 원형 버튼으로 변경하는 것입니다.
버튼을 원 버튼으로 변경하려면 다음과 같이하십시오.
테두리 반경 버튼 : 50 %
사용자 정의 장식품 : 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left
버튼 텍스트 크기를 조정할 수 있으며 버튼은 텍스트 크기 채우기와 같이 완벽하게 원 안에 유지됩니다.
Divi에 버튼 추가하기
Divi를 사용하면 미리 정의 된 레이아웃의 디자인에 맞게 고유 한 아이콘 버튼을 쉽게 추가하고 사용자 지정할 수 있습니다.
이 예에서는 Bed & Breakfast 홈페이지 레이아웃에 단일 아이콘 버튼을 추가하는 방법을 보여 드리겠습니다.
페이지에 레이아웃을 추가하려면 페이지 하단의 보라색 아이콘을 클릭하여 설정 메뉴를 엽니 다 (비주얼 생성기가 활성화되어 있는지 확인). 그런 다음 라이브러리에서로드 아이콘을 클릭합니다. Bed & Breakfast 홈 페이지의 레이아웃을 선택하고 "이 레이아웃 사용"버튼을 클릭하여 페이지에 레이아웃을 배포합니다.
이미지에 아이콘 버튼 추가
특정 제품 또는 서비스와 관련된 추가 CTA로 이미지 모서리를 오버레이하는 작은 아이콘 버튼을 추가한다고 가정 해 보겠습니다. 이미지 아래에 버튼 모듈을 추가하고 아이콘 글꼴을 포함하도록 사용자 정의하고 아이콘이 사용자 정의 간격으로 이미지와 겹치도록하기 만하면됩니다.
홈 페이지에서 "회사 소개"섹션을 찾으십시오. 그런 다음 "더 블룸"(XNUMX 개 열 행의 첫 번째 열에있는 첫 번째 열)을 표시하는 데 사용 된 이미지 중 하나 바로 아래에 단추 모듈을 추가합니다.
다음으로 버튼 설정을 열고 버튼 텍스트 상자에 대문자 "P"를 입력합니다. 버튼 글꼴과 같은 멋진 배경 세트를 선택하면 아이콘이 변경됩니다.
버튼 디자인을 레이아웃과 빠르게 일치 시키려면 버튼 설정을 저장하고 레이아웃 상단에서 "지금 예약"버튼을 찾으십시오. 버튼 옵션 토글 제목을 마우스 오른쪽 버튼으로 클릭하고 목록에서 "버튼 스타일 복사"옵션을 선택하여 버튼 설정을 열고 버튼 스타일을 복사합니다.
이제 이미지 아래에 추가 한 모듈을 마우스 오른쪽 버튼으로 클릭하고 "붙여 넣기 단추 스타일"을 선택하십시오.
그런 다음 다음과 같이 버튼 설정을 업데이트하십시오.
폰트 버튼 : Awesome 폰트
글꼴 버튼 테두리 너비 : 0px
버튼 아이콘 표시 : 아니요
그런 다음 버튼이 완벽한 정사각형이되도록 영리한 사용자 정의 패딩을 추가하십시오.
사용자 정의 채우기 : 0.65em Top, 0.65em Bottom, 1em Left, 1em Right
이미지의 오른쪽 아래 모서리를 덮도록 단추를 배치하려면 먼저 위의 이미지 모듈에서 아래쪽 여백을 제거해야합니다. 버튼 바로 위에있는 이미지 이미지 모듈 설정을 열고 아래쪽 여백을 0px로 설정합니다.
이제 버튼 높이와 같은 사용자 지정 음수 여백 값을 사용하여 이미지 위로 버튼을 드래그해야합니다. 이렇게하려면 버튼의 높이를 결정해야합니다.
이 기사의 앞부분에서 언급했듯이 사용자 지정 채우기를 사용하면 단추 텍스트의 현재 크기를 기반으로 단추의 정확한 크기를 알 수 있습니다. 버튼 텍스트 크기가 20px이므로 버튼 높이가 3em (버튼 텍스트 크기의 3 배) 인 60px라는 것을 알고 있습니다. 따라서 다음과 같이 버튼에 대한 사용자 정의 여백을 설정해야합니다.
맞춤 여백 : -60px 상단
그런 다음 오른쪽 버튼의 정렬을 조정하여 버튼을 오른쪽에 배치 할 수 있습니다.
이제 이미지와 버튼에 대한 작업 디자인이 생겼습니다. 섹션의 모든 이미지에 동일한 버튼을 추가하기 만하면됩니다.
이미지의 아래쪽 여백을 제거 했으므로 스타일 확장 옵션을 사용하여 섹션의 모든 이미지에이 변경 사항을 쉽게 적용 할 수 있습니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 "그림 스타일 확장"을 선택합니다.
스타일 확장 대화 상자에서 교차 옵션으로 "이 섹션"을 선택하고 확장 버튼을 클릭합니다. 이제 모든 이미지의 하단 여백이 0px입니다.
마지막 단계는 각 이미지 아래에 Button 모듈을 복사하여 붙여 넣는 것입니다.
다음은 최종 디자인입니다.
적절한 간격 기술을 사용했기 때문에 버튼은 모바일에서도 그대로 유지됩니다 ...
버튼 모듈을 사용하여 사용 가능한 아이콘
버튼 모듈 버튼 텍스트는 키보드에서 사용할 수있는 문자로 제한되므로 이러한 키를 탐색하여 각 키와 관련된 사용 가능한 아이콘을 찾아야합니다. 이를위한 쉬운 방법은 버튼 글꼴이 우아한 글꼴로 설정된 버튼 모듈을 만들고 버튼 텍스트 상자에 문자를 입력하는 것입니다.
다음은 해당 글꼴 아이콘이있는 캐릭터의 스크린 샷입니다.
이 목록이 다소 완전하다고 생각되면 언제든지 텍스트 모듈을 사용하여 나열된 Unic 코드를 사용하여 아이콘 링크를 만들 수 있습니다. 여기에서 .
마지막 생각
Divi의 버튼 모듈과 함께 우아한 아이콘을 사용하는 것은 귀하의 고유한 버튼을 만드는 편리한 방법입니다 사이트 웹. 이렇게 하면 고유한 텍스트 스타일, 호버 효과 등으로 버튼을 사용자 지정할 수 있는 모듈 설정을 통해 창의성의 문을 열 수 있습니다. 저는 특히 버튼이 완벽한 정사각형이나 원의 모양을 갖도록 하는 사용자 지정 버튼 간격 값을 좋아합니다.
아이콘 버튼에는 수많은 용도가 있습니다. 이 튜토리얼에서 다루는 사용 예제가 여러분의 프로젝트에 영감을 더 해주길 바랍니다.
