WordPress에 사용자 정의 CSS 클래스를 추가하는 방법 (3 가지 쉬운 방법)

CSS를 아는 사람들은 CSS 클래스가 전체 사이트를 스타일링 할 때 엄청난 타임즈 베이비라는 것을 알고 있습니다. 그러나 코드를 코딩하지 않으면 얼마나 강력한 지 깨닫지 못했을 것입니다. 오늘, 우리는 그것을 바꿉니다.

이 게시물에서는 한 줄의 코드를 작성한 적이없는 경우에도 WordPress에 CSS 클래스를 추가하는 3 가지 쉬운 방법을 보여 드리겠습니다. 또한 강력한 WordPress 웹 사이트 빌더 Divi를 사용하여 No-Code 방식을 수행하는 방법을 배웁니다.

CSS 수업은 무엇이며 어떻게 도움이됩니까?

CSS ( 계단식 스타일 시트 )는 웹 사이트에서 색상, 간격 및 글꼴과 같은 요소의 디자인 및 모양을 제어하는 ​​코드입니다. CSS 클래스는 여러 요소에 할당 할 수있는 재사용 가능한 레이블이므로 각 요소에 대해 동일한 프로세스를 반복하는 대신 한 번에 모두 스타일을 지정할 수 있습니다.

CSS 클래스가 없으면 각 요소를 수동으로 스타일링해야합니다. 특히 여러 페이지가있는 더 큰 WordPress 사이트에서 작업 할 때 시간이 소요됩니다. 그러나 종종 그렇듯이 대부분의 웹 사이트에는 가격 책정 페이지의 버튼 또는 다른 섹션의 기능 상자와 같은 반복 요소 및 주제가 포함됩니다.

이러한 요소는 백엔드에서 동일한 클래스 그룹을 공유하기 때문에 비슷하게 보입니다. 따라서 공통 클래스 그룹의 한 요소에 CSS를 적용하면 모든 요소가 동일한 스타일 설정을 자동으로 상속합니다. 프론트 엔드에서는 시각적으로 비슷한 외관을 제공합니다. CSS 클래스는 시간을 절약하고 디자인을 일관성있게 유지하며 향후 편집을보다 쉽게 ​​만들 수 있습니다. 각 요소를 하나씩 변경하는 대신 클래스를 업데이트하면됩니다.

WordPress에 CSS 클래스를 추가하는 방법

CSS 사용 능력에 따라 여러 가지 방법으로 WordPress 웹 사이트에 CSS 클래스를 추가 할 수 있습니다. WordPress Customizer와 Simple Custom CSS와 같은 플러그인을 사용하여 수행하는 방법을 보여 드리지만이 두 방법 모두 CSS를 작성해야합니다.

No-Code 메소드에 더 관심이 있으시면 세 번째 메소드로 건너 뜁니다.

1. WordPress Customizer 사용

WordPress 페이지에 여러 버튼이 있다고 가정 해 봅시다. 그들은 현재 평범 해 보이고, 당신은 그들이 눈에 띄기를 원하기 때문에, 당신은 네이비 블루 테두리와 스카이 블루 배경을 추가 할 계획입니다.

각 버튼에 CSS를 추가하면 프로세스를 8 번 반복해야하므로 상당한 시간이 걸립니다. 그러나 CSS 클래스를 사용하면 각 버튼에 동일한 CSS 클래스를 할당하고 CSS를 한 번만 작성할 수 있습니다. CSS 클래스 ' Custom-A' 의 이름을 지정합시다. WordPress Page 편집기 창에서 버튼> 설정 (기어 아이콘)을 클릭하십시오.> 고급 옵션을 전환하십시오. 이제 추가 CSS 클래스에 클래스 이름을 작성하십시오.

각 버튼의 프로세스를 반복하고 저장하십시오. 이 버튼에 스타일링 코드를 추가하려면 WordPress Customizer> 추가 CSS로 이동해야합니다.

국경 해군 파란색과 배경 하늘색을 만들려면 CSS를 여기에 붙여 넣습니다.

우리가 선택한 CSS 클래스 이름은 코드의 스타일링 규칙에 앞서 있습니다. 이를 통해 코드 가이 클래스 이름이 지정된 모든 요소에 적용되는지 확인합니다.

게시 와 페이지를 미리보기 후에는 스타일 버튼이 다음과 같습니다.

CSS를 알고 있다면 간단합니다.

WordPress Customizer는 사소한 변경에도 좋습니다. 그러나 문제는 CSS가 테마와 관련이 있다는 것을 첨가 한 것입니다. 이는 테마를 전환하면 손실 될 수 있음을 의미합니다. 따라서 웹 사이트에서 다른 테마를 테스트하는 것이 마음에 든 경우 다른 테마로 전환 할 때마다 코드를 업데이트해야합니다. 이 경우 CSS 클래스 스타일을 안전하게 유지하기 위해 플러그인을 설치하는 것이 훨씬 더 나은 옵션입니다.

2. 간단한 커스텀 CSS와 같은 플러그인 사용

간단한 Custom CSS 플러그인을 설치하면 Custom CSS 옵션이 모양 섹션에 추가됩니다. 이제 CSS 코드를 추가하고 변경 사항을 반영하기 위해 사용자 정의 CSS를 업데이트하면 됩니다. (공통 스타일을 갖고 싶은 요소에 클래스 이름을 할당해야합니다.)

이와 같은 플러그인은 나중에 테마를 변경하더라도 사용자 정의 CSS를 그대로 유지하십시오. 또한 WordPress Customizer보다 조금 더 구성되어 있습니다. 그러나 전체 웹 사이트의 여러 요소 그룹에 맞춤 CSS를 저장할 때 쉽게 어수선 할 수 있으므로 두 방법 모두 확장 할 수 없습니다.

그렇기 때문에 현장 전체 스타일의 경우 권장되는 접근 방식은 어린이 테마를 만들고 스타일 시트를 업데이트하는 것입니다. 이렇게하면 테마 업데이트 후에도 모든 변경 사항이 자녀 테마에서 안전하게 유지됩니다.

효과적이지만 (코더가 권장),이 방법은 여전히 ​​수동 작업이 필요하기 때문에 빠르게 기술적이 될 수 있습니다. 각 요소 (또는 CSS 클래스를 사용하는 여러 요소)를 스타일링해야하며 시간이 많이 걸리지 않고 초보자 친화적이지 않습니다. 또한 클래스 이름을 추적해야합니다. 특정 버튼 클래스를 편집하고 싶을 때 끝없는 코드 문자열을 스크롤하고 있다고 상상해보십시오.

그렇다면 한 줄의 코드를 작성하지 않고 스타일을 확장 할 수 있다면 어떨까요? 그곳에서 Divi와 같은 현대적인 드래그 앤 드롭 페이지 빌더가 들어 오는 곳입니다.

3. Divi와 같은 코드없는 웹 사이트 빌더 사용

Divi와 같은 최신 No-Code 웹 사이트 빌더를 사용하는 것의 장점은 사이트 전체에 일관된 스타일을 적용하기 위해 CSS (또는 모든 코드)를 작성할 필요가 없다는 것입니다. 시각적 인터페이스를 사용하면 디자인 설정을 선택하고 사용자 정의하여 섹션, 행, 열 및 모듈에 스타일을 할당 할 수 있습니다.

Divi에서는 CSS 클래스 대신 사전 설정을 만듭니다. Divi는 수년 동안 버튼, blurb 및 이미지와 같은 모듈에 대한 스타일을 저장하고 재사용 할 수있는 모듈 기반 사전 설정을 제공했습니다. 그러나 우리는 더 놀라운 그룹의 사전 설정을 시작했습니다.

옵션 그룹 사전 설정 전에 모듈 전체에 사전 설정을 적용 할 수있었습니다. 예를 들어, Blurb Preset은 다른 Blurb에서만 사용할 수 있습니다. 이제 모듈에서 설정을 공유 할 수도 있습니다.

한 번에 하나의 요소를 사용자 정의하는 대신 옵션 그룹 사전 설정을 사용하면 배경, 경계 또는 텍스트 스타일과 같은 공유 설정에 대한 스타일을 저장하고 한 번에 여러 다른 요소에 적용 할 수 있습니다. 예를 들어, 섹션과 열에서 배경색을 사용하는 경우 해당 스타일 설정을 사전 설정으로 저장하고 모든 관련 요소에 적용하여 응집력있는 디자인을 만듭니다.

Divi는 코딩없이 드래그 앤 드롭 기능을 통해 건물 및 저장 스타일을 사전 세트로 단순화하므로 현장 전체 디자인 변경, 특히 비 코더의 경우 더 빠르고 접근하기 쉽습니다.

Divi 5를 다운로드하십시오

아래에서 내가 의미하는 바를 더 자세히 봅시다

Divi의 옵션 그룹 사전 설정은 CSS 클래스를 더 쉽게 추가 할 수 있습니다

Divi의 옵션 그룹 사전 설정은 CSS 클래스의 개념을 취하고 비 코더를 위해 단순화합니다. 클래스를 수동으로 작성하고 할당하는 대신 Divi의 Visual Builder를 사용하여 몇 번의 클릭만으로 다른 요소에 공유 디자인 스타일을 적용 할 수 있습니다.

이러한 사전 설정은 옵션 레벨 에서 작동하므로 여러 요소 유형에서 공유되는 배경색, 경계 또는 간격과 같은 특정 설계 설정을 대상으로합니다. 예를 들어, 섹션의 배경 설정은 열, 행 및 텍스트 요소에도 적용될 수 있습니다.

웹 사이트 디자인을 일관되게 유지하는 더 빠르고 쉽고 직관적 인 방법입니다. 방법은 다음과 같습니다.

• 요소 전체의 재사용 가능한 스타일 : 모든 요소를 ​​수동으로 사용자 정의 할 필요는 없습니다. 옵션 그룹 스타일을 사전 설정으로 저장하고 모든 요소에 적용하십시오.
• 단일 편집을 사용한 글로벌 업데이트 : 사전 설정을 한 번 수정하면 해당 사전 설정을 사용하는 모든 요소가 자동으로 업데이트됩니다. 이를 통해 전체 웹 사이트에서 디자인 조정을 빠르고 효율적으로 만듭니다.
• 다중 사전 설정을 결합하십시오 : 레이어와 다른 사전 설정 (예 : 테두리, 그림자, 텍스트 스타일)을 모든 요소에 혼합하여 처음부터 시작하지 않고도 유연하고 창의적인 디자인 조합을 혼합하십시오.
• 기본 스타일에 대한 기본 사전 설정을 사용자 정의하십시오. 사전 설정을 기본적으로 저장하여 모든 관련 요소에 자동으로 적용하십시오.

옵션 그룹 사전 설정에 대해 자세히 알아보십시오

Divi를 사용하여 코딩없이 WordPress에 CSS 클래스를 추가하는 방법

Divi의 옵션 그룹 사전 설정이 무엇인지 알았으므로 코딩을 알 필요가 없으므로 Divi Builder 내부에서 정확히 작동하는 방식을 보여 드리고자합니다. 배경, 테두리, 박스 샤 두우 등과 같은 옵션 설정에 그룹 사전 설정을 작성, 저장 및 적용하기 위해해야 ​​할 일은 가격 책정 페이지를 사용자 정의하겠습니다.

버튼 배경 변경

페이지 색상과 일치하도록 버튼 배경을 자주색으로 변경하고 싶다고 가정 해 봅시다. 따라서 첫 번째 열 버튼을 사용자 정의하고 설정을 기본 라이트 버튼 사전 설정으로 저장하겠습니다. (UI 설정의 검은 색은 사전 설정을 편집하고 있음을 보여줍니다. 다크 모드를 선택한 경우 반대입니다.)

이제 다른 두 버튼에 동일한 설정을 적용하려면 사전 설정을 기본 표시등으로 간단히 변경하겠습니다.

칼럼의 그림자 변경

모든 열에 상자 그림자를 추가합시다. 첫 번째 열에 상자 그림자를 추가하고 Shadow Box Shadow Preset로 저장하겠습니다.

다른 두 열에 동일한 그림자를 적용하려면 Box Shadow 사전 설정을 그림자 로 변경합니다.

텍스트 사전 설정 수정

H1 및 H2와 같은 텍스트 요소의 스타일을 수정할 수도 있습니다. 다음은 열을 업데이트하는 방법 H3 사전 설정이 작동하는 방법은 다음과 같습니다.

저장 후 가격 페이지가 어떻게 보이는지가 있습니다.

작동 방식을 보여주기 위해 약간의 변경을했지만 가능성을 상상할 수 있습니다. Divi의 옵션 그룹 사전 설정을 사용하면 그룹의 사용자 정의 스타일을 편집하는 것이 버튼 클릭만큼 간단합니다. 그러나 그것은 빙산의 일각 일뿐입니다. 당신도 할 수 있습니다 :

• 옵션 그룹의 기본 사전 설정을 설정하여 제목이나 버튼과 같은 기본 요소가 사이트 전체에서 스타일을 자동으로 상속합니다. 기본 사전 설정이 어떻게 작동하는지 이해하면 이전 방법을 사용하지 않을 것입니다.
• 레이어 옵션 그룹 사전 설정 요소 사전 설정 위에 공유 배경을 적용하고 그림자 또는 테두리 스타일을 쌓아 특정 요소를 돋보이게합니다.

우리는 Divi의 옵션 그룹 사전 설정에 대해 알아야 할 모든 것에 대한 전체 가이드를 작성했습니다. Divi로 클래스 기반 웹 디자인을 단순화하는 방법에 대한 디자인 아이디어와 조언을 얻으려면 전체 기사를 읽으십시오.

옵션 그룹 사전 설정에 대해 자세히 알아보십시오

Divi는 클래스 기반 디자인 시스템의 게임 체인저입니다

Divi의 옵션 그룹 사전 설정은 CSS 클래스의 힘을 모든 사람에게 제공합니다. 솔로를 설계하든 팀과 협력하든, 사전 설정은 워크 플로우 속도를 높이고, 사이트가 성장함에 따라 아름답게 확장하며, 일관된 스타일링을 쉽게 만듭니다. 전통적인 CSS 워크 플로보다 더 빠르고 효율적이며 훨씬 직관적입니다.

오늘 Divi 5부터 시작하십시오

Divi 5는 최대 업데이트 모드입니다. 우리는 옵션 그룹 사전 설정과 마찬가지로 매주 새로운 기능을 출시하고 있습니다. 고급 장치, CSS 디자인 변수 및 웹 사이트 디자인에 접근하는 방식을 변경하는 것이 많습니다.

Divi 5에 대해 자세히 알아보십시오

Divi 5는 Divi Dash, Divi Quick Sites 및 Divi AI와 같은 강력한 도구를 갖춘 강력한 디자인 프레임 워크입니다. 단일 한 줄의 코드를 만지지 않고 맞춤형 전문 웹 사이트를 만들 수 있도록 구축되었습니다. 웹 사이트 디자인의 미래에 테스트 드라이브를 할 준비가 된 것은 아무것도 없습니까?

Divi 5를 다운로드하십시오