Divi에서 의사 요소 전후를 사용하여 독특한 디자인을 만드는 방법
게시 됨: 2019-04-14웹 디자이너로서 우리는 항상 우리가 만드는 웹사이트에 개성을 더할 수 있는 새로운 방법을 찾고 있습니다. Divi는 독특한 레이아웃을 생성할 수 있는 무한한 기회를 제공하지만 디자인을 하나로 통합하기 위해 포함할 수 있는 추가 사항은 항상 거의 없습니다. 여기에서 CSS 의사 요소가 매우 유용합니다.
CSS 의사 요소란 무엇입니까?
간단히 말해서 CSS 의사 요소를 사용하여 요소의 특정 부분에 스타일을 지정할 수 있습니다. 서로 다른 작업을 수행하는 5가지 유형의 의사 요소가 있습니다. 이 포스트의 목적을 위해 우리는 ::before와 ::after를 살펴볼 것입니다.
이 두 의사 요소는 요소의 내용 앞이나 뒤에 무언가를 삽입하는 데 사용됩니다. 이것은 기존 이미지, 텍스트 및 기타 모든 것에 시각적 요소를 추가하는 데 사용할 수 있기 때문에 특히 유용합니다!
그렇다면 이러한 유사 요소를 사용하는 이유는 무엇입니까? 이전과 이후는 더 많은 요소나 모듈을 추가할 필요 없이 디자인 가능성을 여는 데 적합합니다. 마찬가지로 html 템플릿이나 핵심 테마 파일을 건드릴 필요 없이 추가 요소를 추가하는 데 유용합니다.
Divi에서 전후 요소를 어떻게 사용합니까?
지금까지 이 모든 것이 약간 혼란스럽게 들린다면 걱정하지 마십시오! CSS 코드를 처음부터 작성할 때 ::before 및 ::after를 사용하면 다음과 같이 보일 것입니다.
"text-example" 클래스가 있는 텍스트 줄이 있다고 상상해 보십시오. 이 줄의 스타일을 지정하고 사용자 지정하는 CSS는 다음과 같습니다.
.text-example {*This is where you add the styles*}이제 ::before 또는 ::after 요소를 추가하고 스타일을 지정하려는 경우 CSS는 다음과 같습니다.
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}다행히 Divi는 훨씬 적은 번거로움으로 ::before 및 ::after 의사 요소에 쉽게 액세스할 수 있습니다. 사실, 사용자 정의 CSS 코드를 추가하기 위해 모듈에 대해 "고급" 탭을 열어 본 적이 있다면 우리가 참조하는 영역을 보았을 것입니다.
이 상자는 기존 Divi 모듈 전후에 콘텐츠를 추가하고 사용자 정의할 수 있는 빠른 단축키를 제공하며 이를 활용하여 정말 유연하고 흥미로운 디자인을 만들 수 있습니다.
엿보기
이것이 이 튜토리얼에서 만들 것입니다:
실시예 1
실시예 2
실시예 3
시작하기
이 튜토리얼에서는 Divi 테마 사본과 백지만 있으면 됩니다. 먼저 새 페이지를 만들고 페이지 제목을 추가한 후 비주얼 빌더를 클릭합니다.
이제 시작할 준비가 되었습니다!
예제 1: Pseudo Elements를 사용하여 번호가 매겨진 광고 모듈
광고 문구는 아마도 가장 유연한 Divi 모듈 중 하나일 것입니다. 이 경우 의사 요소를 사용하여 "작동 방식" 섹션을 단계별로 만들기 위해 각 광고 앞에 숫자를 추가합니다. 또한 프로세스를 나타내기 위해 오른쪽에 화살표 모양을 추가합니다.
우리가 만들 것:
이 디자인은 모든 광고 문구 디자인에서 작동하지만 웹 에이전시 레이아웃에서 광고 문구 섹션을 차용했습니다. 이를 시작점으로 사용하려면 새 페이지를 만들고 프런트 엔드 빌더에 액세스하여 웹 에이전시 랜딩 페이지에 액세스할 수 있습니다.
페이지가 로드되면 미리 만들어진 레이아웃, 저장된 레이아웃 중 하나를 사용하거나 처음부터 빌드할 수 있는 옵션이 있습니다. 미리 만들어진 레이아웃을 선택하고 검색 창을 사용하여 "웹 에이전시" 레이아웃을 찾습니다. 이 튜토리얼의 안내문 섹션은 방문 페이지에서 찾을 수 있습니다.
일단 로드되면 미리 만들어진 레이아웃과 예제 사이의 유일한 차이점은 각 광고 문구의 배경, 제목 및 텍스트 글꼴 색상을 변경하고 약간의 패딩을 추가했다는 것입니다.
하나의 광고 문구에서 이러한 설정을 변경한 후에는 모듈을 마우스 오른쪽 버튼으로 클릭하고 "스타일 확장"을 사용하여 다른 세 가지에 적용할 수 있습니다.
이제 우리가 원하는 대로 보이도록 4개의 블러브 모듈을 사용자 정의했으므로 번호가 매겨진 요소를 생성하는 코드를 추가할 차례입니다. 그러나 이 디자인이 작동하려면 먼저 기본 요소 사용자 정의 CSS 상자에 한 줄의 CSS를 추가해야 합니다.
overflow: visible;
이렇게 하면 다음 단계에서 만드는 모든 요소가 블러브 모듈의 가장자리와 겹치는 모든 위치에서 볼 수 있습니다.
이 작업을 완료하면 모듈 옵션을 열고 "고급 탭"으로 이동합니다. "이전" 상자에 다음 CSS 스니펫을 추가합니다.
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
이 코드 조각을 추가하면 블러브 모듈의 왼쪽 상단에 숫자가 표시되는 것을 볼 수 있습니다. "left:" 및 "top:" 줄을 변경하여 숫자의 위치를 수정하거나 이 CSS 스니펫 내에서 숫자의 색상과 글꼴 크기를 변경할 수 있습니다.
첫 번째 모듈에 대해 이 작업을 완료했으면 3개의 새로운 설명 모듈로 이동하여 "content:" 줄을 다음과 같이 변경합니다.
내용: '2.';
내용: '3.';
…등등.
이제 숫자를 정렬했으므로 화살표 모양을 만들기 위해 약간의 CSS를 추가해야 합니다.
각 모듈을 열고 Custom CSS 영역 내의 After 상자에 다음을 입력합니다.
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
이제 4개의 광고 문구가 다음과 같아야 합니다.
예 2. 기존 모듈에 고유한 모양 추가
이 디자인은 각 텍스트 모듈 내의 ::before 및 ::after 사용자 정의 CSS 상자에 모두 추가되는 간단하지만 효과적인 작은 코드 조각에 의존합니다.
여기에서 의사 요소를 사용하는 장점은 페이지에 추가 요소나 모듈을 추가할 필요 없이 고유한 모양과 개체를 기존 모듈에 통합할 수 있다는 것입니다. 이러한 유사 요소는 기존 모듈에 포함되어 있기 때문에 디자인에 추가 공간을 추가하지 않고 모든 장치에서 멋지게 보입니다.
우리가 만들 것:
초기 레이아웃을 생성하려면 기본 너비로 설정된 3열 행이 있는 일반 섹션을 추가해야 합니다. 이 작업을 완료했으면 새 열 중 하나에 텍스트 모듈을 추가합니다.
다시 말하지만, 이 텍스트 모듈의 스타일을 원하는 대로 지정할 수 있지만 따라하는 경우 이 디자인을 달성하기 위한 단계는 다음과 같습니다.
텍스트 모듈 옵션을 열고 필요에 따라 텍스트 콘텐츠와 배경 이미지 또는 배경 색상을 추가합니다. 상단에 투명한 그라디언트가 있는 일반 배경 이미지를 사용했습니다.
다음으로 다음 설계 옵션을 구성합니다.
1. 상단 패딩: 120px & 하단 패딩: 120px
2.텍스트 정렬: 가운데 및 텍스트 색상: #ffffff
3. 제목 정렬: 가운데 및 제목 색상: #f5ee5d
이제 첫 번째 텍스트 모듈에 대한 모든 시각적 측면이 준비되었으므로 CSS를 추가하여 마법 같은 일이 일어나도록 할 차례입니다. 텍스트 모듈의 고급 탭에서 "이전" 상자에 다음 코드를 추가합니다.
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
그런 다음 "이후" 상자에 다음 코드를 추가합니다.
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
이 코드 조각을 모듈에 추가하면 멋진 새 모양이 추가된 것을 볼 수 있습니다.
이 CSS가 무엇을 하는지 궁금하다면 실제로는 매우 간단합니다. 우리가 하고 있는 일은 텍스트 모듈의 위쪽과 왼쪽(아래쪽과 오른쪽)에서 20px 떨어진 위치에 있는 투명한 사각형을 만드는 것뿐입니다. 그런 다음 이 사각형에 두 개의 테두리를 추가하여 화살표 효과를 만듭니다.
이 첫 번째 텍스트 모듈의 모양이 마음에 들면 복사하여 붙여넣으면 다른 열을 채우고 텍스트 내용, 배경 및 스타일을 적절하게 변경합니다.
이 방법의 보너스는 약간의 사용자 지정만 있으면 거의 모든 Divi 모듈에서 작동한다는 것입니다. 더 화려하게 만들고 싶다면 CSS를 추가하여 ::before 및 ::after 요소를 더 회전, 기울이고 사용자 정의하십시오. 즐거운 시간 보내세요!
예 3. 탭 제목에 아이콘 및 설명 추가
이 디자인 내에서 기존 콘텐츠 앞에 이미지 아이콘을 추가하고 아래에 작은 텍스트 설명을 추가하는 기능을 활용할 것입니다. 이것은 일반적으로 할 수 있는 것보다 조금 더 Divi 탭 모듈을 사용자 정의하는 데 적합합니다.
참고 – CSS를 통해 콘텐츠를 추가하는 것이 디자인에는 훌륭하지만 검색 엔진에서 쉽게 인덱싱되지 않습니다(Google은 실제로 CSS 및 Javascript 콘텐츠를 인덱싱하지만 훨씬 더 오래 걸리고 현재로서는 신뢰할 수 없습니다. Bing 및 DuckDuckGo와 같은 검색 엔진은 이 콘텐츠를 전혀 색인화하지 않음). 이러한 이유로 콘텐츠는 최소화되어야 하며 순위 잠재력에 영향을 미치기 위해 콘텐츠에 의존해서는 안 됩니다.
우리가 만들 것:
우선 표준 섹션과 1열 행을 추가한 다음 Divi 탭 모듈 자체를 추가해야 합니다. 다음 단계에서 스타일을 처리할 것이기 때문에 탭 모듈 내에서 각 탭에 제목과 콘텐츠를 추가하기만 하면 됩니다.
콘텐츠가 준비되면 모듈의 ::before 요소에 콘텐츠를 추가하기 시작해야 합니다. 위에서 따온 방법을 사용하여 특정 탭에 사용자 정의 CSS를 추가할 수 없기 때문에 이를 약간 다르게 수행해야 합니다.
탭 모듈 옵션을 열고 고급 탭 내에서 모듈에 "fancy-tabs" 클래스를 지정합니다.
이 CSS 클래스를 추가했으면 약간의 준비가 필요합니다. 탭 제목에 아이콘이나 이미지를 추가하려면 분명히 WordPress에 추가해야 합니다. WordPress 대시보드의 미디어 탭으로 이동하여 평소와 같이 선택한 아이콘을 업로드합니다.
이미지가 업로드되면 각 이미지를 클릭하고 WordPress에서 생성한 URL을 복사해야 합니다. 각 이미지를 살펴보고 이 URL을 복사하여 문서나 선택한 메모 애플리케이션에 붙여넣습니다.
선택한 이미지의 URL을 사용하여 WordPress 대시보드의 Divi 메뉴에서 Divi 테마 옵션으로 이동합니다.
이 페이지 하단에 사용자 정의 CSS를 추가할 수 있는 상자가 표시됩니다. 이 상자 안에 CSS 코드를 붙여넣을 것입니다.
다음 스니펫은 각 탭 제목 위에 이미지를 추가합니다. 이 스니펫을 사용자 정의 CSS 상자에 복사하여 붙여넣고 별표(예: *이것을 첫 번째 이미지의 URL로 교체*) 사이(및 포함) 사이의 콘텐츠를 이전에 기록해 둔 URL로 교체합니다.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
탭 모듈이 켜져 있는 페이지로 돌아가면 이제 각 제목 위에 이미지가 추가된 것을 볼 수 있습니다. 성공입니다!
그렇다면 설명을 추가하는 것은 어떨까요? 다행히도 이것은 매우 간단합니다. 사용자 정의 CSS 상자에 방금 복사한 코드 바로 아래에 다음을 붙여넣습니다.
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
이전 이미지와 마찬가지로 "설명입니다"를 자신의 콘텐츠로 바꿔야 합니다. 탭 모듈이 있는 페이지로 돌아가면 멋진 설명도 볼 수 있습니다!
마지막으로 위에 표시된 완전한 디자인을 달성하기 위해 CSS를 조금 더 적용하면 됩니다. 다시, 다음 스니펫을 동일한 사용자 정의 CSS 상자에 복사합니다.
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
이 코드는 탭 텍스트와 이미지를 중앙에 배치하고 전체 모듈을 덮도록 탭 너비를 늘립니다.
또한 모든 장치에서 탭이 보기 좋게 표시되도록 일부 CSS를 추가했습니다. 모바일에서 탭을 전체 너비와 스택으로 사용하지 않으려면 뒤로 돌아가서 미디어 쿼리에서 원래 CSS 코드를 둘러싸야 합니다. 즉, 태블릿 크기 이상의 장치에서는 설명과 아이콘을 추가하지만 더 작은 장치에서는 Divi 기본 스타일로 되돌립니다.
이렇게 하려면 아래 수정된 CSS 코드를 복사하여 Divi 테마 옵션 패널의 사용자 정의 CSS 영역에 붙여넣습니다.
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
더 많은 탭 추가
이 예에서 우리는 2개의 다른 탭을 포함하는 탭 모듈을 만들었습니다. 그러나 실제로는 때때로 이보다 더 많은 탭이 필요합니다. 2개 이상의 탭을 생성하려는 위치에 있는 경우 방금 추가한 코드를 수정해야 합니다.
스니펫에서 볼 수 있듯이 Divi는 자동으로 각 탭 제목에 클래스를 할당합니다. 첫 번째 항목은 0(.et_pb_tab_0)으로 시작하여 매번 1씩 증가합니다(.et_pb_tab_1, .et_pb_tab_2 등). 우리는 이미 처음 두 개의 탭을 처리했으므로 더 추가할 때 모든 새 탭에 대한 코드 섹션을 복사하여 붙여넣을 수 있습니다.
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
클래스의 숫자(.et_pb_tab_0)를 2, 3, 4 등으로 변경합니다. 설명에 대해서도 동일한 작업을 수행해야 합니다.
마지막으로 수정해야 할 것은 CSS를 한 줄 더 조정하는 것입니다. 탭 수를 100으로 나눕니다. 이 수를 기록하고 사용자 정의 CSS에서 다음 섹션으로 이동합니다.
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
그리고 50%를 당신의 답으로 바꾸세요. 이렇게 하면 탭이 모듈 너비에 걸쳐 균등하게 배치됩니다.
예를 들어 세 번째 탭을 만드는 경우 필요한 추가 CSS 코드는 다음과 같습니다.
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
닫는 중
CSS ::before 및 ::after 요소를 활용하여 새로운 디자인 가능성을 만드는 세 가지 훌륭한 방법이 있습니다. 이 가이드가 미래의 창작물에서 의사 요소를 사용하는 방법을 탐구하는 데 영감을 주기를 바랍니다. 기회는 정말 무궁무진합니다!