Block Editor로 편리하게 페이지 레이아웃 디자인 하기

워드프레스는 강력한 편집 툴을 가지고 있는데 그중 하나가 Block Editor 입니다. 이것만으로도 간단한 페이지 레이아웃을 할 수 있습니다. 

간단하게 페이지 하나를 꾸며봅시다. 

 

이미지 블럭 활용하기

 

1. 저장되어 있는 샘플 페이지 하나를 열고 저장되어 있는 텍스트 블록을 선택해 봅시다.

 

2. 좌측에 블럭 에디터 창이 열리고 이미 셋팅되어 있는 텍스트 블럭과 이미지 블럭, 갤러리, 미디어 등 필요한 개체를 찾아 입력할 수 있습니다. 

 

3.  텍스트 블럭의 사이에 [ + ] 버튼을 누르면 원하는 블럭을 추가할 수 있습니다. 

 

4. [ + ] 버튼을 누르고 이미지 블럭을 하나 넣어봅시다. 이미지 아이콘을 선택하면 파일을 업로드할 수 있는 창이 열립니다. 

 

 

5. 'Update'를 누르고 'Preview'를 눌러 페이지에 입력된 이미지를 확인해 봅시다. 

6. 웹페이지에 적용된 이미지를 볼 수 있습니다. 다음과 같은 방법으로 다양한 블록을 적용해 페이지를 디자인해 봅시다. 

 

테이블 블럭 활용하기

 

1. 블럭에디터에서 테이블 블럭을 선택합니다. 가로, 세로 2칸씩 설정하고 'Create Table'을 설정합니다. 

2. 인터넷에서 'Lorem ipsum' 을 검색하면 다양한 사이트들이 열리는데 그곳에서 텍스트를 복사해서 테이블안에 텍스트 컨텐츠를 입력합니다. Lorem ipsum은 아무 의미없는 문장으로 나열된 텍스트로 사이트를 준비중이거나 컨텐츠를 좀더 만들어야 할때 텍스트 컨텐츠 예제로 만들때 사용하면 편리합니다. 

 

loremipsum.io/

Lorem Ipsum – Generator, Origins and Meaning

텍스트 컨텐츠가 없을때 활용하면 편리합니다. 

3. 앞에서 만든 테이블 블럭을 선택하고 워드프레스 우측상단의 설정 아이콘을 클릭하면 테이블의 스타일을 설정할 수 있습니다. 배경색과 테이블 형태를 선택해 모양을 수정해 봅시다.