次のDiviプロジェクトの活気に満ちたホバーチームページを作成する方法
公開: 2019-08-02チームページはしばしば過小評価されています。 多くのユーザーは、製品を購入したりサービスを採用したりする前に、チームやページについて移動して、会社とその背後にいる人々についての理解を深めます。 チームページが肯定的な第一印象を残す場合、それはより高いコンバージョン率につながる可能性があります。 さて、Diviで美しいチームページを作成する方法はたくさんありますが、次のプロジェクトのインスピレーションを探しているなら、この投稿を気に入るはずです。 ホバー時にメンバーのBIOSをトリガーする活気のあるホバーチームページを再作成します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
私たちのYoutubeチャンネルを購読する
1.通常のセクション+タイトルの1列の行から開始します
新しいページを開き、ページ属性を「空白ページ」に設定します。 それが完了したら、Divi Builderに入り、1列の行を持つセクションを追加します。
テキストと仕切りモジュールを追加します。
2.テキストモジュールにコンテンツを追加してスタイルを設定する
テキストモジュールにH1コンテンツを追加します。
[デザイン]タブに移動し、それに応じてH1テキスト設定のスタイルを設定します。
- 見出しフォント：ポピン
- 見出しフォントの太さ：軽い
- 見出しテキストの配置：中央
- 見出しテキストの色：黒＃000000
- 見出しのテキストサイズ：
- デスクトップ= 6vw
- タブレット= 9vw
- 電話= 11vw
- 見出し文字の間隔：-0.4vw
3.ディバイダーのスタイルを設定します
次のモジュールであるディバイダーモジュールに進みます。 仕切りの色を黒に変更し、サイズ設定を変更します。
- 仕切りの色：黒#oooooo
- 仕切りの重量：12px
- 幅：14％
- モジュールの配置：中央
4.通常のセクション+3列の行を使用してチームのBIOSを作成します
タイトルセクションが完成したので、チームの経歴の作成を開始する準備が整いました。 3列の行を持つ新しい通常のセクションを追加することから始めます。
5.行サイズ設定を調整します
サイズ設定を変更して、行がセクションコンテナの幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
6.行間隔設定を調整します
カスタムの上部と下部のパディングも追加します。
- トップパディング：2vw
- ボトムパディング：2vw
7.画像と宣伝文のモジュールを列1に追加します
最終的な効果を作成するために使用する2つの主要なモジュールは、画像モジュールと宣伝文モジュールです。 最初に画像モジュールを追加し、次に宣伝文を追加します。
8.画像をアップロードしてスタイルを設定する
ホバーチームのページは、チームメンバーを紹介するためのものです。 画像モジュールを開き、そのうちの1つの写真を追加します。 Diviのストック画像の1つを使用します。 画像のサイズが612pxX612pxであることを確認してください。
配置
デザインタブに移動し、画像の配置を変更します。
- 画像の配置：中央
サイジング
サイズ設定も変更します。
- 幅：30％
- モジュールの配置：中央
間隔
そして、いくつかの負のトップマージンを追加します。
- マージン：
- デスクトップ= -3vw
- タブレットと電話= -13vw
国境
画像を円に変えるために、境界線の設定を変更します。
- 丸みを帯びた角：20vw四隅すべて
- ボーダースタイル：4辺すべて
- ボーダー幅：12px
- ボーダーカラー：ホワイト#ffffff
- ボーダースタイル：ダブル
ボックスシャドウ
また、微妙なボックスシャドウを適用することで、画像に奥行きを加えています。
- ボックスシャドウ：最初のオプション
- ボックスシャドウブラー強度：50px
Zインデックス
前のステップの1つで、負のトップマージンを追加しました。 画像が列の上にとどまるように、それを超えても、可視性設定でzインデックスを増やします。
- Zインデックス：3
9.コンテンツを宣伝文に追加してスタイルを設定する
ページ設定にカスタムCSSを追加する
他の作業を行う前に、カスタムCSSを追加して、宣伝文句内のアイコンのデフォルトの下マージンを削除します。 次のCSSコード行をページ設定に追加します。
.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}
BlurbにCSSクラスを与える
次にblurbモジュールを開き、一致するCSSクラスを追加します。
- CSSクラス：blurb-icon
コンテンツを追加する
プレースホルダーテキストを使用しますが、チームメンバーの実際の名前と説明を挿入できます。
アイコンを選択
次にプラスアイコンを選択します。
- アイコンを使用：はい
- アイコン：円の内側のプラス記号
スタイルの背景
背景設定に移動し、ホバー時に白のデフォルトの背景色とグラデーションの背景を追加します。
- 背景：白#ffffff
- ホバーの背景：グラデーション
- グラデーションカラー1：＃00ffa1
- グラデーションカラー2：＃29c4a9
- グラデーションタイプ：線形
- 勾配方向：154度
- 開始位置：0
- 終了位置：46％
スタイルアイコン
次に、次のアイコン設定を適用します。
- アイコンの色：
- デフォルト：＃29c4a9
- ホバー：透明なrgba（255,255,255,0）
- アイコンのフォントサイズを使用：はい
- アイコンのフォントサイズ：
- デスクトップ= 2vw
- タブレット= 4vw
- 電話= 6vw
配置
テキスト設定に移動し、テキストの配置を変更します。
- テキストの配置：中央
スタイル見出しテキスト
次に、見出しのテキスト設定を開き、さまざまな画面サイズで変更を加えます。
- 見出し：H4
- タイトルフォント：ポピンズ
- タイトルフォント：太字
- タイトルテキストの色：白#ffffff
- タイトルテキストサイズ：
- デスクトップ：1.5vw
- タブレット：2.5vw
- 電話：3.5vw
スタイル本文テキスト
本文の設定も同様です。
- 本文の色：白#ffffff
- 本文のサイズ：
- デスクトップ= 0.8vw
- タブレット= 1.9vw
- 電話= 2.6vw
- ボディラインの高さ：
- デスクトップ= 2vw
- タブレット+電話= 3vw
サイジング
次に、宣伝文句モジュールのサイズ設定を変更します。
- コンテンツの幅：100％
- 幅：81％
- モジュールの配置：中央
間隔
さまざまな画面サイズにも、いくつかのカスタムマージンとパディング値を適用します。
- トップマージン：
- デスクトップ= -4vw
- タブレット+電話= -9vw
- 下マージン：
- デスクトップ= 3.5vw
- タブレット+電話= 10vw
- 上部と下部のパディング：
- デスクトップ= 7.1vw
- タブレット= 30vw
- 電話= 28vw
- 左右のパディング
- デスクトップ= 2vw
- タブレット+電話= 8vw
国境
境界線の半径を追加して、宣伝文モジュールを円に変えます。
- 丸みを帯びた角：50vw四隅すべて
ボックスシャドウ
そして、ホバーに表示されるボックスシャドウを追加して、宣伝文句モジュールの設計を完了します。
- ボックスシャドウ：5番目のスタイル
- ボックスシャドウの水平位置：0vw
- ボックスシャドウの垂直位置：
- デスクトップ+ホバー= -14vw
- タブレット= -44vw
- 電話番号= -46vw
- ボックスシャドウスプレッド強度：
- デスクトップ+ホバー= -6vw
- タブレット+電話= -19vw
- ボックスシャドウカラー：
- ホバー= rgba（0,0,0,0.05）
10.スタイル列1
1列目に必要なすべてのモジュールを追加したので、次は列のスタイルを設定します。
バックグラウンド
列1の背景設定を開き、次のグラデーション背景を適用します。
- 背景スタイル：グラデーション
- グラデーションカラー1：＃00ffa1
- グラデーションカラー2：＃29c4a9
- グラデーションタイプ：ライナー
- 勾配方向：282度
国境
[デザイン]タブに移動し、境界線の半径を追加して列を円に変えます。
- 丸みを帯びた角：50vw
オーバーフロー
画像が列の上に表示されるようにするために、可視性設定で水平方向と垂直方向のオーバーフローを変更します。
- 水平および垂直オーバーフロー：目に見える
11.空の列を削除し、最初の列を2回複製します
最初の列とその中のすべてのモジュールを完了しました。 時間を節約するために、空の列を削除し、最初の列のクローンを2回作成します。
列2と3を削除します
メイン行の設定に戻り、2列目と3列目のごみ箱アイコンをクリックします。
列を1回複製する
2列目と3列目を削除すると、1列目は一瞬奇妙に見えますが、列を2回複製するとすぐにすべてが変わります。
12.列2の内容と色を変更する
次に、他の2人のチームメンバーの新しい列のスタイルを設定します。
2列目
2番目の列の設定を開き、グラデーションの背景を変更します
- 背景グラデーションカラー1：＃00eeff
- 背景のグラデーションカラー2：＃309ce5
別の画像もアップロードしてください。
宣伝文モジュールを開き、グラデーションの背景を変更して続行します。
- 背景色1にカーソルを合わせる：＃00eeff
- 背景色2にカーソルを合わせる：＃309ce5
アイコンの色も変更します。
- デフォルトのアイコンの色：＃309ce5
3列目
3番目の列の設定を開き、グラデーションの背景を変更します。
- 背景グラデーションカラー1：＃ff91ec
- 背景のグラデーションカラー2：＃a500ff
次に、宣伝文のグラデーションの背景を変更します。
- 背景色1にカーソルを合わせる：＃ff91ec
- 背景色2にカーソルを合わせる：＃a500ff
アイコンの色と一緒に。
- デフォルトのアイコンの色：＃a500ff
プレビュー
さまざまな手順を実行したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです！
この投稿では、カラフルなホバーオプションを備えた活気のあるホバーチームページを作成する方法を紹介しました。 次のDiviプロジェクトでこのデザインを自由に使用してください。 チームページまたは寄稿者ディレクトリで試してみてください。 コメントで何か考えがあれば教えてください。