귀하의 사이트를 군중 속에서 눈에 띄게 만드는 것은 때로는 말처럼 쉽지 않습니다. 다행히도 창의적인 사용자 정의 터치를 추가하여 DIY에 참여할 수 있습니다. 블로그 다른 사람들과 차별화됩니다.

이 튜토리얼에서는 Divi 빌더를 사용하여 사용자 정의하는 방법을 보여 드리겠습니다. 블로그, 특히 CSS 영역.

이것이 제가 말하는 지역입니다.

이것이 의미하는 바는 여기에서 변경 한 사항은 편집중인 페이지에만 적용된다는 것입니다. 이것은 매우 흥미롭고 유용한 기능입니다!

다음은이 튜토리얼의 마지막에 얻게 될 최종 결과입니다. 방문하는 페이지에 따라 변경되는 탐색 메뉴의 배경색입니다. 추가 옵션으로 아이콘의 색상이 변하는 것을 알 수 있습니다.

먼저 메뉴에 배경색을 적용하는 방법을 보여 드리겠습니다. 그런 다음 별도로 소셜 아이콘을 일치시키는 방법을 보여 드리겠습니다.

아직 튜토리얼을 읽지 않은 경우 테마 WordPress Divi의 프리젠 테이션나는 당신이 그것을 초대합니다.

시작하자!

메뉴로 색상 적용

먼저 기본 헤더 형식을 사용하고 있습니다. 다른 형식을 사용하는 경우 Divi에서 "divs"의 일반 ID가 내가 아는 한 모든 형식 (# main-header)에 대해 동일하므로이 튜토리얼은 여전히 ​​효과적입니다. 다른 형식에 문제가있는 경우.

링크가 하단에 표시되는지 확인해야합니다. 내가 선택한 색상은 Coolors.co에서 찾을 수 있으며 사용하려면 더 어두운면에 있으므로 텍스트 링크를 밝은 색상으로 만들어야합니다. 나는 흰색을 선택했습니다.

링크 색상이 될 rgba (255,255,255,0.6)를 사용하고 활성 링크 색상 (원하는 시각 효과를 위해)

그런 다음 첫 번째 변경 사항을 적용하려는 페이지로 이동하십시오 (당신은 위의 메뉴 링크를 참조한다). "3 선"아이콘을 클릭하면 옵션 상자가 나타납니다.

이제이 상자에 다음 CSS를 추가합니다.

# 손 헤더 {배경 : #474f61; }

이와 비슷한 것이 있어야합니다. XNUMX 진수 코드를 원하는 색상으로 변경하는 것을 잊지 마십시오.

클릭 저장 및 업데이트 그리고 이것은 한 줄의 코드로 기본 메뉴에 적용됩니다.

이제 모든 페이지에 동일한 코드를 추가하고 매번 XNUMX 진수 코드를 변경하면됩니다.

소셜 네트워크 아이콘 (선택 사항)

이 부분에서는 이미 수행 한 코드를 수정 한 다음 사이트의 CSS 수준에서 일부 코드를 추가합니다. 개별 CSS에 일부 CSS를 추가해야하는 이유와 일부를 포함하지 않아야하는 이유에 대해 설명하겠습니다. 합니다.

따라서 먼저 소셜 링크를 설정해야합니다. "로 이동 Divi 옵션> 일반 테마 그리고 소셜 미디어 페이지에 URL을 추가하십시오.

그런 다음 보조 메뉴 표시 줄의 설정으로 이동하여 배경 및 텍스트 색상을 설정합니다. 새 메뉴 색상과 일치하도록 각 소셜 아이콘에 둥근 색상의 배경을 추가하여 아이콘이 나타날 수 있도록 텍스트 색상으로 '흰색'을 선택합니다.

"로 이동 헤더 및 탐색> 헤더 요소 그리고 상자를 체크하십시오 " 소셜 아이콘 표시 ".

각 페이지에 CSS를 어떻게 추가했는지 기억하십니까? 돌아가서 이전에 쓴 내용을 편집합니다. 가지고있는 것을 다음 CSS로 바꾸거나 다른 것을 인식하면 추가 코드를 추가 할 수 있습니다.

# 손 헤더 #은 최고 헤더 사회 아이콘 {배경 .and : #474f61을; }

이 코드를 사용하면 사이트에서이 페이지의 메뉴 배경색뿐만 아니라 소셜 아이콘의 배경도 변경할 수 있습니다. 믹스에 다른 요소를 추가했습니다. 다음과 같은 것이 있어야합니다.

각 페이지에서 16 진 색상이 올바른지 확인해야 할 수도 있습니다.

일반 CSS

다음 코드는 " 테마 옵션> CSS 상자 또는 하위 테마의 스타일 파일에서.

.and 리 {마진 왼쪽 #-아이콘 최고 헤더 - 사회 : 5px; } #는 최고 헤더 사회 아이콘 {패딩 .and : 4px을; 마진 - 하단 : 8px; 폭 : 30px; 높이 : 30px; 경계 반경 : 50 %; 라인 높이 24px; }

왜 이것이 페이지의 CSS 상자에 없는지 궁금 할 것입니다. 그 이유는이 특정 코드가 모든 대상 요소에 영향을 미치므로 동일한 코드를 여러 위치에 배치하는 것은 비효율적입니다. 페이지 당 배경색 만 변경되지만이 코드는 페이지 당 변경되지 않습니다. 사이트에 가중치를 추가하지 않는 것이 가장 좋습니다.

이것이 이 튜토리얼의 전부입니다. 이 튜토리얼을 통해 사용자의 메뉴를 사용자 정의할 수 있기를 바랍니다. 워드 프레스 블로그.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” ​​custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/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 모듈을 사용하는 방법