セクション、カラム、ウィジェットにCustom CSSを追加!

ElementorにカスタムCSSを追加する方法について説明します。

Elementor Proを使用すると、すべてのカラム、セクションまたはウィジェットにカスタムCSSを追加できます。?

カラムにCustom CSS


見出しとテキストエディターのウィジェットを入れた図のような状態から、左上のEditカラムを選択します。

左パネルの詳細エリアからCustom CSSにCSSを記述します。

全体の要素をターゲットとするため selector を使用します。

selector に続き、見出しウィジェットをセンター揃えにする場合は、elementorの見出しクラスの

.elementor-heading-titleをselector の後に使用します。なんか面倒くさいので

selector h2 と書けますが見出しタグをH2からH3などに変更した場合、その都度Custom CSSを変更しないといけないため上記のように設定した方が良さそうです。

テキストエディターウィジェットについては、elementorのテキストエディタークラスの

.elementor-text-editor の後にpタグ(←これ重要)を使用します。

ちなみに、ショートカット ⌘+/ でCSSのコメントアウトもできますね。?

セクションにCustom CSS


セクションにCustom CSSを設定したい場合は、Edit セクションを選択します。

カラムにCSSを設定するのと同様にselectorを使用します。

セクションにCSSを設定できました。

あとがき

個別のCSSは設定できますが、そのHP全体でCSSを設定したい場合は、テーマ自体のスタイルシートに設定した方が良さそうです。??‍✈️

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.