WordPress에 여러 열을 추가하는 방법(2가지 방법)

게시 됨: 2021-10-15

내용을 열로 배열하는 관행은 인쇄기 초기로 거슬러 올라갑니다. 이 형식은 텍스트, 이미지 등을 구성하는 다양한 방법이 될 수 있습니다. 그러나 WordPress에 여러 열을 추가하고 올바른 위치에 배치하는 것은 약간 까다로울 수 있습니다.

다행히 그럴 필요는 없습니다. 이제 블록 편집기를 사용하여 몇 가지 짧은 단계로 WordPress 게시물 및 페이지에 여러 열을 쉽게 추가할 수 있습니다.

클래식 편집기와 페이지 빌더 플러그인을 사용하여 이 레이아웃을 얻을 수도 있습니다.

이 자습서에서는 WordPress에 여러 열을 추가하는 방법을 살펴봅니다.

시작하자!

다중 열 레이아웃을 사용하는 이유

올바른 테마 선택에서 사용자 정의 글꼴 추가에 이르기까지 사이트 디자인을 개인화하는 것은 브랜드를 구축하는 데 중요합니다. 게시물과 페이지 레이아웃도 이 퍼즐의 일부입니다. 다양한 형식 옵션을 실험하는 것은 콘텐츠에 구조적 다양성을 추가하는 흥미로운 방법이 될 수 있습니다.

가독성에 가장 적합한 단일 형식은 없기 때문에 창의력을 발휘하고 자신에게 적합한 모양을 찾을 수 있습니다. 다양한 종류의 콘텐츠에 맞게 페이지에서 페이지로 전환하고 다음 데모와 같이 레이아웃이 다른 페이지로 구성된 WordPress 사이트를 만들 수 있습니다.

다중 열 Divi 데모

열은 특히 다양한 형식입니다. 공간을 경제적으로 사용하려는 경우 텍스트를 쉽게 분할할 수 있습니다.

BuddyBoss 테마에서 볼 수 있듯이 열을 사용하여 서로 다른 위젯을 응집력 있는 방식으로 함께 연결할 수도 있습니다.

BuddyBoss 테마

또는 필요에 따라 제거하거나 모양을 변경할 수 있는 유연한 형식을 사용하는 데 관심이 있을 수 있습니다. 추론에 관계없이 열은 사이트에 다양성과 조직을 추가할 수 있습니다.

WordPress에 여러 열을 추가하는 방법(2가지 쉬운 방법)

WordPress 초기에 사용자는 HTML에 대한 실무 지식이 있어야 했고 자신의 코드를 자신 있게 편집하여 게시물에 열을 추가할 수 있어야 했습니다. 그 당시에는 콘텐츠 작성 및 편집이 가장 사용자 친화적인 경험이 아니었습니다.

다행히도 이제 WordPress에 열을 추가하는 두 가지 쉬운 방법이 있습니다. HTML이 필요하지 않습니다.

블록 편집기에는 직관적인 열 기능이 내장되어 있으며, 클래식 편집기를 선호하는 사람들은 플러그인을 사용하여 열을 수동으로 코딩하지 않아도 된다는 소식을 듣게 되어 기쁩니다.

이제 두 가지 방법을 살펴보겠습니다.

방법 1: 블록 편집기의 기본 기능 사용

블록 편집기(Gutenberg)를 사용하여 여러 열을 추가하는 것으로 시작하겠습니다. 새로운 기본 WordPress 콘텐츠 생성 인터페이스는 이동하기 쉬운 콘텐츠 블록에 중점을 둔 모든 유용한 기능을 제공합니다.

이러한 기능 중 하나는 적절하게 명명된 Columns 블록으로, 원하는 만큼 열을 생성하는 데 도움이 됩니다.

검색 상자가 열린 블록 편집기의 이미지

시작하려면 + 버튼을 클릭하여 열 수 있는 블록 편집기의 검색 상자에 "열" 을 입력하십시오. 또는 화면을 클릭하고 "/columns" 를 입력하여 동일한 옵션을 불러올 수 있습니다.

그러면 열 레이아웃을 선택할 수 있는 창이 나타납니다.

열 블록에 사용할 수 있는 다양한 옵션의 근접 촬영

기본 2열로 시작하여 나중에 설정을 조정하는 것도 옵션입니다.

원하는 섹션 수와 분할 방법을 지정한 후에는 원하는 위치에 블록을 끌어다 놓을 수 있습니다.

다음으로 Columns 블록 내에 다른 블록을 중첩할 수 있습니다. 그것들은 모두 텍스트 블록일 수도 있고, 흔들 수도 있습니다. 텍스트 열을 이미지나 달력 열 옆에 배치하여 눈에 띄게 만들어 보세요.

블록 편집기의 달력 및 단락 블록이 있는 열 블록

요소를 혼합하고 일치시켜 편집기의 유연성을 활용하는 것을 두려워하지 마십시오.

그런 다음 열 블록 설정으로 돌아가 필요에 맞게 너비 비율을 조정할 수 있습니다. 촬영하려는 룩에 따라 각 개별 열을 조정할 수 있습니다.

블록 편집기의 시각적 인터페이스 덕분에 백엔드 작업은 프론트엔드로 직접 변환됩니다. 참고로 예제를 게시한 후의 모습은 다음과 같습니다.

프론트엔드의 열 블록

기본 사항에 익숙해지면 열을 통해 더 많은 것을 탐색할 수 있습니다.

블록 편집기로 더 많은 기능을 찾고 있다면 기능 강화 블록 플러그인을 다운로드하고 새로운 콘텐츠 조합을 실험하는 것을 고려할 수 있습니다.

방법 2: SiteOrigin의 클래식 편집기 및 페이지 빌더 사용

더 전통주의자이고 여전히 클래식 편집기를 사용하는 경우 코드 없이 게시물과 페이지에 여러 열을 추가할 수도 있습니다. 플러그인만 있으면 됩니다. 작업을 완료할 수 있는 옵션이 많이 있으므로 가장 먼저 해야 할 일은 하나를 선택하는 것입니다.

저는 SiteOrigin 플러그인의 Page Builder의 열렬한 팬이므로 이 플러그인을 사용하여 클래식 편집기에서 다중 열 레이아웃을 생성하겠습니다.

SiteOrigin의 페이지 풀더

Page Builder는 직관적인 끌어서 놓기 인터페이스를 사용하고 100만 개 이상의 활성 설치가 있는 견고한 무료 옵션입니다.

사이트에 플러그인을 설치하고 활성화했으면 왼쪽 사이드바에서 설정 > 페이지 빌더 메뉴를 클릭하여 설정 페이지로 이동합니다.

여기에서 일반 탭을 선택하고 새 게시물에 클래식 편집기 사용 옵션을 선택합니다.

SiteOrigin 페이지 빌더 설정

이 옵션이 작동하려면 사이트에 클래식 편집기 플러그인이 설치 및 활성화되어 있어야 합니다.

이제 기존 게시물을 열거나 새 게시물을 만들고 오른쪽 상단 모서리에 있는 페이지 빌더 탭으로 이동하여 열을 추가할 수 있습니다.

클래식 편집기의 페이지 빌더 탭

여기에서 행 추가 버튼을 클릭하면 열을 추가할 수 있는 새 행이 생성됩니다.

SiteOrigin 행 추가 기능

그러면 열의 수, 비율 및 방향을 포함한 일부 초기 설정을 조정할 수 있는 인터페이스가 열립니다.

SiteOrigin Page Builder의 새 행 생성 화면

열 수를 지정하고 비율을 결정하십시오. 그런 다음 삽입 을 클릭하여 게시물에 배치합니다.

블록 편집기와 마찬가지로 SiteOrigin 플러그인의 Page Builder를 사용하면 열 구조에 다른 위젯을 삽입할 수 있습니다.

위젯을 추가할 열을 선택한 다음 위젯 추가 버튼을 클릭하면 다음 패널이 표시됩니다.

Page Builder의 위젯 옵션의 예

통합할 요소를 선택하고 콘텐츠로 채우십시오.

이제 게시물의 백엔드가 다음과 같아야 합니다.

위젯으로 채워진 Page Builder 칼럼 포스트

변경 사항을 마무리합니다.

이것은 프론트엔드에서 다음과 같은 결과로 변환됩니다.

프런트엔드의 열

사이트의 독특한 모양을 만들기 위해 다양한 위젯 페어링을 시도해 보세요. 언제든지 되돌릴 수 있는 쉬운 과정이므로 틀을 깨고 창의력을 발휘하는 것을 두려워하지 마십시오.

결론

WordPress 사이트에 열을 추가하면 레이아웃을 신선하고 매력적으로 유지할 수 있습니다. 그렇게 하는 과정이 때때로 약간 어려울 수 있지만 더 쉽게 만드는 데 사용할 수 있는 간단한 방법이 있습니다.

이 자습서에서는 WordPress에 여러 열을 추가하는 두 가지 단계별 방법을 다루었습니다.

  1. 블록 편집기의 내장 Columns 블록 사용
  2. 클래식 편집기와 함께 사용하기 위해 Page Builder와 같은 플러그인 설치

WordPress에서 열을 추가하는 가장 좋아하는 방법은 무엇입니까? 아래 의견 섹션에서 알려주십시오!