워드프레스 테마 대부분은 반응형으로 제작되어, 기기 해상도에 맞게 사이트의 레이아웃이 달라집니다. 그러나, 기본 레이아웃을 바꿔서 모바일과 PC 레이아웃을 다르게 설정하는 것도 가능합니다.
예를 들어, 데스크탑에서는 포스트가 3열씩 표시되고, 모바일에서는 1열씩 표시되지만, 모바일에서는 2열씩 표시되게 만들고 싶은 경우나, PC와 모바일에 각각 다른 크기의 이미지를 사용해야 하거나, PC에서만 표시되는 요소도 있을 수 있습니다.
페이지 빌더(예: Elementor Page Builder)를 사용하거나 페이지 빌더가 기본 탑재된 워드프레스 테마(아바다, 엔폴드, Divi 등)를 사용하는 경우 대부분의 페이지 빌더에서 모바일과 PC에서 레이아웃을 다르게 설정하는 옵션이 제공됩니다.
하지만, 페이지 빌더를 사용하지 않는 경우에는 CSS 미디어 쿼리를 사용하여 기기 해상도에 따라 레이아웃을 다르게 설정할 수 있습니다. 이것은 기본 워드프레스 기능으로, CSS 코딩을 약간 익히면 비교적 쉽게 구현이 가능합니다.
CSS 미디어 쿼리 사용해 모바일과 PC 레이아웃 다르게 설정하는 방법
페이지 빌더를 사용하지 않는 경우 CSS 미디어 쿼리를 사용하여 모바일 기기, 태블릿 기기, 데스크탑에서 레이아웃이 다르게 표시되도록 만들 수 있습니다. 하지만, 이 방법을 사용하려면 CSS에 대해 어느 정도 이해해야 합니다. CSS 미디어 쿼리에 대해서는 W3Schools 웹사이트에서 다양한 예제와 함께 상세한 내용을 확인해볼 수 있습니다. 참고할 만한 링크는 다음과 같습니다.
예를 들어, 큰 기기 해상도에서는 4개의 컬럼(열), 중간 기기 해상도에서는 2개의 컬럼(열), 소형 기기 해상도에서는 1개의 컬럼(열)로 표시하고 싶은 경우, W3Schools 예제를 참고해서 다음과 같은 CSS 코드를 만들어 볼 수 있습니다.
/* Create four equal columns that floats next to each other */
/* 서로 붙어 있는 동일 크기의 4개 열 생성 */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
/* 992px 이하 해상도 스크린에서는 4개 열에서 2개 열로 바뀜 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
/* 600px 이하 해상도의 스크린에서는 1개 열로 표시됨 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}아바다 테마 : 모바일 기기와 PC에서 레이아웃 다르게 설정하는 방법
아바다(Avada) 테마는 베스트셀러 테마로, 자체 페이지 빌더인 Fusion Builder를 사용합니다. 워드프레스에는 다양한 페이지 빌더가 있지만, 대부분의 페이지 빌더는 기본적으로 비슷한 사용법을 가지고 있습니다. Fusion Builder에서도 다른 페이지 빌더와 마찬가지로, 요소를 추가한 후 해당 요소를 어떤 기기에서 표시할지 여부를 설정할 수 있습니다. 이를 통해 데스크탑, 태블릿, 모바일에서 디자인을 쉽게 제어할 수 있습니다.
