巴彦淖尔公司网站设计:如何在WordPress中创建列布局

栏目是网站设计的基本元素。它们允许你在视觉上有吸引力的块中显示你的内容。它们允许你创建看起来像杂志和报纸的布局。

但是创建它们可能是很棘手的。可以手工编写代码,但这可能需要对每个帖子进行大量调整。您也可以使用许多插件中的一个,甚至是许多主题中的一个来创建它们,这些插件使您能够创建自己的布局。巴彦淖尔公司网站设计将讨论所有这三种方法。

在代码中创建列

可以使用表在文章和页面中创建列,但是创建列的理想方法是通过HTML和CSS。这,这个,那,那个支持教程对于WordPress显示了许多高级示例。列实际上很容易在代码中生成。让我们看一个创建列的示例。

要在文本编辑器中创建列,请使用

标记和一个样式属性。


<div style="width:40%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1</div>

<div style="width:40%;padding:0 10px 0 0;float:right;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>

<div style="clear:both;"></div>

这个代码示例创建了两个列,如下所示:

可以通过调整宽度和填充值来更改列的大小。通过调整数字,您可以在列之间创建或多或少的空间,并更改列的宽度。要添加更多的列,只需添加另一个代码块。看起来是这样的:

<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1</div>

<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>

<div style="width:30%;padding:0 10px 0 0;float:right;">
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>

<div style=”clear:both;”></div>

如果添加了更多的列,则需要更改宽度百分比以确保其合适。在本例中,它从40%更改为30%。

这些列也不必大小相同。例如:

<div style="width:20%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1</div>

<div style="width:20%;padding:0 10px 0 0;float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>

<div style="width:50%;padding:0 10px 0 0;float:right;">
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>

<div style=”clear:both;”></div>

此代码将创建两个窄列和一个更宽的列:

使用此代码,您可以在任何页面或帖子上创建多个列,从而创建杂志或报纸外观。还可以通过继续添加列来对它们进行分层:

我在第3列和第4列之间使用一个中断标记来创建行之间的空间:

这就像手工编码一样简单。然而,你仍然需要预览,并确保每一篇文章都以你想要的方式出现在你的页面和帖子上。在可视化编辑器中实现此操作的一个更简单的方法是使用插件。而且,这只会影响你的帖子和网页-而不是网站设计本身。

插件和短代码

插件为您编写此代码。它们给了你选择,这样你就可以看到你的专栏如何适合文章。有些提供了您放置在内容中的短代码。其他的提供按钮或其他添加到您的可视化编辑器,允许您作出快速选择。下面是一些不错的插件。

ET短码

ET的短代码插件添加按钮到您的文本编辑器。下面是没有按钮的编辑器的样子:

下面是他们补充的内容:

正如您所看到的,有许多布局选项已经添加到您的选择列表中。布局的选项包括:

  • 一半

  • 最后一半

  • 三分之一

  • 最后三分之一

  • 四分之一

  • 最后四分之一

  • 三分之二

  • 最后三分之二

  • 三四

  • 最后3/4

使用密码很简单。键入内容,然后以文本模式高亮显示要在列中显示的部分,然后选择列宽度。

非那样做不行。。您可以通过删除包装在文本中的代码,然后再进行另一个选择来更改它。

小贴士-实验的专栏宽度,并点击预览,看看什么最适合你的主题,并使你的完美布局,你正在寻找。

ET的短代码响应性强,使用起来非常容易。他们是开发人员计划每年89美元。它允许您访问所有主题、插件、高级技术支持、永久更新和分层Photoshop文件。

优雅的建设者

布局生成器为每个帖子或页面创建一个画布,您可以在其中拖放不同大小的列。从菜单中选择列。你们的选择是:

  • 半柱

  • 第三栏

  • 第四栏

  • 三分之二栏

  • 四分之三列

  • 可阻柱

您可以自己放置它们,也可以加载模板。一旦你有了你想要的布局,你可以保存它和重新加载它的次数,你想要的。

巴彦淖尔公司网站设计在您将列放在您想要的位置之后,您可以将17个模块中的任何一个添加到任何或所有模块中。您还可以使用模块保存布局,以便再次重用它。

优雅的Builder响应性强,是我用来快速创建列的最简单的插件之一。它是开发人员计划每年89美元。它允许您访问所有主题、插件、高级技术支持、永久更新和分层Photoshop文件。

高级WP柱

另一个将添加列的插件是AdvancedWP列。这个免费插件有一些巧妙的功能。它允许您创建具有简单接口的列,而无需使用短代码。它支持响应性布局。

它向可视化编辑器添加了一个按钮,该按钮将显示一个可以拖放布局的屏幕。您可以在2、3或4列之间进行选择。一旦有了列,就可以使用滑块进行调整。

滑块将允许您更改每个列的宽度,并且可以更改列之间空间的宽度。使用屏幕上的滑块很容易做到这一点。

如果需要,可以将内容直接添加到弹出窗口中的列中。你拥有所有你期望的文本特征:粗体,斜体,下划线,划线,上标,下标,代码,标题,h2-H6,段落,预,链接等等。

还可以将内容放在可视化编辑器中的列中。可以从可视化编辑器或弹出窗口对所需内容进行任何修改。当然,视觉编辑器提供了更多的媒体功能,所以我认为它是更好的选择。

您可以向任何列添加图像。与其按常规添加媒体,不如给它提供链接、描述和尺寸。

还可以设置一些默认值,如容器宽度、容器CSS和列数。这是一个易于使用的插件,页面看起来很棒。有一个用户指南和视频教程让你开始。对于免费插件来说还不错。

WP简易柱

这个插件增加了在页面和帖子上都能工作的短代码。它向可视化编辑器添加了一个按钮。点击按钮会弹出一个弹出式,有很多选择。

单击布局感兴趣的行,它将占位符添加到文本中。

将列的描述替换为文本。

您的内容将放在列中。如果您想要一个不同的布局,您只需再次单击按钮,并选择您喜欢的行。您可以单击任意数量的行,但您必须一次单击它们。

在选择屏幕的底部,您可以从下拉框中选择单列宽度。还可以添加类和样式。这是一种很好的方法,可以方便地将列组合添加到页面和帖子中。而且是免费的。唯一真正的缺点是,您必须在内容中的短代码之间工作。这在一开始可能有点令人困惑,特别是当你的文本中有很多短代码的时候。

响应列小部件

这个也适用于一个短代码。不像其他的,没有按钮来添加它们。它将允许您将小部件放置在列中,这样您所拥有的任何部件都可以去任何您想去的地方。创建一个小部件框,向其添加小部件,然后使用一个短代码调用它们。

您可以设置列数、小部件数量、每个浏览器宽度的列数、列跨度等等。您还可以编写PHP代码,以便在主题模板中显示它们。

有很多设置,需要一段时间才能完成所有设置。设置它们并不像其他人那么简单和直观,但是有更多的选择。我不喜欢免费版的一点是它有广告,所以我不推荐免费版。

还有一个PRO版本,添加多个小部件框,导入/导出小部件选项,没有广告,自定义CSS和优质支持。一个地点的费用为57.98美元,五个地点的费用为97.98美元,无限地点的费用为297美元。

Minimax-页面布局生成器

这是一个拖放响应页面生成器,它将按钮添加到可视化编辑器中。可以从1列添加到6列。它还允许您导入或导出布局,您甚至可以克隆它,以便在另一个页面或帖子中使用。

这个简单易用。当您创建一个新的页面或帖子时,您将在可视化编辑器和文本编辑器之间看到一个名为MiniMax的新选项卡。单击此按钮可使您添加所需的列数,或导入/导出或克隆。

我点击添加了6列。这增加了6个框,我可以添加内容。我可以将CSS添加到每个框中。有正负按钮,允许您增加或缩小每一列的大小。您还可以调整边框、图案和页边距。

单击该列的文件夹将打开一个框,在该框中,我可以从模块(小部件)中选择进入该列。在完成了这一行列的操作之后,我单击了该行左侧的“克隆”按钮。它克隆了行并将其放在第一行下。我可以轻松地拖动行并重新排列顺序。

我确实遇到了一个问题,把我的职位保留为草案。每次我保存它的时候,我的内容都被删除了。我得先给这个帖子起个名字。一旦我命名它,我没有任何问题,保存内容。简单易用,这是很难打败的。也是免费的。

主题

使用短码

巴彦淖尔公司网站设计许多专业设计的主题都带有短代码。短代码允许您轻松地使用预先制作的设计元素,而不必自己编写任何代码。您可以开发包含列的高级布局,只需将一个短代码放到POST中即可。短代码是添加列的最简单方法之一,而不必编写自己的代码。

拖落

其他主题包括设计您自己的布局的选项。他们中的许多人都是通过拖放设计元素来做到这一点的。以下是几个例子。

迪维

我不能忽略ET最受欢迎的主题。divi有自己的页面构建器,内置到主题的核心。使用它,您可以创建具有几乎任意类型的列布局的页面。您可以加载预先制作的模板,也可以使用拖放来创建自己的布局。这里有一个快速旅行:

在页面上,单击“使用页面生成器”按钮,您将获得此屏幕。从这里开始,您可以加载一个预先准备好的布局,然后根据您的实际情况使用或修改它,或者您可以开始插入列。

有很多预先设计的布局,有很多选择。

如果选择插入列,则有11个不同的布局选项。选择您想要的那个。

您的列出现在您选择的布局中,您可以开始插入模块。

您可以添加任意数量的行,并为每个行提供所选列的任何布局。一旦您选择了您的布局,您可以添加模块。您还可以返回并编辑布局,并在需要时添加或删除列。还可以拖放行。修改布局和创建布局一样容易。

divi非常容易使用,您可以在几分钟内拥有一个独特而专业的布局。它是个人计划,每年69美元的包,让您访问所有的主题,永久更新,和优质的技术支持。

制作,使

Make包括一个强大的拖放布局编辑器,它允许您通过简单的单击创建列布局。您可以在一节中显示1到4列之间。每一列都可以包含一个有特色的图像或内容。可以通过拖放重新排列。

我安装这个是为了试一试。当您创建一个新页面时,您将有一些布局选项,包括一个列的布局选项。默认情况下,已经放置了三列。我在每个专栏里都添加了一些我用智能手机拍摄的图片,仅此而已。

使用它既简单又简单。它是免费的个人使用在一个单一的网站。makePlus开发者版售价299美元,可以在无限的网站上使用。

包起来

列确实可以使您的内容弹出。它们可以使你的内容更容易在眼睛和视觉上更有趣。有了这么多好的工具可供选择,任何人都可以在布局中有漂亮而优雅的列。

轮到你了!巴彦淖尔公司网站设计使用过这些方法中的任何一个来创建列吗?我有没有漏掉你的最爱?我想在下面的评论中听到这一点!





二维码