Diviで同じカラムの高さではなく、モジュールの高さを同一に設定する方法

エレガント ThemesのDiviは Row Settingsにカラムの高さを同じに設定するオプションが提供されます。

上記のように日本語版では、 行モジュールの設定>高度なデザインの設定で "列の高さ菌ヅンファ「オプションを "はい"に設定します（日本語翻訳に奇妙な部分があります）。

しかし、透明なバックグラウンドなどのモジュールに適用されるいくつかの特殊なデザインは、モジュールに適用されることができないカラムに適用可能です。 このような場合、問題になることがあります。 （例えば、XNUMXつの列で同じ複数のカラムにモジュールを自由に移動することは不可能であるとします。）

このような場合は、次のようなjQueryコードを WordPress 管理パネルの Divi>テーマオプション>統合 部分に追加して、一つの行（Row）内にあるモジュールのクラス（例えば、.equal1）を指定することができます。

<script type="text/javascript">
(function($){

// Window Load
$(window).load(function() {
var viewport = $(window).innerWidth();

if (viewport >= 960) {
equal_height($('.equal1'));
equal_height($('.equal2'));
}
});

// Window Resize
$(window).resize(function() {
var viewport = $(window).innerWidth();

if (viewport >= 960) {
equal_height($('.equal1'));
equal_height($('.equal2'));
} else {
$('.equal1').attr('style', '');
$('.equal2').attr('style', '');
}
});

function equal_height(group) {
var tallest = 0;

$(group).attr('style', '');

group.each(function() {
var this_height = $(this).height();

if (this_height > tallest) {
tallest = this_height;
}
});

group.height(tallest);
}

})(jQuery);
</script>
// Source: http://sundari-webdesign.com

上記のjQueryのソリューションの代わりにCSSも可能です。 次のコードをチャイルドテーマのスタイルシートファイルやテーマオプションの「ユーザーカスタマイズCSS "の部分に追加するようにします。

.et_pb_equal_columns .et_pb_column {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.et_pb_module {
max-width: 100%
}

.et_pb_text_align_center {
margin: 0 auto;
}

ちなみにこのCSSコードは、すべてのブラウザでテストしたものではないため、一部のブラウザでは正常に動作しない場合があります。

参考までに、上記のコードは、flexboxは正常に動作しないですね。 使用時には注意が必要になると思われる。

Diviを使用して質問がある場合は、サポートフォーラムに投稿してください。 Theme■サポート担当者から返信を受けることができます。 サポートを数回利用してみましたが、比較的忠実な答えを聞くことができました。 たまに返事が遅くなる場合があります。 その後、PM（プライベートメッセージ）を送信するほとんどの返信を受けることができました。 もしかしたら、誰も答えを知ってくれればPMを送ることもまともな方法です。

速度が速いテーマをご希望の場合 WordPressで、基本的に提供される無料のテーマをカスタマイズして使用することができます。 有料テーマの場合個人的な経験上 Enfold와 ディビ テーマは、まともな速度を示しました。 （現在、このブログにDiviテーマが適用されています。）

メモ：

• エレガント ThemesのDiviテーマツアー