Elementor：効果のあるヘクスマップを作成する方法

強力なホバー効果のあるヘックスマップを作成する必要がありますページ·ビルダー Elementor ? もしそうなら、この記事でそこに着く方法を見つけてください。

このチュートリアルで説明する内容の概要を知りたい場合は、次のビデオをご覧ください。

このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョンのこのバージョンでのみサポートされているカスタム CSS コードを使用するためです。Elementor.

次のガイドもお読みください。 ブレッドクラムをWebサイトに追加する方法とともに Elementor

次の構造を持つ新しいセクションを作成しましょう 3列、次にパネルで、を定義しましょう横柄シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーを100に設定します。

追加しましょう 内部セクションウィジェット –内側のセクション–中央の列。このウィジェットはデフォルトで2つの列で構成されていますが、そのうちのXNUMXつを削除しましょう。設定しましょう横柄シュール 最小の高さ と 最小の高さ それを定義しましょう 400にスライダー.

タブ内形式、ライブラリから画像を選択して背景画像を設定し、その位置をに設定しましょう 優れた中心、繰り返します 繰り返されない とサイズ カバー.

オン 背景オーバーレイ、cliquezシュール劣化のために 背景タイプ、メインカラーを選択して変更します ＃2299EF と場所 20、次に二次色をオンにします ＃1917BC と場所 50、角度 140 と不透明度 0.85

次に、 タイトルウィジェット でインナーセクション そして、など タイトル、名前を付けてから、タイトルウィジェットの[スタイル]タブで、色を次のように変更します。 ＃FFFFFF。次に、 テキストエディタウィジェット、およびタブ内形式テキストを中央に配置し、色を次のように変更します ＃FFFFFF.

参照してください： Elementorを使用して価格表ウィジェットに画像を追加する方法

もう一度選択してください インナーセクション、タブに移動します 高度な、 セクションで 内部マージン、入力 25-2-2

内側のセクションをもう一度選択して[詳細設定]タブに移動し、[カスタムCSS]セクションで次のコードをコピーして貼り付けます。

/*Traçage Hexagone*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

次に、前のコードスニペットに以下のXNUMX番目のコードスニペットを追加しましょう。

/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

次に、以下のスニペットも貼り付けましょう。

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.hexa-mom::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.hexa-mom:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}