Divi로 아이콘 글꼴 버튼을 만드는 방법

아이콘 글꼴 버튼은 웹 디자인 세계에서 많이 사용됩니다. 글꼴 아이콘은 크기가 다양할 때 색상과 디자인이 선명하게 유지되므로 버튼에 사용하는 것이 좋습니다. 그리고 Divi에서 아이콘 글꼴 버튼을 만드는 것은 실제로 우아한 아이콘 글꼴을 사용하면 매우 쉽습니다. 이 튜토리얼에서는 Divi의 버튼 모듈과 함께 아이콘 글꼴을 사용하여 단일 아이콘 버튼을 만드는 방법을 보여 드리겠습니다.

이 자습서의 주요 내용은 다음과 같습니다.

• 우아한 글꼴을 사용하여 아이콘을 버튼 텍스트로 추가하는 방법
• 버튼이 완벽한 정사각형 또는 원 모양을 갖도록 패딩 및 테두리 반경을 추가하는 방법
• 마우스 오버 시 버튼 아이콘을 다른 아이콘으로 바꾸는 방법
• 이미지와 겹치도록 버튼 아이콘을 배치하는 방법
• 그리고 더…

엿보기

다음은 앞으로 있을 일에 대한 미리보기입니다...

필요한 것

이 자습서에서는 다음을 사용합니다.

• Divi 테마(분명히)
• 우아한 글꼴 아이콘 – 블로그 게시물에서 zip 파일을 다운로드하면 버튼 모듈에 대한 사용자 정의 글꼴로 사용하기 위해 eliteicons.ttf 글꼴 파일을 끌어올 것입니다.
• B&B 홈페이지 레이아웃(Divi Builder에서 무료로 사용 가능)

시작하자!

버튼 모듈에 우아한 아이콘 글꼴 추가하기

버튼 모듈 추가

시작하려면 새 페이지를 만들고 시각적 빌더를 배포하세요. "Build from Scratch"를 선택한 다음 비주얼 빌더가 배포되면 섹션에 한 열 행을 추가한 다음 행에 버튼 모듈을 추가합니다.

우아한 아이콘 글꼴에서 드래그

우아한 아이콘 글꼴을 얻으려면 우아한 아이콘 글꼴 블로그 게시물로 이동하여 글꼴 파일을 다운로드하십시오. zip 파일 내용을 추출하고 Elegant_font > HTML CSS > 글꼴로 이동하여 우아한 아이콘 글꼴 파일을 찾습니다. 그런 다음 컴퓨터 파일에서 "ElegantIcons.ttf" 파일을 끌어서 비주얼 빌더에 놓습니다.

그러면 업로드 글꼴 모달이 자동으로 나타납니다. 업로드 버튼을 클릭하기만 하면 Divi Builder에 글꼴을 업로드할 수 있습니다.

이제 비주얼 빌더에서 모듈 글꼴을 사용자 정의할 때 우아한 아이콘 글꼴에 액세스할 수 있습니다.

버튼 모듈 설정으로 이동하여 방금 업로드한 새로운 우아한 아이콘 글꼴로 버튼 글꼴을 업데이트합니다. "사용자 정의 글꼴" 아래의 아이콘 목록에 표시됩니다.

이제 버튼 텍스트가 많은 아이콘으로 변형되었음을 알 수 있습니다. 버튼 텍스트 입력 상자에 입력된 각 문자에는 현재 사용 중인 문자/문자에 해당하는 아이콘이 있기 때문입니다.

버튼에 사용할 아이콘은 하나만 필요하므로 키보드에서 아무 문자나 선택하여 해당 문자와 ​​관련된 아이콘을 생성할 수 있습니다. 예를 들어 버튼 텍스트에 숫자 5를 입력하면 오른쪽 갈매기형 화살표가 표시됩니다.

마우스 오버 시 버튼 아이콘 교환

아시다시피 버튼 모듈에는 마우스 오버 시 아이콘을 추가하는 옵션이 포함되어 있습니다. 이 기능을 사용하여 멋진 호버 효과를 위해 아이콘 글꼴을 호버 아이콘으로 바꿀 수 있습니다. 다음과 같이 버튼 설정을 수정하기만 하면 됩니다.

버튼 텍스트 크기: 30px
버튼 아이콘: 스크린샷 참조(버튼에 사용되는 아이콘 글꼴을 대체할 아이콘임)
버튼 아이콘 색상: #0c71c3(버튼 텍스트에 사용된 색상과 일치해야 함)
버튼 아이콘 배치: 왼쪽
버튼 호버 텍스트 색상: rgba(255,255,255,0) (호버 시 버튼 아이콘 글꼴을 숨기기 위해 완전히 투명함)
사용자 지정 패딩: 왼쪽 1em, 오른쪽 1em(이 패딩은 버튼의 기본 패딩을 무시하고 마우스 오버 시 확장되지 않도록 함)

이제 사용자 정의 CSS에서 이전 요소의 여백을 재정의하기만 하면 됩니다. 고급 탭으로 이동하여 이전 상자에 다음 CSS를 입력합니다.

margin-left: 0 !important;

이제 버튼 아이콘이 마우스 오버 시 호버 아이콘으로 바뀝니다.

버튼 텍스트 크기로 확장되는 완벽한 원형 아이콘 버튼 만들기

원형 버튼 디자인은 단일 아이콘 버튼에 매우 적합합니다. 그리고 버튼 모듈 간격의 내부 동작을 이해하면 버튼 텍스트 크기에 따라 크기가 조정되는 완벽한 원형 버튼을 만들 수 있습니다.

비결은 "em" 길이 단위를 사용하여 버튼 간격을 지정하는 것입니다. 이 길이 단위는 버튼 텍스트 크기에 상대적입니다. 따라서 버튼 텍스트 크기가 30px이면 1em도 30px입니다(2em은 60px 등...). 이것을 알면 버튼 주위의 패딩이 4면 모두에서 동일해야 합니다. 그러나 당신이 고려하지 않았을 수도 있는 것은 버튼 텍스트 라인 높이가 기본적으로 1.7em이라는 것입니다. 즉, 상단 및 하단 패딩 값을 추가할 때 이를 고려해야 합니다.

원 버튼을 만드는 데 필요한 패딩 값 뒤에 숨겨진 수학을 알고 싶은 분들을 위해 다음을 참조하세요.

왼쪽 및 오른쪽 패딩의 경우 둘 다 1em으로 설정합니다. 이것은 우리의 총 버튼 너비가 90px(또는 3em)이 된다는 것을 의미합니다. 왜냐하면…

왼쪽 패딩 30px + 아이콘 글꼴 30px + 오른쪽 패딩 30px = 총 90px

버튼 텍스트 줄 높이는 1.7em으로 51px와 동일한 버튼 텍스트 크기(30px)의 170%에 해당합니다.

상단 및 하단 패딩의 경우 둘 다 0.65em으로 설정합니다. 0.65em은 19.5px에 해당하는 버튼 텍스트 크기(30px)의 65%에 해당합니다.

그러므로…

상단 패딩 19.5px + 줄 높이 51px + 하단 패딩 19.5px = 총 90px

즉, 버튼 텍스트가 30px로 설정되면 전체 버튼 크기는 90x90px(완전한 정사각형)이 됩니다. 사실 이렇게 생각하시면 됩니다. 버튼 텍스트 크기로 설정한 것이 무엇이든, 버튼의 전체 크기는 해당 값의 3배가 됩니다. 따라서 40px 버튼 텍스트는 120px x 120px 등의 버튼을 생성합니다.

지금은 버튼의 치수가 정확하지만 여전히 정사각형입니다. 사각형 버튼을 완벽한 원형 버튼으로 변경하기 위해 테두리 반경을 50% 추가하기만 하면 됩니다.

버튼을 원형 버튼으로 변경하려면 다음이 필요합니다.

버튼 테두리 반경: 50%
맞춤 패딩: 위쪽 0.65em, 아래쪽 0.65em, 오른쪽 1em, 왼쪽 1em

잊지 마세요. 버튼 텍스트 크기를 조정할 수 있으며 패딩이 텍스트 크기에 맞게 조정되므로 버튼이 완벽하게 원형으로 유지됩니다.

Divi 레이아웃에 아이콘 버튼 추가하기

Divi를 사용하면 미리 만들어진 레이아웃의 디자인에 맞게 단일 아이콘 버튼을 쉽게 추가하고 사용자 지정할 수 있습니다.

이 예에서는 Bed & Breakfast 홈 페이지 레이아웃에 단일 아이콘 버튼을 추가하는 방법을 보여 드리겠습니다.

페이지에 레이아웃을 추가하려면 페이지 하단의 보라색 아이콘을 클릭하여 설정 메뉴를 엽니다(비주얼 빌더가 활성화되어 있는지 확인). 그런 다음 라이브러리에서 로드 아이콘을 클릭합니다. Bed & Breakfast 홈 페이지 레이아웃을 선택하고 "이 레이아웃 사용" 버튼을 클릭하여 레이아웃을 페이지에 배포합니다.

이미지에 아이콘 버튼 추가하기

특정 제품이나 서비스로 연결되는 추가 CTA의 이미지 모서리를 오버레이하는 작은 아이콘 버튼을 추가한다고 가정해 보겠습니다. 이미지 아래에 버튼 모듈을 추가하고 아이콘 글꼴을 포함하고 일부 사용자 정의 간격으로 이미지와 겹치도록 사용자 정의하기만 하면 됩니다.

홈페이지 레이아웃에서 "회사 소개" 섹션을 찾으십시오. 그런 다음 "더블룸"을 표시하는 데 사용된 이미지 중 하나 바로 아래에 버튼 모듈을 추가합니다(3열 행의 첫 번째 열에 있는 첫 번째 항목).

그런 다음 버튼 설정을 열고 버튼 텍스트 상자에 대문자 "P"를 입력합니다. 우아한 글꼴을 버튼 글꼴로 선택하면 이 아이콘이 아이콘으로 변경됩니다.

버튼 디자인을 레이아웃과 일치시키는 작업을 바로 시작하려면 버튼 설정을 저장하고 레이아웃의 상단 섹션에서 "지금 예약" 버튼을 찾으세요. 버튼 설정을 열고 버튼 옵션 토글 제목을 마우스 오른쪽 버튼으로 클릭하고 목록에서 "버튼 스타일 복사" 옵션을 선택하여 버튼 스타일을 복사합니다.

이제 이미지 아래에 추가한 버튼 모듈을 마우스 오른쪽 버튼으로 클릭하고 "버튼 스타일 붙여넣기"를 선택합니다.

그런 다음 다음과 같이 버튼 설정을 업데이트합니다.

버튼 글꼴: 우아한 글꼴
버튼 테두리 너비: 0px
버튼 아이콘 표시: 아니오

그런 다음 버튼이 완벽한 정사각형이 되도록 멋진 맞춤 패딩을 추가해 보겠습니다.

맞춤 패딩: 위쪽 0.65em, 아래쪽 0.65em, 왼쪽 1em, 오른쪽 1em

버튼이 이미지의 오른쪽 하단 모서리와 겹치도록 위치를 지정하려면 먼저 위 이미지 모듈의 하단 여백을 제거해야 합니다. 버튼 바로 위에 있는 이미지의 이미지 모듈 설정을 열고 하단 여백을 0px로 설정합니다.

이제 버튼 높이와 동일한 사용자 정의 음수 여백 값을 사용하여 이미지 위로 버튼을 당겨야 합니다. 이렇게 하려면 버튼의 높이를 결정해야 합니다. 이 게시물의 앞부분에서 언급했듯이 사용자 지정 패딩이 있으면 현재 버튼 텍스트 크기를 기반으로 버튼의 정확한 크기를 알 수 있습니다. 버튼 텍스트 크기가 20px이므로 버튼 높이는 60px인 3em(버튼 텍스트 크기의 3배)이라는 것을 알고 있습니다. 따라서 다음과 같이 버튼에 대한 사용자 지정 여백을 설정해야 합니다.

맞춤 여백: -60px 상단

그런 다음 버튼 정렬을 오른쪽으로 조정하여 버튼을 오른쪽에 배치할 수 있습니다.

이제 이미지와 버튼에 대한 작업 디자인이 생겼습니다. 섹션의 모든 이미지에 동일한 버튼을 추가하기만 하면 됩니다.

이미지의 아래쪽 여백을 제거했으므로 스타일 확장을 사용하여 섹션의 모든 이미지에 변경 사항을 쉽게 적용할 수 있습니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 "이미지 스타일 확장"을 선택합니다.

스타일 확장 팝업에서 전체 옵션에 대해 "이 섹션"을 선택하고 확장 버튼을 클릭합니다. 이제 모든 이미지의 하단 여백이 0px입니다.

마지막 단계는 단순히 각 이미지 아래에 Button 모듈을 복사하여 붙여넣는 것입니다.

다음은 최종 디자인입니다.

그리고 적절한 간격 기술을 사용했기 때문에 버튼은 모바일에서도 제자리에 유지됩니다…

버튼 모듈을 사용하여 사용 가능한 아이콘

버튼 모듈 버튼 텍스트는 키보드에서 사용할 수 있는 문자로 제한되므로 각 키와 연결된 사용 가능한 아이콘을 찾으려면 해당 키를 탐색해야 합니다. 이를 수행하는 쉬운 방법은 버튼 글꼴이 우아한 글꼴로 설정된 버튼 모듈을 만들고 버튼 텍스트 상자에 문자를 입력하는 것입니다.

다음은 해당 글꼴 아이콘이 있는 캐릭터의 스크린샷입니다.

이 프로세스가 제한적이라고 생각되면 항상 텍스트 모듈을 사용하여 여기에 나열된 유니코드를 사용하여 아이콘 링크를 만들 수 있습니다.

마지막 생각들

Divi의 버튼 모듈과 함께 우아한 아이콘 글꼴을 사용하는 것은 웹사이트를 위한 단일 아이콘 버튼을 만드는 편리한 방법입니다. 이렇게 하면 고유한 텍스트 스타일, 호버 효과 등으로 버튼을 사용자 지정하기 위해 모듈 설정으로 창의력을 발휘할 수 있는 몇 가지 문이 열립니다. 저는 특히 버튼이 완벽한 정사각형이나 원의 모양을 갖도록 하는 사용자 지정 버튼 간격 값을 좋아합니다.

아이콘 버튼에는 수많은 용도가 있습니다. 내가 다룬 예제 사용 사례가 자신의 프로젝트에 약간의 영감을 줄 수 있기를 바랍니다.

더 많은 아이디어가 필요하면 우아한 아이콘 글꼴을 사용하는 방법이나 웹사이트에 아이콘 글꼴을 포함하는 방법을 확인하세요.

아래 의견에서 귀하의 아이디어를 듣고 싶습니다.

건배!