오랜만에 테마 레이아웃을 변경하여 분위기를 바꾸어보았습니다. 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를 조금 알면 레이아웃을 어느 정도 원하는 대로 변경할 수 있을 것입니다.
