워드프레스 GeneratePress 테마 사이드바 색상 설정하기

2021. 6. 9. 17:39 | 댓글 2

GeneratePress 테마는 속도가 빠른 것으로 평가받고 있는 워드프레스 테마 중 하나로, 심플한 사이트나 수익형 블로그 운영 시에 많이 사용되고 있습니다. 제 메인 워드프레스 블로그도 이 테마로 만들어졌습니다. GeneratePress 테마 사이드바 색상(배경색, 글자색)은 CSS로 설정하거나 테마 옵션(사용자 정의하기)에서 설정이 가능합니다.

워드프레스 GeneratePress 테마 사이드바 색상 설정하기

GeneratePress 테마의 사이드바 배경색과 글자색 등을 설정하는 방법으로 크게 두 가지가 있습니다.

  1. CSS로 설정하기
  2. 사용자 정의하기에서 설정하기

유료 버전(GP Premium)을 사용하는 경우 외모 > GeneratePress에서 Colors 모듈을 활성화하면 사용자 정의하기 내에서 다양한 요소의 컬러를 설정할 수 있게 됩니다.

워드프레스 GeneratePress 테마 사이드바 색상 설정하기

Colors 모듈을 활성화했다면 외모 > 사용자 정의하기 > Colors > Sidebar Widgets으로 이동하여 사이드바 위젯과 관련된 컬러를 지정할 수 있습니다.

무료 버전에서는 CSS로도 설정이 가능합니다. 예를 들어, 다음과 같은 CSS 코드를 시도해볼 수 있습니다.

.sidebar .widget {
    background-color: #ffffff;
}

Marketer 데모에서 사이드바의 첫 번째 위젯 배경색과 글자색 변경하기

GeneratePress 유료 버전에서는 이 글 작성 시점 기준으로 약 53개의 데모를 사용할 수 있습니다. 미리 만들어진 사이트를 로드하려면 외모 > GeneratePress > Modules 탭에서 Site Library 모듈을 활성화해야 합니다.

워드프레스 GeneratePress 테마 사이드바 색상 설정하기 - 제너레이트프레스 테마 사이트라이브러리

현재 구텐베르크용 데모와 Elementor 페이지 빌더Beaver Builder용 데모가 제공됩니다.

Marketer 데모를 로드하면 사이드바의 첫 번째 위젯이 특성 위젯(Featured Widget)이 되어 배경색과 글자색이 다른 위젯과는 다르게 표시됩니다.

다른 사이드바 위젯의 배경색은 흰색이지만 첫 번째 배경색은 하늘색 계열이고 글자색은 흰색입니다. 이 위젯을 삭제하고 다른 위젯(예: 검색 위젯)으로 대체하여도 마찬가지로 배경색이 다른 위젯과 다르게 표시됩니다.

첫 번째 위젯의 배경색과 글자색을 다른 위젯들과 동일하게 표시되도록 하고 싶은 경우에는 Marketer 데모를 로드하면서 추가된 CSS 코드를 제거하면 됩니다.

외모 > 사용자 정의하기 > 추가 CSS로 이동합니다.

위의 그림에 표시된 CSS 부분을 삭제하거나 배경색(background-color)과 글자색(color)을 변경할 수 있습니다.

/* Featured widget */
.sidebar .widget:first-child,
.sidebar .widget:first-child .widget-title{
	background-color: #83b0de;
	color: #fff;
}

상기 CSS 코드를 삭제하면 첫 번째 위젯도 다른 위젯들과 동일한 배경색과 글자색으로 표시될 것입니다.

마치며

이상으로 워드프레스 제너레이트프레스 테마에서 사이드바 색상을 설정하는 방법에 대하여 살펴보았습니다. 유료 버전을 사용하는 경우에는 Colors 모듈을 통해 다양한 요소의 컬러 설정이 가능합니다. Colors 모듈에서 제어할 수 있는 요소나 무료 버전에서는 CSS 코드를 사용하여 색상 등의 스타일을 지정할 수 있습니다.

참고

https://avada.tistory.com/2155

 

빠른 워드프레스 블로그용 테마 - GeneratePress

워드프레스에는 정말로 많은 무료 및 유료 테마가 있기 때문에 사용 목적에 따라, 개인 취향에 따라 마음에 드는 것을 선택하여 사용할 수 있습니다. 블로그를 운영하는 경우 GeneratePress와 같은

avada.tistory.com

https://avada.tistory.com/2208

 

돈을 버는 마인드: '나는 자는 동안에도 돈을 번다'

최근 지인이 블로그를 운영하고 수익을 내고 싶다며 어떻게 해야 하는지 제게 물어왔습니다. 블로그에 대해 전혀 모르는 분이라 어떤 식으로 설명을 해야 할지 난감하지 않을 수 없었습니다. 먼

avada.tistory.com

https://avada.tistory.com/2083

 

워드프레스 GeneratePress 테마 Copyright 문구 변경하기

워드프레스 유료 테마에서는 푸터에 표시되는 Copyright 문구를 변경할 수 있는 옵션을 보통 제공하지만, 무료 테마에서는 대체로 그런 옵션이 제공되지 않습니다. GeneratePress 테마에서도 프리미엄

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    사이드바 색상을 설정힐수 있군요^^

  2. thumbnail
    열매맺는나무

    generate press도 여러가지 데모타입이 있었군요. 신경도 안 썼던 것 같아요.
    다음에 사용하게 되면 한번 들여다 봐야겠습니다.