워드프레스 Divi 5 테마 포트폴리오 레이아웃이 제대로 표시되지 않는 문제 해결하기

유료 테마 중에서는 가장 많은 설치 수를 자랑하는 Divi 테마는 작년 퍼블릭 베타(Public Beta) 버전을 출시했고 꾸준히 버전을 업데이트하고 있습니다. 현재 Public Beta 9.3 버전까지 출시된 Divi 5는 초기에 비해 안정성이 더욱 향상된 것 같습니다.

Divi 5는 페이지 빌더를 완전히 바꾸어서 Divi 4에 비해 속도, 안정성, 유연성이 크게 향상되었습니다. Wix를 연상시키는 새로운 페이지 빌더 편집기는 엘리멘터보다도 더 사용하기 편하고, 특히 편집 페이지에서 반응 속도가 크게 개선되어 곧바로 반응하여 사용자 경험(UX) 측면에서 향상되었습니다.

기존 Divi 버전에서 제작된 사이트를 Divi 5로 마이그레이션이 가능합니다. 작년 10월에 2개의 사이트를 Divi 5로 변환을 시도했었는데, 당시 1개는 Divi 5로 변환에 성공했지만, 다른 1개는 제대로 변환이 안 되었습니다. 변환에 실패한 사이트를 오늘 다시 변환을 시도해 보니 다행히 성공적으로 마이그레이션이 완료되었습니다. 다른 레이아웃과 기능은 문제가 없지만, 필터 가능한 포트폴리오(Filterable Portfolio) 모듈이 4개 열로 표시되어야 하는데, 마이그레이션 후에 1개 열로 표시되는 문제가 발생했습니다. 다른 플러그인과의 충돌 때문인지 모르겠지만, 임시로 CSS를 사용하여 4열로 표시되도록 수정했습니다.😄

워드프레스 Divi 5 테마 포트폴리오 레이아웃이 제대로 표시되지 않는 문제 해결하기

현재 100만 개 이상이 판매된 베스트셀링 테마인 아바다(Avada)와 비슷한 판매량을 자랑하는 Divi는 2026년 2월 26일 현재 97만 개 이상이 판매되었습니다. 아바다는 1개 사이트에만 설치가 가능하지만, Divi는 무제한 사이트에 설치가 가능하여 유료 테마 중에서는 가장 많이 설치되어 있습니다.

저는 현재 2개 사이트에 Divi 테마를 설치하여 사용하고 있습니다. Divi는 특히 원페이지 레이아웃의 랜딩 페이지를 만드는 경우 유용하게 이용할 수 있습니다. 2,500개가 넘는 레이아웃 디자인을 조합하여 원하는 원페이지 레이아웃의 랜딩 페이지를 쉽게 만들 수 있습니다.

Divi 5가 출시되면서 속도와 안정성, 유연성이 이전 버전에 비해 크게 향상되었습니다. 엘리멘터를 사용하여 페이지를 수정할 때 버벅대는 경우가 종종 있는데, Divi 5에서는 그런 느낌 없이 즉각적으로 반응하여 사용자 경험이 개선되었습니다.

Divi 테마에 대한 자세한 정보는 Elegant Themes 사이트를 참고해보세요.

💡Divi 테마에 대한 자세한 정보

현재 Divi 5는 퍼블릭 베타 버전 단계이며, 꾸준히 기능 개선이 이루어지고 있는 것 같습니다. 작년 10월에 Elegant Themes의 메일을 받고 1개 사이트를 Divi 5로 마이그레이션했습니다. 사이트가 심플한 경우 곧바로 변환이 되었지만, 다른 사이트 하나는 변환이 되지 않았습니다.

지금은 Pubic Beta 9.3까지 출시되어 오늘 변환에 실패한 사이트에 대하여 Divi 5로 마이그레이션을 시도하니 변환이 성공적으로 완료되었습니다.😄

Divi 테마를 새로 적용하는 경우에는 Divi 5로 시작할 수 있습니다. 기존 Divi 버전을 사용하는 경우에는 먼저 백업을 확실히 한 후에 진행하고, 문제가 발생하면 이전 버전으로 되돌리는 것을 고려할 수 있습니다.

👉 2026년 2월 26일(한국 시각으로 2월 27일)에 Divi가 베타 버전에서 정식 버전으로 전환된다고 합니다. 정식 버전으로 바뀌면 안정성이 더욱 개선될 것으로 기대됩니다.

Divi 계정에 로그인하면 Divi 4(기존 버전)과 Divi 5 베타를 다운로드할 수 있습니다.

Divi 5로 변환한 후에 살펴보니 대부분의 기능과 레이아웃은 그대로 유지되었지만, 필터 가능한 포트폴리오(Filterable Portfolio)의 경우 편집 페이지에서는 4열로 제대로 표시되었지만, 실제 페이지에서는 1열로 표시되는 문제가 나타났습니다.

Design 탭에서 Flex, Grid, Block 등에서 선택이 가능하고, Grid로 설정할 경우 컬럼 개수를 지정할 수 있습니다.

Advanced 탭에 CSS 코드와 HTML 태그를 직접 추가할 수 있습니다.😄 엘리멘터 프로(최저가 요금제 제외)에서 비슷한 기능이 제공됩니다.

임시로 다음과 같은 CSS 코드를 사용하여 4컬럼 레이아웃으로 강제로 표시하도록 했습니다.😄

/* PC 화면(981px 이상)에서 CSS Grid를 활용한 4열 배치 */
@media (min-width: 981px) {
	/* 기존 레이아웃 초기화 및 Grid 적용 */
	.et_pb_portfolio_items_wrapper .et_grid_module {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important; /* 정확히 4등분 */
		grid-gap: 3% !important; /* 항목 간의 여백(Gap) */
	}
	
	/* Divi의 기본 마진, 위치 속성 등 충돌 방지 초기화 */
	.et_pb_portfolio_items_wrapper .et_grid_module .et_pb_portfolio_item {
		width: 100% !important;
		margin: 0 !important;
		position: static !important;
		display: block !important;
	}
	
	/* 필터링 시 부드러운 전환을 위해 불필요한 clear 제거 */
	.et_pb_portfolio_items_wrapper .et_grid_module .et_pb_portfolio_item.first_in_row,
	.et_pb_portfolio_items_wrapper .et_grid_module .et_pb_portfolio_item.last_in_row {
		clear: none !important;
	}
  
  .et_pb_filterable_portfolio .et_pb_portofolio_pagination {
    margin-top: 80px !important;
  }
}

/* 태블릿 화면(768px ~ 980px)에서 2열 배치 (선택 사항) */
@media (min-width: 768px) and (max-width: 980px) {
	.et_pb_portfolio_items_wrapper .et_grid_module {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		grid-gap: 4% !important;
	}
	
	.et_pb_portfolio_items_wrapper .et_grid_module .et_pb_portfolio_item {
		width: 100% !important;
		margin: 0 !important;
		position: static !important;
		display: block !important;
	}
  
    .et_pb_filterable_portfolio .et_pb_portofolio_pagination {
    margin-top: 50px !important;
  }
}

PC에서 4열, 태블릿에서 2열, 모바일에서 1열로 표시됩니다.

위의 코드를 챗GPT나 제미나이 등 AI에 입력하여 더 세련되게 스타일을 변경해 달라고 요청할 수 있을 것입니다. 아래에서 포트폴리오 레이아웃을 확인할 수 있습니다.😊

유용한 워드프레스 테마 & 플러그인 - 워드프레스 포럼

참고

https://avada.tistory.com/3793

워드프레스 Divi 테마용 펫 그루밍(Pet Grooming) 스타터 사이트 공개

https://avada.tistory.com/3587

워드프레스 베스트셀링 아바다 vs. Divi 테마 비교

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교