1minago | 1분 전

1minago | 1분 전

BlogPro Guide

BlogPro Guide 4. 블로그프로 디자인 각 항목에 대하여(히어로 섹션, 배너 이미지, 레이아웃, 푸터, 소셜, 폰트, 이메일 수집, 팝업)

June 23, 2025

    BlogPro Guide 4. 블로그프로 디자인 각 항목에 대하여

    디자인- 히어로 섹션, 배너 이미지

    BlogPro Guide 4. 히어로 섹션, 배너 이미지 설명
    BlogPro Guide 4. 히어로 섹션, 배너 이미지 설명

    디자인- 히어로 섹션(기본)

    BlogPro Guide 4. “히어로 섹션-기본” 선택 시, 내 사이트에 보여지는 홈 화면.
    BlogPro Guide 4. “히어로 섹션-기본” 선택 시, 내 사이트에 보여지는 홈 화면.

    디자인- 히어로 섹션(제목&설명)

    BlogPro Guide 4. “히어로 섹션-제목&설명” 선택 시, 내 사이트에 보여지는 홈 화면.
    BlogPro Guide 4. “히어로 섹션-제목&설명” 선택 시, 내 사이트에 보여지는 홈 화면.
    1. 히어로 섹션 : 기본과 제목&설명 2가지로 구성되어 있다. 내 취향은 제목&설명이라 그것을 선택했다.
    1. 배너 이미지 : 내 사이트 홈 화면에 배너 이미지+url 링크를 등록할 수 있다.
    💡
    배너 이미지 클릭 시, 해당 사이트로 전환된다.

    디자인- 레이아웃

    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃 구성: 기본, 심플
    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃 구성: 기본, 심플

    디자인- 레이아웃(기본)

    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃: 기본 선택 시, 내 사이트에 보여지는 홈 화면
    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃: 기본 선택 시, 내 사이트에 보여지는 홈 화면

    디자인- 레이아웃(심플)

    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃: 심플 선택 시, 내 사이트에 보여지는 홈 화면
    BlogPro Guide 4. 디자인 - 게시물 개요 레이아웃: 심플 선택 시, 내 사이트에 보여지는 홈 화면
    1. 게시물 개요 레이아웃: 기본과 심플 2가지 구성이다. 나는 기본을 선택했다.
    💡
    레이아웃(심플): 게시글에 첨부된 모든 tag들이 홈 화면에 노출된다. 선택하면 모아보기 됨.

    디자인- 푸터링크

    BlogPro Guide - 블로그프로에서 푸터링크 설정하는 방법
    BlogPro Guide - 블로그프로에서 푸터링크 설정하는 방법
    BlogPro Guide - 내 사이트에 보여지는 푸터링크
    BlogPro Guide - 내 사이트에 보여지는 푸터링크
    1. 푸터링크: 내 사이트 맨 하단에 보여진다.

    워드프레스 애드센스 승인을 받을 때, 꼭 필요한 페이지로 개인정보 처리방침(privacy policy)이 있다.
    보통, 푸터링크에 넣어둔대서 나는 노션에서 페이지를 따로 만들고 푸터 링크에 url을 넣어줬다.

    디자인- 소셜 미디어

    BlogPro Guide - 블로그프로에서 소셜 미디어 나타내는 방법
    BlogPro Guide - 블로그프로에서 소셜 미디어 나타내는 방법
    BlogPro Guide - 내 사이트에 보여지는 설정된 소셜 미디어
    BlogPro Guide - 내 사이트에 보여지는 설정된 소셜 미디어
    1. 소셜 미디어: 내 사이트 하단메뉴에 표시할 수 있는 소셜 미디어 종류는 다양하다.

    페이스북, 인스타그램은 물론이고 쓰레드와 깃허브, 이메일 주소와 사용자 지정 링크까지
    보여주고 싶은 소셜 미디어 url을 넣으면, 상기 이미지(↑)처럼 내 사이트에 소셜 미디어가 표시된다.

    디자인- 폰트

    BlogPro Guide - 블로그프로 폰트 목록
    BlogPro Guide - 블로그프로 폰트 목록
    1. 폰트: 블로그프로 초창기 보다 현재 많은 폰트들이 추가됐다.

    ‘폰트 검색’란에 글씨를 적어볼 수 있고 크기 조절도 가능하니 비교 후 선택하면 된다.

    목록에서 원하는 폰트가 없다면, 하단 구글 폰트 링크를 클릭해 직접 원하는 폰트를 요청하면 된다.

    디자인- 구독자 양식

    BlogPro Guide - 블로그프로 이메일 수집 방법, 구독자 양식 활성화
    BlogPro Guide - 블로그프로 이메일 수집 방법, 구독자 양식 활성화
    BlogPro Guide - 블로그프로 이메일 수집 방법. 구독자 양식이 활성화된 내 사이트 홈 화면(상단)
    BlogPro Guide - 블로그프로 이메일 수집 방법. 구독자 양식이 활성화된 내 사이트 홈 화면(상단)
    BlogPro Guide - 블로그프로 이메일 수집 방법. 구독자 양식이 활성화된 내 사이트 홈 화면(하단)
    BlogPro Guide - 블로그프로 이메일 수집 방법. 구독자 양식이 활성화된 내 사이트 홈 화면(하단)
    1. 구독자 양식(이메일 수집): 이메일을 수집해서 온라인 비즈니스에 활용할 분이라면 적극 추천하는 기능

    사이트 상단, 하단에 위치한 ENTER EMAIL 란에 고객이 자신의 이메일을 입력하고 SUBSCRIBE를 누르면

    구독자에게 컨펌 메일이 발송된다.

    구독자가 Confirm Subscription(구독 확인)을 클릭하면, 구독자 이메일 수집 성공!

    이후 내가 글을 발행할 때마다 구독자에게 알림 이메일에 발송된다.

    구독자 양식(이메일 수집)- 구독 직후 및 구독자가 받는 이메일 화면

    BlogPro 구독자 양식(이메일 수집) 구독 직후 화면
    BlogPro 구독자 양식(이메일 수집) 구독 직후 화면
    BlogPro 구독자 양식(이메일 수집) 구독자가 받는 이메일
    BlogPro 구독자 양식(이메일 수집) 구독자가 받는 이메일

    구독자 양식(이메일 수집)- 구독자가 받는 구독 컨펌 이메일

    BlogPro 구독자 양식(이메일 수집) 구독자가 받는 컨펌 이메일
    BlogPro 구독자 양식(이메일 수집) 구독자가 받는 컨펌 이메일

    BlogPro 구독자 양식(이메일 수집) 구독 컨펌 화면
    BlogPro 구독자 양식(이메일 수집) 구독 컨펌 화면

    우측 이메일 내용: 현재는 미지원 기능
    구독 사이트의 게시글이 발행될 때마다
    알림 메일이 발송됩니다. → 현재는 스팸 이슈로 지원되지 않는 기능!

    디자인- 목차

    BlogPro Guide - 블로그프로 목차 기능 활성화
    BlogPro Guide - 블로그프로 목차 기능 활성화
    BlogPro Guide - 블로그프로 목차 기능 활성화→ 노션에서 보여지는 목차
    BlogPro Guide - 블로그프로 목차 기능 활성화→ 노션에서 보여지는 목차
    BlogPro Guide - 블로그프로 목차 기능 활성화→ 내 사이트에서 보여지는 목차
    BlogPro Guide - 블로그프로 목차 기능 활성화→ 내 사이트에서 보여지는 목차
    1. 목차: 블로그프로 대시보드 디자인 섹션에서 목차 기능을 활성화 하면

    노션의 목차 기능을 그대로 내 사이트에서 활용할 수 있습니다.

    디자인- BlogPro 브랜딩

    BlogPro Guide - 블로그프로 목차 기능 활성화
    BlogPro Guide - 블로그프로 목차 기능 활성화
    BlogPro Guide - 블로그프로 브랜딩 기능 활성화
    BlogPro Guide - 블로그프로 브랜딩 기능 활성화
    1. BlogPro 브랜딩: 브랜딩 기능을 제거하면 Powered by BlogPro가 내 사이트에서 제거됩니다.

    디자인- 팝업

    BlogPro Guide - 블로그프로 팝업 기능 활성화 화면
    BlogPro Guide - 블로그프로 팝업 기능 활성화 화면
    BlogPro Guide - 블로그프로 팝업 기능 활성화
    BlogPro Guide - 블로그프로 팝업 기능 활성화
    1. 팝업: 방문자를 내 사이트에서 → 다른 사이트로 전환시키고 싶다면 팝업 기능을 활용해보세요.

    팝업 이미지에 나타나는 모든 요소는 커스터 마이징 가능해서

    내가 좋아하는 이미지, 이모티콘을 활용해, 원하는 위치에 팝업을 배치할 수도 있습니다.

    💡
    다른 블로그, 온라인 스토어, 전자책 결제 페이지 등으로 전환하는데 활용해보면 좋을 것 같습니다.

    이어서▶ BlogPro Guide 시리즈

    👉🏼 BlogPro Guide 1. 노션 기반 블로그, 블로그프로 블로그 개설 및 게시글 작성하기

    BlogPro Guide 1. 노션 기반 블로그, 블로그프로 블로그 개설 및 게시글 작성하기

    BlogPro 블로그 개설 및 포스팅 작성 가이드

    👉🏼 BlogPro Guide 2. 블로그프로 대시보드 각 항목에 대하여

    BlogPro Guide 2. 블로그프로 대시보드 각 항목에 대하여

    BlogPro Guide 블로그프로 블로그 대시보드 항목

    👉🏼 BlogPro Guide 3. 블로그프로 디자인 각 항목에 대하여 (로고, 파비콘, CTA, 상단메뉴, 헤더링크)

    BlogPro Guide 3. 블로그프로 디자인 각 항목에 대하여 (로고, 파비콘, CTA, 상단메뉴, 헤더링크)

    👉🏼 파비콘, 로고 사이즈의 모든 단위는 픽셀(px)입니다.

    👉🏼 BlogPro Guide 4. 블로그프로 디자인 각 항목에 대하여(히어로 섹션, 배너 이미지, 레이아웃, 푸터, 소셜, 폰트, 이메일 수집, 팝업)

    BlogPro Guide 4. 블로그프로 디자인 각 항목에 대하여(히어로 섹션, 배너 이미지, 레이아웃, 푸터, 소셜, 폰트, 이메일 수집, 팝업)

    워드프레스 애드센스 승인을 받을 때, 꼭 필요한 페이지로 개인정보 처리방침(privacy policy)이 있다. 보통, 푸터링크에 넣어둔대서 나는 노션에서 페이지를 따로 만들고 푸터 링크에 url을 넣어줬다.페이스북, 인스타그램은 물론이고 쓰레드와 깃허브, 이메일 주소와 사용자 지정 링크까지 보여주고 싶은 소셜 미디어 url을 넣으면, 상기 이미지(↑)처럼 내 사이트에 소셜 미디어가 표시된다. ‘폰트 검색’란에 글씨를 적어볼 수 있고 크기

    👉🏼 BlogPro Guide 5. 블로그프로 도메인, 수익화, 구독자 관리

    BlogPro Guide 5. 블로그프로 도메인, 수익화, 구독자 관리

    사족: 보통, 애드센스 블로그 운영을 염두하면, 티스토리로 시작해서 워드프레스로 넘어간다고 한다.나는 애드센스 블로그 운영 목적으로 워드프레스 까지 염두하고 워드프레스가 아닌, 블로그프로를 선택했다.워드프레스는 설치 종류부터 2가지에 뭘 설치하라는 건지 한 번 해봐도 어렵다. 서버 선택도 워드프레스 고수마다 추천하는 서버가 다양해서 거기서도 고심하고 매달 서버 비용도 든다. 거기서 끝나지 않고, 각종 플러그인도 비용 발생을 염두하게 되는데