WordPress 커버 블록을 사용하는 방법

WordPress Cover Block은 흥미롭습니다. 배경에 이미지, 비디오 또는 단색을 배치하고 전경에 콘텐츠 블록을 추가할 수 있습니다. 이것은 다른 블록 위에 블록을 놓을 수 있음을 의미합니다. 대부분의 블록보다 더 많은 옵션이 있습니다. Cover Block 사용법을 알면 웹사이트 디자인을 크게 향상시킬 수 있습니다.

이 기사에서는 Cover Block의 기능과 설정 및 옵션을 살펴보겠습니다. 또한 사용 방법에 대한 몇 가지 모범 사례와 자주 묻는 질문을 살펴보겠습니다.

게시물 또는 페이지에 표지 블록을 추가하는 방법

페이지 및 게시물에 표지 블록을 추가하려면 콘텐츠 내 또는 페이지 왼쪽 상단 모서리에서 블록 아이콘을 선택하고 블록 이름을 입력하고 선택합니다.

/cover 를 입력하고 Enter 키를 누르거나 블록을 선택할 수도 있습니다.

그런 다음 이미지 또는 비디오와 같은 미디어를 추가하거나 배경에 색상을 사용하고 전경에 텍스트를 배치할 수 있는 콘텐츠에 Cover Block이 있습니다. 미디어 폴더 또는 색상에서 콘텐츠를 선택하면 텍스트 옵션이 전경에 나타납니다.

내 미디어 라이브러리에서 이미지를 추가하고 이미지 위에 캡션을 추가했습니다. 캡션은 단락 블록입니다. 다른 유형의 블록으로 변경하고 비디오를 삽입하는 등의 작업을 수행할 수 있습니다.

Enter 키를 눌러 여러 블록을 추가할 수도 있습니다. 평소와 같이 블록에서 선택하십시오.

배경에 대해 미리 선택된 색상 중 하나를 선택할 수도 있습니다.

색상은 이미지 위에 오버레이로 사용할 수 있습니다.

Cover Block 설정 및 옵션

Cover Block에는 설정과 옵션이 있는 두 가지 영역이 있습니다. 첫 번째는 표지 도구 모음입니다. 두 번째는 오른쪽 사이드바에 있는 Cover Block 옵션입니다.

커버 블록 도구 모음

Cover Block의 아무 곳이나 클릭하면 도구 모음이 열립니다.

덮개 블록 유형 또는 스타일 변경

첫 번째 설정은 열 수를 변경하고, 그룹화할 수 있고, 이미지로 변경하고, 기본 또는 테두리에서 스타일을 선택합니다. 마우스를 가져가면 미리보기가 나타납니다. 이미지 위로 마우스를 가져갑니다. 이미지는 오버레이에 있는 콘텐츠 블록을 삭제합니다.

드래그 또는 이동

드래그 도구(점 6개)를 잡고 블록을 원하는 곳으로 드래그합니다. 이동 도구를 사용하면 화살표를 클릭하여 콘텐츠 내에서 블록이나 텍스트를 위로 이동할 수 있습니다.

조정

정렬 옵션에는 왼쪽, 가운데, 오른쪽, 넓은 너비 및 전체 너비가 있습니다. 왼쪽과 오른쪽은 그 아래 단락으로 블록을 감쌉니다.

다음은 전체 너비의 이미지입니다. 제목을 만들고 섹션을 나누는 등의 작업에 사용할 수 있습니다.

콘텐츠 위치 변경

컨텐츠 위치를 선택합니다. 점으로 3×3 격자를 엽니다. 점을 선택하면 콘텐츠가 이미지 내의 해당 위치로 이동합니다.

전체 높이 전환

이렇게 하면 크기가 조정되지 않고 이미지가 전체 높이로 설정됩니다.

이중톤 필터 적용

미리 선택한 옵션에서 이중톤을 선택합니다. 하나는 그림자에 적용되고 다른 하나는 하이라이트에 적용됩니다.

슬라이더에서 색상을 선택하여 조정합니다.

슬라이더 아래에서 색상을 선택하여 미리 선택된 색상을 선택합니다.

바꾸다

그러면 미디어 옵션이 열리고 라이브러리에서 다른 이미지를 업로드하거나 선택할 수 있습니다.

옵션

커버 블록 옵션에는 다음이 포함됩니다.

추가 설정 숨기기 - 오른쪽 사이드바를 숨깁니다 .

복사 – 표지 블록을 복사 하여 페이지나 게시물의 아무 곳에나 붙여넣을 수 있습니다.

복제 – Cover Block의 복제본을 만들어 원본 아래에 배치합니다.

앞에 삽입 – 다른 블록을 위해 Cover Block 위에 공간을 추가합니다.

뒤에 삽입 – 다른 블록을 위해 Cover Block 아래에 공간을 추가합니다.

이동 - 화살표 키를 사용하여 파란색 선을 위나 아래로 이동하여 블록을 이동할 수 있습니다. Enter 키를 누르면 블록이 파란색 선 위치로 이동합니다.

재사용 가능한 블록에 추가 – 모든 페이지 또는 게시물에서 사용할 수 있도록 재사용 가능한 블록에 블록을 추가합니다.

그룹 – 블록을 그룹에 추가하여 단일 단위로 조정할 수 있습니다.

블록 제거 – 블록을 삭제합니다.

표지 블록 콘텐츠

컨텐츠를 선택하면 컨텐츠만을 위한 또 다른 도구 세트가 열립니다. 기본값은 단락 블록이며 도구 모음과 사이드바 설정에 대한 모든 표준 옵션을 포함합니다. 변환하거나 블록을 추가할 수 있습니다. 이것은 컨텐츠에 대한 많은 옵션을 제공합니다.

표지 선택

그러면 컨텐츠 도구 모음이 닫히고 Cover Block 도구 모음이 열립니다.

커버 블록 크기 조정

이미지 하단의 원을 드래그하여 이미지 크기를 조정합니다.

커버 블록 설정

Cover Block 설정은 오른쪽 사이드바에 있습니다. 블록 또는 톱니바퀴를 클릭하여 사이드바를 표시합니다. 블록 콘텐츠 내에서 블록을 선택하면 사이드바 설정이 표시됩니다.

스타일

테두리가 있거나 없는 블록을 표시합니다. 테두리를 표시하도록 기본값을 설정할 수도 있습니다. 미리보기가 포함되어 있어 선택하기 전에 어떻게 보일지 확인할 수 있습니다.

간격

모든 면 또는 특정 면에 공간을 추가합니다. 각 면을 개별적으로 선택하거나 함께 연결하여 한 번에 모두 조정합니다.

미디어 설정

블록 내에 표시되는 이미지 부분을 선택합니다. 고정된 배경(시차)을 선택하여 영역에 비해 배경이 너무 작은 경우 배경을 반복하고, 원을 이동하거나 왼쪽 및 상단 위치를 지정하여 초점을 지정할 수 있습니다. 여기에서 미디어를 지울 수도 있습니다. 비디오에는 초점 선택 도구만 사용할 수 있습니다.

이 예는 고정된 배경을 보여줍니다. 텍스트가 스크롤되는 동안 이미지가 제자리에 유지되어 시차 효과를 만듭니다.

이것은 반복된 배경입니다. 작은 이미지로 재미있는 패턴을 만들 때 좋습니다.

치수

필드에 높이를 입력하여 픽셀 단위로 높이를 지정합니다. 이것은 이미지 하단의 드래그 도구와 동일하게 작동합니다.

위에 까는 것

Cover Block에는 오버레이에 대한 많은 옵션이 있습니다. 미리 만들어진 색상을 선택하고 불투명도를 선택합니다. 단색 또는 그라디언트 중에서 선택합니다. 변경 사항을 실시간으로 확인할 수 있습니다. 이미지 대신 색상을 표시하도록 선택한 경우 여기에서 색상을 변경할 수 있습니다. 이 예는 단색을 보여줍니다.

사용자 정의 색상을 선택할 수도 있습니다. 그러면 창 내에서 색상을 사용하거나 슬라이더로 색상 스케일을 선택하거나 16진수, RGB 또는 HSL 코드를 입력할 수 있는 색상 선택기가 열립니다.

그래디언트 옵션을 사용하면 표시할 두 가지 색상을 선택할 수 있습니다. 선형 또는 방사형 중에서 선택합니다. 색상의 불투명도를 설정할 수도 있습니다. 이 예에서는 방사형을 선택했습니다.

고급의

고급에는 두 개의 필드가 포함됩니다. 첫 번째는 HTML 앵커에 대한 옵션입니다. Cover Block만을 위한 특별한 웹 주소를 제공합니다. 두 번째는 추가 CSS 클래스를 추가하는 필드입니다. 이를 통해 사용자 정의 CSS를 생성하여 블록 스타일을 지정할 수 있습니다. 선택한 스타일도 이 필드에 나타납니다.

Cover Block을 효과적으로 사용하기 위한 팁 및 모범 사례

이미지의 경우 사이드바의 미디어 설정을 사용하여 표시하려는 이미지 부분을 표시합니다.

전체 너비 옵션이 있는 큰 이미지를 사용하여 섹션 제목을 만듭니다.

전경의 여러 열로 변경하고 이미지, 텍스트 및 버튼을 추가하여 클릭 유도문안을 만듭니다.

배경 이미지나 색상 위에 읽기 쉬운 오버레이 및 텍스트 색상을 사용합니다.

테두리 색상을 제어하려면 블록을 그룹으로 변환하십시오.

정렬 옵션을 사용하여 Cover Block을 콘텐츠에 설정하거나 따로 설정하십시오.

흥미로운 시각 자료를 만들고 독자의 관심을 끌 수 있도록 콘텐츠 위치 설정을 지정합니다.

고정 배경을 사용하여 시차 효과를 만듭니다.

반복되는 배경이 있는 작은 이미지를 사용하여 흥미로운 배경 패턴을 만듭니다.

커버 블록에 대해 자주 묻는 질문

커버 블록이란?

배경에 미디어나 색상을 추가하고 전경에 다른 블록을 추가할 수 있는 블록입니다.

다른 블록과 다른 점은 무엇입니까?

다른 블록을 포함할 수 있습니다. 전경에 다른 블록을 추가할 수 있습니다. 시차, 패턴 등을 생성합니다.

다른 블록으로 변환할 수 있습니까?

예. 이미지 블록으로 변환할 수 있습니다. 콘텐츠 영역에 추가한 다른 모든 블록을 삭제합니다.

무엇을 위해 사용할 수 있습니까?

Cover Block을 사용하여 클릭 유도문안이 있는 배경을 만들고, 섹션 위에 제목을 만들거나, 포스터, 영웅 섹션 또는 배경에 이미지나 비디오를 포함하려는 모든 것을 만드는 데 사용할 수 있습니다.

결론

그것이 Cover Block의 모습입니다. 이 블록에는 가장 흥미로운 기능이 있으며 제목, 제목, CTA, 시차 배경 등을 만드는 데 적합합니다. 사용하기 쉽고 웹 사이트를 대부분의 블록보다 돋보이게 만들 수 있습니다. 흥미로운 비주얼을 만드는 기능은 내가 가장 좋아하는 WordPress 블록 중 하나입니다.

우리는 당신의 의견을 듣고 싶습니다. 커버 블록을 사용합니까? 의견에 귀하의 경험에 대해 알려주십시오.

fourSage/Shutterstock.com을 통한 주요 이미지