Getting Started with Divhunt | No-Code Website Builder Tutorial

hey everyone welcome back to another div Hun's video today I'm going to help you to get used to working in div hun Builder if you're new here or you're coming from some different platforms so without further Ado let's start by talking about the right click in D hunt you can right click pretty much on on anything and you will in response get some additional settings connected to the Target you've clicked you can even go hit the right click here in the Styles and you will get the options to set the style to be important or to reset it now when we cover this let's talk about let's talk about this na bar here that is placed at the top of my screen here I can get the access to all of the applications I have installed at this project in my case I have these Collections and these Creator applications here I have this files button if I open it I can see the list of all the files that I've created spec specifically at this project and here I have this Styles button which will open all of the classes that I have on this project and as well I have this panel here which will show me all of the colors I have saved on this project now we have here this U Bar for some of the most commonly used tags um for the developers and you you can quickly add them to your project by simply left clicking on them as you can see my div is already added here and if I go hit the right click on it I can remove it from here of course if you're more skilled developer and you need um some more tag TS you can hit CR e on your keyboard and this search bar will appear now I can type something like a side here and now I can use this aside tag now let's go and remove some of these letters here and as you can see I will get the list of other tags I can use something like caption a side address or anything from this list and all of these additional tags are pretty good if you want to boost the SEO of your project now let me show you one cool trick by using this bar and the right click for example if I want to convert this div here into something uh different like for example link block I can simply select this uh div by left clicking it and here I can go and hit the right click and now as you can see my div has converted into a link block and now I can go back hit the right click on a div and again it will be transformed back into a div now when we cover this up let's talk about this ele ments option here if I open it you can see some of the predefined uh blocks of Texs here for example you have simple form newsletter hamburger and many more if I switch here to the elements I'll have the list of predefined sections buttons cards and some other structures from which I can choose from here into the wireframes I have ready to use wireframes and how can you add something from those lists well simply you need to choose choose what you like click on it and drag it into your project now I have this wireframe here ready for me to use it um because this is only for a demonstration let's hit the right click here and remove it the next thing we are going to talk about is this right side of this n bar here you have some additional options here like undo button redo button you have this um drop down for responsive here you can choose from the list of break points or you can also create some new breakpoints uh if you need some specific viewport withd for example I can type in here 1440 pixels hit confirm and the new breakpoint will be created I don't need this now so I'll hit the cancel button now how the respon works well simply you just select the breakpoint and now everything I edit here will be applied to this viewport and to all the viewports below this one everything above this one won't be affected at all now let's go back to the original size here and let's talk about the preview mode here uh clicking on this button you can enter the preview mode you can go here and click to set everything in full screen to remove sidebars and the top bar so let's get out of here and here you have this reload button I like to use this option when I'm making some animations and I want to test them out like these animations I have on heading as you can see it will trigger my animations from the beginning here you have the drop down of all of your your pages here so you can quickly switch between pages in the preview mode and here on the sides you have these bars which I can click and drag them to manually resize the viewport so I can see how my project is working on some smaller devices or you can go here and type in something manually like 1440 pixels and the viewport will automatically be resized now here you have drop down of some predefined viewport widths for example you have this iPhone 11 which will set this value here or you can choose something different now to get out of the preview mode you come here again and hit this icon and you will get out now for this uh option here uh settings is like the back part of your project here you can set the name for your project set the description set a favicon you can add or rem or remove fonts you can install applications plugins and many many more and for the last part here we have this publish button which is used to publish your project now when we covered all of this up let's talk about this sidebar on the left first panel here is the pages panel here is the list of all of the pages I have created on this project now the next panel is components here I have the list of all the available components I have created on this project and the last one is the layers here I can see the whole structure of my web page and let's talk more about the layers here you have this small small arrows and if you click them you will close this block here and this is pretty useful when you want to navigate through your layers so you can uh a bit U you can organize uh your layers a bit more so here you can do a lot of bunch of stuff like let's hit the right click on this here and let's rename this div here let's name it left block for example and this uh div here is renamed it's important to note that these names here um won't affect your tags at all they won't affect any stylings your classes uh even the other users cannot see those names you're the only one who can see these names and their only purpose is for you to easily navigate through your layers now let's talk about these small labels here that we have firstly let's talk about this green c letter if I hover it it will tell me that this is a component called knif bar if I go here and and hover over this A2 this means that I have two attributes set to this div and also I can see the list of all attributes that I have on this div here when I hover it on this C1 it will show me that this tag contains one class if I go here to this blue x14 this means that my tag is repeated or looped 14 times and that's pretty much it for the layers so we can go back uh so we can go to the right side now and talk about this sidebar here we have as well three panels we have designer panel uh which you're going to use to set styles to your tags we have this uh settings panel which you uh let's select this heading one here here you can set some options like IDs visibilities transform options or you have some specific um settings depending on which tag you've selected for example for headings you have these options if I select links I'll have I'll have the linking options here you can change the content of your text tags or you can simply double click on them and you can here as well change their content now further let's go to this Advanced panel here you can set the source uh if you want some items to pull datas from uh collections in my case I can set this to be connected to blog collection uh here you have iterables again if you're working with collections iterables will come very handy for you I won't go into details about iterables since this is the topic for itself it's pretty long so we'll have separate video for this here you can set the custom attributes or set the uh visibility conditions now let's talk about the first thing you're going to notice when you come into the uh devant Builder well that is the canvas and in my opinion um for me as a developer it's much more easier to work in a canvas mode or rather uh than in a mode like webflow have where you have one page fixed in your screen so uh in a canvas you can freely move like this uh this a lot resembles figma so you can control you can hold control on your keyboard and with my scroll I can zoom in or zoom out in my project and one very amazing thing is let's go here to the pages panel and if I hold shift and left click on some of my pages you will notice that my pages are getting pin on into my canvas and now I can freely move uh between multiple Pages at once this uh is very useful if you want to let's say uh copy some section from uh this uh page to homepage so I can just come here hit contrl C on my keyboard then I just need to scroll here and paste everything into uh this page so I just need to hit contrl V if I scroll down it will be placed here I can just drag it where I where I like it and as you can see we have copied uh this section from other page to homepage in just a few seconds now let's talk about classes if you're a newcomer from webflow this might be a bit frustrating for you that's because we don't have combo class system rather than that every single class here works independently to demonstrate you that here on this heading one I have set this margin top 10 class if I'm going to add another class like uh let's go with BG blue here and if I set some stylings here let's set background to be blue and let's remove the first class as you can see the stylings of my second class stays that's because these two classes Works separately now the idea behind classes on div hun is that you can reuse almost every class that you create here and the second part is that your tags will be better organized as you can see I have this BG blue class here which represents background color of blue here and if I add a class like margin top 10 this class represents the margin top of 10 pixels I will uh on this project I will reuse this class very often so rather than setting those styles on a tag I set them on a class so I can use them at any time now let's talk about second uh styling method here and that is styling tag directly here you can uh select any tag you want and um as you can see my tag option here is selected I can input anything I want here and those Styles will be applied only to this tag here this way I know that I won't mess my styles on some other Pages like I would if I if I were to use same classes here and on other pages and I may forgot that I I have same class and multiple places so my Styles will be completely messed up and the second great thing here is let's go to the responsive here so I can demonstrate you that let's go to some smaller breakpoint and now if I'm going to um if I want to change the uh top spacing for example I want here instead of 10 to be 50 I can freely input this value here and this value will only be applied on this tag on this break point I won't mess my Styles anywhere else so with this covered let's go to the full break point and let's talk about all of these different colors here firstly we have this purple color when something is marked purple that means that those styles are coming from classes when something is marked in a pink color that means that those Styles comes from Global styles for example if I go here and select This Global H1 everything I edit here will be set globally to every single H1 on my project and those changes will be marked as a pink color now let let's go back and with the blue color uh those are the styles that you've directly set on your tag for this orange color that means that this tag is inheriting those styles from its parent if I go here and hit right click again it will tell me that this style Here Comes from body tag and the break point is 1920 pixels now let me talk about one very interesting thing here and that is the instances let me show you how you can create U some animations without needing uh some systems like webflow have the interaction system which will uh create JavaScript codes and that sometimes can be very very hard for your uh project uh especially if you have multiple pages with multiple interactions now if I want here to let's say I want when this whole div is hovered I want this Arrow here to be rotated here we can do that with simple CSS for example I just need here to click on this instance button and this instant popup will be opened here into the state I need to set the state on which I want animation to be triggered I want it to be hover here and I need to select subject here you can select from some uh Global tags like headings images or links or Dives but this time let's go back quickly and set here a class of hover Target so we can easily Target our Arrow so I can go back again into the instance set hover and now I will have this hover target class as my subject if I click on this with click create and if you're more familiar with with writing custom CSS you can see uh this instance here the self represents the div or the tag on which this instance is set in my case it's this div here when this div is hovered you will Target this class and now I can scroll here and I can set the transform option to be rotate and let's set the value of 45° and now when I hover over this div here you can see that my arrow is rotating but let's make this animation smoother let's click on this Arrow here scroll down a bit and let's set the transition here let's set the style to be e and now when I hover over this div you will see that my arrow is rotating smoothly and everything uh we achieved now is made through pure CSS and it's not um heavy for my project now let me show you another interesting feature on div hunt and that is the custom CSS for example let's again take this div here and if I click on these two brackets here this popup will be opened and here I can see all of the CSS Styles set on this tag and the good part is these are not read only you can also come here type some U uh new properties let's say margin bottom of 100 pixels if I hit save these uh Styles will automatically be applied into the Builder and I can as well see them here so I can even further edit them here or I can remove them now if I again open this CSS here you can see that we also have this instance instance that we created before visible here so we can delete it we can as well edited here or we can write some new instances here and now to show you my uh favorite thing about this custom CSS is that is that I can now go into the uh figma file uh copy some uh code here and let's select this whole section here I can just click on this custom CSS paste the code that I copied from figma and as you can see I've set this background uh radial gradient in just a few clicks I as a developer personally hate to work uh with the gradients and with backdrop shadows and this is a lot of time and energy saving for me so I often use this feature so let's go and remove this because we don't want it here and that is the power of custom CSS on div hunt the next on our list are the plugins the plugins are a feature that helps you achieve some very powerful effects in your project that are made through JavaScript and you don't need to know or write any custom code so to demonstrate you this I'll go to the settings of my project into the Bros plugins panel I can see the list of all currently available plugins here you can choose anything you like uh from this list and for this example I'm going to choose this count up plugin and to install it I simply need to click on this button here then hit confirm wait a few seconds and my plug-in is ready for use now let's go back here and let's see how can we attach this plug-in to some of the to some of my tags firstly I'm going to duplicate this heading here and let's change this content here into a number let's type in uh six million here and to apply a plugin you just need to go here to the transform dropdown open it and select the plug plugin you need for this example as I said we are going to use countup and as you can see the plugin automatically started working now you also have um additional options for every single plugin so uh if you come here click on it uh you will have these additional options here I can adjust the duration for my animation if I click save you will see that my uh uh animation is now going way slower than before and you can also add a bunch of other stuff like set the prefix let's add a dollar sign here and for the separator let's add a DOT and now you can see that my uh plugin is edited and uh and one very interesting thing about the plugins is that um the community can make their own plugins and publish them for uh for other people's to use uh how can you do that well you can go here into the Creator application hit create plug-in button and here you can make your own custom plugin and publish it onto the community and now when we cover up the plugins let's talk more about the custom code let's talk about the files here if you open this field again you will have the list of your files and here you can create uh new folders or uh CSS and JavaScript files for this example let's create one Javascript file let's name it hello world world and here it's successfully created if I open it here I can type in any custom JavaScript that I want and it will work in my project now um you have bunch of options here that we're going to cover uh into details in in some different video uh so when you when you're are done writing your code here you can just hit save you can close this and uh the uh the code that you've write in the that file will be saved here now when we covered this up let's talk about the components the components are very powerful feature on div hunt so you can um use them when you want to reuse some sections like navbars Footers and similar so let me show you really quickly how can you add a component to your page simply let's uh select our body tag and let's add these component tag here as you can see it's placed right at the bottom of my page and here while I'm in the settings panel I just need to open this drop down and this is the list of all of my components as I as you can see as I'm hovering them at the center of my screen you can see the preview of my components so here um let's use let's say uh this component here and here I can directly uh click on something and uh edit the text I will type something like test for my video and if I click outside this text will be um change only on this component it won't affect any others and that's uh that's because let's like this component uh this uh component here is set to be instance or to work independently uh for the content for texts and images um from other components so if if I want this component to be exactly the same as my main component I'll just need to go here and turn off the instance option and as you can see my text is again back to normal that's because this component now works as my main component and one um another interesting feature here is this lock option uh when you feel that you're finished with this component here and and you don't want to uh come back here and edit it further more you can just hit this lock option and this component will be completely locked so you cannot let's say uh delete something accidentally or something similar to that the next thing I want to talk about is the collection system or the CMS of di hunt it's pretty much similar to the one on webflow the only big difference is that here you can have better Organization for your collections to show you that I will open my collections application and here into this blog collection I'm going to create new item let's name it for the video if I hit confirm my item will automatically be created and the first thing you can see here are these three separate sections the first one is created by default you have it in every single collection here you have the name and the slug of your collection and the second and third one are created customly by me for me to easily navigate through data which I need to input here you also have this tab system which you also can create customly made tabs you can create multiple tabs uh which are for the sake uh for you to easily navigate uh through your collections and to easily manage your data uh on the right side you have some basic informations about your item here you also have some predefined fields for the SEO settings here and if you want to publish your item you just need to toggle this button here click on finish editing and you've successfully created and published a new item into the collection now let's see how can you made make some new Fields into your existing collection for that I just need to click on this icon here and as you can see we have these two sections that uh are created here I can click on this add new section and let's name it video if I hit confirm new section is created let's add new field let's add text field let's name it video name and and here we have this wi field I'm going to set it to the 50% and hit save and now you can see that this field here is 50% width of this whole section now let's again create new uh field here let's create media let's name it video file if I hit confirm I can again set its width of 50% and you can see that these two fields are aligned one beside other and if I hit uh finish editing button and enter into my item here you can see that we have new section and also we have two new fields which are placed one beside other just uh that's because we set those width properties to be 50% and that um won't interrupt your data or your items in any way that system is created purely for easier organization through collections now let's click here on finish editing and let's say say how can you connect the tags to pull data from the collections well this pretty much Works similar to the webflow system instead of that here you're going uh to use this Advanced panel and you're going to use these fields here but because this is a separate topic and it needs a lot of explanation we have a separate video specifically for the collection system on our YouTube channel now let's transition and uh say a few words about live preview the live preview in my opinion as a developer is a very very useful feature here uh if I go here at the top of my homepage if and click on this URL my page will automatically be opened in my browser in my case it's Google Chrome and here every changes I made into the Builder as you can see here is that uh plugin uh that we created on that tag uh everything will be shown here and if I go back to the Builder and make some changes here let's name it let's uh change this text here to say Damien Brown test and if I again open it in live preview you can see that this text here is changed without needing me to publish whole project over and over and this change here is only uh visible to the admins your users won't see these changes until you publish your website and this is pretty good if you want to test some new stuff like plugins or animations like this and you don't want to keep publishing your website until you perfect something that you're making so this here is personally one of my uh favorites uh things on div hunt and I use it uh pretty commonly now uh this also here is uh working with the Styles so let's set really quickly let's set the class that we already created let's at BG right here and if I again go into the live preview you can see that this also works for the Styles and now the uh last thing that I'm going to mention this video is uh the spa or the single page application and again to compare div hunt with webflow webflow uh projects are made with the multi-page application system which uh for example makes this project into multiple pages and if I click here on portfolio my whole project will refresh and from the beginning it will start loading this new page and that will take up some time um specifically if you have some more pages animations and similar it will take a lot more times uh beside that div Hunt is made into a single page application when every single page is made into one application so you can see that uh as soon as I click on the link here the pages switch automatically because they're already preloaded and they are ready for me to use them so this is one pretty interesting thing uh about div hun because all of your project will be super fast and with that we came to the end of this video don't forget to check out our YouTube channel where you can find more detailed videos about features and functionalities that div hunt offers until the next time happy building

Channel: Divhunt

Views: 1,252

Keywords: no-code, website builder, rest api, drag & drop, CMS, webflow alternative, wordpress alternative, design, figma to html, development, custom css, spa, single page applicaton, fastest, hosting included, easy to use, speed, how to, build website, headless CMS, Strapi, Airtable, connect Hubspot, animations, for developers, for designers, Easy Website Creation, DIY Website Builder, Simple Website Creation, No-code CMS, Webflow Competitor, Wordpress Competitor, Best No-Code Platform

Id: 4dn9KlrXxm0

Length: 28min 50sec (1730 seconds)

Published: Tue Jun 04 2024