Divi의 기본 메뉴에 소셜 아이콘을 추가하는 방법
게시 됨: 2017-06-27오늘의 Divi 튜토리얼에서는 Divi 웹사이트의 기본 메뉴에 소셜 아이콘을 추가하는 방법을 보여드리겠습니다. 이 튜토리얼을 단계별로 따라하면 자신을 위한 것이든 클라이언트를 위한 것이든 상관 없이 귀하가 만드는 모든 웹사이트에 소셜 아이콘을 추가할 수 있습니다.
Divi 테마 커스터마이저를 사용하여 웹사이트의 머리글과 바닥글에 소셜 아이콘을 직접 추가할 수 있는 기능이 이미 있습니다. 그러나 그것이 당신이 찾고 있는 것이 아니라면 많은 경우에 이 튜토리얼이 도움이 될 것입니다. 사람들은 웹사이트의 머리글이나 바닥글 대신 기본 메뉴에 소셜 아이콘을 사용하는 것을 선호합니다.
추가하는 방법, 사용자 정의하는 방법, 새 탭에서 여는 방법을 정확히 보여드리겠습니다. 기본 메뉴의 소셜 아이콘이 전체 웹사이트에 부가 가치를 제공할 수 있도록 실제로 알아야 할 모든 사항입니다.
기본 메뉴에 소셜 아이콘을 추가하는 이유는 무엇입니까?
웹사이트와 소셜 미디어 채널은 많은 경우 상호 보완적입니다. 웹사이트에서 공유되는 모든 콘텐츠가 소셜 미디어 채널에 나타나는 것은 아니며 그 반대의 경우도 마찬가지입니다. 그렇기 때문에 소셜 미디어 채널에서 웹사이트를 홍보하고 웹사이트에서 소셜 미디어 채널을 홍보하는 것이 일반적이고 솔직한 일이 아닙니다. 적극 권장합니다.
사람들이 가장 익숙한 방식으로 회사 또는 브랜드와 상호 작용하기를 원합니다. 귀하의 웹사이트는 일반적으로 그들에게 ' 미지의 영역 '입니다. 따라서 웹사이트를 통해 직접 연락하는 장벽은 소셜 미디어 채널보다 클 수 있습니다. 귀하의 Facebook 페이지 또는 Twitter 페이지를 방문하는 대부분의 사람들은 이미 플랫폼에 통합되어 있으며 편안한 느낌은 그들의 행동에 긍정적인 영향을 미칠 수 있습니다.
그렇기 때문에 전반적으로 웹사이트에 소셜 아이콘을 배치하는 것이 좋습니다. 그러나 기본 메뉴에서 명시적으로 공유하는 이유는 무엇입니까? 우리는 두 가지 주요 이유를 나열했습니다.
방문자가 방문하는 동안 찾기 쉬운/메뉴 팔로우
웹사이트에 소셜 아이콘을 추가할 때 가능한 한 눈에 잘 띄기를 원합니다. 사람들은 웹사이트에서 소셜 아이콘을 찾기 위해 노력할 필요가 없습니다. 소셜 아이콘을 기본 메뉴에 배치하면 차이가 생길 수 있습니다. 기본 메뉴는 웹 사이트에 머무는 동안 사람을 따릅니다. 아이콘을 찾을 필요가 없습니다. 아이콘이 표시됩니다. 그 사람이 해야 할 유일한 일은 클릭하기만 하면 됩니다.
기본 메뉴는 웹 사이트에 머무는 동안 사람을 따릅니다. 아이콘을 찾으러 갈 필요가 없습니다. 아이콘이 표시됩니다. 방문자가 해야 하는 유일한 일은 그들을 클릭하는 것이고 그들은 거기에 갈 것입니다.
트리거링 액션
전에 언급했듯이; 소셜 미디어 채널과 웹사이트는 상호 보완적입니다. 그들은 함께 일하며 일반적으로 잠재적인 리드를 알리고 제공되는 서비스나 제품으로 끌어들이는 것과 같은 동일한 목표를 가지고 있습니다. 마주하면 할수록 호기심이 발동할 확률이 높아진다
웹사이트와 소셜 미디어 채널 간의 연결을 지원하려면 방문자에게 가능한 한 자주 소셜 아이콘을 대면하는 것이 좋습니다. 마주할수록 호기심이 발동하고 결국 클릭할 가능성이 커집니다.
Divi의 기본 메뉴에 소셜 아이콘을 추가하는 방법
YouTube 채널 구독
글꼴 굉장 설치
우선 워드프레스 웹사이트에 Font Awesome을 설치해야 합니다. Divi의 테마 옵션에 일부 CSS 코드를 추가하여 이를 수행할 것입니다.
WordPress 웹 사이트를 열고 Divi > 테마 옵션 > 통합으로 이동 하여 <head> 섹션에 다음 코드를 붙여넣습니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
이제 Font Awesome이 웹사이트에서 사용되는 글꼴에 추가되어야 합니다. 이제 게시물의 다음 부분을 단계별로 따라 이 아이콘을 기본 메뉴에 추가할 수 있습니다.
기본 메뉴 만들기 시작
대부분의 경우 웹사이트의 기본 메뉴에 표시할 모든 페이지를 나열한 사용자 지정 기본 메뉴를 이미 만들었을 것입니다. 아직 하지 않았다면 Appearance 내의 'Menus' 페이지로 이동하여 새 메뉴를 만드십시오.
그런 다음 메뉴 이름을 지정하고 기본 메뉴에 표시할 페이지를 추가한 다음 아래의 '기본 메뉴' 옵션을 선택합니다.
소셜 아이콘 추가
계속해서 소셜 아이콘을 추가하려고 합니다. 기본 메뉴를 만들 때 소셜 아이콘을 표시할 위치를 선택할 수 있습니다. 대부분의 경우 페이지 바로 뒤에 오지만 맨 앞에 놓을 수도 있습니다. 가장 중요하고 인기 있는 모든 웹사이트에서 사용할 수 있는 소셜 미디어 아이콘이 있습니다. Facebook에서 Twitter, Instagram, LinkedIn 등으로.
Font Awesome 웹사이트에서 다음 링크를 열어 시작하세요. 아이콘을 수동으로 추가할 이 게시물의 다음 부분에는 이 웹사이트가 필요합니다.
수동으로 아이콘 추가
기본 메뉴에 추가하는 각 소셜 아이콘에도 동일한 작업 방식이 적용됩니다. 예를 들어 인스타그램 아이콘을 추가하는 방법을 보여드리겠습니다. 추가하려는 다른 모든 아이콘에 대해서도 마찬가지입니다. 작동 방식은 동일합니다(아이콘, HTML 코드 및 URL만 그에 따라 다름).
'사용자 지정 링크' 옵션을 열면 URL 및 탐색 레이블의 두 필드가 표시됩니다. 분명히 URL 필드는 방문자를 소셜 미디어 채널 중 하나로 연결하는 URL을 입력하는 곳입니다. 이 예에서는 아이콘이 Instagram으로 연결되기를 원하므로 Instagram URL을 입력하기만 하면 됩니다.
다음으로 브라우저에서 Font Awesome 웹사이트로 이동하여 검색 창을 통해 Instagram 아이콘을 찾습니다. 마찬가지로 Facebook, LinkedIn 및 기타 아이콘을 검색할 수 있습니다.
Instagram 아이콘을 클릭하면 웹사이트에서 다음 HTML 코드를 제공하는 것을 볼 수 있습니다.
<i class="fa fa-instagram" aria-hidden="true"></i>
이것은 탐색 레이블 필드에서 사용해야 하는 정확한 코드이므로 코드를 복사하여 필드에 붙여넣어 사용자 정의 링크를 완성하십시오.
기본 메뉴에 표시하려는 소셜 아이콘 각각에 대해 동일한 프로세스를 반복하고 웹사이트의 프런트 엔드에서 어떻게 보이는지 확인합니다.
소셜 아이콘의 모양 변경
기본 메뉴에 대한 일괄 변경(소셜 아이콘 포함)
테마 사용자 지정 프로그램을 사용하면 한 곳에서 기본 메뉴에 적용하려는 모든 모양 변경을 수행할 수 있습니다.
Divi 옵션을 사용하여 기본 메뉴에 적용할 수 있는 변경 사항은 소셜 아이콘에도 적용됩니다. 예를 들어 기본 메뉴에 특정 색상을 지정하면 소셜 아이콘의 색상이 동일합니다. 이 작업을 수행하기 위해 이미지 대신 글꼴을 사용하고 있기 때문입니다.
머리글 및 탐색 > 기본 메뉴 모음 으로 이동하여 테마 사용자 지정 프로그램의 모양을 변경하고 싶은 모든 작업을 수행할 수 있습니다 . 변경 사항은 실시간으로 적용되며 기본 메뉴가 어떻게 생겼는지에 대한 좋은 관점을 제공합니다.
새 탭에서 소셜 아이콘 열기
게시물의 이 부분은 소셜 아이콘으로 할 수 있는 추가 작업입니다. 방문자가 소셜 미디어 채널로 이동하더라도 웹사이트에서 다른 곳으로 보내는 것을 원하지 않을 것입니다. 누군가가 클릭할 때마다 소셜 미디어 링크를 새 탭으로 열어 두 상호 작용을 최대한 오래 유지하고 싶습니다.
이전에 만든 메뉴로 돌아가서 모든 소셜 미디어 아이콘에서 '새 탭에서 열기' 옵션이 작동하도록 쉽게 만들 수 있습니다. 각 아이콘을 수동으로 조정해야 합니다. 이 예에서는 Instagram 아이콘을 변경합니다.
계속해서 URL 필드에 제공한 URL을 삭제하고 다음 코드를 탐색 URL에 대신 붙여넣습니다.
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
아이콘을 새 탭에서 열려면 각 아이콘에 대해 동일한 작업을 수행하십시오. 방문자가 클릭할 때마다 가능한 한 오랫동안 방문자를 유지할 수 있는 새 탭에서 열립니다.
마지막 생각들
이 튜토리얼은 소셜 아이콘을 원하는 방식으로 Divi 웹사이트에 통합하는 데 확실히 도움이 될 것입니다. 사용자 정의하고 나머지 기본 메뉴에 맞게 만들 수 있습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요. 우리는 연락을 유지하고 당신이 가지고 있는 모든 질문이나 제안에 답하려고 노력할 것입니다.
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Oceans/Shutterstock.com을 통한 주요 이미지