최고의 오리지널 WordPress 블록 [빠른 개요]

Gutenberg WordPress 편집기 및 블록을 사용하는 방법에 대한 가이드를 제공합니다. 바로 다음 5.4 버전에서 제공되는 블록 변경 사항에 대한 뉴스를 읽어보십시오. 모든 웹 사이트에서 사용해야 하는 가장 자주 사용되는 모든 블록을 선택했습니다. 출시되면 모든 기능에 대한 자세한 내용을 게시할 예정입니다.

WordPress가 2018년에 새로운 Gutenberg 편집기를 발표했을 때 우리는 그것에 대해 흥분했습니다. 이제 몇 년 후 우리는 엄청난 개선을 볼 수 있습니다. Gutenberg WordPress 편집기는 웹사이트를 만드는 훌륭한 도구입니다.

Gutenberg 편집기를 위한 이 모든 표준 WordPress 블록은 최신 프로젝트에서 완벽하게 작동합니다. 무료 Citadela 워드프레스 테마. 어느 사이트에서나 사용 가능하니 참고해주세요 계정 만들기 무료로 다운로드하십시오.

와 함께 AitThemes Citadela 플러그인, 회사, 비즈니스, 블로그 또는 비영리 웹사이트 프레젠테이션을 위한 특정 콘텐츠를 만들 수 있습니다. 또는 새로운 온라인 비즈니스를 시작할 수도 있습니다. 웹사이트 속도와 웹사이트 편집의 용이성이 가장 중요한 요소입니다.

블록이란 무엇입니까?

구텐베르크 워드프레스 블록은 웹사이트의 구성 단위입니다. 그들 각각은 자신의 특별한 장소와 목적을 가지고 있습니다. 특정 유형의 콘텐츠에 적합한 WordPress 블록을 사용하는 것이 매우 중요합니다.

그러나 귀하의 의도에 가장 적합한 블록을 어떻게 찾을 수 있습니까?

WordPress 블록에 대한 이해를 돕기 위해 가장 인기 있는 블록에 대한 개요를 준비했습니다.

텍스트 콘텐츠 블록

웹 사이트에 텍스트 콘텐츠를 삽입하는 데 사용할 수 있는 여러 블록이 있습니다. 여러 블록을 사용할 수 있습니다. 워드프레스 5.4부터 새로운 설정이 있어 텍스트 색상을 변경할 수 있습니다.

• 절
• 표제
• 인용하다
• 목록
• 인용구
• 테이블
• 절
• 미리 포맷됨

이를 제외하고는 긴 단락에 더 편리할 수 있는 클래식 블록을 사용합니다.

버튼 블록

버튼 블록을 사용하면 WordPress에서 매력적인 CTA 버튼을 만드는 것이 매우 쉬워졌습니다. 맞춤 CSS를 입력하거나 HTML을 이해할 필요가 없습니다. 좋아하는 색상의 16진수 코드를 입력하여 버튼을 멋지고 눈길을 끄는 모양으로 만들 수는 있지만 필수는 아닙니다.

버튼 블록은 어디에 사용하나요?

웹 방문자가 귀하의 웹사이트에 도착하면 귀하는 그들이 행동을 취하도록 격려하고 싶습니다. 이것이 CTA 버튼의 목적입니다.

일반적으로 워드프레스 버튼 블록을 사용해야 하는 곳은 3곳입니다.

• 홈페이지 – 뉴스레터 가입, 특가 상품 검색 또는 무료 평가판 등록과 같이 목표를 달성하는 데 도움이 되는 작업을 완료합니다.
• 제품 페이지 – 제품 페이지가 어떻게 리드되는지에 따라 1개의 CTA 버튼(구매) 또는 더 많은 버튼(예: 제품 세부 정보, 구매, 위시리스트에 추가 등)이 있을 수 있습니다.
• 블로그 – CTA 버튼은 다른 유용한 기사나 제품/서비스 구매를 참조할 수 있습니다.

버튼 블록 설정

오른쪽에 있는 Inspector에서 버튼 설정을 쉽게 관리할 수 있습니다.

• 스타일
• 배경색
• 글꼴 색상
• 국경

CTA 버튼에 쓰는 텍스트는 짧고 간단해야 웹 방문자가 원하는 행동을 유도할 수 있습니다.

다음 WordPress 5.4 버전(2020년 3월 31일 릴리스)에 대한 뉴스 제공

버튼 블록은 새로운 버튼으로 교체될 예정입니다.에스 차단하다.
새 이름에서 짐작할 수 있듯이 하나의 블록 컨테이너에서 하나씩 옆에 더 많은 버튼을 만들 수 있습니다. 한 번에 두 개의 CTA를 만들어야 하는 경우가 종종 있습니다(예: 지금 구입 및 자세히 알아보기). 또한 몇 가지 새로운 스타일과 색상 설정이 제공됩니다. 채우기 또는 윤곽선 스타일을 선택한 다음 배경 색상을 선택합니다. 단색 또는 그라데이션 배경을 선택할 수 있습니다. 보다 쉽게 미세 조정하기 위해 일부 사전 설정을 시작점으로 사용할 수 있습니다. 좋은 소식은 기존 버튼 블록이 모두 작동하고 마이그레이션할 필요가 없다는 것입니다.

열 블록

열 블록은 새로운 레이아웃의 문을 여는 놀라운 WordPress 블록입니다. 더 많은 페이지 요소 배열 옵션을 제공하여 더 많은 디자인 대안을 제공합니다.

Columns 블록 작업은 쉽습니다.

• 추가 플러그인 설치가 없습니다.
• 코딩이 필요하지 않습니다.
• 깔끔한 디자인을 위한 약간의 센스만 있으면 됩니다.

WordPress 블록 편집기가 출시되기 전에 거쳐야 했던 이전 번거로움과 비교할 때 Columns WordPress 블록을 사용하는 것은 매우 간단합니다.

열 블록을 사용하는 방법?

위에 표시된 대로 Columns 블록을 사용할 수 있는 두 가지 방법이 있습니다.

• 텍스트의 흐름을 구성합니다(블로그 게시물 또는 일반 페이지에서).
• 다른 블록을 열로 배열합니다.

텍스트를 열로 구성할 때(예: 블로그 게시물 내에서) 가독성을 높이고 웹 사이트를 보다 투명하고 사용자 친화적으로 만듭니다.

그러나 열 블록을 사용하여 이미지, 텍스트 및 버튼과 같은 다른 블록을 중첩하면 선택한 페이지의 전체 레이아웃이 변경되고 새로운 디자인이 생성됩니다.

열 블록 설정

열 블록을 페이지에 삽입한 후 원하는 열 수를 선택합니다. 2에서 6 열 사이의 양일 수 있습니다. 그런 다음 텍스트를 입력하거나 각 열에 블록을 추가할 수 있습니다.

열 블록 내용의 정렬은 전체 블록과 개별 열에 대해 개별적으로 설정할 수 있습니다. 열 너비의 비율을 선택할 수도 있습니다. 이렇게 하면 한 열이 다른 열보다 더 넓을 수 있습니다.

커버 블록

웹사이트의 헤더에 대해 이야기해 봅시다. 누군가가 귀하의 홈페이지에 왔을 때 첫인상을 정의하는 섹션입니다. 중요하지 않습니까? Cover 블록을 모든 페이지의 헤더로 사용할 수 있다는 사실을 알고 계셨습니까?

Cover는 웹 방문자에게 깊은 인상을 심어주는 핵심 WordPress 블록입니다. 특히 웹 디자인에 깔끔하게 통합되어 올바르게 사용될 때 더 좋습니다.

커버블럭은 어디에 사용하나요?

위에서 언급했듯이 Cover 블록은 모든 페이지에서 사용할 수 있습니다. 또한 웹사이트 상단에 고정되어 있는 헤더와 달리 페이지 어디에나 추가할 수 있습니다.

커버 블록은 다음과 같이 사용할 수 있습니다.

• 홈페이지를 포함한 모든 페이지의 헤더입니다.
• 제품 페이지에 사용된 텍스트로 덮어쓴 이미지 또는 동영상.
• 블로그 게시물의 콘텐츠 구분 기호입니다.

커버 블록 설정

Cover 블록 설정은 매우 간단합니다. 먼저 배경으로 이미지나 비디오를 선택합니다. 대신 단일 색상을 사용할 수도 있습니다. 배경이 설정되면 제목과 부제를 추가합니다. 

블록의 정렬은 물론 내부의 텍스트 정렬도 선택할 수 있습니다.

커버 블록 정렬은 다음 옵션을 제공합니다.

• 왼쪽 정렬
• 센터 정렬
• 오른쪽 정렬
• 폭 넓은
• 전체 넓이

개인적으로 가장 좋아하는 것은 인스펙터에서 사용할 수 있는 색상 오버레이입니다. Cover 블록 배경 이미지는 원하는 색상으로 톤을 조정할 수 있습니다. 사용자 지정 글꼴 크기 및 색상과 함께 아름다운 대비를 만들 수 있으며 표지 블록의 최종 모습은 놀라울 것입니다.

워드프레스 5.4부터는 단색 배경 대신 그라데이션 배경을 선택할 수 있습니다.

갤러리 블록

갤러리 블록을 사용하여 웹 사이트에 이미지를 표시하십시오. 이 표준 WordPress 블록은 이미지를 보관하고 웹 사이트의 모든 페이지에 멋지게 표시하도록 설계되었습니다. 다른 워드프레스 블록과 마찬가지로 갤러리 블록은 웹 사이트 또는 블로그 게시물 내 어디에나 배치할 수 있습니다.

이미지 업로드는 미디어 라이브러리, 컴퓨터 또는 끌어서 놓기 기능을 사용하여 파일을 선택하여 수행할 수 있습니다.

갤러리 블록은 어디에 사용하나요?

웹 사이트 유형에 따라 복잡한 사진 갤러리 또는 간단한 이미지 프레젠테이션을 만들 수 있습니다. 다음에서 갤러리 블록을 사용할 수 있습니다.

• 귀하의 홈페이지
• 사진 갤러리의 앨범으로 생성된 개별 하위 페이지
• 제품 페이지
• 블로그 게시물

갤러리 블록 설정

갤러리 블록 자체의 다양한 정렬 옵션 외에도 이 블록에는 다음과 같은 몇 가지 흥미로운 옵션이 있습니다.

• 이미지가 정렬되는 열 수입니다.
• (가장 작은 이미지의) 동일한 크기에 맞게 이미지 자르기.
• 다른 페이지나 미디어 파일에 링크할 수 있는 옵션을 제공하는 하이퍼링크.

이미지 블록

이미지 블록은 웹사이트에 이미지를 표시하기 위한 블록일 뿐입니다.

좋아요. 페이지에 이미지를 추가하려는 경우 Image WordPress 블록을 사용해야 합니다. 제시된 다른 블록과 유사할 수 있지만 단일 이미지에 완벽하게 만드는 중요한 차이점이 있습니다.

이미지 블록은 언제 사용합니까?

이미지 블록은 특히 이미지에 표시되는 개체가 다음을 수행하려는 웹 방문자에게 특히 중요한 경우에 사용해야 합니다.

• 특정 이미지로 웹 방문자의 시선을 사로잡으세요.
• 캡션이 있는 이미지를 표시합니다.
• 방문자가 논의된 문제를 더 잘 이해하는 데 도움이 되는 인포그래픽을 표시합니다.

이미지 블록 설정

Image WordPress 블록의 가장 큰 장점 중 하나는 이미지 크기 옵션입니다. 모서리를 잡아당겨 이미지 크기를 쉽게 조정하거나 고정 크기(픽셀)를 선택하거나 크기를 백분율로 정의할 수 있습니다.

또 다른 중요한 옵션은 대체 텍스트, 캡션 및 링크에 대한 입력 필드입니다. 페이지 SEO에서 중요한 역할을 하는 이러한 필드를 사용하는 것이 좋습니다.

미디어 및 텍스트 블록

미디어 및 텍스트 블록을 사용하여 만들 수 있는 고급 페이지 레이아웃으로 이동해 보겠습니다. 이 핵심 WordPress 블록을 사용하면 미학적이며 상황에 맞는 방식으로 미디어와 텍스트를 나란히 결합할 수 있습니다.

미디어 및 텍스트 블록은 어디에 사용하나요?

미디어 및 텍스트 블록은 블로그 게시물 내에서 사용하기에 가장 적합하지만 약간의 상상력만 있으면 다른 곳에서도 사용할 수 있습니다. 예를 들어 이미지와 텍스트를 나란히 사용하여 멋진 제품 또는 서비스 개요를 만들 수 있습니다.

제품/서비스 개요로 사용되는 경우 미디어 및 텍스트 블록의 텍스트 섹션에 버튼 블록을 추가하는 것을 잊지 마십시오. 이렇게 하면 모든 페이지에서 멋진 CTA 섹션을 디자인할 수 있습니다.

미디어 및 텍스트 블록의 장점

• 서로 맥락에 맞는 이미지와 텍스트를 함께 가져옵니다.
• 블로그 게시물 내에서 이미지의 잘못된 배치를 방지합니다.
• 사이트의 응답성을 돕습니다. ("Stack on mobile" 기능 사용)

미디어 및 텍스트 블록 설정

미디어 및 텍스트 블록의 설정을 보면 꽤 많은 정렬 옵션을 볼 수 있으며 그 중 일부는 대부분의 다른 블록과 비교하여 고유합니다.

이 블록의 흥미롭고 유용한 설정은 배경색입니다. 함께 어울리는 이미지와 텍스트 주변 영역을 색칠하여 시각적으로 연결을 강조할 수 있습니다.

WordPress 버전 5.4(31.3.2020)에서 링크 삽입. 링크, 미디어 파일 또는 첨부 페이지 중에서 선택할 수 있습니다.

테이블 블록

테이블 블록은 버전 5.0 이상에서 WordPress 블록 편집기가 도입된 후 WordPress가 어떻게 개선되었는지 보여주는 예 중 하나입니다. WordPress 웹사이트에 테이블을 삽입하기 위해 플러그인이 필요하기 전에는 이제 간단하게 테이블 블록을 사용할 수 있습니다.

테이블 블록은 어디에 사용합니까?

테이블은 유용한 콘텐츠를 잘 정리되고 투명하게 제공하는 데 큰 역할을 합니다. 확실히 대부분의 웹사이트는 테이블을 사용했습니다. 다음은 여러 웹사이트에서 테이블을 사용하는 몇 가지 예입니다.

• 데이터 비교
• 가격표
• 제품 기술 세부정보
• 조리법
• 멤버십 패키지 개요

무료 WordPress 코어의 일부로 테이블 블록을 갖는 것은 정말 놀라운 일입니다.

테이블 블록 설정

테이블 블록을 페이지에 삽입할 때 테이블의 여러 열과 행을 정의해야 합니다. 걱정하지 마세요. 이 숫자는 고정되어 있지 않습니다. 언제든지 더 많은 행과 열을 추가(또는 제거)할 수 있습니다.

그런 다음 기본 또는 줄무늬 중에서 테이블 스타일을 선택합니다. 정렬 및 글꼴 스타일로 이동하고 마지막으로 마무리 작업을 추가하기 전에 표를 채웁니다.

추가 옵션은 다음과 같습니다.

• 배경색
• 고정 폭 셀
• 머리글
• 보행인
• 링크(표의 텍스트 항목은 다른 페이지로 연결될 수 있음)

다음에는 어떤 블록을 보고 싶습니까?

모든 사람이 무료로 사용할 수 있는 매우 유용한 WordPress 코어 블록 선택에 대해 읽는 것이 즐거웠기를 바랍니다. 다음에 읽고 싶은 블록이나 WordPress 코어에서 여전히 누락된 기능을 알려주세요. 읽어 주셔서 감사합니다!