人気のあるウェブサイトでこれらの美しいCSSアニメーションを見たことがありますか? スライドするコンテンツ、散逸するコンテンツ、バウンドする画像などのアニメーション効果…。 ? また、WordPressにCSSアニメーションを追加しますか?

この記事では、コードを記述せずにCSSアニメーションをWordPressに簡単に追加する方法を紹介します。

いつ、なぜあなたはCSSアニメーションを使用する必要がありますか?

CSSアニメーションを使用すると、ページのさまざまな部分にユーザーの注意を引くことができます。 これらを使用して、製品の機能や召喚ボタンをアニメーション化できます。 多くのWebサイトでは、ユーザーがページを下にスクロールするときにCSSアニメーションを使用します。 ページに個性を加え、最も重要な要素を強調します。

CSSアニメーションは、フラッシュやビデオを使用するよりも高速です。 それらはすばやくロードされ、ほとんどの最新のWebブラウザーでサポートされています。 CSSアニメーションをWordPressテーマまたはスタイルシートに手動で追加できます。 子テーマ。 ただし、ほとんどの初心者は、テーマファイルを編集したり、CSSを学習したりすることを望みません。

ただし、このチュートリアルでは、CSSアニメーションをWordPress Webサイトに簡単に追加する方法について説明します。

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

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

CSSアニメーションを設定する方法

このチュートリアルではプラグインを使用します。 これを使用して、CSSアニメーションを作成できます WYSIWYGビジュアルエディター。 最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです それをアニメーション化!. プラグインは設定なしで動作し、コントロールパネルはありません。

発見 ワードプレスでプラグインをインストールする方法 あなたがそれをしたことがないなら。

新しい投稿を作成するだけで、ビジュアルエディタのツールバーに新しいボタンが表示されます。

WordPressにCSSアニメーションを追加する-animateit-button

ボタンをクリックすると、CSSアニメーションをデザインできる新しいウィンドウが表示されます。 プラグインは、すべてから選択できる多くのCSSアニメーションをサポートしています。

アニメーションエディタ

まず、アニメーションスタイルを選択する必要があります。 その後、アニメーションまでの待ち時間とアニメーションの長さを選択する必要があります。 最後に、アニメーションをいつ開始するかを指定できます。

また、発見することによってさらに進んでください あなたのブログに印象的なアニメーションを追加する方法

プラグインにはXNUMXつの選択肢があります。 クリック、ホバー、またはスクロール中にアニメーションを実行できます。

WordPressにCSSアニメーションを追加する-animateon

設定に満足したら、ボタン「 これは、アニメーション化 アニメーションのプレビューを表示します。

その後、ボタンをクリックしてください インセット 投稿またはページにアニメーションを追加します。 プラグインがビジュアルエディタにダミーコンテンツを含むショートコードを追加することに気付くでしょう。

アニメーション、ショート

ショートコード内のダミーコンテンツを削除し、独自のコンテンツ、画像、またはその他のアニメーション化するものに置き換える必要があります。

発見も WordPress Webサイトにインタラクティブマップを追加する方法

コンテンツショート

あなたが今しなければならないのはあなたのコンテンツを公開してそれをプレビューすることだけです。

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

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

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

1。 ChimpMate Pro

チンパンジーは WordPressのプラグイン MailChimp のプレミアム ポップアップ。読者を購読者に変えるのに役立ちます。 迷惑なポップアップで訪問者を苛立たせることなく、メーリングリストを増やすように設計されています.チンプメイト プロ

それは完全にカスタマイズ可能であり、いつどこでポップアップを表示するかをマスターします。 その他の機能:サポート いくつかのブラウザの複数のスケジューリングオプション、完全にカスタマイズ可能なレイアウト、応答性の高い顧客サポート、私はとの完全な統合 WooCommerce、excellente キャッシュ管理、完全な統合 多くは WordPressテーマ、おかげで多言語サポート WPMLプラグインへもうそんなにない。

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

2。 WooCommerceカードストリーム決済ゲートウェイ

CardStream は、唯一の独立した支払いゲートウェイ プロバイダーです。 これ WordPressのプラグイン プレミアムを使用すると、Cardstream を介して WooCommerce オンライン ストアで直接支払いを受け入れることができます。

WooCommerce カードストリーム支払いゲートウェイ

また、Cardstreamのホスト型ソリューションを使用して支払いを受け入れる機能も提供します。

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

3。 データソース

データソースは WordPressのプラグイン プレミアムは、Web サイトの任意のページでデータを視覚的に表示することに重点を置いています。 CSV ファイル、XML、Excel、Google スプレッドシート、MySQL データベース、またはカスタム投稿タイプからのデータを、並べ替えおよびフィルター可能なテーブル、さまざまなグラフ、地図などとして表示できます。データソースワードプレスプラグインは、グラフィックテーブルのウェブサイトのブログフォームを挿入します

その機能の中でも、特に次のものがあります。直感的なインターフェース、tデータのモデルに基づいたableaux、t選別可能、濾過可能、そして応答可能なの支持 Googleマップ多言語レスポンシブカスタマーサポート、1 mユーザーマニュアル、iクイックインストール、eもっと

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

推奨リソース

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

まとめ

ここに ! このチュートリアルは以上です。CSSアニメーションをWordPressに統合する方法を学ぶのに役立つことを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する

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

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

...