
內容簡介
使用這個外掛可以在頁面任何位置生成一個簡單的波浪分隔線,讓你可以在不同區塊之間加入一個令人印象深刻、專業的設計元素。
在 Twitter 上追蹤@kevinbatdorf
在GitHub上查看
功能特色
可設定顏色,包含透明度
選擇寬、普通或全寬之間的寬度
選擇圓角邊緣或直線
使用內建控制可微調曲線和直線
支援上方或下方的形狀
使用群組區塊可以堆疊多個分隔線(見下文)
漸層 - 容易使用(見下文)
可以控制高度、點數和方向
漸層
使用漸層需要將波浪分隔線包裹在群組區塊內,然後將漸層應用於群組區塊。接著,創建一個波浪形狀並應用一個與內容背景相匹配的顏色(例如白色)。然後可以切換分隔線的方向(在設定中),以產生鏡像效果。這樣漸層就應用於群組區塊,波浪分隔線就充當遮罩的功能。
群組區塊
如果將波浪分隔線嵌套在群組區塊內,可能想要刪除填充和邊距,這樣波浪分隔線就不會周圍有間隔。要處理此問題,選擇群組區塊,在「進階」(在設定區域底部)中添加以下兩個類:
wavy-divider-remove-margin
wavy-divider-remove-padding
範本
在區塊插入器中,在「範本」標籤下,從下拉式選單中選擇「波浪分隔線」,即可查看一些特別、自製的波浪範本。還可以根據不同季節使用季節性的設計!
外掛標籤
開發者團隊
原文外掛簡介
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.
Follow @kevinbatdorf on Twitter
View on GitHub
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
Use a single, smooth point to give you a curved divider
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 example patterns.
