MENU
  • ホームHome
  • プロフィールProfile
  • サービスService
  • ご実績Achievements
  • ブログblog
  • お問い合わせContact
  • 開発ツールTools
    • Line公式アカウントバックアップツール
大阪・神戸 ワードプレス初心者向け個人対面レッスン|HealingCode
  • ホームHome
  • プロフィールProfile
  • サービスService
  • ご実績Achievements
  • ブログblog
  • お問い合わせContact
  • 開発ツールTools
    • Line公式アカウントバックアップツール
大阪・神戸 ワードプレス初心者向け個人対面レッスン|HealingCode
  • ホームHome
  • プロフィールProfile
  • サービスService
  • ご実績Achievements
  • ブログblog
  • お問い合わせContact
  • 開発ツールTools
    • Line公式アカウントバックアップツール
  1. ホーム
  2. ブログ
  3. ワードプレスのランディングページを最速で作る!Elementorの設定方法

ワードプレスのランディングページを最速で作る!Elementorの設定方法

2024 6/25
ブログ ワードプレス制作
November 24, 2022June 25, 2024
目次

Elemntorを導入するために必要なもの

WordPress

レンタルサーバーとドメインのご契約が必要になります。
さらにはワードプレスの基本的なセットアップが完了してあることが望ましいです。

Gmailアカウント

Elemntorやその他のプラグインを利用するときにアカウントの作成が必要になります。
Gmailアカウントがあれば紐づけをするだけですので便利です。

必要なプラグインの導入

最低この2つくらいがあれば良いです。

Elementor Website Builder

Elementor本体です。これがないとElemntorは利用できませんので、必須のプラグインです。

Essential Addons for Elementor

記事一覧を作成しようとすると、Elemntor Proの契約が必要になります。このプラグインがあれば無料で記事一覧を作成することができます。

Elementor Header Footer

Elementor専用のヘッダーとフッターを作成しようとすると、Elemntor Proの契約が必要になります。このプラグインがあればヘッダーとフッター無料で作成することができます。

Elemntorの設定

グローバルカラー・グローバルフォントの設定

グローバルフォント

・Sawarabi Mincho

・Noto Serif JP

・Cormorant Garamond

フルワイドで表示する方法

フルワイドのページにするためには2つのステップがあります。

1.固定ページ・投稿ページのテンプレートを「Elementor全幅」もしくは「Elementorキャンバス」にする

多くのブログで「Elementor全幅」にすればフルワイドになると書いてありますが、WordPress全体の設定をフルワイドにしていないとできません。
既存ページを生かしつつ、フルワイドにするには「Elementorキャンバス」を設定することで、フルワイドを実現できます。
ただ、その場合はヘッダーとフッターが消えますので、独自でヘッダーとフッターを用意する必要があります。

2.

WordPressのElementorプラグインで「プレビューを読み込めませんでした」とエラーになる

ワードプレスでElementorのプラグインインストールしても作成できない場合があります

原因その1:elementorのアカウントをつくっていない

こちらにアクセスしてログインできる状態かを確認しましょう。

https://my.elementor.com/websites/

原因その2:Javascript関連が障害になっている

JqueryやJavascript関連でエラーが良く発生します。

例えば、Cocoonを使っていた場合のケースはこちらです。

そのほかにもfunction.phpのプログラムが要因になっている場合があるようです。

Qiita
WordPressのElementorプラグインで「プレビューを読み込めませんでした」とエラーになる - Qiita WordPressでElementorのプラグインを使おうと思ったところ、 プレビューを読み込めませんでした というエラーメッセージが表示されて編集ができない事象が発生しました。 E...

モバイルでカラムを横並びにする方法

https://netchild.net/elementor-2column/#i

ブログ ワードプレス制作
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • Qiita 技術ストックのまとめ
  • ホームページを制作するときに使えるサイト集

この記事を書いた人

HealingCodeのアバター HealingCode

関連記事

  • 25年度版)Line公式アカウントのトーク履歴を簡易取得する方法【無料プラン対応】
    October 3, 2025
  • SEOに使える被リンク対策ツール
    June 25, 2024
  • LINE公式アカウント集計ツールTalkTrackerカスタムの事例1
    May 7, 2024
  • ホームページを制作するときに使えるサイト集
    February 2, 2023
  • Qiita 技術ストックのまとめ
    November 18, 2022
  • ワードプレス初心者におススメのレンタルサーバーはコレ!!
    June 8, 2022
  • ワードプレスリニューアル事例:Me-Moreさま(大阪府枚方市)
    April 15, 2022
  • 「このサイトで重大なエラーが発生しました。」の対応策はどうすればいいのか
    December 12, 2021
カテゴリー
  • SEO対策
  • ソフトウェア開発
  • ブログ
  • ワードプレス制作
最近の投稿
  • 25年度版)Line公式アカウントのトーク履歴を簡易取得する方法【無料プラン対応】
  • SEOに使える被リンク対策ツール
  • LINE公式アカウント集計ツールTalkTrackerカスタムの事例1
  • ホームページを制作するときに使えるサイト集
  • ワードプレスのランディングページを最速で作る!Elementorの設定方法
  • ホーム
  • プロフィール
  • サービスと料金
  • ブログ
  • お問い合わせ
  • 特定商取引法に基づく表記
  • プライバシーポリシー

© 大阪・神戸 ワードプレス初心者向け個人対面レッスン|HealingCode.

目次