レスポンシブな背景画像を作成& Elementorの詳細

Rifat Elementor Jun 17, 2022

Elementorは、ユーザーエクスペリエンスを向上させるために、背景グラフィックのモバイルコントロール、デバッグ用のセーフモードなどの新機能を提供します。

Elementorは、モバイルデバイス向けに設計できることに常に誇りを持っています。 Elementorユーザーにとって、背景画像の位置を正確に取得することは依然として問題でした。 Web開発者として、この問題に遭遇することがよくあります。犬の顔を表示したいが、モバイルでは尻尾のみを表示したい。

Elementorのレスポンシブ背景画像コントロールを使用すると、任意のデバイスのサイズと解像度に適応する背景画像を作成できます。

レスポンシブ背景画像コントロール

最新のElementorバージョンでは、デスクトップ、タブレット、およびモバイルの背景画像コントロールを包括的に制御できます。 このコントロールには、背景画像のコントロール(画像、位置、添付ファイル、繰り返し、サイズ)が含まれています。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

初めて、個々のデバイスの位置をカスタマイズできます。 画像がすべてのプラットフォームで均一に表示されるようにするには、モバイルデバイスの場合は「center-top」、デスクトップの場合は「center-center」を選択します。 デバイスごとに、異なるサイズを選択できます。 モバイルの場合、デスクトップの場合は「含む」、デスクトップの場合は「カバー」を選択します。

これは多くの人にとって大きな問題だったので、多くの人がこの新しい機能を望んでいると確信しています。

Elementorは、個々のデバイスごとに完全に異なる画像を設定する機能をもたらします。 最初の追加のレスポンシブコントロールは、デバイス固有のサイズと場所の形で提供されました。 サイズと位置を調整できるため、さらに一歩進んで、さらに柔軟なデザイン体験を提供できます。

カスタム背景画像サイズ&位置

以前は、背景画像のサイズを設定するためのオプションは、自動、カバー、または含むの3つだけでした。 「左上」と同様に、一般的な背景画像の配置のみを指定できます。

背景のサイズと位置は、将来利用できる2つの新しいカスタムコントロールになりました。

カスタムbackground-positionを使用すると、背景画像の正確なX軸とY軸の座標を選択できます。 その結果、ページの背景を正確に揃えることができるようになりました。

カスタムの背景サイズも可能です。 背景画像の幅をピクセル単位の正確な値に設定します。

レスポンシブデザインの場合、これらの設定—、特にカスタムのbackground-sizeとposition—が重要です。 デスクトップ、タブレット、およびモバイルプラットフォームの場合、これらのカスタム設定を使用して、画像の主な焦点に特定の焦点を合わせます。

レスポンシブボーダーコントロール

さらに、背景画像に加えて、各デバイスの境界線の半径と幅を個別にカスタマイズできるようになりました。

列の境界線は、リンクの行が列の境界線で分割されている場合など、さまざまな方法で使用できます。 行がインラインではなくなり、各リンクが独自の行に配置されるため、モバイルでは不要です。

この状況では、モバイルレイアウトの境界線を取り除くのは簡単です。 新しい動的境界機能により、簡単に実行できます。

モバイルデバイスに「孤立した境界線」はもうありません。

問題をトラブルシューティングするためのセーフモード

Elementorは、すべてのお客様にスムーズでバグのないエクスペリエンスを提供することをお約束します。 選択できるプラグインとテーマは数万あり、それらを相互に機能させる方法は無数にあります。 Elementorが関与しているかどうかに関係なく、これらの組み合わせは争いにつながるはずです。

Elementorは、ユーザーの作業プロセスの摩擦を減らすことで、ユーザーが物事を簡単に行えるようにする方法を常に模索しています。

人々がエディターを開くことができないとき、それは一般的な問題です。 この問題には多くの名前が付けられています。画面が空白になり、編集できず、コンピュータがスタックします。loading…

セーフモードがその答えです!

Windowsが最初に登場したとき、さまざまな問題のトラブルシューティングに使用できるセーフモード機能が含まれていました。 Elementorは独自に同様のソリューションを開発しました。

ロードを拒否するページに遭遇したときはいつでも、ボタンをクリックすることで「セーフモード」をアクティブにすることができます。

ElementorとWordPressは、問題を引き起こす可能性のあるテーマやプラグインから「セーフモード」で保護されています。

80%を超える読み込みの問題は、セーフモードで一時的に修正できます。

セーフモードに入ると、すべてが正しく読み込まれますか?

これは、テーマまたはプラグインのいずれかが間違いの原因であることを示しています。 実行者を特定するために、先に進み、それらを1つずつ非アクティブ化します。

セーフモードをオンにしましたが、それでも読み込まれません。

これは、解決策を他の場所で探す必要があることを示唆しており、カスタムコードまたはホスティング関連の問題である可能性があります。

「セーフモードは私のWebサイト?に影響しますか」

あなたのウェブサイトへの訪問者は、セーフモードを使用していれば違いに気付くことはありません。 インストールされているすべてのプラグインとテーマがサイトに表示され、訪問者は通常どおりにそれらを利用できるようになります。

プラグインとテーマは、Elementorエディターのロードプロセス全体を通じてアクティブ化されません。

Elementorのユーザーは、より安定した、シームレスで、エラーのないエクスペリエンスという点で、セーフモードの恩恵を受けることができます。

続きを読むタグ&ウィジェット

WordPressのreadmoreタグは、elementorが機能リクエストとして最初に取得したものの1つでした。

これは単純な要求でしたが、ページビルダーはついにそれを実装することに取り掛かりました。

ブログ投稿で「続きを読む」というタグを使用すると、アーカイブの投稿表示で残りのテキストが切り取られます。 これにより、コンテンツティーザーがメインのブログページに表示され、誰でも見ることができるようになります。

テキストエディタウィジェットで、または別のウィジェットとして、readmoreタグをすばやく追加できるようになりました。 Elementorの新しい「続きを読む」ウィジェットを使用すると、アーカイブページに抜粋を表示するのがさらに簡単になります。このウィジェットは、2つのテキストエディタウィジェットの間に挿入でき、選択した場所で正確に停止します。

混乱を避けるために、このウィジェットは、コンテンツで「コンテンツ」を利用する通常のWordPressアーカイブページにのみ適用できます。 Elementorアーカイブテンプレートは影響を受けません。

最後の言葉

Elementorは、広範に開発されたWordPressページビルダーの1つです。 新機能により、毎回ますます強力になっています。 このプラグインを使用すると、文字通り、Webサイトのデザインと装飾の巨大な海を探索できます。 この投稿からあなたが有益になることを願っています。 その他のelementorチュートリアルにアクセスして、友達と共有してください。

Divi WordPress Theme