Divi WordPress Theme

我们最近发布了《社论》杂志主题,旨在模仿报纸和杂志等传统印刷媒体的熟悉功能。 这篇文章介绍了设计社论的思想过程,以及其中一些思想的实现和发展。

社论的设计在很大程度上受传统报纸版面设计的启发,侧重于内容。 中心对齐的标题,略带纹理的背景,强烈的sans-serif标题,衬线主体复制和首字下沉均有助于使设计更具传统美感。 但是主题的真正优点是它的单个文章布局,这使其与其他杂志主题区分开来。 用户可以选择从多种不同的列式帖子内容布局中进行选择,从而可以对每个帖子进行独特的样式设置。

三列帖子布局

这些布局将帖子内容分为不同的垂直列,就像印刷出版物一样。 这些列的布局是通过编辑帖子屏幕上的几个选项设置的,为用户提供了更大的灵活性并尽可能地控制其布局。 首先,用户选择所需的列布局-传统全角博客,传统博客,3列,左2列宽,右2列宽或2列50/50。 列的优点在于它们不会自动拆分文本。 用户可以使用工具栏上的“添加列中断”按钮在帖子编辑器中设置“列中断”。

列设置和“添加列中断”按钮

您还可以控制帖子标题的外观,将它们设置为跨越一或两列,甚至跨越帖子顶部的全角。 这,加上添加后画廊图像滑块和简介段落(摘录)的选项,实际上使用户可以创建各种不同的布局。

现在,您已经了解了如何控制社论中的列,让我们看一下如何使用CSS实际构建这些列。

在进行研究时,我遇到了几种构建HTML / CSS列的方法。 一种是使用CSS Multi Column Layout模块,该模块被证明可以很好地工作,但是我遇到了浮动图像和控制文本中断的问题。 也有很多Javascript解决方案,但是没有一个真正为我提供所需的控件。

我们最终使用了自定义CSS和jQuery解决方案。 首先,基于在编辑帖子屏幕上选择的选项,将每个不同布局的CSS类添加到HTML,从而使我可以使用CSS定位每个布局。 接下来,我们必须指定标记中的列。 如上所述,在分栏编辑屏幕上用按钮插入分栏符。 这些列中断是通过PHP检测到的(由于Matty的一些魔法),并且文本块被包装在DIV标签中,从而使列可以使用CSS进行浮动。

布局类,列标记和列CSS

将帖子标题仅扩展为x列数存在一些问题。 标题未跨越的列仍在其下方默认设置,这与在文本段落中浮动图像不同。 我们使用jQuery确定帖子标题的高度,并将负边距应用于“非跨度”列,将其向上拉至与标题垂直对齐。

前面提到的float问题和修复它的jQuery

CSS&jQuery解决方案工作得非常好,并且可以使大多数浏览器(甚至是Internet Explorer 7)中的列兼容!

因此,您可以简要了解如何为社论创建自定义单篇文章布局。 该主题还有许多其他很酷的功能,使其成为一个很棒的杂志主题,请务必前往演示站点,一睹其辉煌!

[wtsfc]
测试!
[/wtsfc]

cta-banner-10-product-page-v2_2x

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=