Articles Web Development

How to Display SVG Image Files on Elementor-built Pages – Guidance

No ratings yet.

Today, you will learn how to add SVG image files on Elementor-built pages with the help of Inline SVG widget.

Please, note that this widget is a part of JetElements plugin, so first of all, you need to install this powerful Elementor add-on. After the process is completed, just open your WordPress Elementor website and proceed with the step-by-step instructions below.

  1. Type in “SVG” in the search line on the Elements Panel.
  2. After that, grab the widget and drop it on a new section on the right.
  3. Then you will see simple content settings on the left.
    svg content
  4. Click on the empty space to add your SVG file - just upload it from the opened Insert Media library.
  5. To make it clickable, add the URL in the field under SVG.
  6. Then go to the Style section. Here you can enable using custom width and scale the image.
    svg style section
  7. If you toggle the Use Aspect Ratio option to “no” you’ll be able to change the width and the height manually.
  8. And if you want to retain the original aspect ratio of the SVG file, simply toggle this option to “yes”. In this case, you will move this image only up and down and the original aspect ratio still stays the same. Only the size of the entire image will be changed.
  9. The next option will allow you to use custom colors for your image. Please note that it depends on the type of SVG file you have and the number of colors.
    svg hover color
  10. However, in the screenshot above, you can see that you can set one color to the entire SVG image.
  11. If you’ve got a logo that has only one color this option will bring a really interesting effect to your page.
  12. The other option you’ll see is Remove Inline CSS. It allows deleting inline styles in the loaded SVG.
  13. Also, in this block of settings you can set the alignment: left, center, or right.

Elementor Page Builder is quite a universal tool. With its help, you can do literally everything from creating animation and blog posts to even displaying SVG image files. If you are a real fan of Elementor content editor, then this offer will impress you. Recently, TemplateMonster has launched a brand new subscription service called ONE. This is the first service including a full product range from plugins and extensions to different kind of templates and graphics.

Pay $19 per month and get the entire set of elements for website building at a single pack. An added bonus: you are not limited to use them for as many projects as you need. Besides, we are glad to offer a 5% discount on subscription for all MonsterPost readers. Just apply promo code BecomeThe1 while proceeding to checkout.

Final Word

Congratulations! You’ve added an SVG image to your page with the help of JetElements plugin. If you have questions about any other widgets from this plugin, just write them down below in the comments.

elementor wordpress plugins

Top 5 Elementor Themes

Template NameTheme ProviderTemplate CategoryPrice
BuildWall - Construction Company Multipurpose WordPress ThemeZEMEZjetConstruction Company Templates$69
Chantalle - Multipurpose Woman Fashion Elementor WordPress ThemeZEMEZjetFashion Templates$75
BeClinic - Multipurpose Medical WordPress ThemeZEMEZjetPsychologist Templates$75
JohnnyGo - Multipurpose Home Services WordPress ThemeZEMEZjetHome Remodeling Templates$75
24.Storycle - Multipurpose News Portal Elementor WordPress ThemeZEMEZNews Portal Templates$75

Read Also

Elementor From A to Z: Sheer Selection Of “How To” Tutorials

JET Plugins for WordPress Elementor Builder [Review]

How To Add A Background Video To Your Pages With Elementor

Top 50 WordPress Elementor Business Themes

Leave a Reply

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