Divi 插件亮點 – AC 簡碼

已發表: 2017-06-09

您是否曾經需要在另一個 Divi 模塊中放置一個 Divi 模塊,甚至是一個完整的佈局? 想像一下使用文本編輯器在任何其他模塊中放置地圖、表格、計數器、簡介、推薦或任何其他模塊的設計可能性。 如果您可以將這些模塊放在側邊欄中會怎樣? 一個名為 AC Shortcodes 的第三方插件正是這樣做的。

AC Shortcodes 是 Ayanize 的第三方插件,可將 Divi 模塊轉換為短代碼,以便您可以將它們放在另一個模塊中。 創建具有單個模塊或佈局的簡碼,然後將該簡碼粘貼到模塊的文本編輯器中。 它適用於 Divi、Extra 和任何使用 Divi Builder 插件的主題。

在這個插件概述中,我們將使用 AC Shortcodes 進行旋轉,看看可以用它完成的一些事情,看看它是多麼容易使用。 我的示例頁面的圖像來自 Unsplash.com。

安裝 AC Shortcodes 插件

正常上傳並激活插件。 插件激活後,您將看到一條消息,要求重新保存您的永久鏈接。 這將確保插件正常工作。 單擊消息中的更新永久鏈接。 這將帶您進入永久鏈接設置。 單擊頁面底部的保存更改,然後單擊消息中的完成。 然後該消息將消失,您現在可以使用 AC 簡碼。

創建簡碼

儀表板中的 Divi 菜單中添加了一個新菜單項(轉到 Dashboard、Divi、AC Shortcodes)。 單擊此按鈕將打開 AC 簡碼菜單,您可以在其中創建簡碼。 您創建的任何短代碼都將顯示在列表中。 要創建新的簡碼,請單擊創建簡碼。

這會將您帶到一個編輯器,您可以在其中選擇使用 Divi Builder 進行構建。 右側提供了簡碼。 您可以將其複制並粘貼到另一個模塊的內容中。 只需使用 Divi Builder 創建佈局,然後單擊“創建”即可保存。

創建短代碼後,您將在儀表板菜單的列表中看到它們。 您可以在此處編輯、刪除和復制短代碼以粘貼到您的內容中。 短代碼可用於 Divi Builder 模塊、標準 WordPress 編輯器(使用 Divi 或 Extra 時)或文本小部件(需要 Divi 或 Extra)。

AC 短代碼示例

對於我的示例,我創建了一個帶有全角標題的標準 Divi 博客頁面。 我為該部分創建了一個漸變背景。

全角標題

這是示例頁面。 我想使用通常無法放置在標題區域內的模塊將標準標題替換為新標題。

這是 schortcode 的佈局。 它包括地圖、圖庫和號召性用語模塊,以及全角部分中的全角菜單。 我已將背景設為透明,以便頁面本身的樣式顯示,並且我已為全角菜單模塊提供漸變背景以顯示在背景樣式上。

該頁面本身包含一個文本模塊,我在其中放置了短代碼和一個博客模塊。 這些部分將提供背景樣式。

這是新標題的外觀。 很容易想像這個標題可以做什麼的可能性。

標籤

Tabs 模塊是最容易了解短代碼如何工作的模塊之一。 通常,選項卡模塊允許您將任何類型的內容放置在您可以放置​​在編輯器中的選項卡上。 這包括文本和媒體,如圖像、視頻等。如果您想放置地圖、聯繫表格、CTA 或任何其他 Divi 模塊怎麼辦? 我們開始做吧!

我創建了幾個模塊的短代碼,並將每個短代碼粘貼到一個單獨的選項卡中。 一些模塊包括它們自己的背景樣式。

這些模塊的顯示與我為它們創建的設計功能相同。 在這個例子中,我為該部分使用了漸變背景。

此選項卡使用聯繫表。 我沒有給它任何特殊的造型。

此選項卡顯示博客文章。 我為頁面使用了漸變背景,但沒有為博客文章短代碼使用漸變背景。 每個選項卡都有自己的背景顏色和單獨的樣式,因為它們是獨立創建的。

您甚至可以創建完整的佈局以顯示為簡碼。

此佈局使用帶有圖像、博客、投資組合和聯繫表格的專業部分。 我已將其放置在“佈局”選項卡中。

下面是一個選項卡中的商店模塊。 在選項卡中使用模塊將為顯示信息、表單、CTA 等提供一些機會。

側邊欄和小工具

您還可以通過將短代碼粘貼到文本小部件中來使用側邊欄中的短代碼。

此處地圖顯示在左側邊欄中。 你可以看到它仍然有它的背景樣式。 這很容易改變。

要更新簡碼,只需從 AC 簡碼列表中加載它並進行更改。 更改將反映在使用短代碼的任何地方。 在這個例子中,我刪除了我添加到地圖簡碼部分的背景。 我已將背景設置為透明。 地圖現在顯示時沒有背景。

在這裡,我在側邊欄中添加了更多帶有模塊的小部件。

WooCommerce 產品頁面

我最喜歡的 AC 簡碼用途之一是將它們放在 WooCommerce 產品頁面中。

我在產品描述區域放置了一個帶有兩張幻燈片的滑塊的簡碼。 每張幻燈片都使用自己的設置。

在這個例子中,我在產品的簡短描述中放置了一個帶有文本模塊和畫廊模塊的佈局。 是的,我又在玩背景漸變了。

將 AC 簡碼與 Extra 一起使用

下面來看看 Extra 中的 tabs 模塊。 它在幾個文本小部件中使用帶有短代碼的側邊欄來顯示地圖和聯繫表單模塊。 一切都按預期進行。

在 Divi Builder 插件中使用 AC 簡碼

這是使用帶有二十七主題的 Divi Builder 插件的地圖模塊。 這實際上是一個 Tab 簡碼,其中包含一個 Map 簡碼。 短代碼中的短代碼。 我怎麼能反抗?

側邊欄的簡碼僅在使用 Divi 或 Extra 主題時有效。 除非使用 Divi 或 Extra,否則短代碼也必須放置在 Divi Builder 模塊中。 使用 Divi Builder 插件,AC Shortcodes 菜單將出現在儀表板的 Appearance 下。

文檔

AC Shortcodes 菜單中提供了文檔。 在屏幕的右上角,您會看到“幫助”一詞。 單擊此按鈕可打開幫助屏幕。 這會在左側顯示四個選項卡:

  • 概述
  • 文檔
  • 兼容性
  • 模板使用

右側是查看視頻和博客文章的鏈接。

執照

AC Shortcodes 包含無限許可。 您可以為您和您的客戶在任意數量的網站上安裝它。 它包括終身更新和 6 個月的支持。

購買 – 此第三方插件可在許多 Divi 市場以及供應商網站上獲得:Ayanize

最後的想法

在其他模塊和側邊欄中使用 Divi 模塊作為簡碼的能力開闢了一個新的設計可能性世界。 我在這個插件亮點中創建的例子只是皮毛。 該插件本身易於使用,只需要 Divi Builder 技能和復制和粘貼短代碼的能力。 如果您有興趣擴展 Divi 模塊的實用性,AC Shortcodes 值得一看。

我們想听聽您的意見! 您是否嘗試過 AC 簡碼? 請在評論中告訴我們您的體驗。

精選圖片來自 Photoroyalty / shutterstock.com