網(wǎng)站設計

Website development

如何淡出摘錄文本.文字淡出設計特征

發(fā)布時間：2017-02-15 10:11:13

How To Fade Out Text On Divi Post Excerpts

我堅信，小事情可以有很大的差別，特別是當它涉及到網(wǎng)站建設。建設一個網(wǎng)站是我喜歡的部分是把后的潤色，似乎把它連在一起。這可能是一個按鈕懸停效果，改變在英雄節(jié)標題字體大小，甚至一些填充的變化（這有時會有很大的不同）。任何變化的可能，重要的是要記住，花時間去做。你的用戶都會注意到并欣賞它。

這就是為什么我很高興與你分享一個小的，但非?？幔O計功能，褪色了，就在“閱讀更多”按鈕，你的文章內容的文本。

實施設計與分

為了更好地展示這種文字淡出效果，我用迪維的博客模塊用全角的頁面布局和優(yōu)化閱讀寬度窄的極簡設計建立博客博客文章摘錄。

這淡出效果絕對不是一個新概念。它已經(jīng)存在了很長時間。但是，這并不意味著你不能使用它今天。結合現(xiàn)代設計和創(chuàng)建在你的摘錄，才可能吸引他們點擊閱讀更多后一個神秘的元素。

自定義博客模塊

如果你不已經(jīng)，確保你有至少一個博客發(fā)表的特色形象。你的特色形象要寬度至少為。

現(xiàn)在讓我們得到它

使用默認的標準節(jié)在迪維生成器所示，插入全角的柱。

該行模塊設置，更新以下：

使用自定義寬度：600px

使用自定義的槽寬度：是的

排水溝寬度：2

保存并退出

現(xiàn)在插入一個博客模塊到你的全寬行。

自定義博客模塊設置在一般的設置，設計先進的設置，以及自定義的CSS。

General settings for the the following：更新

布局：fullwidth

展覽精選的圖片：是的

內容：展示摘錄

閱讀更多關于按鈕：

文本顏色：黑

以其先進的設計設置更新如下：

標題字體：廣義的光，利用（TT）

標題字體大小：40px；

頭字母間距：2px；

字體：蛇體

體字體大?。?6px

體字母間距：1px；

體高：金在線

在自定義CSS添加下面的CSS代碼在標題文本框和后元箱：

這應該是個什么樣子現(xiàn)在在我們添加文字淡出效果：

淡出文本添加效果

因為淡出效果是使用CSS來代替一個圖像，你需要添加一些自定義的CSS。去桌面主題選項→在自定義的CSS文本框中輸入以下：

.post-content:after { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); content: ''; display: block; height: 120px; position: relative; top: -120px; left: 0px;}.et_pb_blog_grid .post-content:after {margin-bottom: -70px;}.et_pb_posts a.more-link, .et_pb_blog_grid a.more-link { margin-bottom: -25px; margin-top: 25px; position: inherit; text-align: center; text-transform: capitalize; font-size: 16px; color: #0066CC; letter-spacing: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display:block;}.et_pb_posts a.more-link:hover, .et_pb_blog_grid a.more-link:hover {color: #888;}

保存更改

現(xiàn)在讓我們看看結果

網(wǎng)格布局選項

淡出文本摘錄在網(wǎng)格布局是一個偉大的除了。值得慶幸的是，做的很簡單。事實上，你已經(jīng)增加了需要優(yōu)化的網(wǎng)格布局顯示CSS（很卑鄙的我知道）。所有剩下的就是兩個簡單的步驟。

首先，去行模塊設置“使用自定義寬度”選項切換到?jīng)]有。

然后，去博客模塊設置，選擇“博客布局網(wǎng)格”。

現(xiàn)在你的文章應該是這樣的（假設你有至少3的帖子發(fā)表）：

后的挑戰(zhàn)與思考

你可能面臨的挑戰(zhàn)之一添加這個功能的時候，是不是有足夠的房間供你的淡出效果。一個摘錄的默認長度約55字。用較小的字體，一個較短的行高和/或更后的寬度，褪色會隱藏你希望他們閱讀的文本。

添加更多的文本摘錄的簡單的方法是使用在你的網(wǎng)頁編輯器在WordPress的底部找到摘錄盒。任何文本輸入此框將替換默認的文本顯示在網(wǎng)頁摘錄。

同時，這種布局和功能將提供很好的移動設備上，我不得不承認，淡出看起來真的很酷，我的手機上。

嗯，就是這樣。我希望你喜歡的文字淡出設計特征結合擬合的博客設計。如果你有任何問題，只是讓他們在下面的評論中，我們會很樂意幫忙的，我可以。

原創(chuàng)不易，未經(jīng)授權，嚴禁轉載

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

上一篇：? 產(chǎn)品驗證：開發(fā)一個產(chǎn)品之前確保你應該準備的事項

下一篇：?獨特的網(wǎng)站布局

您還有可能感興趣的內容

建站流程

Website development

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

熱門標簽

Website development

客戶評價

更多+

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

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

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

陳曦
不錯，價格比較合適，重點是響應速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理