How to use SVG images with WordPress & Elementor | Paul Charlton | Skillshare

How to use SVG images with WordPress & Elementor

Paul Charlton, Designer & Trainer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (25m)
    • 1. Class Introduction

      1:51
    • 2. Installing the SVG Plugin

      0:48
    • 3. Creating Our Hero Image

      7:18
    • 4. Creative Borders with Elementor

      9:51
    • 5. Using SVG Images as a Website Logo

      5:00
    • 6. Class Summary

      0:40

About This Class

Learn how to quickly create faster loading websites by using the power and flexibility of SVG (Scalable Vector Graphics) with Elementor and WordPress.

In this tutorial, I'll take you through the reasons to use SVG images, how to get WordPress ready to start working with SVG images and how to take any vector format and create your own SVG files from both Adobe illustrator and Affinity Designer.

Take advantage of the incredible file size savings on offer and create truly scalable images that look amazing on ANY screen.

CLASS COVERS:

  • What are SVG images?
  • The benefits & limitations of using SVG images
  • Security implications
  • Optimising SVG images
  • Create scalable hero images and headers for your website
  • SVG website logo
  • Creative borders in Elementor with SVG files.

Transcripts

1. Class Introduction: when it comes to building a website. One of the areas that can take a lot of time and effort is optimizing the images to get that fine balance between good quality on fast downloading time. Well, today we're gonna be taken looking SPG images or scalable vector graphics. This is a way if you want to create graphics or dello graphics used on your website, and then you could scale them to any size with us. Tiny, massive, whatever you want. No, also quality, no increase in file size. So the interested joined me at the tickets for the whole process of using these inside elemental before we even start working with SPG files. There's a couple of things I want to take you through the first and the most important this security. You wouldn't normally think of security issues when it comes down to dinner with graphics. So you put the work in PNG files, get files, and so on. Well, you don't really have a security issue with those, but SPG files work slightly differently without going into the technical aspect of how they were. It's just worth bearing in mind if you put these practices into place before you start working with them, you got peace of mind knowing that you should have no real issues. So the first thing we're gonna do is install a plug in on that plug in does two things. It makes wordpress ableto work with SPG files. It will also you're likely to see the inside the media labor, which makes working with them considerably easier, which is the first date. The second thing is it'll sanitize those images. I want to be my sanitized. Well, let's just say, for example, you downloaded an SPG far from somewhere you didn't know about. Their could be malicious code inside that particular image. But what this plug in will do is it will get rid of all of that. And it should then allow you to upload and work with SPG files in a now acknowledge that knowing that everything is nice and clean and ready to work with, Let's take a look at installing that plug in, first of all and set in the environment up for working with SPG files, then we'll move on to start actually working with them. 2. Installing the SVG Plugin: so we need to do. We're going to put the plug in section with a search for W P S V. G. Let that go through when you're gonna find this a couple of options available. The one we're going to use this safe SPG. Now this is completely free and it doesn't basic things like sanitize allow you to upload it to WordPress itself. There is a pro version available, which adds some additional features in there. And if you want to check that out, you can do and see if there's things in there you need. But I only recommend at this point in time just using the free version. It just opens up what you needed to do. As you can see, there's over 100,000 active installs on. It gets a five out of five star rating, so it's pretty cool. So that's install that. Once that's installed, we then should be good to go. Finally, just activate it, and that will give us the ability to start working with SPG files inside of a copy of WordPress 3. Creating Our Hero Image: So one of the areas when it comes to working with websites that has the biggest sort of impact is the hero image in your website. With that impact comes size on slowing down your website. But with SPG files, we can kind of counter act that. So if you happy working with a vector format, which is kind of very in keeping with the way things are in 2019 you can use that to your values by having small file sizes also fully scalable. So you end up with a faster loading website. Nice hero image that has visual impact. Without slowing down your website, we're gonna jump over into WordPress within a downloaded image. We're gonna take a look at how we could start using that how we can set in depth and how we can do with that whole scaling side of things. I'll show you how good this actually looks. So first appearance. This may look like any other vector graphic. However, we've got a couple more things going on. The first meets the eye and this section of the video. I want to show you how you can use this. The reason why I used This particular technique is because it gives you a lot more flexibility. So without further ado, let's take a look what we're talking about. Over this headed image, I grabbed an image off in photo elements. There are tons of resources both paid for completely free that you can grab these kinds of illustrations. Or if you come from a working with him like illustrator, you could create your own. So I've already gone ahead and download this on when downloaded. It comes in 34 months. AI, which is illustrator. It comes in PSD richest photo shop and it comes in E p s, which is a sort of standardize sort of for four months. However, it doesn't come in SPG. But don't worry about that as well, which is effective for mine, and we can open up in some kind of actor software. We can convert it to an SPG if needed. So let me just show you what I'm talking about. I've got illustrator. As you can see, this is the image that we're working with now. What I want to do is I want to remove this background because I want to be other create something of my own. So I can easily come into the layer section. If we come over to window and I come down two layers I can scroll through and I could find the background school right away. Don't see there's our backward image. So what I've got now is just the image with no background on there. So all I need to do with whatever software I'm using has come to file on. We're gonna come down, for example, into export. As I didn't say there, we can choose where we want to save this and we can choose what final form I want to save it in. So we want to make sure SPG is the chosen format and we're gonna say Export said You want to replace this? Well, I will get a copy on my desktop, so that's perfectly fine. So I'll say Yes, well, then get some information about the SPG format. Now. With this, there's a couple of things to take note off. You can see we've got styling is internal CSS, but we can also choose from in line style. Have room about to the beginning of this video. I said that spg images are not like other graphic images. They actually built up of various different CSS elements. And this is where you could have that security problem. So with that in effect will leave this, as is because everything is gonna work perfectly fine. We could save the graphic we want to, or we could actually use show coat on inside there. You'll see there's all of the CSS code, all the relevant, different, bitter cold to create this image in a CSS former. So if you wanted to and you had a plug in that would allow you to use this, you could just simply drop in that code in there. We're gonna keep it really simple in this video, and we're gonna use just the SPG former going to say OK, well, then that saved on. We are done with illustrator or whatever software you want to use. So without stage done on, like you say, this is purely optional. If you wanted to skip over this section and just jump straight through the working with S P . G's were no in a position where we can start to work with these have no jumped over into the dashboard of WordPress, and we're ready to create our hero image for our home page. Let's come in on a new page in, Well, title this home. What's he done that we'll just hit publish to make sure that we saved those changes. Now, for this example, I'm using the hello theme, so there's a couple of things that you'll see on here. You may see different to your team, but don't worry about that. What I do is I go say and achieve the default template to Element or canvas for this example. So I've got nothing to distract you on the page date, and they will open up elemental to start working to open that up with Elemental Open, we're now ready to start creating our head of section or hero section. But to create a simple one roll one column section on. Once we're in there, we're gonna come up and we're gonna set this tohave no column gaps. We want no gaps on their whatsoever. So we've no got basics so we can do is very different ways we could insert the image for this example. We're gonna use the background over late for the style section you will see at the moment background overly isn't available to us. What we need to do under the back on section is just simply hit classic. That will open up so we can choose an image if we wanted to. However, we just want the black one overly for a moment. Gonna choose back on over late from there we're gonna choose normal and we're gonna click on classic. Once you've done that, we're gonna click to insert the image that we want. There's our xbg image. Select that image in ST Media and you see No, that just puts a copy of that in there and repeated all over the place. And it looks terrible. Don't worry, we can deal with that. First we want to do is set the position on this. We're gonna set to center center attachment. We gonna leave as default, repeat within a set to know, repeat on for size. We're gonna set that to contain that at the moment again, you'll still see that everything just looks a little bit on the tiny side. Don't worry. That's easy to deal with the Comeback Oto layout section and from there were going to say we want the height now We could set 50 screen and I would work perfectly find to give us a nice, full height section full wits section. But it doesn't necessarily work that well on Mobil's. The better way of doing it is set in the minimum height. And then we can choose VH for vertical height, and we can scroll that up to 100 you can see now we've got our images showing at 100% on screen based upon the actual view port that we're looking at. So looking pretty good however you can see is a little bit ghosted out, come back over back into a backward over late and was set our capacity to be one. So know what we've got is we've got that nice image on their fully scale to whatever safe working with with a transparent background. So whatever we want to properly beneath it, we could do that, and that's going to do next. We're gonna come back Oto background section And then they were gonna choose to put a Grady , and in you can choose radiant. From there, we're gonna choose our foreground color or top color what you're gonna set to a blue color bottom color, which we're gonna set to a paler blue color. So it gives us a nice sort of Grady in effect to make it look like the sky. So with that being said, you can see now that we've got that Grady and in the background and it works perfectly with our vector based SPG image, we want to put the cloud effect. And this is again where the benefit of this comes in. We can now start using shaped dividers so we could set that to be bottom on there and we can come down for this example. We're just going to use those particular clouds and you can see there's ever close. If you want to edit those, adjust the height and so on, we can do that. We could flip them if we want to. All the normal things you'd expect to be able to do with this particular effect. So you can see know that we've got this SPG image with a colored background, all the kinds of good things you wanted to do or customized. The beauty of this comes in where we change the resolution on here. So at the moment we're looking at what you'd expect to see on a desktop. However, come back into tablet. Everything scales perfectly. No loss of quality whatsoever. Kind of the mobile on again. Same thing again. Everything scales perfectly with no loss of quality. So we're gaining the benefit of the SPG images being scalable without losing hen and equality with no increase in final size or done inside elemental, pro and elemental. So pretty cool. I think you'll agree. 4. Creative Borders with Elementor: So now that we've seen how to use SPG images for our hero section of our website, we taken advantage of those small file sizes, scalability and so on. What we take a look at do some special effects using the same kind of things. We're gonna take some SVG images, and we're gonna use those to create a more interesting border effects using elemental. So let's take a look at how we do that right now. The next thing we're gonna take a look at is how we can create these customized borders using SVG images. Now, you could pretty create some of these just by using the Grady in the background, but it still kind of limits what you can do. You can get as creative as you want by using SPG images on While this is just using ingredient, you could use anything as complicated as you wanted to in the background. So let's take a look at how we use this one, so you can see we've got a most over effect. So it hovers off the drop shadow on there. And if we scroll down, we've got another kind of effect, which is in a different technique, which also animates in. So we've got some flexibility on how we can do it. So that issue the two methods. The 1st 1 this one we can see at the top. This is the slightly more complex method because it requires us to hand code some CSS, but it's also very flexible. Let's just jump by going to the dashboard and see how we can do this. I've gone ahead, jump back over to the dashboard and opened up the page, duplicated the left hand column into the right hand side, and we're now ready to take a look. So before I go any further, I just want to go over. How things are set up or you currently have is a single row column. We've added some parting at the top and bottom, and then we have a nested in a section with two columns inside there, and that's what we're working on. So this is important. We have that section inside that intersection without in place where no really go on. Start setting the styling to configure this right hand column. The first day I want to do is just give us a little bit more breathing space or another content, we will come up and select the column. Once we've done that will come over to the advanced section for the edit column, come into the parking area and we're gonna set not to be 50 pixels. That gives us the next one of breathing space away around. Now we're ready to start customizing the CSS for this effect. All we need to do is come over to the left hand column again and come down with CSS or the custom CSS section the bottom. In here. We could start writing out our own custom code, so the first thing we'll do is target this specific element. The inside elemental weaken do that very easy just by using selector. When you work with elemental, make sure you select the particular element that you want. Then you can use selective for CSS will open out. Our curly brackets will move to the next line and have a closed as that automatically for us. So, you know, targeted this particular right hand column section, and that's what we want to work with. The first thing we need to do is choose the border style and the nice thing where we're working with Elemental is you could see once we start typing things inside the CSS area, the editor will automatically start showing you a list of what it thinks you're going to type in So we can choose Board of Style for this example on. We're gonna set the border style to be solid. Now we have to use solid in this example because we can't use dotted or dashed to anything because the effect won't work. So just bear in mind if you try those, you're not gonna get the effect that you want. This is the first thing, and you can see if we look at the right hand side now, which started to get a border around our outside about particular column is the beginning. Next thing to do is come down and we're going to board a width secrecy again. We can easily come down and we can just go through until we get exactly what we want. All we can just continue typing on it, filter out to get anything that sort of matches what we're taping this border with. You said this to any value want largest ball or we're going to go with 15 pixels to start off with. You noticed that every time I do that, I always end every single line inside the CSS editor with a semi colon. Next up, we're gonna choose the border color. So gonna come down? We're gonna choose border color. Now we go set some valid in here. We don't want this to be a color. We wanted to be transpired. But we have to make sure we put a certain level of transparency to make sure that safari being a bro's. It has a bit of a technical issue with this at the end. So we have to have some level of transparency for this to work correctly. We're gonna do is we're gonna use RGB a open up your bracket and we're gonna put zero comma , zero comma, zero comma zero. I'm gonna put 0.1 when we finish that off close bracket. I was semi colon. No, don't worry. That we get in this little error, it's expecting one thing again. Something else? It still works perfectly fine. Next up, we're gonna put in the actual U R l to the image that we want to use our SVG image. That's very easy to do. We can come down. We do border dash image and then we can put in the u. R else will just type in the URL open or brackets. Put 22 sets of double speech marks on you. Concede automatic puts the close bracket of the end and, as always, we need to put in the semi colon. Now we're gonna come back. We're going to find the U R L to the image you want to work with in a moment. The final thing we need to do is just to come down and do border. Gonna do slice border in which life? Sorry, my mistake. And we're gonna put 15 in the on. We're gonna close that up with a semi colon. So we need to know the URL to get access to drop that in there to create our background. That's very easy to do it. We can either go into our dashboard on, go back into our media Lavery, and copy that I've already done that. So what I'm gonna do is I'm gonna pace that in there so we can see exactly what happens. We just paste that in. You see, once I dropped that in that we now get our border effect underneath with our SPG image. If you're ever unsure, how do you find the link to that particular image? Very easy to come back over and take a look at our media Lavery on will select that image from our library. You can see we've got the copy link, which is the entire link to the path off this particular file on our server. So you instantly highlight that. Copy it and then you can use that inside CSS editor like I've done. But that's how easy it is to use the first technique. Yes, it involves a little bit of code on this will be on the Web sites. If you want to grab this for yourself so you can just simply drop in the link to your particular SPG file you can do. That will be a link in the description below. But obviously, if you want to take this in yourself, you could simply pause the video and copy exactly what I've done. Nothing complicated about it. It's very, very easy to work with, but hopefully it'll demonstrate exactly how you can use this effect. So I'm gonna take a look at how we can do the different second effect, which includes some animation. This is a little bit different, and it's just utilizes elemental on its own. So let's take a look at that effect right now. The second method is set up a little differently. We've got a row with two columns on inside each of those columns, we're gonna have any intersection 60 on this left hand side. We've got an intersection which we can select with a little blue handle at the top and the same with the overall section. So we need to do to start working on this right hand column is come over and choose an intersection. Drop that in there, then just make sure that we only got one column select. We're gonna delete that column. So come in. She is the column on Say, delete. So we have got an intersection which is just one road. One column is the first part. Next thing you do notice, start to set up the background border and put some content in. So what I do is come over and duplicate these. We've got exactly the same information in both that we can work with going to duplicate each section. So finally, let's just duplicate the button, move that over to our right on section. Okay? There's the basics in place. We no need to go through a configure, a few bits and pieces. First thing to do is just out a little bit of breathing space around this particular in a section to select the intersection itself called the Advanced Section. We're gonna come down to the parting area and in there, which is gonna drop in the value of 30 pixels just to give us a bit of breathing space. Says the first thing. Okay, so now we're ready to go through and put the background image in there. So we need to do is come over and select the right hand column. Not the intersection that we currently have selected, but the right hand column. So I select that you see, we can come over to the advanced, have no on the left hand side, and we can say anything you want for margin on partying and so on in there. So for this, we're going to set a value of 20 pixels for the parting itself actually come out the style section And now we can go through and shoes, old background. So make sure you got back when typeset. The classic we're gonna do then is we're gonna come down with a click on the image and we're gonna choose this Grady int will select that insert over media and you see, that drops in the background a couple of problems we have, first of all, with the text is and of buttons and so on. It's transparent. We thought that in a moment we've also got the background being repeated and not size correctly and again we can do without very easily so from the left hand section. But it comes out to set position to be top left when it comes to repeat and set that to know, repeat. And finally, we're gonna set size to be cover. You see that no sorts that open gives us a nice section in there. So we need to do know to come over and actually set this background for this in the section White is to choose the intersection yourself to select that come back over the style, come over to the back of section coming classic and set the background color to be white You see that now gives us the effect that we wanted So we'll update our page We come over to a sample page, we scroll down, you can see there's everything in place, size to correctly and everything. The only thing we're missing is the animation effect that's easy to rectify Come back over to our dashboard, select A We're in a section Once you've got that selected, we can come back over to the left hand side committed advanced on down to motion effects And in there you see, we got entrance animation We click on there with a come down we're gonna choose Zoom in. You see that will give us the animation effect and we're gonna change that to be fast to it animates quite quickly Update every comeback Oto a sample page Let that reload scroll down . You can see there's our animation effect with our background in place the way we wanted it to be so a super cool and easy way doing it. If you don't want to get in on hand, code it from C. S s. But it does take a little bit more effort to do this particular style 5. Using SVG Images as a Website Logo: So now we've seen how to create these effects on buttons, borders and so on and how we can use SPG images for our hero. What about things like the logo for the website? Can we use it for them? Up until this point, we've pretty much relied upon working with two logos. One issue normal resolution for typical screen display. The second is a higher resolution version for retina display, but it's quite a good way of working, but it does mean you up low two images. However, if we start to use SPG images, we can benefit from our scalability and no loss of quality, no matter what resolution, screen size or density of resolution we're working with. Let's take a look at how we can utilize that now to create a new zero logos. There are a couple of things we need to take into consideration while working with those on . Go through that in this stage. As you can see, I got a demonstration in front of me. We've got a nice logo on the left hand side. Is Felice capable or created through SPG? Let's take a look at some of the things we need to take into account this time I'm gonna jump over into affinity designer as opposed to illustrator, just to demonstrate the fact that you're not restrict into just one program. So the logo we use in demonstrates a couple of things. First of all, we've got taxed in there because of normal shapes. Everything is still vector. So what? We want to goto export this. We just cut the file on. We choose export. This is where something important used to be taken into consideration. If you're using fonts that are not going to be installed on the system, then you have to make sure you convert those two curves. In other words, you break them apart, no longer afford. This has any kind of link to the system that they viewed upon. So just bear that in mind. When you're creating any kind of artwork that includes fonts, you can't break them apart, creating two curves. But what happens then is dependent upon the complexity of the font. Egy using can drastically increase the file size. So we take a look at this example. The phone is still intact and you can see at the bottom, it says estimated file size just over two kilobytes. Incredibly small, because we're using a very specific form that most people know gonna have on this system. We can't rely upon that. However we can't have. You want to break these apart? So in other words, we could say export the text as curves as opposed to being dependent upon the font. If we do that, you can see the file size no jumps up to 400 plus K. So a massive increase in final size makes that pretty much useless. Using an SPG, we could obviously go part and change the font to put something different in there. And just for this example, I'll do exactly that secrecy, the difference and how this changes things. This form is quite complex. That's just come in and just change that formed a second on. While this looks absolutely terrible, it should be good indication of what we're talking about. Just come back up the files on export again. Make sure SPG has chosen. You can see the file size with the fonts intact pretty much the same. However, if we choose to export the text phones as curves, you can see that now only increases it to 20 k so 10 times the size of the original one, but still getting close to being a decent final size. That could be something could be scaled across the board. So just bear that in mind. If you're using anything that has taxing it, there are going to be implications if you using specific funds. However, for this example, I just want to show you how you can use it for working with logos. Let's just go back to putting that as it was. Well, export this out. We'll just leave it as is. We'll click on exports and then we'll just name this whatever we want to do. So with its safe, I'll say yes to that so that our local already created for us. We could switch over and start working inside Elemental, so already gone ahead and set up a basic head of section navigation on the right outside and we do know is we're going to use the site logo on the left hand side. Drop that in there. I've set my state local up through the Hello theme, so it's just being used. Obviously, whatever things using you could do the same kind of thing, or you could just drop an image in there. However you want to work with it, it's all pretty much the same kind of thing. So you see it? No drop in. And as before, we get a tiny little version of our logo on there. So we're gonna do is click on that, come over and we just specify a few things Image size. We want to be falsely want the fullest highest resolution style gonna come over there and we could do things like we could set the width that we could ever Percentages, pixels or VW measurements. We also do the same for the width on the Maxwell in percentage. We could also set these up different sizes based upon the device is being viewed upon. But because we are using vector graphics in SPG four months, we know we're gonna get perfect quality across the board. We don't need to have multiple different versions of the same logo that's in place. Let's just set of some of the sizing and we get everything all sorted out. So we're gonna set the width on this. We're going to set a percentage value Obviously you can use whatever value works for years will set. That's about 70%. If you want to weaken, jump over there and take a look at any the responsive modes, the tablet, for example, or we could take a look at the mobile making adjustments. But what you can see is that the look and the feel of the entire logo is perfect no matter what scale it said to. So without in place, we are pretty much good to go. We've got the logo set up. We can go on control everything we want, but it knowing that the quality is gonna be perfect. But as I said earlier in this section, just bear in mind that SPG is not necessarily the perfect option for every situation, especially if you have funds that are quite complex in there. 6. Class Summary: so if you can't work with SPG images on your website, you still need to work with J Pegs. PNG 1000 Sore. But you want to get smaller. Final size is Take a look at the video in the corner. Right now that's going to get you up to speed with using a couple of different ways of optimizing your images. That's gonna be a great way of moving forward if you want to use them instead of SPG alongside SPG, you can get small file sizes. Everybody's happy. Well, that's how we work with SPG. Images inside WordPress and Elemental do use SPG images yourself. If you do, let me know in the comments section below. If you found a better way of working or this is opened your eyes to different ways, you can utilize them both in your design but also alongside page builders like elemental pro