Facebook Newsroom의 Post Slider처럼 Divi의 Post Slider 모듈을 스타일 지정하는 방법

게시물 슬라이더는 독자에게 다양한 콘텐츠를 제공하기 위한 우아한 솔루션입니다. 강조 표시된 게시물은 카테고리에서 현재까지 다양한 방식으로 구성될 수 있습니다. 오늘의 프로젝트에서는 "Top Stories"라는 게시물 카테고리를 제공하는 Facebook 뉴스룸 블로그 페이지의 예를 살펴보고 있습니다. 게시물 제목과 추천 이미지를 강조하는 매우 매력적인 슬라이더입니다. Divi의 Post Slider 모듈을 사용하여 이 슬라이더의 모양을 다시 만들 것입니다.

전후: Divi 포스트 슬라이더 모듈

아래의 첫 번째 이미지는 기본 설정이 있는 divi post 슬라이더 모듈을 보여주고, 두 번째 이미지는 설정과 일부 사용자 정의 CSS를 약간만 수정하여 만든 수정 사항입니다.

전에

후에

개념 및 영감

언급했듯이 오늘날의 포스트 슬라이더 스타일 모델은 Facebook Newsroom에서 가져온 것입니다. 짐작하셨겠지만 Facebook의 모든 것을 다루는 뉴스 블로그입니다. 우리 대부분은 페이스북을 소셜 미디어의 거물로 알고 있지만 이 블로그를 간단히 살펴보면 시야가 넓어질 것입니다. 지난 분기에 88억 달러의 매출과 12억 3천만 명의 일일 활성 사용자를 보유한 Facebook 뉴스룸 페이지의 블로그 게시물 슬라이더는 오늘의 프로젝트에 적합한 모델을 제공합니다.

디자인 요소 준비

이 디자인을 준비하려면 추천 이미지가 포함된 몇 개의 블로그 게시물이 필요합니다. 게시물의 추천 이미지 설정에 익숙하지 않은 경우 페이지 오른쪽 하단의 게시물 편집 페이지에서 설정을 찾을 수 있습니다.

이 슬라이더 디자인은 각 추천 이미지가 600px x 400px인 경우 가장 잘 작동하지만 정확한 크기는 중요하지 않습니다.

게시물 편집기 페이지 하단에 있는 "발췌" 입력 상자에 각 게시물에 대한 일부 발췌문을 추가할 수도 있습니다. 게시물이 있는 경우 게시물 발췌문을 표시하지만 그렇지 않은 경우 실제 콘텐츠의 일부를 사용합니다.

Divi로 디자인 구현하기

YouTube 채널 구독

팔로우 중이고 게시물 슬라이더를 표시할 페이지 설정이 아직 없는 경우 새 페이지를 만들고 "비주얼 빌더 사용"을 클릭하여 필요한 수정을 시작하십시오.

1 열 구조 행이 있는 일반 섹션을 추가하는 것으로 시작합니다.

그런 다음 행에 Post Slider Module을 추가합니다.

수정 사항은 Visual Builder에서 새 모듈을 추가한 후 기본적으로 있는 "컨텐츠" 설정으로 시작됩니다.

기본 콘텐츠 설정을 다음과 같이 변경합니다.

"게시물 번호"를 원하는 만큼의 게시물로 설정합니다. 이 예에서는 3을 사용하고 있습니다.

그런 다음 "정의된 경우 포스트 발췌 사용"을 예로 설정하고 "자동 발췌 길이"를 180으로 설정합니다.

이제 모듈 설정 모달 상단에 있는 탭을 클릭하여 디자인 설정으로 이동할 준비가 되었습니다.

디자인 설정을 다음과 같이 변경합니다.

"배경 오버레이 색상"을 흰색(#ffffff)으로 변경합니다.

"Dot Nav Custom Color"를 #576d90으로 변경합니다.

"텍스트 색상"을 어둡게 변경하십시오.

이제 "Header Font"를 굵게 만들고 "Header Font Size"를 34px로 설정하고 "Header text Color"를 #3b5998로, "Header Line Height"를 42px로 설정합니다.

이제 "Body Text Color"를 #141924로, "Body Line Height"를 24px로 설정합니다.

이제 "버튼에 사용자 정의 스타일 사용"을 클릭하여 예로 변경하십시오. "Button Text Size"를 16px로, "Button Border width"를 0px로, "Button Hover Text Color"를 #666666으로, "Button Hover Background Color"를 rgba(0,0,0,0)로 변경합니다.

이제 모듈 설정 모달 상단의 "고급" 탭을 클릭합니다. CSS ID 아래의 텍스트 입력에 "fb-post-slider"를 추가합니다. 이를 통해 페이지에 표시될 수 있는 다른 게시물 모듈에 영향을 주지 않고 이 특정 모듈에 스타일을 추가할 수 있습니다.

이제 다음과 같이 다양한 요소에 CSS 코드를 추가합니다.

전에

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

주요 요소

border-radius: 3px;
border:1px solid #dedede; 

후에

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

슬라이드 설명

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

슬라이드 제목

font-family: 'Alegreya Sans', sans-serif;

슬라이드 버튼

padding:0!important;
margin-top:0;

슬라이드 컨트롤러

margin-bottom:-55px;

슬라이드 화살표

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

이제 모달의 오른쪽 하단 모서리에 있는 확인 표시를 클릭하여 모듈 설정을 저장합니다.

Visual Builder에서 게시물 슬라이더를 Facebook 뉴스룸 페이지의 슬라이더처럼 보이게 하려면 아직 약간의 방법이 있음을 알 수 있습니다.

그것은 CSS가 처리할 수 없는 부분이며 Visual Builder에서 바로 페이지 설정에 나머지 코드를 추가하여 모양을 만드는 것을 볼 수 있습니다. 여기로 이동하려면 페이지 하단 중앙에 있는 설정 확장 아이콘을 클릭한 다음 "페이지 설정" 아이콘을 클릭합니다.

더 큰 모니터에서 작업하는 경우 모달을 Post Slider 측면으로 이동하여 추가할 때 각 코드 비트가 수행하는 작업을 볼 수 있도록 제안합니다. 이는 모듈의 스타일을 지정하는 데 사용되는 CSS를 이해하는 데 더 도움이 될 것입니다.

먼저 "Custom CSS" 텍스트 영역에 다음 CSS를 추가하여 배경 이미지 크기와 위치(현재 흰색 오버레이 뒤에 숨겨져 있음), 슬라이더 텍스트 및 오버레이의 위치를 ​​처리합니다.

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

이제 날짜를 제외하고 포스트 메타를 숨기고 제목 위로 날짜 위치를 이동하는 작업을 처리합니다. 이를 수행하려면 이전에 입력한 코드 바로 아래에 있는 사용자 정의 CSS 텍스트 입력에 다음 코드를 추가하십시오.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

우리는 단지 약간의 예외를 제외하고는 거기에 있습니다. Post Slider 모듈 위로 마우스를 가져가면 이전 화살표와 다음 화살표가 모두 나타납니다. Facebook 뉴스룸 슬라이더에는 다음 화살표만 나타납니다. 이전에 입력한 코드 바로 아래에 있는 Custom CSS 텍스트 입력에 다음 CSS를 추가하면 쉽게 해결할 수 있습니다.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

이제 다음 코드를 사용하여 슬라이더 아래 탐색 점의 위치를 ​​변경해야 합니다. 그건 그렇고, 슬라이더의 오버플로 속성을 표시로 설정하면 오른쪽 상단 모서리를 감싸는 "Top Stories" 태그에 대해 이전에 만든 3D 효과가 나타납니다.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

마지막으로 이 마지막 코드는 슬라이더의 애니메이션을 변경하여 모델 슬라이더와 더 가깝게 일치시킵니다. 완벽한 일치는 아니지만 jQuery 솔루션을 사용하지 않고 얻을 수 있는 가장 가까운 것입니다. 슬라이더를 좀 더 반응적으로 만들기 위한 미디어 쿼리도 있습니다.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

이제 화면 오른쪽 하단에 있는 저장 버튼을 클릭하여 페이지를 저장할 수 있습니다. 페이지가 저장되면 비주얼 빌더를 종료하여 Facebook 뉴스룸 페이지의 게시물 슬라이더에서 영감을 받은 완성된 게시물 슬라이더를 확인합니다.

마지막 생각들

글쎄요, 이 특정 디자인이 유용하다고 생각했는지 여부에 관계없이 Divi의 Post Slider Module에 있는 고급 설정에 대해 자세히 살펴보고 가능한 것에 대한 상상력을 불러일으켰기를 바랍니다.