블록에디터(구텐베르크 편집기) 메뉴 구성

Photo of author

By OKePaPa

| 업데이트 :

워드프레스의 블록에디터(구텐베르크 편집기)의 메뉴 구성에 대해서 살펴본다. 일단 어떤 메뉴들이 있는지 눈으로 한번 살펴봐 봄으로 해서 어떤 편집 기능을 활용할 수 있을 지 감을 잡아 보고, 하나씩 활용을 해보도록 하자

블록에디터에서 편집 메뉴 호출 4가지 방식

[1] 블록에티터 블록에서 ‘/’입력

블록 에디터에서 ‘/’를 입력하면 다음과 같은 메뉴가 나온다

블록에디터(구텐베르크 편집기) 메뉴 구성 1

[2] 편집기 왼쪽 위에 있는 [+]메뉴 클릭

블록에디터(구텐베르크 편집기) 메뉴 구성 2

[블록]탭에 포함된 메뉴

1) 텍스트 – 아래 문단에서 설명

2) 미디어 – 사진, 오디오, 파일, 비디오를 업로드

  • 커버 : 이미지 위에 글자를 입력할 수 있는 기능

3) 디자인 

  • 버튼 : 본문에 클릭가능한 버튼을 생생
  • 컬럼 : 화면을 일정 비율로 나눔

4) 위젯

5) 테마

6) 임베드 – 각종 SNS버튼을 삽입하여 링크

블록에디터(구텐베르크 편집기) 메뉴 구성 3
블록에디터(구텐베르크 편집기) 메뉴 구성 4
블록에디터(구텐베르크 편집기) 메뉴 구성 5
블록에디터(구텐베르크 편집기) 메뉴 구성 6
블록에디터(구텐베르크 편집기) 메뉴 구성 7
블록에디터(구텐베르크 편집기) 메뉴 구성 8

[패턴]탭에 포함된 메뉴들

패턴이라는 기능은 블록을 직접 복사하여 페이지를 만들 수 있는 기술입니다. 사이트에 들어가서 블록을 복사하지 않아도 에디터에서 여러 패턴들과 파일을 볼 수 있습니다.

1) 특성

2) 글

3) 텍스트

4) 갤러리

5) 콜투액션

6) 배너

7) 헤더

8) 푸터

9) 사용후기

블록에디터(구텐베르크 편집기) 메뉴 구성 9
블록에디터(구텐베르크 편집기) 메뉴 구성 10
블록에디터(구텐베르크 편집기) 메뉴 구성 11
블록에디터(구텐베르크 편집기) 메뉴 구성 12
블록에디터(구텐베르크 편집기) 메뉴 구성 13
블록에디터(구텐베르크 편집기) 메뉴 구성 14
블록에디터(구텐베르크 편집기) 메뉴 구성 15
블록에디터(구텐베르크 편집기) 메뉴 구성 16
블록에디터(구텐베르크 편집기) 메뉴 구성 17
블록에디터(구텐베르크 편집기) 메뉴 구성 18

[미디어탭]에 포함된 메뉴들

블록에디터(구텐베르크 편집기) 메뉴 구성 19
블록에디터(구텐베르크 편집기) 메뉴 구성 20
블록에디터(구텐베르크 편집기) 메뉴 구성 21
블록에디터(구텐베르크 편집기) 메뉴 구성 22
블록에디터(구텐베르크 편집기) 메뉴 구성 23
블록에디터(구텐베르크 편집기) 메뉴 구성 24

[3] 문단 메뉴

블록에디터(구텐베르크 편집기) 메뉴 구성 25

1) 문단 – 해당 단락을 제목, 목록, 인용구 등으로 변경

블록에디터(구텐베르크 편집기) 메뉴 구성 26

2) 끌기 – 단락 전체를 끌어서 위, 아래로 이동

블록에디터(구텐베르크 편집기) 메뉴 구성 27

3) 위로 올리기 / 아래로 이동 – 한칸 씩 위, 아래로 이동

블록에디터(구텐베르크 편집기) 메뉴 구성 28
블록에디터(구텐베르크 편집기) 메뉴 구성 29

4) 컨테이터 추가

블록에디터(구텐베르크 편집기) 메뉴 구성 30

5) 정렬 – 텍스트 좌, 우, 가운데 정렬

블록에디터(구텐베르크 편집기) 메뉴 구성 31

6) Pretty Link (플러그인 메뉴)

블록에디터(구텐베르크 편집기) 메뉴 구성 32

7) 굵게 – 볼드체

블록에디터(구텐베르크 편집기) 메뉴 구성 33

8) 이탤릭 – 비스듬한 이탤릭체

블록에디터(구텐베르크 편집기) 메뉴 구성 34

8) 링크 – URL을 연결하거나 삽입

블록에디터(구텐베르크 편집기) 메뉴 구성 35

9) 더보기 – 텍스트나 배경에 색을 입힐 수 있습니다

블록에디터(구텐베르크 편집기) 메뉴 구성 36

10) 옵션 – 복사, 붙여넣기, 제거 등

블록에디터(구텐베르크 편집기) 메뉴 구성 37

[4] 오른쪽 밑에 있는 [+] 메뉴 버튼

블록에디터(구텐베르크 편집기) 메뉴 구성 38

/