Diviでホバー効果を使用して3Dサインポストを作成する方法
公開: 2019-05-13優れたWebサイトを使用すると、訪問者が探しているものをすばやく効率的に見つけやすくなることは誰もが知っています。 そして、あなたがあなたのコンテンツをより魅力的にすることができれば、それは常に助けになります。 このチュートリアルでは、ユーザーを引き付け、ユーザーが探しているものを独自の方法で簡単に見つけられるようにする3Dサインポストを設計する方法を紹介します。 これを行うには、Diviの変換オプションと複数の宣伝文句モジュールのパースペクティブcssプロパティを使用して、投稿上で回転した記号の3D効果を作成します。
始めましょう！
スニークピーク
3Dサインポストレイアウトを無料でダウンロード
このチュートリアルの3Dサインポストのデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
私たちのYoutubeチャンネルを購読する
始めるために必要なもの
開始するには、次のものが必要です。
- WordPressサイトにDiviテーマがインストールされてアクティブになっていることを確認してください。
- 独自の投稿画像を作成する場合は、Photoshop、Gimp、Sketchなどのフォトエディタが必要になります。 または、上記のこのデザインの無料レイアウトダウンロードで提供されている画像を使用できます。
- それ以外は、DiviBuilderのフロントエンドですべてをゼロから構築します。
サインポストの画像を作成する
このデザインのサインポストを作成する最も簡単な方法は、ページのセクションまたは行を垂直に繰り返す背景画像として追加できる小さな繰り返し可能な画像ブロックを作成することです。 この手順をスキップする場合は、上記の無料ダウンロードに含まれているjsonレイアウトをインポートして開始できます。 ただし、選択したカスタムカラーを使用して独自の色を作成する場合は、次の方法で作成できます。
この例では、Photoshopを使用しますが、プロセスは他の一般的な写真エディターでも非常に似ています。
Photoshopで、クリックして、25pxのカスタムの高さと幅を持つ新しいドキュメントを作成します。
前景色を黒（＃000000）または任意の色に設定します。
次に、ペイントバケットツールを選択し、空の正方形レイヤーの内側をクリックして、正方形を黒くペイントします。
次に、画像をjpegとしてコンピューターに保存します。 これは、3Dサインポストデザインのポストを作成するためにデザインで使用する画像です。
Diviでの3Dサインポストデザインの実装
準備ができたら、必ず新しいページを作成し、ページにタイトルを付けて、フロントエンドにDiviBuilderをデプロイしてください。 「最初からビルド」オプションを選択します。
あなたの空白のキャンバスが待っています！
次に、1列の行を持つ新しい通常のセクションを作成します。
行のカスタマイズ
モジュールを追加する前に、行の設定を開き、以下を更新します。
背景画像：[投稿用のカスタム正方形画像を挿入]
背景画像サイズ：実際のサイズ
背景画像の繰り返し：Yを繰り返します（垂直方向）
次に、以下を更新します。
側溝幅：1
最大幅：980px
カスタムパディング：2vw上部、2vw下部
次に、次のカスタムCSSを列のメイン要素に次のように追加する必要があります。
perspective: 1000px;
このパースペクティブcssプロパティは、変換オプションを使用して回転するたびに、記号（または宣伝文）の3D効果を取得するために必要です。
これに関する詳細については、パースペクティブがDiviの変換オプションでどのように機能するかを確認してください。
宣伝文モジュールを使用したサインの作成
3Dサインポストに最初のサインを作成するために、宣伝文句モジュールを使用します。 先に進み、行に宣伝文モジュールを追加します。
次に、宣伝文の設定を開き、宣伝文の内容を次のように更新します。
模擬コンテンツを減らして、数行のテキストのみを含めます。
アイコンを使用：はい
アイコン：左矢印（スクリーンショットを参照）
背景色：＃1a233f
アイコンの色：＃9eb3c2
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：80px
テキストの向き：中央
タイトルフォント：プレイフェアディスプレイ
タイトルテキストの色：＃9eb3c2
タイトルテキストサイズ：38px（デスクトップ）、26px（電話）
最大幅：600px
モジュールの配置：中央
カスタムパディング：上5％、下5％、左5％、右5％
丸みを帯びた角：20px
ボーダー幅：3px
ボーダーカラー：＃21335e
これで宣伝文のスタイリングは処理されますが、3D効果を得るには、変換オプションを使用して宣伝文モジュールを回転させる必要があります。 これを行うには、以下を更新します。
変換回転X軸：20度
より多くの兆候のために行を複製する
サインデザインの1つが完成したので、行を複製してさらに作成することができます。 行を複製するたびに、変換の回転を更新して、標識がポストの周りでさまざまな角度で回転するようにする必要があります。
先に進み、行を複製し、次のように新しい行の宣伝文句モジュールを更新します。
変換回転X軸：-30度
行を複製して3番目の記号を作成し、次のようにその新しい行の宣伝文句モジュールを更新します。
変換回転X軸：40度
2番目の記号の方向を変更する
現在、すべての矢印は同じ方向を指しています。 方向を左から右に変更するには、宣伝文のモジュール設定を少し更新する必要があります。
2行目（真ん中）の宣伝文モジュールの設定を開き、以下を更新します。
アイコン：右矢印（スクリーンショットを参照）
テキストの向き：左
テキストが左側に、アイコンが右側になるように、宣伝文の内容の順序を逆にすることができます。 これを行うには、次のように1行のカスタムCSSをメイン要素に追加する必要があります。
direction: rtl;
これで宣伝文の内容が逆になり、新しい方向を指す標識ができました。
標識を回転させてホバーで元の状態に戻します
このセットアップの優れた点の1つは、ホバー状態を簡単に追加して、回転したモジュールを元の（0度）回転に戻すことができることです。 これにより、ユーザーはコンテンツにアクセスし、モジュールにカーソルを合わせたときにテキストをはっきりと見ることができます。
3つの宣伝文モジュールすべてに同じホバー状態を追加するため、複数選択を使用して3つの宣伝文モジュールすべてを選択し、モジュールの1つの設定を開いて、要素設定モーダルを表示します。 次に、以下を更新します。
変換回転X軸（ホバー）：0度
設定を保存すればそれだけです！
これまでのデザインと機能をチェックしてください。
背景画像を使用してセクションをカスタマイズする
最後のステップとして、セクションに新しい背景画像を追加できます。 これはもちろんオプションですが、視差効果を使用する場合は特に、右の画像が非常にクールに見える可能性があります。
セクションを開き、新しい背景画像を追加します。 （エージェンシーレイアウトパックの画像を使用しています）
次に、以下を更新します。
視差効果を使用する：はい
カスタムパディング：0px上、0px下
最終結果
最終的な考え
3Dサインポストを作成すると、クリエイティブで魅力的なデザイン要素がサイトに追加され、コンテンツを（文字通り）ポップアウトさせることができます。 また、ホバー効果により、ユーザーは3D効果なしでコンテンツを表示して、優れたフォールバックを実現できます。 必要に応じてクリック可能なナビゲーション要素として機能できるように、リンクURLをblurbモジュールに簡単に追加できることを忘れないでください。 とにかく、これがあなたの次のプロジェクトのためのいくつかのインスピレーションを与えることを願っています。
コメントでお返事をお待ちしております。
乾杯！