テキストセクション

テキストセクションは、列にテキストを表示したい場合に使用します。 テキストセクション Web サイト内のさまざまなページに簡単にリンクしたり、説明付きのリンクを追加したりできます。

リスト アイテムをこのセクションに追加すると、指定した設定とスタイルが適用されます。 このセクションは、チーム、販売するさまざまな製品、および他の多くの目的を紹介するのに役立ちます.


ここで扱われる内容:

  1. テキストセクションとは何ですか?
  2. テキストセクションを追加する
  3. リスト項目の追加と編集
  4. シーケンス リスト アイテム
  5. リスト項目の削除
  6. セクション レイアウトの変更
  7. 要素の管理
  8. スタイルオプション
  9. カルーセル スタイル
  10. 実例

テキストセクション

  • 画像なしでテキストを追加したり、テキストにリンクを追加したりする場合は、テキストセクションを追加できます。

テキストセクションを追加する

  • ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
  • あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。

  •  今すぐ セクションカテゴリ 左パネル
  • 選択する コンテンツ (1)オプションをクリックし、 テキスト タブ (2) から選択できます さまざまなレイアウト とします。

  • 任意のセクション レイアウトを選択し、クリックしてページに追加します。

お願い

  1. からセクション幅を管理できます。 セクション設定 とからのコンテンツの幅 コンテンツ スタイル.
  2. タイトル、サブタイトル、および説明は短く鮮明にします。
  3. 説明フィールドで、 Enter 改行を与えるボタンと Shiftキー+ Enterキー ボタンをクリックして、次の行から開始します。


リスト アイテムの追加と編集

リスト アイテムを追加

セクションを追加したら: 

  • 以下を行うには、 コンテンツを編集する(1) ボタンをクリックして、リスト アイテム パネルを開きます。

  • 以下を行うには、 アイテムを追加 (2) ボタンをクリックして、新しいリスト アイテムを追加します。
  • あなたはするオプションがあります 複製と削除 (3) リストアイテム。


リスト アイテムの編集

編集するリスト項目をクリックします。 特定のリスト項目の編集オプションが開きます。

  • 加える Title (1)、字幕 (2)、および説明 (3) リスト アイテムの。
  • 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
    説明を追加する前に確認してください この 記事。

4. クリック時のアクション

個々のアイテムのクリック動作をカスタマイズできます。 テキストリスト セクション。利用可能なオプションは次のとおりです。

  • リンクへ移動
    このオプションを選択すると、 リンクビルダーを使用すると、このアイテムにハイパーリンクを追加できます。このリンクにより、ユーザーを Web サイト内の別のページまたは外部 URL に誘導できます。 もっと知る 自己紹介 リンクビルダー.
  • ライトボックスで開く
    このオプションではアイテムを拡大して表示します ライトボックス クリックすると表示されます。このモードでは、 サブタイトル の三脚と  詳細説明  アイテムに関連付けられた情報はグリッド ビューには表示されませんが、ライトボックス モードでは表示されます。
  • 何もしません
    このオプションを選択すると、アイテムをクリックできなくなります。選択すると、アイテムをクリックしてもアクションはトリガーされません。

5. 新しいウィンドウでリンクを開く: で開くようにリンクを設定します 新しいタブまたは同じタブで。 これは次の場合にのみ表示されます リンクへ移動 オプションが選択されている場合は、 クリック時のアクション メニュー。

6. ボタンとリンク: 任意のタイプを追加します リンク リスト項目にボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.

7. 保存: カスタマイズを行った後、変更を保存します。

8. カードスタイルのオーバーライド

セクションのカードスタイル設定を上書きすることができます。 スタイル設定 画像リスト セクションで各アイテムのカードを個別にカスタマイズできます。これにより、異なるリスト アイテムに固有のスタイルを適用して、カスタマイズ性を高めることができます。

さらに詳しく ダイナミックセクションのカードオプションについて。


実際のテキスト リスト アイテムの編集を参照してください。


配列表項目

  • リスト項目を簡単にドラッグ アンド ドロップして、順序を変更できます。

リスト アイテムを削除する

リスト アイテムを追加したら、それを編集または削除できます。

  • 以下を行うには、 削除 リスト項目の横にあるアイコン。
  • 以下を行うには、 削除 確認ポップアップのボタン。
  • Save 変更。

お願い

一度削除されたリスト項目は復元できません。


セクション レイアウト

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する レイアウト (2) タブ。
  • 任意のレイアウトを選択して Save (3) お客様の変更。


テキストセクションの要素の管理

テキストリストセクションには、 要素タブ セクション内のさまざまな要素の表示を簡単に管理できます。シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する 要素 (2) タブ。
  • 変更を加えたら、 Save (3)ボタン。

セクションのオプション

  1. 見出しを表示: テキスト リスト セクションの見出しの表示を有効または無効にします。
  2. ボタンを表示: セクション レベルでボタンを表示するかどうかを制御します。

アイテムオプション

  1. ショーのタイトル: タイトルを表示するかどうかを制御します。
  2. 字幕を表示: 字幕を有効または無効にします。
  3. 説明を表示: アイテムの説明の表示を管理します。
  4. ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。


セクションのスタイルを設定する

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する 形式 (2) タブ。
  • リスト項目のスタイルを変更し、 Save (3) お客様の変更。


このセクションには複数のスタイル オプションがあります。 

  1. 表示オプション
  2. モバイルディスプレイ
  3. アラインメント
  4. 文字サイズ
  5. 間隔
  6. セクションの見出し
  7. カードオプション
  8. 影のオプション
  9. ボタンとリンク

表示オプション

  1. に選択します。 アイテムを表示 in 行と列 or カルーセル 
    • を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
    • を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.
  2. をセットする  列の数 テキストリスト用。 1 ~ 10 列から選択できます。
  3. 特定します 列間のスペース リスト項目の。
  4. 特定します 行間のスペース リスト項目の。

ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。

  1. スムーズ スクロールを有効にする: カルーセル内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスが実現します。
  2. 自動スライド: ユーザーの操作なしでスライドを自動的に回転させます。
  3. 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
  4. 自動再生の遅延: 自動再生が有効になっている場合、各スライドの切り替え間の時間間隔を設定します。
  5. カルーセルループ: スライドの連続ループを有効にして、最後のスライドの後にカルーセルがシームレスに再開されるようにします。
  6. カルーセル コントロール:を選択 ナビゲーションコントロールコントロールなし、矢印(中央下/右上/右下)、シェブロン、ドット、水平スクロールから選択できます。


モバイルディスプレイ

  1. の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
  2. 定義 間隔 グリッド間 (ピクセル単位)。

スタジオ設定に基づくデバイス固有の列レイアウト:


アラインメント

  • コンテンツの配置: テキスト リスト内のコンテンツを水平に揃えます。左揃え、右揃え、または中央揃えに設定できます。


文字サイズ

  1. 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
  2. をセットする Title セクションのリスト項目のフォント スタイル。
  3. をセットする サブタイトル セクションのリスト項目のフォント スタイル。
  4. デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
    チェック: ウェブサイトのテキスト スタイル。
  5. このオプションを有効にすると 数字をアニメーション化する に存在する Title の三脚と サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。


間隔

  1. 特定します コンテンツの幅 リストアイテム用。
  2. 特定します セクション見出しの下のスペース ピクセルで。
  3. 特定します タイトルの下のスペース リスト項目の (%)。
  4. 特定します 字幕の下のスペース リスト項目の (%)。


セクションの見出し

  1. 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
  2. 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
  3. をセットする  仕切りの厚さ (ピクセル単位)。
  4. 特定します 仕切りの色 カラーピッカーから。
  5. 選択する ディバイダースタイル をドロップダウンから選択します。
  6. をセットする 見出しの幅 セクション タイトルの表示幅を定義します。最小値は 50% です。


カードオプション


影のオプション

  1. ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
  2. 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
    カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS.
  3. プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。

お願い

スタイル設定は、セクション内のすべてのアイテムに適用されます。 リスト項目ごとに個別に変更することはできません。


ボタンとリンク


カルーセル スタイル

カルーセル スタイルでは、リスト アイテムがスライドショーとして表示されます。つまり、リスト アイテムは次々と循環します。

カルーセル スタイルの仕組みをご覧ください。 


テキスト リスト アイテムをカードとして表示する

  • するとき ショーカード テキスト リストの上に、リスト アイテムの背景に、 設計 のセクションから無料でダウンロードできます。
    参照: ウェブサイトの色と間隔。

ご覧ください: 


ライブ テキスト リストは次のとおりです。 

ライブ デモ サイトを表示します。 


お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。