如何使用Divi个性化博客的网格

平价布莱尔Jersyer | Divi, WordPress的教程

Divi Blog模块具有有用的网格形式的布局选项，可用于您的Blog帖子。网格模板将您的博客文章组织到框或地图中，与标准视图相比，它们简化了屏幕上项目的可见性。

博客模块设置允许您自定义网络的整体设计。您可以轻松地使所有卡片具有相同的背景颜色，字体，边距等。但是，样式选项仅限于整个网格的设计，因此很难将多个或不同的设计应用于网格内的地图。

今天，我将向您展示如何针对构成网格的卡片并应用多种样式。您的博客使用自定义 CSS。我将向您展示如何对每张卡片应用不同的样式，以创建棋盘效果。我还将向您展示如何为每行的每张卡片设计不同的样式，并且我将向您展示如何针对任何单独的卡片。

这些是关于如何定制的 4 个示例您的博客，包括一些您可以使用的悬停效果。在本教程结束时，您将能够为以下产品创建出色的设计您的博客.

关于Divi主题的其他教程

让我们开始。

配置布局网格为您的博客

在开始设计博客模块卡之前，请确保至少已经创建了12个文章，并在框中装有图像。

创建消息后，创建一个新页面。在新页面上，将博客模块部署在标准部分的全角列中：

单击以编辑“博客”模块的设置。在“常规设置”下，更改以下设置：

布局：网格（网格）
文章数：12
显示特色图片：是
按钮了解更多：ON

在“自定义CSS”下，在“ CSS ID”文本框中输入“ gridcard”。这将是我们仅个性化此博客模块的一种方式。

保存更改

如何了解博客的“网格”布局

现在，你有你的博客网的地方，了解电网的布局结构，让您可以找到您要自定义的博客模块的地图是很重要的。

博客网格配置有三列布局。以下是博客网格的说明，其中12博客文章分为三列：

博客票证卡在每个列中从上到下进行排序。因此，如果要给他们一个数字，则需要从上到下在每个长度上计算1到4：

由于您知道每个博客卡在每一列下的数字顺序，因此您还可以将每个卡标识为奇数或偶数，如下所示：

设计栅极实施例

示例n°1：“方格”网格的设计

对于第一个示例，我将针对第一列中博客模块中的所有奇数卡（卡1和3），使其具有深灰色背景色。为此，请转到“ Divi→主题选项”，然后在自定义CSS文本框中添加以下CSS：

#gridcard .COLUMN：第一子文章：第n个孩子（奇数）{背景：#333; }

下面是该代码的功能细分：

#gridcard =整个博客模块的ID

.column：first-child =选择博客模块中的第一列

post：nth-child（odd）=选择列中的所有奇数项目（或卡片）

放在一起，这将选择博客模块第一列中ID为“ gridcard”的奇数卡。

然后添加你的白色文本，将走在黑暗的背景中加入以下CSS：

#gridcard .COLUMN：第一胎的文章：第n个孩子（奇数）.entry标题，#gridcard .COLUMN：第一胎的文章：第n个孩子（奇数）.POST-元，#gridcard .COLUMN：第一子文章：第n个孩子（奇数）。员额的元一个，#gridcard .COLUMN：第一胎的文章：第n个孩子（奇数）.POST内容p {颜色：#FFFFFF; }

此代码针对博客模块卡中的所有文本元素（包括标题、帖子元、帖子元链接和内容文章的）并赋予它们白色。

结果如下：

创建棋盘格布局的下一步是将第三列上的奇数卡定位为目标，并像在第一列中一样应用深灰色背景和白色文本。在“自定义CSS”文本框中添加以下CSS：

#gridcard .column：上个孩子的文章：nth-child（odd）{背景：＃333; } #gridcard .column：最后一个孩子的文章：nth-child（odd）.entry-title，＃gridcard .column：最后一个孩子的文章：nth-child（odd）.post-meta，＃gridcard .column：last-子文章：nth-child（odd）.post-meta a，#gridcard .column：子孙文章：nth-child（odd）.post-content p {颜色：#ffffff; }

此代码定位“最后”列（在这种情况下，第三列是最后一列）和“ last-child”昵称元素。

对于第二列（或中间），甚至将卡片对准目标即可完成棋盘效果。为此，我们需要添加以下CSS：

#gridcard .column：nth-child（2）文章：nth-child（even）{background：＃333; } #gridcard .column：nth-child（2）文章：nth-child（even）.entry-title，#gridcard .column：nth-child（2）文章：nth-child（even）.post-meta，＃ gridcard .column：nth-child（2）文章：nth-child（even）.post-meta a，#gridcard .column：nth-child（2）文章：nth-child（even）.post-content p {color ：#fff; }

现在去看看博客页面看到的博客模块卡的棋盘布局。

示例＃2：使用方格布局添加悬停效果

一旦知道了如何定位博客模块卡，就可以创造性地更改卡中的任何元素。

在此示例中，我将使用棋盘格布局，这次将鼠标悬停在地图上时，将特色图像从深灰色地图更改为黑白。而且，当将鼠标悬停在白卡上时，我将使其白纸的首页图像更亮。为此，请在“自定义CSS”区域中添加以下CSS（请确保禁用或削减其他代码，以使其与新代码不兼容）：

#gridcard .column：第一个孩子的文章：nth-child（奇数），#gridcard .column：最后一个孩子的文章：nth-child（odd），#gridcard .column：nth-child（2）文章：nth-child （even）{background：＃333; } #gridcard .column：第一个孩子的文章：nth-child（odd）.entry-title，＃gridcard .column：第一个孩子的文章：nth-child（odd）.post-meta，＃gridcard .column：first-子文章：nth-child（odd）.post-meta a，#gridcard .column：第一个孩子文章：nth-child（odd）.post-content p，#gridcard .column：最后一个孩子：nth-child （奇数）.entry-title，#gridcard .column：上个孩子的文章：nth-child（奇数）.post-meta，#gridcard .column：上个孩子的文章：nth-child（odd）.post-meta ，#gridcard .column：最后一个孩子的文章：nth-child（odd）.post-content p，#gridcard .column：nth-child（2）文章：nth-child（even）.entry-title，#gridcard。列：nth-child（2）文章：nth-child（even）.post-meta，＃gridcard .column：nth-child（2）文章：nth-child（even）.post-meta a，#gridcard .column ：nth-child（2）文章：nth-child（even）.post-content p {颜色：#fff; } #gridcard .column：第n个孩子（2）文章：nth-child（偶数）：悬停img，#gridcard .column：第一个孩子文章：nth-child（奇数）：悬停img，#gridcard .column：最后-child文章：nth-child（odd）：悬停img {-webkit-filter：灰度（1）; 滤镜：灰度（1）; } #gridcard .column：第n个孩子（2）文章：nth-child（odd）：悬停img，#gridcard .column：第一个孩子文章：nth-child（偶数）：悬停img，#gridcard .column：最后-child文章：nth-child（偶数）：悬停img {-webkit-filter：亮度（1.5）； 滤镜：亮度（1.5）; }

您还可以在卡片上添加反转效果，这样，当您将鼠标悬停在白色卡片上时，它们将变为深灰色，而当您将鼠标悬停在深灰色卡片上时，它们将变为白色。

添加以下CSS及以上更多的CSS：

#gridcard .column文章，#gridcard .column文章img {-webkit-transition：all 0.8s; -moz-transition：全0.8秒； 过渡：所有0.8秒； } #gridcard .column：第一个子项：nth-child（odd）：悬停，#gridcard .column：最后一个子项：nth-child（odd）：悬停，＃gridcard .column：nth-child（2）文章：第n个孩子（偶数）：悬停{背景：#fff; } #gridcard .column：第一个孩子文章：nth-child（odd）：悬停.entry-title，＃gridcard .column：第一个孩子文章：nth-child（odd）：悬停.post-meta，＃gridcard。列：第一个孩子的文章：nth-child（odd）：悬停.post-meta a，#gridcard .column：第一个孩子的文章：nth-child（odd）：悬停.post-content p，#gridcard .column：最后一个孩子的文章：nth-child（odd）：悬停.entry-title，＃gridcard .column：最后一个孩子的文章：nth-child（odd）：悬停.post-meta，#gridcard .column：最后一个孩子：nth-child（odd）：悬停.post-meta a，#gridcard .column：最后一个孩子的文章：nth-child（odd）：悬停.post-content p，#gridcard .column：nth-child（2）文章：nth-child（偶数）：悬停.entry-title，#gridcard .column：nth-child（2）文章：nth-child（even）：悬停.post-meta，#gridcard .column：nth-child（ 2）文章：nth-child（even）：悬停.post-meta a，#gridcard .column：nth-child（2）文章：nth-child（even）：悬停.post-content p {color：＃333; } #gridcard .column：第一个孩子的文章：nth-child（even）：悬停，#gridcard .column：最后一个孩子的文章：nth-child（even）：悬停，＃gridcard .column：nth-child（2）文章：第n个孩子（单数）：悬停{背景：＃333; } #gridcard .column：第一个子项：nth-child（even）：悬停.entry-title，＃gridcard .column：第一个子项：nth-child（even）：悬停.post-meta，#gridcard。列：第一个孩子的文章：n个孩子（偶数）：悬停.post-meta a，#gridcard .column：第一个孩子的文章：nth-child（偶数）：悬停.post-content p，#gridcard .column：最后一个孩子的文章：nth-child（偶数）：悬停.entry-title，#gridcard .column：最后一个孩子的文章：nth-child（even）：悬停.post-meta，#gridcard .column：最后一个孩子：nth-child（偶数）：悬停.post-meta a，#gridcard .column：最后一子文章：nth-child（even）：悬停.post-content p，#gridcard .column：nth-child（2）文章：nth-child（odd）：悬停.entry-title，＃gridcard .column：nth-child（2）文章：nth-child（odd）：悬停.post-meta，#gridcard .column：nth-child（ 2）文章：nth-child（odd）：悬停.post-meta a，#gridcard .column：nth-child（2）文章：nth-child（odd）：悬停.post-content p {color：#fff; }

现在去看看对您博客的影响。

实施例＃3：自由线地图

对于第三个示例，我将在每隔一行（而非列）的卡片上应用相同的深色背景和白色文本。为此，您需要定位每个列中的所有偶数卡。转到主题的“ Divi→选项”，并确保禁用或删除自本教程开始以来添加的所有以前的CSS代码。然后添加以下CSS：

#gridcard文章：nth-child（偶数）{background-color：＃333; } #gridcard文章：nth-child（even）.entry-title，#gridcard文章：nth-child（even）.post-meta，#gridcard文章：nth-child（even）.post-meta a，#gridcard文章：nth-child（even）.post-content p {color：#fff; }

结果如下：

Example＃4：设计一个特定的网格图

你们中有些人可能想要选择特定的卡。为此，您需要找到自动分配给每张卡的唯一商品ID。对于此示例，我使用的是Chrome浏览器。

转到显示博客模块的页面，然后右键单击其中一张卡。在出现的选项框中，选择“检查”（某些浏览器可能具有“检查项目”或类似内容。这将部署开发人员工具窗口，该窗口同时显示您的html和css查找包含包裹您的文章的文章标签，并写下分配给它的文章ID。这是用于定位您的个人卡片的选择器。例如，右键单击并单击“检查”以找到ID“ post-3466”。

如下：

瞄准这一CSS卡给他一个灰色的背景，白色字体，你必须使用下面的CSS：

＃post-3466 {background：＃333333; }＃post-3466 .entry-title，＃post-3466 .post-meta，＃post-3466 .post-meta a，＃post-3466 .post-content p {color：#fff; }

现在，地图已应用了该特定样式。

就这样！

最后的想法

这些只是使用Blog模块卡的这种CSS定位可以完成的许多不同样式的几个示例。您不再需要为每张卡保持相同的样式。您可以根据需要设计它们。

如果您有任何问题或建议，请随时向他们提供给我。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

类似商品

22评论

安妮科林--塞金 8 年 2023 月 7 日 17 时 XNUMX 分

早上好！您知道是否可以修改此 Blog 对象的列数吗？
我希望每张卡片都以全宽显示。谢谢！
回答
弗洛里安 7 年 2020 月 17 日 04 小时 XNUMX 分

你好，
我试图在ID为“ gridcard”的“ grid”中显示博客文章，但是它不起作用。你能帮助我吗？
回答
- 蒂埃里·贝特朗 14 年 2020 月 20 日 29 小时 XNUMX 分
  
  Bonsoir，
  
  很抱歉这么晚才回复。
  
  您可以改一下您的要求吗？
  回答
glao 28年2020月11日，43小时XNUMX分

你好，
我确实是一个初学者，但是由于有了在线教程，我设法建立了一个不错的博客。
真的，感谢这一点，因为我只需要复制代码，一切都进行得很顺利，因此我对结果感到满意。
再次感谢，祝你愉快
回答
- 布莱尔Jersyer 29年2020月7日，16小时XNUMX分
  
  求求你了感谢您阅读我们。
  回答
斯特凡诺 10 年 2019 月 19 日 48 小时 XNUMX 分

Bonsoir，
DIVI博客在作者姓名旁边放置介词“ of”（例如Stefano）。我想知道是否可以将其更改为“ de”
回答
- 蒂埃里·贝特朗 16 年 2019 月 3 日 54 小时 XNUMX 分
  
  你好，
  
  是的，可以使用Divi更改此元素。
  回答
赫姆 24 年 2019 月 18 日 16 时 XNUMX 分

你好蒂埃里
超级教程
我想知道是否可以增加特色图片的尺寸
我想将这种风格应用到我的博客中
MERCI
回答
- 蒂埃里·贝特朗 24 年 2019 月 20 日 20 时 XNUMX 分
  
  你好，
  
  是的，有可能。
  回答
Viktoria wenk-Jacobsen 4 年 2019 月 12 日 26 时 XNUMX 分

你好，
如何为手机（平板电脑）优化此布局？我没有Schabrettmuster，但是每个博客帖子的颜色都是按特定顺序排列的。当然，当我们移动时，这种情况会发生变化，并且颜色不再与正确的帖子相关联...
有人在这里有个主意吗？
回答
- 蒂埃里·贝特朗 4 年 2019 月 23 日 17 时 XNUMX 分
  
  你好，
  
  没有不幸。
  回答
梁刘柔芬 23 年 2018 月 23 日上午 05:XNUMX

你好，

感谢本文！我还想修改文章底部的“阅读更多”。
你能给我们一些CSS代码的例子来改变文本，并把它放在一个漂亮的居中按钮中吗？

恩VOUS remerciant。
梁刘柔芬
回答
- 安妮科林--塞金 8 年 2023 月 7 日 15 时 XNUMX 分
  
  嗨🙂要更改“阅读更多”按钮的文本，它发生在博客设置>样式>阅读更多文本中。您可以修改“阅读更多”的排版和文本。但是，我不知道如何用它制作按钮。好设置！
  回答
Stancanelli 24 年 2018 月 17 日 10 时 XNUMX 分

Cuándo在CSS personalizado，por ejemplo：
#gridcard .Column：first-child art：nth-child（impar）{background：#333; }

da error como el seigue：预计在1行后面的冒号后面有一个FUNCTION或IDENT，col 18

问候
回答
- 蒂埃里·贝特朗 24 年 2018 月 20 日 34 时 XNUMX 分
  
  Bonsoir，
  
  我们的博客是自动翻译成法语的。因此，我邀请您在博客顶部的语言小部件中选择法语，然后将显示正确的CSS代码。
  回答
- Kathryn（英国）上五月24，2018在17:58上午
  
  ustedescribióartículoevil escrito，deberíaser：artículodel primer hijo：no arte del primer hijo：
  
  你拼错的文章，应该是：第一个孩子的文章：不是第一个孩子的艺术：
  回答
  - 蒂埃里·贝特朗上五月24，2018在20:54上午
    
    嗨，
    
    70其他语言。
    回答
Helary 30 年 2017 月 10 日上午 46:XNUMX

你好
感谢您的文章。我有一个网格演示文稿（Divi主题），有一些用于文章介绍的缩略图（照片），另一方面，当我单击以访问该文章时，该图像将以大字体显示。 '文章。有没有一种方法可以使其与缩略图相同或从帖子视图中删除。
MERCI
Patrick（英国）
回答
- 蒂埃里·贝特朗 30 年 2017 月 20 日上午 19:XNUMX
  
  Bonsoir，
  
  对不起，但是我们的divi支持仅限于我们的教程。请联系Eleganthemes SVP。
  回答
朱利安 6 年 2017 月 14 日上午 56:XNUMX

Bonjourn，超级文章
我在这里碰碰运气，有时当一个主题对其他人有意义时，我们绕了一个主题走了好几个星期却找不到答案。

因此，我正在寻找一种解决方案，以便建立一个仅由视觉元素组成但高度不同的帖子网格，更明确地讲，二分之一的视觉元素在其旁边具有两倍的视觉元素高度。

一个想法？

朱利安
回答
- 蒂埃里·贝特朗 7 年 2017 月 9 日上午 31:XNUMX
  
  您好朱利安，
  
  我建议您与DIVI团队联系。在这种情况下更方便。
  回答
Sofhy 上五月18，2017在18:05上午

伟大的教程！我会测试CA这个周末我的网站。
你有一个解决方案，以消除在网格中提取？
留言MerciàVOUS
Sofhy
回答