WordPressでフリップボックスを作成する方法のチュートリアルをお探しの方に、包括的なガイドラインをご用意しました。
必要なのは、ゼロからフリップ・ボックスを作る方法だ。その前に、フリップボックスの詳細を学んでおこう。
WordPressのフリップボックスとは？
A フリップボックス は、テキストとビジュアルを組み合わせたインタラクティブなコンテンツ要素です。
一般的に2つの面を持つ。魅惑的なフリップ効果と組み合わせた創造的な方法でテキストを提示するために一般的に使用されます。
フリップボックスは魅力的でインタラクティブな要素であり、訪問者の注意を即座に引くことができるため、人々はフリップボックスを追加します。
では、フリップボックスに関する他のシナリオを見てみよう。
美しいテーブルを作る
ブロックエディター付き
なぜWordPressでフリップボックスを使うのか？
フリップボックスは、WordPressのコンテンツをいくつかの方法で向上させることができる強力なデザイン要素です。ここでは、フリップボックスを使う価値がある理由を説明します：
- 注目を集める:フリップボックスは磁石のように訪問者の注意を引き、好奇心を高め、さらに探検するよう促す。
- 重要情報のハイライト:フリップボックスは、表には重要な詳細を正確に示し、裏には説明やさらなる詳細を提供することで、コンテンツをより包括的なものにします。
- コネントをエレガントに贈る： フリップボックスを使えば、コンテンツをエレガントに見せることができます。フリップボックスは、プレーンテキストや静的なボックスの代わりに、サービス、チームプロフィール、CTAなどをスタイリッシュに表示できます。
あなたのウェブサイトでフリップボックスを使用するいくつかの利点を学んだので、以下のメインチュートリアルに向かいます。
WordPressでフリップボックスを作成する方法
WordPressにはフリップボックスを作成するコアブロックがないため、サードパーティのプラグインである フリップボックス.
Flipboxには、フリップボックスをより魅力的にするクールなプラグインCSS3エフェクトのコレクションがあります。どのページビルダーでも動作し、デフォルトでレスポンシブに対応しています。
ステップ1：フリップボックスの取り付け
最初のステップは、ウェブサイトのダッシュボードにログインしてFlipboxプラグインをインストールすることです。次に プラグイン (1) > 新しいプラグインを追加 (2). 検索 フリップボックス (3) そして プラグインをインストールする (4).
インストール後、プラグインを有効化することをお忘れなく。
ステップ2：フリップ・ボックスの作成
をクリックする。 フリップボックス (1) そして 新規作成 そのあと (2).
ページで好きなスタイルを選び、"スタイルを作成 "をクリックする。下にスクロールすると、数多くのスタイルが表示されます。
与える 名称 フリップボックスへ (1)を選択する。 レイアウト番号.その レイアウトは スタイル 以前にも見たことがあるだろう(各スタイルには3つのレイアウトがあります。).最後に セーブ button (3).
ステップ3：フリップボックスをカスタマイズする
すべてのオプションはカスタマイズのためのものです。必要に応じてカスタマイズしてください。プレビューは同じページの下にあります。
を選択する。オープン・フリップ・ボックス・フロム" ボタンをクリックしてコンテンツを挿入する。
を入力する。 フロントタイトル (1)そして フロント・アイコン (2)をクリックし、最後に 画像のアップロード フロント用の画像をアップロードする (3).
同じページを下にスクロールして バックエンド情報 または内容の詳細テキスト (1) そして バックエンドボタンのテキスト (2).を入力することもできます。 ボタンリンク よろしければ (3).その後、バックエンドの背景画像に画像を設定する必要があります。画像のアップロード” (4).
すべての設定が終わったら、"投稿する「ボタン (1).
You can お好みでフリップボックスを追加する.フォロー ステップ3」ガイドラインの繰り返し をクリックすると、現在のフリップボックスにさらにフリップボックスが追加されます。
また、次のこともできる。 編集または削除 フリップボックスのオプションもご覧ください。フリップボックスにカーソルを合わせると、オプションが表示されます。
編集とカスタマイズが終わったら、" をクリックします。行ごとの項目” (1) で、1行に表示するフリップボックスの数を指定します。私は1行に3つのアイテムを表示したいので、3つのアイテムを選択した。では 投稿する button (2).
その後、Flip Boxを保存する必要があります。保存ボタンをクリックしてください。 (1).
ステップ4：フリップボックス・ショートコードを挿入する
こちらへ フリップボックス (1) そして ショートコードをコピーする (2).
フリップボックスを表示したい投稿またはページに移動します。そのためには 投稿 (1) > すべての投稿 (2) そして その投稿やページを編集する (3). N.B. ページを編集する場合も同様ですが、次のページに移動する必要があります。 ページ > すべてのページ 第一に
フリップボックスを挿入するには ショートコード・ブロックをクリックし、エディター(1)の "+"アイコン（ブロックアイコンの追加）をクリックし、"ショートコード「検索ボックス内の (2).をクリックしてください。 "ショートコード" エディタに挿入する(3).
ショートコードを貼り付けます。 (1) をクリックし、投稿またはページを保存または公開します。
以下がそのデモだ。
最終的な感想
WordPressでフリップボックスを作成するのは、ウェブサイトのデザインとエンゲージメントを高める簡単な方法です。フリップボックスは、シンプルな追加機能でありながら、閲覧者の印象に残ることができます。
上記のステップに従えば、プロフェッショナルに見えるダイナミックで視覚に訴える要素を簡単に統合し、訪問者がコンテンツとどのようにやりとりするかを改善することができます。
このガイドラインに従うのは簡単だったと思う。しかし、もしあなたが何か困難に直面したら、下のコメント欄で教えてください。喜んでお手伝いさせていただきます。
また、このチュートリアルをソーシャルメディアを通じて友人と共有することもお忘れなく。
続きを読む
