Divi 테마는 베스트셀링 테마인 아바다 테마와 비슷한 판매량을 자랑하는 워드프레스 다목적 테마입니다. 네이버 카페에 DivI 테마에서 만든 버튼의 스타일을 변경하는 방법에 대한 질문이 올라와서 Divi 테마의 버튼 모듈의 스타일을 사용자 정의하는 방법에 대하여 간단히 살펴보겠습니다.
워드프레스 기본 편집기인 블록 에디터에서 버튼을 만드는 방법은 다음 글을 참고해보세요.
워드프레스 Divi 테마 버튼 스타일 변경하기
레이아웃 페이지에 사용된 버튼 활용하기
Elegant Themes는 매주 새로운 레이아웃 팩을 공개하고 있습니다. 레이아웃 팩에 포함된 레이아웃 페이지를 로드하여 활용할 수 있습니다.
레이아웃 페이지에는 다양한 버튼 스타일이 적용되어 있습니다. 마음에 드는 레이아웃 팩을 로드하여 해당 버튼을 이용하는 것이 가능합니다.
다음은 최근 추가된 부동산 레이아웃 페이지에 포함된 버튼을 보여줍니다.
별로 이쁘지는 않지만 예시로 로드해보았습니다. 해당 버튼을 복사하여 사용할 수 있습니다.
하지만 버튼 하나 때문에 레이아웃 디자인을 로드하는 것은 그다지 효율적이지는 않은 것 같습니다. 그냥 이런 방법으로 버튼이나 다른 요소들을 활용할 수 있다는 정도로 이해하시기 바랍니다.
버튼 모듈 설정에서 스타일 지정하기
Divi 테마의 Divi Builder에서 버튼 모듈을 추가하였다면 Design 탭에서 다양한 디자인 설정을 할 수 있습니다.
버튼 배경색, 버튼 텍스트 크기 및 컬러, 버튼 테두리 반경(둥글게), 허버 시 버튼 배경색 등 세세한 부분을 설정할 수 있습니다.
박스 음영, 애니메이션 등의 설정도 가능합니다.
세팅을 통해 원하는 모양의 버튼을 만들 수 있습니다.
커스텀 CSS 사용하기
다른 방법으로 사용자 정의 CSS를 사용하여 스타일을 커스텀할 수 있습니다. 이 방법으로 버튼 스타일을 지정하려면 CSS에 대하여 조금 이해해야 합니다. 챗GPT를 이용하여 버튼 스타일을 부탁할 수 있습니다. 마음에 드는 스타일을 제시하지 않을 수 있지만, 원하는 스타일이 나올 때까지 반복적으로 요청할 수 있습니다.
Advanced (고급) 탭의 CSS Class 필드에 CSS 클래스를 지정합니다(예: red-button).
Csutom CSS 섹션에 사용자 정의 CSS 코드를 입력합니다.
예를 들어, CSS Class 필드에 red-button을 입력하고 다음과 같은 CSS 코드를 추가할 수 있습니다.
/* 빨간색 버튼 스타일 */
/* Red Button Style */
.red-button {
background: linear-gradient(135deg, #e74c3c, #c0392b);
padding: 12px 35px;
font-size: 26px;
color: #FFFFFF !important;
border-radius: 50px !important;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.red-button:hover, .red-button:focus {
background: linear-gradient(135deg, #c0392b, #e74c3c);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
padding: 12px 40px !important;
}
페이지를 저장하고 프런트엔드에서 페이지를 방문하면 버튼의 스타일이 다음과 같이 바뀝니다.
원활한 코드 유지보수를 위해 커스텀 CSS 코드는 워드프레스 관리자 페이지 » 디자인 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 추가할 수 있습니다.
다음은 Divi 테마의 버튼 스타일을 변경하는 몇 가지 예시 코드입니다.
예시: 파란색 버튼
/* 파란색 버튼 */
/* Blue Button Style */
.blue-button {
background: linear-gradient(135deg, #3498db, #2980b9);
padding: 12px 35px;
font-size: 26px;
color: #FFFFFF !important;
border-radius: 50px !important;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blue-button:hover, .blue-button:focus {
background: linear-gradient(135deg, #2980b9, #3498db);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
padding: 12px 40px !important;
}
예시: 녹색 버튼
/* 녹색 버튼 스타일 */
/* Green Button Style */
.red-button {
background: linear-gradient(135deg, #e74c3c, #c0392b);
padding: 12px 35px;
font-size: 26px;
color: #FFFFFF !important;
border-radius: 50px !important;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.red-button:hover, .red-button:focus {
background: linear-gradient(135deg, #c0392b, #e74c3c);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
padding: 12px 40px !important;
}
버튼이 마음에 안 들면 ChatGPT에게 원하는 스타일을 주문하면 CSS 코드를 제시해 줄 것입니다.
버튼 텍스트에서 밑줄 제거하기
버튼에 링크가 설정될 경우 버튼 텍스트에 밑줄이 표시될 수 있습니다. 그런 경우 다음과 같은 CSS 코드를 사용하여 밑줄을 제거할 수 있습니다.
/* Divi 테마 버튼 텍스트 밑줄 제거하기 */
/* Remove the underline from the button text in the Divi theme */
.et_pb_button_module_wrapper>a {
text-decoration: none !important;
}
엘리멘터 페이지 빌더에서 제공하는 버튼 요소에도 동일한 방법으로 가능한가요? css를 어떻게 하면 빨리 배울 수 있나요?
엘리멘터에서 버튼을 추가하는 경우에도 CSS 클래스를 지정하고 CSS로 스타일을 변경할 수 있을 것입니다. 원리는 동일하지만 실제 CSS 코드는 다를 수 있습니다. 시간이 될 때 엘리멘터의 버튼 위젯을 사용할 경우 스타일을 CSS로 변경하는 방법에 대하여 살펴보겠습니다.