Diviのブログモジュールを使用して動的なキャリアジョブリストセクションを作成する方法
公開: 2019-12-27以前のDiviチュートリアルでは、DiviのテーマビルダーとAdvanced CustomFieldsプラグインを使用して完全に動的なオープンジョブポジションテンプレートを作成する方法を示しました。 今日のチュートリアルでは、キャリアページで募集中の求人情報を動的に紹介する方法を紹介します。 このチュートリアルは、オープンジョブポジションテンプレート投稿の続編であるため、最初にテンプレートを再作成してから、このチュートリアルに戻ってください。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
ダイナミックキャリアジョブリストレイアウトを無料でダウンロード
無料のダイナミックキャリアの求人情報のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.採用情報ページを追加します
新しいページを追加してVisualBuilderに切り替えます
新しいページを作成し、ページにタイトルを付けて、VisualBuilderに切り替えることから始めます。
2.フロントエンドでキャリアページの作成を開始します
セクション＃1を追加
グラデーションの背景
最初のセクションをページに追加し、セクション設定を開いて、グラデーションの背景を使用します。
- 色1：＃ff6600
- 色2：＃fbff30
- グラデーション方向：126度
ボトムディバイダー
下部セクションの仕切りも使用します。
- 仕切りスタイル：リストで検索
- 仕切りの高さ：8vw
- ディバイダー水平リピート：3x
- 仕切りの配置：セクションコンテンツの下
間隔
下部のパディングを追加して、セクションの設定を完了します。
- ボトムパディング：200px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
列にテキストモジュールを追加
H1コンテンツを追加する
選択したH1コンテンツを含むテキストモジュールを行の列に追加します。
H1テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。
- 見出しフォント：Montserrat
- 見出しフォントの太さ：重い
- 見出しのテキストの色：#ffffff
- 見出しのテキストサイズ：8rem（デスクトップ）、4rem（タブレット）、2.5rem（電話）
Dividerモジュールを列に追加
可視性
テキストモジュールのすぐ下に、ディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：#ffffff
サイジング
そして、サイズ設定を変更して、モジュールの設定を完了します。
- 仕切りの重量：8px
- 幅：30％
セクション＃2を追加
ページに別の通常のセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加します。
列にテキストモジュールを追加
H2コンテンツを追加する
行の列にテキストモジュールを追加し、選択したH2コンテンツを挿入します。
H2テキスト設定
モジュールのH2テキスト設定を次のように変更します。
- 見出し2フォント：Montserrat
- 見出し2フォントの太さ：重い
- 見出し2のテキストの色：＃ffa500
- 見出し2テキストサイズ：2.3rem
Dividerモジュールを列に追加
可視性
この列で必要な次のモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：＃ffa500
サイジング
そして、サイジング設定で仕切りの重量と最大幅を変更して、モジュールの設定を完了します。
- 仕切りの重量：6px
- 最大幅：80px
ブログモジュールを列に追加
コンテンツ
さまざまな募集中の職位を表示するために、ニーズに合わせてカスタマイズするブログモジュールを使用します。 次のコンテンツ設定が適用されることを確認してください。
- 投稿タイプ：投稿
- カテゴリを含める：マーケティング
- 抜粋長さ：150
要素
要素の設定で有効にしているオプションは、次の2つだけです。
- 続きを表示ボタン：はい
- 抜粋を表示：はい
レイアウト
モジュールの[デザイン]タブに移動し、全幅レイアウトを使用していることを確認します。
- レイアウト：全幅
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトル見出しレベル：H3
- タイトルフォント：Montserrat
- タイトルテキストサイズ：1.5rem
本文の設定
次に、本文の設定を変更します。
- ボディフォント：Raleway
- 本文サイズ：1.1rem
- ボディラインの高さ：2.1em
続きを読むテキスト設定
続きを読むテキスト設定と一緒に。
- 続きを読むフォント：Montserrat
- 続きを読むフォントスタイル：大文字
- 続きを読むテキストの色：#ffffff
- 続きを読むテキストサイズ：1rem
間隔
間隔設定にいくつかのカスタムマージンとパディング値を追加します。
- 左マージン：100px（デスクトップ）、50px（タブレット）、0px（電話）
- トップパディング：0px
- ボトムパディング：0px
続きを読むボタンCSS
そして、[詳細設定]タブに続きを読むボタンCSSを追加して、モジュールの設定を完了します。
max-width: 200px; text-align: center; padding: 20px; margin-top: 40px; border-radius: 100px; background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;
行を必要な回数だけクローンする
行とそのすべてのモジュールを完了したら、会社の部門数に応じて、必要な回数だけ行のクローンを作成できます。
テキストモジュールの内容を変更する
重複する各行のH2コンテンツを必ず変更してください。
ブログモジュールのカテゴリを変更する
ブログモジュールのカテゴリとともに。
最後の行の列にコードモジュールを追加する
CSSコードを挿入して、開いているジョブの位置を個別にスタイル設定します
設計を完了するために、ページの最後の行にコードモジュールを追加し、CSSコードの次の行を挿入します。
<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>
3.ページのデザインを保存して結果を表示する
ページのデザインが完了したら、すべての変更を保存し、Visual Builderを終了して、結果を表示できます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
このチュートリアルは、前のチュートリアルの続編であり、オープンジョブポジションテンプレートを作成する方法を示しました。 このチュートリアルでは、さらに一歩進んで、Diviのブログモジュールを使用して、キャリアページでこれらの動的なオープンジョブポジションを紹介する方法を示しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。