上海网站建设设计:如何设置Divi博客模块网格卡的样式

2019。05。05 关键词:

divi的博客模块为您的博客文章提供了一个有用的网格布局选项。网格模板将博客文章组织成方框或卡片,这样比标准的全宽度博客布局更容易在屏幕上查看更多的帖子。

博客模块设置允许您自定义网格的总体设计。您可以轻松地将所有的卡片制作成相同的背景色、字体、边距等…。然而,造型选项仅限于整个网格的设计,因此很难将多个或不同的设计应用于网格内的卡片。

今天,上海网站建设设计将向您展示如何使用自定义CSS对组成博客网格的卡片进行多个样式的定位和应用。我将向您展示如何将不同的样式应用到每一张其他卡上,从而创建一个格子效果。我还将向您展示如何将您的卡片按行进行不同的样式设计,以及如何将任何一张单独的卡片作为目标和样式。

我包括4个例子,如何样式你的网卡,包括几个悬停效果,你可以使用。在本教程的末尾,您将为您的下一个项目创建惊人的博客网格设计。

设置博客模块网格布局

在我们开始设计博客模块卡之前,请确保至少有12篇文章是用特色图片创建的。我的帖子内容使用“loremipsum”文本,功能图片使用unspash.com上的模拟图像。

创建文章后,创建一个新页面。在新页面上,将博客模块部署到标准部分中的全宽度列上:

上海网站建设设计

单击此处可编辑博客模块设置。在“常规设置”下,更改下列设置:

布局:网格
员额编号:12
展示特色形象:是的
阅读更多按钮:打开

上海网站建设设计在“自定义CSS”下,在“CSS ID”文本框中输入“网格卡”。这将是一个方法,我们只定制这个博客模块。

储蓄与退出

理解博客模块网格布局

现在您已经准备好了博客网格,了解网格布局的结构非常重要,这样您就可以找到要编辑的博客模块卡了。

博客网格设置为三列布局。以下是博客网格的说明,其中12篇博客文章分为三栏:

博客明信片是从上到下订购的每一栏。所以,如果你要给每个人一个数字,你可以在每一列中从上到下对它们进行1到4的编号:

由于您知道每张博客明信片在每一栏下的数字顺序,您也可以将每一张卡片识别为奇数或偶数,如下所示:

示例网格设计

示例1:设计一个格博客网格

对于第一个例子,上海网站建设设计将针对第一列下的所有奇数博客模块卡(卡片1和3),给它们一个深灰色的背景颜色。为了做到这一点,请到divi→主题选项并在“自定义CSS”文本框中添加以下CSS:

#gridcard .column:first-child article:nth-child(odd){
background: #333;
}

下面是该代码所做工作的详细说明:

#gridCard=整个博客模块的ID
.Column:First-child=选择博客模块中的第一列
文章:n子(奇数)=选择列中所有奇数编号的物品(或卡片)。

综合起来,这将在博客模块的第一列中选择带有ID“gridCard”的奇数卡。

接下来,通过添加以下CSS,添加白色文本以浏览黑暗背景:

#gridcard .column:first-child article:nth-child(odd) .entry-title,
#gridcard .column:first-child article:nth-child(odd) .post-meta,
#gridcard .column:first-child article:nth-child(odd) .post-meta a,
#gridcard .column:first-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

此代码针对博客模块卡中的所有文本元素(包括标题、POST元、POST元链接和POST内容),并为它们分配白色颜色。

结果如下:

创建我们的格子布局的下一步是瞄准第三列上的奇数卡片,并应用深灰色背景和白色文本,就像您在第一列中所做的那样。在“自定义CSS”文本框中添加以下CSS:

#gridcard .column:last-child article:nth-child(odd){
background: #333;
}

#gridcard .column:last-child article:nth-child(odd) .entry-title,
#gridcard .column:last-child article:nth-child(odd) .post-meta,
#gridcard .column:last-child article:nth-child(odd) .post-meta a,
#gridcard .column:last-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

这段代码的目标是“最后一列”列(在本例中,第三列是最后一列),并以伪元素“last-child”为目标。

对于第二个(或中间)列,以偶数卡片为目标,以完成格子效果。为此,我们需要添加以下CSS:

#gridcard .column:nth-child(2) article:nth-child(even) {
background: #333;
}

#gridcard .column:nth-child(2) article:nth-child(even) .entry-title,
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta,
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a,
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}

现在去看看博客页面,看看博客模块卡的格子布局。

示例2:使用格子布局添加Hover效果

一旦你知道如何针对你的博客模块卡,你可以编辑卡内的任何元素以创造性的方式。

在本例中,我使用的是格子布局,这一次我将在卡上悬停时将暗灰色卡的特征图像更改为黑白图像。并且,我要使白卡特色的图像更亮,当盘旋在卡片上。为此,在“自定义CSS”框中添加以下CSS(确保禁用或删除其他代码,使其不与新代码冲突):

#gridcard .column:first-child article:nth-child(odd),
#gridcard .column:last-child article:nth-child(odd),
#gridcard .column:nth-child(2) article:nth-child(even)  {
background: #333;
}

#gridcard .column:first-child article:nth-child(odd) .entry-title,
#gridcard .column:first-child article:nth-child(odd) .post-meta,
#gridcard .column:first-child article:nth-child(odd) .post-meta a,
#gridcard .column:first-child article:nth-child(odd) .post-content p,
#gridcard .column:last-child article:nth-child(odd) .entry-title,
#gridcard .column:last-child article:nth-child(odd) .post-meta,
#gridcard .column:last-child article:nth-child(odd) .post-meta a,
#gridcard .column:last-child article:nth-child(odd) .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even) .entry-title,
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta,
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a,
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}

#gridcard .column:nth-child(2) article:nth-child(even):hover img,
#gridcard .column:first-child article:nth-child(odd):hover img,
#gridcard .column:last-child article:nth-child(odd):hover img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

#gridcard .column:nth-child(2) article:nth-child(odd):hover img,
#gridcard .column:first-child article:nth-child(even):hover img,
#gridcard .column:last-child article:nth-child(even):hover img {
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}

你也可以在卡片上增加一个倒转效果,这样当你在白色卡片上悬停时,它们会变成深灰色,当你在深灰色卡片上悬停时,它们会变成白色。

除了上面的CSS之外,还添加以下CSS:

#gridcard .column article, #gridcard .column article img {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
}

#gridcard .column:first-child article:nth-child(odd):hover,
#gridcard .column:last-child article:nth-child(odd):hover,
#gridcard .column:nth-child(2) article:nth-child(even):hover {
background: #fff;
}

#gridcard .column:first-child article:nth-child(odd):hover .entry-title,
#gridcard .column:first-child article:nth-child(odd):hover .post-meta,
#gridcard .column:first-child article:nth-child(odd):hover .post-meta a,
#gridcard .column:first-child article:nth-child(odd):hover .post-content p,
#gridcard .column:last-child article:nth-child(odd):hover .entry-title,
#gridcard .column:last-child article:nth-child(odd):hover .post-meta,
#gridcard .column:last-child article:nth-child(odd):hover .post-meta a,
#gridcard .column:last-child article:nth-child(odd):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even):hover .entry-title,
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta,
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta a,
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-content p  {
color: #333;
}

#gridcard .column:first-child article:nth-child(even):hover,
#gridcard .column:last-child article:nth-child(even):hover,
#gridcard .column:nth-child(2) article:nth-child(odd):hover {
background: #333;
}

#gridcard .column:first-child article:nth-child(even):hover .entry-title,
#gridcard .column:first-child article:nth-child(even):hover .post-meta,
#gridcard .column:first-child article:nth-child(even):hover .post-meta a,
#gridcard .column:first-child article:nth-child(even):hover .post-content p,
#gridcard .column:last-child article:nth-child(even):hover .entry-title,
#gridcard .column:last-child article:nth-child(even):hover .post-meta,
#gridcard .column:last-child article:nth-child(even):hover .post-meta a,
#gridcard .column:last-child article:nth-child(even):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .entry-title,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta a,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-content p  {
color: #fff;
}

现在去看看你博客上的效果。

示例3:按行自定义博客模块卡

对于第二个例子,我将为其他行(非列)中的卡片应用相同的黑暗背景和白色文本。要做到这一点,您需要针对每个列中的所有偶数卡片。去divi→主题选项请确保禁用或删除本教程中自定义CSS框中的任何以前的CSS。然后添加以下CSS:

#gridcard article:nth-child(even) {
    background-color: #333;
}

#gridcard article:nth-child(even) .entry-title,
#gridcard article:nth-child(even) .post-meta,
#gridcard article:nth-child(even) .post-meta a,
#gridcard article:nth-child(even) .post-content p  {
color: #fff;
}

结果如下:

示例4:设计特定的博客模块卡

有些人可能想选择一个特定的模块卡。要做到这一点,您必须找到自动分配给您的每张卡的唯一的POST ID。在这个例子中,我使用的是Chrome浏览器。

转到显示博客模块的页面,右击其中一张卡。在弹出的选项框中,选择“检查”(一些浏览器可能有“检查元素”或类似的内容)。这将部署DeveloperTools窗口,它同时显示网页的html和CSS。找到文章标签,包装您的模块卡/帖子,并注意分配给它的帖子ID。这就是你想用来瞄准你的个人卡的选择器。对于我的例子,我徘徊,右击,并检查身份证“后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;
}

现在这张卡有了特定的样式。

上海网站建设设计

就这样!

最后思想

这些只是使用这种针对博客模块卡的CSS可以实现的许多不同样式的几个例子。你不必再为每一张卡保留相同的风格了。你可以用任何你喜欢的方式设计它们。


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监

安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三