Elementor を使用して完全にカスタムの Web サイト フッターを作成する方法

コードを 1 行も触れずに、独自の Web サイトのフッターを作成およびカスタマイズする方法を考えたことはありますか? 

おとぎ話のように聞こえますよね？さて…今度は物語が現実になります！ ✨

最も人気のあるページ ビルダー Elementor を使用すると、目立つフッターを完全に柔軟に作成できます。 

として ウェブ訪問者の 66% 実際にはスクロールしないと見えない部分の下を移動するため、フッター セクションはユーザーと対話できる必要があります。そうしないと、瞬く間に顧客の大部分を失うことになります。

しかし、まだ心配しないでください。この記事では、Elementor を使用して Web サイト用に完全にカスタムの Web サイト フッターを作成する効果的な方法を説明します。 🙌

それでは、本題に入りましょう！ 

フッターが重要な理由

知っていますか、収益を急増させることができます 約16%までにビジネス 簡単にナビゲートできるフッターを追加するだけですか?

膨大なユーザーエンゲージメントに加えて、SEO にも非常に効果的です。内部リンク構造が改善され、ナビゲーションがこれまでよりスムーズになりました。

幸いなことに、サイト全体のリンクまたは定型リンクとして内部リンクを含む目を引くフッターを追加するだけで、これらの機能をすべて利用できます。

しかし、フッターにはリンクだけが含まれるのでしょうか? 🤔

いや…❗

を追加できます 製品デモ、購読ボタン、またはお問い合わせフォーム あまりにも！したがって、顧客は Web サイトを簡単に閲覧できるだけでなく、製品についての明確なコンセプトを得ることができます。

かなり印象的ですね。

持続する！ここで、特にあなたにとってもう 1 つのボーナス事実をご紹介します。

これらすべての機能をフォールド内に追加するだけでなく、次の機能も追加することを忘れないでください。 目を引くCTAボタン！したがって、ユーザーは感銘を受け、本当の顧客に変わるでしょう。

それは双方にとってwin-winの状況ですよね？

フッター セクションの作成方法と、Elementor を使用して訪問者のエクスペリエンスを向上させることで、フッター セクションがブランドにどのようなメリットをもたらすかを説明します。

ウェブサイトのフッターに追加する必要があるもの

優れた Web サイトのフッター デザインの主な要素は次のとおりです。ユーザー側で作成およびカスタマイズできるすべてのセクションを取り上げたいと思います。 

1. ロゴ
2. 会社概要 
3. 連絡先詳細
4. ナビゲーション
5. サポート
6. 著作権、利用規約、プライバシーポリシー
7. ソーシャルメディアアイコン
8. アクションの呼び出し

Elementor でカスタム フッターを作成するために必要なもの

このチュートリアル ブログに従うには、2 つのことが必要です –>

• エレメンター
• ElementsKit

そして完了！

Elementor と ElementsKit を選ぶ理由 

大量のコードなどを含む Web ページのデザインに問題がある場合。心配ない！最も強力なページビルダー Elementor が登場しました! 

Web サイトのフッターをドラッグ アンド ドロップで完全に制御できます。現在のフッターの見た目が気に入らない場合は、Elementor が最適な選択です。 

Elementor には、Web サイトを簡単にカスタマイズするための便利なアドオンが含まれています。 ElementsKit はその中でも最も人気があり、強力なフッター ビルダー、85 個以上のウィジェット、デザインを改善するための既製のフッター レイアウトを備えています。 

このチュートリアルでは、ElementsKit を使用して美しいカスタム Elementor フッターを作成する方法を学びます。 

それでは、始めましょう。

Elementor を使用して完全にカスタムの Web サイト フッターを作成する方法

このセクションでは、わずか数ステップで Web サイトのユーザーインタラクティブなフッターをカスタマイズまたは作成する方法を説明します。

ステップ->1: フッターを追加する

まず、Elementor を使用して完全にカスタムの Web サイト フッターを作成するには、Web サイト管理ダッシュボード パネルにログインします。 

• 案内する ElementsKit → 私のテンプレート 
• クリック 新しく追加する. 

ポップアップ ボックスが開き、オプションが表示されます。

ステップ->2: フッターオプションを選択します

• 次に、ポップアップ ボックスに次のように入力します。 タイトル。 例: カスタムフッター
• タイプを選択→ フッター
• 条件を選択→ サイト全体
• を切り替えます アクティベーションオプション 
• クリック 「エレメンターで編集」

エディター ページが開きます。ここでフッター セクションの外観を構築します。

ステップ->3: Web フッターのデザインを選択する

Web サイトのフッターの作成を最初から開始することも、以前に作成したフッターの 1 つを開始点として選択することもできます。

• Web サイトのフッターをデザインするには、 選択したアイコン-> に行きます フッタータブ
• をクリックするだけです 挿入ボタン 追加すれば完了です。 

ステップ->4: 一般的なレイアウトを設定する

この設定では、 レイアウトの種類 カスタムフッターを作成したいとします。

• 「メインのカスタマイズ」ボタンをクリックします。 フッター部分のサイドバーのレイアウトセクションを編集します。
• 「ストレッチ」セクションを有効にします。 JS を使用してセクションをページの幅全体に引き伸ばします。
• コンテンツの幅を設定: ドロップダウンからコンテンツのボックス幅または全幅を選択します。また、ドラッグするだけで制御できます。 
• 列のギャップを選択してください: 狭い、拡張する、広い、広いを選択します
• 高さの調整: 画面に合わせるか最小の高さを選択します
• 垂直方向の配置を選択します。 上、中、下、間隔、周囲の間隔、均等な間隔を選択します
• オーバーフロー： デフォルトのままにするか非表示にする 
• HTML タグを選択します: ドロップダウンから選択します

ステップ->5: ロゴを追加する

検索エンジンの可視性を高めるために、製品 Web サイトのフッターに会社をリンクする必要があります。その場合、会社のロゴをクリックすると、ユーザーはホームページに戻ります。また、簡単な手順で非常に簡単にロゴを追加できます。 

• クリックしてください ロゴイメージ→ 画像を簡単にアップロードするか、メディア ファイルから選択します。
• 簡単に選択できます 画像サイズ ドロップダウンから
• を選択してください 位置合わせ 左、中央、または右
• 任意のタイプを追加できます 画像キャプション 添付ファイルのキャプションやカスタム キャプションなど
• を選択してください リンクタイプ メディア ファイルまたはカスタム URL。任意のリダイレクト URL を指定できます。 

ステップ->6: 会社概要の追加または編集

さて、Web サイトのフッターは重要な情報を表示する場所です。会社についての短い概要を簡単に追加できます 

• この設定では、次のことができます 追加または編集 あらゆる種類のテキスト 
• ドロップキャップを有効にする コンテンツの冒頭に大きな文字を表示し、より目を引くようにします。 

ステップ->7: ソーシャル共有アイコンを追加する

知っていましたか、 72% の Web サイトではソーシャル メディア アイコンが使用されています Elementor を使用して完全にカスタムの Web サイト フッターを作成するには?

Twitter、Facebook、Instagram などの最新の投稿を表示するウィジェットを追加すると、ユーザーがつながりを保つのに役立ちます。 

ソーシャル メディア アイコンをカスタマイズし、下部のアイコンにソーシャル共有リンクを追加します。あなたがする必要があります→

• ソーシャル ウィジェットをクリックしてソーシャル アイコンを編集します。 
• スタイルを選択します: アイコン、テキスト、またはその両方
• 整列位置を選択 左、中央、または右
• クリックしてください Facebook コンテンツ 拡大するために
• アイコンを追加: ライブラリからアイコンをアップロード
• 追加/編集 ラベル
• 提供する ソーシャルリンク
• アイコンをカスタマイズする 通常とホバーの両方で
• 追加 背景色
• 追加 枠線の種類: 実線、二重、点線、破線、溝
• 選択する テキストシャドウ: ぼかし、水平、垂直
• 選択する ボックスシャドウ: 水平、垂直、ぼかし、広がり
• 選択する 位置： アウトラインまたはインセット

ステップ->8: 著作権を含める

著作権情報はフッターに必須の要素です。それはあなたのウェブサイトを盗作から守る最良の方法だからです。 

• コンテンツを簡単に追加または編集
• ドロップダウンから HTML タグを選択します 

ステップ->8: 連絡先情報の見出しをカスタマイズする

Web デザインの標準に従って、 連絡先 フッターの右または中央にあるはずです。ただし、いくつかの手順で簡単にカスタマイズできます。

• 追加/編集 ここに連絡先の見出しテキストを入力します
• 提供する リダイレクトリンク
• 選ぶ サイズ、HTMLタグ ドロップダウンから
• を選択してください 位置合わせ 左揃え、中央揃え、右揃え、または両端揃え

ステップ->9: 会社の所在地を追加する 

会社の所在地は以下の点で非常に役立ちます。 ローカルSEO。会社住所追加の流れはこちら→

• レイアウトを選択します: デフォルトまたはインライン
• 会社の所在地を追加または編集する 
• リダイレクトリンクを使用してアイコンライブラリから任意のアイコンをアップロードします

もっと詳しく知る - WordPress サイトに Google マップを追加する方法 (最も簡単な方法) 🎉

ステップ->10: CTA の場所ボタン

あ 研究はそれを示しています これは、すべてのマーケティング ページのスクロールせずに見える範囲に CTA を掲載するための最良のオプションです。会社の所在地を表示するための CTA ボタンを追加するプロセスに従ってください→

• ラベル: ボタンのテキストを追加または編集します
• URL: リダイレクト URL リンクを提供する
• 有効にする の アイコンを追加 を提供する ボタンアイコン
• ボタンアイコンをアップロードします アイコンライブラリ またはからアップロードできます あなた自身のライブラリ
• アイコンの位置を選択します: テキストの前またはテキストの後
• 提供する クラス名 または ID

ステップ->11: 電話番号とメールアドレスをカスタマイズする

連絡先番号をサイトに追加すると、SEO の向上に役立ちます。連絡先番号をクリックできるようにすると、訪問者はタップするだけで電話をかけることができます。今度は電話とメールを変更します。

• レイアウトを選択します: デフォルトまたはインライン
• 会社の電話番号と電子メールを追加または編集します
• リダイレクトリンクを使用して任意のアイコンをアップロードします

ビジネス向けにメール リストを増やす方法 – 実証済みの方法 🚀

ステップ->12: リダイレクトリンクを含むショーケースページリスト

もう 1 つの一般的なフッター コンポーネントは、ページへのリンクです。プライバシー ポリシー、利用規約などのページ リストを追加します。ウェブサイトのポリシー、情報、規則などの詳細をページに表示するだけです。方法を確認してみましょう→

• レイアウトの選択
• テキストの追加または編集
• 字幕の追加または編集
• アイコンの表示切り替えを有効にする
• アップロードアイコン
• アイコンの色の選択
• アイコンの位置を選択
• ページリストを表示したいページを検索します
• ラベルの表示を有効にする
• ラベルの追加または編集
• 背景色、タイポグラフィ、パディング、配置、半径をカスタマイズします

WordPress Web サイトのカスタムヘッダーを作成したい場合は、このブログをチェックしてください。 Elementor を使用してカスタムヘッダーをデザインする方法

ステップ->13: フッター上のカスタム Instagram フィード

Web サイトのフッターは、次のような関連するソーシャル メディア フィードを挿入するのに最適なセクションです。 インスタグラムフィード。どのような機能をカスタマイズできるか見てみましょう→

• レイアウト設定から => グリッド スタイル リスト、グリッド、または石積みを選択します
• 列グリッドの選択 1、2、3、または 4 は、画像を表示するために選択する列の数を意味します。
• フィード スタイルを有効にして Instagram フィード効果を提供します
• 表示する投稿の数のカウント値を指定します。
• コメント ボックスを有効にして、投稿に対するユーザーのコメントと反応を表示します。
• [キャプションを表示] を有効にすると、画像の魅力的なキャプションが表示されます。
• 「フォロー」ボタンを有効にして「フォロー」ボタンを追加し、次のページの Instagram リンクを提供します
• ボタンのテキストに従う: ボタンのテキストをカスタマイズする
• リンクをフォローする: リンクをフォローするを提供します
• 配置: ボタンを表示するボタンの位置 (左、右、または中央) を選択します。

ステップ->14: フッターを公開する

• ここが最も重要な部分です。フッターをデザインしたら、「更新ボタン」をクリックするだけです。 

• このセクションの基本的なことは、クリックすることです。 「プレビュー」。 以上です！最後に、フッター部分の準備が整いました。 

イェーイ！！ 🥳

まとめ

フッターについては以上です。 

この Elementor チュートリアル ブログでは、Elementor を使用して表示するフッターを効果的に作成する方法と、サイト上のフッターの重要性を学習したと思います。 

簡単にできるようになることを願っています ElementsKit Elementor アドオンを使用して、完全にカスタムの Web サイト フッターを作成します。

ただし、ご質問がある場合は、お気軽に以下にコメントを残してください。ぜひお手伝いさせていただきます。