如何在WordPress主题中自定义Blockquotes样式
如何在WordPress主题中自定义Blockquotes样式

如何在WordPress主题中自定义Blockquotes样式

引号通常是您文章中最难忘的部分。 它们也是任何帖子或演示文稿中最共享的部分。 这就是为什么报纸和主流媒体网站自定义其大字体引用样式以使其脱颖而出的原因。 在本文中,我们将向您展示如何在WordPress中自定义blockquotes样式,并向您展示9个漂亮的自定义blockquotes样式示例。

WordPress允许您使用编写部分中的工具栏区域在帖子和页面中添加块引用。

13e4c1c25c3205e7c66e7f972ac2b24e
这将在您的帖子中添加一些HTML,我们可以使用它来自定义样式。 注意:我们正在WordPress帖子编辑器中使用文本模式。 下面是您应该看到HTML的示例。

 

为了自定义WordPress主题中的blockquotes样式,我们需要修改主题的style.css文件。 您可以通过WordPress管理员中的外观»编辑器或通过FTP编辑文件来完成此操作。

接下来,您将需要使用以下建议的一种样式,并覆盖您的blockquote样式。 如果不存在,则只需添加这些即可。 也非常欢迎您将两种样式结合起来并根据自己的内心需求进行定制。

1.经典CSS Blockquote (1. Classic CSS Blockquote)

通常,人们使用CSS background-image在blockquote中添加大引号。 在此示例中,我们使用CSS来添加大引号。

 

bd8915f9e648e6eb75f7a3d4eac626ee

2.带图像的经典Blockquote (2. Classic Blockquote with Image )

在此示例中,我们使用了背景图像作为引号。

a51122110670eea25fc452aca0e72617

3.简单的Blockquote (3. Simple Blockquote)

在此示例中,我们添加了背景色和虚线虚线,而不是blockquotes。 随意发挥色彩。

2160a5cb3d0131d2f7b89ceb94aa8df8

4.白色蓝色和橙色Blockquote (4. White Blue and Orange Blockquote)

可以使Blockquotes脱颖而出,并且它们可以像您希望的一样丰富多彩。

98f520d5e9dbf421ba5acef19a530008

5.在CSS中使用Google Web字体作为Blockquotes (5. Using Google Web Fonts for Blockquotes in CSS)

在此blockquote CSS示例中,我们使用了Google网络字体库中的Droid Serif字体。

42c5d837a3a9ec22792c9cfd94f86d25

6.圆角砌块 (6. Round Corner Blockquote)

在此示例中,我们使用了带有圆角的blockquote,并使用了阴影作为边框。

194e69ffc6c8e0bf52e473da5a041581

7.使用渐变作为Blockquote的背景 (7. Using Gradient as Background for Blockquote)

在此CSS blockquote示例中,我们使用CSS3渐变来增强blockquote的背景。 CSS渐变非常棘手,因为它具有跨浏览器的兼容性。 我们建议使用colorlabs,CSS渐变生成器。

ff88c7550366ba1c2ae4cd8099113f5e

8.具有背景图案的Blockquote (8. Blockquote with Background Pattern)

在此示例中,我们使用背景图像作为blockquote的图案。

e615c04fdaa3e73adcc0cd28387014e1

9.在Blockquote背景中使用多个图像 (9. Using Multiple Images in Blockquote Background)

您可以使用CSS在blockquote背景中使用多个图像。 在此示例中,我们使用了blockquote:before伪元素将另一个背景图像添加到blockquote。

8062adf77a6e238cc4ffb43be3de92f0

 

点击数:1

发表回复