遵义企业网站开发:9有用的divi css片段,您可以在几秒钟内添加到ePanel中-极简慕枫

遵义企业网站开发:9有用的divi css片段,您可以在几秒钟内添加到ePanel中

2019-04-24

作为一名经验丰富的遵义企业网站开发人员,您可能会觉得Divi会限制您展示CSS肌肉。不过,你错了。

虽然Divi是为用户提供方便,即使他们对WordPress没有什么经验,但它也能满足更高要求的用户。例如,DiviePanel包含了一个有用的特性,可以添加自定义CSS代码,而无需大惊小怪-只需将代码输入框中,就可以了。

如果你想看看这个自定义CSS选项的功能,今天是你的幸运日。我们将向您展示如何一步地使用ePanel,并介绍9种我们最喜欢(且易于实现)的CSS技巧。

编者按:这篇文章原来有十个剧本。一个已经被删除,因为调整您的徽标和卷轴标题的大小可以使用主题自定义器实现,并且不需要代码片段。请看这段视频作为一个例子。

如何使用ePanel添加CSS

这是小菜一碟。

转到WordPress仪表板并单击迪维标签。这会带你去主题选项电子专家小组的一节,其中自定义CSS盒子铺好了。

遵义企业网站开发

一旦您在ePanel中,一直向下滚动,直到找到最后的CSS字段。你有什么代码想试试吗?太好了,然后粘贴进去,然后点击存钱嗯,差不多就是这样了。

The Divi ePanel Custom CSS field.

现在-如果你想玩一些CSS定制,看看下面我们从几个热情的Divi和整体web开发资源编译的简单片段,如卡尔凯特拉兹, 布赖恩嗅探设计, divi主题示例,和基诺基罗斯.

1。叠加你的标志

A Divi demo website with a superimposed logo.

让我们遵义企业网站开发从一个简单的技巧开始吧。默认的Divi标题条很好,很优雅(另外,它在页面向下滚动时会自动调整大小),但是它不会对高度足够高的徽标进行调整。

如果您的标志太大,它将自动缩小,以适应标题栏。下面的CSS代码将修改Z-指数你的标志到一个荒谬的价值,以确保它是叠加在任何其他内容的网页,即使你向下滚动。

除此之外,您还可以使用最大高度缘顶值,直到您的徽标完全按照您的要求显示。

#top-header {z-index: 99999;}

#logo {

max-height: 220%;

margin-top: -32px;

z-index: 100000;

}

@media only screen and (max-width : 980px) {

#logo { margin-top: 0px}}

2。在标题中添加一个准透明的背景图像。

A Divi site showing a header with a semi-transparent image as its background.

为了增加原创性,您实际上可以在标题中使用图像作为背景。但是,您选择的任何图像都应该具有足够的大小来实际充当标题。

你所要做的就是把你的新背景上传到你的WordPress媒体文件中,并把它的URL放在上面写的地方。你在这里。代码的其余部分用于修改其不透明度(因此颜色不会覆盖标题中的其余元素),设置其边缘并指定其Z-指数如下所示。

#main-header::after {

content: "";

background-image: url('yourimagegoeshere.png');

background-size:cover;

opacity: 0.5;

top: 0;

left: 0;

bottom: 0;

right: 0;

position: absolute;

z-index: -1;

}

3。更改边栏宽度

A Divi site showing a slightly modified sidebar.

这个非常简单-我们将更改Divi侧栏小部件的默认宽度。如果您曾经觉得它太窄了,那么您所要做的就是看看下面的代码。

此代码将默认宽度更改为300 px,并在查看器屏幕边缘设置30 px的页边距。但是,您可能已经注意到其中也有一个媒体查询。由于我们将强制增加新的宽度和页边距,如果不是因为媒体查询,您的侧可能会在小屏幕上中断。

出于测试目的,我们遵义企业网站开发为强制执行下面概述的CSS更改设置了最小宽度1,200 px。如果观众的分辨率符合或超过这个最小值,他们将能够看到你的新侧边栏。

@media only screen and ( min-width: 1200px ) {

.et_right_sidebar #sidebar .et_pb_widget {

margin-right:30px !important;

}

.et_left_sidebar #sidebar .et_pb_widget {

margin-left:30px !important;

}

.et_right_sidebar #left-area,

.et_left_sidebar #left-area {

width:720px !important; /* 1020 - width */

}

.et_right_sidebar #main-content .container:before {

right:300px !important; /* width */

}

.et_left_sidebar #main-content .container:before {

left:300px !important; /* width */

}

.et_right_sidebar #sidebar,

.et_left_sidebar #sidebar {

width:300px !important; /* width */

}

}

4。移除页眉栏底部边框

A Divi example site showing a header bar sans border.

如果你有敏锐的眼光,你可能已经注意到在你的Divi头部底部有一个小边框。好吧,准备好迎接一些刺激吧,因为今天我们将教你如何永远摆脱那个烦人的小边框。

冒着被炸坏的危险,我们必须澄清,小分水岭并不完全是一条边界。本身,但是一个简单的CSS阴影,下面的代码只是将其值设置为“None”。

#main-header{

-webkit-box-shadow:none !important;

-moz-box-shadow:none !important;

box-shadow:none !important;

}

5。在小部件之间添加分隔符

A Divi example site showing a sidebar with dividing lines.

“但是汤姆,如果我不是一个讨厌边境的共产主义者呢?”是您在回顾上一次CSS自定义之后可能会问自己的问题。那么,老实说,我们不喜欢区分边境拥护者或其他人。

事实上,为了弥补我们的疏忽,我们将教你如何在你的侧边栏中添加一些额外的边框或分隔符。是的,我们很酷。

下面的代码将在您的侧边栏的每个小部件或部分之间创建分隔符,给您的站点一个更有组织的感觉。您可以通过更改开始处的值来修改边框的高度和颜色。

#sidebar .et_pb_widget {

border-bottom: 1px solid #ddd;

padding-bottom: 20px;

margin-bottom: 20px;

}

#sidebar .et_pb_widget:last-of-type {

border-bottom:0;

}

6。添加连接的项目列表

A Divi example showing a list using connected bullet points.

这个很酷-你在上面的图片上看到的效果实际上是通过创建CSS线条和点作为背景的一部分来实现的。

不过,请注意,此代码将在所有列表中全局应用此效果。

.dots-list {

width: 100%;

}

.dots-list ol {

padding-left: 50px;

position: relative;

margin-bottom: 20px;

list-style: none !important;

}

.dots-list ol li {

position: relative;

margin-top: 0em;

margin-bottom: 20px;

}

.dots-list ol li .number_divider {

position: absolute;

left: -50px;

font-weight: 800;

font-size: 2em;

top: -5px;

}

.dots-list ol li:before {

content: "";

background: #8dbeb2;

position: absolute;

width: 2px;

top: 1px;

bottom: -21px;

left: -24px;

}

.dots-list ol li:after {

content: "";

background: #8dbeb2;

position: absolute;

width: 15px;

height: 15px;

border-radius: 100%;

top: 1px;

left: -31px;

}

.dots-list ol li:last-child:before {

content: "";

background: #ffffff;

}

7。添加滑块文本的背景色

遵义企业网站开发

默认情况下,Divi将简单地将文本直接覆盖在图像顶部的滑块上,并且看起来很棒。但是,如果你选择使用图像,使你很难识别文本呢?嗯,你可以修改文本本身的风格,或者给它一个简单的背景,让它流行起来。

正如你可能从这一点的标题推测,我们即将教你如何实现后者。下面的代码将创建一个简单的背景矩形围绕您的文本,您可以修改它的颜色,通过改变值,它说‘背景色’。

你也可以玩填充,边框,不透明,所以去疯狂!

.et_pb_slide_description h2 {

background-color: #000;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

-moz-border-top-right-radius: 5px;

-moz-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

padding: 15px;

opacity: .8;

}

.et_pb_slide_content p {

background-color: #000;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

-moz-border-bottom-right-radius: 5px;

-moz-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

padding: 15px;

opacity: .8;

}

8。将Divi Toggle图标动画化

这个小片段会让你对Divi切换图标有一些乐趣;更具体地说,通过改变它的颜色和旋转默认箭头,一旦它被切换。

.et_pb_toggle_open .et_pb_toggle_title:before {

transform: rotate(180deg);

content: "\25bc";

transition:all 0.5s ease-in-out 0s;

color:#e5e2d3;

}

.et_pb_toggle_title:before {

content: "\25bc";

font-size:2em;

transition:all 0.5s ease-in-out 0s;

color:#179baf;

}

9。切换到桌面显示的“移动”菜单

A Divi example site showing the mobile menu on a full desktop display.

如果你不想把你的标题栏上的链接太多,你可以选择模仿移动显示器的功能:使用一个按钮显示导航菜单。

在从移动设备上浏览站点时,divi实际上就是这样做的,下面的代码使您在从PC上查看站点时可以访问这个切换按钮。这样你就可以保持你的头看起来整洁。

@media only screen and ( min-width:980px ) {

#et_mobile_nav_menu { display:block }

#top-menu-nav { display:none; }

}

/**change these settings if you want to style it**/

.mobile_menu_bar:before {

content: "\61";

font-size: 32px;

left: 0;

position: relative;

top: 0;

cursor: pointer;

}

}

结语

即使你使用的是一个主题,这也不排除你的网站是真正独特的(特别是如果这个主题是Divi)。无论您选择哪个主题,遵义企业网站开发WordPress用户都可以使用自定义选项,除了成千上万的教程之外,还可以处理您希望实现的任何功能。

就Divi而言,要想在不接触任何核心文件的情况下进行CSS自定义,只需跳入仪表板上的Divi选项卡即可。这将自动带您到Divi ePanel,并遵循我们的“如何使用ePanel添加CSS”部分中的简单说明。