워드프레스를 사용할 때 서식을 적용할 일이 종종 있습니다. 크게는 h태그를 이용한 헤딩 소제목에 대한 서식을 만들 때이고, 또 하나는 링크를 걸 때 눈에 잘 뜨이도록 버튼을 만들어서 클릭을 유도할 때입니다. 이번 글에서는 워드프레스를 할 때 많이 쓰는 서식에 대한 부분에 대해 알려드리도록 하겠습니다.
헤딩 h태그란?
헤딩은 h태그를 말합니다. 애드센스 신청을 할 때부터 검색엔진 SEO를 위해, 자동 목차를 위해 필수적으로 필요한 제목 계층을 나누는 html 코드라고 할 수 있죠. 지금 보고 계신 이 워드프레스에도 h태그에 서식이 보이실거에요. 먼저 h태그의 중요성에 대해서 관련 글을 한 번 보시길 추천드립니다.
헤딩 서식 만들기
아마 이 워드프레스 정보공유를 처음부터 보고 따라오신 분들은 이미 헤딩 서식이 적용되어 있으실 거에요. 제너레이트프레스 무료버전의 커스텀 셋팅에서 이미 알려드렸기 때문입니다.
- 디자인 – 테마 – 사용자정의하기 – 추가 CSS 에 들어가서 헤딩에 들어가는 서식을 지정하시면 됩니다.
그곳에 넣는 서식 코드 예시는 아래 링크를 참조하시면 됩니다.
헤딩 태그 소제목 박스 모양 바꾸기
워드프레스에서 쓰이는 헤딩의 소제목 서식의 모양 만드는 방법은 아래 글을 참조하시면 됩니다. 모양을 꾸미는 방법에 대한 기본적인 내용과 다양한 예시는 아래 링크를 참조해주세요
색상 바꾸기
그곳에 들어가는 색상은 본인의 워드프레스 테마에 맞게 수정해주시면 됩니다. 만약 원하는 컬러의 번호를 확인하고 싶으시면 아래 링크를 통해 확인하실 수 있습니다.
버튼 넣기
지금 위에 있는 ‘구글 컬러피커 바로가기’ 버튼을 보셨죠? 혹은 다른 글로 넘어가는 서식을 보셨을 거에요. 이런 종류의 버튼은 다른 글로 링크를 넘길때 클릭을 유도하면서 전체광고를 뜨게하면서 CTR을 높일 수 있습니다. 마케팅 적인 측면에서 콜투액션(CTA / Call to Action) 버튼이라고도 합니다.
콜투액션(CTA) 버튼
“콜투 액션”이 온라인 마케팅 측면에서는 웹사이트, 광고 캠페인, 이메일 마케팅, 소셜 미디어, 랜딩 페이지 등 다양한 디지털 마케팅에서 쓰입니다. 온라인 마케터가 웹사이트 방문자나 온라인 광고 대상자 등을 특정 행동을 취하도록 유도하거나 유용한 정보를 얻도록 돕는 중요한 개념입니다.
수익형 블로그에서는 단순히 광고를 클릭하게 하는 것 뿐만이 아니라 위에서 설명한 대로 방문자에게 정보를 주기 위한 액션을 자연스럽게 끌어내면서 전체광고를 노출시키는 전략이 필요합니다. 아래에 다양한 콜투 액션 예시를 들어보겠습니다.
효과적인 CTA(Call to Action) 단어나 구문은 대상 대화 상대로 원하는 행동을 취하도록 유도하기 위해 중요합니다. 다음은 몇 가지 효과적인 CTA 단어와 구문의 예시입니다:
- “지금 시작하세요” (Get Started Now)
- “바로 다운로드” (Download Now)
- “무료로 체험해보세요” (Try It for Free)
- “지금 보기” (Watch Now)
- “더 알아보기” (Learn More)
- “특별 혜택 받기” (Claim Your Special Offer)
- “무료 견적 받기” (Get a Free Quote)
- “즉시 구매” (Buy Now)
- “지금 예약” (Book Now)
- “뉴스레터 구독” (Subscribe to Newsletter)
- “연락하기” (Contact Us)
- “참여하기” (Join Us)
- “시작하려면 클릭” (Click to Start)
- “즉시 등록” (Register Now)
- “자세한 내용 보기” (See Full Details)
- “지금 문의하기” (Inquire Now)
- “비즈니스 문의” (Business Inquiries)
- “즉시 수강 신청” (Enroll Now)
이러한 CTA 단어와 구문은 목표와 대상 시장에 따라 조정해서 쓰시면 됩니다. 좀 느낌이 오시나요? 그럼 이제 워드프레스에서 버튼 만드는 방법에 대해 알려드리도록 하겠습니다.
버튼 만들기
버튼을 만드는 방법은 여러가지가 있습니다. 일단 수동으로 버튼을 만들어 패턴화해서 쓰는 방법을 먼저 설명드리도록 하겠습니다.
메뉴 좌상단의 + 버튼을 눌러 버튼을 선택하거나 바로 글쓰기 창에서 ‘/버튼’ 이라고 문단에 써보세요
그럼 위와 같이 까만 배경에 텍스트 추가라는 이미지가 나옵니다.
그리고 우측 사이드배너에 블록을 보시면 이제 이 버튼의 색상부터 여러가지 세팅을 수동으로 할 수 있습니다. 먼저 폭을 25%에서 100%까지 설정할 수 있습니다. 사이트의 가로폭에 맞춰서 길이를 조정하게 됩니다.
그리고 우측의 버튼을 누르면 세부적인 디자인 설정을 할 수 있습니다.
- 스타일 : 색을 채우거나(기본값) 테두리만 나오게 하거나(아웃라인)
- 색상 : 텍스트 및 배경 색상 설정
- 서체 : S M L XL 로 결정해도 되고 그 위 세부설정을 누르면 폰트 크기까지 결정할 수 있습니다
- 반지름 : 마우스를 조정해보면 바깥 테두리가 둥그스름하게 바뀌는 정도를 조정할 수 있습니다.
그럼 이런 식으로 버튼을 만들 수 있습니다.
버튼 서식(패턴) 만들기
그럼 이제 만든 버튼을 서식화해서 쓰고 싶을 때 바로 불러오는 방법을 보겠습니다. 티스토리에서는 서식이라고 표현하죠. 워드프레스에서는 패턴이라고 합니다. 버튼을 다 꾸미고 난 다음에 패턴을 만들고 다시 활용하는 방법은 아래 글을 참조하시면 됩니다. 패턴 사용시 꼭 첨부해제하는 주의사항도 잘 읽어보세요