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を設定したい場合は、テーマ自体のスタイルシートに設定した方が良さそうです。??✈️
