Блоки Otter — блоки Gutenberg, конструктор страниц для редактора Gutenberg и FSE

Описание

Otter — это плагин для создания страниц с помощью блоков Gutenberg, который добавляет дополнительные функции в редактор блоков WordPress (также известный как Gutenberg) для улучшения процесса создания страниц без необходимости использования традиционных конструкторов страниц, таких как Elementor и Divi.

Быстрые ссылки 🔗

• Хотите увидеть блоки Otter в действии перед установкой? СМОТРИТЕ ДЕМОНСТРАЦИЮ БЛОКОВ OTTER
• Новичок в экосистеме блоков Gutenberg? Ознакомьтесь с нашей статьей о GUTENBERG
• Нужна помощь с настройкой? Ознакомьтесь с нашей ДОКУМЕНТАЦИЕЙ
• Заинтересованы в Otter Pro? Вот подробная информация об OTTER PRO

С блоками Otter вы получаете доступ к

• 20+ extra blocks for Gutenberg
• Коллекции шаблонов
• Full-page Templates
• Условиям видимости
• Произвольному CSS
• Animations
• Dynamic Content and more

Для всех блоков, включая сторонние, присутствующие на вашем сайте.

Функция произвольного CSS позволяет напрямую настроить CSS-свойства любого блока Gutenberg на странице, а функция анимации позволяет быстро и легко добавить анимацию к любому блоку, чтобы повысить привлекательность различных блоков и разделов страницы.

С помощью функции условий видимости от Otter вы можете задать условия, которые должны быть выполнены, прежде чем выбранные вами блоки отображаться на странице.

Patterns Library, contains a range of different elements in a variety of styles to help you build great pages. All of your website’s most important areas are covered: headers, testimonials, pricing tables, sections, and more.

Ознакомьтесь с кратким обзором блоков Otter

Чем вам могут помочь блоки Gutenberg от Otter? 🤔

Плагин блоков Gutenberg для WordPress

Otter добавляет 26+ удивительных и полезных блоков, чтобы сделать создание страниц в Gutenberg клёвым делом!

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

Каждый блок поддерживает настройку, которая поможет вам оформить сайт в соответствии с вашим видением:

• Элементы управления основным, акцентным и фоновым цветом.
• Animation backing, bouncing, fading, flipping, rotating, sliding, rolling, light speed, and more at the click of a button.
• Управление типографикой — от интервала до выбора шрифта.

Отзывчивость блоков Otter на мобильных устройствах

Создавайте дизайн, удобный для мобильных устройств, с помощью встроенных настроек отзывчивости Otter. Каждый блок можно настроить таким образом, чтобы обеспечить единообразное восприятие на мобильных устройствах, планшетах и настольных компьютерах.

Плагин условий блока Gutenberg для WordPress

Хотите, чтобы определенные блоки отображались только тогда, когда пользователь авторизован или не авторизован? А как насчет того, является ли он клиентом вашего магазина, а не редактором вашего блога или имеет какую-либо другую пользовательскую роль? Благодаря функции условий блока Gutenberg, доступной в Otter, это возможно. Обновитесь до PRO-версии Otter, чтобы раскрыть возможности дополнительных условий блока, таких как:

• Строка запроса URL
• Диапазон дат
• День недели
• Время суток
• Товары WooCommerce в корзине
• Всего потрачено в WooCommerce
• Общая стоимость корзины WooCommerce
• WooCommerce Categories
• WooCommerce Tags
• WooCommerce Attributes
• Содержимое файлов cookie
• И других

Плагин анимации блоков Gutenberg для WordPress

Поразите посетителей вашего сайта потрясающей анимацией, которую можно добавить любому блоку на странице. На выбор доступно более 50 анимаций; Otter позволяет придать дополнительную изюминку любой записи или странице вашего сайта.

Плагин всплывающих окон Gutenberg для WordPress

Всплывающие окна — один из старейших методов захвата потенциальных клиентов и показа уведомлений в Интернете. Благодаря блоку всплывающих окон Gutenberg, доступному в Otter, вы можете создавать всплывающие окна из любого другого блока, доступного в Gutenberg!

Настройте всплывающие окна, указав, когда они должны появляться и как их можно закрыть. С помощью нашего блока всплывающих окон вы получаете доступ ко множеству триггеров, таких как при загрузке, при выходе, при нажатии на якорь и при прокрутке.

Кроме того, вы можете оформить всплывающее окно с помощью настраиваемого перекрытия заднего плана, чтобы оно соответствовало вашему фирменному стилю и привлекало больше внимания. Посмотреть живую демонстрацию

Глобальные настройки по умолчанию блоков Otter

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:

Gutenberg блок аккордеона [Бесплатно]

Используйте этот блок для создания вертикально расположенных списков содержимого, которые можно раскрывать или скрывать нажатием кнопки; чаще всего они называются аккордеонами. Посмотреть живую демонстрацию

Gutenberg блок расширенного заголовка [Бесплатно]

The heading block you didn’t know you needed. This Otter block has all the functionality of the default heading block with a few other capabilities like the ability to change the font, highlight parts of the text, and more. Check live demo

Блок AI [Бесплатно]

Загляните в блок AI — ваш путь к созданию контента и форм без особых усилий на основе искусственного интеллекта. С помощью AI творца содержимого можно легко создавать текст, динамические заголовки и содержательные абзацы, а AI творец форм упрощает создание форм. Это универсальное решение для бесперебойной работы — все, что вам нужно от AI, аккуратно упаковано в один блок.

Gutenberg блок группы кнопок [Бесплатно]

Быстро и легко создайте несколько кнопок и отобразите их вертикально или горизонтально в зависимости от устройства, на котором просматривается страница. Посмотреть живую демонстрацию

Gutenberg блок обратного отчёта [Бесплатно]

Counting down to a big event? Show it by making use of these Gutenberg blocks. Count down from Days, Hours, Minutes, or Seconds. Check live demo

Gutenberg блок контактных форм [Бесплатно]

Быстро и легко разместите контактную форму в любом месте страницы. При желании превратите форму в машину для генерации лидов, интегрировав ее с Brevo (Sendinblue) или Mailchimp. Кроме того, упростите управление данными с помощью интеграции веб-перехватчика и обеспечьте повышенную безопасность с помощью hCaptcha. Посмотреть живую демонстрацию

Content Timeline Block [FREE]

Elegantly display events in a chronological timeline. Ideal for highlighting historical events, process steps, or key milestones.

Countdown Block [FREE]

Counting down to a big event? Show it by making use of these Gutenberg blocks. Check live demo

Circular Progress Block [FREE]

Show your progress with a beautiful Circle Counter block. Check live demo

Flip Box Block [FREE]

Creates a card with a flip effect, where you can insert any content or blocks available in Gutenberg. Check live demo

Gutenberg блок списка значков [Бесплатно]

Дополните ненумерованные списки, используя в качестве указателей (вместо точек) произвольные значки. Посмотреть живую демонстрацию

Gutenberg блок иконок [Бесплатно]

Display any icon from Font Awesome or our own list of custom icons anywhere on the page. Change colors, add borders, and couple with other blocks to enhance the look of your page. Check live demo

Gutenberg блок анимации Lottie [Бесплатно]

Вы слышали о Lottie? Потрясающе! С помощью Gutenberg блока Lottie анимации от Otter вы можете отображать анимацию Lottie в любом месте сайта. Посмотреть живую демонстрацию

Gutenberg блок карт [Бесплатно]

Выберите блок Open Street Map или Карт Google и создайте маркеры точек, представляющих интерес для посетителей вашего сайта. Наш блок поможет вам настроить карту, вплоть до цвета и описания маркеров, искать места по названию или координатам, добавлять и удалять элементы управления картой, а также изменять размер и стиль карт несколькими щелчками мыши. Посмотреть живую демонстрацию

Progress Bar Block [FREE]

Show your progress with a beautiful Progress Bar block. Check live demo

Gutenberg блок записей [Бесплатно]

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.

Gutenberg блок обзора товара [Бесплатно]

Ведете блог о продукте, который вам нравится? А может быть, вы ведете сайт обзоров? Используйте этот блок, чтобы создать таблицу обзора товара и перечислить его характеристики, плюсы и минусы, а также дополнительные ссылки для покупки. Посмотреть живую демонстрацию

Gutenberg блок всплывающего окна [Бесплатно]

Create stunning popups and fine-tune when they should appear and how they can be closed. Check live demo

Gutenberg блок слайдера [Бесплатно]

Use this Gutenberg block to create image sliders on any Gutenberg page. Settings include slider height, delay, slides per page, autoplay, and more. Check live demo

Gutenberg блок раздела [Бесплатно]

A column block on steroids! This block allows you to create a section with up to 6 columns that can each have a custom background color, image, or gradient. Use this block’s responsive features to set the padding and margin for desktop, tablet, and mobile displays. Check live demo

Касса Stripe [Бесплатно]

Этот блок будет очень полезен, если вы хотите продавать несколько товаров, не создавая целый магазин, например, электронные книги, какие-то лицензии и т.д.

Sharing Icons Block [FREE]

Share buttons for your website visitors to share content on any social sharing service. Check live demo

Gutenberg блок вкладок [Бесплатно]

Используйте этот блок для создания горизонтально расположенных списков содержимого, которые можно раскрывать или скрывать нажатием кнопки; чаще всего они называются вкладками. Посмотреть живую демонстрацию

Gutenberg блок добавления в корзину [PRO]

Разместите блок кнопки «Добавить в корзину» для любого товара WooCommerce в любом месте публикации или страницы, которую вы редактируете.

Gutenberg блок часов работы [PRO]

Создайте красиво оформленную таблицу рабочих часов и отрегулируйте ее настройки так, чтобы она стала идеальной.

Живой поиск [PRO]

Функция живого поиска расширяет возможности основного блока поиска, добавляя два дополнительных атрибута (isLive и postTypes), которые можно установить в инспекторе на панели «Живой поиск».

Modal [PRO]

Implement modal dialogs for an interactive experience, displaying forms, content, or announcements directly within the page layout.

Сравнительная таблица обзоров [PRO]

Приготовьтесь произвести впечатление на своих читателей с помощью таблицы сравнения обзоров от Otter. Легко создавайте профессионально выглядящие таблицы сравнения продуктов на вашем блоге или сайте.

Мы постоянно добавляем новые блоки Gutenberg в Otter, чтобы помочь вам в создании страниц сайта. Не стесняйтесь рассказывать нам, чего у нас не хватает, на нашем форуме поддержки! Вот некоторые другие блоки:

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

Easily launch your site with our customizable patterns and full-page WordPress templates. Import ready-made designs with just one click and get started in no time.

Service Patterns

Organize your services clearly with sections that keep your page tidy while offering detailed information on demand. Check live demo

Testimonial Patterns

Organize your services clearly with sections that keep your page tidy while offering detailed information on demand. Check live demo

Pricing Patterns

Tailor your pricing tables with versatile layout patterns that enhance readability and appeal, suitable for any business model. Check live demo

Features Section Patterns

Detail the features of your products or services using clean, organized layouts that make complex information easy to digest. Check live demo

Call-to-action Section Patterns

Drive conversions with compelling call-to-action sections, designed to grab attention and motivate immediate responses. Check live demo

📌 Check a live demo of all the patterns available by clicking here.

📌 Check a live demo of all the Full-page templates available by clicking here.

Получите больше возможностей в Otter Pro 🤩

Конструктор блоков WooCommerce

Создавайте собственные страницы отдельных товаров с помощью конструктора блоков WooCommerce от Otter. Все новые функции призваны увеличить конверсию и внести дополнительные улучшения.

С Otter Pro вы получаете гораздо больше возможностей, включая:

• Блок добавления в корзину
• Блок часов работы
• Modal Block
• Блок сравнения обзоров товара
• Блок живого поиска
• Pro Add-ons for Free Blocks
• Дополнительные возможности динамического содержимого
• Дополнительные варианты условий видимости
• More Patterns & Full-page templates
• и другие!

Вы можете попробовать живую демонстрацию блоков Otter — установка не требуется. Нажмите здесь, чтобы попробовать.

Кому пригодится Otter? 👀

• Любому, кто хочет раскрыть лучшие возможности нового редактора Gutenberg с помощью полезных и простых в использовании блоков Gutenberg.
• Anyone thinking of moving away from traditional page builders like Elementor and Divi Builder in favor of the new Gutenberg Block Editor.
• Любому, кто пробует создавать быстрые страницы Gutenberg в рекордно короткие сроки.
• Любому, кто пытается скрыть/показать блоки Gutenberg на основе таких условий, как статус авторизации пользователя.
• Любому, кто пытается добавить анимацию в блоки Gutenberg.

Давайте посмотрим несколько примеров использования 🚀.

Otter открывает целый мир возможностей! Узнайте, как различные сегменты аудитории могут извлечь из этого максимум пользы:

• Блоггеры-путешественники: украсьте свой блог о путешествиях увлекательными картами с помощью блоков карт от Otter и Google, чтобы продемонстрировать свои путешествия по миру.

• Некоммерческие организации: привлеките свою аудиторию и продвигайте свое дело с помощью блоков Otter, таких как «Круглый счётчик» и «Отзывы», чтобы поделиться вдохновляющими историями успеха.

• Владельцы ресторанов: демонстрируйте меню вашего ресторана и с лёгкостью собирайте заказы с помощью блоков Otter, вроде «Переворачивающаяся карточка» и «Форма», чтобы создать аппетитное онлайн-присутствие.

• Обзорщики технических продуктов: демонстрируйте подробные обзоры продуктов с помощью блока «Обзор товара» от Otter, делая свой контент информативным и увлекательным.

• Блоггеры: усовершенствуйте свои записи в блоге значками «Поделиться», создав удобные возможности для обмена информацией вашими читателями. Используйте слайдер для отображения галерей изображений и привлечения аудитории.

• Создатели содержимого и продавцы цифровых товаров: Gutenberg блок «Касса Stripe» предлагает удобный способ продажи цифровых товаров, таких как электронные книги, онлайн-курсы, лицензии на программное обеспечение или цифровые произведения искусства, без необходимости создания полноценного интернет-магазина. Интегрировав этот блок, вы сможете обеспечить покупателям удобный и безопасный процесс оформления заказа.

• Рецензенты продуктов: создавайте информативные и привлекательные сравнения обзоров продуктов с помощью таблицы сравнения обзоров, помогая пользователям принимать взвешенные решения.

• Владельцы ресторанов: отображайте часы работы в стильном формате с помощью блока «Часы работы», чтобы клиентам было легко вас найти.

• Онлайн-каталоги: сайты, демонстрирующие каталоги, списки или обширные материалы, где живой поиск упрощает доступ к содержимому.

Поддержка 🤝

Мы здесь, чтобы помочь. Не стесняйтесь открыть новую тему на форуме поддержки.

Документация 📚

Узнайте, как максимально эффективно использовать блоки Otter, из нашей подробной и удобной документации.

Станьте участником 💁‍♂️

Блоки Otter — это проект с открытым исходным кодом, и мы приглашаем всех желающих стать частью нашего активного сообщества! Помогите нам улучшить плагин и сделать его еще лучше — ссылка на GitHub

Полезные ресурсы 📌

• Узнайте больше о WordPress в нашем блоге.
• Интересуетесь другими нашими плагинами? Посмотрите здесь.
• Получите максимальную отдачу от блоков Otter с помощью нашего полезного плейлиста с обучающими материалами на YouTube.

Плагин полагается на сервис api.themeisle.com для доступа к списку шаблонов, подсказкам AI и адаптации. Для доступа к коллекции шаблонов сервиса учетная запись не требуется, а с политикой конфиденциальности можно ознакомиться здесь.