Back to Blog
Add borders to photo desktop5/15/2023 ![]() These options give you a perspective on the things you can do with the new Divi options without using any additional CSS. In this post, we’ve shown you some different ways of creating beautiful image borders. The last thing you’ll need to do is add a padding of ’12px’ to the top, bottom, right and left padding of your image. Once you’ve added the pattern background, use the following settings as well: You can use their patterns for all kinds of purposes, just make sure you credit them within your code as mentioned in their FAQ. The pattern we’ve used in this example comes from Toptal. Next, we’re adding a pattern background as well. By adding a background pattern as well, the image gives a bit more atmosphere to your website.įor the last example, we’ll use the following gradient background settings: This border contains a gradient background of two colors that are used within the image itself as well. This allows you to play around with the look and feel of your images. The last possibility we want to put in the spotlight is using a pattern and gradient background at the same time. Lastly, we’ll need a padding of ‘8px’ for the top, bottom, left and right padding. In the Design tab, we’ll need to have the following border settings as well: To achieve the image border we’ve shown you above, use the following gradient background settings: Moving on, you can also create some small corners in your border by using the gradient background option in combination with a dashed border. Border Color: #f4f4f4 (match with your section background color)Īnd add ’10px’ to the top, bottom, right and left padding of the image.Moving on, use the following settings for the Border subcategory: The gradient background color we’ve used in this example is the following: Using a double border in combination with a gradient background can deliver some stunning results as well. Scroll down and add the following padding to the image: ![]() ![]() Proceed to the Design tab and use the following border: The gradient background settings you’ll be needing for this image border are the following: The image itself contains in this case mostly lighter colors, which creates a nice balance with the darker border. Next, we have an example that is great to draw the attention of the visitors. Lastly, add a padding of ‘7px’ to all the padding options. Move on to the Design tab and use the following settings in the Border subcategory: Start by adding the following gradient background settings to your image: By using the same colors for the gradient background and the border, the image border somehow feels like it’s getting filled with color. The first combination of gradient background and image border is simple yet beautiful. This, too, can deliver stunning results as you’ll be able to witness in the next four examples. Then, add ’20px’ to each one of the paddings as well.Īnother possibility you have is combining a gradient background with an image border. This type of border is great to use when you want to emphasize a color that is being used within the image.įor the third image example, use the following gradient background: Moving on, you can also create corner backgrounds for the images on your website. In the Design tab, the only thing you’ll need is ’10px’ of padding for the right and left side. To achieve this type of image border, start by adding the following gradient background to your image: Using this kind of image border gives a nice extra touch to the image without putting too much focus on the border itself. Next up, we have an image border that only shows at the left and right side of the image. Go to the Design tab and add ’10px’ to the top, bottom, right and left padding. The next and last thing you’ll need to do is add some padding to the image. For this example, we’ve used the following settings: Start by choosing a gradient background in the Content tab. The result we’ll show you how create looks like this: The first example we’ll be handling is the simplest and most modest of them all a standard gradient image border. We’ll show you three examples of image borders that consist solely of a gradient background. By experimenting with the various gradient background settings, you can achieve simple yet elegant results. The first possibility you have to achieve beautiful image borders is using a gradient background only. Subscribe To Our Youtube Channel Gradient Background How to Create Beautiful Image Borders using Divi’s New Options Let’s take a look at the results you can expect from this post: 2 How to Create Beautiful Image Borders using Divi’s New Options.
0 Comments
Read More
Leave a Reply. |