가이드/콘텐츠 생성/미디어/사이트에 배너 추가하기

사이트에 배너 추가하기

“히어로” 또는 “배너” 이미지라고도 하는 커버 블록은 사이트에 큰 이미지, 비디오 또는 텍스트 배너를 추가할 때 사용합니다. 이 가이드에서는 배너를 추가하고 표시할 이미지, 비디오 또는 색상을 선택하는 방법을 안내합니다.

비디오 튜토리얼

이 비디오에서는 커버 블록을 사용해 워드프레스닷컴 사이트에 시각적인 헤더나 배너 스타일 섹션을 추가하는 방법을 알아봅니다. 배경 이미지나 비디오를 추가하고 그 위에 텍스트나 다른 블록을 배치하는 방법, 레이아웃과 초점 지점을 조정하는 방법, 오버레이를 사용자 정의하는 방법, 모바일에서 디자인을 미리 보는 방법 등을 다룹니다.

커버 블록 추가

커버 블록을 사용해 사이트에 배너 이미지를 추가할 수 있습니다. 페이지 또는 템플릿에 배너를 추가하려면 다음 단계를 따르세요.

  1. 사이트의 대시보드로 이동하세요.
  2. 배너를 추가할 위치에 따라 페이지, 글 또는 템플릿으로 이동해 편집하거나 새로 만드세요.
    • 페이지: 메뉴의 페이지 섹션으로 이동하세요.
    • : 메뉴의  섹션으로 이동하세요.
    • 템플릿디자인 → 편집기로 이동해 템플릿을 선택하세요.
  3. + (블록 삽입기) 아이콘을 클릭하고 “커버”를 검색하세요.
    • 또는 “/를 입력하여 블록 선택”이 표시되는 곳에서 /커버를 입력하세요.
The (+) block inserter sidebar open with the Cover block icon highlighted.
  1. 커버 아이콘을 클릭해 커버 블록을 삽입하세요: 
The Cover block before media is added, with the options to upload, select media, or use the featured image.

배너 미디어 선택

추가한 커버 블록에 표시할 미디어를 선택하세요. 다음 옵션 중에서 선택할 수 있습니다.

  • 업로드: 업로드 버튼을 클릭해 컴퓨터에서 파일을 선택하세요.
  • 미디어 선택: 다음 위치 중 한 곳에서 미디어를 찾을 수 있습니다.
    • 미디어 라이브러리: 사이트의 미디어 라이브러리에 이미 업로드된 이미지와 비디오입니다.
    • 휴대폰: 젯팩 모바일 앱을 사용해 휴대폰에서 직접 미디어를 업로드하세요.
    • AI로 생성: 사용하려는 이미지 유형을 간단히 설명하면 AI가 이미지를 만들어 줍니다.
    • Google 포토: 연결된 Google 포토 계정에서 미디어를 선택하세요.
    • Pexels: Pexels 라이브러리에서 무료 이미지를 검색하세요.
    • Openverse: Openverse 라이브러리에서 무료 이미지를 검색하세요.
  • 특성 이미지 사용: 설정되어 있으면 페이지 또는 글의 특성 이미지를 표시합니다. 커버 블록템플릿에 추가하고 이 옵션을 선택하면 해당 템플릿을 사용하는 모든 페이지나 글의 특성 이미지가 자동으로 표시됩니다.
  • 색상: 이미지나 비디오 대신 배너에 단색을 선택하세요.

그런 다음 배너에 텍스트나 버튼 같은 콘텐츠를 추가하고, 배너 레이아웃을 사용자 정의하고, 배너 디자인을 조정할 수 있습니다.

이미지 선택 팁

배너 이미지를 선택할 때는 다음 사항을 고려하세요.

  • 모바일 장치에서는 이미지 전체가 항상 다 보이지 않을 수 있으므로 장식용 이미지나 추상 이미지가 가장 잘 어울립니다.
  • 이미지 안에 텍스트를 넣어 디자인하기보다는 이미지 위에 텍스트를 입력하세요. 이렇게 하면 모든 화면 크기에서 텍스트가 알맞게 조정됩니다.
  • 커버 블록은 이미지를 배경 이미지로 사용하며, 작은 장치에서는 이미지 전체 너비가 보이도록 크기가 조정되지 않습니다. 초점 지점 선택기 설정을 사용하면 작은 화면에서 이미지의 어느 부분에 초점을 맞출지 선택할 수 있습니다.
    • 모든 장치 크기에서 이미지 안의 내용이 전부 보여야 한다면 대신 이미지 블록을 사용할 수 있습니다.

비디오 배너 만들기

커버 블록은 이미지, 비디오, 단색을 지원합니다. 커버 블록에 비디오를 업로드하려면 다음 단계를 따르세요.

  1. 페이지 또는 글에 커버 블록을 추가하세요.
  2. 블록 도구 모음에서 “미디어 추가” 옵션을 클릭하세요.
"Add media" is highlighted in the Cover block toolbar.
  1. 다음 중 하나를 선택하세요.
    • 업로드: 컴퓨터에서 비디오 파일을 업로드합니다(해당 요금제 필요).
    • 미디어 라이브러리 열기: 이미 업로드한 비디오 파일을 선택합니다.
    • URL에서 비디오 삽입: YouTube, Vimeo 또는 다른 서비스의 URL을 붙여넣습니다.

커버 블록은 기능보다 장식용이어서 비디오 파일의 소리는 재생되지 않습니다. 비디오의 오디오를 포함하려면 소리와 함께 재생되는 비디오에 VideoPress 블록을 사용하세요.

배너 미디어 교체 또는 제거

커버 블록을 추가한 후에는 언제든지 미디어를 변경할 수 있습니다. 배너의 미디어를 교체하거나 제거하려면 다음 단계를 따르세요.

  1. 사이트 대시보드로 이동하세요.
  2. 배너가 있는 페이지, 글 또는 템플릿으로 이동하세요.
  3. 편집기 왼쪽 상단에서 목록 보기를 선택하세요.
  4. 목록 보기에서 커버 블록 항목을 클릭하세요.
The list view open and an arrow pointing from the "List View" icon to the Cover block.
  1. 블록 도구 모음에서 바꾸기 버튼을 클릭해 새 이미지 또는 비디오를 선택하세요.
The "Replace" option highlighted in the Cover block's toolbar.

다음 옵션 중 하나를 사용해 새 미디어 파일을 선택할 수 있습니다.

  • 미디어 라이브러리 열기: 이미 업로드한 이미지를 선택합니다.
  • 업로드: 장치에서 이미지를 선택해 사이트에 업로드합니다. 지원되는 파일 형식을 확인하세요.
  • 특성 이미지 사용: 페이지 또는 글의 특성 이미지를 사용합니다.
  • 초기화: 이미지를 제거하지만 이미지 블록은 그대로 유지되므로 업로드, 이미지 선택, AI로 생성 또는 URL에서 삽입 같은 옵션을 선택할 수 있습니다.
  • 휴대폰: 젯팩 모바일 앱을 사용해 휴대폰에서 이미지를 추가합니다.
  • AI로 생성: 원하는 내용을 설명해 AI로 이미지를 생성합니다.
  • Google 포토.
  • Pexels 무료 사진 라이브러리.
  • Openverse 무료 이미지.
  • URL에서 비디오 삽입: YouTube, Vimeo 또는 다른 서비스의 URL을 붙여넣습니다
Copied to clipboard!