網(wǎng)站開發(fā)

Website development

怎樣添加一個(gè)動(dòng)作按鈕到您的網(wǎng)站的代碼種的模塊分類

發(fā)布時(shí)間：2017-01-10 10:04:07

How to Add a Floating Action Button to Your Site with the Divi Code Module

分模塊的代碼可能是一個(gè)令人期待的，在Divi使用的模塊。作為前端開發(fā)工程師在優(yōu)雅的主題，我想借此機(jī)會(huì)，今年改變。我的目標(biāo)是利用這個(gè)職位和其他全年激發(fā)更大的使用的代碼模塊的使用提供的資源和教程。從今天開始！

在今天的文章中我將向你展示如何使用分編碼模塊和我創(chuàng)建了添加動(dòng)作按鈕到您的網(wǎng)站CodePen代碼生成器。

讓我們開始吧！

使用CodePen代碼生成器

在這篇文章中，我將利用一個(gè)我給三CodePen發(fā)電機(jī)社區(qū)。這是從一個(gè)給定的代碼生成器CodePen出口一個(gè)代碼塊，將正常運(yùn)行的代碼在編譯代碼分模塊。

CodePen Code Generator

使用它的機(jī)制不能簡(jiǎn)單。所有你要做的就是復(fù)制你所創(chuàng)建的CodePen URL（或別人使用了內(nèi)分）和粘貼到空間在發(fā)電機(jī)上的領(lǐng)域。然后點(diǎn)擊藍(lán)色的“生成”按鈕。

CodePen Code Generator 2

這將在下面的文字框中使用的代碼模塊與分塊內(nèi)的代碼。你也會(huì)注意到藍(lán)色的按鈕現(xiàn)在說(shuō)“復(fù)制代碼”。再次點(diǎn)擊復(fù)制到剪貼板，方便編譯的代碼粘貼到你想要的紅利代碼模塊。

添加一個(gè)動(dòng)作按鈕到您的網(wǎng)站的代碼模塊的分分

以上是一個(gè)動(dòng)作按鈕實(shí)例。當(dāng)你的鼠標(biāo)懸停在它，它顯示文本和鏈接。在這種情況下這是一個(gè)“關(guān)于”按鈕，我的形象和我的網(wǎng)站的鏈接。但是，您可以編輯它來(lái)顯示你的圖像，文本和鏈接的選擇。

這里的如何：

首先，如果你不已經(jīng)有一個(gè)，創(chuàng)建一個(gè)免費(fèi)CodePen帳戶。其次，導(dǎo)航在“FAB”CodePen我創(chuàng)造了

在HTML中的損失，locate下面的一行代碼：

一個(gè)鏈接到你的圖像選擇替換src鏈接。你可以使用你的鏈接一樣，我也可以上傳圖片到你的WordPress安裝和使用媒體庫(kù)鏈接。你也應(yīng)該的ALT文本更改以反映您所選擇的圖像。

下一步，找到這行的HTML：

把文本你會(huì)喜歡這里。如果你只是改變圖像是一個(gè)你自己的形象，然后把你的名字寫在這里。

后，找到這行的HTML：

<a href="https://andytran.me/">https://andytran.me</a>

更改鏈接到你想要的鏈接和描述性的文字。

一旦你改變了，按命令拯救。這將自動(dòng)創(chuàng)建您的帳戶下我原來(lái)CodePen重復(fù)，但你的變化。

現(xiàn)在你可以復(fù)制你的新網(wǎng)址，編輯CodePen，我在這里創(chuàng)造的發(fā)電機(jī)

當(dāng)你按下藍(lán)色的“生成”按鈕，復(fù)制代碼，頭部到您網(wǎng)站的網(wǎng)頁(yè)分你希望新的動(dòng)作按鈕將顯示。

在那頁(yè)的第一個(gè)標(biāo)準(zhǔn)節(jié)，添加代碼模塊。

add-code-module

在模塊的代碼，粘貼復(fù)制的代碼，點(diǎn)擊保存。

paste-code-into-code-module

更新你的頁(yè)面，查看結(jié)果。

添加動(dòng)作按鈕的網(wǎng)站

如果你想添加動(dòng)作按鈕你創(chuàng)建您的所有分頁(yè)面時(shí)，它是相當(dāng)簡(jiǎn)單的。而不是你生成的代碼粘貼到代碼模塊，瀏覽Divi > Theme Options > Integrations > Add code to the < head > of your blog粘貼代碼有。保存和審查的變化對(duì)前端。浮動(dòng)操作按鈕現(xiàn)在應(yīng)該顯示在右下角，在所有的頁(yè)面！

divi-theme-options-code-integrations

在這一點(diǎn)上，我可以聽到你問，“如果這是可能的，為什么把它只是一個(gè)頁(yè)面通過代碼模塊？“

通過使用代碼模塊的方式我表明不是站點(diǎn)范圍的選項(xiàng)，你可以自定義按鈕的地方在特定的頁(yè)面–有望獲得更高的點(diǎn)擊基于消息，量身定制，郵寄或頁(yè)率。

我創(chuàng)建了幾筆這樣一個(gè)專門為使用Divi。我打算分享他們通過博客作為我的開發(fā)時(shí)間允許。如果你在創(chuàng)建一個(gè)筆，和Divi在一起工作，可以很容易地添加到代碼模塊采用發(fā)電機(jī)感興趣，簡(jiǎn)單的創(chuàng)建你的鋼筆牢記潛在的CSS沖突可以與Divi的風(fēng)格引起。例如，在筆上面我用`在`前綴來(lái)防止可能出現(xiàn)的任何沖突。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7038,0.html

上一篇：如何鑒定網(wǎng)站的設(shè)計(jì)思路不是復(fù)制的

下一篇：2017年網(wǎng)絡(luò)發(fā)展趨勢(shì)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理