[WordPress] 外掛分享: Block Designer – Create Custom Blocks for Gutenberg Editor

首頁外掛目錄 › Block Designer – Create Custom Blocks for Gutenberg Editor
WordPress 外掛 Block Designer – Create Custom Blocks for Gutenberg Editor 的封面圖片
100+
安裝啟用
★★★★★
5/5 分(4 則評價)
106 天前
最後更新
問題解決
WordPress 5.9.0+ PHP 7.3+ v1.10.1 上架:2022-07-14

內容簡介

使用這個外掛,您可以自訂 WordPress Gutenberg 區塊編輯器的區塊,而不需要寫任何程式碼。

✔ 創建 Gutenberg 區塊的最快方式
✔ 極易於使用和視覺化操作
✔ 您的自訂區塊是完全 WYSIWYG 的(無需表單)

Martin Sauter:
⭐⭐⭐⭐⭐ 到目前為止最好的視覺化自訂區塊創建器
如果您已經嘗試過 Lazy Blocks 或 Genesis Custom Blocks,並且正在尋找更視覺化的方法來創建和使用自訂區塊,則此外掛適合您:創建自訂區塊非常類似於在 Gutenberg 區塊編輯器中建立文章(無需編程),並使用您的自訂區塊是完全 WYSIWYG 的(無需表單)
>原始評論

教學(創建 Gutenberg 的地址區塊):

在 YouTube 上打開教學

即時預覽

在此測試最新版本:
> > > 打開即時預覽 < < <

支援的元素

HTML 元素
圖示
靜態文本
作者圖像
作者連結
作者 RichText
內部區塊

支援的樣式

顯示(block、flex、inline-block、inline、none)
Flex(方向、反轉、對齊、排列、間隙、折疊)
Flex 子項目(縮小、增加、自我對齊)
間距(邊緣、填充)
大小(寬度、高度、最小寬度、最小高度、最大寬度、最大高度)
溢出(可見、隱藏、滾動、自動)
排版(字重、字型、字體大小、行高、顏色、文本對齊、文本裝飾)
邊框(半徑、樣式、寬度、顏色)
背景(顏色、線性漸變、放射狀漸變)
效果(方框陰影)

如何使用

設計您的區塊

首先,在區塊設計器中使用不同的 HTML 元素和樣式設計您的區塊。

您可以定義區域,讓作者在 WordPress 區塊編輯器中插入圖像和文本。

設計完成後,您只需要啟用並保存它。

使用您的區塊

如果您啟用並保存了區塊,您將在 WordPress 區塊編輯器的插入器面板中找到您的區塊。

只需像普通區塊一樣插入即可。

如果您為作者輸入定義了區域,現在可以添加您的內容。

保存您的頁面/文章,享受您在網站上的成果😉

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.10.1) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Block Designer – Create Custom Blocks for Gutenberg Editor」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Design your own custom blocks for the WordPress Gutenberg Block Editor without any line of code.
✔ fastest way to create your block for Gutenberg
✔ Incredibly easy and intuitive to use
✔ Your custom blocks are completely WYSIWYG (no form)

Tutorial (create an address block for Gutenberg):

open tutorial on YouTube

Live Preview
Test the latest version here:
> > > open LIVE PREVIEW < < < — Supported Elements HTML Element Icon Static Text Author Image Author Link Author RichText Inner Blocks Supported Styles Display (block, flex, inline-block, inline, none) Flex (direction, reverse, align, justify, gap, wrap) Flex Child (shrink, grow, align self) Spacing (margin, padding) Size (width, height, min-width, min-height, max-width, max-height) Overflow (visible, hidden, scroll, auto) Typography (font-weight, font-style, font-size, line-height, color, text-align, text-decoration) Border (radius, style, width, color) Background (color, linear-gradient, radial-gradient) Effects (box-shadow) How it works Design your block First you design your block in the Block Designer with different HTML elements and styles. You can define areas where authors can insert images and text in the WordPress Block Editor. After you designed your block, you only need to enable and save it. Use your block If you enabled and saved your block, you will find your block in the Inserter panel of the WordPress Block Editor. Just insert it as you know it from ordinary blocks. If you have defined areas for author input, you can add your content now. Save your page/post and enjoy your result on your site 😉 More from the same author Click here: wppeak.com

延伸相關外掛

文章
Filter
Mastodon