クリック時にBioを使用してPersonモジュールを作成する方法

公開: 2017-08-16

この投稿では、クリック時にバイオを使用して人物モジュールを作成する方法を紹介します。同じ行の別の人物モジュールをクリックするとすぐに、略歴内のテキストが変更されます。いつでも、personモジュールをもう一度クリックしてバイオを閉じることができます。

これを使用して、たとえば、会社のWebサイトに従業員に関する追加情報を表示できます。このコンセプトは、訪問者との対話とWebサイト上の場所の保存という2つのことを行うのに役立ちます。略歴が実際に表示されるのは、訪問者が興味を示し、個人モジュール内の要素をクリックすることを決定したときだけです。

クリック時にバイオを使用した結果担当者モジュール

クリックでバイオを使用してPersonModuleを実現するために従う必要のあるさまざまな手順に飛び込む前に、デスクトップでの最終結果を見てみましょう。

バイオ付きの人モジュール

そして、モバイルとタブレットでの最終結果：

バイオ付きの人モジュール

モバイルでは、1つのBIOSが開かれると、他の2つのBIOSは自動的に閉じられます。各バイオには独自のセクションがありますが、常に1つのバイオセクションのみが開いています。

デスクトップ用のクリックでバイオを使用した個人モジュール

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

すべてをスムーズに機能させるには、デスクトップ用とタブレットと電話用の2つのバージョンを作成する必要があります。これらのバージョンにはそれぞれ独自のjQueryコードが必要です。デスクトップバージョンから始め、投稿の次の部分では、タブレットと電話用のバージョンを作成する方法を紹介します。

3列の行を持つPersonStandardセクションを追加します

最初に行う必要があるのは、Personモジュールを含むセクションを追加することです。

新しいページ（またはbioを使用してPerson Moduleを追加するページ）を開き、新しい標準セクションを追加します。そのセクション内に、3列の行を配置します。もちろん、別の数の列を使用することもできますが、使用するコードでは3人のモジュールが考慮されます。他のタイプの行にも同じものを作成する場合は、この投稿の後半で提供するjQueryコードにいくつかの変更を加える必要があります。

行設定

行の設定を開き、[コンテンツ]タブで、各列の背景色として「＃e5e5e5」を追加します。

person module with bio

次に、[詳細設定]タブに移動し、次のボックスシャドウを3つの行のそれぞれのメイン要素に挿入します。

個人モジュールを追加する

次に行う必要があるのは、行の最初の列に個人モジュールを追加することです。

[コンテンツ]タブ

そのモジュールの[コンテンツ]タブで、情報とソーシャルメディアのリンクを入力し、画像をアップロードします。

詳細設定タブ

このモジュールの[デザイン]タブに変更を加えることはありません（後で外観を自由に変更してください）。代わりに、すぐに[詳細設定]タブに移動し、行の列に追加したのと同じボックスシャドウをメンバー画像に追加します。

Personモジュールのクローンを作成する

次に行う必要があるのは、Personモジュールのクローンを2回作成し、それを他の2つの列に配置することです。さまざまなCSSクラスを追加するには、このセクションに戻る必要があります。ただし、その前に、まずバイオセクションを追加します。

全幅行のバイオスタンダードセクションを追加

作成した前のセクションのすぐ下に別の標準セクションを追加します。このセクションでは、さまざまな個人モジュールにリンクされているさまざまなテキストモジュールを追加する必要があります。セクションの設定を開き、背景色として「＃a0a0a0」色を使用します。

2つのテキストモジュールを追加する

人物モジュールの経歴に含めるテキストモジュールの数に応じて、テキストモジュールを追加できます。この場合、Personモジュールごとに2つのテキストモジュールを追加します。

最初のテキストモジュール

最初のテキストモジュールにテキストを入力して、[デザイン]タブに移動します。 [デザイン]タブで、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォントサイズ：31
テキストの色：#FFFFFF
テキスト行の高さ：1.7em

2番目のテキストモジュール

別のテキストモジュールを追加し、[デザイン]タブの[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォントサイズ：16
テキストの色：#FFFFFF
テキスト行の高さ：1.7em

各モジュールのクローンを2回作成する

これらの2つのテキストモジュールは、BIOSのそれぞれで同じになります。そのため、各テキストモジュールのクローンを2回作成する必要があります。これは、ページのバックエンドでの最終的な構造の外観です。

さまざまなCSSクラス

CSSクラスをPersonモジュールに割り当てる

各Personモジュールの[Advanced]タブに移動し、次のCSSクラスを割り当てます。

一人称モジュール： person1
二人称モジュール： person2
サードパーソンモジュール： person3

セクションにCSSクラスを割り当てる

BIOSが配置されているセクションの設定を開きます。 [詳細設定]タブに移動し、「section_1」をCSSクラスに書き留めます。

CSSクラスをテキストモジュールに割り当てる

次に、次の方法で作成したテキストモジュールにCSSクラスを追加します。

最初のPersonモジュールにリンク： div_text_1
2番目のPersonモジュールにリンクされています： div_text_2
サードパーソンモジュールにリンク： div_text_3

セクションとすべてのテキストモジュールに表示CSSコードを追加する

次のステップは、セクションの[詳細設定]タブとすべてのテキストモジュールに移動することです。次に、CSSコードの次の行をセクションのメイン要素に追加します。

display: none;

携帯電話とタブレットで無効にする

次に、モバイルとタブレット用に作成した両方のセクションを無効にします。

タブレットと電話のクリックでバイオを使用した個人モジュール

デスクトップ用のクリックでバイオを使用してpersonモジュールを作成する方法を示したので、タブレットと電話用にも作成する方法を示します。携帯電話とタブレットの前のセクションはすでに無効になっています。これは、バックエンドでのデスクトップのレイアウトがどのように見えるかです。

そして、これは私たちがタブレットと電話のバージョンに必要な構造です。

6つの新しいセクションを追加

したがって、先に進んで、ページに6つの新しいセクションを追加します。次に、personモジュールのクローンを作成し、各モジュールを個別にセクションに配置します。間にセクションを残してください。それが最終的にバイオが来る場所です。

次に、テキストモジュールのクローンを追加し、Personモジュールを含む各セクションの下のセクションに配置します。略歴は、デフォルトで、モバイルおよびタブレットの個人モジュールの下に表示されます。

。

さまざまなCSSクラスとID

すべてのセクションとモジュールを配置したら、CSSクラスの追加を開始します。

CSSクラスをPersonモジュールに割り当てる

まず、各personモジュールを個別に開き、[詳細設定]タブのCSSクラスを次のように変更します。

一人称モジュール： mobile_person1
二人称モジュール： mobile_person2
サードパーソンモジュール： mobile_person3

セクションへのCSSクラスの割り当て

次に、すべての異なるバイオセクションを開き、それぞれに以下を割り当てます。

最初のバイオセクション： section_mobile_1
2番目のバイオセクション： secton_mobile_2
3番目のバイオセクション： section_mobile_3

CSSクラスをテキストモジュールに割り当てる

場所を指定する必要がある最後のCSSクラスは、さまざまなバイオセクションのテキストモジュールにリンクされているクラスです。略歴セクションに従って、次のCSSクラスをそのセクション内のテキストモジュールに割り当てます。

最初のPersonモジュールにリンク： div_mobile_text_1
2番目のPersonモジュールにリンクされています： div_mobile_text_2
サードパーソンモジュールにリンク： div_mobile_text_3

表示CSSコードをセクションに追加

次に、すべてのバイオセクションを非表示にする必要があります。各セクションの[詳細設定]タブに移動し、CSSコードの次の行をコピーしてメイン要素に貼り付けます。

display: none;

各テキストモジュールのメイン要素でこのCSSコードの行を必ず削除してください。デスクトップ版では、それらを非表示にする必要がありましたが、モバイルやタブレットでは必要ありません。

デスクトップで無効にする

これで、すべての変更を行った後、コードを追加する前に行うべきことが1つあります。それは、デスクトップの3つのバイオセクションを無効にすることです。先に進み、各セクションを開いて、[詳細設定]タブに移動します。 [詳細設定]タブの[表示]サブカテゴリ内で、デスクトップのセクションを無効にします。

jQueryコードを追加する

Diviビルダーに実際的な変更をすべて加えたので、最後のステップに進みます。 jQueryコードを追加します。

新しいコードモジュールを追加する

ページにコードを追加する最も簡単な方法は、コードモジュールを使用することです。おそらく、この人物モジュールは、1ページをクリックするだけで略歴とともに使用されます。コードモジュールを使用すると、誰かがそのページにいるときにのみコードが読み込まれるようになります。 2つのjQueryの別々のコードをコピーして同じコードモジュールに貼り付けます。

デスクトップjQueryコードをコードモジュールに配置します

次のCSSコード行をコピーしてコードモジュールに貼り付け、クリックバージョンのデスクトップバイオを機能させます。

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

タブレットと電話のjQueryコードをコードモジュールに配置します

そして、タブレットと電話のバージョンを機能させるための次のコード行：

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

最終結果

この投稿全体のすべての手順を実行したら、結果を最後に見てみましょう。デスクトップでは次のようになります。

バイオ付きの人モジュール

そして、モバイルとタブレットの場合：

バイオ付きの人モジュール

まとめ

この投稿では、クリックすると非表示と表示が表示されるbioを使用してpersonモジュールを作成する方法を紹介しました。この方法を適用することにより、Webサイトの一部の場所を保存し、訪問者が興味を示した場合にのみそれを表示することができます。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。