Divi에서 페이지 템플릿에 대한 팝 아웃 소셜 미디어 팔로우 버튼 바를 디자인하는 방법

소셜 미디어 팔로우 버튼은 모든 웹사이트에 계속해서 인기 있는 추가 기능입니다. 회사와 개인은 방문자가 자신을 팔로우하거나 채널을 구독하기를 바라며 이러한 링크를 사용하여 사용자를 소셜 미디어 페이지로 리디렉션합니다. 일반적으로 이러한 버튼은 연락처 페이지, 사이드바 또는 웹사이트 바닥글에 표시됩니다.

이 튜토리얼에서는 Divi의 페이지 템플릿에 팝업 소셜 미디어 팔로우 버튼 바를 디자인하는 방법을 보여 드리겠습니다. 이렇게 하면 해당 소셜 미디어의 팔로우 버튼이 산만하지 않고 사이트에서 더 큰 가시성을 얻을 수 있습니다. 또한 Divi의 테마 빌더를 사용하면 사이트의 모든(또는 모든) 페이지에 대해 이러한 버튼이 포함된 페이지 템플릿을 쉽게 만들 수 있습니다.

뛰어들고 시작합시다!

엿보기

다음은 이 튜토리얼에서 만드는 소셜 미디어 팔로우 버튼에 대한 간략한 설명입니다.

팝 아웃 소셜 미디어 팔로우 버튼 바 페이지 템플릿 무료 다운로드

이 튜토리얼의 소셜 미디어 팔로우 버튼 바 페이지 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 테마 빌더 이식성 옵션을 사용하여 json 파일 중 하나를 Divi 테마 빌더에 추가하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 Divi 테마를 설치하고 활성화해야 합니다. 최신 버전의 Divi가 있는지 확인하십시오.

또한 결과를 표시하기 위해 해당 페이지에 새 템플릿을 할당하려면 테스트 목적으로 Divi Builder로 만든 페이지가 하나 이상 필요합니다.

그 후, 당신은 갈 준비가되었습니다.

Divi에서 페이지 템플릿용 팝아웃 소셜 미디어 팔로우 버튼 모음 만들기

새 템플릿 만들기

WordPress 대시보드에서 Divi > 테마 빌더로 이동합니다. 그런 다음 "새 템플릿 추가" 상자를 클릭하여 새 템플릿을 만듭니다.

프로모션 바를 표시할 페이지에 템플릿을 할당합니다.

새 템플릿에서 "사용자 정의 본문 추가" 영역을 클릭한 다음 "사용자 정의 본문 작성"을 선택합니다.

그런 다음 "처음부터 빌드" 옵션을 선택합니다.

소셜 미디어 팔로우 버튼 모음 만들기

새 행 만들기

우선 템플릿에 1열 행을 추가해 보겠습니다.

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

1열 행에 소셜 미디어 팔로우 모듈을 추가합니다.

소셜 네트워크 추가

소셜 미디어 팔로우 설정에서 표시하려는 모든 소셜 네트워크를 추가합니다. 새 네트워크를 추가하려면 새 소셜 네트워크 추가 회색 더하기 아이콘을 클릭한 다음 목록에서 네트워크를 선택하십시오.

방문자를 리디렉션할 소셜 미디어 페이지의 링크 URL도 추가해야 합니다. 이렇게 하려면 소셜 미디어 네트워크에서 설정 아이콘을 클릭하고 계정 링크 URL을 업데이트하십시오.

버튼 모듈 추가

소셜 미디어 팔로우 모듈 네트워크를 마치면 버튼 모듈을 추가할 준비가 된 것입니다. 이 버튼은 사용자가 팝아웃 막대를 표시하기 위해 마우스를 가져가는 것입니다. 계속해서 버튼 모듈을 추가한 다음 소셜 미디어 팔로우 모듈 위로 드래그하세요.

버튼 내용

다음으로 Button 콘텐츠를 다음과 같이 업데이트합니다.

• 버튼 텍스트: 팔로우
• 버튼 링크 URL: #

버튼 스타일 및 위치 지정

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

• 버튼 텍스트 크기: 16px
• 버튼 텍스트 색상:
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 1px
• 버튼 글꼴: 몬세라트
• 버튼 글꼴 두께: 굵게
• 버튼 아이콘: 오른쪽 화살표(스크린샷 참조)
• 여백: 100% 남음
• 패딩: 100px 하단

그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

position: absolute;

행 설정

버튼에 스타일이 지정되고 사용할 준비가 되면 다음과 같이 행 설정을 업데이트합니다.

• 배경색: #ffffff
• 거터 폭: 1
• 폭: 100%
• 최대 너비: 64px
• 패딩: 상단 24px, 하단 16px, 왼쪽 16px

행 상자 그림자

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 흐림 강도: 30px
• 그림자 색상(데스크톱): 투명
• 그림자 색상(마우스오버): rgba(0,0,0,0.2)

행 위치 지정

그런 다음 Main Element 행에 다음 사용자 정의 CSS를 추가합니다.

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

이렇게 하면 브라우저 상단에서 1/3 아래로 고정된 위치에 행이 배치됩니다.

사용자 정의 여백이 있는 호버 효과에 팝업

이제 다음 여백 값을 추가하여 마우스 오버 시 팝업 기능을 추가합니다.

• 여백(데스크톱): -64px 왼쪽
• 여백(마우스오버): 0px 왼쪽

그것은 소셜 미디어 팔로우 버튼 바를 처리합니다. 그러나 필요한 포스트 콘텐츠 모듈을 생성하여 템플릿을 완성해야 합니다.

템플릿에 포스트 콘텐츠 모듈 추가하기

이 시점에서 소셜 미디어 팔로우 버튼 모음을 사용할 준비가 되었습니다. 그러나 이것은 템플릿이기 때문에 이 템플릿을 사용하여 페이지의 콘텐츠를 표시하려면 게시물 콘텐츠 모듈을 추가하고 확인해야 합니다.

게시물 콘텐츠 모듈로 새 행 추가

소셜 미디어 팔로우 버튼 표시줄이 포함된 행 아래에 새 1열 행을 추가합니다.

그런 다음 Post Content Module을 행에 추가합니다.

현재 게시물 콘텐츠 모듈은 상위 행의 기본 너비로 제한됩니다. 행의 너비와 패딩을 변경하여 공백 없이 브라우저의 전체 너비에 걸쳐 있도록 해야 합니다. 포스트 콘텐츠 모듈이 Divi Builder를 사용하여 페이지를 구축해야 하는 영역을 결정하기 때문에 이것은 중요합니다.

다음을 업데이트합니다.

• 폭: 100%
• 최대 너비: 100%
• 패딩: 0px 상단, 0px 하단

이제 다음과 같이 섹션 설정을 업데이트합니다.

• 패딩: 0px 상단, 0px 하단

그 정도면 됩니다. 이제 편집기를 종료하기 전에 레이아웃을 확인하고 저장하십시오. 그런 다음 테마 빌더에 대한 변경 사항도 저장합니다.

최종 결과

최종 결과를 보려면 템플릿이 할당된 페이지를 방문하세요. 다음은 팝아웃 소셜 미디어 팔로우 버튼 바의 모양입니다.

마지막 생각들

이 소셜 미디어 팔로우 버튼 모음은 중요한 소셜 네트워크를 최전선에 표시하는 데 확실히 도움이 될 것입니다. 팝업 기능은 아이콘이 사용자에게 방해가 되지 않도록 합니다. 테마 빌더를 사용하여 모든 페이지 템플릿에 막대를 추가할 수 있습니다. 이것이 다음 프로젝트에 큰 도움이 되기를 바랍니다!

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

건배!