Diviでブログ投稿をフロートしますか?

今日は、Divi でブログ投稿をフローティング カードとして表示するクリエイティブな方法を紹介します。 ブログごとや サイトのWeb 優れた成績を目指すべきである コンテンツ 魅力的であり、おそらく同様に重要でアクセスしやすいものです。 

確実に コンテンツ ユーザーがアクセス可能な状態を維持するには、ページ上でフローティングする必要があります。 

ブロガー向けに、以下の記事を表示する方法を紹介します。 ブログ フローティング カードとして、ページをスクロールしている間も表示されたままになります。 

行こう。

調査

これは、このチュートリアルの最後に取得する結果の概要です。

floatDiviのブログ投稿
floatDiviのブログ投稿

始めるために必要なもの

Diviでこのデザインの作成を開始する前に、次のことを行う必要があります。

  • 新しいページを作成し、関連する名前を付けて、[DiviBuilderを使用]をクリックします
floatDiviのブログ投稿
  • オプションを選択 レイアウトを選択"。
  • レイアウトを見つけて選択する'ブロガーのランディングページ'。
floatDiviのブログ投稿
  • ボタンをクリックしてください レイアウトを選択 ページにロードします。

その後、このチュートリアルで使用できるように事前に作成されたレイアウトが用意されます。

Diviのブログモジュールを使用してブログ投稿フローティングカードを作成する方法

レイアウトがページに読み込まれたので、ブログ投稿のフローティングカードを作成する準備が整いました。

また読みます: Diviでスティッキーグローバルヘッダーを作成する方法

レイアウトの一番下に新しいセクションを作成します。

次に、新しいXNUMX列の行をセクションに追加します。

行/列にブログモジュールとタイトルを追加します

ここで新しいブログモジュールを作成する代わりに、上にスクロールして、XNUMXつのブログ投稿を表示している既存のブログモジュールを見つけます(ページの中央近くのXNUMX番目のセクションにあります)。 開ける " その他のモジュールパラメータ »そして選択« モジュールコピー"。

次に、灰色のプラスアイコンを右クリックして「」を選択し、ページの下部に作成した新しいXNUMX列の行にモジュールを貼り付けます。 モジュールの貼り付け"。

次に、ブログ投稿の上にタイトルを追加します。このタイトルもブログカードの上に表示されます。 これを行うには、既存のテキストモジュールを小さなタイトルテキストでコピーします。 ライフスタイル"。

次に、追加した新しいブログモジュールのすぐ上にモジュールを貼り付けます。

次に、タイトルテキストを編集して、取り上げたいブログ投稿の種類を説明します。 この例では、「 最上階"。

固定位置とカスタム幅で線をカスタマイズする

フローティングブログ投稿のサイズを縮小して、固定位置にあるときにページ上のスペースを取りすぎないようにします。 それは面白いでしょう。 これを行うには、回線設定を開き、以下を更新します。

アイテムをフロートさせるには、ラインを固定位置にする必要があります。 [詳細設定]タブで、以下を更新します。

  • 位置:固定
  • 場所:右下
  • 垂直オフセット:20px
  • 水平オフセット:20px
  • Zインデックス:12

最小限のコンテンツとボックスシャドウで更新されたブログモジュール

一般的に、ブログモジュールにはすでにXNUMX列のグリッドレイアウトと、選択したレイアウトパックに付属する素敵なスタイルがあります。 しかし、私たちがしなければならないことがいくつかあります。

参照: Diviでログインフォームを使用してグローバルヘッダーを作成する方法

まず第一に、マップのサイズを (垂直方向に) 縮小し、マップからいくつかの要素を削除する必要があります。 コンテンツ

これを行うには、ブログ設定を開き、注目の画像を除くすべての要素を非表示にします。 これにより、投稿には注目の画像とタイトルのみが表示されます。

[スタイル]タブで、ボックスの影を次のように構成します。

  • シャドウボックス:スクリーンショットを参照
  • ボックスシャドウブラー強度:28px
  • 字幕フォントの色:rgba(0,0,0,0.19)

調査

これが、これまでの結果のプレビューです。

記事の行をホバーに表示する

最後に、ユーザーがフローティング記事を操作するように促す優れたホバー効果を追加できます。

また読む: Diviのブログモジュールを使用してブログページを作成する方法

オープンライン設定と更新オプション:

オフィス用

  • 変換:50%

ホバー状態の場合

  • 変換:0%
floatDiviのブログ投稿

これにより、最初は行全体がブラウザのビューポートの外に50%移動します。 ユーザーが回線にカーソルを合わせると、完全に表示に戻ります。

モバイルで行を非表示

単一のブログ投稿を公開する場合を除いて、それらのブログ投稿をモバイルにフロートさせることは意味がありません。 おそらくスペースを取りすぎて、スクロールしようとすると問題が発生します。 

参照: Diviのグローバルヘッダーに連絡フォームを追加する方法

モバイルで地図を非表示にするには、セクション設定を開き、携帯電話とタブレットでセクションの表示をオフにします。

floatDiviのブログ投稿

最終結果

floatDiviのブログ投稿

今すぐDIVIをダウンロード!!!

まとめ

そう ! このチュートリアルでは、強調したいブログ投稿を提示するための創造的で独創的な方法を示しました。

懸念や提案がある場合は、 コメントセクション それを議論する。

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...