WordPress 게시물에 다중 열 컨텐츠를 추가하는 방법 (HTML 필요 없음)

WordPress 게시물에 여러 열로 된 콘텐츠를 추가 하시겠습니까? 열을 사용하여 게시물과 페이지를위한 매력적인 레이아웃을 만들 수 있습니다..


신문이나 잡지와 같은 전통적인 인쇄 매체는 인쇄 초기부터 여러 열로 된 레이아웃을 사용해 왔습니다. 그들의 목표는 사용 가능한 공간을 경제적으로 활용하면서 사용자가 더 작은 텍스트를보다 쉽게 ​​읽을 수 있도록하는 것이 었습니다.

단일 열 레이아웃이 웹에서 더 일반적으로 사용됩니다. 그러나 다중 열 격자는 여전히 내용을 강조 표시하고 스캔하고 읽기 쉽게 만드는 데 유용합니다..

이 기사에서는 HTML 코드를 작성하지 않고 WordPress 게시물에 여러 열로 된 콘텐츠를 쉽게 추가하는 방법을 보여줍니다..

WordPress 게시물 및 페이지에 여러 열 콘텐츠 추가

WordPress에 여러 열 콘텐츠 추가 – 쉬운 방법

기본 기능으로 제공되므로 WordPress에서 다중 열 컨텐츠 즉, 그리드 열 컨텐츠를 쉽게 작성할 수 있습니다. 새로운 WordPress 블록 편집기 Gutenberg는 열 블록을 포함합니다.

여러 열 레이아웃을 추가하려면 새 게시물을 작성하거나 기존 게시물을 편집해야합니다. 게시물 수정 영역에 있으면 상단의 ‘추가’아이콘을 클릭하여 블록을 추가하십시오.

다음으로 ‘레이아웃 요소’탭 아래에있는 ‘열’블록을 선택해야합니다..

WordPress 게시물에 열 블록 추가

왼쪽 열에서 마우스 커서가 점프하고 오른쪽 열에 텍스트 자리 표시자가 나타납니다..

게시물에 추가 된 WordPress의 열 차단 WordPress

위의 스크린 샷에서 볼 수 있듯이 열 블록은 처음에는 빈 영역으로 보입니다. 왼쪽으로 마우스를 가져 가면 블록 테두리가 강조 표시됩니다..

또한 포스트 편집 화면의 오른쪽 열에 블록 설정을 볼 수 있습니다.

열 블록 워드 프레스-2 열

기본적으로 columns 블록은 두 개의 열을 추가합니다. 오른쪽의 블록 설정에서 추가하려는 열 수를 늘릴 수 있습니다. 한 행에 최대 6 개의 열을 추가 할 수 있습니다..

열에 더 많은 열 추가

열을 클릭하고 입력을 시작하여 내용을 추가하십시오. 다음 열로 전환하기 위해 키보드의 탭 키를 사용할 수 있습니다.

워드 프레스 열에 텍스트 추가

열에 미디어 및 기타 콘텐츠 추가

텍스트 내용 외에도 WordPress 열에 이미지를 추가하고 비디오를 포함시킬 수 있습니다.

열 블록을 사용하면 각 열 안에 블록을 추가 할 수 있습니다. 마우스를 열로 가져 가면 그 안에 ‘새 블록 추가’아이콘이 나타납니다. /를 입력하고 블록 이름을 입력하여 블록을 추가 할 수도 있습니다..

워드 프레스 열에 새 블록 추가

선택한 블록이 이제 열 안에 나타납니다. 이제 콘텐츠를 추가 할 수 있습니다.

WordPress에 추가 된 이미지 블록

새 열이 기본 스무 아홉 가지 테마에 표시되는 방식은 다음과 같습니다. 이 예에서는 3 개의 열을 사용하고 마지막 열에는 이미지가 포함되어 있습니다..

WordPress Post의 3 열-미리보기

이미지와 이미지 옆에 일부 텍스트 만 추가하려는 경우 열 대신 ‘미디어 및 텍스트’블록을 사용할 수도 있습니다. 이 특정 블록은 텍스트 옆에 이미지 및 비디오와 같은 미디어를 보여주기 위해 특별히 만들어졌습니다..

WordPress에 미디어 및 텍스트 블록 추가

Old WordPress Classic Editor에서 여러 열 추가

WordPress를 Gutenberg로 업그레이드하지 않고 여전히 클래식 편집기를 사용하는 경우 그리드 열 레이아웃을 만들기 위해 별도의 플러그인을 설치해야합니다..

먼저 경량 그리드 열 플러그인을 설치하고 활성화하십시오. 자세한 지침을 보려면 WordPress에 플러그인을 설치하는 방법에 대한 단계별 가이드를 따르십시오.

활성화되면 새 게시물을 만들거나 이전 게시물을 열어 편집 할 수 있습니다. 그런 다음 비주얼 편집기 툴바에서 ‘열 추가’버튼을 클릭하십시오..

열 추가 아이콘 경량 그리드 열 플러그인

이제 첫 번째 열을 추가하는 팝업 창이 나타납니다. 데스크톱, 태블릿 및 휴대 기기에서 열이 차지하는 면적을 다르게 선택할 수 있습니다..

예를 들어 데스크톱 그리드 비율을 50 %로 설정하면 열이 절반 행을 덮습니다..

격자 너비 백분율-경량 격자 열

열 간격을 5 간격에서 5 %에서 100 % 사이로 설정하는 옵션이 많이 있습니다. 드롭 다운을 클릭하여 열 너비를 선택할 수 있습니다.

열 너비 옵션-격자 백분율

그런 다음 ‘콘텐츠’상자에 열 콘텐츠를 추가 한 다음 ‘확인’버튼을 클릭하여 게시물에 삽입해야합니다..

컬럼에 컨텐츠 추가-경량 그리드 컬럼 플러그인

플러그인은 이제 컨텐츠와 함께 필요한 단축 코드를 생성하여 포스트 에디터에 추가합니다.

워드 프레스 열에 추가 된 단축 코드 및 내용

첫 번째 열이 추가되었으므로 프로세스를 반복하여 더 많은 열을 추가 할 수 있습니다. 행의 마지막 열에 대해‘행의 마지막 열’확인란을 선택하십시오..

WordPress에서 2 열의 단축 코드 및 내용

그런 다음 게시물을 저장하고 미리 볼 수 있습니다. Twenty Seventeen 테마를 사용하여 테스트 사이트에서 본 모습은 다음과 같습니다..

스물 열일곱 테마의 두 워드 프레스 열

이 기사가 WordPress 게시물 및 페이지에 열을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. WordPress 게시물에서 이미지를 쉽게 정렬하는 방법에 대한 간단한 가이드를 볼 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map