Gutenberg Blocks: 2022년을 위한 필수 고려 사항이 포함된 궁극적인 사용자 가이드

2018년 12월 6일 새 릴리스와 함께 WordPress 5.0 Kirk는 Gutenberg라는 기본 블록 편집기를 도입했습니다. 이 새로운 콘텐츠 편집기를 사용하면 완전히 다른 접근 방식으로 콘텐츠를 만들 수 있습니다. WordPress TinyMCE 편집기를 대체하고 블록 형태의 콘텐츠 생성을 위한 보다 시각적인 방법을 제공합니다.

Gutenberg Editor는 사전 구축된 요소 또는 블록의 풍부한 라이브러리를 제공합니다. 그리고 WordPress 사이트에서 작업하는 동안 사용할 수 있습니다. 콘텐츠의 각 부분은 드래그 가능한 블록입니다. 그리고 이러한 블록은 콘텐츠 레이아웃을 만드는 데 사용되는 편집기 블록입니다.

사이트를 아직 WordPress 5.0으로 업데이트했는지 여부에 관계없이 향후 발전을 위해 Gutenberg Block을 사용하는 방법을 배워야 합니다. 여기에서 인기 있는 30자 블록과 함께 모든 Gutenberg 블록 WordPress의 포괄적인 아이디어와 목록을 얻을 수 있습니다.

WordPress Gutenberg Blocks: 미래를 위한 최고의 동반자

Gutenberg 블록은 확실히 콘텐츠 생성 프로세스를 보다 최적화되고 스마트하게 만듭니다. 이 편집기에 익숙해지면 사이트 개발 시간이 현저하게 최소화됩니다.

간단히 말해서 Gutenberg는 WordPress 플랫폼을 위한 새로운 블록 스타일 편집기입니다. 게시물, 페이지, 제품 및 사이트의 거의 모든 것을 만드는 방식이 점차 바뀌었습니다.

실제로 Gutenberg를 사용하면 모든 유형의 구성 요소를 보다 체계적으로 처리할 수 있습니다. 텍스트, 이미지, 비디오, 테이블 등. Gutenberg Editor를 처음 사용하는 경우 이 초보자 안내서에서 유용한 팁과 요령을 살펴보십시오.

참고: 블록의 프런트엔드 보기는 사이트에서 사용 중인 테마에 따라 크게 달라집니다.

WordPress의 기본 구텐베르크 블록

미래에 대비하려면 기본 구텐베르크 블록 이름과 사용법을 알아야 합니다. WordPress 사용자는 조만간 이러한 블록을 접해야 할 것입니다.

따라서 기본적으로 구텐베르크 블록은 다음 범주로 구성됩니다.

• 가장 많이 사용
• 공통 블록
• 서식
• 형세
• 위젯
• 임베드
• 재사용 가능

"+" 더하기 아이콘을 클릭하면 사이트에 새 블록을 추가할 수 있습니다. 목록 맨 위에 가장 많이 사용된 블록이 있습니다. 사이트에서 더 자주 사용하는 블록이 여기에 표시됩니다.

그 아래에는 블록이 범주별로 그룹화되어 있습니다. 블록을 공개하려면 제목을 클릭하십시오.

또한 오른쪽 편집 패널에서 특정 블록의 글꼴 크기, 단락 시작표시문자, 텍스트 및 배경색을 변경할 수 있습니다.

그들이 실제로 어떻게 작동하는지 봅시다!

공통 블록 - 모든 게시물에서 정기적으로 사용

다음은 텍스트 및 이미지를 포함하여 누구나 자신의 게시물에 필요한 가장 일반적인 블록입니다. 페이지를 사용자 지정하거나 사이트에 게시하려면 이러한 기본 요소가 필요합니다.

1. 단락: 콘텐츠의 단일 단락을 추가하기 위한 간단한 텍스트 전용 블록입니다.
2. 이미지 : 게시물의 아무 곳에나 단일 이미지 삽입
3. 제목 : 제목 태그 추가
4. 갤러리 : 갤러리 스타일의 이미지 그룹 표시
5. 목록 : 글머리 기호 또는 번호 매기기 목록 추가
6. 인용문 : 2가지 다른 스타일의 인용문 포함
7. 오디오 : 사이트에 오디오 파일 업로드
8. 표지 : 텍스트 오버레이가 포함된 비디오 또는 오디오 파일 삽입
9. 파일 : 다운로드 가능한 파일에 대한 링크 추가
10. 비디오 : 비디오 파일을 업로드하고 귀하의 사이트에서 직접 재생

서식 - 추가 사용자 정의 옵션

이러한 블록은 코드, 구절 및 특수 서식이 필요한 기타 텍스트 유형과 같은 콘텐츠에 대한 일부 추가 서식 옵션을 추가하는 데 사용됩니다.

1. 코드: 모든 유형의 기술 코드를 쉽게 작성
2. 클래식: 클래식 WordPress 편집기의 편집 도구를 제공합니다.
3. 사용자 정의 HTML: 사용자 정의 HTML 코드를 삽입하고 WordPress 편집기에서 바로 미리보기
4. 미리 형식 지정: 간격 및 탭을 준수하는 텍스트 추가
5. 인용구: 텍스트 인용문에 시각적으로 특별한 강조 표시를 추가합니다.
6. 테이블: 테이블 형식 데이터를 표시하기 위해 테이블 ​​사용
7. 구절: 모든 공백과 줄 바꿈을 포함한 시 및 기타 문학적 표현 쓰기

레이아웃 요소 - 디자인 스타일 향상

이 블록은 사이트 콘텐츠를 매력적인 방식으로 표현하는 데 도움이 됩니다. 사이트를 방문자에게 더 매력적으로 만듭니다.

1. 버튼: 버튼을 생성하고 배경과 텍스트 색상이 다른 링크를 삽입합니다.
2. 열: 다중 열 레이아웃을 만들고 각 열에 다른 블록 유형을 포함할 수 있습니다.
3. 미디어 및 텍스트: 한 블록에 텍스트와 미디어 파일을 나란히 삽입합니다. 다른 열
4. 자세히: "자세히 알아보기" 블록을 포함하여 콘텐츠를 두 부분으로 나눕니다.
5. 페이지 나누기: 사이트 콘텐츠를 여러 페이지로 분할
6. 구분 기호: 게시물에 짧은 가로줄 추가
7. 스페이서: 게시물의 두 블록 사이에 큰 직사각형 공백을 포함합니다.
8. 텍스트 열: 텍스트를 추가하고 신문처럼 2~4열에 표시합니다.

위젯 - 모든 페이지 또는 게시물에 일부 위젯 추가

이 블록을 사용하면 콘텐츠 내부에 WordPress 위젯을 추가할 수 있습니다. 사이드바와 바닥글에서 더 많이 사용됩니다.

1. 단축 코드 : WordPress 단축 코드를 통해 양식과 같은 사용자 정의 콘텐츠 삽입
2. 아카이브: 게시물의 월별 아카이브를 표시합니다.
3. 캘린더: 게시물의 월별 캘린더 표시
4. 카테고리: 모든 게시물 카테고리 목록
5. 최신 댓글: 마지막 5개의 댓글에 대한 간략한 설명(전체 댓글이 아님)
6. 최신 게시물: 최근 게시물 목록
7. RSS: 페이지 또는 게시물에 RSS 피드 추가
8. 검색: 모든 페이지 또는 게시물에 WordPress 검색 추가
9. 태그 클라우드: 게시물 태그의 클라우드 목록

Embeds - 다른 소스의 콘텐츠 삽입

포함 블록을 사용하면 외부 소스의 이미지, 비디오, 트윗, 오디오, Facebook 게시물 및 기타 콘텐츠를 포함할 수 있습니다.

• 유튜브
• 트위터
• 페이스북
• 인스 타 그램
• 비메오
• 사운드클라우드
• 스포티 파이
• 플리커
• 아니모토
• 클라우드업
• 대학 유머
• 데일리모션
• 웃기거나 죽는다
• 훌루
• 임구르
• 이수
• 킥스타터
• Meetup.com
• 믹스클라우드
• 포토 버킷
• 폴대디
• 레딧
• 리버브네이션
• 스크린캐스트
• 스크리브드
• 슬라이드쉐어
• 스머그
• 스피커
• 테드
• 텀블러
• 비디오프레스
• 워드프레스
• 워드프레스.tv

재사용 가능한 블록:

블록인 "재사용 가능한 블록에 추가"를 누르면 추가 사용을 위해 재사용할 수 있습니다. 아마도 공유 메뉴 섹션에서 찾을 수 있습니다.

차단 목록과 기능을 모두 확장하는 타사 플러그인

다른 필수 플러그인을 설치하여 고급 및 강력한 속성으로 차단 목록을 확장할 수 있습니다. 기능이 풍부한 플러그인을 선택하면 편집기에 새 블록을 쉽게 추가할 수 있습니다. 그리고 기본 블록 요소로는 불가능한 많은 고기능 활동을 수행할 수 있습니다.

예를 들어, 일부 갤러리 플러그인을 사용하면 블록을 사용하여 많은 고급 효과가 있는 갤러리를 추가할 수 있습니다.

그 외에도 새 블록 추가에만 초점을 맞춘 많은 플러그인을 찾을 수 있습니다. 여기에 기본 블록과 함께 새 블록을 추가하는 데 사용할 수 있는 몇 가지 최고의 WordPress 플러그인이 나열되어 있습니다.

1. 구텐베르크를 위한 궁극의 애드온 – 15개 이상의 구텐베르크 블록이 포함된 무료 플러그인
2. CoBlocks – 페이지 빌더 Gutenberg 블록
3. 쌓을 수 있는 – 구텐베르크 블록
4. Ultimate Blocks – 맞춤형 구텐베르크 블록
5. 고급 구텐베르크 – 구텐베르크를 위한 20개 이상의 새로운 블록
6. Kadence Block – Gutenberg Page Builder ToolKit
7. Envira 갤러리 – 사진 갤러리용 WordPress 블록
8. 원자 블록 – 구텐베르크 블록 컬렉션

구텐베르크를 위한 궁극의 애드온 – 15개 이상의 구텐베르크 블록이 포함된 무료 플러그인

많은 구텐베르크 사용자들 사이에서 인기 있는 애드온 중 하나입니다. Gutenberg를 위한 Ultimate Addons는 독특하고 창의적인 블록의 완전한 패키지입니다. 따라서 이 플러그인을 사용하여 멋진 페이지와 게시물을 작성하도록 편집기를 강화할 수 있습니다.

여기에는 다음을 포함하여 15개 이상의 구텐베르크 블록이 포함됩니다.

• 다중 버튼: 단일 반응 블록 내에 여러 개의 사용자 정의 가능한 버튼을 추가합니다.
• 고급 제목: 트렌디하고 매력적인 제목과 부제목을 구분 기호로 포함
• 정보 상자: 제목과 설명이 있는 이미지 또는 아이콘 삽입
• 가격표 : 레스토랑 메뉴처럼 쉽게 가격표를 생성
• 평가: 이 블록을 사용하여 고객 리뷰 추가

가장 놀랍게도 이 플러그인에는 Astra 테마에 대한 지원이 내장되어 있습니다. 그리고 Astra는 Gutenberg와 완전히 호환됩니다.

CoBlocks – 페이지 빌더 Gutenberg 블록

CoBlocks에는 새로운 Gutenberg 편집기를 위한 WordPress 블록을 만드는 창의적인 페이지가 있습니다. 구텐베르그로 페이지 구축 경험을 향상시킬 것입니다. 이 가벼운 WordPress 플러그인은 아름다운 웹 페이지를 만드는 데 도움이 됩니다.

현재 20개 이상의 대화형 블록을 지원합니다.

• 아코디언 블록
• 경고 차단
• 작성자 프로필 차단
• 버튼 블록
• 회전 목마 갤러리 블록
• 트윗 차단 클릭
• 콜라주 갤러리 블록
• 동적 분리기 블록
• 이벤트 블록(New!)
• 기능 블록
• 식음료 블록
• 양식 블록
• GIF 블록
• GitHub 요지 블록

다른 사람.

CoBlocks 기능으로 전체 웹사이트를 구축할 수 있습니다. 게다가, 매혹적인 타이포그래피 요소로 웹 페이지를 디자인할 수 있습니다.

쌓을 수 있는 – 구텐베르크 블록

Stackable은 새로운 WordPress 블록 편집기를 위해 특별히 설계되었습니다. Gutenberg를 위한 23개의 고품질 페이지 빌딩 블록과 50개 이상의 블록 레이아웃 및 사전 설정된 섹션/블록 디자인을 지원합니다. 웹 개발 여정을 원활하게 하기 위해 고급스럽고 유연한 웹 디자인 옵션을 제공합니다.

몇 가지 인기 있는 스택 가능 블록은 다음과 같습니다.

• 컨테이너 블록
• 기능 그리드 블록
• 카드 블록
• 헤더 블록
• 카운트업 블록
• 팀원 차단
• 알림 차단

이러한 맞춤형 및 다양한 디자인 레이아웃으로 디자인 능력을 향상시키십시오.

Ultimate Blocks - 맞춤형 구텐베르크 블록

이 Gutenberg 차단 플러그인은 블로거와 마케터를 위해 특별히 설계되었습니다. 따라서 구텐베르그로 더 좋고 매력적인 콘텐츠를 손쉽게 만들 수 있습니다.

현재 Ultimate Blocks는 개발 여정을 더욱 흥미롭게 만들기 위해 약 20개의 블록을 지원합니다. 몇 가지 주목할만한 기능은 다음과 같습니다.

• 콘텐츠 필터
• 카운트다운
• 이미지 슬라이더
• 탭 콘텐츠
• 스타일 상자
• 콘텐츠 토글

추가 지원을 위해 대화형 Facebook 그룹에 가입할 수 있습니다.

고급 구텐베르크 – 구텐베르크를 위한 20개 이상의 새로운 블록

Advanced Gutenberg는 기본 Gutenberg 편집기를 더욱 강력하게 만들어 전문 웹사이트를 엄청나게 쉽게 구축할 수 있도록 합니다. WordPress 사이트를 원활하게 사용자 지정할 수 있는 20개 이상의 새로운 블록과 옵션을 제공합니다.

여기에서 다음과 같은 고유한 블록을 얻을 수 있습니다.

• 열 관리자
• 최신 게시물 슬라이더
• 탭 블록
• 아이콘 블록
• 고급 이미지 블록
• 이메일 수신 동의 차단
• 그리고 더 많은

그럼에도 불구하고 사용자를 지원하기 위해 정교한 문서와 개인화된 포럼이 있습니다.

Kadence Block- Gutenberg Page Builder ToolKit

이 플러그인을 사용하면 사용자 정의 블록과 옵션을 구텐베르크 편집기에 추가할 수 있습니다. 아마도 Gutenberg의 편집 기능을 확장하여 맞춤형 레이아웃과 보다 매력적인 콘텐츠를 만들 수 있습니다.

Kadence는 실제로 다음 블록을 지원합니다.

• 행 레이아웃
• 고급 갤러리
• 형태
• 고급 제목
• 고급 버튼
• 탭
• 아코디언
• 사용후기
• 상
• 스페이서/디바이더
• 정보 상자
• 아이콘 목록

이 외에도 모든 유형의 레이아웃을 쉽게 구축할 수 있습니다. 이는 인기 있는 WordPress Page Builder 플러그인에서만 가능합니다.

Envira 갤러리 – 사진 갤러리를 위한 최고의 WordPress 블록

Envira는 사이트 속도에 영향을 주지 않으면서 WordPress 사이트에 갤러리를 삽입할 수 있는 완전히 최적화되고 강력한 플러그인입니다. 이 갤러리 플러그인을 사용하면 앨범, 태그, 소셜 미디어 통합, 갤러리 템플릿/갤러리 레이아웃, 딥 링크, 페이지 매김, 전자 상거래, 이미지 교정 등을 포함할 수 있습니다.

이 플러그인을 활성화하면 Common Blocks에서 새로운 옵션을 찾을 수 있습니다. 거기에서 필요에 따라 다양한 유형의 갤러리 스타일을 검색할 수 있습니다. 이 플러그인은 WooCommecre 플러그인과 완벽하게 호환되므로 모든 사진 사이트에서 사진을 판매하는 데 쉽게 사용할 수 있습니다.

원자 블록 – 구텐베르크 블록 컬렉션

Atomic Blocks는 새롭고 고급스러운 Gutenberg 블록 세트를 제공합니다. Array Themes의 동일한 재능있는 팀도 이 트렌디한 블록 컬렉션 뒤에서 일하고 있습니다.

현재 Atomic Blocks에는 15개의 Gutenberg 블록이 있으며 앞으로 더 추가될 예정입니다.

• 섹션 및 레이아웃 블록
• 고급 열 블록
• 뉴스레터 블록
• 가격 블록
• 포스트 그리드 블록
• 컨테이너 블록
• 평가 블록
• 인라인 통지 블록
• 아코디언 블록
• 공유 아이콘 블록
• 클릭 유도문안 블록
• 사용자 정의 가능한 버튼 블록
• 스페이서 및 디바이더 블록
• 작성자 프로필 차단
• 드롭 캡 블록

플러그인을 설치하면 Gutenberg 인터페이스에 새로운 Atomic Blocks 섹션이 표시됩니다. 웹사이트에서 사용하기 전에 모든 블록의 라이브 데모를 확인할 수 있습니다. 블록 편집기와 Atomic Blocks로 페이지를 작성하면 원하는 모든 종류의 사이트를 빠르게 디자인하고 시작할 수 있는 모든 권한을 얻을 수 있습니다!

그러나 최적화된 방식으로 아름다운 콘텐츠를 만들기 위해 훌륭한 블록이 포함된 더 유용한 플러그인을 찾을 수 있습니다. 우리와 생각을 공유하는 것을 잊지 마세요!

Gutenberg Blocks는 사이트 디자인의 새로운 시대를 열었습니다.

구텐베르크 편집기는 주로 블록 개념을 기반으로 합니다. 이 블록은 WordPress 편집기에서 게시물과 페이지 콘텐츠를 편집하는 완전히 새로운 방법을 도입했습니다. 이러한 차단을 통해 게시물과 페이지에 여러 유형의 콘텐츠를 쉽게 추가할 수 있습니다.

이 블로그에서는 구텐베르그 블록에 대한 모든 정보를 공유하려고 했습니다. 따라서 새로운 WordPress Editor의 혁신적인 디자인 레이아웃으로 쉽게 업데이트할 수 있습니다.

아래의 댓글 섹션에서 귀하의 이야기를 알려주고 WordPress와 관련된 질문을 할 수도 있습니다.