WordPressとElementorの使い方講座 -ノーコードツール

WordPressプラグインElementorを使ったサイト構築をレクチャーいたします。
Elementorは、ドラッグ＆ドロップで高度なデザインを可能にするWordPressのページビルダーです。初心者から上級者まで幅広い層に支持されており、カスタムレイアウトの作成や高度なデザイン調整が容易に行えます。

Elementorを使って実際にサイトを構築してみたところ、想像以上に難しい部分があり、納品レベルの案件では、ある程度のプログラミング知識が必要だと感じました。そのため、納品時のトラブルを避け、クライアントの満足度を高めつつ、初心者でも挫折せずに理解しながらサイト作成を進められるようサポートするために、このプランを開設しました。

おすすめポイント

以下でお悩みの方にピッタリのプランです。
・デザインは得意。でもコーディングが苦手な方
・無料のツールで構築したい
・ノーコードツールで挫折した経験がある
・Webサイトの編集機能を充実させたい
・ブログやお知らせ機能を設定したい
・必要なプラグインが知りたい
・適切なテーマのカスタマイズ方法を知りたい

デモサイト

https://engress.info/wp-engress
BASIC認証・ログイン情報:
ユーザー名: client
パスワード: client_user
※クライアント様との共有のため、デザインを購入し、無料のツール及びAstraテーマで構築いたしました。編集者としてログインが可能です。

レクチャー内容

開発環境の構築: ローカル環境を整備し、そのアプリの機能を使って迅速にElementorの環境を構築します。必要なプラグインも揃えて作業を開始できます。
https://gyazo.com/a943933e0dfab5ea6883b0292096c6fc

必須のプラグイン紹介: 無料版のElementorでは、ヘッダーやフッター、その他の部分をパーツ化して管理することが難しいです。これらの機能を補完するためには、適切なプラグインの導入が必要です。そこで、厳選したおすすめのプラグインをご紹介し、レクチャーいたします。

レスポンシブ対応: モバイル端末でも美しく表示されるサイトを作成するための設定方法を解説します。
※詳細はデモサイトで確認できます。

カスタムフィールドの設定: ACFなどのプラグインを活用し、独自のデータを柔軟に管理する方法を学びます。
https://gyazo.com/9d10f91a2f42cdd133b541767893ba18

管理者と編集者の設定: 役割に応じた権限設定を行い、サイト運営を円滑にするためのノウハウをお伝えします。

Astraテーマの基本操作: テーマのカスタマイズについてもご説明いたします。子テーマを作成することで、テーマのアップデート時にもカスタマイズが影響を受けないように対応いたします。詳細はデモサイトの外観テーマを参照ください。

その他: Tailwindcssを使用したライブリロードの開発環境の構築もレクチャー可能です。
https://gyazo.com/ad58ebf4231125f670cbe821bbec7f68

テーマの機能

Astraテーマを使用するメリットは以下の通りです。
カラーパレットのデフォルト設定: テキストや背景色の変更が簡単に行え、統一感のあるデザインを素早く実現できます。
https://gyazo.com/613c0b17088376dae078ccee144c69bd

高速な読み込み速度: Astraは軽量設計で、サイトのパフォーマンスを向上させるため、SEOにも有利です。

まとめ

ElementorとAstraテーマを活用することで、スムーズな運営と編集機能を充実したサイト構築が可能になります。