WordPress 사전 형식화된 블록을 사용하는 방법

미리 서식이 지정된 블록은 텍스트를 입력하는 그대로 표시합니다. 즉, 텍스트 내에 공백과 줄 바꿈을 포함할 수 있습니다. 미리 서식이 지정된 블록을 사용하는 방법을 알면 텍스트의 일부를 분리하고 눈에 띄는 요소를 만드는 것과 같은 몇 가지 이점을 얻을 수 있습니다. 다행히도 이 블록에는 몇 가지 스타일 지정 옵션이 포함되어 있으며 사용하기 쉽습니다.

이 기사에서는 WordPress Preformatted Block을 살펴보겠습니다. 게시물과 페이지에 추가하는 방법과 옵션 및 설정을 살펴보겠습니다. 우리는 또한 그것을 사용하는 몇 가지 모범 사례와 가장 자주 묻는 질문을 볼 것입니다.

게시물 또는 페이지에 미리 형식이 지정된 블록을 추가하는 방법

블록 삽입 도구를 클릭하여 미리 형식이 지정된 블록을 콘텐츠에 추가합니다. 이것은 왼쪽 상단 모서리와 콘텐츠 영역에서 찾을 수 있습니다. 사전 형식을 검색하고 Enter 를 클릭합니다.

/preformatted 를 입력 하고 표시하려는 콘텐츠 영역에서 Enter 키 를 눌러 블록을 추가할 수도 있습니다. 입력할 때 WordPress는 입력한 문자를 기반으로 제안을 제공하므로 블록이 보이면 클릭하기만 하면 됩니다.

이제 미리 형식이 지정된 블록이 게시물 또는 페이지에 추가됩니다. 미리 포맷된 블록은 단락 블록, 절 블록 및 코드 블록과 유사합니다. 그것은 그들 사이의 일종의 교차점이지만 또한 그것들을 단순화합니다. 입력한 텍스트가 표시되지만 서식을 변경하는 대신 그대로 유지됩니다. 여기에는 모든 공백과 줄 바꿈이 포함됩니다. 고정 폭 글꼴로 표시됩니다.

미리 포맷된 블록 설정 및 옵션

대부분의 WordPress 블록과 마찬가지로 이 블록에는 사이드바에 설정 도구 모음과 옵션이 포함되어 있습니다. 두 가지를 자세히 살펴보겠습니다.

미리 포맷된 블록 도구 모음 설정

도구 모음은 블록 위에 있으며 대부분의 표준 도구가 있습니다.

블록 유형 또는 스타일 변경

이 블록은 단락, 그룹, 열 및 코드를 포함한 여러 다른 블록으로 변환될 수 있습니다. 옵션을 강조 표시하면 콘텐츠와 함께 표시되는 미리보기가 표시됩니다.

드래그 앤 이동

드래그 도구는 6개의 점으로 표시됩니다. 이 영역을 잡으면 콘텐츠 내에서 블록을 끌어다 놓을 수 있습니다. 위쪽 및 아래쪽 이동 화살표는 화살표를 클릭할 때마다 콘텐츠에서 블록을 한 블록씩 위 또는 아래로 이동합니다.

굵게, 기울임꼴 및 링크

굵게, 기울임꼴 및 링크 설정은 단추를 클릭할 때 강조 표시되는 텍스트를 제어합니다. 독립적으로 또는 함께 사용할 수 있습니다. 링크 팝업 하단에서 활성화하여 새 탭에서 링크를 열 수 있습니다.

링크가 있는 텍스트는 클릭할 수 있음을 나타내기 위해 밑줄이 그어집니다. 편집기에서 텍스트를 클릭하면 링크를 변경할 수 있는 링크 편집기가 열립니다.

추가 옵션

자세히 버튼에는 옵션을 클릭할 때 강조 표시한 텍스트에 적용되는 여러 서식 옵션이 있습니다. 옵션에는 다음이 포함됩니다.

인라인 코드 – 텍스트를 코드처럼 보이게 하고 블록의 코드가 실행되는 것을 방지합니다. Preformatted 라는 단어는 위 이미지의 인라인 코드입니다.

인라인 이미지 – 미디어 라이브러리의 이미지를 마우스 커서 위치에 배치할 수 있습니다.

키보드 입력 – 키보드 HTML 형식으로 텍스트의 스타일을 지정합니다. 단어 텍스트 는 위 이미지의 키보드 입력 스타일로 스타일이 지정됩니다.

취소선 - 텍스트를 통해 선을 배치합니다. 위 이미지의 고정 공간 이라는 단어에는 취소선이 있습니다.

아래 첨자 - 텍스트를 나머지보다 낮고 작게 설정합니다. 위 이미지의 your 라는 단어는 아래 첨자입니다.

위 첨자 - 이것은 나머지보다 높고 작게 설정합니다. 위 이미지의 단어 줄 은 위 첨자입니다.

텍스트 색상 – 위 이미지에서 Divisions 라는 단어로 작업한 것처럼 텍스트 색상을 변경할 수 있습니다.

옵션

미리 포맷된 블록 옵션에는 다음이 포함됩니다.

추가 설정 숨기기 - 오른쪽 사이드바를 숨기거나 표시합니다.

복사 – 미리 포맷된 블록을 복사하여 콘텐츠 내의 다른 곳에 붙여넣을 수 있습니다.

복제 – 원본 아래에 미리 포맷된 블록의 복제본을 배치합니다.

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

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

이동 - 화살표로 위 또는 아래로 이동할 수 있는 파란색 선을 배치하고 블록을 선택한 위치로 이동합니다.

HTML로 편집 – 콘텐츠를 HTML로 편집할 수 있도록 코드 편집기를 엽니다.

재사용 가능한 블록에 추가 – 사전 포맷된 블록을 재사용 가능한 블록에 추가합니다.

그룹 – 단일 블록으로 조정할 수 있도록 블록을 그룹에 추가합니다.

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

미리 포맷된 블록 설정

미리 포맷된 블록 설정은 오른쪽 사이드바에 있습니다. 표시되지 않는 경우 오른쪽 상단 모서리에 있는 톱니바퀴를 클릭합니다. 블록 내의 아무 곳이나 클릭하면 사이드바 옵션이 표시됩니다.

타이포그래피

타이포그래피를 사용하면 전체 블록의 글꼴 크기를 선택할 수 있습니다. 드롭다운 상자에서 크기를 선택하거나 사용자 정의 크기를 입력합니다. 재설정 을 클릭하여 기본 설정으로 되돌립니다.

색상

색상 옵션을 사용하면 텍스트 및 배경 색상의 스타일을 지정할 수 있습니다. 배경은 단색 또는 그라디언트일 수 있습니다. 미리 선택된 여러 색상 중에서 선택하거나 사용자 정의 색상을 선택할 수 있습니다. 색상 조합을 읽기 어려울 수 있는 경우 오른쪽 하단에 메시지가 표시됩니다. 이 예에서는 배경을 주황색으로, 텍스트를 흰색으로 설정했습니다. 읽기가 어려울 수 있음을 보여줍니다.

그라데이션 배경은 선형 또는 방사형으로 설정할 수 있습니다. 색상 선택기로 두 가지 색상을 선택하거나 색상을 RGB 또는 HSL 코드로 입력합니다. 색상에는 불투명도가 포함될 수 있습니다. 선형의 경우 위의 예에서 했던 것처럼 각도를 설정할 수 있습니다. 내가 한 것처럼 서로 가깝게 설정하여 그들 사이에 날카로운 선을 만들거나 더 멀리 떨어져 혼합 방법을 제어하십시오.

고급의

고급 설정에는 HTML 앵커에 대한 옵션이 포함되어 있으므로 미리 서식이 지정된 블록에 직접 연결할 수 있습니다. 또한 사용자 정의 CSS를 사용하여 블록 스타일을 지정할 수 있도록 CSS 클래스를 추가하는 필드가 포함되어 있습니다.

미리 형식이 지정된 블록을 효과적으로 사용하기 위한 팁 및 모범 사례

콘텐츠 내에 공백이나 줄 구분을 추가할 때마다 이 블록을 사용하십시오. 단락 블록은 해당 서식을 유지하지 않습니다.

텍스트와 배경에 색상을 사용하여 나머지 콘텐츠와 구분하십시오. 이것은 또한 고정 폭 유형을 사용하기 때문에 중요할 수 있는 코드 블록과 동일하게 보이지 않도록 합니다.

텍스트에 강조를 추가하는 데 사용합니다. 공백과 줄 구분을 유지할 수 있으므로 텍스트의 일부를 나머지 부분과 구분하는 데 사용할 수 있습니다.

글꼴 및 배경 옵션과 함께 간격 및 구분을 사용하여 콘텐츠를 구분하는 고유한 제목을 만듭니다.

미리 포맷된 블록에 대해 자주 묻는 질문

미리 포맷된 블록의 목적은 무엇입니까?

글꼴 크기, 색상 및 배경을 변경하고 링크를 추가할 수 있는 동안 줄 바꿈 및 공백이 있는 텍스트를 표시합니다.

Verse Block과 어떻게 다릅니까?

Verse Block은 조금 더 복잡합니다. 여기에는 정렬 옵션이 포함되며 텍스트를 고정 폭으로 표시하지 않습니다. 그것은 또한 간격을 위한 몇 가지 기능을 포함하고 링크에 대한 색상 옵션을 추가합니다.

코드 블록과 어떻게 다릅니까?

여기에는 배경에 대한 스타일 옵션이 포함됩니다. 코드 블록에는 추가 옵션에 글꼴 색상 옵션이 있고 사이드바에 글꼴 색상 옵션이 있지만 사이드바 옵션에는 글꼴과 색상이 포함되지 않습니다.

단락 블록과 어떻게 다릅니까?

단락 블록은 줄 바꿈을 유지하지 않습니다. 미리 형식이 지정된 블록에서 Enter 를 클릭하여 텍스트에 새 줄을 추가할 수 있습니다. 단락 블록의 경우 새 블록을 추가하는 필드로 이동합니다. 단락 블록에는 더 많은 텍스트 설정도 포함됩니다.

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

간격 및 줄 구분은 콘텐츠의 나머지 부분에서 눈에 띄는 텍스트를 표시합니다. 글꼴과 배경색은 서비스, 인용문(Quote Block 및 Pullquote Block이 더 나은 선택이 될 수 있지만), 평가, 클릭 유도문안 등을 위한 카드를 만들 수 있습니다.

결론

이것이 WordPress Preformatted Block에 대한 우리의 모습입니다. 이 블록은 간격과 줄 구분을 유지하여 몇 가지 흥미로운 디자인 기능을 제공합니다. 코드 블록과 달리 배경색 도구에 계속 액세스할 수 있습니다. 이 블록은 텍스트를 눈에 띄게 만드는 데 좋은 선택이며 서비스를 보여주고 관심을 끌기 위한 디자인 요소를 만드는 데 사용할 수도 있습니다.

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

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