Are you looking to change your web design, but you just don't know CSS and you're not
using a CMS like WordPress Workflow, Wix or something that's easy to visually
change your website and you have to do this manually.
Good thing.
There's a browser extension that's called Intap and it helps you to exactly do that.
You can visually change your website look, and it's going to give you the CSS code
where you can later update on your file manager.
So it makes it easy to visually edit a website and then update it.
So let me show you what I'm talking about
and then you decide if it's something that is useful for you or not.
Let's go. Jump over there, too.
Check it out.
Okay, this is a deal that's going on right
now and it's only $39 for the lifetime deal.
And you get access to three browsers.
So that means you can install it on three
browsers and use this Simon Tensley if you want.
So if you have a virtual assistant,
a friend, or a teammate that you want them to use, it also.
Well, they have access to it because you have three browser options to install it.
Now, things that you could do is that you can inspect CSS on Hubbard, Debug,
CSS issues, visually fix responsiveness in virtual devices,
and many more things that we're going to check out on this video.
Like I mentioned before,
the browser licenses and you get access to all of this.
Now, really quickly,
I want to let you know that this is a browser extension and you can enable
this on Chrome, Web, Firefox, Edge, and Opera.
So if you're using any of those, you can install it like I have on my page.
So, for example,
this is a site that I don't have access, but I want to know how it actually works
on the back end with CSS or if I want to make changes to it.
Let's just say that this is my site and I need to make some modifications.
And I don't have a Visual builder like I
would on WordPress, Wix, Web Flow, or any of other of those.
So I have a PHP script site, or maybe I have something that is just
HTML and I don't have access to a visual builder.
This is going to help me accomplish that.
Let me show you really quickly.
I am going to enable it by clicking on this little icon.
Now, I have enabled it using intact.
I have clicked on it and this is what I get right now.
So, for example,
if I want to enable the Visual Builder, I'll enable it right here.
Edit CSS.
I'm going to visually look at changes that I want to make and then get the code
that I need to update on the back end on the file manager.
So I'll enable virtual editor and the code editor.
Okay, so I have both of these and it's going to add two tabs to this section.
Visual Editor and Code Editor.
So I'm able to view some of the things that I have selected.
So in this case, I'll Select this section
of text and if I go into Code Editor, this is that code for that.
If I click on this one, selected there, now it's selected that one.
I'll go back into this section.
Here we go.
And I'm going to go into the Visual editor.
So I have options for position,
for example, block, flex, grid, or get rid of it totally.
If I just say, you know what, I don't want that section enabled.
Well, that is possible.
Let me go ahead and turn it back on.
So it's things that you could say, hey, I can turn it off just to see how it looks.
Maybe that's what the look I want to accomplish.
And I'll grab the code for it.
If I want to go into Sizing, for example, check that out.
I'm changing the sicing for this block.
So that's something that I want to do that is possible.
Grabbing the code for the height,
see how it's changing the height there for that particular box.
The spacing for it.
For example, if I want to add spacing
on the top, I'll say, you know what, 100 pixels.
And it added that spacing to it.
So it's actually padding.
If I want to do padding from here.
That's also available.
Like I said, when I do these changes, I'm actually viewing the code.
How it's actually changing it over here.
So if I later want to grab that piece of code and change it on the file manager
for that specific space, I can actually do it.
There's the margins for it.
Let me actually turn this back right there.
Here we go.
There's also the text options for it.
If I want to make it centered,
aligned to the right, aligned to the left, the text color for it.
If I want to see a how does it look on red?
Well, I can do that there.
If I don't like red, I could do maybe blue.
These are just options of font size.
This helping me out.
See how it visually looks.
There's a line height like spacing, word, spacing, et cetera.
All right, there's a background for this.
In this case, the background is transparent or white.
But if I say, you know what, how about black?
And that's how it's going to look.
How about grayish?
Well, we're able to view it or white in that position.
The borders for it.
Again, I can do solid, I can do dashes, and I can change the border right there.
I can add it to it.
Let's go back.
Let's go into VFX, you have the opacity, you have shadow colors.
Let me go and find an image really quickly.
No images here.
Or maybe this section right there.
I've selected the button right there.
I'll go into Effects and I'm going to offset.
Here we go.
And I'm just going to see how this would look with an offset.
See how it looks there.
So maybe that's something I want to do.
Maybe I want to add some opacity to it or not.
And if I like it, well, I'm going to use the code for it.
Now. If you like the changes that you've made,
you can actually export the CSS and download it to your system and then
you can later update it, or in case you just want to grab the code
and open up the TSS files that it belongs to and update it there.
That is possible.
The editor config things that you want to view or not.
Tag class ID CSS Hex RGB depending on how
you want to view the font color or actually any color Hex RGB or SSL,
we have the layers on the left, for example, for this element, it's selected.
We have the layers for it.
We have devices here.
If I want to view in different types of devices, here is a phone here's,
a tablet, and we're able to view how that actually looks.
We have laptop view and we have all the views right there.
Just in case you want to visually see how
it looks in those type of devices or make some editing with devices.
You have the device options here.
Sizes, phones, tablets, phones, Tablets again, and different type of sizes
for different types of phones like Google, Samsung or iPhone.
You can also use the Inspector.
So let me turn on the Inspector right here.
I've selected everything.
Let me go ahead and click everything. There we go.
I'm visually looking at online selectors, the CSS, the contents, padding, margins,
and if I Hover over things, we're able to view all of this.
Check this out.
Where to view that. There you go.
If there's something that we want to view
or we just want to look at padding, we're able to view the padding.
Oh, that's how much Padding has right?
So you're able to do that just by visually inspecting it.
There.
There's a debug option for Xray break points.
You're able to view those all in the same like everything right there.
Visually, you have all the services available there.
You can also hide the menu if it's in the way that you want to look at something.
We can move these visual Editors. For example,
if they're blocking something, we can move them somewhere else.
There's also the reset CSS like you saw right there.
Let me turn off debug.
It removed the shadows because I reseted that section there.
You can also collapse all or collapse them back to view the code again.
So those are the things that you can do.
You can make some visual editing to this so you can later update your CSS file.
Like I mentioned before,
this is useful when you don't have a visual editor for your specific site,
or maybe you want to edit if you're using WordPress or something like that but you
want to edit via CSS and not the visual builder for example and it's super easy.
You can view sites like that or I can view one of my sites for example
sasmaster. Net here's one of my sites
there we go and if I want to activate it here that is possible just activate it
there and I can go ahead and view everything there debug make changes to it
again if I select a section that is possible with this see that there it's
possible super easy with Intap well that is intact for you guys.
Whoever wants to grab that deal it's only
$39 for the lifetime deal and you get access to three browsers.
If you ask me if this is a good buy or not for you it will depend like I mentioned
before if you have sites that don't have visual builders then this could be easy
and again if you don't know CSS well this could be a good option and maybe you do
know CSS but it makes it easier to just visually make the changes here and grab
the CSS code so you don't have to write all that code manually.
So it depends on those use cases.
If you don't need to do visual changes
in CSS well this is not something that's useful for you but there you go.
That is in tap.
If you guys want to grab it that link will be in the description.
It's an affiliate link so if you grab it through my link it just gives you a small
Commission and it helps me out making these videos.
I thank you all for watching.
My name is George and this is SaaS master.
I'll see you guys later. Bye.