GeneratePress 테마 Page Hero 만드는 방법(Elements 기능 사용)

아이티장고

웹사이트 헤더는 방문자의 첫인상을 결정짓는 중요한 요소입니다. 그 중에서도 헤더 하단에 위치하는 Page Hero라는 요소는 방문자가 헤더 다음으로 마주하는 시각적 요소로, 사이트의 특성과 이미지를 강조하는 역할을 합니다. GeneratePress 테마를 사용하여 Elements 기능을 활용하면 Page Hero를 간편하고 효과적이게 디자인할 수 있습니다.

이를 통해, 방문자의 시선을 집중시키고 사이트 이미지를 확실히 각인시킬 수 있습니다. 이 글에서는 GeneratePress 테마의 엘리멘트를 이용해 Page Hero를 만드는 방법을 설명하도록 하겠습니다.

GeneratePress 테마 Elements 기능

GeneratePress 테마의 엘리먼트(Element) 기능은 웹사이트의 특정 영역에 웹사이트 운영자가 직접 커스터마이징된 콘텐츠를 삽입할 수 있는 강력한 도구입니다. GeneratePress 테마의 프리미엄 모듈 중 하나로, 특정 페이지나 포스트에 제목이나 발행 날짜, 댓글, 태그 등의 맞춤형 콘텐츠를 쉽게 추가할 수 있는 기능입니다.

웹사이트를 운영하다 보면 배너에 제목을 표시하거나, 애드센스 광고를 게재하고 싶을 때가 있습니다. 이렇게 내 워드프레스 사이트에 추가하거나 제외하고 싶은 요소들을 간편하게 설정할 수 있습니다. GeneratePress 무료 버전에서는 사용할 수 없고, 유료 버전을 결제해야 이용할 수 있다는 점이 있습니다.

GeneratePress 테마 Page Hero란?

GeneratePress 테마 Page Hero 예시
특정 웹사이트의 Page Hero 예시

GeneratePress 테마 Page Hero는 웹사이트 상단에 배치되는 시각적 콘텐츠 섹션으로, 방문자가 사이트에 방문하였을 때 헤더 다음으로 먼저 보는 부분이 됩니다. 이 부분에서는 커스터마이징된 이미지, 글 제목과 부제목, Call to Action 버튼 또는 광고 배너로 구성됩니다.

잘 디자인된 Page Hero는 방문자에게 특별한 인상을 남기고, 웹페이지의 목적과 효용성을 효과적으로 전달할 수 있습니다. 웹사이트 사용자에게 페이지 주제를 빠르게 전달하고, 이후 나오는 Call to Action 콘텐츠로 클릭을 유도할 수 있습니다.

GeneratePress 테마 Page Hero 만드는 법

GeneratePress 테마 Page Hero는 Elements 기능을 활성화하여 만들 수 있습니다. 이 Element 기능을 사용하면 다양한 디자인 요소를 결합해 커스터마이징할 수 있으며, 페이지나 포스트별로 맞춤 Page Hero를 만들 수 있습니다.

1.Page Hero 기본 구성 요소

  • 배경 이미지 또는 비디오 : 시각적 관심을 끄는 고품질의 배경 이미지를 사용하여 페이지의 분위기를 설정합니다. 비디오를 배경으로 활용하여 보는 사람의 시선을 끌 수도 있습니다.
  • 제목(헤드라인) : SEO를 고려한 주요 키워드가 포함된 제목을 배치하여 SEO 최적화를 향상시킬 수 있습니다.
  • 부제목 : 제목 하단에 나오는 부가적인 설명 또는 강조하고 싶은 메시지를 표시합니다.
  • Call to Action(CTA) : 방문자에게 특정 행동을 유도하는 버튼이나 이미지입니다. 구매하기, 문의하기, 구글 애드센스 광고 등을 배치하여 클릭을 유도할 수 있습니다.

2.Element 활성화

GeneratePress 테마 Page Hero Elements 활성화

먼저 워드프레스 관리자 > 모양 > GeneratePress 로 이동합니다. Modules에서 Elements항목을 활성화합니다. 위 화면과 같이 Deactivate라고 버튼이 떠 있어야 활성화된 상태입니다.

3.GeneratePress 테마 Page Hero 추가하기

image 196

GeneratPress 메뉴 아래에 Elements가 표시되면 해당 메뉴로 들어갑니다. 그러면 위와 같은 화면이 나옵니다. 여기서 Add New Element를 클릭해 새 블록 엘리먼트를 추가하면 됩니다.

image 197

Element Type을 선택해야 하는데, Block을 선택해줍니다. 그 다음 Create 버튼을 누룹니다.

image 198

여기서 우측의 Block Element에서 GenerateBlocks 플러그인을 추가로 설치해야 합니다. 이것을 설치해야 템플릿 레이아웃 선택, 디테일한 세부 디자인을 조정할 수 있습니다.

image 200

GenerateBlocks 플러그인 설치가 완료되면 플러그인 활성화 버튼을 클릭합니다. 그 다음 다시 Elements로 돌아갑니다.

4.display rules 설정

image 201

디스플레이 규칙에서는 Page Hero를 특정 페이지나 포스트에서만 표시되도록 할 수 있습니다. 특정 카테고리에서는 특정 Page Hero의 스타일이 표시되도록 설정할 수 있으니 적절히 사용해보시기 바랍니다.

하지만, 현재 저는 모든 글에서 공통된 Page Hero가 표시되길 원하기 때문에, Location 입력에는 [글]로 선택하여 [All 글]로 설정합니다. 그리고 우측의 Block Element 설정은 아래처럼 설정합니다.

  • Editor width: 100%
  • Element Type: Page Hero
  • QUICK HOOK SELECT: After header
  • HOOK NAME: after header
  • PRIORITY: 10

5.template 적용

GeneratePress 테마 Page Hero 템플릿 설정

그 다음은 Page Hero에 나타날 배너 디자인 형식을 설정해야 하는데, 우측에 Templates를 클릭해보면 배너 디자인 템플릿이 나옵니다. 이것을 선택하면 이미 디자인된 배너 이미지를 자동으로 적용시킬 수 있습니다. 커스텀으로 직접 만드는 것은 처음 만드는 분들에게 다소 어려울 수 있습니다. 그래서 기본적으로 제공되는 템플릿으로 Page Hero를 설정하는 것을 추천드립니다.

GeneratePress 테마 Page Hero 실제 페이지 적용

Page Hero가 실제 페이지에서 어떻게 표시되는지 확인한 모습입니다. 위와 같이 특성이미지가 적용되어 표시되는 것을 확인할 수 있습니다.

6.커스텀 CSS 적용

GeneratePress 테마 Page Hero에서는 커스텀 CSS를 통해 사용자 정의 디자인을 세부적으로 설정할 수 있습니다. 이것은 추가적인 설정방법과 코드에 대한 학습이 필요할 수 있으니 추후 더 정확히 정리해보도록 하겠습니다. 더 멋지고 세련된 디자인을 만들고 싶다면 아래 공식 문서를 보시고 공부해보시기 바랍니다.

정리

GeneratePress 테마의 Page Hero는 웹사이트의 시각적 요소를 극대화하고, 방문자에게 강력한 첫인상을 남기는 중요한 도구입니다. 적절한 디자인과 추가적인 키워드 설정을 통한 SEO 전략을 결합하면, Page Hero는 사이트의 트래픽을 증가시키고 전환율을 높이는 데 큰 역할을 할 수 있습니다.

GeneratePress의 엘리먼트 기능을 활용하려면 GeneratePress 테마 유료 버전을 결제해야 한다는 점이 있지만, 그 만큼 편리한 디자인 설정과 커스터마이징이 가능하다는 장점을 가지고 있습니다. Page Hero를 원하는 대로 디자인하면서 웹사이트의 개성을 올리고, 사이트를 한층 더 매력적으로 만들어가시길 바랍니다.

<다른 볼만한 글 추천>

Leave a Comment