Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinbatdorf/wavy-divider
A WordPress block to add colorful creative wavy svg divider shapes
https://github.com/kevinbatdorf/wavy-divider
Last synced: 2 months ago
JSON representation
A WordPress block to add colorful creative wavy svg divider shapes
- Host: GitHub
- URL: https://github.com/kevinbatdorf/wavy-divider
- Owner: KevinBatdorf
- Created: 2022-01-30T20:13:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-18T15:23:16.000Z (about 1 year ago)
- Last Synced: 2024-05-02T05:58:35.952Z (8 months ago)
- Language: JavaScript
- Homepage: https://wordpress.org/plugins/wavy-divider/
- Size: 4.81 MB
- Stars: 19
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Wavy Divider - A WordPress block
A colorful, fun, lightweight divider block to energize your website with character and pizazz
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.
[](https://twitter.com/kevinbatdorf)
View this block plugin [on WordPress.org](https://wordpress.org/plugins/wavy-divider)
### 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!
## Example Screenshots
