Divi로 독특한 소셜 미디어 팔로우 버튼 호버 효과를 만드는 방법

Divi의 소셜 미디어 팔로우 모듈을 사용하면 웹사이트 어디에서나 소셜 네트워크에 중요한 링크를 쉽게 스타일 지정하고 추가할 수 있습니다. 그리고 Divi의 강력한 내장 호버 효과로 손을 더럽히고 싶다면 소셜 미디어 팔로우 버튼에 대한 창의적인 호버 효과도 디자인할 수 있습니다.

이 튜토리얼에서는 여러분을 놀라게 할 수 있는 독특한 소셜 미디어 팔로우 버튼 호버 효과를 보여 드리겠습니다.

확인 해봐!

엿보기

여기에서 우리가 만들 호버 효과를 살짝 엿볼 수 있습니다.

1부: 소셜 미디어 팔로우 버튼을 강조하기 위해 상자 그림자 이동하기

경계에서 점으로

점에서 경계로

바운싱 섀도우 1

바운싱 섀도우 2

파트 1 호버 효과 구축 시작

2부: 마우스 오버 시 색상, 크기 및 모양 변경

크기 및 색상 변경

크기, 색상 및 모양 변경

파트 2 호버 효과 구축 시작

3부: 필터 효과

3부 호버 효과 만들기 시작

4부: 화면 혼합 및 필터 효과가 있는 큰 아이콘

4부 호버 효과 만들기 시작

시작하기

YouTube 채널 구독

이 튜토리얼을 진행하려면 Divi 테마가 설치되고 활성화되기만 하면 됩니다. 그런 다음 새 페이지를 만들고 페이지 제목을 지정합니다. 그런 다음 클릭하여 Divi Builder를 사용하고 미리 만들어진 레이아웃 사용 옵션을 선택합니다. 라이브러리에서 로드 팝업 모달에서 앱 개발자 레이아웃 팩을 선택합니다. 그런 다음 클릭하여 소셜 미디어 팔로우 버튼 디자인을 시작하려면 앱 개발자 홈 페이지 레이아웃을 사용하겠습니다.

페이지를 게시하고 버튼을 클릭하여 프런트 엔드에서 빌드합니다.

이제 페이지 하단의 소셜 미디어 팔로우 버튼이 포함된 섹션을 제외하고 페이지의 모든 섹션을 삭제합니다.

이것은 호버 효과를 만들기 위한 시작 템플릿 역할을 합니다.

필요할 때 이러한 소셜 미디어 팔로우 버튼 디자인의 새로운 버전을 추가할 수 있도록 섹션을 Divi 라이브러리에 저장해 보겠습니다.

페이지에서 섹션을 여러 번 복제할 수도 있습니다. 이렇게 하면 미리 만들어진 섹션으로 시작하여 다양한 호버 효과를 만들 수 있습니다.

이제 호버 효과를 만들 준비가 되었습니다.

시작하자.

#1 소셜 미디어 팔로우 버튼을 강조하기 위한 상자 그림자 이동

경계에서 점으로

이 호버 효과를 위해 호버 시 버튼 위로 축소되고 호버링되는 버튼 주위에 상자 그림자를 추가합니다. 이렇게 하려면 소셜 미디어 팔로우 모듈을 열고 클릭하여 Facebook 소셜 네트워크 설정을 엽니다.

그런 다음 아이콘에 사용되는 배경색을 클립보드에 복사합니다(#3b5998). 이 색상은 상자 그림자에 사용됩니다.

이제 디자인 탭을 열고 다음을 업데이트하십시오.

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px(기본값), -46px(호버링)
상자 그림자 흐림 강도: 0px
상자 그림자 확산 강도: 5px(기본값), -16px(호버링)

그림자 색상의 경우 배경색(#3b5998)을 붙여넣고 불투명도를 50% 줄입니다. 이렇게 하면 버튼 배경색의 밝은 버전을 얻을 수 있습니다.

그림자 색상: rgba(59,89,152,0.5)

이제 상자 그림자 스타일 범주를 마우스 오른쪽 버튼으로 클릭하고 상자 그림자 스타일 복사를 선택합니다.

facebook 소셜 네트워크에 대한 설정을 저장한 다음 각 소셜 네트워크를 마우스 오른쪽 버튼으로 클릭하고 각각에 대해 항목 스타일 붙여넣기를 선택합니다. 그러면 나머지 버튼에 동일한 상자 그림자 스타일이 적용됩니다.

그러나 여전히 각각에 특정한 상자 그림자의 색상을 업데이트해야 합니다. 그렇게 하려면 Facebook 소셜 네트워크에 대해 수행한 것과 동일한 프로세스를 반복합니다. 특정 소셜 네트워크 설정을 열고 사용 중인 배경색을 복사하여 새 상자 그림자 색상으로 붙여넣은 다음 불투명도를 50%로 줄입니다.

나머지 소셜 네트워크 각각에 대한 상자 그림자 색상은 다음과 같습니다.

Twitter 상자 그림자 색상: rgba(0,172,237,0.5)
인스타그램 박스 섀도우 컬러: rgba(234,44,89,0.5)
드리블 박스 그림자 색상: rgba(234,76,141,0.5)
유튜브 박스 섀도우 컬러: rgba(168,36,0,0.5)

상자 그림자 색상이 업데이트되면 최종 결과를 확인하십시오.

점에서 경계로

상자 그림자 수직 위치 및 확산 강도에 대한 기본값 및 호버 값을 전환하여 호버 효과를 쉽게 되돌릴 수 있습니다.

섹션을 복제한 다음("점으로 경계선" 디자인을 유지하려는 경우) 소셜 미디어 팔로우 모듈 설정을 엽니다. 그런 다음 Facebook 소셜 네트워크에 대한 설정을 열고 다음을 업데이트합니다.

상자 그림자 수직 위치: -46px(기본값), 0px(호버링)
상자 그림자 확산 강도: -16px(기본값), 5px(호버링)

나머지 소셜 네트워크 각각에 대해 이러한 새 상자 그림자 설정을 업데이트해야 합니다. 수동으로 수행하거나 오른쪽 클릭을 사용하여 상자 그림자 수직 위치 및 확산 강도를 복사한 다음 각 네트워크에 붙여넣을 수 있습니다.

완료되면 최종 디자인은 다음과 같습니다.

바운싱 섀도우 효과

이 디자인 및 호버 효과의 다음 버전에서는 기본적으로 각 버튼의 상자 그림자(점)가 동일한 위치에서 시작되도록 할 것입니다. 이것은 일종의 튀는 효과를 만듭니다.

시작하려면 이전에 만든 "경계선에 점" 디자인을 복제할 수 있습니다. 소셜 미디어 팔로우 모듈 설정을 연 다음 페이스북 소셜 네트워크 설정을 엽니다. 다음 상자 그림자 스타일을 업데이트합니다.

상자 그림자 수평 위치: 140px(기본값), 0px(호버링)
상자 그림자 수직 위치: -70px(기본값), 0px(호버링)

Twitter 소셜 네트워크의 경우 다음을 업데이트하십시오.

상자 그림자 수평 위치: 70px(기본값), 0px(호버링)
상자 그림자 수직 위치: -70px(기본값), 0px(호버링)

Instagram 소셜 네트워크의 경우 다음을 업데이트하십시오.

상자 그림자 수평 위치: 70px(기본값), 0px(호버링)
상자 그림자 수직 위치: -70px(기본값), 0px(호버링)

Dribble 소셜 네트워크의 경우 다음을 업데이트하십시오.

상자 그림자 수평 위치: -70px(기본값), 0px(호버링)
상자 그림자 수직 위치: -70px(기본값), 0px(호버링)

Youtube 소셜 네트워크의 경우 다음을 업데이트하십시오.

상자 그림자 수평 위치: -140px(기본값), 0px(호버링)
상자 그림자 수직 위치: -70px(기본값), 0px(호버링)

최종 결과를 확인하세요.

처음에 점이 표시되지 않도록 하려면 기본 상자 그림자 색상을 투명으로 설정한 다음 호버 시 상자 그림자 색상을 추가할 수 있습니다. 이렇게 하면 다음과 같은 디자인이 표시됩니다.

#2 호버에서 색상, 크기 및 모양 변경

다음 호버 효과 시리즈에서는 호버링 시 소셜 미디어 버튼의 색상, 크기 또는 모양을 쉽게 변경하는 방법을 보여 드리겠습니다. 시작하려면 앱 개발자 홈 페이지 레이아웃에서 최신 버전의 소셜 미디어 팔로우 버튼 섹션을 사용하고 있는지 확인하세요. Divi 라이브러리에 저장했다면 지금이 페이지에 추가하는 것이 좋습니다.

색상 변경

호버에서 소셜 미디어 버튼의 색상을 변경하는 것은 매우 간단합니다. 이 예에서는 기본적으로 소셜 네트워크 색상으로 바뀌는 어두운 회색 배경색으로 시작하겠습니다.

이렇게 하려면 소셜 미디어 팔로우 모듈을 연 다음 Facebook 네트워크 설정을 엽니다. 다음을 업데이트합니다.

배경색: #333333(기본값), #3b5998(마우스오버)

그런 다음 이 프로세스를 계속하여 나머지 4개의 소셜 네트워크 배경색을 다음과 같이 업데이트합니다.

Twitter 배경색: #333333(기본값), #00aced(마우스를 가리킴)
Instagram 배경색: #333333(기본값), #ea2c59(호버링)
드리블 배경색: #333333(기본값), #ea4c8d(호버링)
유튜브 배경색: #333333(기본값), a82400(마우스오버)

결과는 다음과 같습니다.

크기 변경

버튼의 크기를 변경하기 위해 호버에 상자 그림자를 추가할 수 있습니다. 이렇게 하면 호버 시 인접한 버튼을 밀어낼 실제 공간을 버튼에 추가하지 않고도 버튼이 더 커질 수 있습니다.

이렇게 하려면 Facebook 네트워크 설정을 열고 다음 상자 그림자 스타일을 추가합니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 0px
상자 그림자 확산 강도: 0px(기본값), 10px(호버링)
그림자 색상: #3b5998(버튼의 호버 배경색과 동일한 색상이어야 함)

나머지 소셜 네트워크 버튼에 동일한 상자 그림자 디자인을 추가하는 프로세스의 속도를 높이려면 Facebook 네트워크의 상자 그림자 카테고리를 마우스 오른쪽 버튼으로 클릭하고 "상자 그림자 스타일 저장"을 클릭하십시오.

설정을 저장한 다음 각 소셜 네트워크를 마우스 오른쪽 버튼으로 클릭하고 "항목 스타일 붙여넣기"를 선택합니다.

이제 상자 그림자 색상을 호버 배경색과 일치하는 올바른 소셜 네트워크 색상으로 업데이트하기만 하면 됩니다.

이 업데이트를 수행하려면 다음을 수행하십시오.

트위터 박스 섀도우 색상: #00aced
인스타그램 박스 섀도우 색상: #ea2c59
드리블 박스 섀도우 색상: #ea4c8d
유튜브 박스 섀도우 색상: #a82400

다음은 최종 결과입니다.

모양 변경

마우스 오버 시 버튼의 모양을 변경하려면 "둥근 모서리" 옵션을 조정하기만 하면 됩니다. 이 소셜 미디어 팔로우 모듈은 현재 둥근 모서리가 40px로 설정되어 버튼을 원형으로 만듭니다. 사각형으로 변경하려면 마우스를 가져갈 때 둥근 모서리를 0px로 조정하기만 하면 됩니다.

이렇게 하려면 Facebook 네트워크 설정을 열고 다음을 업데이트하십시오.

둥근 모서리(마우스 오버): 네 모서리 모두에 4픽셀

그런 다음 테두리 스타일을 복사하여 나머지 각 네트워크에 붙여넣습니다.

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

#3 필터 효과

이 다음 호버 효과에 대해 몇 가지 필터 효과를 사용하여 호버에서 소셜 미디어 버튼의 색상을 변경하는 방법을 보여 드리겠습니다. 시작하려면 앱 개발자 홈 페이지 레이아웃에서 최신 버전의 소셜 미디어 팔로우 버튼 섹션을 사용하고 있는지 확인하세요. Divi 라이브러리에 저장했다면 지금이 페이지에 추가하는 것이 좋습니다.

마우스 오버 시 채도 및 필터 반전 효과

채도 및 필터 반전 효과를 사용하면 호버에서 소셜 미디어 버튼의 스타일을 변경하는 간단하고 강력한 방법입니다. 이 예에서는 채도와 반전을 결합하여 마우스를 가져가면 원래 색상으로 다시 전환되는 검은색 아이콘이 있는 회색 버튼을 만드는 방법을 보여 드리겠습니다.

이렇게 하려면 소셜 미디어 팔로우 모듈 설정을 연 다음 각 개별 소셜 네트워크 설정을 열고 다음 필터 옵션을 업데이트합니다.

채도: 0%(기본값), 100%(마우스 오버)
반전: 100%(기본값), 0%(호버링)

결과를 확인하십시오.

#4 화면 혼합 및 필터 효과가 있는 대형 컬러 아이콘

이 마지막 소셜 미디어 버튼 호버 디자인의 경우 처음부터 완전히 시작할 것입니다. 따라서 1열 행으로 새 섹션을 만들고 행에 소셜 미디어 팔로우 모듈을 추가합니다.

그런 다음 소셜 미디어 팔로우 설정을 열고 페이스북 소셜 네트워크 항목만 남기고 기본 트위터 소셜 네트워크를 삭제합니다.

그런 다음 소셜 미디어 팔로우 설정을 다음과 같이 업데이트합니다.

배경색: #ffffff
항목 정렬: 중앙
혼합 모드: 화면

그런 다음 Facebook 소셜 네트워크 항목 설정을 열고 다음을 업데이트합니다.

배경색: #000000
맞춤 여백: 왼쪽 10px, 오른쪽 10px
맞춤 패딩: 위쪽 10px, 아래쪽 10px, 왼쪽 10px, 오른쪽 10px
채도: 0%(기본값), 100%(마우스 오버)
반전: 100%(기본값), 0%(호버링)

설정을 저장합니다.

그런 다음 facebook 소셜 네트워크 항목을 4번 복제하여 총 5개의 소셜 네트워크 버튼을 갖게 됩니다.

이제 복제된 각 소셜 네트워크 항목을 열고 소셜 네트워크와 배경색을 #000000으로 업데이트합니다.

설정을 저장합니다.

이제 화면 혼합 모드가 적용되었으므로 소셜 미디어 팔로우 모듈이 포함된 행 열에 배경색을 추가할 수 있습니다. 어떤 배경색을 사용하든 소셜 미디어 아이콘의 색상과 마우스 오버 배경 색상이 결정됩니다.

이렇게 하려면 행 설정을 열고 다음을 업데이트하십시오.

열 1 배경색: #0c71c3

아이콘 색상이 이 배경 색상으로 어떻게 변경되었는지 확인하십시오.

지금까지의 결과를 확인해보세요.

아이콘/버튼을 더 크게 만들기 위해 Custom CSS의 스니펫을 사용할 수 있습니다. 이렇게 하려면 먼저 소셜 미디어 팔로우 모듈에 CSS ID를 추가한 다음 페이지 설정에 일부 CSS를 추가해야 합니다.

소셜 미디어 팔로우 모듈을 열고 고급 탭에서 다음 CSS ID를 추가합니다.

CSS ID: 큰 아이콘

그런 다음 페이지 설정을 열고 다음 사용자 지정 CSS를 추가합니다.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

이 코드는 아이콘의 크기를 50px로, 버튼의 높이와 너비를 100px로 늘립니다. 미디어 쿼리는 이 스타일이 데스크탑에만 적용되도록 합니다.

최종 결과를 확인하세요.

마지막 생각들

이 소셜 미디어 팔로우 버튼 호버 효과가 독특한 디자인으로 방문자를 사로잡는 방법에 대한 새롭고 새로운 아이디어를 제공하기를 바랍니다. 이러한 예제의 대부분은 특히 Divi 내에서 호버 효과가 작동하는 방식에 익숙해지면 쉽게 만들 수 있습니다. 다음 시간까지 Divi 기술을 계속 마스터하고 다음 프로젝트를 위해 아름다운 것을 만드십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!