아바다 테마의 헤더/메뉴를 투명하게 설정하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2019. 5. 10. 00:00 • 댓글:

워드프레스 베스트셀링 테마인 아바다(Avada)에서는 다양한 테마 옵션을 제공합니다. 많은 테마 옵션 중에서 헤더/메뉴 부분을 투명하게 설정하는 방법을 살펴보겠습니다.

헤더를 투명하게 설정하면 그림과 같이 메뉴와 로고를 포함한 헤더 부분이 투명하게 표시됩니다.

아바다 테마 - 투명한 헤더 메뉴

글로벌 데스크톱 헤더 배경색 및 투명도 설정

워드프레스 알림판 > Avada > Theme Options > Header > Header Styling로 이동합니다.

그런 다음 "Header Background Color" 옵션 부분을 찾습니다.

Select Color를 누르면 배경색과 투명도를 선택/조정할 수 있도록 다음과 같은 화면이 표시됩니다.

아바다 테마 헤더 투명도 조정

헤더 배경색을 선택하고 오른쪽의 불투명도를 조정하는 막대로 투명도를 조정합니다. 맨 오른쪽의 막대를 맨 아래로 드래그하면 헤더 배경이 투명하게 설정됩니다.

투명도는 헤더가 상단(Top) 위치일 때에만 작동하고 오른쪽/왼쪽 위치로 설정한 경우에는 작동하지 않습니다.

글로벌 모바일 헤더 배경색 및 투명도

모바일 헤더 배경색과 투명도를 설정하려면 Avada > Theme Options > Menu > Mobile Menu로 이동합니다. 그런 다음 Mobile Header Background Color 옵션 부분을 찾습니다.

아바다 모바일 헤더 투명도 조정

동일한 방법으로 모바일 헤더 배경색과 투명도를 설정합니다.

개별 페이지/글의 헤더를 투명하게 설정하기

개별 페이지/글에서 헤더의 배경색과 투명도를 조정하는 것도 가능합니다. 개별 페이지/글의 편집 화면의 Fusion Page Options에서 투명도를 설정할 수 있습니다. Fusion Page Options에서 지정한 설정이 테마 옵션에서 지정한 설정보다 우선하여 적용됩니다.

아바다 테마 - 개별 페이지/글의 헤더 배경색 및 투명도 설정

Header > Background Color 옵션에서 동일한 방법으로 헤더 배경색과 투명도를 설정합니다.

Fusion Page Options에는 모바일 헤더의 배경색과 투명도를 조정하는 옵션이 보이지 않네요. 모바일 헤더는 위에서 설명했듯이 테마 옵션에서 설정이 가능하고, 전체적으로 적용됩니다. 모바일에서 개별 페이지/글의 헤더 배경색과 투명도를 달리 설정하려면 CSS로 시도해볼 수 있을 것 같습니다.

마치며

이상으로 아바다 테마에서 PC와 모바일에서 헤더/메뉴 배경색과 투명도를 설정하는 방법에 대해 살펴보았습니다.

아바다 테마는 세세한 부분까지 설정할 수 있는 옵션이 제공되어 코딩 지식이 제한적인 초보자도 비교적 쉽게 사용할 수 있습니다. 제공되는 옵션을 제대로 활용하기 위해 시간을 투자하여 어떤 테마 옵션이 있는지 파악하면 도움이 될 것입니다.

참고: