我坚信，小事情可以有很大的差别，特别是当它涉及到网站建设。建设一个网站是我喜欢的部分是把后的润色，似乎把它连在一起。这可能是一个按钮悬停效果，改变在英雄节标题字体大小，甚至一些填充的变化（这有时会有很大的不同）。任何变化的可能，重要的是要记住，花时间去做。你的用户都会注意到并欣赏它。

这就是为什么我很高兴与你分享一个小的，但非常酷，设计功能，褪色了，就在“阅读更多”按钮，你的文章内容的文本。

实施设计与分

为了更好地展示这种文字淡出效果，我用迪维的博客模块用全角的页面布局和优化阅读宽度窄的极简设计建立博客博客文章摘录。

这淡出效果绝对不是一个新概念。它已经存在了很长时间。但是，这并不意味着你不能使用它今天。结合现代设计和创建在你的摘录，才可能吸引他们点击阅读更多后一个神秘的元素。

自定义博客模块

如果你不已经，确保你有至少一个博客发表的特色形象。你的特色形象要宽度至少为。

现在让我们得到它

使用默认的标准节在迪维生成器所示，插入全角的柱。

该行模块设置，更新以下：

使用自定义宽度：600px

使用自定义的槽宽度：是的

排水沟宽度：2

保存并退出

现在插入一个博客模块到你的全宽行。

自定义博客模块设置在一般的设置，设计先进的设置，以及自定义的CSS。

General settings for the the following：更新

布局：fullwidth

展览精选的图片：是的

内容：展示摘录

阅读更多关于按钮：

文本颜色：黑

以其先进的设计设置更新如下：

标题字体：广义的光，利用（TT）

标题字体大小：40px；

头字母间距：2px；

字体：蛇体

体字体大小：16px

体字母间距：1px；

体高：金在线

在自定义CSS添加下面的CSS代码在标题文本框和后元箱：

<trans data-src="text-align:center;" data-dst="文本对齐：中心；">文本对齐：中心；</trans>

这应该是个什么样子现在在我们添加文字淡出效果：

淡出文本添加效果

因为淡出效果是使用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;}

保存更改

现在让我们看看结果

网格布局选项

淡出文本摘录在网格布局是一个伟大的除了。值得庆幸的是，做的很简单。事实上，你已经增加了需要优化的网格布局显示CSS（很卑鄙的我知道）。所有剩下的就是两个简单的步骤。

首先，去行模块设置“使用自定义宽度”选项切换到没有。

然后，去博客模块设置，选择“博客布局网格”。

现在你的文章应该是这样的（假设你有至少3的帖子发表）：

后的挑战与思考

你可能面临的挑战之一添加这个功能的时候，是不是有足够的房间供你的淡出效果。一个摘录的默认长度约55字。用较小的字体，一个较短的行高和/或更后的宽度，褪色会隐藏你希望他们阅读的文本。

添加更多的文本摘录的简单的方法是使用在你的网页编辑器在WordPress的底部找到摘录盒。任何文本输入此框将替换默认的文本显示在网页摘录。

同时，这种布局和功能将提供很好的移动设备上，我不得不承认，淡出看起来真的很酷，我的手机上。

嗯，就是这样。我希望你喜欢的文字淡出设计特征结合拟合的博客设计。如果你有任何问题，只是让他们在下面的评论中，我们会很乐意帮忙的，我可以。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/10769.html