[WordPress] 外掛分享: Container Block

WordPress 外掛 Container Block 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Container Block」是 2019-12-29 上架。
  • 目前有 50 個安裝啟用數。
  • 上一次更新是 2020-04-03,距離現在已有 1858 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
  • 外掛最低要求 WordPress 5.2 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

gookaani | mypreview | mahdiyazdani |

外掛標籤

wrapper | animation | container | gutenberg | shape divider |

內容簡介

這是一個完全自訂的 Gutenberg 編輯器區塊,用於將多個區塊放在父包裹中,這樣可以進行更複雜的樣式設定。

主要功能:

最大寬度
全高

垂直置頂。
垂直置中。
垂直置底。

滾動圖示 - 滾動滑鼠滾輪動畫會向使用者提供方向。

元素 ID — 平滑地滾動視窗到頁面中特定元素或標記 ID。
顏色

可見度

桌面
筆記型電腦
平板電腦
智慧型手機

水平間距

桌面
筆記型電腦
平板電腦
智慧型手機

對齊

桌面
筆記型電腦
平板電腦
智慧型手機

連結至

頁面地址或網址。
在新視窗中開啟。

邊框

寬度 — 設定邊框的寬度。
半徑 — 定義邊角的半徑。
顏色

陰影 — 在區塊上新增陰影。
形狀 — 多種形狀可用於區段的分隔符或作為背景圖形。

高度 — 一些形狀,如“簡單”的可調整性高。
顏色

滾動動畫

類型 — 允許您在向下、向上滾動時對元素進行動畫化。
緩和 — 調整動畫元件以不同方式進行緩和的時間函數。
偏移量 — 在像素上提早或延後觸發動畫的偏移量。
延遲 — 延遲動畫。
持續時間 — 動畫的持續時間。
僅運行一次 — 動畫是否應該僅在滾動到區塊時觸發一次,或每次向上/向下滾動時都觸發。

背景圖片

位置 — 設定背景圖片的起始位置;支援“焦點點選器”。
重複 — 設定背景圖片是否以及如何重複顯示。
大小 — 設定背景圖片的大小。
視差效果 — 不與頁面一起滾動背景圖片。
滑動背景效果 — 支援“從左到右”和反之亦然。

背景影片
背景顏色
覆蓋不透明度
全寬全高支援對齊
ARIA 標籤 — 定義一個標籤字串,標籤當前區塊。您可能在區塊內容不可見時使用它。

原文外掛簡介

A fully customizable Gutenberg editor block used for wrapping several blocks in a parent wrapper, which enables you to do more sophisticated styling as well.
Key Features

Maximum width
Full-height

Vertically align top.
Vertically align center.
Vertically align bottom.

Scroll down icon — A scrolling mouse wheel animation that will offer direction to the user.

Element ID — Smoothly scroll the window to a specific element or tag ID within the page.
Color

Visibility

Desktop
Laptop
Tablet
Smartphone

Horizontal spacing

Desktop
Laptop
Tablet
Smartphone

Alignment

Desktop
Laptop
Tablet
Smartphone

Link to

Page address or URL.
Open in a new window.

Border

Width — Sets a width for the borders.
Radius — Defines the radius of the corners.
Color

Shadow — Adds a box-shadow to the block.
Shape — Multiple shapes to use as separators for sections or as the background graphic.

Height — A few of the shapes such as “Simple” are adjustable.
Color

Animation on scroll

Type — Allows you to animate elements as you scroll down, and up.
Ease — Timing function to ease elements in different ways.
Offset — Offset to trigger animation sooner or later in pixels.
Delay — Delay the animation.
Duration — Duration of animation.
Run once — Whether animation should fire once, or every time you scroll up/down to the block.

Background image

Position — Sets the starting position of the background image; “Focal Point Picker” support.
Repeat — Sets if and how the background image will be repeated.
Size — Sets the size of the background image.
Parallax — Not scrolling the background image with the page.
Sliding background effect — Supports “Left to Right” and vice versa.

Background video
Background color
Overlay opacity
Align full and wide support
Aria label — To define a string that labels the current block. You might use it in cases where the block content is not visible on the screen.

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Container Block」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


1.0.0 | 1.1.0 | 1.2.0 | trunk |

延伸相關外掛(你可能也想知道)

  • Blocks Animation: CSS Animations for Gutenberg Blocks 》Blocks Animation 可以讓您以優雅的方式,為所有的 Gutenberg 區塊添加 CSS 動畫。, Blocks Animation 的用戶介面非常原生且直觀,您甚至不會注意到它已經被...。
  • Greenshift – animation and page builder blocks 》, 高度優化的網站建構工具, 您是否想建構高品質的動畫和網頁,但卻因常見的頁面建構工具表現低落而感到困擾?Greenshift 將為您解決這個問題。, 此外插件也不...。
  • UiCore Animate – Free Animations, Transitions, and Interactions Addon for Elementor & Gutenberg blocks 》總結: 「UiCore Animate」可以在「Elementor」中輕鬆創建引人入勝的部件動畫,不需要花費太多時間,亦不會降低品質。, 以下是使用繁體中文製作的問題與答案:,...。
  • Loading Page with Loading Screen 》使用 Loading Page with Loading Screen 外掛功能:, → 顯示正在載入頁面的百分比的螢幕, → 載入完成後以動畫顯示頁面內容, → 提高 WordPress 的效能, → 允許...。
  • Animation Addons for Elementor – GSAP Powered Elementor Addons & Website Templates 》**摘要:**, , "Animation Addons for Elementor" 是一款專為 WordPress 和 Elementor 使用者設計的網頁動畫建構外掛,提供35種元素和獨特功能,讓...。
  • LottieFiles – Lottie block for Gutenberg 》LottieFiles for WordPress 提供您超過 50,000 個免費的 Lottie 動畫,您可以輕鬆地在您的網站上嵌入這些動畫。添加動畫快速簡單:只需要將您選擇的動畫拖放...。
  • Ghost Kit – Page Builder Blocks, Motion Effects & Extensions 》Gutenberg 區塊和 WordPress 頁面建構外掛程式, , ★★★★★, , Ghost Kit 是 WordPress 的強大頁面建構體驗。Ghost Kit 提供大量的 Gutenberg 區塊、模板和擴充...。
  • Animations for Blocks 》輕量級插件,可以為塊狀編輯器塊添加額外的檢查器控件,使得在滾動過程中,一旦塊可見就可以對其進行動畫。這些控件可用於選擇動畫類型(淡入淡出,翻轉,滑...。
  • Maintenance & Coming Soon Redirect Animation 》這個超輕量的外掛主要是為開發人員、設計師和網站管理員而設計的,他們需要讓客戶在公開前預覽網站,或在進行重大更新時暫時隱藏網站。, 任何擁有 WordPress ...。
  • Animentor – Lottie & Bodymovin for Elementor 》這是一個非官方的 WordPress 外掛,可在 Elementor 頁面建構器 中增加 Lottie 小工具。, 特點, , 直觀的使用者介面,所有內容皆可透過小工具控制項直接於 Ele...。
  • AOS Animation for SiteOrigin Page Builder 》此插件可為 SiteOrigin Page Builder 中的任何小工具和行添加可自定義的動畫。此插件基於免費的 AOS 動畫庫。您可以設定:, – 動畫類型。, – 持...。
  • Animated Headline 》Animated Headline 是一個使用簡碼展示帶有動畫效果標題文字的 WordPress 外掛程式,使用方便。只需使用 Animated Headline 簡碼即可。, 範例:, [animated-h...。
  • Animator – Scroll Triggered Animations 》Scroll Triggered Animations 是一個高度可自定義且使用者友善的介面,可正確且有效地在整個 WordPress 網站中實現 CSS 動畫。, 無論您是高技能的網頁大師、...。
  • LottieFiles – JSON Based Animation Lottie & Bodymovin for Elementor 》這是一個 Elementor 外掛,可使用 Lottie 動畫將創意佈局應用到您的網站,並使用較小的 JSON 檔案。, , 基於 JSON 的動畫嘗試測試環境, , 請參閱以下演示頁面...。
  • Confetti 》, 透過區塊或短代碼,您可以在網站的任何位置添加有趣的彩帶效果。可從六種效果風格中選擇!, 短代碼:[confetti], 訪問我們的網站了解更多資訊, 升級到高級...。

文章
Filter
Apply Filters
Mastodon