WordPressをカスタマイズして変換を増やす方法

WordPressをカスタマイズして変換を増やす方法

WordPressをカスタマイズしてコンバージョンを増やす方法は?

研究によると、 バイヤーの68% オンラインで製品の調査を開始します。 彼らがあなたの会社名または彼らがグーグルで探している製品をタイプしてあなたのウェブサイトに着くとき、彼らが探している関連情報を彼らに提供することは非常に重要です。

ユーザーが滞在するか離脱するかを決定するウェブサイトについての決定をユーザーが行うのにXNUMX秒もかかりません。 

WordPressをカスタマイズしてコンバージョンを増やす

あなたの潜在的な顧客が、ほんの一秒後ではなく、ただ跳ね返るためにあなたのウェブサイトへの道を見つけた場合、あなたは売り上げを失っています。

に最適な方法 このバウンス率と戦う 非常に速いのは、関連する個人情報とコンテンツを潜在的な顧客に提供することです。

パーソナライズの背後にある真実

WordPress Webサイトをカスタマイズする 直帰率が低下するだけでなく、最終的にはコンバージョンが増加します。

何千ものオプションから選択でき、何千ものビジネスがデジタルマーケティングにお金を費やすため、XNUMXつのウェブサイト ジェネリック パフォーマンスの低下は、コンバージョンと売上にはつながりません。

潜在的な顧客が探している情報を正確に見つけると、滞在し、交流し、最終的に購入する可能性が高くなります。

私たちを発見 WordPressのブログの直帰率を減らすために4のトリック

調査によると、消費者はパーソナライズされたユーザーエクスペリエンスを提供する会社から購入する可能性が高く、パーソナライズされたコンテンツはマーケティング支出の効果を10〜30%向上させることができます。

このような数字では、ウェブサイトをパーソナライズしないわけにはいきません。

パーソナライズする必要があるコンテンツ

WordPress Webサイトの構築と完成に多くの時間を費やしているため、カスタマイズするコンテンツを決定しようとすると、圧倒される可能性があります。

あなたのウェブサイト上の写真は非常に強力であり、あなたのコンバージョン率に大きな影響を与える可能性があります。 画像がブランドに人間的な要素を追加したり、詳細を表示したり、消費者を希望の場所に誘導したりする場合でも、ウェブサイトのこの部分をパーソナライズすることで、訪問者はあなたのビジネスに深く関わります。

お問い合わせ先 -画像を使用すると、訪問者との感情的なつながりを作ることができますが、正しい連絡先の詳細を提供することは、Webサイトをパーソナライズする簡単な方法です。 さまざまな場所のワンストップの営業担当者でも、特定の夜間ヘルプラインでも、Webサイトの訪問者に正しい連絡先の詳細を表示すると、すぐに連絡を取り、買い物を簡単にすることができます。 

カスタマーレビューとお客様の声 -お客様は購入する前にレビューを読みます。 このため、Webサイトにコメントを付けることがますます重要になっています。 これらのコメントをパーソナライズすると、さらにインパクトを与えることができます。 これを行うには、以前に購入した人に関連商品のレビューを表示するか、国の特定の地域にいる人からその地域の他の人にレビューを表示します。

商品情報 -特定の地域または特定の年齢層で利用できない製品またはサービスを販売している場合、製品の説明をパーソナライズすることは、この情報について事前に知るための最適な方法である可能性があります。 この手法を使用すると、関連する情報を必要としない人のためにWebページを乱雑にすることなく、関連する顧客に提供できます。

このリンクをクリックして発見する なぜあなたのバウンス率はとても高いのですか?

行動を促すフレーズ -ウェブサイトの訪問者が使用しているデバイス、場所、興味のあるものに応じて、 行動を促すフレーズのボタン 常に関連性や魅力があるわけではありません。 行動を促すフレーズのテキストとそれが顧客に送信するリンクをカスタマイズすると、XNUMXつのサイズですべてに対応するオプションよりも効果的になります。

記事 ブログおよびその他のコンテンツ -このクレイジーな世界で SEOワードプレス、あなたが書いたブログ投稿やあなたがあなたのウェブサイト上で作成した他のコンテンツは、ユーザーにとって関連性があり魅力的でなければなりません。 ウェブサイトの訪問者やブログ投稿に興味深く関連性のあるコンテンツを表示することは、訪問者に価値を提供するだけでなく、ブログ投稿のエンゲージメントレベルを高めます。

あなたのウェブサイトで人気を得るためには、あなたが書いていることにすでに興味を持っている魅力的なオーディエンスは非常に重要であり、あなたの時間のより実用的な使い方です。

ウェブサイトをパーソナライズする方法

製品やサービスに応じて、WordPress Webサイトをカスタマイズしてコンバージョンを増やす方法はたくさんあります。 ウェブサイトをカスタマイズするときに創造性を発揮させるためのアイデアをいくつか紹介します。

地域ターゲティング

訪問者の場所に基づいてコンテンツをカスタマイズすることは、Webサイトをパーソナライズする優れた方法です。 画像を変更して訪問者に関連する画像を反映させたり、電話番号や販売情報を変更して、買い物をしている場所などに基づいて正しい連絡先の詳細を表示したりできます。

また見なさい OptinLinksメールキャプチャプラグインでコンバージョン率を上げる方法

あなたのウェブサイトやさまざまな場所からのあなたのウェブサイトの訪問者が探している情報に関しては、XNUMXつのサイズですべてに対応できるわけではありません。

WordPressをカスタマイズしてコンバージョンを増やす

この画像では、モンタナ大学がジオターゲティングを使用して、Webサイトにアクセスしている興味のある学生の場所に基づいてWebサイトをパーソナライズする方法を示しています。 一般的なメッセージの代わりに「 UMが最適な理由の詳細「、ボストンへの訪問者はメッセージを見るでしょう」 モンタナ州がボストンを訪問 そして、彼らがその地域にいるとき、キャンパスの代表者と会う約束をする機会があります。 パーソナライズされたコンテンツのクリック率は、一般的な投稿と比較してほぼXNUMX倍です。

ジオフリ

GeoFliは、次のような優れたWordPressツールです。 ジオターゲティング ジオパーソナライゼーション。 WordPressプラグインを使用すると、訪問者の場所に基づいてWebサイトを簡単にカスタマイズできます。 GeoFliを使用すると、郵便番号、州、国によってターゲットとする場所を選択したり、独自のジオフェンスを描画したりできます。

Geofli無料wpプラグイン

また、訪問者を特定の場所から別のURLにジオリダイレクトすることもできます。 GeoFliを使用するには、編集するコンテンツを選択し、ターゲットとする領域を選択し、コピーまたはコンテンツを編集して、ターゲットとする視聴者に価値を提供するだけです。

デバイスタイプのカスタマイズ

ユーザーがウェブの検索に使用しているデバイスに基づいて関連するコンテンツを表示することは、直帰率を減らし、コンバージョンを増やし、ウェブサイトの訪問者に情報を提供する優れた方法です。彼らが必要としています。

また読みます: コンバージョンを増やす方法:限定オファーを増やす

顧客の習慣を理解することは、この形式のパーソナライズに役立ちます。 たとえば、消費者はスマートフォンよりもデスクトップで買い物をする傾向があります。 これを知っていると、ビジネス価値とモバイルデバイス上の製品の利点を強調しながら、コンピューターに製品購入情報を表示するように促すことができます。

ロジックホップ

ロジックホップwpプラグイン無料

Logic Hopを使用すると、訪問者がWebサイトにアクセスした方法と、閲覧したコンテンツに基づいてWebサイトのコンテンツをカスタマイズできます。 彼らのWordPressプラグインは、パーソナライズされたコンテンツをWebサイトの訪問者に配信するための強力な方法です。

ロジックホップを使用するには、Webサイトの特定のセクションに条件付きロジックを作成するだけで、条件が満たされたときにWebサイトにそれらのセクションが表示されます。

時間のカスタマイズ

訪問者がWebサイトにいる時間帯、週、または年の時間に基づいてアクションとコンテンツへのユニークなコールを表示すると、ユーザーモデルを使用してコンバージョンを増やします。

ガイドもご覧ください より良いコンバージョンのためにWordPressでFOMOを使用する方法

特定の製品またはサービスが特定の時点でよりよく売れていることを知っている場合、その期間中にそれを特色にするようにWebサイトをカスタマイズできます。

FlowCraftによる高度なパーソナライズ

高度なパーソナライゼーション フロークラフト 時間、訪問数などに基づいてWebサイトのコンテンツをカスタマイズできます。 WordPressプラグインを使用すると、セクションを簡単に組み合わせて、特定のグループのユーザー向けにカスタマイズできます。

高度なパーソナライズwp無料プラグイン

似ている もしそうなら、Flow Craftの高度なカスタマイズを使用するには、条件を作成し、条件が満たされた場合に表示されるものを指定する必要があります。

ウェブサイトの相互作用のパーソナライズ

消費者があなたのウェブサイトと対話する方法は、彼らに個人化されたコンテンツを示す絶好の機会でもあります。 それらが接続されていて、 先例 購入すると、同様のアイテムを提案でき、初めての訪問者であれば、最も人気のあるアイテムを表示でき、特定の広告のためにウェブサイトを見つけた場合は、それらを表示できます。この広告に関連する情報を表示します。

もしそうなら

If-Soを使用すると、訪問者のプロファイルまたはWebサイトとの対話に基づいてWebサイトのコンテンツをパーソナライズできます。 このWordPressプラグインを使用すると、日付やユーザープロファイルなどに基づいて独自のコンテンツを表示できます。

Ifsowp無料プラグイン

If-Soを使用するには、対象とする条件を選択し、条件が満たされているかどうかにかかわらず表示するコンテンツを設定するだけです。

潜在的な顧客があなたのウェブサイトを訪れたとき、あなたは彼らの注意を引き、彼らを興味を持ち続けるためにほんの一瞬しかありません。 したがって、WordPress Webサイトのコンテンツをカスタマイズすることは、訪問者が探している情報を提供し、最終的にコンバージョンを増やすための優れた方法です。

発見 WordPressでコンバージョンを追跡する方法:ステップバイステップガイド

訪問者の場所に基づいて連絡先の詳細をカスタマイズする場合でも、時期に基づいて画像をカスタマイズする場合でも、価値の高いコンテンツは、高品質の顧客を変換するための鍵となります。

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

結論

ここは ! これで、変換を増やすためにWordPressをカスタマイズする方法についてのガイドが終わります。 ある場合 commentaires または提案、これらのために予約されたセクションで私達に言うことをheしないでください。

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

 しかし何よりも さまざまなソーシャルネットワークでこの記事を共有する.

... 

WordPressのプラグインをインストールする方法

WordPressのプラグインをインストールする方法

この記事では、WordPressプラグインをインストールする方法を紹介します

最も人気のあるコンテンツ管理システム(CMS)のXNUMXつとして、WordPressは優れた柔軟性と豊富なカスタマイズオプションを提供します。 それはあなたがあなたのウェブサイトの機能を変更することを可能にする多種多様なWordPressプラグインを提供します。

WordPressには独自のディレクトリがあり、無料のプレミアムプラグインが付属しています。 これらのプラグインを使用すると、連絡先フォームやパーソナライズされたニュースレターからWebサイトのキャッシュやWordPressのセキュリティに至るまで、さまざまな機能を追加できます。

一部のプラグインは、WordPressWebサイトを機能的なオンラインストアに変更することもできます。 WooCommerceプラグイン またはeラーニングプラットフォーム LMSプラグイン。 実際、あなたもできます 独自のWordPressプラグインを作成する.

このチュートリアルでは、XNUMXつの異なる方法を使用してWordPressプラグインをインストールするステップバイステップのプロセスを示します。

この記事の最後に、Webサイトを改善するための新しいWordPressプラグインを探すときに従うことができるいくつかのヒントも含まれています。

ただし、開始する前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

公式プラグインディレクトリからWordPressプラグインをインストールする方法

WordPressプラグインをインストールする最も簡単な方法は、WordPress管理エリアから公式プラグインディレクトリにアクセスすることです。 ただし、このWordPressプラグインディレクトリは、無料のプラグインオプションのみに制限されています。

WordPressダッシュボードにログインして、 拡張機能->追加。 でプラグインの検索に進みます 検索バー。 左側にあるタブをクリックして、注目のプラグイン、人気のあるプラグイン、または推奨プラグインを閲覧することもできます。

WordPressプラグインをインストールする方法

たとえば、プラグインを探している場合 MonsterInsights、最初の結果として表示されます。 ボタンをクリックします インストーラ プラグインのインストールを開始します。

プロセスが完了するのを待って、ボタンをクリックします 活性化します このWordPressプラグインの使用を開始します。

プラグインをアクティブ化したら、チェックして構成します 設定 プラグインの 拡張機能->プラグインがインストールされています。 

WordPressプラグインを手動でインストールする方法

WordPressプラグインをインストールする別の方法は、WordPressダッシュボードからプラグインファイルを手動でアップロードすることです。

この方法では、公式のWordPressディレクトリにはないが、次のようなサードパーティのマーケットプレイスから入手できるプラグインをインストールできます。 CodeCanyon et コードスター.

プラグインのインストールプロセスを開始する前に、まずファイルをダウンロードする必要があります ZIP 選択したソースからのプラグインの。

次に、WordPress管理エリアに移動してクリックします 拡張機能->追加。 次、 見つける Tボタン拡張子を上げる ページの左上にあります。

WordPressプラグインをインストールする方法

コンピューター上のファイルを選択します ZIP ダウンロードするプラグインをクリックして、 今すぐインストール.

WordPressプラグインをインストールする方法

プラグインのインストールが完了するのを待ち、 [拡張機能を有効にする]をタップします。

WordPressプラグインをインストールする方法

FTPクライアントを使用したWordPressプラグインのインストール

プレミアムおよびカスタムのWordPressプラグインがいくつかあり、それらを使用して手動でインストールする必要があります。 FTPクライアント。 初心者の場合、最初にFTPクライアントのセットアップ方法を学ぶ必要があるため、プロセスは少し複雑になる可能性があります。

心配しないでください。次のガイドがステップバイステップでガイドします。 あなたがしなければならないのはただ手順に従うことです。

まず、 エキス プラグインのZIPファイルを作成し、コンピューター上のフォルダーに保存します。 抽出されたプラグインファイルフォルダは、FTPクライアントを介してアップロードする必要があるフォルダになることに注意してください。

次に、WebサイトをFTPサーバーに接続します。 これを行うには、ホスティングプロバイダーのFTPの詳細を見つけます。

ログインしたら、FTPクライアントに移動します-この例では、 FileZillaを。 そこで、ログイン資格情報を入力してボタンを押します コネクシオンラピッド。 次に、パネルに移動します リモートサイト 検索 ファイル WP-コンテンツ/プラグイン/.

パネル内 ローカルウェブサイト、抽出したプラグインフォルダをコンピュータからにアップロードします wp-content /plugins/フォルダー サーバーから。

WordPressプラグインをインストールする方法

転送が完了すると、WordPressプラグインがWebサイトにインストールされます。

プラグインをアクティブ化するには、WordPressダッシュボードにアクセスする必要があります。 [拡張機能]->セクションに移動します インストールされたプラグイン、プラグインを見つけて、をクリックします 活性化します.

WordPressプラグインを選択するときに覚えておくべきことは何ですか?

WordPressプラグインディレクトリには多くのプラグインがあり、サードパーティのWebサイトでさらに利用できます。 この数のオプションは、特に自分のWebサイトに何が適切かを理解しようとしている初心者にとっては、圧倒的に思えるかもしれません。

次のセクションでは、Webサイトのプラグインを選択する際に考慮すべきいくつかの重要事項を示します。

定期的な更新。

WordPressは、システムを最新の状態に保つために定期的な更新をリリースしています。 これにより、パフォーマンスの向上、セキュリティの維持、バグの問題の修正、および新機能の追加が行われます。

したがって、プラグインをインストールする前に、次の点を考慮してください。

彼がその仕事に適していることを確認してください

  • 最後の更新。 頻繁に更新されるWordPressプラグインを選択すると、セキュリティ違反を犯さないようにすることができます。 また、開発者がプラグインを積極的に保守および改善していることも示しています。
  • インストールの数。 この数字は、WordPressプラグインがどれほど人気が​​あるかを示しています。 一般に、プラグインのアクティブなインストールが多いほど、プラグインの品質は高くなります。
  • 観客。 ユーザーのレビューとコメントは、特定のプラグインの長所と短所を比較検討するのに役立ちます。 これにより、プラグインがリアルタイムの状況でどのように機能するかについての洞察が得られます。
  • 互換性。 開発者から定期的に更新を受け取るプラグインは、通常、最新バージョンのWordPressと互換性があります。 プラグインを実行するために必要なWordPressのバージョンを確認するには、常に[説明]タブを確認してください。

WordPressサイトにプラグインをダウンロードしてインストールする前に、開発者による主張を確認してください。 プラグインのドキュメントを読み、プラグインのサポートフォーラムを確認し、レビューを読んでください。

多くのウェブサイトがプラグインレビューを提供しているため、ブログ投稿を検索することも良い習慣です。

BlogPasCher、次のようなさまざまな機能を備えたWordPressプラグインのレビューとテストも行います メニュープラグインGoogleAnalyticsプラグイン et プラグインのレビュー.

...

一度にXNUMXつのプラグインをインストールします

WordPressでプラグインをテストするときは、各プラグインを個別にインストールしてテストすることを忘れないでください。 このようにして、それがWebサイトに問題を引き起こしているかどうか、およびそれらを修正できるかどうかをすばやく確認できます。

WordPressでいくつかの異なるプラグインをテストする場合は、別のプラグインを試す前に、前のプラグインを非アクティブ化することを忘れないでください。

また、非アクティブなプラグインが複数ある場合は、インストールが多すぎるとWordPress Webサイトが過負荷になり、パフォーマンスに影響を与える可能性があるため、プラグインを削除することをお勧めします。

機能ごとにXNUMXつのプラグインのみを使用してください

WordPressプラグインは新しい機能を追加し、Webサイトの機能を向上させますが、インストールするプラグインが多すぎると、Webサイトの速度が低下する可能性があります。

実際、WordPressプラグインをインストールするたびに、Webサイトに新しいコードを追加します。 プラグインを過度に使用すると、CSSスタイルシート、JavaScriptファイル、画像などのリソースを読み込むために大量のHTTPリクエストを送信するため、ウェブサイトの読み込み速度が低下します。

さらに、同様の機能を実行するWordPressプラグインをインストールすると、競合が発生し、一方または両方のプラグインが破損する可能性があります。 したがって、ベストプラクティスは、機能ごとにWordPressプラグインをインストールすることです。

例えば、 Yoast SEO et アイセオ 同様の機能セットがあります–プラグインの競合を避けるためにXNUMXつを選択するだけです。

このチュートリアルが、ブログやWebサイトにWordPressプラグインをインストールする方法を学ぶのに役立つことを願っています。 事前の技術的な知識やスキルがなくても、Webサイトの機能を向上させる機会があります。

どのプラグインから始めるかわからない場合は、現在のWebサイトに何がないかを検討してください。 次に、利用可能なプラグインを確認し、互換性、レビュー、最新の更新などの重要な要素を比較します。

始めるために推奨される必須のWordPressプラグインのいくつかを次に示します。

  • Yoast SEOこのプラグインは、キーワードの最適化とメタ記述を通じて、WordPressのブログ投稿とページSEOを改善するのに役立ちます
  • Elementor ou ビーバービルダー。 使いやすいドラッグアンドドロップインターフェイスを提供することにより、Webサイトの構築を支援します。
  • W3合計キャッシュ ou WPスーパーキャッシュキャッシュとCDNとの統合により、Webサイトのパフォーマンスが向上し、読み込み時間が短縮されます。
  • GoogleXMLサイトマップ。 検索エンジン最適化を改善するために、XMLサイトマップを自動的に生成します。
  • アキスメットこのプラグインは、悪意のある攻撃を防ぐために、コメントおよび連絡フォームの送信でスパムを検出してフィルタリングします。

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

結論

WordPressプラグインのインストール方法を示すこのガイドは以上です。 ご不明な点やご提案がございましたら、内でお知らせください commentaires.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

一方で、 さまざまなソーシャルネットワークでこの記事を共有する.   

...  

Divi:メガメニューに画像を追加する方法

Divi:メガメニューに画像を追加する方法

メニューの内容を説明する画像付きのメガメニューディビが欲しいですか? メガメニューに画像を追加する方法についてのチュートリアルに従ってください。

私たちはオンラインで画像を操作するのが大好きです。 それを念頭に置いて、可能な限りあなたのウェブサイトに画像を追加することは理にかなっています。 

さらに、メガメニューに画像を追加することは、ユーザーに必要なインタラクションを提供するもうXNUMXつの絶好の機会です。

画像はまた、ナビゲーションプロセスをさらに簡素化するために注意を引くことにより、メニューを強化します。

調査

このチュートリアルに入る前に、達成したい結果を見てみましょう。

画像付きメガメニューディビ

メガメニューの作成

開始するには、最初にメニューを作成する必要があります。 

この例では、というメインの親メニュー項目を作成します 「メガメニュー」 以下にXNUMXつのサブメニュー項目があります。 XNUMXつのサブメニュー項目のそれぞれにXNUMXつのサブサブメニュー項目があります。

WordPressダッシュボードに移動し、をクリックします 外観>メニュー

画像付きメガメニューディビ

上をクリックします 「新しいメニューを作成する」、名前を付けてをクリックします 「メニューの作成」.

タブをクリックして、CSSクラスメニュープロパティを必ず有効にしてください オプション メニュー画面右上の画面と確認 CSSクラス.

これで、作成した新しいメニューにメニュー項目を追加できます。

まず、他のすべてのメニュー項目の親となるメニュー項目を作成しましょう。 これは、ホバー時にメガメニューを表示するリンクです。

このメニュー項目を作成するには、次のパラメーターを使用してカスタムリンクを作成します。

  • URL:http://#
  • ナビゲーションタイトル:メガメニュー
  • CSSクラス:メガメニュー

次に、XNUMXつのメニュー項目(それぞれに独自のXNUMXつのサブ項目がある)を配置/ドラッグして、メインの親メガメニューリンクのサブ項目にします。

リンクがメニューに追加されたら、下にスクロールして'レグラージュデュメニューメニュー画面の下部にある'を選択し、 'メインメニュー' 表示場所。 最後に、をクリックします 「メニューを保存」

これまでのメガメニューは次のようになります。

画像付きメガメニューディビ

メガメニューに画像を追加する

メニューの準備ができたので、画像を追加します。

また読みます: DIVIでブログ投稿をフロートするにはどうすればよいですか?

画像を取得する

XNUMXつの画像を取得することから始めます。 これらの画像は、XNUMXつのサブメニュー項目に関連している必要があります(について、サービスの提供、私たちの仕事とお問い合わせ).

フォトエディタを使用して、各画像を幅500ピクセル、高さ300ピクセルに縮小およびトリミングします。

これらの画像をWordPressライブラリに追加します。 クリック メディア>追加.

メガメニューに画像を追加する方法

画像をページにドラッグして追加するか、[]をクリックしますファイルを選択'

メガメニューに画像を追加する方法

メガメニューに画像を挿入する

WordPressダッシュボードのメニューページに戻ります。

この例では、最初の列の上部にあるリンクは次のとおりです。 " 約 "

アイテムの右側にある矢印をクリックします " 約 "。 [ナビゲーションラベル]ボックスで、htmlタグを使用して目的の画像を追加します img テキストの直前 " 約 "。 画像タグは次のようになります。

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
メガメニューに画像を追加する方法

画像のURLを見つけるには、 メディア>メディアライブラリ、追加する画像をクリックします。 

ポップアップ画面で 添付ファイルの詳細、右側のセクションでURLを見つけて、をクリックします 「URLをクリップボードにコピー」

メガメニューに画像を追加する方法

次に、メニュー項目の構成に戻ります " 約 " メニューページでテキストを置き換えます 「画像のURLを挿入」 を使用して画像のURLを貼り付ける Ctrl + V.

メガメニューに画像を追加する方法

メニュー項目の構成オプションを終了する前 " 約 "、[CSSクラス]テキストボックスを見つけて、クラス「メガリンク」を入力します。

これにより、後でカスタムスタイルを追加できるようになります。

このプロセスを繰り返して、「メガリンク」クラスの各サブメニュー項目に次のXNUMXつの画像を追加します。 (この例では、残りのXNUMXつの要素は 「サービス提供」、「私たちの仕事」 et " お問い合わせ ".)

結果

あなたのウェブサイトに行き、メガメニューのリンクにカーソルを合わせます。 これで、メガメニューは次のようになります。

画像付きメガメニューディビ

各画像にカーソルを合わせると、すぐ下のサブメニュー項目で画像がフェードインすることに注意してください。 これは、画像がそのリンクの一部であるためです。画像をクリックすると、関連付けられたURLに移動します。

最後の仕上げ

この最後のステップでは、カスタムcssをメニューに追加して、テキストフォントを大きく中央に配置します。 また、画像の周囲に境界線の半径を指定して、画像がすっきりと見えるようにします。

WordPressダッシュボードで、 Divi>テーマオプション . 

[カスタムCSS]ボックスまで下にスクロールし、下にCSSを入力して、[ '変更内容を保存' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

最終結果

終了しました!

このチュートリアルのすべての手順を実行した場合、次のような結果が得られます。

画像付きメガメニューディビ

今すぐDIVIをダウンロード!!!

結論

プラグインを使用せずに画像付きのDiviメガメニューがあります。 このタイプのメニューは、コンテンツが多く、商品画像を必要とするeコマースWebサイトで特に効果的です。 このチュートリアルが次のDiviプロジェクトに役立つことを願っています。

ウェブサイト作成プロジェクトを完了するためにさらに要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

懸念や提案がある場合は、 コメントセクション それを議論する。

しかしその間さまざまなソーシャルネットワークでこの記事を共有する.

...

WordPressWebサイトにカスタムフォントを追加する方法

WordPressWebサイトにカスタムフォントを追加する方法

WordPressのウェブサイトにカスタムフォントを追加する方法を学びたいですか?

標準フォントを使用してブログを退屈にするのはなぜですか? あなたのブログにあなたの活気に満ちた個性とあなたがカバーするトピックについて多種多様なカスタムフォントで話させてください。 カスタムフォントは、ブログを他の人よりも見栄えよくする優れた機能です。

それに直面しよう; 私たちは皆、適切なフォントのブログやWebサイトが大好きです。 それらはウェブサイトを飾るだけでなく、ユーザーをあなたのコンテンツに引き付けるのにも役立ちます。 ただし、標準のWordPressフォントの選択は制限されており、使用しているテーマによって異なります。 良いニュースは、手動で、または専用のWordPressプラグインを使用してそれらを追加できることです。

そしてここでXNUMXつの質問が発生します:カスタムフォントの入手先 WordPressと カスタムフォントのインストール方法 あなたのウェブサイトに

見つけるのをしてみましょう。

なぜカスタムフォントを使用する必要があるのですか?

TimesNewRomanとGeorgiaがウェブサイト上のテキストの唯一の書体と見なされていた時代は終わりました。 過去数年間で、フォントスペースは次のようなフォントの出現で完全に変化しました Googleのフォント などがあります。

今日、インターネット上には何百もの無料のフォント、情報とトレーニングエイド、およびデザインリソースがあります。 Adobe Illustrator、Photoshop、およびその他の従来のアプリとは異なり、WordPressではデフォルトのフォントを完全に制御することはできません。 特定のWordPressテーマのみが、カスタムフォントのサポートと使用を選択します。

したがって、この記事では、適切なカスタムフォントを見つけて、WordPressWebサイトでそれらを使用する方法を学習します。

カスタムフォントを使用することの重要性

なぜフォント、単語のインデント、行間隔、文字間隔、またはフォントの彩度を変更するのですか? しかし、いくつかの研究は タイポグラフィは読解力を向上させます.

フォントの構成に大きく依存します。 意識的および潜在意識的なレベルで–誰もがWebページのコンテンツを設計によって評価します。

フォントのデザインは、読者が注意を払わなくても、読者に影響を与えます。 フォントデザインをあきらめるということは、開発自体をあきらめることを意味します! 読者の気分はそれに依存します。 フォントを使用すると、読みやすくなったり、ユーザーにページを離れさせたりすることができます。

すべてのWebブラウザーには、一連のデフォルトフォントが含まれています。 これは、フォントがページのCSSで指定されていない場合、標準バージョンが使用されることを意味します。 デフォルトのフォントは引き続き使用できますが、ユーザーにとっては難しくなります。 これが、カスタムフォントを使用することが不可欠である理由です。 WordPressテーマにフォントを変更するオプションがない場合は、役立つWebサイトやツールがたくさんあります。

Google Font Alternatives

カスタムフォントを追加する

あなたの多くは知っています Googleフォント。 あなたが美しいフォントを見つけることができるより多くのウェブサイトがあります。 それらのいくつかは個人使用のために無料です。 商用利用が必要な場合は、ライセンスが必要になります。 GoogleFontsとAdobeEdgeFontsは無料です。 これが、それらがそれほどユニークではない理由です。

ここにあるいくつかの フォントを見つけるための他のリソース 無料および商用利用:

  1. TemplateMonster — TemplateMonster Webサイトには、Webデザインに必要なすべてのものがあります。 個人用のフォントやフォントパックも低価格でたくさんあります。 さらに、選択を支援するために、パンフレットまたはフレームに表示されるすべてのフォント。 各フォントには、商用ライセンスも付いています。
  2. MyFonts — MyFontsは現在、世界で最も多くのフォントを提供しています。 ただし、ここでの価格も上位セグメントにあります。 したがって、予算が限られている場合、これは適切ではない可能性があります。
  3. フォントスプリング — fontspringは、商用利用のためのノベルティフォントを販売しています。 しかし、ほとんどすべての家族で、1〜2個の無料フォントを個人的な目的に使用できます。 また、フリーフォントの別のセクションがあります。 コレクションは活気に満ちています。 ただし、ダウンロードする前に、特定のフォントのライセンス情報を注意深く調べる必要があります。
  4. カフォンフォント —これはさまざまなフォントの膨大なコレクションでもあります。 いずれかを選択すると、詳細情報が記載されたページが表示されます。 無料のフォントはたくさんあり、それらは個々のセクションに分かれています。 CufonFontsのソートシステムは非常に柔軟で便利です。 また、Webフォントのサポートも含まれています。
  5. ダフォント —3のフリーフォントのもう500つのアクセス可能なコレクション。 それらのほとんどは、個人使用のみを目的として設計されています。 クールなDaFont機能はカテゴリシステムです。 コミック、ビデオゲーム、ヴィンテージなどのスタイルのフォントを選択できます。

フォントはすべて美しいので、フォントの選択は非常に魅力的です。 しかし、あなたは多くを選ぶべきではありません。 サイトでXNUMXつ以上のフォントを使用しないでください ウェブ。 そうすれば、Webサイトの外観は一貫したものになります。 フォントを選択したら、使用するスタイルごとにファイルをアップロードしてください(通常、太字、斜体など)。

Webサイトに適切なフォントを選択したので、それを追加する方法を見つけましょう。

WordPressにカスタムフォントを追加する方法

WordPressWebサイトにフォントを追加する方法はいくつかあります。

  1. プラグイン :この場合、プロセスを容易にするためにさまざまなWordPressプラグインが使用されます。
  2. 手動 :この方法を使用するには、サイトからダウンロードしたフォントをダウンロードし、CSSファイルを変更する必要があります。
  3. テーマ:多くの人気のあるテーマには、フォントをカスタマイズするための組み込みオプションがあります(注–使用しているテーマによってプロセスが異なるため、このオプションについては説明しません。

オプション1-プラグインを使用してWordPressフォントを変更する

グローバルな変更を気にしない場合は、Webサイトのフォントを変更するWordPressプラグインをインストールできます。

カスタムフォントプラグインの機能

オープンソースソフトウェアにはコミュニティの利益のための利点があり、WordPressにもその利点があります。 いくつかのWordPressプラグインを使用すると、カスタムフォントを追加できます。 非常に多い場合に適切なプラグインを選択するにはどうすればよいですか? カスタムフォントのWordPressプラグインの機能は何ですか?

考慮すべき点は次のとおりです。

  • カスタムフォントを使用する機能
  • 複数のフォントを使用する機能
  • ヘッダーとターゲットコンポーネント
  • ボーナス:ビジュアルエディターからフォント設定を変更する機能

それで全部です。 リストの最初の特性は非常に重要です。 DaFont、Font SquirrelなどのWebサイトからフォントをダウンロードすることはできますが、WordPressにアップロードできる必要があります。

カスタムフォントをアップロードできるWordPress用のプラグインをいくつか見てみましょう。

1。 Better Awesomeフォント

このWordPressプラグインにより、ユーザーはBetter Font Awesomeフォントの最新バージョンと CSS、ショートコードなど。 さらに、このWordPressプラグインは自動的に更新されます。

より良いフォント素晴らしい-最高のWordPressタイポグラフィプラグイン

機能としてそこにあります:定期的な更新、ショートコードジェネレータ、他のWordPressプラグインとの互換性など...

ダウンロード | デモ | ウェブホスティング

2。 WordPress用のGoogleフォント

このWordPressプラグインは877の特殊フォントで構成されており、WordPress Webサイトですべてのフォントを使用できます。 リアルタイムプレビューのおかげで、フォントが適用されるとWebサイトがどのように見えるかを確認できます。 

Googleフォント-最高のWordPressタイポグラフィプラグイン

さらに、お好きな組み合わせを見つけたら、保存してフロントエンドで編集することができます。

その機能が含まれます:リアルタイムプレビュー、 非常に高度なSEO、多言語サポート、より多くの870 + Googleフォントのサポート、簡単な更新など。

ダウンロード | デモ | ウェブホスティング

3.フォントプラグイン

Fonts Pluginは、ユーザーがGoogleFontsおよびAdobeFontsライブラリにアクセスできるようにする無料のWordPressプラグインです。 このWordPressプラグインを使用すると、1000を超えるGoogleおよびAdobeフォントから選択し、Webサイトで複数のフォントを使用し、WordPressカスタマイザーのプラグインのリアルタイムプレビュー機能を使用してさまざまなオプションをテストできます。

最高のワードプレスタイポグラフィプラグイン

フォントサイズ、文字間隔、行の高さなど、Webサイトのタイポグラフィをカスタマイズするその他の方法については、プレミアムバージョンにアップグレードできます。 フォントプラグインプロ.ダウンロード | デモ | ウェブホスティング

4。 簡単なGoogleフォント

Easy Google Fontsは、ウェブサイトのタイポグラフィをカスタマイズするための最高のWordPressプラグインのXNUMXつです。 Fonts Pluginと同様に、何百ものGoogleフォントから選択して、Webサイトに追加する前にカスタマイザーでプレビューできます。

あなたのブログのための10のWordPressタイポグラフィプラグイン

少数のGoogleFontsへのアクセスを提供しますが、管理領域でカスタムフォントコントロールとルールを作成できるという点で独特であり、WordPressカスタマイザーにすぐに表示されます。

ダウンロード | デモ | ウェブホスティング

オプション2–WordPressカスタムフォントを手動でインストールする

@ font-faceディレクティブを使用すると、XNUMXつ以上のフォントをWebサイトに接続できます。 しかし、この方法には長所と短所があります。

メリット:

  • CSSのおかげで、ttf、otf、woff、svgなどの任意の形式のフォントを接続できます。
  • フォントファイルはサーバー上に配置されます–サードパーティのサービスに依存することはありません。

デメリット :

  • 各スタイルの正しいフォント接続については、個別のコードを登録する必要があります。
  • CSSを知らないと、簡単に混乱する可能性があります。

しかし、できればそれは本当の問題ではありません 完成したコードをコピーするだけです 値を指定する必要がある場所。

レマルク :始める前に、必ず 子テーマを作成する あなたのウェブサイトのために。 このようにして、子テーマにすべての変更を加え、メインテーマを残して、将来必要になった場合に簡単に更新できるようにします。

ステップ1:「フォント」フォルダを作成する

子テーマで、次の下に新しい「フォント」フォルダを作成します。 wp-content / themes / your-child-theme / fonts

ステップ2.ダウンロードしたフォントファイルをWebサイトにアップロードします

これは、ホスティングコントロールパネルまたはFTPを介して実行できます。

新しく追加されたフォントフォルダにすべてのフォントファイルを追加します。 wp-content / themes /子テーマで、次の下に新しい「fonts」フォルダーを作成します。 wp-content / themes / your-child-theme / fonts あなたが作成したもの。

ステップ3.子テーマスタイルシートを介してフォントをインポートする

ファイルを開きます style.cssの 子テーマのコードを作成し、CSSファイルの先頭(子テーマのコメントの後)に次のコードを追加します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

どこ MyWebFont はフォントの名前であり、srcプロパティの値(引用符で囲まれた括弧内のデータ)はそれらの場所(相対リンク)です。 それぞれのスタイルを個別に指定する必要があります。

最初に通常のスタイルを接続するため、font-weightプロパティとfont-styleプロパティを通常に設定します。

ステップ4.追加する場合 イタリック、 次のように書いてください。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

すべてが同じである場合、fontstyleプロパティを斜体に付加するのは私たちだけです。

手順5.太字のフォントを追加するには、次のコードを追加します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

font-weightプロパティを太字に設定します。

各スタイルのフォントファイルの正しい場所を指定することを忘れないでください。

手順6.太字の斜体を接続するには、次のように入力します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

まあ、それだけです。 これで、XNUMXつのフォントスタイルをWebサイトに接続できました。

ただし、注意点が8つあります。このフォント接続はInternet Explorer 8では正しく表示されません。慰めは、IEXNUMXをまだ使用している人が非常に少ないことです。

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

結論

ユーザーがあなたのウェブサイトにアクセスしたときに最初に気付くのは何ですか? そうです、そのデザイン! デザインのほとんどは、美しいフォントの適切な使用に依存しています。 だから、あなたはあなたのウェブサイトのフォントデザインの世話をする必要があります。 コードを追加するか、上記のプラグインのXNUMXつを使用して、新しいフォントスタイルを埋め込みます。 どのように選択するかはあなた次第です。

同じWebサイトでXNUMXつ以上のフォントを使用しないようにしてください。 Webサイトに追加するカスタムフォントが多いほど、Webサイトの速度が低下します。

WordPressWebサイトにカスタムフォントを追加する方法を示すこの記事は以上です。 ぜひお試しください。 ご不明な点やご提案がございましたら、内でお知らせください commentaires.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

一方で、 さまざまなソーシャルネットワークでこの記事を共有する.   

...  

Facebookインスタント記事のウェブサイトを準備する方法

Facebookインスタント記事のウェブサイトを準備する方法

このチュートリアルでは、FacebookのInstantArticlesプログラム用にWordPressWebサイトを準備する方法を紹介します。

プログラムとは Facebookインスタント記事 12年2016月XNUMX日にすべてのコンテンツ編集者に公開されます。いくつかのタグを使用してFacebookに直接公開するには、WordPressブログを準備する必要があります。

毎月2015億人以上がモバイルデバイスからFacebookにログインしており、Facebookのモバイルアプリを使用して表示されるコンテンツのパフォーマンスはこれまで以上に重要になっています。 Facebookは、コンテンツ配信を高速化し、モバイルアプリユーザーが期待するような没入型エクスペリエンスを提供する方法として、XNUMX年XNUMX月にInstantArticlesをリリースしました。

当初、プログラムは次のような有名な出版社の選択されたグループに限定されていました Buzzfeed、ニューヨークタイムズとBBCニュース。 ただし、2016年XNUMX月には、すべてのコンテンツエディターがこのプログラムを利用できるようになります。

Facebookのビジネスマネージャーを使用して、適切にフォーマットされたRSSフィードが承認されたFacebookページに関連付けられると、Facebookは「インスタント記事」を作成します。 出版社はプログラムへの参加を申請する必要があり、承認されると、インスタント記事の外観と動作をカスタマイズできるようになります。

組織がFacebookでアクティブであり、ソーシャルネットワークで共有されているコンテンツからトラフィックのかなりの部分を取得している場合、適切にフォーマットされたRSSフィードを生成するようにWebサイトを構成できるようになりました。 ただし、FacebookのInstant Articlesプログラムへの参加は、思ったほど簡単ではありません。

しかし、始める前に、時間をかけて見てください WordPressのテーマをインストールする方法どのように多くのプラグイン私はワードプレスにインストールする必要があります.

それでは、仕事に取り掛かりましょう!

プログラムに参加すると、コンテンツはどのように機能しますか?

プログラムに参加するコンテンツ発行者は、Facebookアプリでのコンテンツの表示方法を大幅に制御できます。 パブリッシャーは、インスタント記事で広告スペースを販売し、パブリッシャーとFacebookのどちらがスペースを販売するかに応じて、広告収入の100%または70%を維持することもできます。

UXの制御の強化と収益の増加がXNUMXつの動機付け要因ですが、プログラムに参加する必要がある最大の理由は、Facebookユーザーがインスタント記事をよりよく体験できるためです。

次のチュートリアルも参照してください。 ワードプレスのためにFacebookのピクセルキャンペーンを作成する方法

Facebookは、インスタント記事の読み込みが標準のモバイルWebコンテンツのXNUMX倍であると主張していますが、これは独自に確認されたものではありません。 インスタント記事は、モバイルデバイスの利用可能なウィンドウ全体を使用することによっても革命を起こしているため、インスタント記事はブラウザで表示されるコンテンツよりもはるかに没入感があります。

誰がプログラムインスタントアイテムのFacebookに参加すべき?

このプログラムは、 コンテンツエディター およびコンテンツを定期的に投稿するその他の組織。 実際には、著者は少なくとも50の記事をレビューする準備ができるまで、プログラムに参加できません。 組織に50を超える記事がある場合は、プログラムの購読を検討してください。

インスタント記事の準備方法

Facebookへの記事のアップロードインスタント記事はプラグインをインストールするのと同じくらい簡単ですか?

はいといいえ。

プログラムへの参加は、11ステップのプロセスです。

Facebookは、プロセス全体を説明するガイドを作成することで、物事をはるかに簡単にすることを試みましたが、最初に、Facebookによる承認を受けるために組織を提出することから始めることができます。 XNUMX月までにプログラムへの参加を申し込むことはできませんが、 あなたがプログラムに興味を持っているFacebook、これはおそらく、プログラムが利用可能になったときに通知されることを意味します。

今のところ、すべての出版社(著者)に対してプログラムが実際に起動される準備をするために必要な3の事柄を以下に示します。

ブログを介して権限を構築するための4ステップのガイド この記事を参照して調べてください。

ステップXNUMX:Facebookで効果的なプレゼンスを持っていることを確認します

Facebookでの組織の存在とプラットフォームに関する知識は効果的でなければなりません。

まず、組織にページがあり、管理者または編集者であることを確認する必要があります。 でビジネスアカウントを作成する必要がある場合もあります 企業アカウントマネージャー、組織にページがない場合は、会社のアカウントマネージャーを使用して、アカウントにページを追加したり、組織の他のメンバーをページに追加したりできます。.

Instant Articlesは、会社のアカウント管理インターフェイスから直接管理されるため、後で行う必要がないように、会社のアカウントを構成することを忘れないでください。

使用しない場合は、FacebookPagesアプリをダウンロードできます。 あなたはそれを見つけることができます App Storeで iPhoneやiPad、またはでそれを使用するには Google Playストア。 インスタント記事をプレビューするには、このアプリが必要です。 機能をテストして、機能を確認できます。

2ステップ:インスタント記事のためにあなたのRSSを構築

Instant Articlesは、特定の方法でフォーマットされたRSSフィードからインポートされたHTMLコンテンツを使用してFacebook上で組み立てられます。 WebサイトをInstantArticlesと統合するには、特別にフォーマットされたRSSフィードを生成する必要があります。これに使用できるプラグインを次に示します。

と提携して作成されたプラグイン Automatticの et デコデ、公式のWordPressプラグインディレクトリに追加される可能性があります。 今のところ、プラグインをダウンロードするだけです 直接のGithubから.

githubのfbインスタントプラグインの記事

プラグインはZIP形式でダウンロードされ、プラグインをインストールするにはXNUMXつのオプションがあります。

  1. プラグインは、ZIPファイルを使用してWordPressダッシュボードから直接インストールできます。
  2. あなたができる FTPクライアントを介してプラグインを抽出する WordPressインストールから/ wp-content / plugins /フォルダーに直接送信します。

プラグインをアクティブにすると、次のパスに従ってブログのRSSフィードにアクセスできるようになります。

http://votresite.com/feed/instant-articles.

インスタントアイテムフィード

マルチサイトネットワークの場合、プラグインは各WebサイトのRSSフィードを作成します  「自動的に魔法のように」。 マルチサイトネットワークを作成し、URLにアクセスして、すべてが正常に機能していることを確認することで、これをテストできます。

インスタント・アイテム・マルチフィード

現時点では、プラグインをインストールしても管理パネルは追加されません。 Githubのreadme.txtファイルは、フィルターを使用してRSSフィードに表示される内容を操作できることを示していますが、指示とフィルターの実装は提供されておらず、ファイルを手動で編集する必要があります。 。 さらに、メモには、フィルターが時間の経過とともに変化する可能性があることが記載されています。 デフォルトのフィードを使用することをお勧めします。

発見も WordPressにFacebookのようなニュースフィードを追加する方法

次に、先に進んで、インスタント記事機能を生成するURLを変更できます。 これを行うには、「facebook-instant-articles.php」というファイルを開き、定数「INSTANT_ARTICLES_SLUG」を見つける必要があります。 プラグインのバージョン0.1では、18行目にあります。その後、「instant-articles」を削除して、使用するスラッグを挿入できます。

RSSフィードスラッグを編集する-インスタント記事

するのを忘れないで コンピュータにこのファイルのバックアップを作成して、問題が発生した場合にファイルを復元します.

必要な変更をすべて行ったら、[設定]> [パーマリンク]に移動できます。 これにより、書き換えルールが更新され、新しいスラッグが有効になります。 これで、インスタント記事のURLを見つけることができる場合があります。

ストリームのURLが変更されました

ステップ3:プログラムをサブスクライブし、ステップに従います

次のステップは、Facebookがプログラムを正式に開始するのを待つことです。 あなたが組織であり、プログラムに興味がある場合は、 Facebookについて彼に知らせてください.

時間をかけてFacebookがまとめた入門ガイドをチェックしてください。 これにより、プログラムが利用可能になったときに準備が整います。

ステップ4:フローを24時間以内のアイテムに制限します

これは、プログラムに受け入れられた場合にのみ行います。

Instant Articlesプログラムにサインアップすると、FacebookはRSSフィードに少なくとも50の記事を表示したいと思うでしょう。 ただし、RSSフィードが初めてインポートされると、Facebookは過去24時間に更新されていない記事を無視します。 このため、組織がスケジュールに追加され、フィードがインポートされると、次のことができるようになります。 流れを修正する 過去24時間以内に変更された記事のみを含める。

この変更を行うには、「facebook-instant-articles.php」ファイルのコピーをダウンロードする必要があります。これは、何かが正常に機能しない場合に復元できます。 このコピーでは、定数「INSTANT_ARTICLES_LIMIT_POSTS」を「true」に定義する必要があります。 フローが制限されるかどうかを定義するために、「if」条件の直前にこの定数を追加すると、おそらくより意味があります。 プラグインのバージョン0.1では、これは150行目にあります。

RSSフィードを24時間に制限する-InstantsFacebook Articles

あなたが今しなければならないのは 変更を保存します、RSSフィードにアクセスします。 24時間前に更新された限定記事を閲覧することができます。

50を超える既製の記事がない限り、組織は承認されないことに注意してください。 したがって、組織がプログラムに受け入れられ、フィードがFacebookにインポートされるまで、フィードを制限しないでください。

あなたのウェブサイトには利用規約ページが必要ですか? この記事を読んで調べてください。

ご覧のとおり、プログラムへの参加はすべての人に適しているわけではありません。 そして本当に興味のある人のために サービス、彼らは彼らの目的を達成するためにいくつかの努力を動員しなければならないでしょう。

プレミアムWordPressプラグインもご覧ください  

他のWordPressプラグインを使用して、モダンな外観を提供し、ブログまたはWebサイトのグリップを最適化できます。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 ARPrice

ARPriceは、価格グリッドを作成するための最も柔軟で完全なWordPressプレミアムプラグインです。 300を超える価格グリッドモデルが含まれており、独自のレスポンシブな価格グリッドと比較表を作成するために必要なすべてのツールを提供します。 また、チームの美しいショーケースを簡単に作成することもできます。

ARPrice ResponsiveWordPress価格表プラグイン

美しく、直感的で、ユニークなWordPressプラグインで、印象的なビジュアルエディターとカスタマイズのリアルタイムプレビューを備えています。

また見なさい どのようにあなたのブログ上のサービスを充電するには?

テンプレートを選択し、クリックするだけで、ドラッグアンドドロップツールを使用して、価格グリッドを細部までカスタマイズできます。 列を無制限に追加したり、色、フォント、アイコンを変更したり、独自の画像やリボンを追加したりできます 割引を発表する例えば。

ダウンロード デモ | ウェブホスティング

2。 PrivateContent

PrivateContentは、真のマルチレベル登録Webサイトを作成するための強力で使いやすいソリューションです。 これは、ユーザーデータの保護に関する新しいヨーロッパの法律と互換性のあるプラグインです。

PrivateContentマルチレベルコンテンツプラグイン

このリストにあるほとんどのプラグインと同様に、インストールするのを待っているだけの完全な機能が多数付属しています。

また見てください あなたの画像とビデオを保護するための5つのスマートフォンアプリ

このプレミアムWordPressプラグインでコンテンツを保護し、サブスクライバーが自分の役割やステータスに基づいてコンテンツにアクセスできるようにします。 さらに、このニッチで最も売れているプラ​​グインのXNUMXつであり、特別な注意を払う価値があります。

ダウンロード | デモ | ウェブホスティング

3. WooCommerce関連製品スライダー

プラグイン WooCommerce関連製品スライダー プリティエフェクトに関連する製品を表示するために使用されるWordPressプラグインです。 同様の製品は、同じカテゴリまたは同じラベルのものです。

WooCommerce関連製品スライダー-インスタント記事

このプラグインにはいくつかの追加オプションがあり、ユーザーは製品詳細ページのさまざまな位置にプラグインを表示できます。 スライダーに最大50個の製品を表示、スライダーの外観と外観をカスタマイズします。

記事もご覧ください 価格グリッドを作成するための5 WordPressプラグイン

ただし、このプラグインをインストールする前に、 事前にWooCommerceをインストールする.

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

結論

ここに ! このチュートリアルは以上です。FacebookInstantsArticles用にWebサイトを準備するのに役立つことを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログの作成。

提案や意見がある場合は、セクションに残してください commentaires.

... 

Elementor:ホバーでアニメーションを作成する方法

Elementor:ホバーでアニメーションを作成する方法

Elementorでホバーアニメーションを作成しますか?

このチュートリアルでは、飛んで、それについての説明を明らかにするペプシの缶を使用します。

次のビデオをチェックして、私たちがあなたに見せたいもののアイデアを得ることをお勧めします。

Elementorでホバーアニメーションを作成する

単一の列セクションを挿入し、サイドバーで選択します 最小の高さ シュール 横柄

オン 最小の高さ クリック VH 次に、スライダーをにドラッグします 100。 常にタブに レイアウト 定義します 650 として largeur.

Elementorでホバーアニメーションを作成する

列とフィールドのサイドバーを選択します 垂直方向の配置 選択 真ん中.

Elementorでホバーアニメーションを作成する

タブ内 スタイル、カラーピッカーをクリックして背景色を変更し、次のように入力します #D37636 その後、セクションで 国境、つかみましょう 20 すべての縁石半径に対して。

Elementorでホバーアニメーションを作成する

タブ内 高度な、パディングバインディングをオフにして入力します 75 内部マージンの場合 オー et ロー et 25 内部マージンの場合 不器用な et 右へ.

Elementorでホバーアニメーションを作成する

次に、列にウィジェットをドラッグします 内部セクション。 内部セクションから列のXNUMXつを削除しましょう。

Elementorでホバーアニメーションを作成する

残りの内側セクションの列に、 タイトルウィジェット タイトルをに変更します ペプシラブ.

次のガイドもお読みください。 Elementorのポートフォリオからエフェクトカードを作成する方法

次に、タブで スタイル、テキストに白い色を付け、タイポグラフィの場合は タイユ シュール 32行の高さ シュール 1.2, 文字間隔 シュール 0.5.

タイトルウィジェット、ドロップ テキストエディタウィジェット テキストを編集します。 タブ内 スタイル、テキストの色を白に変更し、 タイユ タイポグラフィ 16行の高さ シュール 1.5 文字間隔 シュール 0.5.

タブ内 高度な マージンを変更する ロー シュール -10.

セクションで ポジショニング タブ 高度な、変更します シュール Personnalisé幅カスタム 後者をに設定します 310.

Elementorでホバーアニメーションを作成する

段落の下に、 ボタンウィジェット テキスト用 続きを読みます.

Elementorでホバーアニメーションを作成する

タブ内 スタイル ボタンに色を付けます ブランチ とテキストの色はそれをに設定します .

次に、の列を選択します 内側のセクション、セクション 高度な タブ 高度な リンクをオフにしてパーセンテージをクリックし、マージンを設定します 不器用な シュール 20 とで 内部マージン のそれを定義する 不器用な シュール 20.

次に、をドラッグします フォトウィジェット の上に 内部セクション 画像を挿入します。 例として、ウェブ上で簡単に見つけられる飲み物の画像を選択しました。

画像を挿入したら、 画像サイズ シュール 全体 Alignement クリックしましょう センター.

タブ内 高度な、セクションに移動します ポジション シュール 選択 オンライン(自動)上の ポジション 選択 絶対水平方向 選択 それから シフト 入ります -9.9 そして シフト 垂直方向の -105.

さらに下に行く 変換セクション 定義 リサイズ シュール 0.5.

次に、の列を選択します 内部セクション とタブで 高度な の名前を入力してください cssクラス ペプシテキスト。

次に、メインセクションを選択し、セクションに移動します カスタムCSS 彼のタブの 高度な、  次のコードをコピーして貼り付けます。

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

レマルク : このセクションがない場合は、に移動する必要があります Elementorのプロバージョン.

ここで、テキストから背景色を削除する場合は、メイン列を選択し、[スタイル]タブで背景色を無効にします。

このとき、アニメーションはブラウザで正常に実行されます。

タブレットでのアニメーションも完璧なようです

ただし、スマートフォンでは正常に表示されません。 この問題を解決しましょう。

ブラウザを表示してみましょう

ブラウザでセクションを選択し(まだスマートフォンモードになっていることを確認してください)、 シュール 320

次に、メイン列とそのタブを選択します AVANCE、すべての内側マージンをに設定します 25

Elementorでホバーアニメーションを作成する

ブラウザで画像を選択し、タブで スタイル、cliquezシュール PX de に設定します 180.

タブ内 高度な du 画像ウィジェット続けて ポジション、を選択します 絶対水平オフセット 入ります 75 そして中 垂直シフト 入ります 236。 つまり、異なるオフセットを使用して、画像を円の中央に配置してください。

Elementorでホバーアニメーションを作成する

これで、さまざまなデバイスでアニメーションをプレビューできます。

ElementorProを今すぐ入手!!!

結論

そう ! ホバーでアニメーションを作成する方法を示すこの記事は以上です。 Elementorで。 そこへの行き方について懸念がある場合は、 commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...