WordPress SelfVersion 6.5Since then, there is no need to rely on third-party plugins to create lightbox effects. This feature has been integrated into the WordPress core, especially for those using the WordPress block editor (Gutenberg). As a result, adding images and enabling lightbox effects for them is now easier and more efficient.

In this tutorial, we'll dive into how to create a WordPress lightbox for your website without a plugin.

What is a WordPress lightbox?

A light box is aPop-up image display method, when the user clicks on an image in the page, the image will be displayed in a larger size on the screen, while the background of the page will be darkened to emphasize the image. This effect is often used for image display or product display, providing a better user experience.

Scope of application

This tutorial is only for users using the WordPress block editor. If using the classic editor, it is recommended to switch to the block editor first to experience the latest features of WordPress.

Step 1: Create or Edit a Post/Page

After a successful WordPress login, go to the WordPress dashboard. Next, you can choose to create a newwritingsor edit an existing article. Depending on your needs, you can choose one of the following paths:

• To create a new article, navigate towritings > Add new articleThe

• To edit an existing post or page, navigate to thewritings > All ArticlesFind the article you want to edit and click the "Edit" button.
• If you want to create or editweb pagePlease selectweb pagemenu, which operates similarly to creating or editing an article.

Why add a lightbox to a post or page?

The lightbox effect is particularly suitable for displaying pictures, product images or galleries. With lightboxes, users can click on thumbnails to view larger images without having to jump to other pages, thus enhancing the user's browsing experience.

Step 3: Add images using the block editor

Next add images to the page. The block editor provides a very simple solution for this.

1. Select the location in the editor where you want to insert the image.
2. key in/imageThe "Image" block will pop up immediately.

3. Select "imagery"block, the system will prompt you to select an image.

Existing images can be selected from the media library or new images can be uploaded.

Choosing the right picture

Make sure you choose the image sizeSuitable for light boxesDisplay. Images that are too large may affect page loading speed, while images that are too small may lose clarity when enlarged in the lightbox.

Step 4: Add lightbox effect to the image

This step is the heart of creating a WordPress lightbox and can be done without a plugin.

1. click (using a mouse or other pointing device)Just addedto the article or page in thephotographThe
2. In the toolbar above the image, you will see a link icon.

3. Clicking on that link icon will bring up a drop down menu.
4. Select "Expand when clicked"Options.

At this point, your image will be configured to expand when clicked through the lightbox effect. The lightbox will automatically provide a zoomed-in view of the image on the front-end, allowing users to view a larger image without having to jump to another page when clicking on the image.

Tip: If you can't find the "Expand on click" option

Make sure you are using WordPress 6.5 or higher. If you are usinglower versionIt may be necessary to pass theplug-in (software component)to implement the lightbox feature, or update your WordPress version to take advantage of this new feature.

Step 5: Preview and publish the page

After configuring the lightbox effect for the image, preview the page first to make sure everything displays properly.

1. Click the "Preview" button in the upper right corner of the page and select "Preview New Tab".

2. On the preview page, click on the image you added to check if the lightbox effect is working properly.

If all is well, there is the option ofpostpage or article. If further editing is required, you can selectSaving drafts, continue editing later.

Optimization and Cautions

1. Image Optimization

While the lightbox feature comes in handy, make sure that the images you upload are optimized so that they don't affect your site's performance. Excessively large image files can lead to slow loading pages, which can affect user experience and SEO performance. This can be done using tools such asSmushto compress and optimize the image size.

2. Responsive design

Lightbox functionality is equally important on mobile devices, and the default lightbox settings in WordPress are responsive to ensure that images are displayed well on different screen sizes. It is recommended to test on mobile devices before publishing to ensure that the lightbox effect is equally smooth on mobile.

3. Compatibility testing

While the built-in lightbox feature of WordPress is powerful, it may conflict with some custom features if a custom theme or plugin is used. Before publishing, it is recommended to check compatibility across devices and browsers.

summarize

Use WordPress 6.5 and above byWP self-taught website builderThe lightbox effect can be easily created without plug-ins, providing a better user experience for images. This not only simplifies the operation process, but also reduces the dependence on third-party plug-ins and reduces the complexity of website maintenance.