Divi에서 고정 헤더의 로고 전환하기

색상과 크기가 다른 다양한 버전의 로고를 만드는 것은 항상 좋은 생각입니다. 예를 들어, 다양한 배경 색상에서 멋지게 보이도록 로고의 어둡고 밝은 버전이 있어야 합니다. 그리고 웹사이트의 비좁은 영역에 대해 더 작은(더 적은 수직 및 더 수평적) 버전의 로고를 사용합니다. 다른 버전의 로고를 사용하는 가장 좋은 위치 중 하나는 고정(또는 고정) 헤더입니다.

대부분의 경우 고정 헤더에는 기본 헤더와 다른 스타일이 필요합니다. 동일한 로고를 유지하면 고정 헤더의 스타일을 지정하는 방법이 제한됩니다. 여기서 사용자 정의 로고가 있으면 편리합니다. 고정 헤더용으로 특별히 제작된 별도의 로고를 사용하여 원하는 대로 스타일을 지정할 수 있습니다. 이렇게 하면 사이트 디자인을 더 잘 제어할 수 있습니다.

이 게시물에서는 다음을 수행하는 방법을 보여 드리겠습니다.

1. 고정 헤더가 활성화되면 로고를 다른 로고로 전환하십시오. (이것은 CSS의 한 줄로 수행할 수 있습니다)
2. 고정 헤더의 로고 색상을 반전합니다.
3. 고정 헤더에서 로고를 전환할 때 멋진 전환 효과를 추가하세요.
4. 중앙 헤더 로고를 고정 헤더의 기본(왼쪽 정렬) 레이아웃으로 전환하고 이동합니다.

시작하자.

엿보기

다음은 이 자습서에서 수행할 작업에 대한 약간의 미리보기입니다.

간단한 로고 스위치는 다음과 같습니다.

다음은 전환 효과가 있는 로고 스위치입니다.

다음은 중앙 헤더 스타일에서 위치를 변경하는 로고입니다.

설정

다른 작업을 수행하기 전에 다음을 완료해야 합니다.

1. 최신 버전의 Divi를 설치합니다.
2. 활성 Divi 하위 테마를 구현합니다. 자식 테마를 설정하는 데 도움이 필요한 경우 이 게시물에서 다룹니다. 추가 도움이 필요한 경우. 지원팀에 문의하세요.
3. 200×131인 두 가지 버전의 로고를 만들어 WordPress 미디어 라이브러리에 추가합니다. 하나의 로고는 기본 헤더에 사용되고 다른 하나는 고정 헤더에 사용됩니다. 가능하다면 로고의 고정 헤더 버전을 더 수평으로 만들어 더 작은 고정 헤더에서 수직으로 뭉개지지 않도록 하세요. 다음은 제가 사용하는 메인 헤더 로고의 예입니다. 다음은 고정 헤더 로고의 예입니다. 높이가 낮은 헤더에 잘 맞는 더 간단하고 수평적인 로고를 만들기 위해 텍스트를 잘라냈습니다. 어쨌든 그 텍스트를 읽을 수 있는 사람은 없을 것이고 브랜드는 여전히 대표됩니다.

   

4. 메뉴 항목으로 기본 메뉴를 설정합니다.

이 단계를 완료하면 시작할 준비가 된 것입니다.

Divi에서 고정 헤더의 로고 전환하기

YouTube 채널 구독

CSS를 사용하여 고정 헤더의 로고 전환

사용자 정의 CSS를 사용하기 전에 테마 커스터마이저 내에서 메뉴 설정을 설정해 보겠습니다. WordPress 사이트의 백엔드에서 Theme Customizer > Header & Navigation > Header Format으로 이동하여 기본 헤더 스타일이 선택되어 있는지 확인합니다.

그런 다음 테마 사용자 지정 프로그램의 헤더 및 탐색 설정으로 돌아갑니다. 기본 메뉴 모음을 선택하고 다음을 업데이트합니다.

메뉴 높이: 105
로고 최대 높이: 80
텍스트 크기: 20

이제 헤더 및 탐색으로 돌아갑니다. 고정 탐색 설정을 선택하고 다음을 업데이트합니다.

고정 메뉴 높이: 60
텍스트 크기: 20

사이트 디자인에 맞게 나머지 설정을 추가할 수 있습니다. 메뉴 및 로고 높이는 필요에 따라 조정해야 할 수 있습니다. 그러나 크기가 정확하도록 전환 효과를 추가하려면 이 설정을 유지하는 것이 좋습니다. 언제든지 돌아와서 나중에 변경할 수 있습니다.

고정 헤더의 로고를 전환하기 위해 CSS 스니펫 삽입

고정 헤더에서 로고 이미지를 다른 로고 이미지로 전환하는 가장 간단한 방법 중 하나는 CSS 속성 "content"를 사용하는 것입니다. CSS에 익숙하다면 일반적으로 :before 또는 :after 의사 요소에 내용을 추가할 때 사용됩니다. 이 경우 현재 로고 이미지를 대체하기 위해 새 콘텐츠(로고 이미지)를 삽입하는 데 사용할 것입니다.

이렇게 하려면 테마 사용자 정의 > 추가 CSS로 이동하여 다음 CSS를 삽입하십시오.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

이제 "INSERT NEW LOGO IMAGE"라는 텍스트를 실제 로고 이미지로 바꿉니다.

URL을 가져오려면 WordPress 대시보드에서 미디어 라이브러리로 이동하고 추가하려는 이미지를 클릭합니다. 팝업 화면의 오른쪽 상단에서 URL을 찾을 수 있습니다.

그게 다야 이 간단한 솔루션은 페이지 전체를 스크롤할 때 고정 헤더가 활성화된 경우에만 로고를 새 로고로 교체합니다. 페이지 맨 위로 스크롤하면 기본 로고가 반환됩니다.

로고 색상 반전

고정 헤더에 동일한 로고의 어둡거나 밝은 버전만 추가하려는 경우 이 솔루션이 마음에 드실 수 있습니다.

CSS 반전 속성을 사용하면 몇 줄의 CSS로 로고 색상을 반전할 수 있습니다. 예를 들어 로고가 검은색인 경우 로고 색상을 반전하면 흰색으로 바뀝니다. 로고가 흰색이면 검은색으로 바뀝니다. 이 스타일을 로고에 추가하려면 테마 사용자 정의 도구 > 추가 CSS로 이동하여 다음 CSS를 추가하십시오(이전에 추가한 CSS를 삭제하거나 주석 처리해야 함).

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

결과를 확인하십시오. 검은색 로고를 흰색 버전으로 반전시킨 것입니다.

고정 헤더에서 로고 전환 시 전환 효과 추가

고정 헤더에서 로고를 전환하는 또 다른 (보다 강력한) 방법을 설명하는 이유가 궁금할 것입니다. 주된 이유는 로고가 고정 헤더로 "전환"할 때 멋진 전환 효과를 추가할 수 있기 때문입니다. 이렇게 하려면 스타일링을 위해 서로 옆에 두 로고 이미지가 필요합니다.

Header.php 파일에 새 로고 추가하기

헤더에 다른 로고 이미지를 추가하려면 header.php 파일에 추가해야 합니다. FileZilla와 같은 FTP 클라이언트를 사용하여 Divi 테마 파일의 루트로 이동하여 header.php 파일의 복사본을 만듭니다.

header.php 파일의 복사본을 자식 테마 폴더의 루트에 붙여넣습니다.

그런 다음 원하는 텍스트 편집기를 사용하여 header.php 파일을 엽니다. "logo_container" 클래스가 있는 div에 래핑된 로고 이미지를 포함하는 링크의 html 코드를 찾습니다.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

헤더에 다른 이미지를 표시하기 위해 유사한 코드 스니펫을 추가할 것입니다. 바로 아래에 다음 코드를 복사하여 붙여넣습니다.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

이것은 두 가지 차이점이 있는 위에 있는 원본 코드의 업데이트된 복사본입니다. 먼저 추가해야 하는 새 이미지 소스 URL이 있습니다. 그리고 두 번째로 "second-logo"라는 클래스입니다.

WordPress 대시보드에서 미디어 라이브러리로 이동하여 추가하려는 새 로고 이미지의 URL을 가져옵니다.

그런 다음 header.php 파일로 돌아갑니다. 방금 만든 코드 조각을 찾아 "INSERT NEW LOGO IMAGE URL HERE"라는 텍스트를 실제 이미지 URL로 바꿉니다.

header.php 파일을 저장합니다.

이제 사이트에 나란히 표시될 두 개의 로고가 있습니다. 그렇게 하고 싶지 않을 수 있으므로 전환 효과를 만드는 데 필요한 사용자 정의 CSS를 추가해 보겠습니다.

고정 헤더에서 로고가 전환될 때 멋진 전환 추가

Theme Customizer > Additional CSS로 이동하여 이 게시물의 이전 섹션에서 코드를 삭제(또는 주석 처리)합니다(해당되는 경우). 그런 다음 다음 사용자 정의 CSS를 추가합니다.

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

코드가 무엇을 하는지 알려주기 위해 CSS 코드에 주석을 달았습니다. 간단히 말해서 CSS는 로고를 헤더 외부로 이동시키면서 각 로고의 불투명도를 낮추고 증가시킵니다. 따라서 고정 헤더로 이동할 때 로고에 대해 꽤 멋진 전환 효과를 얻을 수 있습니다.

고정 헤더의 중앙 헤더 로고 위치를 왼쪽으로 변경

머리글을 표시하는 가운데 머리글 스타일이 마음에 듭니다. 고정 머리글에서 해당 로고의 위치를 ​​확인하는 것이 좋습니다. 저에게는 고정 헤더에 기본 헤더 스타일(로고 왼쪽 정렬)을 사용하는 것을 선호합니다. 주된 이유는 탐색 상단에 로고가 있으면 페이지를 보기 위해 스크롤할 때 고정 헤더가 너무 커지는 경향이 있기 때문입니다.

중앙 로고에서 왼쪽 맞춤 로고로 전환하려면 테마 사용자 정의 도구의 추가 CSS 상자에 다음 사용자 정의 CSS를 추가할 수 있습니다. 먼저 빠르고 쉬운 방법으로 로고를 전환하는 코드를 추가합니다.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

로고 이미지 URL을 추가하는 것을 잊지 마십시오.

그런 다음 다음을 추가하여 로고 위치를 조정합니다.

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

참고: 이 게시물에서 충돌할 수 있는 이전 CSS를 모두 제거해야 합니다.

그게 다야 결과를 확인하십시오.

마감 중

좋은 로고를 자랑하지 않는 것은 어렵습니다. 따라서 작은 부적격 버전에 만족하지 마십시오. 더 나쁜 것은 고정 헤더에 로고를 숨기는 것입니다. 고객이 좋아할 부드러운 전환이 있는 사용자 지정 버전으로 전환하십시오.

다가오는

기본적으로 Divi는 모바일에서 고정 헤더를 포함하지 않습니다. 그러나 하나를 추가하는 것은 정말 간단합니다. 다음 게시물에서는 모바일에서 다른 로고가 있는 사용자 지정 고정 헤더를 추가하는 방법을 보여 드리겠습니다. 여기 살짝 엿보기가 있습니다.

나는 그것을 기대하고있어.

아래에 의견을 게시하는 것을 잊지 마십시오. 하위 테마 파일 설정 및 편집과 관련된 문제가 있는 경우 지원 팀에 문의하세요.

건배.