こんにちわ、デザイナーのえみです。先日、ホームページ制作についてのLPを公開しました🎉私はそのデザインから構築までを担当させていただきました🙇
WordPressのプラグインであるElementorを使用して構築を行いましたが、最初に設定しておけばよかった設定があったので皆さんに共有します。Elementorを使用してページ構築を行なっている人の力になれると嬉しいです☺️
設定①固定ページのテンプレートの設定
固定ページから新規固定ページを追加をクリックします。その後、右の固定ページ部分からテンプレートをデフォルトからElementor Canvasに変更してください。これでヘッダーフッターなど不要な要素が非表示になった白いページが制作できます。その後左上のElementorで編集をクリックします。
設定②グローバルカラーとグローバルフォントを設定する
使用する色とフォントを設定できる項目です。デザイン制作時に設定をしていると思うのでそれをそのまま入れ込むだけでデザインのブレを防ぐことができます。
左上のメニューボタンからサイト設定デザインシステムより設定が可能です。
設定③各ウィジェットの余白を消す
Elementorでは構築しやすいように余白がデフォルトで設定されています。デザインを構築する際には不要なものが多いので設定から余白をなくしていきましょう。
コンテナ
コンテナを追加した時に設定を行わないと上下左右にパディングが入ってしまい、下記のような全幅に敷き詰められたデザインを構築することができません。
左上のメニューボタンをクリックし、サイト設定を開きます。その後レイアウトよりコンテナのパディングを0に変更してください。そうすると全てのコンテナの余白がなくなり上記のような全域に敷き詰めるような構築が可能です。
段落
段落の中で改行を行うと余白が設定されているためなくしましょう。
上記と同じで、タイポグラフィから段落間隔を0（もしくは任意の数値）に設定してください。これで無駄な余白を消すことができます。
最後に
いかがでしたでしょうか。上記の3つの設定を行えばElementorを使用した構築がとても楽になると思いますので是非とも設定してみてくださいね。Elementorには他にも作りやすい機能がたくさんあるのでまた公開していきます。
もしElementorを使用したページ構築がわかりにくい、できない、難しい…などの場合は当チームでの代行も可能です。もしよろしければページよりお問い合わせください📩
それではまた🖐️
