본문으로 바로가기
  1. Home
  2. 워드프레스/테마
  3. 워드프레스 Jupiter 테마: 사이드바 너비 변경 방법

워드프레스 Jupiter 테마: 사이드바 너비 변경 방법

· 댓글 2

인기 워드프레스 테마 중 하나인 Jupiter 테마는 PC에서 사이드바 폭이 기본적으로 25%로 설정되어 있습니다. 사용자 정의하기에서 사이드바 너비를 조정하는 옵션을 찾아보니 해당 기능이 없는 것 같습니다. 저는 간단한 CSS 코드를 넣어 사이드바 폭을 30%로 늘렸습니다.

목차

    워드프레스 Jupiter 테마에서 사이드바 너비 변경 방법

    주피터 테마는 WPBakery Page Builder ('비주얼 컴포저')를 기본 페이지 빌더로 이용하다 Jupiter X로 업데이트되면서 기본 페이지 빌더를 Elementor로 변경했습니다.

    주피터가 엘리멘터를 처음 도입할 때에는 엘리멘터 요소가 부족했지만, 최근 몇 가지 요소가 추가되어 기능이 많이 향상된 것 같습니다.

    주피터는 최적화가 잘 되어 속도가 빠른 편이며 꾸준히 Top 10 베스트셀링 테마 리스트에 이름을 올리고 있습니다. Jupiter는 약 135,000개 판매를 기록하고 있습니다.

    Jupiter X에서 컨테이너 너비는 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Site Settings에서 조정할 수 있습니다.

    저는 살펴보니 Container Width가 기본적으로 1180px로 설정되어 있네요. 사이드바 폭을 조정하는 옵션이 있는지 살펴보았지만 보이지가 않네요. 제가 못 찾았을 수도 있지만, 전체적으로 그리 자세한 테마 옵션을 제공하지는 않는 것 같습니다.

    사이드바 설정은 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Layout에서 지정할 수 있습니다.

     

    Layout에서 No Sidebar (사이드바 없음), Single Sidebar Left (왼쪽 사이드바), Single Sidebar Right (오른쪽 사이드바), Double Sidebar Left (왼쪽 사이드바 2개), Double Sidebar Right (오른쪽 사이드바 2개), Opposing Sidebars (아마 좌우 사이드바) 중에서 선택이 가능합니다.

    보통 Single Sidebar Right(오른쪽에 1개 사이드바 배치)가 무난한 것 같습니다.

    오른쪽에 사이드바를 배치하는 경우 다음 CSS 코드를 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가하여 사이드바 폭을 조정할 수 있습니다.

    /* 워드프레스 주피터 테마 사이드바 너비 변경 */
    /* Change the sidebar width of Jupiter X WordPress theme */
    @media screen and (min-width: 992px) {
    .col-lg-9 {
        flex: 0 0 70%;
        max-width: 70%;
    }
    
    .col-lg-3 {
        flex: 0 0 30%;
        max-width: 30%;
    }
    }

    위와 같은 코드를 적용하면 해상도 992px 이상의 기기에서 왼쪽 콘텐츠 영역은 70%, 오른쪽 사이드바 영역은 30%가 할당됩니다. 숫자를 적절히 변경하여 원하는 너비로 설정하시기 바랍니다.

    가볍고 빠른 워드프레스 테마를 원하는 경우...

    참고로 Jupiter X는 속도가 비교적 빠른 편이며, 심플하면서 빠른 워드프레스 테마를 원하는 경우 GeneratePress나 Astra 테마를 사용해볼 수 있습니다.

     

    블로그 리뉴얼: GeneratePress 테마로 변경 - 워드프레스 기본

    이 워드프레스 사이트에 인기 매거진 테마인 뉴스페이퍼를 약 10개월 정도 사용하다 지난 주에 가볍고 빠른 테마로 평가되는 GeneratePress 테마로 변경하여 블로그 리뉴얼을 해보았습니다. GeneratePress는 가볍고 빠른 것이 특징이며 커스텀하기에 좋은 테마 같습니다.

    www.thewordcracker.com

    참고:

     

    워드프레스 GeneratePress 테마 블로그 설정하기

    워드프레스 GeneratePress 테마는 가볍고 빠른 테마 중 하나로, 사이트 속도가 느린 경우 고려해볼 수 있습니다. 이 글에서는 GP 테마의 블로그 레이아웃을 설정하는 방법에 대해 자세히 살펴봅니다. 심플한 블로그를 운영하려는 경우 GP 무료 버전을 사용해볼 수 있습니다.

    www.thewordcracker.com

     

     

    티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

    이 티스토리 블로그에는 현재 Book Club (북클럽)이라는 가장 최근에 공개된 스킨이 사용되고 있습니다. 현재 사이드바의 크기를 조금 조정했고, IE를 제외하고는 사이드바가 마우스를 스크롤할 때 함께 따라 내려..

    avada.tistory.com

     

    SNS 공유하기
    💬 댓글 2
    logo

    Jupiter 테마의 사이드바 너비 변경 방법을 소개해주셨군요.
    편안한 하루 되시기 바랍니다.

    이름을 저장합니다.

    가성비가 뛰어난 웹호스팅

    저렴하고 가성비 좋은 웹호스팅

    최근 댓글

    블로그를 방문해주셔서 감사⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 광고주 URL 차단기능이 있었⋯ 💬똘켓 방문자들로부터 문의를 받으⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 사이트에서 방문자들로부터⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 워드프레스 엘리멘터 문의폼⋯ 💬空空(공공)

    워드프레스 시작 가이드

    워드프레스 시작하기