WPMet Site Logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
WPMet Site Logo

How to Display Images in WordPress with Elementor: The Creative Ways

AbeerHAbeerH Updated on: March 15, 2023 ElementsKit Tutorials WordPress 6 Min Read
how to display images in WordPress

It’s no secret that images are an important component of any website. It improves the visual appeal of the website as well as engagement. In WordPress, inserting images into your posts and pages is quite easy. 

One way of showing images is by simply adding media in the Classic Editor. Another way is using the Image blocks in the Gutenberg editor. In both cases, styles are predefined in the theme.

However, Elementor gives flexibility in displaying images in WordPress. It offers a variety of creative ways to display images on your website. More importantly, each image element is individually customizable.

Using elements like Image Boxes, Image Galleries, Image Masking
you can create stunning-looking image sections.

With a little creativity and attention to detail, you can make your website stand out from the crowd using those elements.

This article will guide you on how to display images in WordPress with Elementor to design an intuitive and user-friendly interface for displaying images on your website.

Contents hide
Why images are important for your web content
How to add images in WordPress (Basic method)
How to display images in WordPress using Elementor (Advanced methods)
Method 1: Show pictures in a stylish Image Box
Method 2: Display two images with swap animations
Method 3: Give unique shapes to the website images with image masking
Method 4: Showcase images in a gallery
Wrap up

Why images are important for your web content

When we see an image, the human brain automatically begins to analyze and categorize the visual information it receives, without a conscious effort. This process makes the content easier to remember and recall.

Besides, pictures can make your content more engaging and catchy for visitors by enhancing the visual appeal of a website. 

Here are a few reasons why images are important for web content:

  • Captures attention easily: Images can be used to grab a visitor’s attention and draw them into your content. This is especially important for websites that aim to sell products or services.
  • Convey information quickly: Sometimes, an image can communicate information faster and more effectively than text. For example, an infographic can convey complex information simply.
  • Breaks the monotony: Large blocks of text can be tedious and monotonous to read. Images can help break up the long text and bring back attention to your content.
  • Leaves a long-lasting mark on memory: The human brain can process visual information much faster than text or verbal information and can retain it for a long-term duration.
  • Makes your content more shareable: Social media platforms like Facebook and Instagram are highly visual, and photos are often more shareable than text alone. By including high-quality images on your website, you can make it more likely that visitors will share your content on social media.
  • Brand awareness: Images can help enhance your branding by featuring your logo or other visual elements associated with your brand.

How to add images in WordPress (Basic method)

The very basic way of showing images on WordPress is by adding an image to the media library and displaying it with default styles.

To add an image to the WordPress media library:

Log in to your WordPress, go to Media > Add New, and select the image from your computer to upload to the media library.

Add image to WordPress media library

Now, displaying images on WordPress depends on which default editor you are using.

Gutenberg Editor:

In the WordPress default Gutenberg aka block editor, you can show images using image blocks. For that, open the editor and add the image block in the desired position for displaying the image. Then upload or select an image from the media library.

How to display images in WordPress Gutenberg editor

Classic Editor:

If you are using an old classic editor, open a page or post on the editor, then place the mouse cursor on the post/page, where you want to display the image. After that click on the Add Media button and select an image from the media library.

Show image in WordPress classic editor

How to display images in WordPress using Elementor (Advanced methods)

Now if you want more advanced ways to display visuals, you can switch to Elementor page builder. With Elementor you can use the image widgets to showcase website images creatively. 

Taking things to next level, the ElementsKit Elementor addon comes with a bunch of widgets that can let you stylishly display images with the most customizable features. ElementsKit comes with widgets like Elementor Image Box, Image Gallery, Image Swap, and so on. These widgets give you diverse options to exhibit pictures stylishly. 

Following is a demonstration of how you can utilize those widgets to display images on WordPress and make your site more lively.

Install ElementsKit

To use the advanced image features, you need to install the ElementsKit Lite and ElementsKit Pro plugins on your WordPress site.

Here is the documentation to install the ElementsKit plugins

After installing the plugins, you can move forward with the widgets to display images on WordPress.

Method 1: Show pictures in a stylish Image Box

Using the ElementsKit Image Box widget, you can highlight a section with a combination of an image and text. It lets you show an image with text like a heading and a description. These styles are often used to highlight a flagship product, service, or feature.

To use the feature: enable the Image Box widget from ElementsKit > Widget

Here is how to use the ElementsKit Image Box widget for Elementor:

Image

In the image section, you can customize the image and its appearance.

  1. Choose Image: Select an image from the media library or upload one.
  2. Image Size: Set the size of the image.
  3. Content Area: You can choose the style of the content area from the given options.
  4. Equal Height: Enable or disable the equal height for the image and content area.
  5. Enable Link: You can use the image as an anchor section by enabling the link. When enabled add the link to the image.
Customize image in Elementor image box

Body

In the body section, you can add all the text to the Elementor image box. This includes a heading, description, title HTML tag, and text alignment.

  1. Title: Add the heading text in this field.
  2. Title HTML Tag: Select which HTML tag you want for the heading (H1, H2, H3, div, span, paragraph, etc.)
  3. Description: In this field add a short description of the content.
  4. Alignment: Set the text alignment for the image, heading, description, and button.
Customize content in Elementor image box

Button

You have the option to add a CTA button on the Elementor image box. For that,

  1. Enable Button: To add a button on the image box, enable this option.
  2. Label: Add a button label (text) that indicates the purpose of the CTA.
  3. URL: Enter the page link that you want to redirect the visitor once they click.
  4. Add Icon: If you want to show an icon with the button label, enable this feature.
  5. Icon: Choose an icon from the Elementor icon library.
  6. Icon Position: Select whether the icon will be before or after the button text.
Customize CTA button in Elementor image box

Next up, under the style tab, you get to customize the appearance of the Elementor image box including the colors, background, typography, and so on.

In the Classic Curves section, you can adjust the width and margin of the content area. Then style the image by changing the padding and opacity. 

Besides, you can customize the heading and description text appearance by changing color, typography, background color, and so on. Furthermore, tailor button styles and its icon with their attributes.

Watch the video to get more detailed knowledge on the ElementsKit Image Box widget.

Explore Image Box Styles

Method 2: Display two images with swap animations

Image swap is a stylish way to show two alternative images in one place that swap when visitors hover or click on the image. The ElementsKit Image Swap widget comes with a couple of dozens of stunning effects that make your website even more visually appealing.

You can use this feature such as using the first image as a cover image that grabs the attention and the second image to provide the necessary information.

To use the feature: enable the Image Swap widget from ElementsKit > Widget

Here is how to use the ElementsKit Image Swap widget for Elementor:

How to customize Elementor image swap widget
  1. Front Image: This is the image that appears by default when the page loads on the web browser.
  2. Back Image: This is the image that appears when the action is made i.e. a visitor hovers or clicks on the image.
  3. Image Size: Set the image size for both of the images.
  4. Swap Style: You have 21 different swap effects available with ElementsKit Image Swap widget, which can help you make your web design more appealing to visitors.
Choose swap effect in Elementor image swap widget
  1. Tigger: Here you can choose between Hover or Click action to trigger the swap images.
  2. Indicators: This works as a navigator, that indicates which image is on the show and which one is the background.
  3. Link: You can link up the images to a page if you want.

In the style tab, you can adjust the image height and duration of the swap animation duration. And if you enable the indicator, you can change their position and customize their size and colors.

Explore Image Swap Styles

Method 3: Give unique shapes to the website images with image masking

This is a unique way to make your website lively with uniquely shaped images. The image masking features transform the traditionally shaped images into more engaging ones. In WordPress, masking is quite easy with Elementor.

The ElementsKit for Elementor comes with a masking module for images. The module is available for any elements in Elementor that involve an image. In the Elementor editor, enable the ElementsKit Masking and select a shape from the preloaded ones. You can also add a custom shape to the images.

Elementor image masking widget

Method 4: Showcase images in a gallery

Elementor comes with a great way to showcase multiple images in an elegant gallery. The Basic Gallery widget of Elemntor works with a traditional approach where you can add images, set the image size, and customize basics like spacing and borders of the image.

However, the ElementsKit Image Gallery widget comes with more flexible options. With the widget, you can customize the layout with descriptions, add filters on the gallery, and individually every aspect of the thumbnail, overly, image, and filters.

Learn more about the Image Gallery widget and how it can enhance your website design from our blog.

Elementor image gallery widget ElementsKit

Wrap up

Overall, Elementor comes with several ways to display images in WordPress. To get the most out of Elementor’s capabilities, ElementsKit can be a great addition.

ElementsKit has diverse ways and styles: Image box to show an image with a heading and description; Image Swap to display two images alternatively; Also, there are Image Gallery and Image Masking widgets to give you more options.

Each of these elements offers unique features and customization options, allowing you to create engaging and visually appealing content for your website.

If you find this useful, there are more for you with ElementsKit. The Elementor addon comes with dozens more elements that can help you create and design a website with the highest number of features and optionalities.

Get ElementsKit Pro
  • Share :

How to Add Pinterest Feed to a WordPress Website

Previous post

What’s New in WordPress 6.2: 11 Major Features and Beyond!

Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Subscribed Today!

WPMet Site Logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.

Company

About us
Contact us
Support
Blog
Collaborate
Documentation

Resources

Affiliates
Affiliate Area
Privacy Policy
Terms & Conditions
Refund Policy
Login/Register

Our Products

Elements Kit
ShopEngine
GetGenie Ai
Metform
WP Social
Wp Ultimate Review
Wp Fundraising

Follow Us

Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT