How to Create Multi-Column Layout Setup in Obsidian

obsidian is a markdown based editor and it does not have any support for multiple column layout but thanks to the obsidian Community there are lots of options available and in this video we'll talk about creating multiple column layouts in obsidian with the help of modular CSS layout this is Obsidian life o world that I created at the beginning of this year if you have not watched that life o setup video then I will recommend you to do it I will provide the link in the description so that you can directly check it out this layout is all possible with the help of multicolumn setup and in this video we'll talk about creating multiple columns that looks like this so this is from the obsidian lios Demo World I close this one and this is a VA where I'm creating this video and these are some examples about what is possible by the end of this video you will be able to create multiple columns that look like this and you also can create list columns like this so I close all of these notes modes let us go straight into the video and learn how you can create these for that we'll be using the CSS snippit you can go to Google and search for obsidian modular CSS layout and you will get this repository by this user ifmk I guess I'm pronouncing that name right so this is created by ifmk and this is a very useful CSS nibit and don't be confused with this repository this is not a plugin but a CSS snippit we'll need to add this CSS snippits to our snippit folder in our world first thing that we'll need to do is download the multiple column CSS the multiple column CSS allows you to reive either call out or unordered list and position them side by side there are also other things such as MCL Gallery CS MCL wide views but we'll only talk about MCL multicolumn you will need to download that CSS file first you can go to the release section over here and here you will have this ZIP file once it is downloaded you can click and open and it will have this three CSS nits MCL Gallery cards MCL multicolumn and MCL views now you'll need to move this MCL multigol CSS to your boards CSS snippet folder so I'll click on copy MCL multigol CSS now go back to your obsidian VA and you can easily go to the snippit for from settings go to appearance and over here you will have this CSS nippit section click on this folder icon and it will take you back to that s it folder and you can paste the MCL multic colum CSS over here now here we have the multiple column CSS file now let me show you how you can create multiple column layout with this MCL multiple column CSS there are a few different ways to create multiple columns first we'll start by creating multiple columns with call outs so I'll create a new note and write it multiple columns with call outs this call out setup takes advantage of obsidian call out and you can Nest multiple sub callouts within it here's how to create multiple column layout with call outs first you will need to create a multicolumn call out multicolumn call out is a custom call out created with the CSS so you can write multi Colum then you will need to create sub callouts inside this main multicolumn call out now let me create sub call outs over here info this is an info warning this is a warning I'll just create two sub callouts for now and now if I go to preview mode or even if I am in live preview mode this will display two columns first is the info call out then second one is the warning call out and all the content in this call out will be visible under this particular call out now you need to remember one thing that is when you create a sub call out you will need to separate the call outs by using a single angle bracket just like what I have done over here these two callouts are separated with a single angle bracket I'll just copy this and create four columns I'll leave one angle bracket if I go to preview mode now here are four columns with call outs you can also add other info here such as you can create list list one list two you can create headings I create headings over here heading to and then create list and it will look like this so this is the first method to create multiple column beout in obsidian by using the custom call out called multicolumn with the help of modular GSS layout now let's talk about second method that is to create a float call out I'll create a new note called as float call out float call out allows you to create a side note or info box either to the right side or either to the left side of the main note with other content wrapping around it here's how to create a float call out you can just create a normal call out I'll create a info call out now this is a simple info call out now let me write some content after this call out this okay I'll need to l space this is some spacing and paragraph after the call out if I go to reading mode now it will look like this but when you add left or right to this call out I'll write left if I go to preview it will look like this this text will look like a side note and you can also specify the size of this call out such as small which is the default one you can also write medium and large if I right left it will move to the right side right and it the call out will move to the right side always make sure that the call out is above the content that you want to have it wrapped around by default if you only specify left or right right now we have specified right large right and if you specify only left or right then it will not work in live preview mode when you are editing it will not be shown in two columns if you want that to happen then you can prepend with float you can write float large even if I am in uh editing mode it will work these two columns will be visible this is the second way to create multiple column layout in obsidian with the help of modular CSS layout now let's talk about the third method that is blank call out this is similar to the previous one that I talked about multiple column with call outs here is the multiple columns with call outs and we have the and we have four columns over here the blank call out is similar to this setup but it differentiates Itself by removing the decoration this can be useful in cases where you want to have a invisible container for the embedded content this here is a info call out and you can create a blank call out by just specifying a custom call out called app and if I go to preview now the decoration will be removed from this call out right blank and it will have no decoration it will only have the content the embedded content will be here but the decoration will disappear because because we are using the blank call out setup you will still need to use the multicolumn call out as the top level call out and this blank is a custom call out which you can use in the sub callouts now let's talk about another way that is list column call out I'll create a new note list column call out list column call out allows you to create multi column layout using unordered list but one thing that you have to understand is that this will only work in reading mode unlike the previous setups where you could make the layouts visible even in the live preview mode this is not possible in with this list colum call out so here's how you can do it you will need to create a unordered list I'll create a unordered list with okay let's create it with four items if I go to reading mode it will look like this because it's a simple markdown but you can add the # MCL list column and if I go to reading mode now it will look like this similar to this list column call out is list grid callout list grid call out allows you to create multiple columns and multiple rows using unordered list you can do this simply by changing this hashtag in the unordered list from MCL list column to MCL list grid if you go to preview mode it will look like this and this grid layout is better than the column layout you can also indent these list such as list Su list Su list one sublist two sublist one sublist 2 if you go to preview mode these will all be visible under this list now there is another setup which is similar to the list grid setup and this is list card setup and you can change this hashtag from MCL list grid to MCL list card and if you go to preview mode this setup will look like this a list card is similar to the list grid but has some extra customization to make it card like so these are some Basics on how you can create multiple column layouts in obsidian with the help of obsidian modular CSS layout by fmk you can explore more features from this documentation section like width control multicolumn CSS from modular CSS layout is a great way to enance your experience in obsidian this can help you to create your nodes better this can be useful espcially in cases where you want to create homepage setups or dashboard setups this will be very helpful that is all for this video in this video we talked about how you can use the multiple column CSS from modular CSS layout to create multiple column layout in your obsidian VA I hope you found this video useful and if you are enjoying my content you can support Me On patreon by the link in the description thank you for watching this video till now I hope you have a great time see you in the next video bye-bye

Channel: Prakash Joshi Pax

Views: 1,318

Keywords: obsidian, notetaking, personal knowledge management, Second brain, Obsidian tips, Obsidian learning, Obsidian app, Obsidian noteteaking tips, Obsidian multi columns

Id: gYN4Nt7AuQk

Length: 10min 55sec (655 seconds)

Published: Sat Mar 23 2024