Divi의 소셜 미디어 모듈을 사용하면 Facebook, Twitter 및 Google+와 같은 온라인 소셜 프로필을 가리키는 아이콘을 기반으로 링크를 만들 수 있습니다. 이 아이콘은 세련된 아이콘을 사용하여 Divi 고유의 스타일로 테마에 통합되어 타사 플러그인을 사용하는 것보다 선호됩니다. 각 모듈의 여러 소셜 프로필에 대한 링크를 추가 할 수 있으며 페이지의 어느 위치 에나 모듈을 추가 할 수 있습니다.
페이지에 소셜 미디어 모듈을 추가하는 방법
페이지에 소셜 미디어 모듈을 추가하려면 먼저 Divi Builder로 이동해야 합니다. 일단 디비 테마 웹사이트에 설치하면 버튼이 표시됩니다. Divi Builder 사용 새 페이지를 만들 때마다 게시물 편집기 위에 있습니다. 이 버튼을 클릭하여 Divi Builder를 활성화하고 모든 Divi Builder 모듈에 액세스하십시오. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 시각적 모드에서 생성기를 시작합니다. 버튼을 클릭 할 수도 있습니다. 비주얼 빌더 사용 WordPress 대시 보드에 연결된 경우 포 그라운드에서 웹 사이트를 탐색 할 때
Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가 할 수 있습니다. 새 모듈은 행 내부에만 추가 할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가해야합니다.
모듈 목록에서 소셜 미디어 모듈을 찾아 클릭하여 페이지에 추가하십시오. 모드 목록을 검색 할 수 있습니다. 즉, "소셜 미디어에서 팔로우"라는 단어를 입력 한 다음 "엔터"를 클릭하여 자동으로 소셜 미디어 모드를 찾아 추가 할 수 있습니다! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .
사용 사례 예 : 연락처 페이지에 해당 소셜 미디어 아이콘 추가
웹사이트의 연락처 페이지는 온라인 소셜 프로필을 보여줄 수 있는 완벽한 장소입니다. 이것은 사용자가 연결 상태를 유지하고 홍보 블로그 또는 귀하의 비즈니스. 이 예에서는 연락처 페이지의 현재 디자인과 일치하도록 소셜 미디어 아이콘을 추가하는 방법을 보여 드리겠습니다.
시각적 빌더를 사용하여 행 전체 너비가 한 열인 새 일반 섹션을 추가하십시오. 열에 소셜 미디어 모듈을 삽입하십시오.
모듈 설정의 콘텐츠 탭에서 "새 요소 추가"버튼을 클릭하여 모듈에 새 소셜 네트워크를 추가합니다. 특정 소셜 네트워크 설정에서 다음을 업데이트하십시오.
콘텐츠 옵션
소셜 네트워크 :
Facebook 계정 URL : [Facebook 계정의 URL 입력]
디자인 옵션
아이콘 색상 : # d94b6a (모듬 색상)
그런 다음이 소셜 네트워크를 복제하여 XNUMX 개의 다른 네트워크 (Twitter, Google+, LinkedIn 및 Instagram)를 추가합니다. 네트워크를 복제했기 때문에 사용자 지정 아이콘의 색상이 전송되었습니다. 따라서 각 네트워크 URL과 계정을 업데이트하기 만하면됩니다.
이제 연락처 페이지 디자인과 일치하는 소셜 미디어 아이콘이 있습니다.
소셜 미디어 콘텐츠 옵션
콘텐츠 탭에서 텍스트, 이미지 및 아이콘과 같은 모듈의 모든 콘텐츠 요소를 찾을 수 있습니다. 제어하는 모든 것 무엇 이 탭에는 모듈에 항상 표시됩니다.
새 객체 추가
여기에서 모듈에 새 네트워크를 추가합니다. "새 요소 추가"를 클릭하면 "콘텐츠", "디자인"및 "고급"탭 아래에있는 새 네트워크에 맞는 완전히 새로운 옵션 창이 열립니다. 개별 소셜 미디어 네트워크 설정은 아래를 참조하십시오.
첫 번째 네트워크를 추가하면 네트워크 제목이 레이블로 표시된 회색 막대가 나타납니다. 회색 막대에는 네트워크를 편집, 복제 또는 삭제할 수있는 세 개의 버튼이 있습니다.
링크 형식
여기에서 둥근 사각형 또는 원형으로 소셜 네트워킹 아이콘의 모양을 선택할 수 있습니다.
URL이 열립니다.
새 탭 또는 같은 창에서 네트워크 URL을 열도록 선택합니다.
팔로우 버튼
여기에서 아이콘 옆에 다음 버튼을 포함할지 여부를 선택할 수 있습니다.
관리 라벨
쉽게 식별 할 수 있도록 생성자의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame보기를 사용하면 이러한 레이블이 Divi Builder 인터페이스의 모듈 블록에 나타납니다.
소셜 미디어 디자인 옵션
디자인 탭에서 글꼴, 색상, 크기 및 간격과 같은 모듈에 대한 모든 스타일 옵션을 찾을 수 있습니다. 모듈의 모양을 변경하는 데 사용할 탭입니다. 각 Divi 모듈에는 모양을 변경하는 데 사용할 수있는 긴 디자인 설정 목록이 있습니다.
이 모듈의 경우 디자인 옵션은 단일 요소 (텍스트 색상)로 구성됩니다.
텍스트 색상
여기에서 텍스트를 밝게 할 것인지 어둡게 할 것인지 선택할 수 있습니다. 어두운 배경에서 작업하는 경우 텍스트가 밝아 야합니다. 배경이 밝은 경우 텍스트가 어두워 야합니다.
고급 소셜 미디어 옵션
고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련 된 웹 디자이너가 유용하다고 생각할 수있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 사용자 정의 CSS를 적용 할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용 할 수 있으며 이는 하위 테마의 style.css 파일에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.
CSS ID
이 모듈에 사용할 선택적 CSS ID를 입력하십시오. ID를 사용하여 사용자 정의 CSS 스타일을 만들거나 페이지의 특정 섹션에 연결할 수 있습니다.
CSS 클래스
이 모듈에 사용할 선택적 CSS 클래스를 입력하십시오. CSS 클래스를 사용하여 사용자 지정 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가 할 수 있습니다. 이러한 클래스는 Divi 하위 테마 또는 페이지 또는 웹 사이트에 추가하는 사용자 정의 CSS 스타일 시트에서 사용할 수 있습니다. 테마 옵션 Divi Builder 페이지의 Divi 또는 매개 변수
맞춤 CSS
사용자 정의 CSS는 모듈 및 모듈의 내부에 적용 할 수도 있습니다. 사용자 정의 CSS 섹션에는 사용자 정의 CSS 스타일 시트를 각 요소에 직접 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목은 이미 스타일 태그로 래핑되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하십시오.
시계
이 옵션을 사용하면 모듈이 표시되는 장치를 제어 할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모드를 사용하거나 페이지에서 특정 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.
개별 소셜 미디어 컨텐츠 옵션
소셜 네트워크
여기에서 표시하려는 소셜 네트워크를 선택할 수 있습니다.
계정 URL
이 소셜 네트워크 링크의 URL을 입력하는 곳입니다. Facebook을 네트워크로 선택한 경우 여기에 Facebook 페이지 URL을 입력합니다.
개별 소셜 미디어 디자인 옵션
아이콘 색상
Divi는 기본적으로 정의 된 각 소셜 네트워크에 대해 표준 색상을 제공합니다. 여기에서이 아이콘 색상을 원하는대로 쉽게 변경할 수 있습니다.
고급 소셜 미디어 옵션
맞춤 CSS
사용자 정의 CSS는 모듈 및 모듈의 내부에 적용 할 수도 있습니다. 사용자 정의 CSS 섹션에는 사용자 정의 CSS 스타일 시트를 각 요소에 직접 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목은 이미 스타일 태그로 래핑되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하십시오.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target ="blank "layout =" 확장된 "align ="center "font_family =" Raleway "font_weight = 700 ″ 스타일 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI 테마 다운로드 [/ vcex_button] [/ width_column] [»vc_column] » 1/2 ″] [vcex_button URL = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" 대상 = "빈" 레이아웃 = "확장" 정렬 = "중앙" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] 템플릿 다운로드 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
다른 Divi 자습서
- 레스토랑 이용 디비 테마 5 웹 사이트
- Divi WooCommerce 제품에 텍스트를 추가하는 방법
- Divi 페이지 간의 메뉴 색상을 변경하는 방법
- Divi로 블로그 그리드를 개인화하는 방법
- 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
- 전체 화면 Divi 슬라이더를 만드는 방법
- Divi 페이지 간의 메뉴 색상을 변경하는 방법
- Divi에 대해 잘 모르는 기능
- WordPress에 Divi Builder를 사용하는 방법
- Divi 비디오 스크롤 모듈을 사용하는 방법
- Divi Builder Flip 모듈을 사용하는 방법
- Divi Builder에서 회원 평가 모듈을 추가하는 방법
- Divi 텍스트 모듈을 사용하는 방법
- Divi에서 슬라이더를 만드는 방법
- Divi 사용자 역할을 편집하는 방법
- Divi Social Media 모듈 사용 방법
- 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
- Divi 사이드 바 모듈을 사용하는 방법
- Divi Price 테이블 모듈을 사용하는 방법
- Divi 발행물의 제목 모듈을 사용하는 방법
- Divi의 비디오 모듈을 추가하는 방법
- 기사 탐색 모듈을 사용하는 방법
- Divi 검색 모듈 사용 방법
- Divi 지갑 모듈 사용 방법
- Divi Builder에서 person 모듈을 사용하는 방법
- Divi 필터와 함께 Wallet 모듈을 사용하는 방법
- 전체 너비 슬라이더 모듈을 사용하는 방법
- Divi Builder 이미지 모듈을 사용하는 방법
- Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
- 이미지 갤러리 모듈을 사용하는 방법
- Divi Builder Full-Width Module을 사용하는 방법
- Divi Full Width 포트폴리오 모듈을 사용하는 방법
- Divi 전폭 헤더 모듈 사용 방법
- Divi Counter Module 사용 방법
- Divi Builder에서 아티클 슬라이더를 사용하는 방법
- Divi Email Optin 모듈을 사용하는 방법
