Astra 테마에서 **헤더(Head 부분)**에 글씨가 에디터나 Customizer 상에는 보이지만 실제 페이지에서는 보이지 않는 문제는 꽤 자주 발생하는 현상입니다. 이 문제는 다양한 원인으로 발생할 수 있는데, 아래에 주요 원인과 해결 방법을 정리해드릴게요.
문제 요약
커스터마이저 또는 Elementor에서는 글씨가 보이는데,
“게시(Publish)” 한 후 실 웹페이지에서는 안 보인다?
원인별 진단 및 해결 방법
1. 글자 색상이 배경색과 겹치는 경우
- Astra는 헤더에 기본적으로 투명 배경이나 흰 배경을 설정하는 경우가 많습니다.
- 글자색이 흰색인데 배경도 흰색이면 글자가 “보이지 않는 것처럼” 보일 수 있습니다.
🔧 해결 방법:
외모 → 사용자 정의 → 헤더 빌더 → 메뉴 또는 사이트 제목 → 색상 조정
글자 색상을 어두운 색(예: #111 또는 #000)으로 바꿔보세요.
2. 스크롤 시 투명 헤더가 적용되었을 가능성
- Astra에서는 “투명 헤더” 옵션이 켜져 있을 경우,
실제 페이지에서는 다른 배경 위에 헤더가 겹치면서 글씨가 가려질 수 있습니다.
🔧 해결 방법:
- 외모 → 사용자 정의 → 헤더 → 투명 헤더
- “모든 페이지에서 투명 헤더 활성화” 체크 해제
- 또는 배경색과 글자색을 조정
3. Elementor에서 헤더를 비활성화했거나 중복되는 경우
- Elementor 템플릿에서 “Header” 영역을 따로 제작하면
기존 Astra 헤더가 덮이거나 비활성화될 수 있습니다.
🔧 확인 방법:
- 해당 페이지 편집 → 우측 패널의 “페이지 속성(Page Attributes)” 또는
Elementor 하단 설정에서 “헤더 없음” 이 선택되어 있는지 확인
4. 캐시(Cache) 문제
- 변경사항이 저장은 되었지만, 브라우저나 캐시 플러그인 때문에
실제로는 예전 버전이 보일 수 있습니다.
🔧 해결 방법:
- 브라우저 캐시 삭제 (
Ctrl + F5) - WP Fastest Cache, LiteSpeed Cache 같은 플러그인 사용 중이라면, 캐시 비우기
5. CSS나 플러그인 충돌
- 커스텀 CSS에서
.ast-site-identity또는.main-header-bar관련한display: none;등이 설정된 경우 - Elementor나 다른 테마 플러그인과 충돌 가능성
🔧 해결 방법:
- [외모 → 사용자 정의 → 추가 CSS] 항목 확인
- 필요 시 아래 코드로 강제 표시해보기:
css복사편집.ast-site-identity, .main-header-bar {
display: block !important;
color: #000 !important;
}
요약 진단 순서
- 글자 색상이 배경색과 겹치지 않는지 확인
- 투명 헤더가 활성화되어 있는지 확인
- Elementor 템플릿 충돌 여부 확인
- 브라우저 및 캐시 비우기
- 커스텀 CSS 확인