Otter は Gutenberg ブロック用のページビルダープラグインで、WordPress ブロックエディター (Gutenberg とも呼ばれます) に追加機能を提供します。Elementor や Divi のような従来のページビルダーを使わなくても、より快適にページを構築できます。
クイックリンク 🔗
- インストールする前に Otter Blocks の動作を確認してみませんか ? OTTER BLOCKS のデモを見る
- Gutenberg ブロックについて詳しく知りたいですか ? GUTENBERG EXPLAINED の記事をご覧ください
- 設定についてサポートが必要ですか ? DOCUMENTATION をご確認ください
- Otter Pro にご興味がありますか ? OTTER PRO の詳細をご覧ください
Otter Blocks で利用できる機能
- Gutenberg 用の追加ブロック 20種類以上
- パターンコレクション
- フルページテンプレート
- 表示条件 (Visibility Conditions)
- カスタム CSS
- アニメーション
- 動的コンテンツなど
サイト上に存在するすべてのブロック (サードパーティ製ブロックを含む) に対応しています。
Custom CSS ブロック機能では、ページ上の任意の Gutenberg ブロックの CSS プロパティを直接カスタマイズできます。また、Animation 機能を使用すると、任意のブロックにすばやく簡単にアニメーションを追加でき、ページ内の各ブロックやセクションの魅力を高められます。
Otter の表示条件 (Visibility Conditions) 機能では、指定したブロックをページに表示する条件を設定できます。
Patterns Library には、さまざまなスタイルのデザイン要素が用意されており、ページ作成に役立ちます。ヘッダー、推薦文、価格表、各種セクションなど、サイトの重要なエリアを幅広く網羅しています。
Otter Blocks の概要をご確認ください
Otter の Gutenberg ブロックで何ができますか ? 🤔
WordPress 用 Gutenberg ブロックプラグイン
Otter は、Gutenberg でのページ作成をより簡単にする、便利で魅力的なブロックを26種類以上追加します。
ブロックを追加するだけではなく、スタイルやデザインを細かく調整できる高度なカスタマイズオプションも備えています。Otter を使用すると、これらをすべて利用できます。
各ブロックには、サイトを思いどおりにデザインするためのカスタマイズ機能が用意されています:
- メインカラー、アクセント、背景のカラ―コントロール。
- ボタンをクリックするだけで、適用できるアニメーション効果 (バウンス、フェード、フリップ、回転、スライド、回転移動、ライトスピード など)。
- 文字間隔やフォント選択などのタイポグラフィコントロール。
Otter Blocks のモバイル対応
Otter に組み込まれたレスポンシブ設定を使用して、モバイルに最適化されたデザインを作成できます。各ブロックは調整可能で、モバイル、タブレット、デスクトップで一貫した表示を実現できます。
WordPress 用 Gutenberg ブロック条件プラグイン
ログイン中またはログアウト中のユーザーにだけ、特定のブロックを表示したいですか ? また、ストアの顧客かどうか、ブログの編集者かどうかなど、ユーザー権限グループに応じて表示を切り替えたい場合はどうでしょう。Otter で利用できる Gutenberg ブロック条件 (Block Conditions) 機能を使えば、これが可能です。Otter の Pro 版にアップグレードして、さらに強力なブロック条件を利用しましょう。たとえば次のような条件があります:
- URL クエリ文字列
- 日付の範囲
- 曜日
- 時間帯
- WooCommerce のお買い物カゴ内商品
- WooCommerce の合計購入金額
- WooCommerce のお買い物カゴの合計
- WooCommerce のカテゴリー
- WooCommerce のタグ
- WooCommerce の属性
- Cookie ベース
- ほかにも
WordPress 用 Gutenberg ブロックアニメーションプラグイン
ページ上の任意のブロックに追加できる魅力的なアニメーションで、訪問者を驚かせましょう。50種類以上のアニメーションから選択でき、Otter を使用すると投稿やページにさらなる華やかさを加えられます
WordPress 用 Gutenberg ポップアッププラグイン
ポップアップは、Web 上で長く利用されてきたリード獲得や通知表示の手法のひとつです。Otter で利用できる Gutenberg ポップアップブロックを使用すると、Gutenberg で利用可能な他のブロックを組み合わせてポップアップを作成できます !
表示タイミングや閉じ方を設定して、ポップアップを細かく設定できます。このポップアップブロックでは、ページ読み込み時、離脱時、アンカークリック時、スクロール時など、複数のトリガーを利用できます。
カスタムオーバーレイを使用してポップアップをデザインできます。ブランドイメージに合わせながら、より注目を集めることができます。ライブデモを見る
Otter ブロックのグローバルデフォルト設定
ページにブロックを追加するたびに同じ設定を繰り返すことにお困りですか ? Otter では、Section ブロック、Icon ブロック、Advanced Heading など、よく使用されるブロックのデフォルト設定をあらかじめ指定できます。
Otter で利用できるブロック:
Accordion Gutenberg Block [無料]
ボタンのクリックで表示と非表示を切り替えられる縦並びのコンテンツリストを作成できます。一般的に Accordions と呼ばれる形式です。ライブデモを見る
Advanced Heading Gutenberg Block [無料]
必要だとは思っていなかったかもしれない見出しブロックです。この Otter ブロックは標準の見出しブロックと同等の機能に加え、フォントの変更やテキストの一部の強調表示などの追加機能を備えています。ライブデモを見る
AI Block [無料]
AI Block によって、AI を活用したコンテンツ作成やフォーム作成を簡単に行えます。AI Content Generator を使用すれば、テキスト、動的な見出し、内容のある段落をスムーズに作成でき、AI Form Generator でフォームの作成も簡単になります。AI による機能を1つのブロックにまとめた、オールインワンのソリューションです。
Button Group Gutenberg Block [無料]
複数のボタンをすばやく作成し、ページを閲覧している端末に応じて縦または横に表示できます。ライブデモを見る
Countdown Gutenberg Block [無料]
大きなイベントまでのカウントダウンを表示できます。日、時間、分、秒から選んでカウントダウンできます。ライブデモを見る
Contact Form Gutenberg Block [無料]
ページ上の任意の場所に、すばやく簡単にお問い合わせフォームを挿入できます。Brevo (Sendinblue) や Mailchimp と連携すれば、フォームをリード獲得ツールとして活用することも可能です。さらに、Webhook 連携でデータ管理を効率化し、hCaptcha 連携でセキュリティを強化できます。ライブデモを見る
Content Timeline Block [無料]
イベントを時系列のタイムラインでわかりやすく表示できます。過去の出来事、プロセスの手順、重要なマイルストーンの紹介に適しています。
Countdown Block [無料]
大きなイベントまでのカウントダウンを表示できます。これらの Gutenberg ブロックを活用してください。ライブデモを見る
Circular Progress Block [無料]
Circle Counter ブロックで進捗状況を表示できます。ライブデモを見る
Flip Box Block [無料]
Gutenberg で利用可能な任意のコンテンツやブロックを挿入できる、フリップ効果付きカードを作成できます。ライブデモを見る
Icon List Gutenberg Block [無料]
カスタムアイコンをポインターとして使用し、シンプルな箇条書きをより印象的にできます。ライブデモを見る
Icon Gutenberg Block [無料]
Font Awesome または Otter 独自のカスタムアイコン一覧から任意のアイコンをページ上の好きな場所に表示できます。色の変更や枠線の追加、他のブロックとの組み合わせにより、ページの見た目をさらに向上できます。ライブデモを見る
Lottie Animation Gutenberg Block [無料]
Lottie をご存じですか ? Otter の Lottie Animation Gutenberg ブロックを使えば、Gutenberg の任意の場所に Lottie アニメーションを表示できます。ライブデモを見る
Maps Gutenberg Block [無料]
Open Street Map または Google Maps ブロックを選択し、訪問者向けに任意の場所へマーカーを設置できます。マーカーの色や説明のカスタマイズ、名前や座標での検索、地図コントロールの追加や削除、サイズやスタイルの変更などを数回のクリックで行えます。ライブデモを見る
Progress Bar Block [無料]
美しい Progress Bar ブロックで進捗状況を表示できます。ライブデモを見る
Posts Gutenberg Block [無料]
このブロックを使用すると、投稿、固定ページ、カスタム投稿タイプの項目を現在編集中のページに挿入できます。投稿ブロックでは、複数のページにわたって一定数の投稿を表示できます。スタイル、投稿タイプ、設定、デザイン、レイアウトなどをカスタマイズできます。
Product Review Gutenberg Block [無料]
お気に入りの商品についてブログを書いていますか ? またはレビューサイトを運営していますか ? このブロックを使用してレビュー表を作成し、特長、メリットとデメリット、購入リンクなどを一覧表示できます。ライブデモを見る
Popup Gutenberg Block [無料]
目を引くポップアップを作成し、表示するタイミングや閉じ方を細かく設定できます。ライブデモを見る
Slider Gutenberg Block [無料]
この Gutenberg ブロックを使用すると、任意の Gutenberg ページに画像スライダーを作成できます。スライダーの高さ、表示間隔、1ページあたりのスライド数、自動再生などを設定できます。ライブデモを見る
Section Gutenberg Block [無料]
高機能なカラムブロックです。最大6カラムのセクションを作成でき、各カラムにカスタム背景色、画像、グラデーションを設定できます。レスポンシブ機能を使用して、デスクトップ、タブレット、モバイル表示ごとにパディングやマージンを設定できます。ライブデモを見る
Stripe Checkout [無料]
このブロックは、電子書籍やライセンスなど、少数の商品を販売したい場合に便利です。オンラインストア全体を構築することなく販売できます。
Sharing Icons Block [無料]
訪問者がさまざまなソーシャル共有サービスでコンテンツを共有できる共有ボタンを追加できます。ライブデモを見る
Tabs Gutenberg Block [無料]
ボタンのクリックで表示と非表示を切り替えられる横並びのコンテンツリストを作成できます。一般的に Tabs と呼ばれる形式です。ライブデモを見る
Add to Cart (カートに追加) Gutenberg Block [PRO]
編集中の投稿やページの任意の場所に、WooCommerce 商品用の「カートに追加」ボタンを追加できます。
Business Hours Gutenberg Block [PRO]
美しくデザインされた Business Hours 表を作成し、納得のいく仕上がりになるまで設定を細かく調整できます。
Live Search [PRO]
Live Search 機能は、標準の Search ブロックを強化する機能です。Live Search パネル内のインスペクターで設定できる isLive と postTypes という2つの追加属性を提供します。
Modal [PRO]
モーダルダイアログを実装し、フォーム、コンテンツ、告知などをページレイアウト内に直接表示できます。インタラクティブな体験を提供します。
Review Comparison Table (レビュー比較表) [PRO]
Otter のレビュー比較表ブロックで、読者を魅了しましょう。ブログやサイト向けに、プロフェッショナルな見た目の商品比較表を簡単に作成できます。
Otter では、サイトのページ作成をサポートするために、新しい Gutenberg Block を継続的に追加しています。追加してほしい機能がありましたら、ぜひ Support Forum でお知らせください。その他のブロックには次のようなものがあります:
Otter でインポートできるパターンとフルページテンプレート:
カスタマイズ可能なパターンやフルページの WordPress テンプレートを使用して、サイトを簡単に公開できます。ワンクリックで完成済みデザインをインポートでき、すぐに始められます。
サービスパターン
ページを整理しながら、必要に応じて詳細情報を表示できるセクションで、サービス内容をわかりやすく構成できます。ライブデモを見る
お客様の声パターン
ページを整理しながら、必要に応じて詳細情報を表示できるセクションで、サービス内容をわかりやすく構成できます。ライブデモを見る
価格表パターン
用途に合わせて価格表をカスタマイズできます。読みやすさと視認性を高める柔軟なレイアウトパターンを用意しており、さまざまなビジネスモデルに対応します。ライブデモを見る
特長紹介セクションパターン
整理されたレイアウトを使用して商品やサービスの特長を詳しく紹介できます。複雑な情報もわかりやすく表示できます。ライブデモを見る
コールトゥアクションセクションパターン
注目を集め、すぐに行動を促すよう設計されたコールトゥアクションセクションで、コンバージョンを高めましょう。ライブデモを見る
📌 利用可能なすべてのパターンのライブデモは、こちらをクリックしてご確認ください。
📌 利用可能なすべてのフルページテンプレートのライブデモは、こちらをクリックしてご確認ください。
Otter Pro でさらに多くのオプションを利用できます 🤩
WooCommerce Builder Blocks
Otter の WooCommerce Builder Blocks を使用すると、商品詳細ページを自由にカスタマイズできます。新機能はすべて、コンバージョン率の最大化とさらなる改善を目的として設計されています。
Otter Pro では、さらに多くの機能をご利用いただけます。たとえば:
- 買い物かごブロックを追加
- 営業時間ブロック
- Modal Block
- Product Review Comparison Block (商品レビュー比較)
- Live Search Block
- 無料ブロック向け Pro アドオン
- さらに多くの動的コンテンツのオプション
- さらに多くの表示条件 (Visibility Conditions) のオプション
- さらに多くのパターンとフルページテンプレート
- 他にも たくさん !
セットアップ不要で Otter Blocks のライブデモをお試しいただけます。こちらをクリック してお試しください。
Otter はどのような方におすすめですか ? 👀
- 便利で使いやすい Gutenberg ブロックを活用して、新しい Gutenberg エディターの機能を最大限に活かしたい方。
- Elementor や Divi Builder などの従来のページビルダーから、新しい Gutenberg ブロックエディターへ移行を検討している方。
- 短時間で Gutenberg ページを作成したい方。
- ログイン状態などの条件に応じて Gutenberg ブロックの表示と非表示を切り替えたい方。
- Gutenberg ブロックにアニメーションを追加したい方。
活用例を見てみましょう 🚀
Otter はさまざまな可能性を広げます。どのようなユーザーがどのように活用できるのかをご紹介します:
-
旅行ブロガー: Otter の Maps および Google Maps ブロックを使用して魅力的な地図を追加し、旅の記録を世界に発信できます。
-
非営利団体: Otter の Circle Counter や Testimonial ブロックを使用して活動成果を紹介し、共感を促します。
-
レストランオーナー: Otter の Flip Card および Form ブロックを使用してレストランのメニューを紹介し、予約を簡単に受け付けられます。食欲をそそるオンラインプレゼンスを実現できます。
-
テック系商品レビュアー: Otter の Product Review ブロックを使用して詳細な製品レビューを掲載できます。情報量があり、読みごたえのあるコンテンツを作成できます。
-
ブロガー: Sharing Icons を使用して記事に共有機能を追加できます。Slider を活用して画像ギャラリーを表示し、読者の関心を高めます。
-
コンテンツクリエイターおよびデジタル商品の販売者: Stripe Checkout Gutenberg ブロックを使用すると、オンラインストア全体を構築することなく、電子書籍、オンラインコース、ソフトウェアライセンス、デジタルアートなどのデジタル商品を販売できます。このブロックを導入することで、スムーズで安全な購入手続き体験を提供できます。
-
商品レビュアー: Review Comparison Table を使用して、情報量があり魅力的な商品比較レビューを作成できます。ユーザーが十分な情報に基づいて判断できるようサポートします。
-
レストランオーナー: Business Hours ブロックを使用して営業時間をスタイリッシュに表示し、来店しやすい環境を整えます。
-
オンラインディレクトリ: ディレクトリや一覧表示、豊富なコンテンツを提供するサイトに適しています。ライブ検索により、目的のコンテンツへすばやくアクセスできます。
サポート 🤝
サポートが必要な場合は、Support Forum に新しいスレッドを作成してください。
ドキュメント 📚
Otter Blocks を最大限に活用する方法を、詳しくわかりやすくまとめた ドキュメント でご確認ください。
コントリビューターになりませんか 💁♂️
Otter Blocks はオープンソースプロジェクトであり、活発なコミュニティへの参加を歓迎しています。プラグインをさらに改善するために、ぜひご協力ください — GitHub リンク
役立つ項目
- WordPress についてもっと知りたい方は ブログ をお読みください。
- 他のプラグインにもご興味がありますか ? こちらをご覧ください。
- 役立つ YouTube チュートリアルプレイリスト で、Otter Blocks を最大限に活用しましょう。
このプラグインは、パターン一覧、AI プロンプト、およびオンボーディングにアクセスするために api.themeisle.com のサービスを利用しています。サービスのテンプレートコレクションを利用するためにアカウントは必要ありません。プライバシーポリシーは こちら で確認できます。