GeneratePress 테마: 메뉴 아래에 그림자 효과 적용하기

오랜만에 테마 레이아웃을 변경하여 분위기를 바꾸어보았습니다. GeneratePress 테마의 Container 세팅을 One Container로 설정하고, 메뉴 부분에 그림자 효과를 적용해보았습니다.

GeneratePress 테마: 메뉴 아래에 그림자 효과 적용하기

그림자 효과를 적용하려는 경우 CSS를 사용하거나 배경 이미지를 반본적으로 적용하여 그림자 효과를 주는 방법이 있습니다.

가령 다음과 같은 CSS 코드를 적용할 수 있습니다.

선택자 {
-moz-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    -webkit-box-shadow: 0 4px 4px rgb(156 156 156 / 40%);
    box-shadow: 0 4px 4px rgb(156 156 156 / 40%);
}

예를 들어, 이 블로그의 경우 다음과 같은 코드를 추가하여 음영 효과를 낼 수 있습니다.

.inside-header {
-moz-box-shadow: 0 4px 4px rgba(156,156,156,.4);
    -webkit-box-shadow: 0 4px 4px rgb(156 156 156 / 40%);
    box-shadow: 0 4px 4px rgb(156 156 156 / 40%);
}

워드프레스 GeneratePress 테마의 Container 설정을 Separate Containers로 지정할 경우 다음과 비슷한 코드를 적용할 수 있습니다.

.nav-aligned-right .main-navigation {
// 스타일
}

세팅에 따라 선택자 부분은 조금씩 다를 수 있습니다.

그림자 효과를 내는 배경 이미지를 사용하는 경우에는 다음과 같은 코드를 응용할 수 있습니다.

.inside-header:before {
    content: "";
    background: transparent url("배경이미지경로");
    width: 100%;
    height: 12px;
    position: absolute;
    left: 0;
    bottom: -12px;
    z-index: 1;
}

CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가하시기 바랍니다.

GP Premium을 사용할 경우 사용자 정의하기에서 다양한 세팅이 가능합니다. CSS를 조금 알면 레이아웃을 어느 정도 원하는 대로 변경할 수 있을 것입니다.

참고

• GeneratePress 테마에 관련 글 리스트 표시하는 방법
• 워드프레스 GeneratePress 테마 헤더 설정 방법