wordpress 自定义_如何使用Elementor创建自定义WordPress布局

wordpress 自定义

Want to create your own custom page layouts in WordPress? Elementor is a drag & drop WordPress page builder that allows you to easily create custom WordPress layouts without having any coding knowledge. In this article, we will show you how to easily create custom WordPress layouts with Elementor with just a few clicks.

是否想在WordPress中创建自己的自定义页面布局？ Elementor是一个拖放式WordPress页面构建器 ，它使您无需任何编码知识即可轻松创建自定义WordPress布局。 在本文中，我们将向您展示如何只需单击几下即可使用Elementor轻松创建自定义WordPress布局。

为什么以及何时需要自定义WordPress布局？ (Why and When Do You Need Custom WordPress Layouts?)

Many free and premium WordPress themes come with multiple layout choices for different kind of pages. However, sometimes none of these layouts would meet your requirements.

许多免费和高级WordPress主题都为不同类型的页面提供了多种布局选择。 但是，有时这些布局都不符合您的要求。

If you know how to code in PHP, HTML, and CSS, then you can create your own page templates or even build a child theme for your site. However, majority of WordPress users are not developers, so this option doesn’t work for them.

如果您知道如何使用PHP ，HTML和CSS进行编码，则可以创建自己的页面模板，甚至可以为您的站点构建子主题 。 但是，大多数WordPress用户不是开发人员，因此此选项不适用于他们。

Wouldn’t it be great if you could just create page layouts using a drag and drop interface?

如果您仅可以使用拖放界面创建页面布局，那不是很好吗？

This is exactly what Elementor does. It is a drag and drop WordPress page builder plugin that allows you to easily create your own custom WordPress layouts without any coding skills.

这正是Elementor所做的。 它是一个拖放式WordPress页面构建器插件 ，可让您轻松创建自己的自定义WordPress布局，而无需任何编码技能。

It has an intuitive user interface that lets you build custom layouts with a live preview. It comes with many ready to use modules for all kind of web design elements.

它具有直观的用户界面，可让您通过实时预览构建自定义布局。 它附带了许多可用于所有Web设计元素的模块。

There are several professionally designed templates that you can instantly load and use as a starting point. It works with all standard compliant WordPress themes and is compatible with all popular WordPress plugins.

您可以立即加载和使用几个专业设计的模板作为起点。 它适用于所有符合标准的WordPress主题，并且与所有流行的WordPress插件兼容。

Having said that, let’s take a look at how to create custom WordPress layouts with Elementor.

话虽如此，让我们看一下如何使用Elementor创建自定义WordPress布局。

Elementor入门 (Getting Started with Elementor)

First you will need to purchase Elementor Pro plugin. It is the paid version of the free Elementor plugin and gives you access to additional features and 1 year of support.

首先，您需要购买Elementor Pro插件。 它是免费的Elementor插件的付费版本，可让您使用其他功能和1年的支持。

Next, you will need to install and activate the Elementor plugin. For more details, see our step by step guide on how to install a WordPress plugin.

接下来，您将需要安装并激活Elementor插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit Elementor » Settings page to configure plugin settings.

激活后，您需要访问Elementor»设置页面以配置插件设置。

Here you can enable Elementor for different post types. By default, it is enabled for your WordPress posts and pages. If you have custom post types on your site, then those will also appear here, and you can enable them as well.

在这里，您可以为不同的帖子类型启用Elementor。 默认情况下，您的WordPress帖子和页面启用了此功能。 如果您的网站上有自定义帖子类型 ，则这些类型也会显示在此处，您也可以启用它们。

You can exclude or include user roles that can use Elementor when writing posts or pages. By default, it is enabled only for administrators.

您可以排除或包括在撰写文章或页面时可以使用Elementor的用户角色 。 默认情况下，仅对管理员启用。

Don’t forget to click on the save changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

使用Elementor创建自定义WordPress布局 (Creating Custom WordPress Layout with Elementor)

First you need to create a new page (or post) on your WordPress site. On the post edit screen, you will notice the new ‘Edit with Elementor’ button.

首先，您需要在WordPress网站上创建一个新页面(或发布)。 在帖子编辑屏幕上，您会注意到新的“使用Elementor编辑”按钮。

Clicking on it will launch the Elementor user interface where you can edit your page using Elementor’s drag and drop page builder.

单击它会启动Elementor用户界面，您可以在其中使用Elementor的拖放页面构建器来编辑页面。

Now you can add sections and build your page from scratch, or you can add a template.

现在，您可以添加部分并从头开始构建页面，也可以添加模板。

Templates are a faster way to quickly get you started. Elementor comes with several professionally designed templates that you can customize as much as you want.

模板是快速入门的更快方法。 Elementor附带了几个专业设计的模板，您可以根据需要进行自定义。

Let’s start with a template by clicking on the ‘Add Template’ button.

让我们从单击“添加模板”按钮开始。

This will bring up a popup where you will be able to see different templates available. You should look for a template that is similar to what you have in mind for your page layout.

这将弹出一个弹出窗口，您将可以在其中看到不同的模板。 您应该寻找一个与页面布局相似的模板。

Now click to select the template you like and then click on the ‘Insert’ button to add it to your page.

现在单击以选择所需的模板，然后单击“插入”按钮以将其添加到页面。

Elementor will now load the template for you.

Elementor现在将为您加载模板。

You can now start editing the template to match your needs. Simply point and click on any element to select it, and Elementor will show you its settings in the left column.

现在，您可以开始编辑模板以满足您的需求。 只需指向并单击任何元素以将其选中，然后Elementor就会在左栏中显示其设置。

Now let’s talk about how Elementor layouts work.

现在让我们讨论一下Elementor布局是如何工作的。

Elementor layouts are built using sections, columns, and widgets. Sections are like rows or blocks that you place on your page.

Elementor布局是使用节，列和小部件构建的。 节就像放在页面上的行或块。

Each section can have multiple columns and each section and column can have its own styles, colors, content, etc.

每个部分可以具有多个列，每个部分和列可以具有自己的样式，颜色，内容等。

You can add anything in your columns and sections using Elementor widgets.

您可以使用Elementor小部件在列和部分中添加任何内容。

These widgets are different kind of content blocks that you can place in your Elementor sections.

这些小部件是您可以放置​​在Elementor部分中的另一种内容块。

Simply select a widget and drop it into your section or column. There is an extensive set of widgets available that cover all popular web design elements that you can think of.

只需选择一个小部件并将其放入您的部分或列中。 有大量的小部件可用，涵盖了您可以想到的所有流行的Web设计元素。

You can add images, text, headings, image galleries, videos, maps, icons, testimonials, slider, carousels, and so much more.

您可以添加图像，文本，标题， 图像库 ，视频，地图，图标，推荐书，滑块，轮播等。

You can also add default WordPress widgets and even the widgets created by other WordPress plugins on your site.

您还可以添加默认的WordPress小部件，甚至添加站点上其他WordPress插件创建的小部件。

Once you are done editing, you can click on the Save button to save your changes.

完成编辑后，可以单击“保存”按钮保存更改。

Note: Saving a layout will not publish the page on your WordPress site. It will just save your page layout.

注意：保存布局不会在WordPress网站上发布页面。 它只会保存您的页面布局。

You can now preview your page or go to WordPress dashboard.

现在，您可以预览页面或转到WordPress仪表板。

This will bring you back to the WordPress post editor. You can now save your WordPress page or publish it on your website.

这将带您回到WordPress帖子编辑器。 您现在可以保存WordPress页面或将其发布在您的网站上。

在Elementor中创建自己的模板 (Creating Your Own Templates in Elementor)

Elementor allows you to save your own custom layouts as templates. This way you can reuse your own templates to create new pages even faster in the future.

Elementor允许您将自己的自定义布局另存为模板。 这样，您可以重复使用自己的模板来在将来更快地创建新页面。

Simply edit the page you would like to save as a template with Elementor.

只需使用Elementor编辑您要另存为模板的页面即可。

In the Elementor builder interface, click on the folder icon next to the save button and then select ‘Save template’.

在Elementor构建器界面中，单击保存按钮旁边的文件夹图标，然后选择“保存模板”。

This will bring up a popup where you need to provide a name for your template and click on the save button.

这将弹出一个弹出窗口，您需要在其中提供模板名称，然后单击保存按钮。

Next time you are creating a custom page layout, you would be able to select it from the ‘My Templates’ tab.

下次创建自定义页面布局时，您可以从“我的模板”标签中选择它。

You can also export this template and use it on other WordPress sites using Elementor.

您还可以导出此模板，并使用Elementor在其他WordPress网站上使用它。

You will need to visit Elementor » Library page to see your saved templates. Take your mouse over to your template name and then click on ‘Export template’ link.

您将需要访问Elementor»库页面来查看已保存的模板。 将鼠标移到模板名称上，然后单击“导出模板”链接。

After downloading your template file you can go to the library page on another WordPress site using Elementor and then import your template.

下载完模板文件后，您可以使用Elementor转到另一个WordPress网站上的库页面，然后导入模板。

That’s all for now.

目前为止就这样了。

We hope this article helped you learn how to create custom WordPress layouts with Elementor. You may also want to see our step by step guide on how to speed up WordPress and boost performance.

我们希望本文能帮助您学习如何使用Elementor创建自定义WordPress布局。 您可能还希望查看有关如何加快WordPress并提高性能的分步指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner/plugins/how-to-create-custom-wordpress-layouts-with-elementor/

wordpress 自定义