word中两张图片并排放置_如何轻松地将图像并排放置在WordPress中

word中两张图片并排放置

Do you want to put images side by side in your WordPress content?

是否要在WordPress内容中并排放置图像?

Often beginners struggle to find how to put two pictures next to each other in their WordPress posts and pages.

通常,初学者很难在WordPress帖子和页面中找到如何将两张图片彼此相邻放置的方法。

In this step by step guide, we will show how to easily put images side by side in WordPress (without writing any code).

在本分步指南中,我们将展示如何轻松在WordPress中并排放置图像(无需编写任何代码)。

Putting images side by side in WordPress

使用块编辑器并排放置图像 (Using the Block Editor to Put Images Side by Side)

The easiest way to get your images side by side is to use the WordPress block editor.

并排获取图像的最简单方法是使用WordPress块编辑器

The block editor has a special ‘Gallery’ block that lets you display images in rows and columns.

块编辑器具有特殊的“图库”块,可让您以行和列显示图像。

First, you’ll need to create a new post / page or edit an existing one to open the content editor. Once inside, click the (+) symbol to add a new block.

首先,您需要创建一个新的帖子/页面或编辑现有的帖子/页面以打开内容编辑器。 进入内部后,单击(+)符号以添加一个新块。

Creating a post and adding a block to it

Next, you need to select the Gallery block and add it to your page. You can find the Gallery block in the Common Blocks section, or you can use the search bar to quickly locate it.

接下来,您需要选择Gallery块并将其添加到页面中。 您可以在“公共块”部分中找到“画廊”块,也可以使用搜索栏快速找到它。

Selecting the Gallery block to add to your post

Now, you can easily add images to your gallery block, by dragging them into it or by using the Upload button. You can also select images from your WordPress media library.

现在,您可以通过将图像拖到图库中或使用“上载”按钮轻松地将其添加到图库中。 您还可以从WordPress 媒体库中选择图像。

As you can see, we’ve added 2 images to our Gallery block. WordPress has automatically positioned them side by side.

如您所见,我们已将2张图像添加到我们的Gallery块中。 WordPress自动将它们并排放置。

Two images in the gallery (butterflies and apple)

What if you want 3 images side by side? Here’s what happens if we add a third image. WordPress simply resizes the others to fit all 3 side by side:

如果要并排放置3张图像怎么办? 如果添加第三张图片,将会发生以下情况。 WordPress只是简单地调整了其他三个文件的大小以使其并排放置:

Three images in the gallery (butterflies, apple, and blue flowers)

If you upload a fourth image, then WordPress will place it beneath the others.

如果您上传第四张图片,则WordPress会将其放置在其他图片的下方。

Four images in the gallery (butterflies, apple, blue flowers, and robin)

You can change the number of images WordPress should include side by side in a single column.

您可以更改WordPress应在单个列中并排包含的图像数量。

First, click on the Gallery block, if it’s not already selected. On the right hand side of the screen, you’ll see the Gallery’s block settings.

首先,如果没有选择图库,请单击它。 在屏幕的右侧,您将看到图库的图块设置。

Changing the settings for the gallery block

You can adjust the number of columns here to any number between 1 and 4. For instance, if you want two images side by side, and two more beneath them, you can set the Columns to 2.

您可以将此处的列数调整为1到4之间的任何数字。例如,如果要并排放置两幅图像,并在其下方放置另外两幅图像,可以将“列数”设置为2。

Setting the gallery to have 2 columns rather than 3

It’s as simple as that!

就这么简单!

If you want to change where an image is positioned in your gallery, just click on it. You’ll then see arrows that you can use to move it forward or backward in the gallery.

如果要更改图像在图库中的放置位置,只需单击它。 然后,您会看到箭头,可用于在图库中向前或向后移动箭头。

Moving an image forward or backward in the gallery

Here’s a finished gallery demo from our sample post:

这是来自我们的示例帖子的成品画廊演示:

The 2 column gallery in a live post

使用插件在WordPress中并排放置图像 (Using a Plugin to Put Images Side by Side in WordPress)

If you’re using the old classic WordPress editor, or if you want to create more complex galleries than the default Gallery block, then you will need a WordPress gallery plugin.

如果您正在使用旧的经典WordPress编辑器 ,或者要创建比默认Gallery块更复杂的画廊,则需要WordPress画廊插件。

We recommend using Envira Gallery because it is the best WordPress gallery plugin

我们建议使用Envira Gallery,因为它是最好的WordPress Gallery插件

For the sake of this tutorial, we will be using the free version of Envira, but you may want to get the Pro version to get powerful features like albums, image slideshows, etc.

为了本教程的缘故,我们将使用Envira的免费版本,但您可能想要获得Pro版本才能获得强大的功能,例如相册,图像幻灯片等。

First, you’ll need to install and activate the Envira Gallery plugin. If you’re not sure how, just check out our step by step guide on how to install a WordPress plugin.

首先,您需要安装并激活Envira Gallery插件。 如果您不确定如何安装,请查看有关如何安装WordPress插件的分步指南。

Next, you can go to Envira Gallery » Add New in your WordPress dashboard.

接下来,您可以转到WordPress仪表板中的Envira Gallery»添加新项

Add a new gallery in Envira Gallery

You’ll need to give your gallery a title. We’ve called ours ‘Example Gallery’. Next, upload the images you want to use.

您需要给画廊一个标题。 我们将其称为“示例图库”。 接下来,上传您要使用的图像。

You can either drag and drop them into the upload box, or you can use one of the ‘Select Files’ buttons.

您可以将它们拖放到上传框中,也可以使用“选择文件”按钮之一。

Give your new gallery a name

Here’s how the images look once they’ve been uploaded:

图片上传后的外观如下:

Images uploaded to Envira Gallery

You may want to give your images a title and alt text here. The title appears below your image when the user brings their mouse cursor over it.

您可能要在此处为​​图像添加标题和替代文本。 当用户将鼠标光标移到图像上方时,标题将显示在图像下方。

The title also appears below the image in the lightbox popup mode, which we’ll take a look at in a moment.

在灯箱弹出模式下,标题也会显示在图片下方,我们稍后将对其进行介绍。

To edit the title and alt text, click the Edit button on an image in the gallery.

要编辑标题和替代文本 ,请在图库中的图像上单击“编辑”按钮。

Click the Edit button to edit an image in your gallery

You can then change the title for your image. It defaults to the image’s filename.

然后,您可以更改图像的标题。 它默认为图像的文件名。

You should also enter alt text, as this is helpful for your WordPress site’s SEO. If your title describes the image, then you can simply repeat it for the alt text.

您还应该输入替代文本,因为这对WordPress网站的SEO很有帮助。 如果标题描述了图像,则只需将其替换为替代文本即可。

Setting the title and the alt text for the image

Once you’re done, please make sure you click the ‘Save Metadata’ button before clicking the X to close the window.

完成后,请确保在单击X关闭窗口之前,单击“保存元数据”按钮。

Click the Save Metadata button to save your changes

To add your gallery on the site, you’ll first need to publish it. Go ahead and click the Publish button on the right hand side of the screen.

要在网站上添加图库,您首先需要发布它。 继续,然后单击屏幕右侧的“发布”按钮。

Click the Publish button to publish your gallery, so you can use it on your site

Now, edit a post or page, or create a new one. Inside the content editor, click (+) to add a block to your post, and select the Envira Gallery block. You can find it in the Common Blocks section, or you can use the search bar.

现在,编辑一个帖子或页面,或创建一个新的。 在内容编辑器中 ,单击(+)在您的帖子中添加一个图块,然后选择Envira Gallery图块。 您可以在“通用块”部分中找到它,也可以使用搜索栏。

Add the Envira Gallery block to your post or page

You’ll then need to click on the dropdown to select your gallery.

然后,您需要单击下拉列表以选择您的画廊。

Select your gallery from the Envira Gallery block

You should see your gallery in place in your post.

您应该在自己的帖子中看到自己的画廊。

You can adjust the settings on the right-hand side of the screen. For instance, you might want to change the column layout, or the size of the margin between images.

您可以在屏幕的右侧调整设置。 例如,您可能要更改列布局或图像之间的边距大小。

The Envira Gallery shown in the post editor

We decided to set our gallery to always display in two columns. We also added a wider margin between the images.

我们决定将画廊设置为始终显示在两列中。 我们还在图像之间添加了更大的边距。

The user can click on an image to see the full-sized version in a lightbox. They can scroll through the images using the lightbox, too.

用户可以单击图像在灯箱中查看完整尺寸的版本。 他们也可以使用灯箱滚动浏览图像。

Viewing an image from the Envira gallery in a lightbox

If you want to add more images to your gallery, then you can go back to it by visiting Envira Gallery » All Galleries in your WordPress dashboard. Simply click on the name of your gallery to edit it.

如果要向图库中添加更多图像,则可以通过访问WordPress仪表板中的Envira Gallery»所有画廊来返回到它。 只需单击您的画廊名称即可对其进行编辑。

Editing a gallery you've already created in Envira Gallery

Any changes you make to your gallery will appear wherever you’ve placed it in your posts, pages, or sidebars. You don’t need to add it to these again.

您对图库所做的任何更改都会显示在您放置在其帖子,页面或侧边栏中的任何位置。 您无需再次将其添加到其中。

Tip: If you’re using the classic editor instead of the block editor, you can still use Envira Gallery.

提示:如果您使用的是经典编辑器而不是块编辑器 ,则仍然可以使用Envira Gallery。

You’ll see an ‘Add Gallery’ button above the classic editor that you can use to add an existing gallery to your post.

您会在经典编辑器上方看到一个“添加画廊”按钮,可用于将现有画廊添加到帖子中。

Adding an Envira gallery in the classic editor

You can also create a new gallery by clicking the ‘Add Media’ button then ‘Create Gallery’.

您还可以通过单击“添加媒体”按钮,然后单击“创建画廊”来创建新画廊。

Creating a new gallery using the Media Library in the Classic Editor

We hope this tutorial helped you learn how to put images side by side in WordPress. You might also want to go through our guide on how to align images in the WordPress block editor, and our comprehensive list of the must have WordPress plugins (expert pick).

我们希望本教程可以帮助您学习如何在WordPress中并排放置图像。 您可能还需要阅读有关如何在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视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/beginners-guide/how-to-put-images-side-by-side-in-wordpress/

word中两张图片并排放置

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值