Wavy Divider

説明

Generate and add a simple wavy divider to anywhere on your page, giving you the ability to separate blocks of content with an impressive, professional-looking design element.

Features

  • Color settings, including opacity.
  • Choose between wide, normal, and full width
  • Choose between rounded edges and stright lines
  • Fine tune curves and lines with built-in controls
  • Supports top or bottom shapes
  • Stack multiple dividers with group block (see below)
  • Gradients – easy to use (see below)
  • Control height, number of points, and direction

Gradients

To use a gradient, you need to wrap the wavy divider in a group block and apply the gradient to the group block. After that, create a wavy shape and apply a color that matches your content background (e.g. white). You can then switch the direction of the divider (under settings) to give a mirrored effect. This way the gradient is applied to the group block and the wavy divider acts as a mask.

Group Block

If nesting the wavy divider in a group block, you may want to remove the padding and margins so that the wavy divider will not have spacing around it. To handle this, select the group block, and under “Advanced” (at the bottom of the settings area) add these two classes:

  • wavy-divider-remove-margin
  • wavy-divider-remove-padding

Patterns

Within the block inserter, under the Patterns tab, select ‘Wavy Divider’ from the dropdown menu to view some special, custom-made wavy patterns. And depending on the time of year, seasonal designs too!

スクリーンショット

  • Separate content with wavy dividers
  • Add gradients in combination with group blocks
  • Control height, point count, smoothness, and more.
  • Fine tune curves and shuffle waves.

ブロック

このプラグインは1個のブロックを提供します。

  • Wavy Divider A colorful, fun, lightweight divider block to energize your website with character and pizazz

インストール

  1. Install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress

評価

2022年2月5日 1 reply
Wavy Divider is really great contribution and ultimate useful plugin. I am facing a problem when adding wavy in a group and try to color wave, a line of group color under wavy block appears, how can I fix this as I a new in WordPress hand same. also how to add text/ heading/ image over wavy block? Please...
1件のレビューをすべて表示

貢献者と開発者

Wavy Divider はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Wavy Divider” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.3.3

  • Fix: Remove lock file to save space

1.3.2

  • Fix: Update spacer block in example to be compatible when Gutenberg plugin is disabled

1.3.0

  • Feature: Add controls to fine tuning
  • Feature: Add better line control
  • Feature: Allow single peak curves
  • Tweak: Adjust height, points, etc without changing peaks

1.2.0

  • Fix: Add pattern examples, including Valentine’s Day themed

1.1.4

  • Fix: Swap fill-opacity attribute with opacity styling.
  • Tweak: Clamp default state to integers

1.1.3

  • Fix: Move default attributes to index.js file – block.json isn’t currently being loaded when imported from block library interface.

1.1.2

  • Fix: Fix missing build files

1.1.1

  • Fix: Disable examples until feature is more stable

1.1.0

  • Feature: Add two examples tot he pattern library
  • Enhancement: Add wp_set_script_translations
  • Tweak: Change shuffle button to secondary button styling
  • Fix: Add title prop to registerBlockType

1.0.0

  • Initial release