1. What is Elementor

Elementor is a free page builder plugin widely loved by WordPress users. With an intuitive drag-and-drop operation, you can easily build a full-scale website without coding knowledge.

The main features are as follows.

· Real-time preview is possible while editing with a visual editor · Various contents can be freely laid out with a wide variety of widgets · Responsive support, and can be edited while checking the smartphone/tablet display · Sufficiently practical functions are provided even in the free version

In this chapter, I'll focus on an overview of Elementor and how to use it in its free version. We plan to cover everything from the basics to application of page construction for full-scale operation of WordPress sites.

Also, if you're looking for more advanced features, consider the paid version of Elementor Pro. We'll touch on that in more detail in later chapters, so stay tuned.

Intuitive operation by dragging and dropping

The biggest appeal of Elementor is that it can be operated intuitively by dragging and dropping on the page editing screen.

Structural elements such as sections and columns can be easily arranged by simply selecting an area with the mouse. Also, inserting a widget is as simple as dragging a widget and dropping it into a column.

For example, you can insert an image widget like this:

・Select the “Image” widget from the widget list

・Drag and drop into a column

・Upload images and adjust settings

In this way, since layouts can be freely assembled with intuitive operation, it is possible to build a site without knowledge of HTML or CSS.

In addition to mouse actions, Elementor also provides keyboard shortcuts. Work efficiency is also improved, such as canceling the previous operation with “⌘Z”.

As you can see, it can be said that Elementor is a beginner-friendly page builder tool.

2. How to install Elementor

Installed as a WordPress plugin

The easiest way to install Elementor is to install the plugin from the official WordPress directory.

The steps are as follows.

① Log in to your WordPress dashboard

② Go to Plugins > Add New

③ Type “Elementor” in the search box and select “Elementor Website Builder” from the search results

④ Click “Install Now”

The steps above will complete the Elementor installation.

After installation, activate Elementor from the “Plugins” screen.

■2. How to install Elementor

I explained the installation instructions for the free page builder “Elementor” for building WordPress sites. The easiest way to install a plugin from the official WordPress directory is to install and activate it from the admin screen, and you're ready to use it.

Elementor Pro Implementation and License Verification

Elementor Pro is a paid version that allows you to use even more advanced features. Compared to the free version, features such as more advanced widgets, theme builders, and WooCommerce integration have been added.

To use Elementor Pro, you must purchase an annual license from the official website. The prices are as follows.

Essential Plan: $49 per year

Expert: $199 per year

Unlimited: $399 per year

After purchasing a license, you can use Pro features by entering an authentication key from the “License” menu on Elementor console.

It comes with 1 year of support and updates, so don't forget to update your Elementor console.

The detailed features of Elementor Pro will be explained in the next chapter.

3. Basic operation of Elementor

Overview of the page edit screen

Elementor's page editor starts from the WordPress post screen. The feature is that pages can be created intuitively on a larger canvas than a normal editor.

Elements such as sections, columns, and widgets are arranged on the left side of the screen. These are added to the canvas by dragging and dropping, and the layout is assembled.

section: indicates a single area of a page

Columns: layout units within a section

Widgets: parts that display actual content

On the right panel, you can make detailed adjustments such as style settings and responsive support for each element. Since you can work while checking the preview window, it is suitable for creating pages with an emphasis on visuals.

The above is the basic structure of the Elementor page editing screen. It supports full-scale construction of WordPress sites with intuitive operability and rich functions.

Adding sections, columns, and widgets

In the basic operation of Elementor, pages are constructed by combining the three elements of “sections,” “columns,” and “widgets.”

■Sections Sections are elements for dividing large areas of a page. You can set the background color and background image.

■Columns Columns are vertical regions arranged side by side within a section. You can change the number of columns as follows:

1 column | 2 columns | 3 columns | 4 columns

■Widgets Widgets are parts that display actual content (text, images, buttons, etc.). Drag and drop to place widgets within columns.

In this way, you can create a layout with a high degree of freedom by stacking elements in the section → column → widget hierarchy. The characteristic of Elementor is that widgets can also be intuitively manipulated by rearranging, duplicating, and changing styles.

Basic layout editing operations

On Elementor's page editing screen, content can be arranged intuitively by dragging and dropping. First, drag a “section” onto the page from the “Elements” section on the left side of the screen.

We will build content by arranging “columns” within sections and then adding “widgets” to them.

For example, you can create the following layout.

sections

column 1

------------------------

headers

widgets

------------------------

The style of the placed widgets can be finely adjusted in the “Style” tab on the right side of the screen. Use this tab to set the font type, size, color scheme, etc.

Also, with Elementor's powerful “responsive” function, the display is automatically optimized on PCs and mobile terminals. Being able to intuitively construct a layout with a drag-and-drop operation is a major appeal.

4. Elementor widgets

List of widgets available in the free version

Various widgets are also available in the free version of Elementor. The main widgets are as follows.

[Table] ・Basic widget headings, images, text, videos, buttons, dividers, spacers, etc.

・Site widget navigation, site title, site logo, etc.

・Box widgets
Icon boxes, accordions, alerts, counters, etc.

・Form widgets Form fields, field groups, file uploads, etc.

In addition to the above, various widgets such as Google Maps, icon lists, and cards are also provided. The free version is good enough to build a site, but if you need more advanced features, consider Elementor Pro.

[Introduction] Chapter 4 explains the widgets included in Elementor. You can use a variety of widgets in the free version of Elementor, but switching to Elementor Pro will further expand the functionality.

Widgets added with Elementor Pro

More widgets will be available in Elementor Pro. The main widgets are as follows.

<表>Widget name | function overview form widget | create various forms (inquiries, reservations, etc.) portfolio widget | beautifully arrange works and services and introduction slider widget | display images and content in a slide show navigation menu widget | navigation that can also create mega menus </表>

Form widgets make it easy to implement advanced form functionality on your WordPress site. The portfolio widget allows you to showcase your work with filter features and beautiful layouts.

Slider widgets are ideal for main page content, and navigation menu widgets are useful for building advanced menus on large sites.

As you can see, widgets that can meet advanced needs have been added to Elementor Pro for site construction. It will be possible to create a more authentic site.

5. Utilizing templates

Elementor template library

Elementor offers a number of beautifully designed page and section templates. If you use a template, not only can you quickly build a site, but it can also be used as a reference for design.

There are 3 types of templates:

Page Templates: Full one-page layout templates

Block template: A template for a portion (section) of a page

Popup Templates: Templates for pop-ups

You can import a template from the “Add template” button at the top of the edit screen. You can select the desired template from various categories and add layouts to the page by dragging and dropping.

Also, it is possible to save a self-made layout as a template. Build an efficient site by creating highly reusable templates.

How to import ready-made templates

Elementor comes with a number of pre-made templates, and by importing these, you can build a site design in a short time.

The steps are as follows.

1. On the Elementor edit screen, select “Templates” > “Template Library” 2. Select the template you want to import from types such as “block” or “page” 3. Check the template in the preview and click “Import”

You can import a template to your site with this simple operation.

It also has the ability to customize the template itself. For example, the following customizations are possible.

Content: change images and text

Layouts: add/remove columns, etc

Style: Adjust colors, margins, etc.

このようにElementorには豊富な既製テンプレートとカスタマイズ機能が備わっており、サイト構築の大幅な効率化が可能になります。

自作テンプレートの保存と再利用

Elementorではページデザインを自作テンプレートとして保存し、後から簡単に呼び出して再利用することができます。これにより、サイト内の複数ページで同一のレイアウトを活用できるだけでなく、新規サイト作成時にも前回作ったテンプレートを流用可能です。

自作テンプレートの保存手順は以下の通りです。

①Elementorのページ編集画面で「保存テンプレート」ボタンをクリック

②「テンプレートタイプ」で「ページ」を選択

③テンプレートの名前を入力して「保存」

保存したテンプレートは後から以下の手順で呼び出せます。

①Elementorのページ編集画面から「テンプレートライブラリ」に移動

②「保存済みテンプレート」から自作テンプレートを選択

③「テンプレートを挿入」をクリック

このように、Elementorでは自由にテンプレートを作成・再利用できるので、サイト構築が非常に効率化されます。

6. Elementor Proの機能

Elementor Proの主な追加機能

Elementor Proには、無料版では利用できない様々な機能が追加されています。主な機能は以下の通りです。

■テーマビルダー サイト全体のヘッダー、フッター、アーカイブページ、シングルページなどをElementorで自由にカスタマイズできます。

■WooCommerceインテグレーション WooCommerceのプロダクトページやカートなどをElementorでデザインできるようになります。

■プロウィジェット Proでしか使えない機能的なウィジェットが60種類以上追加されます。

フォームウィジェット：コンタクトフォームの作成

価格表ウィジェット：料金表を作成

ポップアップウィジェット：ポップアップの作成

その他、Pro版ではロール管理やメンテナンスモード、スクロールナビゲーションなど、様々な機能拡張ができます。

テーマビルダーによるサイト全体のカスタマイズ

■Elementor Proには、サイト全体をElementorでデザインできる「テーマビルダー」機能が搭載されています。この機能を使えば、ヘッダー、フッター、シングルページ、アーカイブページなど、WordPressサイトを構成するほとんどすべての要素をElementorで自由にカスタマイズできます。

例えば、ヘッダーであれば以下のようにカスタマイズできます。

・ロゴ画像の変更

・メニューの配置変更

・検索窓の追加

・背景画像の設定

・スティッキーヘッダーの設定

このように、Elementorの直感的なドラッグ&ドロップ操作で、サイト全体の見た目をオリジナルにデザインすることができるのがテーマビルダーの最大の特徴です。

WooCommerceインテグレーション

Elementor Proでは、WordPressの人気EC(電子商取引)プラグイン「WooCommerce」と密接に連携しています。WooCommerceを使えば、Wordpressサイトに本格的なオンラインショップを構築することが可能です。

Elementor ProのWooCommerceインテグレーションにより、以下のようなメリットがあります。

・WooCommerceの製品ページやカート、チェックアウトページなどをElementorで自由にカスタマイズできる ・製品アーカイブやプロダクトグリッドなどのWooCommerceウィジェットが利用可能 ・WooCommerceテンプレートの新規作成やインポートができる

したがって、WooCommerceとElementor Proを組み合わせることで、デザイン性の高いオンラインストアをドラッグ&ドロップで直感的に作り上げることができます。ECサイト構築の自由度が飛躍的に向上するでしょう。

このように、Elementor ProではWordPressサイト全般のみならず、WooCommerceを利用したECサイト構築もサポートされています。

7. Elementorに最適なWordPressテーマ

Astra などElementor対応テーマの紹介

Elementorを最大限活用するためには、Elementorと相性の良いWordPressテーマを選ぶことが重要です。特にAstraやOceanWPなどの無料テーマは、Elementorとのネイティブ統合に優れています。

Astraは軽量でカスタマイズ性に優れ、Elementorとの連携が緊密なテーマです。

主な特徴: ・Elementorの機能を最大限に発揮できるよう最適化 ・無駄のないシンプルなデザイン ・細かいレイアウト設定が可能

OceanWPも同様にElementorとの連携が緊密で、豊富なフックを備えています。

主な特徴: ・Elementorウィジェットを追加でき、カスタマイズ性が高い ・無料版でも十分な機能を備える ・高速で軽量な設計

こうしたElementor対応テーマを使えば、Elementorの機能を存分に生かせるだけでなく、テーマ自体のカスタマイズ性も高められます。Elementorの本格運用には最適なテーマ選びが不可欠です。

テーマとElementorの相性

WordPressサイトを構築する際、テーマとページビルダーの相性は非常に重要です。Elementorはテーマを選ばずに利用できますが、一部のテーマではElementorの機能が制限されたり、意図しないレイアウトになる可能性があります。

そこで、Elementorをフルに活用するには、Elementor対応のテーマを選ぶことをおすすめします。例えば、次のようなテーマがElementorに最適化されています。

Astra：軽量でカスタマイズ性が高い無料テーマ。Elementorとの連携に優れる。

Hello Elementor：ElementorのデフォルトテーマでElementorに特化。機能は最小限。

OceanWP：Elementorとの連携に加え、WooCommerceにも対応。

このようにElementor対応のテーマを使えば、Elementorの機能を存分に発揮できます。テーマとの相性がよければ、サイト構築がスムーズに進められるでしょう。

8. Elementorのパフォーマンス最適化

高速化のためのプラグインとテクニック

Elementorを利用したサイト構築では、ページの描画速度低下に注意が必要です。多くのウィジェットやモジュールを配置すると、HTMLやCSSのコード量が膨れ上がり、ページの読み込み時間が長くなる可能性があります。

そこで、次のようなプラグインを利用してページの軽量化を図るのがおすすめです。

Autoptimize：CSSやJavaScriptなどのファイルの圧縮、結合を自動化

WP Smush Pro：画像ファイルのサイズを最適化

Flying Pages：ページキャッシュ機能でページ読み込み速度を向上

また、Elementorのウィジェットやモジュールの使い方にも工夫が必要です。以下のようなテクニックを意識しましょう。

・不要なセクションやウィジェットは削除する

・表示領域外のコンテンツは読み込まない「Lazy Load」を設定する

・ウィジェット内の短縮コードやショートコードは最小限にする

このように、プラグインを活用しながらElementorの設定を見直すことで、サイトの表示速度を向上させることができます。

サイトの軽量化方法

Elementorは非常に高機能なビジュアルビルダーですが、その分リソースを多く消費する傾向にあります。特に画像やビデオなどの重たいメディア素材を多用すると、サイトの表示速度が低下してしまいます。

そこで重要になるのが、以下のような軽量化対策です。

・画像/動画の圧縮 　Webp形式への変換や適切な解像度設定により、メディア素材のファイルサイズを小さくします。

・キャッシュの活用 　ページキャッシュプラグインを導入し、サーバーの負荷を軽減します。

・コンテンツの最小化 　必要最小限のウィジェットやセクションのみ配置することで、無駄な読み込みを抑えます。

・レンダリングの最適化 　Elementorの設定から「Improved Asset Load」などの最適化オプションをオンにします。

このように、適切な設定と運用を心がけることで、Elementorサイトでも十分な表示速度を実現できます。

9. Elementorのカスタマイズ

おすすめの無料/有料アドオン

Elementorの機能を拡張するためのさまざまなアドオンが提供されています。 無料で利用できるおすすめの人気アドオンは以下の通りです。

Essential Addons for Elementor：様々なウィジェットを追加するオールインワンアドオン

ElementsKit Lite：レスポンシブレイアウトやヘッダー/フッターなどの機能を追加

Happy Addons for Elementor：ウィジェット、テンプレート、拡張機能などを搭載

また、有料のElementor Proには次のような拡張機能が含まれています。 ・テーマビルダーでサイト全体をカスタマイズ ・WooCommerceインテグレーションによる製品ページ作成 ・リッチなコンテンツウィジェットやフォームウィジェット ・追加ページスタイルやスクロールエフェクトなど

Elementor Proの価格は年額49ドル(約6,500円)からとリーズナブルです。

このように無料/有料アドオンを活用することで、Elementorの機能をより高度にカスタマイズでき、サイト構築がさらに効率的になります。ユーザーのニーズに合わせてアドオンを組み合わせるといった使い分けも可能です。

CSSによるカスタマイズ方法

Elementorでは、ページビルダーでの直感的な編集に加えて、CSSによるカスタマイズも可能です。これにより、テーマの標準設計を超えた細かな調整ができるようになります。

Elementorには、ページごとにCSSをカスタマイズする「カスタムCSS」という機能があります。

【手順】

①ページ編集画面の「設定」アイコンをクリック

②「カスタムCSS」を選択

③CSSを入力して「適用」ボタンを押す

例えば、以下のCSSでヘッダーの背景色を変更できます。

.site-header { background-color: #333; }

また、Elementor Proを利用すれば、「セレクターを追加」ボタンを使って特定のウィジェットだけをターゲットにCSSを設定できます。

さらに、「グローバルスタイル」機能でサイト全体のスタイル設定も可能です。一度設定すれば、すべてのページに反映されるので効率的です。

このようにElementorでは、直感的なビジュアル編集とCSSによる細かなカスタマイズを組み合わせることで、きめ細かいWebサイト構築が実現できます。

10. Elementorの運用とメンテナンス

既知の不具合と対処法

Elementorには一部不具合があり、それらへの対処が必要となる場合があります。主な不具合と対処法は以下の通りです。

ページの読み込みが遅い：キャッシュプラグインの導入など、パフォーマンス改善策を講じる

ウィジェットがズレる：正しい階層構造でウィジェットを配置するよう注意する

編集画面が反応しない：一旦ページを再読み込みした上で、作業を再開する

このように、Elementorでは様々な不具合が生じる可能性がありますが、適切な対処を行うことで解決できる場合がほとんどです。不具合発生時は公式サポートやオンラインコミュニティなどで情報収集し、対応策を講じるようにしましょう。また、Elementorの定期的なアップデートも不具合解消に有効です。

■10. Elementor Operation and Maintenance This chapter explains how to keep Elementor running safely and securely...

Regular updates

Elementor is actively being developed, and new features and bug fixes are regularly being made. Therefore, it's important to always keep it updated to the latest version.

You can easily check for updates from the WordPress admin screen. When a new version is released, an update notification will appear at the top of the dashboard.

Elementor: 3.8.2

Updatable: update

Click on the notification to see the details of the update as described above. Simply click “Update” and the update will be performed safely and securely.

Also, if you're using Elementor Pro, you'll automatically be notified by email when a new version is released, so you can update without missing out.

In this way, by keeping Elementor up to date, you can always take advantage of new features and expect stable operation.

Elementor is a very good page builder tool, but Webflow is attracting attention as a more advanced no-code website building tool.

・Webflow is a cloud-based website builder that requires no coding

・HTML, CSS, and JavaScript are automatically generated, and fully customizable sites can be built

・Equipped with a drag-and-drop visual editor and advanced design features

・Optimized for responsive web design

・It is also compatible with building e-commerce sites, making it a recommended tool for growing companies

・Compared to Elementor, it is more flexible, and it is possible to build a full-scale website

As a cutting-edge no-code website building tool, Webflow has more advanced features and customizability than Elementor, and is expected to become popular in the future.

‍