How to enable SVG uploads in Divi.

How to enable SVG uploads in Divi.

Hey guys and welcome back to DiviPeople. The passionate hub of Divi Lovers.

And in this tutorial, I am going to show you how to enable SVG uploads in Div theme Using Divi – AiO Plugin and you don’t have to code for this and it’s super easy.

So, first of all, go to Plugin > Add new and in the Search box Search for Divi AiO and then you have to install and activate this plugin.

Now you will have a New tab as Divi AiO in your Dashboard Menu.

Simply open Divi AiO settings.

Now in Divi AiO Settings make sure that SVG Uploads is enabled and then Click on Save Settings.

After enabling SVG Uploads now if you try to upload any SVG Image you will see that it’s not giving you the file type error.

You can see that the image is Uploaded without any error.

Now you can insert this SVG image anywhere you want. And if I select this image from Media Library as I am editing page.

You can see that the image is inserted on that page.

And if you want to do this same without installing our plugin you can do that by pasting this code in your Child theme’s function.php file.

h

CODE

// Allow SVG uploads

function allow_svgimg_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');

And don’t forget to use a Child Theme. Because when you do it in your main theme all the changes will be gone when you update If you don’t know how to make a Child Theme you can generate your own from here

And that’s it for this quick tutorial I am very sure that it helps you. If you have any problem feel free to ask in the Comment section.

And if you need an image to check SVG upload you can download it from here.

Image by Vexels.

How to Style Archive and Search Result pages in Divi.

How to Style Archive and Search Result pages in Divi.

Hi guys so welcome to Divi People and this is gonna to be my first post on this site.So today i will show you how you can simply give your archive and Search Result pages a makeover with some Css and Javascripts.So every thing is gonna to be free because we didn’t need any plugin for this but of course we need a child theme for this.So with the child theme our Main theme(Divi) will be always safe because no any changes is gonna to be happen in our Main theme.To Download a Child theme click here.

After Downloading this free Child theme you should now go to your WordPress Dashboard > Appearance>Themes and then click on Add New.

Now Click on the Upload button and then Choose the Divi Child theme that you’ve downloaded before.

Now you will have your Child theme installed and active on your site.

So now what we have to do is to copy some Css from here and simply paste it Divi>Theme Options and then in the Custom Css Box.

To Remove Sidebar on Archive Pages

If you Don’t want Sidebar on your Archive pages you can simply use this Css from here.But if you like to have Sidebar on archive pages you can simply skip this Css.

h

CSS


/*
* Remove sidebar on all archive pages
*/
.search #main-content .container::before,
.archive #main-content .container::before {
display: none;
}
.search #left-area,
.archive #left-area {
width: 100%;
float: none;
padding-right: 0;
}
.search #sidebar,
.archive #sidebar {
display: none;
}

Making a 3 Column Layout on Archive pages

We need to give some styling to Archive and Search Result pages (and if you use default blog page this will add 3 column to that as well) by giving them a 3 column layout which you can get by using this Css from here.

h

CSS

/* Archive and Search Result page 3 column by DiviPeople*/
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {
width: 67.3%;
float: left;
border: 1px solid #ededed;
margin-top: 20px;
margin-right: 3%;
margin-bottom: 20px;
padding: 10px;
}
.blog .et_pb_post img,
.search .et_pb_post img,
.archive .et_pb_post img{margin-bottom: 10px;}
.blog .et_pb_post:nth-of-type(3n),
.search .et_pb_post:nth-of-type(3n),
.archive .et_pb_post:nth-of-type(3n) {margin-right: 0%;}
@media only screen and ( min-width: 1025px ) {
.blog .et_pb_post:nth-of-type(3n+4),
.search .et_pb_post:nth-of-type(3n+4),
.archive .et_pb_post:nth-of-type(3n+4) {clear: both;}
}
@media only screen and ( min-width: 768px ) and ( max-width: 1024px ) {
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {width: 90.5%;}
.blog .et_pb_post:nth-of-type(2n+1),
.search .et_pb_post:nth-of-type(2n+1),
.archive .et_pb_post:nth-of-type(2n+1) {margin-right: 3%;}
.blog .et_pb_post:nth-of-type(2n+2),
.search .et_pb_post:nth-of-type(2n+2),
.archive .et_pb_post:nth-of-type(2n+2) {margin-right: 0%;}
}
@media only screen and ( max-width: 767px ) {
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {
width: 100%;
margin-right: 0%;
}
}
.blog #left-area,
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}
.blog .et_pb_post > a,
.archive .et_pb_post > a,
.search .et_pb_post > a {
margin: -20px -20px 10px;
display: block;
}
.blog #left-area .et_pb_post,
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
overflow: hidden; /* fix for Firefox */
page-break-inside: avoid;
break-inside: avoid-column;
width: 100%;
padding: 19px;
border: 0px;
background-color: #fff;
word-wrap: break-word;
display: inline-block;
}

Adding Hover Effect to Archive cards

So now it’s time to add some extra Effects to the Archive Cards by adding Box Shadow and  Border-radius and Hover Effects to that as well.Using this Css:

h

CSS


/* Styling the Masonary Layout*/
.search #left-area .et_pb_post, .archive #left-area .et_pb_post{
border-radius: 16px;
border: none;
transition: 0.35s ease-in-out;
box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.12);
}
.search #left-area .et_pb_post:hover, .archive #left-area .et_pb_post:hover{
box-shadow: 0 13px 50px rgba(0, 0, 0, 0.12);
transition: 0.35s ease-in-out;
}
.et_pb_post .entry-title a, .et_pb_post h2 a {
font-family: Nunito !important;
text-align:center;
font-size:22px;
}
/* END Styling*/

And that’s it for the styling now look at your Archive and Search Result pages they might be looking like this:

Adjusting Pagination at it's position

You might have seen that the pagination is not in the perfect position.To adjust it’s position you have to paste this JS to Divi>Theme Options>integeration in the Add code to the < head > of your blog paste this Js.

h

JS

<script>
(function($) {
    $(document).ready(function() {
        leftarea = $('#left-area');
        pageNavi = leftarea.find('.wp-pagenavi');
        pageNavigation = leftarea.find('.pagination');
 
        if ( pageNavi.length ) {
            pagenav = $('#left-area .wp-pagenavi');
        }
        else {
            pagenav = $('#left-area .pagination');
        }
        pagenav.detach();
        leftarea.after(pagenav);
    });
})(jQuery)
</script>

After pasting this JS in it’s position make sure to Click on the Save Button to Save All the Changes.And now you will have pagination in position.

Welcome to DiviPeople: the passionate hub of Divi Lovers!

Welcome to DiviPeople: the passionate hub of Divi Lovers!

Hello everyone! Today is a very special day for us at Divi People. For the past two years, we have developed many custom child themes & plugins for our clients. With all that experience in mind, we wanted to create some highly functional, easily customizable, fast and scalable Divi plugins & child themes that we can easily use with Divi builders.

Let me quickly list out some of the vision and mission of Divi People:

  • Highly Functionals Divi Modules!
  • Fast and Scalable plugins
  • SEO friendly child theme
  • Extendible with Hooks: We build plugins and child themes that you can easily extendible with hooks.
  • Easy to customizable: with our child theme you will easily customize your online presence.

Try out our some free plugins & child themes and be sure to let us know how you like it. 🙂

Cheers!