コーディング不要でアニメーション追加できるVK Blocks Proの使い方

VK Blocks Proを使うとWordPressに簡単なアニメーションを追加できる

WordPressサイトや通常の静的サイトでも画像やテキストにアニメーションを加えようとするとCSS/JSコーディングできるコーダー、エンジニアでないと実装ができません。

簡単なアニメーションをクリックのみで追加できるWordPressプラグイン「VK Blocks Pro」というのがあるので使ってみたので使い方を紹介します。

VK Blocks Proをインストールして使いたいアニメーションを選ぶ

プラグインをインストールすると上記のようなブロックのパネルに「アニメーション」が追加されます。

(1)あらかじめアニメーション効果を与えたい箇所をグループ化してからアニメーション効果をつけます。

(2)右側のパネルからアニメーションの効果を選び最後に「更新」をクリックして保存します。

アニメーションの効果は以下の種類があります。

フェードイン / スライドアップ / スライド左 / スライド右 / 左右 / 上下 / ぶるぶる(Y方向)/ ぶるぶる(X方向)/ どきどき / ゆらゆら

私は自サイトポートフォリオにはフェードインを使用してみました。

スクロールに反応してふわっと表示されるようになりました。

アニメーション以外にもたくさん機能がある

VK Blocks Proはアニメーション以外にもたくさん機能があります。

詳しくは公式サイトをご覧ください。

VK Blocks | 事業案内 | 株式会社ベクトル

「VK Blocks」は、WordPressのブロックエディタに対応したプラグインです。WordPress公式ディレクトリに登録してありますので、WordPressの管理画面より無料でインストー…

  • スライダー
  • 横並びアイコン
  • アイコン
  • 固定ページ本文
  • FAQ(アコーディオン開閉)
  • 見出し
  • フキダシ
  • フロー
  • ボタン
  • レスポンシブスペーサー
  • 枠線ボックス
  • 先祖階層からのページリスト
  • アラート
  • PR Block
  • スタッフブロック

‥etc

個人的にはスライダー機能が自分がポートフォリオサイトリニューアルする時に役立ちました。

VK Blocks Proプラグイン使うにはVektor Passport有料版を購入する必要がある

とても便利な機能が多いVK Blocks Proプラグインですが単体で販売していないので下記のベクターパスポートを購入しないと手に入りません。それだけが最大のネックです。

WordPressでサイト運営しているが細かいコーディングにまで手が回らないといったデザイナー、事業者の方にはおすすめと思います。

Vektor Passport(アップデート期間1年)

Vektor Passport(ライセンス期間1年)

LP制作を受注してるフリーランスの自分としてはクライアントのサイトにもライセンス購入すればVK Blocks Proをインストールして納品することも可能なのでWordPressのLP制作には活用できそうです。

ただ今回こういう有料のWordPressプラグインやテーマを使用して思ったのはWordPressのノーコード化がかなり進んでる‥!!ということです。

日本ではノーコードのstudioの人気が高まっているし、WordPressもノーコードツールに対抗してるのだろうなと思いました。

投稿者プロフィール

Mika
MikaLP専門webデザイナー
ブログでは主にweb/LPデザイン、WordPress(Lightningテーマ)、note、フリーランス、ランサーズなどの記事を書いています。

web制作会社退社後、ランサーズ(大手クラウドソーシングサイト)で実績220件以上の認定ランサーとしても活動中。

【プロフィールページを見る】

Follow me!

LP制作代行 フリーランス LPデザイナー LPデザイン依頼 WordPress ランディングページ 見積もり無料 料金価格

WordPressを活用した更新性の高いLP制作をしています。他、EC・楽天ショップなどの商品ページLPデザインなども承っております。

WordPressのLP以外にも通常のHTMLのLP制作の対応も可能です。

現時点で発注を考えていなくても、現在抱えていらっしゃる課題やお悩み、依頼を検討されているお仕事内容をぜひお聞かせください。
ご相談内容はメールフォームからお送りいただけますと幸いです。

制作のご依頼はこちらから

営業時間:平日9〜20時

営業日1日以内にご返信致します。
「資料DL・お問い合わせ」のフォームから自動返信メールで資料ダウンロード可能です。

WordPressのLP制作実績