워드프레스 블록 그룹의 여백을 조절하거나 없애기 (GeneratePress)

글을 쓰다 보면 블록과 블록을 하나의 그룹으로 처리해야 하는 경우가 있다(워드프레스 기본 구텐베르크 에디터). 그룹은 문단과 문단이 될 수도 있고, 이미지와 문단 등이 될 수 있다. 문제가 있다면, GeneratePress 테마의 기본 설정하에서는 그룹의 여백이 과도하다는 것. 물론 전체 본문과 그룹 간 구분을 하기 위해 필요할 수도 있지만 불필요할 정도로 과도한 느낌이다. 그러다 보니, 개인적으로는 초반에 그룹 기능을 몇 번 시도해 보다가 결국 마음에 들지 않아 잘 쓰지 않게 되었다. 다만, 최근에 그룹 여백을 조절할 수 있는 CSS를 알게 되어 앞으로는 좀 더 적극적으로 활용할 수 있게 되었다.

그룹 메뉴
그룹화

여백 조정 CSS

모양 > 사용자 정의 > 추가 CSS
아래 코드 중에서 padding: 0 부분에 원하는 수치와 단위를 넣어 디자인 하도록 하자.

.wp-block-group__inner-container {
padding: 0 !important;
}
그룹 여백 조절 CSS

CSS 적용 후 그룹 여백 변화

그룹 기본 여백
기본 여백
그룹 여백 1rem
padding: 1rem
그룹 여백 0
padding: 0

카테고리의 다른 글

  1. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  2. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인
  3. 애드센스 - 가치가 별로 없는 콘텐츠
  4. 워드프레스 포스트의 수정한 날짜를 발행일과 맞추거나 특정 날짜로 변경하기
  5. 워드프레스 애드센스 ads.txt 설정(업로드) 후 문제 해결까지 걸리는 시간

댓글 남기기