Otter Blocks – Gutenberg エディターと FSE のための Gutenberg ブロック、ページビルダー

説明

Otter は Gutenberg ブロック用のページビルダープラグインで、WordPress ブロックエディター (Gutenberg とも呼ばれます) に追加機能を提供します。Elementor や Divi のような従来のページビルダーを使わなくても、より快適にページを構築できます。

クイックリンク 🔗

• インストールする前に Otter Blocks の動作を確認してみませんか ? OTTER BLOCKS のデモを見る
• Gutenberg ブロックについて詳しく知りたいですか ? GUTENBERG EXPLAINED の記事をご覧ください
• 設定についてサポートが必要ですか ? DOCUMENTATION をご確認ください
• Otter Pro にご興味がありますか ? OTTER PRO の詳細をご覧ください

Otter Blocks で利用できる機能

• Gutenberg 用の追加ブロック 20種類以上
• パターンコレクション
• Full-page Templates
• Visibility Conditions
• Custom CSS
• Animations
• Dynamic Content and more

For all blocks including third-party blocks present on your website.

Custom CSS ブロック機能では、ページ上の任意の Gutenberg ブロックの CSS プロパティを直接カスタマイズできます。また、Animation 機能を使用すると、任意のブロックにすばやく簡単にアニメーションを追加でき、ページ内の各ブロックやセクションの魅力を高められます。

Otter の表示条件 (Visibility Conditions) 機能では、指定したブロックをページに表示する条件を設定できます。

Patterns Library には、さまざまなスタイルのデザイン要素が用意されており、ページ作成に役立ちます。ヘッダー、推薦文、価格表、各種セクションなど、サイトの重要なエリアを幅広く網羅しています。

Checkout a quick overview of Otter Blocks

How Can Otter’s Gutenberg Blocks Help You? 🤔

A WordPress Gutenberg Blocks Plugin

Otter adds 26+ amazing and useful blocks to make page building in Gutenberg a breeze!

More than just blocks, you need advanced customization options to give you control over style and appearance. With Otter, you’ve got it all.

Every block has customization support to help you style your site according to your vision:

• Color controls for primary, accents, and backgrounds.
• Animation backing, bouncing, fading, flipping, rotating, sliding, rolling, light speed, and more at the click of a button.
• Typography controls from spacing to font choice.

Mobile Responsiveness of Otter Blocks

Create mobile-friendly designs with Otter’s built-in responsive settings. Each block can be tweaked to provide a consistent experience for mobile, tablet, and desktop.

A WordPress Gutenberg Block Conditions Plugin

Want to show certain blocks only when a user is Logged in or Logged Out? How about if they’re a customer of your store versus an editor for your blog or any other user role? With the Gutenberg Block Conditions feature available in Otter, it’s possible. Upgrade to the PRO version of Otter to unleash the power of more block conditions such as:

• URL クエリ文字列
• 日付の範囲
• 曜日
• 時刻
• WooCommerce Products in Cart
• WooCommerce Total Spent
• WooCommerce Cart Total
• WooCommerce Categories
• WooCommerce Tags
• WooCommerce Attributes
• Cookie-based
• ほかにも

A WordPress Gutenberg Blocks Animation Plugin

WOW, your website visitors with amazing animations that can be added to any block on the page. With over 50+ animations available to choose from; Otter makes it possible to add some extra flare to any post or page on your website

A WordPress Gutenberg Popup Plugin

Popups are one of the oldest lead-capturing and notice-conveying techniques on the web. With the Gutenberg Popup Block available in Otter, you can create popups made from any other block available in Gutenberg!

Fine-tune your popups by setting when they should appear and how they can be closed. With our popup block, you gain access to multiple triggers such as on load, on exit, on anchor click, and on scroll.

カスタムオーバーレイを使用してポップアップをデザインできます。ブランドイメージに合わせながら、より注目を集めることができます。ライブデモを見る

Global Defaults for Otter’s Blocks

Tired of always having to set the same options every time you add a block to the page? With Otter, you can set the default configuration for some of the most commonly used blocks like the Section Block, Icon Block, Advanced Heading, and more.

Blocks Available in Otter:

Accordion Gutenberg Block [FREE]

ボタンのクリックで表示と非表示を切り替えられる縦並びのコンテンツリストを作成できます。一般的に Accordions と呼ばれる形式です。ライブデモを見る

Advanced Heading Gutenberg Block [FREE]

必要だとは思っていなかったかもしれない見出しブロックです。この Otter ブロックは標準の見出しブロックと同等の機能に加え、フォントの変更やテキストの一部の強調表示などの追加機能を備えています。ライブデモを見る

AI Block [無料]

Step inside the AI Block, your gateway to effortless content and form creation, all powered by AI. With the AI Content Generator, crafting text, dynamic headings, and insightful paragraphs is a breeze, while the AI Form Generator simplifies building forms. It’s your all-in-one solution for seamless work — everything you need with AI, neatly packed into a single block.

Button Group Gutenberg Block [FREE]

複数のボタンをすばやく作成し、ページを閲覧している端末に応じて縦または横に表示できます。ライブデモを見る

Countdown Gutenberg Block [FREE]

大きなイベントまでのカウントダウンを表示できます。日、時間、分、秒から選んでカウントダウンできます。ライブデモを見る

Contact Form Gutenberg Block [FREE]

ページ上の任意の場所に、すばやく簡単にお問い合わせフォームを挿入できます。Brevo (Sendinblue) や Mailchimp と連携すれば、フォームをリード獲得ツールとして活用することも可能です。さらに、Webhook 連携でデータ管理を効率化し、hCaptcha 連携でセキュリティを強化できます。ライブデモを見る

Content Timeline Block [FREE]

イベントを時系列のタイムラインでわかりやすく表示できます。過去の出来事、プロセスの手順、重要なマイルストーンの紹介に適しています。

Countdown Block [FREE]

大きなイベントまでのカウントダウンを表示できます。これらの Gutenberg ブロックを活用してください。ライブデモを見る

Circular Progress Block [FREE]

Circle Counter ブロックで進捗状況を表示できます。ライブデモを見る

Flip Box Block [FREE]

Gutenberg で利用可能な任意のコンテンツやブロックを挿入できる、フリップ効果付きカードを作成できます。ライブデモを見る

Icon List Gutenberg Block [FREE]

カスタムアイコンをポインターとして使用し、シンプルな箇条書きをより印象的にできます。ライブデモを見る

Icon Gutenberg Block [FREE]

Font Awesome または Otter 独自のカスタムアイコン一覧から任意のアイコンをページ上の好きな場所に表示できます。色の変更や枠線の追加、他のブロックとの組み合わせにより、ページの見た目をさらに向上できます。ライブデモを見る

Lottie Animation Gutenberg Block [FREE]

Lottie をご存じですか ? Otter の Lottie Animation Gutenberg ブロックを使えば、Gutenberg の任意の場所に Lottie アニメーションを表示できます。ライブデモを見る

Maps Gutenberg Block [FREE]

Open Street Map または Google Maps ブロックを選択し、訪問者向けに任意の場所へマーカーを設置できます。マーカーの色や説明のカスタマイズ、名前や座標での検索、地図コントロールの追加や削除、サイズやスタイルの変更などを数回のクリックで行えます。ライブデモを見る

Progress Bar Block [FREE]

美しい Progress Bar ブロックで進捗状況を表示できます。ライブデモを見る

Posts Gutenberg Block [FREE]

Use this block to insert items from posts, pages, and custom post types into the current page being edited. The Posts block allows displaying a certain number of posts on different pages. Customizations available for this block cover areas such as styles, post types, settings, designs, and layout.

Product Review Gutenberg Block [FREE]

お気に入りの商品についてブログを書いていますか ? またはレビューサイトを運営していますか ? このブロックを使用してレビュー表を作成し、特長、メリットとデメリット、購入リンクなどを一覧表示できます。ライブデモを見る

Popup Gutenberg Block [FREE]

目を引くポップアップを作成し、表示するタイミングや閉じ方を細かく設定できます。ライブデモを見る

Slider Gutenberg Block [FREE]

この Gutenberg ブロックを使用すると、任意の Gutenberg ページに画像スライダーを作成できます。スライダーの高さ、表示間隔、1ページあたりのスライド数、自動再生などを設定できます。ライブデモを見る

Section Gutenberg Block [FREE]

高機能なカラムブロックです。最大6カラムのセクションを作成でき、各カラムにカスタム背景色、画像、グラデーションを設定できます。レスポンシブ機能を使用して、デスクトップ、タブレット、モバイル表示ごとにパディングやマージンを設定できます。ライブデモを見る

Stripe Checkout [FREE]

This block will be very useful if you want to sell a couple of products without setting up a whole store, such as ebooks, some licenses, etc.

Sharing Icons Block [FREE]

訪問者がさまざまなソーシャル共有サービスでコンテンツを共有できる共有ボタンを追加できます。ライブデモを見る

Tabs Gutenberg Block [FREE]

ボタンのクリックで表示と非表示を切り替えられる横並びのコンテンツリストを作成できます。一般的に Tabs と呼ばれる形式です。ライブデモを見る

Add to Cart Gutenberg Block [PRO]

Drop an Add to Cart button block for any WooCommerce product anywhere on the post or page that you’re editing.

Business Hours Gutenberg Block [PRO]

Create a beautifully styled Business Hours table and fine-tune its settings until it’s perfect.

Live Search [PRO]

The Live Search feature enhances the core block Search by adding two additional attributes ( isLive and postTypes ) that can be set inside the inspector under the Live Search panel.

Modal [PRO]

モーダルダイアログを実装し、フォーム、コンテンツ、告知などをページレイアウト内に直接表示できます。インタラクティブな体験を提供します。

Review Comparision Table [PRO]

Get ready to impress your readers with Otter’s “Review Comparison Table” block. Effortlessly create professional-looking product comparison tables for your blog or website.

We’re constantly adding new Gutenberg Blocks to Otter to assist in your website page building. Feel free to tell us what we’re missing on our Support Forum! Some other blocks include:

Ready to Import Patterns & Full-page Templates in Otter:

カスタマイズ可能なパターンやフルページの WordPress テンプレートを使用して、サイトを簡単に公開できます。ワンクリックで完成済みデザインをインポートでき、すぐに始められます。

Service Patterns

ページを整理しながら、必要に応じて詳細情報を表示できるセクションで、サービス内容をわかりやすく構成できます。ライブデモを見る

Testimonial Patterns

ページを整理しながら、必要に応じて詳細情報を表示できるセクションで、サービス内容をわかりやすく構成できます。ライブデモを見る

Pricing Patterns

用途に合わせて価格表をカスタマイズできます。読みやすさと視認性を高める柔軟なレイアウトパターンを用意しており、さまざまなビジネスモデルに対応します。ライブデモを見る

Features Section Patterns

整理されたレイアウトを使用して商品やサービスの特長を詳しく紹介できます。複雑な情報もわかりやすく表示できます。ライブデモを見る

Call-to-action Section Patterns

注目を集め、すぐに行動を促すよう設計されたコールトゥアクションセクションで、コンバージョンを高めましょう。ライブデモを見る

📌 利用可能なすべてのパターンのライブデモは、こちらをクリックしてご確認ください。

📌 利用可能なすべてのフルページテンプレートのライブデモは、こちらをクリックしてご確認ください。

Get More Options in Otter Pro 🤩

WooCommerce Builder Blocks

Build custom Single Product Pages using WooCommerce Builder Blocks by Otter. All the new features are designed to maximize your conversion rate and bring more improvements.

With Otter Pro, you get a lot more features, including:

• 買い物かごブロックを追加
• 営業時間ブロック
• Modal Block
• Product Review Comparison Block
• Live Search Block
• Pro Add-ons for Free Blocks
• More Dynamic Content options
• More Visibility Conditions options
• More Patterns & Full-page templates
• 他にも たくさん !

You can try a live demo of Otter Blocks – no setup required. Click here to try it out.

Who is Otter For? 👀

• 便利で使いやすい Gutenberg ブロックを活用して、新しい Gutenberg エディターの機能を最大限に活かしたい方。
• Elementor や Divi Builder などの従来のページビルダーから、新しい Gutenberg ブロックエディターへ移行を検討している方。
• 短時間で Gutenberg ページを作成したい方。
• ログイン状態などの条件に応じて Gutenberg ブロックの表示と非表示を切り替えたい方。
• Gutenberg ブロックにアニメーションを追加したい方。

Let’s See Some Use Cases 🚀

Otter opens up a world of opportunities! Discover how different audience segments can make the most of it:

• 旅行ブロガー: 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 🤝

We’re here to help. Feel free to open a new thread on the Support Forum.

ドキュメンテーション

Discover how to make the most of Otter Blocks with our detailed and user-friendly documentation.

Become a Contributor 💁‍♂️

Otter Blocks is an open-source project, and we welcome contributors to be part of our vibrant community! Help us improve the plugin and make it even better – GitHub Link

役立つ項目

• WordPress についてもっと知りたい方は ブログ をお読みください。
• Interested in our other plugins? Take a look here.
• Get the most out of Otter Blocks with our helpful YouTube Tutorials Playlist.

このプラグインは、パターン一覧、AI プロンプト、およびオンボーディングにアクセスするために api.themeisle.com のサービスを利用しています。サービスのテンプレートコレクションを利用するためにアカウントは必要ありません。プライバシーポリシーは こちら で確認できます。