FacebookNewsroomのPostSliderのようなDiviのPostSliderモジュールのスタイルを設定する方法

投稿スライダーは、読者にさまざまなコンテンツを提示するためのエレガントなソリューションです。 強調表示されている投稿は、カテゴリから現在までさまざまな方法で整理できます。 今日のプロジェクトでは、「トップストーリー」と呼ばれる投稿のカテゴリを提示するFacebookNewsroomブログページの例を見ていきます。 投稿のタイトルと注目の画像を強調する非常に魅力的なスライダーです。 DiviのPostSliderモジュールを使用して、このスライダーの外観を再現します。

前後：Diviポストスライダーモジュール

以下の最初の画像は、デフォルト設定のdivi postスライダーモジュールを示しています。2番目の画像は、設定といくつかのカスタムCSSを少し調整して作成された変更です。

前

後

コンセプトとインスピレーション

前述のように、今日の投稿スライダースタイルのモデルはFacebookNewsroomからのものです。 これは、ご想像のとおり、Facebookのすべてに特化したニュースブログです。 私たちのほとんどはFacebookをソーシャルメディアの巨人として知っていますが、このブログをざっと見るとあなたの視野が広がります。 前四半期の収益は88億ドル、1日あたりのアクティブユーザー数は12億3000万人で、Facebookニュースルームページのブログ投稿スライダーは、今日のプロジェクトにふさわしいモデルを提供します。

デザイン要素の準備

このデザインの準備として、注目の画像を含むいくつかのブログ投稿が必要になります。 投稿の注目画像の設定に慣れていない場合は、ページの右下にある投稿の編集ページに設定があります。

このスライダーのデザインは、注目の画像がそれぞれ600px x 400pxの場合に最適に機能しますが、正確なサイズは重要ではありません。

投稿エディタページの下部にある[抜粋]入力ボックスに、投稿ごとに抜粋テキストを追加することもできます。 投稿には投稿の抜粋が表示されますが、ない場合は実際のコンテンツの一部が使用されます。

Diviを使用した設計の実装

私たちのYoutubeチャンネルを購読する

フォローしていて、投稿スライダーを表示するためのページ設定がまだない場合は、新しいページを作成し、[ビジュアルビルダーを使用]をクリックして必要な変更を開始します。

まず、1列の構造行を持つ通常のセクションを追加します。

次に、ポストスライダーモジュールを行に追加します。

変更は「コンテンツ」設定から始まります。これは、VisualBuilderに新しいモジュールを追加した後のデフォルトの場所です。

デフォルトのコンテンツ設定に次の変更を加えます。

「投稿番号」を必要な数の投稿に設定します。 この例では、3を使用しています。

次に、「定義されている場合は投稿の抜粋を使用」を「はい」に設定し、「自動抜粋の長さ」を180に設定します。

これで、モジュール設定モーダルの上部にあるタブをクリックして、設計設定に移動する準備が整いました。

デザイン設定に次の変更を加えます。

「背景オーバーレイの色」を白（#ffffff）に変更します。

「ドットナビカスタムカラー」を＃576d90に変更します。

「テキストの色」を「暗い」に変更します。

次に、「ヘッダーフォント」を太字にし、「ヘッダーフォントサイズ」を34ピクセルに設定し、「ヘッダーテキストの色」を＃3b5998に設定し、「ヘッダー行の高さ」を42ピクセルに設定します。

次に、「本文の色」を＃141924に設定し、「本文の高さ」を24pxに設定します。

次に、「ボタンにカスタムスタイルを使用する」をクリックして、「はい」に変更します。 「ボタンのテキストサイズ」を16pxに、「ボタンの境界線の幅」を0pxに、「ボタンホバーのテキストの色」を＃666666に、「ボタンのホバーの背景色」を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で、投稿スライダーをFacebookNewsroomページのように表示する方法がまだ少しあることがわかります。

これはCSSで処理できないことではありません。残りのコードをビジュアルビルダーから直接ページ設定に追加することで、CSSが具体化するのを見ることができます。 そこにたどり着くには、ページの中央下にある[設定の展開]アイコンをクリックしてから、[ページ設定]アイコンをクリックします。

より大きなモニターで作業している場合は、モーダルをポストスライダーの横に移動して、コードを追加するときにコードの各ビットが何をするかを確認することをお勧めします。 これにより、モジュールのスタイル設定に使用されるCSSをよりよく理解できるようになります。

まず、「カスタム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ニュースルームのスライダーには、次の矢印のみが表示されます。 これは、前に入力したコードのすぐ下にあるカスタムCSSテキスト入力に次のCSSを追加することで簡単に修正できます。

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

次に、次のコードを使用して、スライダーの下のナビゲーションドットを再配置する必要があります。 ちなみに、スライダーのオーバーフロープロパティを表示に設定すると、右上隅を囲む「トップストーリー」タグに対して以前に作成した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内のより高度な設定のいくつかを詳細に調べ、何が可能かについて想像力をかき立ててくれることを願っています。