Elementor の 14 の便利な CSS スニペット

公開: 2022-12-13

Elementor が提供する組み込みのスタイリングオプションは、プロフェッショナルなページを作成するのに十分すぎるほどです。適用したい特定のスタイリングがあるが、Elementor で利用できない場合は、カスタム CSS を介して実現できます。

最も単純な例。 Elementor には、[続きを読む] リンクの外観をボタンのようなものに変更する組み込みのスタイル設定オプションはありません。これは、多くの Web サイトで採用されています。これを実現するには、続きを読むリンクをボタンのようなものにする CSS スニペットを追加する必要があります。カスタム CSS 自体を追加するには、設定パネルの[詳細設定]タブに移動します。 カスタム CSSブロックの使用可能なフィールドに CSS コードを追加できます。

すべての Elementor 要素タイプにカスタム CSS を追加できます。セクション、コラム、ウィジェットへ。

Elementor では、各ウィジェットとそのサポート要素 (投稿タイトル、投稿メタ、投稿ウィジェットの注目の画像など) にクラスセレクターがあります (Elementor ウィジェットセレクターのリストを参照)。特定のウィジェットまたはウィジェットの要素をターゲットにするには、 selectorの後にクラス名を入力することから始めます (例: .elementor-post__read-more )。次に、中かっこの間にカスタムスタイルを追加できます。例：

 セレクター .elementor-post__read-more{
    パディング: 0.4em 0.8em;
    背景: #33ff41;
    トランジション: すべての .5s;
    ボーダー半径: 5px;
}

上記のコードスニペットは、[続きを読む] リンクをボタンのようなものに変えます。まず、read more 要素 ( selector .elementor-post__read-more ) をターゲットにします。次に、中括弧内のコンテンツを介してカスタムスタイルを続きを読む要素に追加します (続きを読む要素は投稿ウィジェットとアーカイブウィジェットにあります)。 CSS では、中括弧内の内容を宣言と呼びます。

最近、一部のウィジェットに CSS スニペットを追加する必要があるいくつかのプロジェクトに取り組みました。この投稿でそれらを共有します。新しい CSS スニペットを取得するたびに、この投稿を定期的に更新します。

Elementor の無料 CSS スニペット

1. 続きを読むリンクをボタン風にする

コード：

 セレクター .elementor-post__read-more {
    パディング: 0.3em 0.8em;
    色: #ffffff!重要;
    境界線: 実線 1px #01B37E;
    行の高さ: 2em;
    背景: #01B37E;
    トランジション: すべての .5s;
    ボーダー半径: 15px;
    フォントの太さ: 500;
}
/* ホバー時 */
セレクター .elementor-post__read-more:hover{
    パディング: 0.3em 0.8em;
    色: #01B37E!重要;
    境界線: 実線 1px #01B37E;
    行の高さ: 2em;
    背景: #ffffff;
    トランジション: すべての .5s;
    ボーダー半径: 15px;
    フォントの太さ: 500;
}

上記のコードは、read more 要素を持つ Posts ウィジェットと Archive Posts ウィジェットで使用できます。

2. 番号付きページネーションに高度なスタイルを追加する

コード：

 /*正常な状態*/
セレクター.elementor-pagination{
    マージントップ: 50px;
}
セレクター.ページ番号{
    パディング: 10px 15px;
    色:#FFFFFF!重要;
    背景: #0161cd;
    トランジション: すべての .5s;
    ボーダー半径: 20px;
}
/* ホバー状態 */
セレクター .page-numbers:hover{
    パディング: 10px 15px;
    色:#384958!重要;
    背景: #edf2f7;
    トランジション: すべての .5s;
    ボーダー半径: 20px;
}
/* アクティブ状態 */
セレクター.page-numbers.current{
    パディング: 10px 15px;
    色:#384958!重要;
    背景: #f0f3f6;
    トランジション: すべての .5s;
    ボーダー半径: 20px;
}

上記のコードは、ページネーション要素を持つ投稿ウィジェットとアーカイブ投稿ウィジェットで使用できます。 Elementor でページネーションを追加する方法については、以前の記事を参照してください。

3. 個々の投稿アイテムにホバー効果を追加する

コード：

 セレクター .elementor-post:hover{
     トランジション: すべての .50s イーズインアウト。
    変換: スケール (1.01);
    カーソル: ポインタ;
    Z インデックス: 1;
}

上記のコードは、投稿ウィジェットとアーカイブ投稿ウィジェットでも使用できます。 Elementor で個々のブログ投稿アイテムにホバー効果を追加する方法については、以前の記事をお読みください。

4. 投稿のサムネイル/アイキャッチ画像にホバー効果を追加する

コード：

 selector .elementor-post__thumbnail:hover{
     トランジション: すべての .50s イーズインアウト。
    変換: スケール (1.05);
    カーソル: ポインタ;
    Z インデックス: 1;
}

上記のコードは、投稿ウィジェットとアーカイブ投稿ウィジェットで使用できます。メインの投稿設定で必ず画像を表示してください。

5. 投稿タイトルにホバー効果を追加する

コード：

 セレクター .elementor-post__title{
    表示: インライン;
}
selector .elementor-post__title:hover{
    テキスト装飾: なし;
    box-shadow: inset 0 -.5em 0 #F8C273;
    色:継承;
    表示: インライン;
}

上記のコードは、投稿タイトル要素を持つ投稿ウィジェットとアーカイブ投稿でも使用できます。

6. リンクへのホバー効果の追加

コード：

 selector .elementor-widget-theme-post-content a:hover{
	  テキスト装飾: なし;
    ボックス シャドウ: インセット 0 -.5em 0 #FD63FD;
    カラー: #B017B0;
}

Elementor Theme Builder を使用してカスタムの単一の投稿テンプレートを作成するときに、投稿コンテンツウィジェットで上記を使用できます。詳細については、この投稿をお読みください。

7. 投稿情報ウィジェットでアバターの境界線の半径を設定する

コード：

 セレクター .elementor-アバター {
    境界線: 2px ソリッド #FFFFFF;
    ボーダー半径: 10px;
}

このコードは、投稿情報ウィジェットで使用できます。使用するには、メタデータ設定でアバターを有効にしてください。詳細については、こちらをご覧ください。

8. グラデーションプログレスバーの作成

コード：

 セレクター .elementor-progress-bar
{
背景：放射状グラデーション（円、rgba（7,149,238,1）16％、rgba（37,252,255,1）70％）;
}

上記のコードを使用して、プログレスバーウィジェットを使用してグラデーションプログレスバーを作成できます。詳細については、こちらをご覧ください。その他のグラデーションオプションについては、次の投稿を参照してください。

Elementor用の70以上の高度なグラデーション背景
Elementorの18の3色グラデーション背景
Elementorの17のパステルグラデーション背景

9.グラデーションテキストの作成

コード：

 セレクター.elementor-text-editor {
    background-image: linear-gradient(左へ、#feac5e、#c779d0、#4bc0c8);
    -webkit-background-clip: テキスト;
    表示: インラインブロック;
    -webkit-text-fill-color: #00000000;
}

テキストエディターウィジェットで上記のコードを使用できます。他のウィジェット (見出しなど) にグラデーションテキストを作成するには、セレクターを置き換えるだけです。詳細については、この投稿をお読みください。

10.ホバー時の画像のスクロール

コード：

 セレクタ{
    -webkit-transition: イーズインアウト 4 秒!重要;
    トランジション: イーズインアウト 4 秒!重要;
}
セレクター：ホバー{
    background-position: 中央下 !重要;
}

上記のコードを使用して、ホバー時に画像を自動的にスクロールできます。ランディングページ、ホームページ、ブログページなどの長いスクリーンショットを表示するのに役立ちます。詳細については、この投稿をお読みください。

11.スクロールダウン時のヘッダー変更

コード：

 .header-2 {
 変換: translatey(-80px);
 -moz-transition: すべての .3s 容易さ!重要;
 -webkit-transition: すべての .3s 容易さ!重要;
 トランジション: すべての .3s 容易さ!重要;
}

.elementor-sticky--effects.header-2 {
 高さ: 自動!重要;
 変換: 翻訳 (0px);
}
.elementor-sticky--effects.header-1 {
 表示: なし!重要;
}

下にスクロールすると自動的に変化するヘッダーを作成したいですか? はいの場合は、上記のコードを使用できます。詳細については、この投稿を参照してください。

12.スクロールダウン時にヘッダーを縮小

コード：

 header.sticky-header {
    --ヘッダーの高さ: 90px;
    --不透明度: 0.90;
    -- シュリンクミー: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s イーズインアウト。
    transition: 背景色 var(--transition),
                背景画像 var(--transition),
                背景フィルタ var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !重要;
    背景画像: なし!重要;
    不透明度: var(--不透明度) !重要;
    -webkit-backdrop-filter: ぼかし(10px);
    背景フィルター: ぼかし (10px);
}
header.sticky-header > .elementor-container {
    トランジション: 最小高さ var(--トランジション);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!重要;
    高さ: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header.elementor-nav-menu.elementor-item {
    トランジション: パディング var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!重要;
    padding-top: 10px!重要;
}
header.sticky-header > .elementor-container .logo img {
    トランジション: 最大幅 var(--トランジション);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

上記を使用して、スクロールダウンで自動的に縮小し、スクロールアップで元のサイズに戻るヘッダー動作を作成できます。詳細については、この投稿を参照してください。

13. 見出しテキストに画像の背景を追加する

コード：

 selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") 緑の繰り返し 30% 70% ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

上記のコードを使用して、ヘッダーウィジェットに画像の背景を追加できます。画像の URL を置き換えるだけで、独自の画像を使用できます。詳細については、この投稿をお読みください。

結論

Elementor には、すべての要素をスタイルアップするための組み込みオプションが多数用意されています。セクション、列、ウィジェットなど。それだけでは不十分な場合は、CSS の知識があれば、CSS スニペットを使用して独自のカスタムスタイルを適用できます。カスタム CSS 自体を追加する機能は Elementor Pro でのみ使用できるため、カスタム CSS を追加する前に、WordPress Web サイトに Elementor Pro がインストールされ、アクティブ化されていることを確認してください (参照: Elementor Free と Pro)。

プロジェクトに同じケースがある場合は、上記で提供した CSS スニペットを使用できます。

Elementor Proをダウンロード

Elementor の 14 の便利な CSS スニペット

Elementor の無料 CSS スニペット

1. 続きを読むリンクをボタン風にする

2. 番号付きページネーションに高度なスタイルを追加する

3. 個々の投稿アイテムにホバー効果を追加する

4. 投稿のサムネイル/アイキャッチ画像にホバー効果を追加する

5. 投稿タイトルにホバー効果を追加する

6. リンクへのホバー効果の追加

7. 投稿情報ウィジェットでアバターの境界線の半径を設定する

8. グラデーション プログレス バーの作成

9.グラデーションテキストの作成

10.ホバー時の画像のスクロール

11.スクロールダウン時のヘッダー変更

12.スクロールダウン時にヘッダーを縮小

13. 見出しテキストに画像の背景を追加する

結論

8. グラデーションプログレスバーの作成