Divi를 사용하여 모바일용 사용자 정의 고정 헤더를 추가하는 방법

모바일에서 고정 헤더(또는 탐색)를 사용하면 올바르게 수행하면 사이트의 유용성을 높일 수 있습니다. 일반적으로 고정 탐색은 표준 헤더보다 탐색 속도가 22% 더 빠른 것 같습니다. 이 고속 기술의 세계에서, 그것은 절반이라고 해도 상당한 스탯이다.

그리고 Divi를 사용하면 몇 줄의 CSS로 사이트에 고정 헤더를 추가할 수 있습니다. Divi에서는 이미 Theme Customizer를 사용하여 모바일 헤더를 사용자 정의할 수 있지만 현재 모바일용 고정 헤더를 배포하기 위한 기본 설정은 없습니다. 이 튜토리얼에서는 다음을 포함하는 사용자 정의 고정 헤더를 모바일에 추가하는 방법을 보여 드리겠습니다.

• 데스크탑 버전과 다른(더 모바일 친화적인) 로고.
• 더 많은 사용 가능한 보기 공간을 허용하는 더 짧은 헤더.
• 클릭 가능한 더 큰 햄버거 탐색 아이콘으로 모바일 탐색을 더 쉽게 배포할 수 있습니다.
• 사이트를 볼 때 헤더를 더욱 방해하는 반투명 배경.

헤더가 어떻게 생겼는지 살짝 엿볼 수 있습니다.

설정

이 설정은 고정 헤더에서 로고 전환에 대한 이전 게시물과 유사합니다. 시작하기 전에 다음을 완료해야 합니다.

1. 최신 버전의 Divi가 설치되어 있는지 확인하십시오.
2. 사이트에 대한 활성 기본 메뉴를 만듭니다.
3. WordPress 사이트의 백엔드에서 Theme Customizer > Header & Navigation > Header Format으로 이동하여 기본 헤더 스타일이 선택되어 있는지 확인합니다.

   

4. 200×131인 두 가지 버전의 로고를 만들어 WordPress 미디어 라이브러리에 추가합니다. 하나의 로고는 기본 헤더에 사용되고 다른 하나는 고정 헤더에 사용됩니다. 가능하다면 로고의 고정 헤더 버전을 더 수평으로 만들어 더 작은 고정 헤더에서 수직으로 뭉개지지 않도록 하세요. 다음은 제가 사용하는 메인 헤더 로고의 예입니다. 다음은 고정 헤더 로고의 예입니다. 높이가 낮은 헤더에 잘 맞는 더 간단하고 수평적인 로고를 만들기 위해 텍스트를 잘라냈습니다. 어쨌든 그 텍스트를 읽을 수 있는 사람은 없을 것이고 브랜드는 여전히 대표됩니다.

   

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

   고정 헤더를 구현하기 위해 사용자 정의 CSS를 추가할 것이므로 테마 사용자 정의 프로그램에서 표준 헤더 또는 고정 헤더 옵션을 사용자 정의할 필요가 없습니다. 그러나 내 예에서 메뉴 및 로고 크기에 대한 설정을 복제하려면 다음을 완료하십시오(완전히 선택 사항임).

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

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

   

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

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

   

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

Divi를 사용하여 모바일용 사용자 정의 고정 헤더를 추가하는 방법

YouTube 채널 구독

시작하기

우리는 Divi 테마 커스터마이저의 추가 CSS 섹션에서 커스텀 CSS를 입력하는 이 디자인을 구현할 것입니다. 모바일 장치만 대상으로 하기 때문에 스타일을 980px 미만의 브라우저 너비로 제한하는 미디어 쿼리에서 모든 CSS를 래핑할 것입니다. 계속해서 추가 CSS 상자에 다음을 입력하여 시작하십시오.

@media (max-width: 980px) {



}

CSS를 사용하여 모바일 고정 헤더 만들기

Divi는 사용자가 페이지를 아래로 스크롤할 때 "et-fixed-header"라는 클래스를 이미 추가했기 때문에 사용자 정의 CSS에서 해당 선택기를 사용하여 모바일 고정 헤더를 만들고 스타일을 지정할 수 있습니다.

아래의 첫 번째 CSS 그룹은 헤더를 페이지 상단에 고정(또는 고정)한 다음 고정 헤더의 높이를 55px로 조정합니다. 또한 반투명 흰색 배경색을 추가합니다. 미디어 쿼리 대괄호 안에 있는 테마 사용자 지정 프로그램의 추가 CSS에 다음을 추가합니다.

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple은 앱의 모든 클릭 가능한 UI 요소를 엄지와 손가락이 쉽게 클릭할 수 있도록 최소 44×44 픽셀을 권장합니다. 이것은 모바일 고정 헤더의 요소에 대한 좋은 가이드가 될 것입니다. 다음 CSS는 탐색 아이콘을 45px로 만듭니다.

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

마지막으로 고정 헤더에 로고 높이를 추가하여 더 잘 보이도록 합시다. 다음 CSS를 입력하십시오.

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

그게 다야! 우리는 모두 끝났습니다.
다음은 모바일 고정 헤더를 만들기 위한 CSS의 최종 컬렉션입니다.

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

설정을 저장합니다. 이제 작동하는 모바일 고정 헤더가 있습니다.

모바일 고정 헤더에서 로고 전환

모바일 고정 헤더에 다른 로고를 사용하려는 경우 일부 jQuery를 사용하여 이 작업을 상당히 쉽게 수행할 수 있습니다. 사용할 두 로고의 URL만 있으면 됩니다. 첫 번째 로고 이미지 URL은 사이트에 이미 사용 중인 기본 로고여야 합니다. 두 번째 로고 이미지 URL은 모바일 고정 헤더에 사용할 로고여야 합니다. 두 로고를 모두 미디어 라이브러리에 업로드하고 URL을 검색해야 합니다.

두 URL이 모두 있으면 WordPress 대시보드로 이동하여 Divi > 테마 옵션 > 통합으로 이동합니다. "블로그 헤드에 코드 추가" 입력 상자를 찾아 다음 jQuery 스크립트를 입력합니다.

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

이제 "ENTER DESKTOP LOGO IMAGE URL" 텍스트를 현재 사이트에 사용 중인 로고의 URL로 바꾸십시오.

그런 다음 "ENTER MOBILE LOGO IMAGE URL" 텍스트를 모바일 장치에만 사용하려는 로고의 URL로 바꿉니다.

설정을 저장하고 결과를 확인하십시오.

브라우저 지원

이 게시물에서는 CSS 속성 "position:fixed"에 크게 의존하여 CSS만 사용하여 고정 헤더를 만들었습니다. 이 CSS 속성은 특히 iOS Safari 및 Android에서 이전 버전의 모바일 브라우저와 일치하지 않을 수 있습니다. 그러나 요즘 "position:fixed"는 최신 버전의 모바일 브라우저에서 꽤 잘 지원됩니다(Opera Mini 제외).

다른 더 강력한 플러그인과 JavaScript 솔루션이 있지만 간단한 CSS 버전을 제공하는 것이 가장 좋습니다. 이 솔루션이 효과가 없는 경우 해당 옵션을 살펴보십시오.

마지막 생각들

모바일 고정 헤더가 유용성에 해로울 수 있다는 점은 언급할 가치가 있습니다. 그들은 항상 브라우저의 상단 부분을 계속 차단하기 때문에 조심하지 않으면 정당한 이유없이 귀중한 부동산을 낭비 할 수 있습니다. 모든 사람이 이 사람과 같은 패블릿을 가지고 있는 것은 아닙니다.

그렇기 때문에 고정 헤더에 더 짧은 높이, 다른 로고 및 더 큰 탐색 버튼을 제공하여 모바일 장치용으로 고정 헤더를 사용자 지정하는 것이 중요합니다. 그리고 Divi 웹사이트에 CSS 몇 줄을 추가하면 타사 플러그인을 사용하지 않고도 모바일에서 고정 헤더를 가질 수 있습니다. 따라서 다음 프로젝트에 하나를 추가하는 것이 합리적이라면 계속하십시오. 이러한 종류의 기능을 사용하면 웹 사이트의 UI를 개선할 수 있습니다.

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

건배!