Divi의 기본 메뉴에 소셜 아이콘을 추가하는 방법

전담 소셜 미디어 없이 성공적인 웹사이트를 운영하는 것은 사실상 불가능합니다. Instagram, Twitter, TikTok, Facebook 또는 이들과 다른 무엇의 조합을 선택하든 사람들은 귀하 및 귀하의 브랜드와 직접 상호 작용하기를 원합니다. Divi의 기본 메뉴에 소셜 아이콘이 있는지 확인하는 것은 웹사이트에서 선택한 네트워크로 트래픽을 유입시키는 좋은 방법입니다. 빠르고 쉽습니다. 모든 단계를 안내해 드리겠습니다.

시작하자!

시사

데스크탑

이동하는

Divi 테마 빌더를 사용하여 글로벌 헤더 무료 업로드

이 기사에서는 테니스 클럽 레이아웃 팩과 머리글/바닥글 공짜를 사용할 것입니다. Divi 빌더 내에서 레이아웃 팩을 다운로드하고 블로그에서 머리글/바닥글 팩을 다운로드할 수 있습니다. 다운로드하면 파일이 .zip 아카이브로 저장됩니다. Divi에 업로드할 .json 파일이 있는지 확인하십시오.

이제 WordPress 대시보드로 이동하여 Divi – Theme Builder 아래에서 Divi Theme Builder를 찾으십시오. 페이지의 오른쪽 상단 모서리에 있는 위/ 아래 화살표 아이콘을 클릭 합니다. 이렇게 하면 이식성 모달이 열리고 가져오기 탭을 선택하고 다운로드한 머리글/바닥글에 대한 .json 파일을 찾은 다음 Divi 테마 빌더 템플릿 가져오기를 클릭합니다.

그런 다음 사이트의 헤더 섹션으로 이동하려고 합니다. 소셜 아이콘이기 때문에 (달리 지정하지 않는 한) 사이트의 모든 페이지에 있어야 한다고 생각하기 때문에 글로벌 헤더 에 넣을 것입니다.

지금 빌더 안에 있어야 합니다. 위의 지침을 따랐다면 업로드한 새 헤더가 이미 제자리에 표시되어야 합니다.

여기에 이미 소셜 아이콘이 있음을 알 수 있습니다. 그러나 이러한 소셜 아이콘은 오늘날 우리가 작업하고 있는 Divi 기본 메뉴에 없습니다. 그럼 잡초 속으로 들어가 볼까요?

기본 메뉴 모음에 소셜 아이콘 추가

먼저 행/열 구조를 변경해 보겠습니다. 섹션 #2( 홈/연락처 링크가 있는 맨 아래)에서 행을 찾고 싶습니다.

이 튜토리얼에서는 2열 구조를 선택했지만 귀하의 사이트에 가장 적합한 구조입니다. 선택했으면 행 설정 으로 이동하여 디자인 탭으로 이동합니다. Sizing 메뉴를 찾아 Use Custom Gutter Width를 켭니다. 거터 너비 값을 1로 설정합니다. 숫자를 입력하거나 슬라이더를 사용하여 이를 수행할 수 있습니다.

녹색 확인 표시를 클릭하여 설정을 저장합니다. 그런 다음 행 설정으로 돌아갑니다 . 이번에는 상단/첫 번째/왼쪽 열의 설정 기어 를 선택합니다.

다음으로 고급 탭으로 이동합니다. Custom CSS 영역을 찾아 Main Element 필드를 클릭합니다. 이 필드 안에 다음 CSS를 추가하고 싶을 것입니다.

width:80%;

또는

width:80%!important;

이 요소의 스타일을 지정하려면 !important 태그를 추가해야 할 수도 있습니다. 괜찮아요. 단일 요소이기 때문에 처리해야 할 성능 문제나 스파게티 코드를 생성해서는 안 됩니다.

그런 다음 응답성 설정으로 이동하고 동일한 코드를 사용하여 모바일 장치의 경우 열 너비를 다시 100%로 변경합니다.

다음으로 두 번째 열에 대해 이 단계를 반복합니다. 이번에만 기본값을 20%로 설정하고 모바일 값을 100%로 유지 합니다.

완료되면 변경 사항을 저장하고 소셜 미디어 아이콘을 추가하고 스타일을 지정할 준비를 하십시오.

소셜 미디어 팔로우 모듈 추가

열 2 의 검은색 + 아이콘을 클릭하여 새 모듈을 추가하고 Social Media Follow 를 찾을 때까지 스크롤합니다. 삽입하십시오.

사용 중인 헤더에 관계없이 기본 소셜 미디어 아이콘이 스타일과 일치하지 않을 가능성이 높습니다. 또한 올바르게 위치하지 않습니다. 다음 단계는 스타일을 지정하고 간격을 올바르게 지정하는 것입니다. 소셜 미디어 팔로우 모듈 설정 내에서 디자인으로 이동한 다음 정렬 로 이동합니다. 모듈을 배치할 위치를 선택합니다.

데스크탑에 대해 오른쪽 맞춤을 선택한 다음 응답성 옵션으로 이동하여 중앙에 배치합니다.

다음은 아이콘 메뉴로 스크롤하는 것입니다. 원하는 아이콘의 색상을 선택합니다. 이것은 Facebook의 f , Twitter의 새, Instagram의 카메라입니다. 예를 들어 이것은 파란색 배경이 아닙니다.

다음은 간격입니다. 실제로 조정해야 할 주요 사항은 상단 여백입니다. 메뉴 텍스트의 중앙에 오도록 1.5 vw 상단 여백을 적용할 것입니다. 모바일용으로 더 많이 또는 덜 원하면 조정할 수도 있습니다.

이제 콘텐츠 탭을 클릭하고 사용자 지정하려는 개별 소셜 네트워크 아이콘으로 이동합니다. 사이트에 대해 선택한 각 아이콘에 대해 이 단계를 반복합니다.

배경 까지 아래로 스크롤하여 사이트 디자인과 일치하는 색상을 선택합니다. 다시 말하지만, 이것은 이 특정 아이콘의 배경만 변경한다는 것을 기억하십시오.

이 특정 아이콘의 색상을 변경할 수도 있습니다. 전체 모듈 자체에서와 마찬가지로 디자인 탭과 아이콘 섹션에서 그렇게 할 수 있습니다. 이 설정은 일반 설정보다 우선하므로 일회성 색상을 원할 경우 다른 사람을 방해하는 것에 대해 걱정할 필요가 없습니다.

그런 다음 디자인 탭 아래의 테두리 항목까지 아래로 스크롤하면 그 안에 테두리 너비 가 있습니다. 이 값을 3px로 설정한 후 Divi Primary Menu의 배경에서 눈에 띄는 Border Color 를 선택합니다.

이 시점에서 콘텐츠 탭으로 돌아가 표시하려는 각 소셜 네트워크 아이콘에 대해 이 단계를 반복합니다. 이 모듈의 각 아이콘이 동일한 디자인을 공유하도록 하려면 디자인한 아이콘을 마우스 오른쪽 버튼으로 클릭 하고 항목 스타일 복사 를 선택하면 됩니다.

그런 다음 스타일을 지정할 다른 네트워크를 마우스 오른쪽 버튼으로 클릭하고 항목 스타일 붙여넣기 를 선택합니다.

그리고 그게 다야! 전체 레이아웃을 저장하려면 화면 오른쪽 하단에 있는 저장 버튼을 클릭해야 합니다. 그런 다음 오른쪽 상단 모서리에 있는 편집 화면에서 X 까지 안전합니다.

Divi Theme Builder 페이지의 왼쪽 상단에 All Changes Saved 가 표시되는지 확인합니다. 그렇지 않은 경우 변경 사항 저장 을 클릭합니다. 완료되면 Divi 기본 메뉴에 소셜 미디어 아이콘이 표시되는 사이트가 라이브로 표시됩니다!

최종 결과

이것이 최종 결과와 유사해야 합니다.

데스크탑

이동하는

마무리

청중이 항상 기본 소셜 네트워크를 찾을 수 있도록 하는 것은 Divi와 함께 하는 케이크 조각입니다. 몇 단계만 거치면 무료 머리글/바닥글 팩 중 하나를 조정하여 소셜 미디어 아이콘을 기본 메뉴(또는 원하는 다른 위치)에 포함할 수 있습니다. 행운을 빕니다!

기본 메뉴의 소셜 미디어 아이콘에 대해 어떻게 생각하십니까? 어디에 배치하는 경향이 있습니까?