WordPress 블록 사이에 공백을 추가하거나 제거하는 방법

최근 게시물 게시판 wordpress WordPress 블록 사이에 공백을 추가하거나 제거하는 방법

  • WordPress 블록 사이에 공백을 추가하거나 제거하시겠습니까?

    WordPress 블록 사이에 공백을 추가하거나 제거하면 WordPress 사이트 디자인을 더 잘 제어할 수 있습니다.

    이 기사에서는 WordPress 블록 사이에 공백을 추가하거나 제거하는 방법을 단계별로 보여줍니다.

    WordPress 블록 사이에 공백을 추가하거나 제거하는 이유는 무엇입니까?

    WordPress는 내장된 기능으로 사용자 정의 페이지와 게시물을 쉽게 만들 수 있습니다. 워드프레스 블록 편집기.

    그러나 특정 블록을 추가할 때 간격이 너무 많거나 너무 적음을 알 수 있습니다. WordPress 블록 사이에 공백을 추가하거나 제거하여 원하는 대로 정확하게 사용자 정의 페이지 레이아웃을 만들 수 있습니다.

    당신의 최종에 대한 더 많은 통제와 함께 워드프레스 웹사이트 디자인을 통해 방문자에게 더 나은 사용자 경험을 제공할 수 있습니다.

    즉, 웹 사이트에서 WordPress 블록 사이에 공백을 추가하거나 제거하는 방법을 살펴보겠습니다. 아래의 빠른 링크를 사용하여 사용하려는 방법으로 바로 이동하십시오.

    방법 1. 블록 편집기로 WordPress 블록 사이에 공백 추가

    블록 사이에 공백을 추가하는 가장 쉬운 방법은 WordPress 블록 편집기를 사용하는 것입니다. 몇 번의 클릭으로 공백을 추가할 수 있는 기본 제공 간격 블록이 있습니다.

    이것을 사용하려면 게시물 또는 페이지 수정하고 싶은 ‘플러스’ 블록 추가 버튼을 클릭합니다.

    그런 다음 ‘스페이서’를 검색하여 블록을 선택합니다.

    페이지에 스페이서 블록 추가

    이렇게 하면 페이지에 스페이서가 자동으로 삽입됩니다.

    블록을 위 또는 아래로 드래그하여 더 크거나 작게 만들 수 있습니다.

    스페이서 블록 크기 조정

    완료되면 ‘업데이트’ 버튼을 클릭하여 변경 사항을 저장합니다.

    이 방법을 사용하면 블록 사이에 공간을 추가할 수만 있습니다. 공간을 제거하려면 아래의 다른 방법 중 하나를 사용해야 합니다.

    방법 2. 사용자 정의 CSS를 추가하여 WordPress 블록 사이의 공백 추가 또는 제거

    블록 사이에 공백을 추가하거나 제거하는 또 다른 방법은 테마에 사용자 정의 CSS 코드를 추가하는 것입니다.

    이전에 이 작업을 수행하지 않은 경우 에 대한 가이드를 살펴보는 것이 좋습니다. WordPress 사이트에 사용자 정의 CSS를 쉽게 추가하는 방법 시작하기 전에.

    그런 다음 편집하려는 페이지 또는 게시물을 열고 공백을 추가하거나 제거하려는 블록을 클릭합니다.

    그런 다음 오른쪽 옵션 패널에서 ‘차단’ 메뉴 항목을 클릭합니다.

    차단 메뉴 옵션 클릭

    그런 다음 ‘고급’ 드롭다운까지 아래로 스크롤하여 클릭합니다. 그러면 해당 블록에 대한 추가 옵션 세트가 나타납니다.

    그런 다음 ‘추가 CSS 클래스’ 상자에 다음 코드를 추가합니다.

    이 스니펫은 해당 블록에 대해 특별히 새로운 CSS 클래스를 생성합니다.

    새 CSS 클래스 추가

    그런 다음 ‘업데이트’ 버튼을 클릭하여 변경 사항을 저장합니다.

    다음으로 이동합니다. 모양 » 사용자 정의 올리다 워드프레스 테마 커스터마이저.

    워드프레스 테마 커스터마이저로 이동

    그런 다음 아래로 스크롤하여 ‘추가 CSS’ 메뉴 옵션을 클릭합니다.

    CSS 코드를 추가할 수 있는 필드가 나타납니다.

    추가 CSS 클릭

    다음으로 다음 코드 조각을 상자에 붙여넣습니다.

    .add-remove-bottom-space {
    
     margin-bottom: 0;
    
    }
    

    이 코드 조각은 아래쪽 여백을 0으로 설정하고 블록에서 공백을 제거합니다. 하단에 공간을 추가하려면 ‘0’을 ’20px’와 같이 변경하면 됩니다.

    CSS 코드 추가

    변경한 후에는 ‘게시’ 버튼을 클릭하여 변경 사항을 적용하십시오.

    플러그인을 사용하여 사용자 정의 CSS 코드 저장

    WordPress 테마 사용자 정의 도구에 사용자 정의 CSS를 추가하면 현재 사용 중인 테마에 대해서만 저장됩니다. 만약 너라면 워드프레스 테마 변경그런 다음 CSS 코드를 새 테마로 복사해야 합니다.

    사용 중인 테마에 상관없이 사용자 정의 CSS를 적용하려면 다음을 사용해야 합니다. 간단한 사용자 정의 CSS 플러그인.

    가장 먼저 해야 할 일은 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 다음 가이드를 참조하세요. WordPress 플러그인을 설치하는 방법.

    활성화되면 다음으로 이동하십시오. 모양 » 사용자 정의 CSS 사용자 정의 CSS 코드를 추가하십시오.

    Simple Custom CSS 플러그인으로 코드 추가

    완료되면 ‘사용자 정의 CSS 업데이트’ 버튼을 클릭하여 변경 사항을 저장합니다.

    방법 3. CSS Hero를 사용하여 WordPress 블록 사이에 공백 추가 또는 제거

    WordPress 블록 사이에 공백을 추가하거나 제거하는 또 다른 초보자 친화적인 방법은 WordPress 사용자 정의 CSS 플러그인을 사용하는 것입니다. 이를 통해 워드프레스 블로그 CSS 코드를 편집하지 않고

    사용하는 것이 좋습니다. CSS 영웅 플러그인. 코드를 한 줄도 작성하지 않고도 WordPress 사이트의 거의 모든 CSS 스타일을 편집할 수 있습니다.

    거래: WPBeginner 독자는 당사를 사용하여 34% 할인을 받을 수 있습니다. CSS 히어로 쿠폰 코드.

    가장 먼저 해야 할 일은 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 에 대한 초보자 가이드를 참조하십시오. WordPress 플러그인을 설치하는 방법.

    CSS Hero 플러그인 활성화

    활성화 시 ‘제품 활성화 진행’ 버튼을 클릭하여 플러그인을 활성화해야 합니다. 설치된 플러그인 목록 바로 위에 버튼이 있습니다.

    그러면 사용자 이름과 암호를 입력해야 하는 화면이 나타납니다. 그런 다음 화면의 지시에 따라 계정이 확인되면 대시보드로 다시 리디렉션됩니다.

    다음으로 편집하려는 페이지 또는 게시물을 연 다음 WordPress 관리 도구 모음 상단에 있는 ‘CSS Hero’ 버튼을 클릭해야 합니다.

    CSS 영웅 클릭

    그러면 다음과 같은 페이지가 열립니다. CSS 영웅 그 위에서 달리고 있습니다. 플러그인은 시각적 편집기를 사용하므로 실시간으로 변경할 수 있습니다.

    페이지의 요소를 클릭하면 페이지 왼쪽에 사용자 정의할 수 있는 도구 모음이 나타납니다.

    CSS 히어로 페이지 커스터마이저

    블록 사이의 공백을 제거하거나 추가하려면 ‘간격’ 옵션을 클릭한 다음 ‘여백-하단’ 섹션까지 아래로 스크롤하십시오.

    여기에서 슬라이더를 위나 아래로 움직여 여백을 추가하거나 제거할 수 있습니다.

    CSS Hero 변경 하단 여백

    변경 사항은 페이지에 자동으로 표시됩니다.

    변경이 완료되면 ‘저장’ 버튼을 클릭하여 변경 사항을 적용해야 합니다.

    방법 4. SeedProd로 WordPress 블록 사이에 공백 추가 또는 제거

    SeedProd 이다 최고의 드래그 앤 드롭 페이지 빌더 100만 개 이상의 웹사이트에서 사용됩니다.

    SeedProd

    150개 이상의 템플릿 라이브러리를 사용하여 사용자 정의 404페이지판매 페이지, 방문 페이지, 그리고 훨씬 더. SeedProd는 다음과 같은 용도로도 사용할 수 있습니다. 사용자 정의 WordPress 테마 만들기 코드를 작성하지 않고.

    끌어서 놓기 빌더를 사용하면 사이트 디자인을 완벽하게 제어할 수 있으며 모든 웹사이트 요소에 공백을 쉽게 제거하거나 추가할 수 있습니다.

    자세한 내용은 다음 가이드를 참조하세요. WordPress에서 사용자 정의 페이지를 만드는 방법.

    페이지를 사용자 정의할 때 Spacer 블록을 사용하여 어디에나 공간을 추가할 수 있습니다.

    SeedProd 스페이서 블록

    블록 사이에 더 많은 공간을 추가하려는 페이지의 아무 곳이나 끌어다 놓기만 하면 됩니다.

    그런 다음 슬라이더를 사용하여 높이를 조정할 수 있습니다.

    슬라이더를 사용하여 SeedProd 스페이서 블록의 높이를 조정합니다.

    또한 모든 블록 사이의 간격을 제어할 수 있습니다. 그렇게 하려면 공간을 추가하거나 제거하려는 블록을 클릭하기만 하면 됩니다.

    그러면 왼쪽에 옵션 패널이 나타납니다. 그런 다음 ‘고급’ 탭을 클릭합니다.

    SeedProd 빌더에서 고급 탭을 클릭합니다.

    그런 다음 ‘간격’ 드롭다운까지 아래로 스크롤하여 클릭합니다.

    이것은 ‘마진’을 제어할 수 있는 메뉴를 불러옵니다. 하단 여백 상자에 숫자를 입력하여 공백을 추가하거나 숫자를 삭제하여 기존 공백을 제거하십시오.

    하단 여백 변경

    변경을 마치면 ‘저장’ 버튼을 클릭하고 ‘게시’ 드롭다운을 선택하여 변경 사항을 적용합니다.

    SeedProd 페이지 저장 및 게시

    이 기사가 WordPress 블록 사이에 공백을 추가하거나 제거하는 방법을 배우는 데 도움이 되었기를 바랍니다. 당신은 또한 우리의 가이드를보고 싶을 수도 있습니다 자신의 팟캐스트를 시작하는 방법 우리의 전문가가 선택한 최고의 무료 웹사이트 호스팅 비교.

    이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서용. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.

    Source link

    신고하기
'WordPress 블록 사이에 공백을 추가하거나 제거하는 방법'에 답변달기
글쓴이 정보: