Up next in 10
How to set default Grid Mode in Fletro Pro Theme
1K views
Jan 24, 2024
In this tutorial video, the presenter guides users through the process of setting the default Grid Mode in the Fletro Pro Theme. The video likely covers step-by-step instructions on accessing theme settings or customizer options to define the default grid mode for displaying content on a WordPress website using the Fletro Pro Theme. Viewers can expect practical insights into customizing the theme's layout preferences, ensuring that the grid mode is configured to meet their specific design and content presentation requirements. Whether you're a WordPress user, designer, or someone utilizing the Fletro Pro Theme, this video aims to provide a clear and user-friendly guide for setting the default grid mode to enhance the visual appeal of your website.
View Video Transcript
0:00
Hi everyone, welcome to Quito blogging and in this video I will show you how you can set the
0:04
default grid mode in your Flitro Pro theme. So as you can see that, I am using the Flitro Pro version 6.0 and here, this is the grid mode
0:13
here and if I click on here, this is the list mode. But in mobile devices, the list mode doesn't look good and in Flitro Pro by default in mobile
0:23
view it loads with the list view. This is the list view here
0:27
So we need to change the default mode to the grid mode. so that it will look better in mobile devices
0:33
So how you can change this to default grid mode in mobile devices
0:38
Let's check in this video. So this process will be a little bit complicated
0:42
So follow this video till the end and if you have any doubt, you can ask me in the comment section
0:48
And if you found this video helpful, then make sure to hit the like button
0:52
So let's check how you can do that. So here I have divided the process into four steps
0:58
So before proceeding further, you need to take a backup of your theme code
1:02
So here I will use this website to show you how you can change this default grid mode in
1:08
your Flatro Pro theme. So first of all, we need to go to the blogger dashboard and go to the theme section here
1:15
And make sure to take a backup of your theme code so that in case if you do any mistake
1:20
you can easily restore it to the previous version. So after taking the backup, let's click on the Edit HTML
1:28
Now here you need to follow the step one. So in step one we need to find the body tag here
1:34
So what I can do is I will type like Control PlusF and I will type like less than body like
1:40
this and this is the body tag and here you will see this option body class ID main content
1:48
So you need to hit enter here and you need to add a code after the body tag
1:53
So I will provide all the code link in the description so you can easily get this code
1:58
So, let me just copy this code from here and I will paste the code here like this
2:04
Now let's move on to the second step here. In second step, you need to find this option
2:11
Post mode, grid mode. So what I can do is I will scroll to the start and I will again type Control Plus
2:19
app and search for grid mode like this and I will hit enter to find that HTML code So Here it is As you can see that this is the data view
2:31
It's multiple items and here a deep class post mode on click grid mode
2:37
So we need to find this code. So if we are using different version of Lithrowrow theorem, then the class and ID may be a different
2:44
but the process will be same. So here you will see like GRD mode or something like this
2:50
So you need to find the class according to your version you are using in Flitro Pro
2:55
So here you need to change one thing. So here you will see this option
2:59
Class list add grid mode and class list dot remove grid mode
3:05
So we need to swap this add and remove here. So this is the remove and this is the add
3:10
So we need to change the add to remove. So I can do that
3:14
So I can simply type remove here and here in this section
3:20
remove, I will change it to dot add. So this is the simple changes you need to do in this script here in this grid mode deep class
3:30
So as you can see that I have explained everything here in the second step
3:34
So you need to change this first add to remove and then second remove to add
3:39
So you need to do the changes here and if you are using different version then this class
3:45
may be different a little bit. Now let's find the third step
3:49
So, here this is the additional JavaScript section. So you can simply search for additional JavaScript
3:55
So what I can do is I will scroll down all the way to the bottom and scroll up a little bit
4:00
And here it is. This is the additional JavaScript. And here you need to change the same thing like this
4:08
So this is the function dark mode. So let's hit enter here
4:12
This is the function of dark mode and then let's search for the function of grid mode here it is
4:19
of grid mode and let's search for the next function. This is function resized header on scroll
4:25
As you can see that, we have extracted this function file for grid mode and we need to do the same
4:32
changes here as well. So here you can see that dot classlist.d.d.ad and dot classlid
4:39
So we need to swap the same thing in this step three as well. As you can see that the
4:44
remove will come fast and the ad will come second So what I can do is I will change this add to remove and I will change this remove to add like this as you have done in the HTML section as well
5:00
So you need to change the both JavaScript file in second step and third step
5:06
Now let's move on to the four step here and here you need to make some changes in the CSS code
5:12
as well. So what I can do is I can simply search for this option grid mode
5:17
So here you need to search for the media screen max weights to 480 pixels
5:23
So this is the size of mobile screen. So we need to find this section in the CSS code
5:28
So what I can do is I will scroll up to the first here and I will type Control Plus
5:34
app and I will get grid mode. As you can see that the first CSS code section here, this is the grid mode
5:42
So this code will apply to the desktop version. So we need to scroll below here
5:47
Now you can see that here the max width is 1100 pixel
5:51
So you will scroll down a little further. And here the max width is 896 pixel and then let's scroll down here and here is the max
6:02
width to 640 pixel. So let's scroll down a little bit further and here it is
6:09
So here the max width is 480 pixel as you can see that
6:14
So this is the media screen that applied to 480 pixel. screen size. So here we need to make some changes here. So this is the grid mode block post
6:24
calculate 100% plus 15 pixel. So we need to change something in the second line here. So this
6:30
is the worth calculate 100%. So as you can see that by default it is taking the 50%. So we need
6:37
to change this to 100% like this. So I can do that here. Let me remove it to 100% and let's
6:47
Move on to the second. Here you need to make some adjustment a little further
6:53
Like here in the post header title info, we need to change the font size to 14 pixels
6:59
So it will fit properly in the mobile size. So I can do that
7:04
So let's here, the font size is 14 pixel here. And here you can also change the font size in the post title to 17 pixels
7:14
So these are optional settings If you don want to do this then you can skip the step four You can keep the step 1 2 3 as it is And you can skip the step 4 as well if you don want to change the styling
7:28
Now here in the great most post title to font size to 70 pixel
7:34
So let me just change the font size to 17 pixel as well
7:39
Like this. Now let me just save the changes. So make sure to follow the step 1 to 3 properties
7:45
And if you want to make the changes in the styling, then you can follow the step four
7:49
as well. Okay. Now we have done all the changes here. Let's go to the website and let me just refresh this page
7:58
And you can see that there is no changes in the desktop version and let me just inspect
8:03
it in the mobile view. And you can see that it is loading this mobile screen in the grid mode
8:11
So let me just quickly remove the cookies data here. here like this and let me just reload it again
8:20
Now let me just scroll down here and you can see that it is by default loading in the grid
8:25
mode in mobile devices. So earlier it is loading in the list view in mobile
8:30
Now it is loading in the grid view. So you can confirm it by opening the same website in incognito mode
8:38
So let me just copy the URL here and let's go to the incognito mode and let's paste it here
8:44
like this and it is loading the grid view in more desktop so let's click on inspect here
8:54
and as you can see that the same grid view is loading in mobile as well so in this way you can
9:00
set the grid mode to permanent or set the grid mode to default in the fletro pro theme so if you
9:07
are using fletro pro 6.1 then the process will be same you need to swap the add and remove like
9:14
this in the step 2 and step 3 and the CSS class or the grid mode class will be a little bit
9:23
different like this so it will be something like GRD mode or something like that so you need to
9:29
check your class in this version so this is how you have to make the changes to set the grid mode
9:36
to default in filter pro theme so if you have any doubt regarding this then you can ask me in the
9:42
the comment section and if you found this video helpful then makes you have to hit the like button