워드프레스 글 제목 (Post Title) 꾸미는 방법 (feat. 제너레이트프레스 엘리먼트)

워드프레스 글 제목 (Post Title)을 눈에 잘 띄게 하려면 어떻게 해야 할까요?

오늘은 제너레이트프레스 엘리먼트 기능을 활용하여 워드프레스 글 제목을 꾸미는 방법에 대해서 알아보도록 하겠습니다.

먼저 아래 결과물을 보겠습니다.

글 제목을 세련된 배너 느낌으로 꾸며보았습니다. 마음에 드시나요? 마음에 드신다면 이 글을 읽고 하나씩 적용해보시기 바랍니다.

누구나 쉽게 할 수 있습니다. 또한 이 글을 끝까지 읽고나면 개인 취향대로 응용도 가능합니다. 그럼 워드프레스 포스트 타이틀을 멋지게 꾸미는 방법에 대해서 알아보겠습니다.

시작하기 전에…

이 글을 보고 적용하기 위해서는 제너레이트프레스 유료 버전을 설치해야 합니다.

현재 제너레이트프레스 무료 버전을 사용하거나 다른 테마를 사용하고 있지만, 제너레이트프레스 유료 버전 설치에 관심이 있다면 아래 글을 참고하시기 바랍니다.

✅ 제너레이트프레스 (GeneratePress) 유료 테마 결제 및 설치 테마 적용 방법

오늘은 배경 이미지를 활용할 예정입니다. 그러므로 무료 이미지 사이트에서 글 제목 배경에 넣을 마음에 드는 이미지를 하나 다운받으시기 바랍니다.

저는 아래 언스플래시라는 사이트에서 이미지를 다운받았습니다.

https://unsplash.com/ko

참고로 이미지 검색할 때 필터는 라이선스 무료, 방향은 가로로 설정하고 검색어에 ‘background image’ 라고 검색하면 원하는 이미지 찾기가 한결 수월해집니다.

자 그럼 준비가 되었다면 글 제목(Post Title)을 하나씩 꾸며보도록 하겠습니다.

워드프레스 글 제목 꾸미는 방법

1) 메뉴에서 외모 > Elements > Add New Element 버튼을 누릅니다.

엘리먼트 타입은 Header를 선택하고 생성 버튼을 누릅니다.

2) 아래 HTML 언어를 복사 붙여넣기 합니다.

<h1>
	{{post_title}}
</h1>

<div class="hero-meta">
	{{post_terms.category}} | @{{post_author}} | {{post_date}}
</div>

우측에 Template Tags를 보고 표시하고 싶은 태그를 복사해서 붙여넣습니다. 저는 글 제목, 카테고리, 글쓴이, 날짜 정보를 입력했습니다.

취향 껏 넣고 싶은 정보는 넣고, 빼고 싶은 정보는 빼도 좋습니다.

HTML 언어를 복사 붙여넣은 후에는 아래 Page Hero 설정 값을 선택합니다.

  • Element Classes : 엘리먼트 클래스 (CSS 적용을 위한 클래스 정의)
  • Container (Inner Container) : 컨테이너 넓이
  • Horizontal Alignment : 글 제목 정렬
  • Full Screen : 풀 스크린

저는 여기서 컨테이너 넓이는 딱 맞게, 글 제목은 중앙 정렬로 설정하였습니다.

3) 배경 이미지를 업로드 하고 속성 값을 설정합니다.

  • Padding : 상하좌우 여백
  • Background Image : 배경 이미지 (Custom Image 삽입)
  • Background Position : 배경 위치
  • Text Color : 글 제목 색깔
  • Link Color : 링크 색깔
  • Link Color Hover : 링크 마우스 올렸을 때 색깔

저는 배경 위치를 중앙에 놓고 위 아래 여백은 100px로 설정했습니다. 그리고 글자 색은 배경 이미지에 어울리는 흰색으로 선택했습니다.

만약 배경 이미지 없이 글 제목만 사용하고 싶으신 분은 No Background Image를 선택하고 배경색을 선택하면 됩니다. 또한 특성 이미지를 배경 이미지로 설정할 수도 있습니다.

본인 취향대로 값을 설정한 후에 우측 공개 버튼을 누르면 끝입니다.

글 제목 사이트 헤더와 합치기

Site Header 속성 값을 설정하면 글 제목과 사이트 헤더를 합칠 수도 있습니다.

무슨 말인지 모르겠다구요? 아래 결과물을 보면 단번에 이해가 되실 겁니다.

워드프레스 글 제목과 헤더 부분을 합치는 방법은 아래와 같습니다.

  • Merge with Content : 콘텐츠 합치기 여부
  • Site Title : 사이트 제목 색깔
  • Navigation Colors : 네비게이션 색깔 사용 여부
  • Navigation Text : 네비게이션 글자 색깔

저는 사이트 헤더 부분을 컨텐츠와 합치도록 설정하고 사이트 제목과 네이게이션 색깔만 흰색으로 변경했습니다.

다른 설정 값도 바꿔보면서 본인 사이트에 어울리는 설정 값을 찾아보세요.

글 제목 글자 크기 변경하기

여기까지 읽으신 분들 중에서 글자 크기를 설정하는 부분이 없다는 사실을 알아차린 분들 계신가요? 아쉽게도 속성 값 중에서 글자 크기를 바로 변경하는 부분은 없습니다.

그러나 방법은 있습니다. 바로 CSS를 이용하는 방법인데요. 글 제목의 글자 크기를 변경하고 싶으신 분들은 아래 내용을 참고하시기 바랍니다.

1) 먼저 Page Hero에서 Element Classes 클래스 이름을 설정합니다.

저는 클래스명을 post-title 이라고 지었습니다. 클래스명을 바꾸고 싶은 분은 아래 CSS 코드에서도 똑같이 변경해주셔야 합니다.

2) 메뉴에서 외모 > 추가 CSS 들어가서 아래 코드를 복사 붙여넣기 합니다.

/* 글제목 */
.post-title h1{

font-size:30px;
font-weight:bold;

}

CSS 코드를 통해서 post-title 클래스 h1 태그의 글자 크기는 30px로 하고, 글자 두께는 두껍게 설정했습니다. 이렇게 CSS를 추가해서 글 제목 글자 크기를 조정할 수 있습니다.

글 마치며…

지금까지 제너레이트프레스 엘리먼트를 통해서 글 제목(Post Title)을 꾸미는 방법에 대해서 알아봤습니다. 엘리먼트를 사용해보니 개인 취향에 맞는 워드프레스를 만들기 위해서는 엘리먼트를 잘 활용해야 되는 것 같습니다.

그 동안 비타민노트에서 적용한 워드프레스 설정 내용이 궁금하신 분들은 아래 연관글을 읽어보시기 바랍니다. 그럼 오늘 작성한 글도 누군가에게 도움이 되었기를 바라며 이만 마치도록 하겠습니다.

답글 남기기