チームメンバーブロックを使用すると、完全にカスタマイズ可能なプロフィールレイアウトで、SeedProdページ上のチームメンバーを紹介できます。各個人の写真、名前、役職、説明、ソーシャルメディアリンクを、洗練されたプロフェッショナルなカードで表示します。
このブロックは、[会社概要]ページ、ランディングページ、信頼と信用の構築が重要なセクションに最適です。画像形状、区切り線スタイル、ソーシャルアイコンの外観、すべてのテキスト要素のタイポグラフィスタイルを完全に制御できるため、チームセクションにブランドに合った外観を与えることができます。
チームメンバーブロックをページに追加する
次の手順に従って、SeedProdページにチームメンバーブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、チームメンバーブロックを目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、チームメンバーブロックをクリックして設定を開きます。[コンテンツ]タブの設定は、4つのセクションに整理されています。
一般：
- 画像: チームメンバーの写真をアップロードまたは選択します。画像の幅（pxまたは％）を設定し、オプションで固定の高さを設定します。アクセシビリティのために画像を説明する代替テキストを入力します。
- 画像位置: テキストに対する画像の表示位置を選択します — 上、左、または右。
- 名前: チームメンバーの名前を入力します（デフォルト：「John Doe」）。表示に使用するHTMLタグ（H1～H6、div、span、またはp）を選択し、テキストの配置を設定し、下部の余白を調整します。
- 役職を表示: 役職の表示をオンまたはオフにします（はい/いいえ）。有効な場合は、役職のテキストを入力し、配置を設定し、下部の余白を調整します。
- 説明を表示: バイオまたは説明の表示をオンまたはオフにします（はい/いいえ）。有効な場合は、説明テキストを入力し、配置を設定し、下部の余白を調整します。
画像エリア:
- 形状: チームメンバーの写真に適用する形状を選択します — デフォルト、丸みを帯びた、円形、またはカスタム（個別の角の半径制御を有効にします）。
- 画像下余白: 画像の下の間隔を設定します。
区切り線:
- 区切り線: 装飾的な線を表示または非表示にします（はい/いいえ）。
- 位置: 区切り線の表示位置を選択します — 名前下、役職下、または説明下。
- 幅: 区切り線の幅を設定します。
- スタイル: 区切り線のスタイルを選択します — 実線、点線、または破線。
- 太さ: 区切り線の太さをピクセル単位で設定します。
- 色: 区切り線の色を選択します。
- 区切り線配置: 区切り線の水平方向の配置を設定します — 左、中央、または右。
- 区切り線下余白: 区切り線の下の間隔を設定します。
ソーシャルアイコン:
- ソーシャルアイコン: ソーシャルメディアアイコンを表示または非表示にします（はい/いいえ）。
- アイコン項目: 個々のソーシャルリンクを追加、並べ替え、設定します。各項目について、アイコンを選択し、表示タイトルを入力し、宛先URLを入力します。新規項目を追加を使用してアイコンを追加するか、項目をドラッグして並べ替えます。
- アイコンの幅: ソーシャルアイコンのサイズを設定します。
- アイコンのパディング: 各アイコンボタンの内側の間隔を設定します。
- 形状: アイコンコンテナの形状を選択します — デフォルト、丸み、円形、またはカスタム。
- ソーシャルアイコンの配置: ソーシャルアイコン行の水平方向の配置を設定します — 左、中央、または右。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、チームメンバーブロックにあらかじめ設定されたデザインを適用できます。3つのテンプレートが利用可能です: ストライプ効果、区切り線、および背景。テンプレートを選択すると、そのスタイルが即座に適用され、その後コンテンツタブと高度な設定タブでさらにカスタマイズできます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、チームメンバーブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 名前のタイポグラフィ: チームメンバーの名前のフォントファミリー、サイズ、太さ、スタイル、行の高さ、文字間隔、大文字/小文字を設定します。
- 役職のタイポグラフィ: 役職テキストのタイポグラフィプロパティを設定します。
- 説明のタイポグラフィ: バイオまたは説明テキストのタイポグラフィプロパティを設定します。
- 名前の色: チームメンバーの名前の色を設定します。
- 役職の色: 役職の色を設定します。
- 説明の色: 説明テキストの色を設定します。
- テキストシャドウ: 事前設定されたサイズ（なし、細線、およびそれ以上のプリセット）を使用してテキストに影を適用します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
境界線:
- 境界線のスタイル: なし、実線、点線、破線から選択します。
- 境界線の幅: 上、右、下、左の境界線の個別の幅を設定します。
- 境界線の色: 境界線の色を選択します。
- 境界線の半径: ブロックの角を各コーナーごとに個別に丸めるか、同期トグルを使用して均一な半径を適用します。
背景:
- 背景スタイル: ソリッドカラー、グラデーション（タイプ、角度、位置、および2つのカラーストップ付き）、または画像背景（位置、繰り返し、サイズ、および添付オプション付き）から選択します。
- 背景のディミング: テキストの可読性を向上させるために、背景画像の上に調整可能な不透明度のオーバーレイを追加します。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
チームメンバーブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにチームメンバーブロックを正常に追加しました！よくデザインされたチームセクションは信頼性を構築し、訪問者があなたのブランドの背後にいる人々とつながるのに役立ちます。画像形状、区切り線のスタイル、背景オプションを試して、洗練されたブランドに合ったチームショーケースを作成してください。