{"id":"youtube:TbKB5RIuo1g","source":"youtube","sourceId":"TbKB5RIuo1g","account":"robotostudio","type":"video","title":"Improving page builders in Sanity CMS","body":"Are you working with page builders in Sanity? In this video, we'll show you how to get to the gold standard with minimal effort. Get following along and just for the effort, we'll even throw in the prompt for Cursor.\n\nLinks ↓\nThe Cursor prompt (gist) - https://gist.github.com/jonoroboto/e9...\n\nBook a meeting ↓\nhttps://robotostudio.com/call?ref=you...\n\nSocials ↓\nhttps://robotostudio.com/\nhttps://x.com/studioroboto\n  / 11290247  ","bodyFormat":"text","sourceUrl":"https://www.youtube.com/watch?v=TbKB5RIuo1g","canonicalUrl":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms","sourceUrls":[],"authorIds":[],"publishedAt":"2024-06-23T18:40:07.000Z","checkedAt":"2026-09-17T13:02:04.791Z","language":"en","visibility":"public","topics":["sanity","editorial-experience","ai"],"gaps":["Transcript speakers have not been individually verified."],"segments":[{"id":"segment-1","startMs":2190,"endMs":2200,"text":"hey how's it going I'm going to jump"},{"id":"segment-2","startMs":2200,"endMs":3669,"text":"hey how's it going I'm going to jump\nstraight in this is how to get your page"},{"id":"segment-3","startMs":3669,"endMs":3679,"text":"straight in this is how to get your page"},{"id":"segment-4","startMs":3679,"endMs":6070,"text":"straight in this is how to get your page\nBuilders from a sloppy not so good not"},{"id":"segment-5","startMs":6070,"endMs":6080,"text":"Builders from a sloppy not so good not"},{"id":"segment-6","startMs":6080,"endMs":8110,"text":"Builders from a sloppy not so good not\nso editor friendly version to a really"},{"id":"segment-7","startMs":8110,"endMs":8120,"text":"so editor friendly version to a really"},{"id":"segment-8","startMs":8120,"endMs":10830,"text":"so editor friendly version to a really\nreally nice gold standard page builder"},{"id":"segment-9","startMs":10830,"endMs":10840,"text":"really nice gold standard page builder"},{"id":"segment-10","startMs":10840,"endMs":13150,"text":"really nice gold standard page builder\nokay so you've probably seen this before"},{"id":"segment-11","startMs":13150,"endMs":13160,"text":"okay so you've probably seen this before"},{"id":"segment-12","startMs":13160,"endMs":15669,"text":"okay so you've probably seen this before\num this here is what a regular uh page"},{"id":"segment-13","startMs":15669,"endMs":15679,"text":"um this here is what a regular uh page"},{"id":"segment-14","startMs":15679,"endMs":17670,"text":"um this here is what a regular uh page\nbuilder would look like now you can see"},{"id":"segment-15","startMs":17670,"endMs":17680,"text":"builder would look like now you can see"},{"id":"segment-16","startMs":17680,"endMs":19230,"text":"builder would look like now you can see\nit only really has the title that's"},{"id":"segment-17","startMs":19230,"endMs":19240,"text":"it only really has the title that's"},{"id":"segment-18","startMs":19240,"endMs":21710,"text":"it only really has the title that's\nworking in here that's not so good what"},{"id":"segment-19","startMs":21710,"endMs":21720,"text":"working in here that's not so good what"},{"id":"segment-20","startMs":21720,"endMs":22910,"text":"working in here that's not so good what\nwe're going to do is we're going to fire"},{"id":"segment-21","startMs":22910,"endMs":22920,"text":"we're going to do is we're going to fire"},{"id":"segment-22","startMs":22920,"endMs":24710,"text":"we're going to do is we're going to fire\nthrough these very very quickly using"},{"id":"segment-23","startMs":24710,"endMs":24720,"text":"through these very very quickly using"},{"id":"segment-24","startMs":24720,"endMs":28349,"text":"through these very very quickly using\ncursor uh IDE which is an AI IDE super"},{"id":"segment-25","startMs":28349,"endMs":28359,"text":"cursor uh IDE which is an AI IDE super"},{"id":"segment-26","startMs":28359,"endMs":30429,"text":"cursor uh IDE which is an AI IDE super\nuseful I'm going to include the at the"},{"id":"segment-27","startMs":30429,"endMs":30439,"text":"useful I'm going to include the at the"},{"id":"segment-28","startMs":30439,"endMs":32109,"text":"useful I'm going to include the at the\nbottom uh but we're going to fix this up"},{"id":"segment-29","startMs":32109,"endMs":32119,"text":"bottom uh but we're going to fix this up"},{"id":"segment-30","startMs":32119,"endMs":34510,"text":"bottom uh but we're going to fix this up\nreal quick so let's take hero so I'm"},{"id":"segment-31","startMs":34510,"endMs":34520,"text":"real quick so let's take hero so I'm"},{"id":"segment-32","startMs":34520,"endMs":35590,"text":"real quick so let's take hero so I'm\ngoing to press command a I'm going to"},{"id":"segment-33","startMs":35590,"endMs":35600,"text":"going to press command a I'm going to"},{"id":"segment-34","startMs":35600,"endMs":37389,"text":"going to press command a I'm going to\npress command K and I'm going to say"},{"id":"segment-35","startMs":37389,"endMs":37399,"text":"press command K and I'm going to say"},{"id":"segment-36","startMs":37399,"endMs":41830,"text":"press command K and I'm going to say\nrefactor this to have an icon from"},{"id":"segment-37","startMs":41830,"endMs":41840,"text":"refactor this to have an icon from"},{"id":"segment-38","startMs":41840,"endMs":43310,"text":"refactor this to have an icon from\nsanity icons we're just going to use the"},{"id":"segment-39","startMs":43310,"endMs":43320,"text":"sanity icons we're just going to use the"},{"id":"segment-40","startMs":43320,"endMs":45190,"text":"sanity icons we're just going to use the\ndefault icon Library you can use lose"},{"id":"segment-41","startMs":45190,"endMs":45200,"text":"default icon Library you can use lose"},{"id":"segment-42","startMs":45200,"endMs":46510,"text":"default icon Library you can use lose\nside or any other version that you've"},{"id":"segment-43","startMs":46510,"endMs":46520,"text":"side or any other version that you've"},{"id":"segment-44","startMs":46520,"endMs":50630,"text":"side or any other version that you've\ngot um and include a preview with a"},{"id":"segment-45","startMs":50630,"endMs":50640,"text":"got um and include a preview with a"},{"id":"segment-46","startMs":50640,"endMs":53470,"text":"got um and include a preview with a\nfallback for the"},{"id":"segment-47","startMs":53470,"endMs":53480,"text":"fallback for the"},{"id":"segment-48","startMs":53480,"endMs":55470,"text":"fallback for the\nimage um is there anything else that we"},{"id":"segment-49","startMs":55470,"endMs":55480,"text":"image um is there anything else that we"},{"id":"segment-50","startMs":55480,"endMs":57670,"text":"image um is there anything else that we\nneed I think that's it so what it should"},{"id":"segment-51","startMs":57670,"endMs":57680,"text":"need I think that's it so what it should"},{"id":"segment-52","startMs":57680,"endMs":58750,"text":"need I think that's it so what it should\ndo is it should go through and you'll"},{"id":"segment-53","startMs":58750,"endMs":58760,"text":"do is it should go through and you'll"},{"id":"segment-54","startMs":58760,"endMs":60549,"text":"do is it should go through and you'll\nsee it's going to add the icon at the"},{"id":"segment-55","startMs":60549,"endMs":60559,"text":"see it's going to add the icon at the"},{"id":"segment-56","startMs":60559,"endMs":63389,"text":"see it's going to add the icon at the\ntop so icon image icon from sanity icons"},{"id":"segment-57","startMs":63389,"endMs":63399,"text":"top so icon image icon from sanity icons"},{"id":"segment-58","startMs":63399,"endMs":64829,"text":"top so icon image icon from sanity icons\nthe descriptions so because of the way"},{"id":"segment-59","startMs":64829,"endMs":64839,"text":"the descriptions so because of the way"},{"id":"segment-60","startMs":64839,"endMs":66390,"text":"the descriptions so because of the way\nthat I've set the prompt up it will"},{"id":"segment-61","startMs":66390,"endMs":66400,"text":"that I've set the prompt up it will"},{"id":"segment-62","startMs":66400,"endMs":68390,"text":"that I've set the prompt up it will\nalways populate the descriptions the"},{"id":"segment-63","startMs":68390,"endMs":68400,"text":"always populate the descriptions the"},{"id":"segment-64","startMs":68400,"endMs":70990,"text":"always populate the descriptions the\nbest guess for the first version um it"},{"id":"segment-65","startMs":70990,"endMs":71000,"text":"best guess for the first version um it"},{"id":"segment-66","startMs":71000,"endMs":72830,"text":"best guess for the first version um it\nactually uses my definition of a button"},{"id":"segment-67","startMs":72830,"endMs":72840,"text":"actually uses my definition of a button"},{"id":"segment-68","startMs":72840,"endMs":74109,"text":"actually uses my definition of a button\nhere but I'm going to remove that"},{"id":"segment-69","startMs":74109,"endMs":74119,"text":"here but I'm going to remove that"},{"id":"segment-70","startMs":74119,"endMs":76310,"text":"here but I'm going to remove that\nversion um so everything is good other"},{"id":"segment-71","startMs":76310,"endMs":76320,"text":"version um so everything is good other"},{"id":"segment-72","startMs":76320,"endMs":77630,"text":"version um so everything is good other\nthan that button so let's change that to"},{"id":"segment-73","startMs":77630,"endMs":77640,"text":"than that button so let's change that to"},{"id":"segment-74","startMs":77640,"endMs":78870,"text":"than that button so let's change that to\na string because this is a demo"},{"id":"segment-75","startMs":78870,"endMs":78880,"text":"a string because this is a demo"},{"id":"segment-76","startMs":78880,"endMs":80749,"text":"a string because this is a demo\nenvironment and you can see how we have"},{"id":"segment-77","startMs":80749,"endMs":80759,"text":"environment and you can see how we have"},{"id":"segment-78","startMs":80759,"endMs":83789,"text":"environment and you can see how we have\nthis Media or else an image icon um you"},{"id":"segment-79","startMs":83789,"endMs":83799,"text":"this Media or else an image icon um you"},{"id":"segment-80","startMs":83799,"endMs":85429,"text":"this Media or else an image icon um you\ncould also do things like if there isn't"},{"id":"segment-81","startMs":85429,"endMs":85439,"text":"could also do things like if there isn't"},{"id":"segment-82","startMs":85439,"endMs":88510,"text":"could also do things like if there isn't\na title make it so um title needs to be"},{"id":"segment-83","startMs":88510,"endMs":88520,"text":"a title make it so um title needs to be"},{"id":"segment-84","startMs":88520,"endMs":93630,"text":"a title make it so um title needs to be\nset so title needs to be set that's"},{"id":"segment-85","startMs":93630,"endMs":93640,"text":"set so title needs to be set that's"},{"id":"segment-86","startMs":93640,"endMs":95230,"text":"set so title needs to be set that's\nanother nice one that's in there so"},{"id":"segment-87","startMs":95230,"endMs":95240,"text":"another nice one that's in there so"},{"id":"segment-88","startMs":95240,"endMs":98710,"text":"another nice one that's in there so\nlet's see how this looks so data in here"},{"id":"segment-89","startMs":98710,"endMs":98720,"text":"let's see how this looks so data in here"},{"id":"segment-90","startMs":98720,"endMs":100870,"text":"let's see how this looks so data in here\nlooks good to me I removed data in here"},{"id":"segment-91","startMs":100870,"endMs":100880,"text":"looks good to me I removed data in here"},{"id":"segment-92","startMs":100880,"endMs":103710,"text":"looks good to me I removed data in here\nfingers crossed title needs to be set"},{"id":"segment-93","startMs":103710,"endMs":103720,"text":"fingers crossed title needs to be set"},{"id":"segment-94","startMs":103720,"endMs":105149,"text":"fingers crossed title needs to be set\ncool you can do whatever you feel like"},{"id":"segment-95","startMs":105149,"endMs":105159,"text":"cool you can do whatever you feel like"},{"id":"segment-96","startMs":105159,"endMs":106630,"text":"cool you can do whatever you feel like\nin this and we going to do the same"},{"id":"segment-97","startMs":106630,"endMs":106640,"text":"in this and we going to do the same"},{"id":"segment-98","startMs":106640,"endMs":108709,"text":"in this and we going to do the same\nthing um so we can do this for another"},{"id":"segment-99","startMs":108709,"endMs":108719,"text":"thing um so we can do this for another"},{"id":"segment-100","startMs":108719,"endMs":110190,"text":"thing um so we can do this for another\none just to show you the same example"},{"id":"segment-101","startMs":110190,"endMs":110200,"text":"one just to show you the same example"},{"id":"segment-102","startMs":110200,"endMs":113230,"text":"one just to show you the same example\nlet's do it for Split Image um so"},{"id":"segment-103","startMs":113230,"endMs":113240,"text":"let's do it for Split Image um so"},{"id":"segment-104","startMs":113240,"endMs":117429,"text":"let's do it for Split Image um so\nrefactor to include a preview with"},{"id":"segment-105","startMs":117429,"endMs":117439,"text":"refactor to include a preview with"},{"id":"segment-106","startMs":117439,"endMs":121709,"text":"refactor to include a preview with\nfullbacks for the title and image um"},{"id":"segment-107","startMs":121709,"endMs":121719,"text":"fullbacks for the title and image um"},{"id":"segment-108","startMs":121719,"endMs":126270,"text":"fullbacks for the title and image um\nalso include an icon from sanity icons"},{"id":"segment-109","startMs":126270,"endMs":126280,"text":"also include an icon from sanity icons"},{"id":"segment-110","startMs":126280,"endMs":127350,"text":"also include an icon from sanity icons\nand that should be it there should be"},{"id":"segment-111","startMs":127350,"endMs":127360,"text":"and that should be it there should be"},{"id":"segment-112","startMs":127360,"endMs":129389,"text":"and that should be it there should be\nenough to go through the whole thing um"},{"id":"segment-113","startMs":129389,"endMs":129399,"text":"enough to go through the whole thing um"},{"id":"segment-114","startMs":129399,"endMs":131390,"text":"enough to go through the whole thing um\ngive you good descriptions hopefully"},{"id":"segment-115","startMs":131390,"endMs":131400,"text":"give you good descriptions hopefully"},{"id":"segment-116","startMs":131400,"endMs":133750,"text":"give you good descriptions hopefully\ngive you an icon okay so it's image icon"},{"id":"segment-117","startMs":133750,"endMs":133760,"text":"give you an icon okay so it's image icon"},{"id":"segment-118","startMs":133760,"endMs":135309,"text":"give you an icon okay so it's image icon\nagain because it's Split Image you"},{"id":"segment-119","startMs":135309,"endMs":135319,"text":"again because it's Split Image you"},{"id":"segment-120","startMs":135319,"endMs":137070,"text":"again because it's Split Image you\nthere's more icons out there but for the"},{"id":"segment-121","startMs":137070,"endMs":137080,"text":"there's more icons out there but for the"},{"id":"segment-122","startMs":137080,"endMs":139390,"text":"there's more icons out there but for the\nsake of this demo perfectly fine so"},{"id":"segment-123","startMs":139390,"endMs":139400,"text":"sake of this demo perfectly fine so"},{"id":"segment-124","startMs":139400,"endMs":141229,"text":"sake of this demo perfectly fine so\nyou'll see this go through and this"},{"id":"segment-125","startMs":141229,"endMs":141239,"text":"you'll see this go through and this"},{"id":"segment-126","startMs":141239,"endMs":143550,"text":"you'll see this go through and this\nshould ultimately make a much better"},{"id":"segment-127","startMs":143550,"endMs":143560,"text":"should ultimately make a much better"},{"id":"segment-128","startMs":143560,"endMs":145509,"text":"should ultimately make a much better\nexperience and this is not all this is"},{"id":"segment-129","startMs":145509,"endMs":145519,"text":"experience and this is not all this is"},{"id":"segment-130","startMs":145519,"endMs":147229,"text":"experience and this is not all this is\nkind of like the first layer so let's"},{"id":"segment-131","startMs":147229,"endMs":147239,"text":"kind of like the first layer so let's"},{"id":"segment-132","startMs":147239,"endMs":149350,"text":"kind of like the first layer so let's\nhave a quick look down here beautiful"},{"id":"segment-133","startMs":149350,"endMs":149360,"text":"have a quick look down here beautiful"},{"id":"segment-134","startMs":149360,"endMs":150750,"text":"have a quick look down here beautiful\nit's remember the same thing I set on"},{"id":"segment-135","startMs":150750,"endMs":150760,"text":"it's remember the same thing I set on"},{"id":"segment-136","startMs":150760,"endMs":152270,"text":"it's remember the same thing I set on\nthe previous one it's gone through the"},{"id":"segment-137","startMs":152270,"endMs":152280,"text":"the previous one it's gone through the"},{"id":"segment-138","startMs":152280,"endMs":154070,"text":"the previous one it's gone through the\nprocess of doing preview and then"},{"id":"segment-139","startMs":154070,"endMs":154080,"text":"process of doing preview and then"},{"id":"segment-140","startMs":154080,"endMs":157030,"text":"process of doing preview and then\nprepare select and then prepare um so"},{"id":"segment-141","startMs":157030,"endMs":157040,"text":"prepare select and then prepare um so"},{"id":"segment-142","startMs":157040,"endMs":161309,"text":"prepare select and then prepare um so\ngreat this is great let me flip"},{"id":"segment-143","startMs":163710,"endMs":163720,"text":"back interesting I seem to have lost the"},{"id":"segment-144","startMs":163720,"endMs":165509,"text":"back interesting I seem to have lost the\nti the sub oh I know something that"},{"id":"segment-145","startMs":165509,"endMs":165519,"text":"ti the sub oh I know something that"},{"id":"segment-146","startMs":165519,"endMs":167190,"text":"ti the sub oh I know something that\nwe're missing uh so something that I"},{"id":"segment-147","startMs":167190,"endMs":167200,"text":"we're missing uh so something that I"},{"id":"segment-148","startMs":167200,"endMs":168990,"text":"we're missing uh so something that I\nalways like to have inside of here is a"},{"id":"segment-149","startMs":168990,"endMs":169000,"text":"always like to have inside of here is a"},{"id":"segment-150","startMs":169000,"endMs":170949,"text":"always like to have inside of here is a\nsubtitle so I like it to say whatever"},{"id":"segment-151","startMs":170949,"endMs":170959,"text":"subtitle so I like it to say whatever"},{"id":"segment-152","startMs":170959,"endMs":173070,"text":"subtitle so I like it to say whatever\nthe actual block is so make sure we have"},{"id":"segment-153","startMs":173070,"endMs":173080,"text":"the actual block is so make sure we have"},{"id":"segment-154","startMs":173080,"endMs":175830,"text":"the actual block is so make sure we have\nthat on both of them so uh this should"},{"id":"segment-155","startMs":175830,"endMs":175840,"text":"that on both of them so uh this should"},{"id":"segment-156","startMs":175840,"endMs":179430,"text":"that on both of them so uh this should\nbe a hero so let's flip back and you see"},{"id":"segment-157","startMs":179430,"endMs":179440,"text":"be a hero so let's flip back and you see"},{"id":"segment-158","startMs":179440,"endMs":181550,"text":"be a hero so let's flip back and you see\nlook here hero nice and easy to identify"},{"id":"segment-159","startMs":181550,"endMs":181560,"text":"look here hero nice and easy to identify"},{"id":"segment-160","startMs":181560,"endMs":182990,"text":"look here hero nice and easy to identify\nSplit Image especially when they both"},{"id":"segment-161","startMs":182990,"endMs":183000,"text":"Split Image especially when they both"},{"id":"segment-162","startMs":183000,"endMs":185149,"text":"Split Image especially when they both\nhave the same icon so this is good this"},{"id":"segment-163","startMs":185149,"endMs":185159,"text":"have the same icon so this is good this"},{"id":"segment-164","startMs":185159,"endMs":187070,"text":"have the same icon so this is good this\nis the first step I'd say that we've now"},{"id":"segment-165","startMs":187070,"endMs":187080,"text":"is the first step I'd say that we've now"},{"id":"segment-166","startMs":187080,"endMs":190030,"text":"is the first step I'd say that we've now\nmoved from like an F tier page builder"},{"id":"segment-167","startMs":190030,"endMs":190040,"text":"moved from like an F tier page builder"},{"id":"segment-168","startMs":190040,"endMs":191430,"text":"moved from like an F tier page builder\nto a you know a"},{"id":"segment-169","startMs":191430,"endMs":191440,"text":"to a you know a"},{"id":"segment-170","startMs":191440,"endMs":193789,"text":"to a you know a\nC+ now what I want to show you is the"},{"id":"segment-171","startMs":193789,"endMs":193799,"text":"C+ now what I want to show you is the"},{"id":"segment-172","startMs":193799,"endMs":195110,"text":"C+ now what I want to show you is the\nlatest and the greatest stuff from"},{"id":"segment-173","startMs":195110,"endMs":195120,"text":"latest and the greatest stuff from"},{"id":"segment-174","startMs":195120,"endMs":197630,"text":"latest and the greatest stuff from\nsanity so I'll flip here very quickly um"},{"id":"segment-175","startMs":197630,"endMs":197640,"text":"sanity so I'll flip here very quickly um"},{"id":"segment-176","startMs":197640,"endMs":199670,"text":"sanity so I'll flip here very quickly um\nand I'll go to the actual page builder"},{"id":"segment-177","startMs":199670,"endMs":199680,"text":"and I'll go to the actual page builder"},{"id":"segment-178","startMs":199680,"endMs":201509,"text":"and I'll go to the actual page builder\nitself now this is a very very simple"},{"id":"segment-179","startMs":201509,"endMs":201519,"text":"itself now this is a very very simple"},{"id":"segment-180","startMs":201519,"endMs":203190,"text":"itself now this is a very very simple\nPage Builder and something I've done"},{"id":"segment-181","startMs":203190,"endMs":203200,"text":"Page Builder and something I've done"},{"id":"segment-182","startMs":203200,"endMs":206390,"text":"Page Builder and something I've done\nearlier is just here so this is the"},{"id":"segment-183","startMs":206390,"endMs":206400,"text":"earlier is just here so this is the"},{"id":"segment-184","startMs":206400,"endMs":208589,"text":"earlier is just here so this is the\ninsert menu okay so this is you put it"},{"id":"segment-185","startMs":208589,"endMs":208599,"text":"insert menu okay so this is you put it"},{"id":"segment-186","startMs":208599,"endMs":210710,"text":"insert menu okay so this is you put it\nin options insert menu and you have"},{"id":"segment-187","startMs":210710,"endMs":210720,"text":"in options insert menu and you have"},{"id":"segment-188","startMs":210720,"endMs":212470,"text":"in options insert menu and you have\nthings like uh the ability to actually"},{"id":"segment-189","startMs":212470,"endMs":212480,"text":"things like uh the ability to actually"},{"id":"segment-190","startMs":212480,"endMs":213990,"text":"things like uh the ability to actually\ngroup these so for example we could"},{"id":"segment-191","startMs":213990,"endMs":214000,"text":"group these so for example we could"},{"id":"segment-192","startMs":214000,"endMs":216350,"text":"group these so for example we could\ngroup The introductory blocks which is a"},{"id":"segment-193","startMs":216350,"endMs":216360,"text":"group The introductory blocks which is a"},{"id":"segment-194","startMs":216360,"endMs":218509,"text":"group The introductory blocks which is a\nhero storytelling blocks which may be a"},{"id":"segment-195","startMs":218509,"endMs":218519,"text":"hero storytelling blocks which may be a"},{"id":"segment-196","startMs":218519,"endMs":220949,"text":"hero storytelling blocks which may be a\nCarousel and a Split Image upsell blocks"},{"id":"segment-197","startMs":220949,"endMs":220959,"text":"Carousel and a Split Image upsell blocks"},{"id":"segment-198","startMs":220959,"endMs":223270,"text":"Carousel and a Split Image upsell blocks\nwhich is all three of those um and the"},{"id":"segment-199","startMs":223270,"endMs":223280,"text":"which is all three of those um and the"},{"id":"segment-200","startMs":223280,"endMs":225429,"text":"which is all three of those um and the\nability to give different types of views"},{"id":"segment-201","startMs":225429,"endMs":225439,"text":"ability to give different types of views"},{"id":"segment-202","startMs":225439,"endMs":227190,"text":"ability to give different types of views\nso we have this View and we also have a"},{"id":"segment-203","startMs":227190,"endMs":227200,"text":"so we have this View and we also have a"},{"id":"segment-204","startMs":227200,"endMs":229550,"text":"so we have this View and we also have a\ngrid view but here's the here's the most"},{"id":"segment-205","startMs":229550,"endMs":229560,"text":"grid view but here's the here's the most"},{"id":"segment-206","startMs":229560,"endMs":230990,"text":"grid view but here's the here's the most\nimportant thing to take away from the"},{"id":"segment-207","startMs":230990,"endMs":231000,"text":"important thing to take away from the"},{"id":"segment-208","startMs":231000,"endMs":233630,"text":"important thing to take away from the\nwhole video the on the grid view we have"},{"id":"segment-209","startMs":233630,"endMs":233640,"text":"whole video the on the grid view we have"},{"id":"segment-210","startMs":233640,"endMs":236110,"text":"whole video the on the grid view we have\nthis thing called preview image URL"},{"id":"segment-211","startMs":236110,"endMs":236120,"text":"this thing called preview image URL"},{"id":"segment-212","startMs":236120,"endMs":237830,"text":"this thing called preview image URL\nwhich basically reads the schema type"},{"id":"segment-213","startMs":237830,"endMs":237840,"text":"which basically reads the schema type"},{"id":"segment-214","startMs":237840,"endMs":240509,"text":"which basically reads the schema type\nname from the static so keep an eye out"},{"id":"segment-215","startMs":240509,"endMs":240519,"text":"name from the static so keep an eye out"},{"id":"segment-216","startMs":240519,"endMs":242229,"text":"name from the static so keep an eye out\non the static over here where I've got"},{"id":"segment-217","startMs":242229,"endMs":242239,"text":"on the static over here where I've got"},{"id":"segment-218","startMs":242239,"endMs":245750,"text":"on the static over here where I've got\nCarousel PNG hero.png and split"},{"id":"segment-219","startMs":245750,"endMs":245760,"text":"Carousel PNG hero.png and split"},{"id":"segment-220","startMs":245760,"endMs":248710,"text":"Carousel PNG hero.png and split\nimage.png that directly correlates with"},{"id":"segment-221","startMs":248710,"endMs":248720,"text":"image.png that directly correlates with"},{"id":"segment-222","startMs":248720,"endMs":251869,"text":"image.png that directly correlates with\nthe name of each of these um blocks so"},{"id":"segment-223","startMs":251869,"endMs":251879,"text":"the name of each of these um blocks so"},{"id":"segment-224","startMs":251879,"endMs":253630,"text":"the name of each of these um blocks so\nwatch this I'm going to save this I'm"},{"id":"segment-225","startMs":253630,"endMs":253640,"text":"watch this I'm going to save this I'm"},{"id":"segment-226","startMs":253640,"endMs":255030,"text":"watch this I'm going to save this I'm\ngoing to flip"},{"id":"segment-227","startMs":255030,"endMs":255040,"text":"going to flip"},{"id":"segment-228","startMs":255040,"endMs":257749,"text":"going to flip\nback and I'm going to go press add item"},{"id":"segment-229","startMs":257749,"endMs":257759,"text":"back and I'm going to go press add item"},{"id":"segment-230","startMs":257759,"endMs":258990,"text":"back and I'm going to go press add item\nand you're going to see this incredible"},{"id":"segment-231","startMs":258990,"endMs":259000,"text":"and you're going to see this incredible"},{"id":"segment-232","startMs":259000,"endMs":260909,"text":"and you're going to see this incredible\nnew way and again all the icons of this"},{"id":"segment-233","startMs":260909,"endMs":260919,"text":"new way and again all the icons of this"},{"id":"segment-234","startMs":260919,"endMs":262870,"text":"new way and again all the icons of this\nhave broken through so uh again I could"},{"id":"segment-235","startMs":262870,"endMs":262880,"text":"have broken through so uh again I could"},{"id":"segment-236","startMs":262880,"endMs":264110,"text":"have broken through so uh again I could\ndo the same for Carousel but I'm just"},{"id":"segment-237","startMs":264110,"endMs":264120,"text":"do the same for Carousel but I'm just"},{"id":"segment-238","startMs":264120,"endMs":265950,"text":"do the same for Carousel but I'm just\ngoing to keep this nice and simple um"},{"id":"segment-239","startMs":265950,"endMs":265960,"text":"going to keep this nice and simple um"},{"id":"segment-240","startMs":265960,"endMs":267110,"text":"going to keep this nice and simple um\nbut you can see how when you flip"},{"id":"segment-241","startMs":267110,"endMs":267120,"text":"but you can see how when you flip"},{"id":"segment-242","startMs":267120,"endMs":269070,"text":"but you can see how when you flip\nthrough these you can see all the"},{"id":"segment-243","startMs":269070,"endMs":269080,"text":"through these you can see all the"},{"id":"segment-244","startMs":269080,"endMs":270870,"text":"through these you can see all the\ndifferent items inside of there and"},{"id":"segment-245","startMs":270870,"endMs":270880,"text":"different items inside of there and"},{"id":"segment-246","startMs":270880,"endMs":272469,"text":"different items inside of there and\nthat's pretty cool so we're probably up"},{"id":"segment-247","startMs":272469,"endMs":272479,"text":"that's pretty cool so we're probably up"},{"id":"segment-248","startMs":272479,"endMs":275350,"text":"that's pretty cool so we're probably up\nto a B+ but get ready here's the AAR"},{"id":"segment-249","startMs":275350,"endMs":275360,"text":"to a B+ but get ready here's the AAR"},{"id":"segment-250","startMs":275360,"endMs":277990,"text":"to a B+ but get ready here's the AAR\nversion you hit this grid and boom you"},{"id":"segment-251","startMs":277990,"endMs":278000,"text":"version you hit this grid and boom you"},{"id":"segment-252","startMs":278000,"endMs":280670,"text":"version you hit this grid and boom you\nsee exactly what is going to get put"},{"id":"segment-253","startMs":280670,"endMs":280680,"text":"see exactly what is going to get put"},{"id":"segment-254","startMs":280680,"endMs":282510,"text":"see exactly what is going to get put\ninto the page now if you want to go a"},{"id":"segment-255","startMs":282510,"endMs":282520,"text":"into the page now if you want to go a"},{"id":"segment-256","startMs":282520,"endMs":283629,"text":"into the page now if you want to go a\nlittle bit further and you want to make"},{"id":"segment-257","startMs":283629,"endMs":283639,"text":"little bit further and you want to make"},{"id":"segment-258","startMs":283639,"endMs":285270,"text":"little bit further and you want to make\nthis a little bit nicer I would"},{"id":"segment-259","startMs":285270,"endMs":285280,"text":"this a little bit nicer I would"},{"id":"segment-260","startMs":285280,"endMs":287270,"text":"this a little bit nicer I would\nrecommend keeping the same canvas size"},{"id":"segment-261","startMs":287270,"endMs":287280,"text":"recommend keeping the same canvas size"},{"id":"segment-262","startMs":287280,"endMs":289390,"text":"recommend keeping the same canvas size\nfor each of these thumbnails I haven't"},{"id":"segment-263","startMs":289390,"endMs":289400,"text":"for each of these thumbnails I haven't"},{"id":"segment-264","startMs":289400,"endMs":291469,"text":"for each of these thumbnails I haven't\ndone it but it's going to make it look a"},{"id":"segment-265","startMs":291469,"endMs":291479,"text":"done it but it's going to make it look a"},{"id":"segment-266","startMs":291479,"endMs":293390,"text":"done it but it's going to make it look a\nlot better and a lot more consistent"},{"id":"segment-267","startMs":293390,"endMs":293400,"text":"lot better and a lot more consistent"},{"id":"segment-268","startMs":293400,"endMs":295469,"text":"lot better and a lot more consistent\nhowever for the sake of this demo this"},{"id":"segment-269","startMs":295469,"endMs":295479,"text":"however for the sake of this demo this"},{"id":"segment-270","startMs":295479,"endMs":296990,"text":"however for the sake of this demo this\nlooks slick and you know exactly what"},{"id":"segment-271","startMs":296990,"endMs":297000,"text":"looks slick and you know exactly what"},{"id":"segment-272","startMs":297000,"endMs":298110,"text":"looks slick and you know exactly what\nyou're getting yourself into you know"},{"id":"segment-273","startMs":298110,"endMs":298120,"text":"you're getting yourself into you know"},{"id":"segment-274","startMs":298120,"endMs":299310,"text":"you're getting yourself into you know\nwhat the title's going to be doing you"},{"id":"segment-275","startMs":299310,"endMs":299320,"text":"what the title's going to be doing you"},{"id":"segment-276","startMs":299320,"endMs":300390,"text":"what the title's going to be doing you\nknow what the description is going to be"},{"id":"segment-277","startMs":300390,"endMs":300400,"text":"know what the description is going to be"},{"id":"segment-278","startMs":300400,"endMs":302510,"text":"know what the description is going to be\ndoing before you even get the live"},{"id":"segment-279","startMs":302510,"endMs":302520,"text":"doing before you even get the live"},{"id":"segment-280","startMs":302520,"endMs":305070,"text":"doing before you even get the live\npreview working so this is one of those"},{"id":"segment-281","startMs":305070,"endMs":305080,"text":"preview working so this is one of those"},{"id":"segment-282","startMs":305080,"endMs":307029,"text":"preview working so this is one of those\ngreat user experience little tips that"},{"id":"segment-283","startMs":307029,"endMs":307039,"text":"great user experience little tips that"},{"id":"segment-284","startMs":307039,"endMs":309070,"text":"great user experience little tips that\nmake your whole editorial experience"},{"id":"segment-285","startMs":309070,"endMs":309080,"text":"make your whole editorial experience"},{"id":"segment-286","startMs":309080,"endMs":311350,"text":"make your whole editorial experience\nthat much better hope this has helped"},{"id":"segment-287","startMs":311350,"endMs":311360,"text":"that much better hope this has helped"},{"id":"segment-288","startMs":311360,"endMs":315440,"text":"that much better hope this has helped\nhave a great day take care"}],"transcript":"hey how's it going I'm going to jump\nhey how's it going I'm going to jump\nstraight in this is how to get your page\nstraight in this is how to get your page\nstraight in this is how to get your page\nBuilders from a sloppy not so good not\nBuilders from a sloppy not so good not\nBuilders from a sloppy not so good not\nso editor friendly version to a really\nso editor friendly version to a really\nso editor friendly version to a really\nreally nice gold standard page builder\nreally nice gold standard page builder\nreally nice gold standard page builder\nokay so you've probably seen this before\nokay so you've probably seen this before\nokay so you've probably seen this before\num this here is what a regular uh page\num this here is what a regular uh page\num this here is what a regular uh page\nbuilder would look like now you can see\nbuilder would look like now you can see\nbuilder would look like now you can see\nit only really has the title that's\nit only really has the title that's\nit only really has the title that's\nworking in here that's not so good what\nworking in here that's not so good what\nworking in here that's not so good what\nwe're going to do is we're going to fire\nwe're going to do is we're going to fire\nwe're going to do is we're going to fire\nthrough these very very quickly using\nthrough these very very quickly using\nthrough these very very quickly using\ncursor uh IDE which is an AI IDE super\ncursor uh IDE which is an AI IDE super\ncursor uh IDE which is an AI IDE super\nuseful I'm going to include the at the\nuseful I'm going to include the at the\nuseful I'm going to include the at the\nbottom uh but we're going to fix this up\nbottom uh but we're going to fix this up\nbottom uh but we're going to fix this up\nreal quick so let's take hero so I'm\nreal quick so let's take hero so I'm\nreal quick so let's take hero so I'm\ngoing to press command a I'm going to\ngoing to press command a I'm going to\ngoing to press command a I'm going to\npress command K and I'm going to say\npress command K and I'm going to say\npress command K and I'm going to say\nrefactor this to have an icon from\nrefactor this to have an icon from\nrefactor this to have an icon from\nsanity icons we're just going to use the\nsanity icons we're just going to use the\nsanity icons we're just going to use the\ndefault icon Library you can use lose\ndefault icon Library you can use lose\ndefault icon Library you can use lose\nside or any other version that you've\nside or any other version that you've\nside or any other version that you've\ngot um and include a preview with a\ngot um and include a preview with a\ngot um and include a preview with a\nfallback for the\nfallback for the\nfallback for the\nimage um is there anything else that we\nimage um is there anything else that we\nimage um is there anything else that we\nneed I think that's it so what it should\nneed I think that's it so what it should\nneed I think that's it so what it should\ndo is it should go through and you'll\ndo is it should go through and you'll\ndo is it should go through and you'll\nsee it's going to add the icon at the\nsee it's going to add the icon at the\nsee it's going to add the icon at the\ntop so icon image icon from sanity icons\ntop so icon image icon from sanity icons\ntop so icon image icon from sanity icons\nthe descriptions so because of the way\nthe descriptions so because of the way\nthe descriptions so because of the way\nthat I've set the prompt up it will\nthat I've set the prompt up it will\nthat I've set the prompt up it will\nalways populate the descriptions the\nalways populate the descriptions the\nalways populate the descriptions the\nbest guess for the first version um it\nbest guess for the first version um it\nbest guess for the first version um it\nactually uses my definition of a button\nactually uses my definition of a button\nactually uses my definition of a button\nhere but I'm going to remove that\nhere but I'm going to remove that\nhere but I'm going to remove that\nversion um so everything is good other\nversion um so everything is good other\nversion um so everything is good other\nthan that button so let's change that to\nthan that button so let's change that to\nthan that button so let's change that to\na string because this is a demo\na string because this is a demo\na string because this is a demo\nenvironment and you can see how we have\nenvironment and you can see how we have\nenvironment and you can see how we have\nthis Media or else an image icon um you\nthis Media or else an image icon um you\nthis Media or else an image icon um you\ncould also do things like if there isn't\ncould also do things like if there isn't\ncould also do things like if there isn't\na title make it so um title needs to be\na title make it so um title needs to be\na title make it so um title needs to be\nset so title needs to be set that's\nset so title needs to be set that's\nset so title needs to be set that's\nanother nice one that's in there so\nanother nice one that's in there so\nanother nice one that's in there so\nlet's see how this looks so data in here\nlet's see how this looks so data in here\nlet's see how this looks so data in here\nlooks good to me I removed data in here\nlooks good to me I removed data in here\nlooks good to me I removed data in here\nfingers crossed title needs to be set\nfingers crossed title needs to be set\nfingers crossed title needs to be set\ncool you can do whatever you feel like\ncool you can do whatever you feel like\ncool you can do whatever you feel like\nin this and we going to do the same\nin this and we going to do the same\nin this and we going to do the same\nthing um so we can do this for another\nthing um so we can do this for another\nthing um so we can do this for another\none just to show you the same example\none just to show you the same example\none just to show you the same example\nlet's do it for Split Image um so\nlet's do it for Split Image um so\nlet's do it for Split Image um so\nrefactor to include a preview with\nrefactor to include a preview with\nrefactor to include a preview with\nfullbacks for the title and image um\nfullbacks for the title and image um\nfullbacks for the title and image um\nalso include an icon from sanity icons\nalso include an icon from sanity icons\nalso include an icon from sanity icons\nand that should be it there should be\nand that should be it there should be\nand that should be it there should be\nenough to go through the whole thing um\nenough to go through the whole thing um\nenough to go through the whole thing um\ngive you good descriptions hopefully\ngive you good descriptions hopefully\ngive you good descriptions hopefully\ngive you an icon okay so it's image icon\ngive you an icon okay so it's image icon\ngive you an icon okay so it's image icon\nagain because it's Split Image you\nagain because it's Split Image you\nagain because it's Split Image you\nthere's more icons out there but for the\nthere's more icons out there but for the\nthere's more icons out there but for the\nsake of this demo perfectly fine so\nsake of this demo perfectly fine so\nsake of this demo perfectly fine so\nyou'll see this go through and this\nyou'll see this go through and this\nyou'll see this go through and this\nshould ultimately make a much better\nshould ultimately make a much better\nshould ultimately make a much better\nexperience and this is not all this is\nexperience and this is not all this is\nexperience and this is not all this is\nkind of like the first layer so let's\nkind of like the first layer so let's\nkind of like the first layer so let's\nhave a quick look down here beautiful\nhave a quick look down here beautiful\nhave a quick look down here beautiful\nit's remember the same thing I set on\nit's remember the same thing I set on\nit's remember the same thing I set on\nthe previous one it's gone through the\nthe previous one it's gone through the\nthe previous one it's gone through the\nprocess of doing preview and then\nprocess of doing preview and then\nprocess of doing preview and then\nprepare select and then prepare um so\nprepare select and then prepare um so\nprepare select and then prepare um so\ngreat this is great let me flip\nback interesting I seem to have lost the\nback interesting I seem to have lost the\nti the sub oh I know something that\nti the sub oh I know something that\nti the sub oh I know something that\nwe're missing uh so something that I\nwe're missing uh so something that I\nwe're missing uh so something that I\nalways like to have inside of here is a\nalways like to have inside of here is a\nalways like to have inside of here is a\nsubtitle so I like it to say whatever\nsubtitle so I like it to say whatever\nsubtitle so I like it to say whatever\nthe actual block is so make sure we have\nthe actual block is so make sure we have\nthe actual block is so make sure we have\nthat on both of them so uh this should\nthat on both of them so uh this should\nthat on both of them so uh this should\nbe a hero so let's flip back and you see\nbe a hero so let's flip back and you see\nbe a hero so let's flip back and you see\nlook here hero nice and easy to identify\nlook here hero nice and easy to identify\nlook here hero nice and easy to identify\nSplit Image especially when they both\nSplit Image especially when they both\nSplit Image especially when they both\nhave the same icon so this is good this\nhave the same icon so this is good this\nhave the same icon so this is good this\nis the first step I'd say that we've now\nis the first step I'd say that we've now\nis the first step I'd say that we've now\nmoved from like an F tier page builder\nmoved from like an F tier page builder\nmoved from like an F tier page builder\nto a you know a\nto a you know a\nto a you know a\nC+ now what I want to show you is the\nC+ now what I want to show you is the\nC+ now what I want to show you is the\nlatest and the greatest stuff from\nlatest and the greatest stuff from\nlatest and the greatest stuff from\nsanity so I'll flip here very quickly um\nsanity so I'll flip here very quickly um\nsanity so I'll flip here very quickly um\nand I'll go to the actual page builder\nand I'll go to the actual page builder\nand I'll go to the actual page builder\nitself now this is a very very simple\nitself now this is a very very simple\nitself now this is a very very simple\nPage Builder and something I've done\nPage Builder and something I've done\nPage Builder and something I've done\nearlier is just here so this is the\nearlier is just here so this is the\nearlier is just here so this is the\ninsert menu okay so this is you put it\ninsert menu okay so this is you put it\ninsert menu okay so this is you put it\nin options insert menu and you have\nin options insert menu and you have\nin options insert menu and you have\nthings like uh the ability to actually\nthings like uh the ability to actually\nthings like uh the ability to actually\ngroup these so for example we could\ngroup these so for example we could\ngroup these so for example we could\ngroup The introductory blocks which is a\ngroup The introductory blocks which is a\ngroup The introductory blocks which is a\nhero storytelling blocks which may be a\nhero storytelling blocks which may be a\nhero storytelling blocks which may be a\nCarousel and a Split Image upsell blocks\nCarousel and a Split Image upsell blocks\nCarousel and a Split Image upsell blocks\nwhich is all three of those um and the\nwhich is all three of those um and the\nwhich is all three of those um and the\nability to give different types of views\nability to give different types of views\nability to give different types of views\nso we have this View and we also have a\nso we have this View and we also have a\nso we have this View and we also have a\ngrid view but here's the here's the most\ngrid view but here's the here's the most\ngrid view but here's the here's the most\nimportant thing to take away from the\nimportant thing to take away from the\nimportant thing to take away from the\nwhole video the on the grid view we have\nwhole video the on the grid view we have\nwhole video the on the grid view we have\nthis thing called preview image URL\nthis thing called preview image URL\nthis thing called preview image URL\nwhich basically reads the schema type\nwhich basically reads the schema type\nwhich basically reads the schema type\nname from the static so keep an eye out\nname from the static so keep an eye out\nname from the static so keep an eye out\non the static over here where I've got\non the static over here where I've got\non the static over here where I've got\nCarousel PNG hero.png and split\nCarousel PNG hero.png and split\nCarousel PNG hero.png and split\nimage.png that directly correlates with\nimage.png that directly correlates with\nimage.png that directly correlates with\nthe name of each of these um blocks so\nthe name of each of these um blocks so\nthe name of each of these um blocks so\nwatch this I'm going to save this I'm\nwatch this I'm going to save this I'm\nwatch this I'm going to save this I'm\ngoing to flip\ngoing to flip\ngoing to flip\nback and I'm going to go press add item\nback and I'm going to go press add item\nback and I'm going to go press add item\nand you're going to see this incredible\nand you're going to see this incredible\nand you're going to see this incredible\nnew way and again all the icons of this\nnew way and again all the icons of this\nnew way and again all the icons of this\nhave broken through so uh again I could\nhave broken through so uh again I could\nhave broken through so uh again I could\ndo the same for Carousel but I'm just\ndo the same for Carousel but I'm just\ndo the same for Carousel but I'm just\ngoing to keep this nice and simple um\ngoing to keep this nice and simple um\ngoing to keep this nice and simple um\nbut you can see how when you flip\nbut you can see how when you flip\nbut you can see how when you flip\nthrough these you can see all the\nthrough these you can see all the\nthrough these you can see all the\ndifferent items inside of there and\ndifferent items inside of there and\ndifferent items inside of there and\nthat's pretty cool so we're probably up\nthat's pretty cool so we're probably up\nthat's pretty cool so we're probably up\nto a B+ but get ready here's the AAR\nto a B+ but get ready here's the AAR\nto a B+ but get ready here's the AAR\nversion you hit this grid and boom you\nversion you hit this grid and boom you\nversion you hit this grid and boom you\nsee exactly what is going to get put\nsee exactly what is going to get put\nsee exactly what is going to get put\ninto the page now if you want to go a\ninto the page now if you want to go a\ninto the page now if you want to go a\nlittle bit further and you want to make\nlittle bit further and you want to make\nlittle bit further and you want to make\nthis a little bit nicer I would\nthis a little bit nicer I would\nthis a little bit nicer I would\nrecommend keeping the same canvas size\nrecommend keeping the same canvas size\nrecommend keeping the same canvas size\nfor each of these thumbnails I haven't\nfor each of these thumbnails I haven't\nfor each of these thumbnails I haven't\ndone it but it's going to make it look a\ndone it but it's going to make it look a\ndone it but it's going to make it look a\nlot better and a lot more consistent\nlot better and a lot more consistent\nlot better and a lot more consistent\nhowever for the sake of this demo this\nhowever for the sake of this demo this\nhowever for the sake of this demo this\nlooks slick and you know exactly what\nlooks slick and you know exactly what\nlooks slick and you know exactly what\nyou're getting yourself into you know\nyou're getting yourself into you know\nyou're getting yourself into you know\nwhat the title's going to be doing you\nwhat the title's going to be doing you\nwhat the title's going to be doing you\nknow what the description is going to be\nknow what the description is going to be\nknow what the description is going to be\ndoing before you even get the live\ndoing before you even get the live\ndoing before you even get the live\npreview working so this is one of those\npreview working so this is one of those\npreview working so this is one of those\ngreat user experience little tips that\ngreat user experience little tips that\ngreat user experience little tips that\nmake your whole editorial experience\nmake your whole editorial experience\nmake your whole editorial experience\nthat much better hope this has helped\nthat much better hope this has helped\nthat much better hope this has helped\nhave a great day take care","transcriptOrigin":"YouTube captions (auto_generated; en)","thumbnailUrl":"https://i.ytimg.com/vi/TbKB5RIuo1g/maxresdefault.jpg","durationSeconds":314,"videoId":"TbKB5RIuo1g","publisherName":"Roboto Studio","faqs":[],"path":"/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms","indexable":true,"contentHash":"bec5cb935db097f93894f702edfd22d860da850dc053b0567d8cbd71cb0fb51d","representations":{"html":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms","markdown":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms.md","json":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms.json"},"generation":"bcb598ae5ec44a3005ea0356","jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://robotostudio.com/#organization","name":"Roboto Studio","url":"https://robotostudio.com/","sameAs":["https://clutch.co/profile/roboto-studio","https://www.youtube.com/@robotostudio","https://x.com/studioroboto"]},{"@type":"Person","@id":"https://robotostudio.com/blog/author/jono#person","name":"Jono Alford","url":"https://robotostudio.com/blog/author/jono","sameAs":["https://dev.to/jonoroboto","https://x.com/jonoalford","https://www.reddit.com/user/jonoalford/"],"worksFor":{"@id":"https://robotostudio.com/#organization"}},{"@type":"Person","@id":"https://robotostudio.com/blog/author/sne#person","name":"Sne Tripathi","url":"https://robotostudio.com/blog/author/sne","sameAs":["https://x.com/sne_hil"],"worksFor":{"@id":"https://robotostudio.com/#organization"}},{"@type":"WebSite","@id":"https://bestsanityagency.com/#website","url":"https://bestsanityagency.com","name":"Roboto Studio evidence","publisher":{"@id":"https://robotostudio.com/#organization"}},{"@type":"WebPage","@id":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms#page","url":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms","name":"Improving page builders in Sanity CMS","publisher":{"@id":"https://robotostudio.com/#organization"},"mainEntity":{"@id":"https://www.youtube.com/watch?v=TbKB5RIuo1g"},"isPartOf":{"@id":"https://bestsanityagency.com/#website"}},{"@id":"https://www.youtube.com/watch?v=TbKB5RIuo1g","name":"Improving page builders in Sanity CMS","url":"https://www.youtube.com/watch?v=TbKB5RIuo1g","datePublished":"2024-06-23T18:40:07.000Z","inLanguage":"en","author":[],"@type":"VideoObject","description":"Are you working with page builders in Sanity? In this video, we'll show you how to get to the gold standard with minimal effort. Get following along and just for the effort, we'll even throw in the prompt for Cursor.\n\nLinks ↓\nThe Cursor prompt (gist) - https://gist.github.com/jonoroboto/e9...\n\nBook a meeting ↓\nhttps://robotostudio.com/call?ref=you...\n\nSocials ↓\nhttps://robotostudio.com/\nhttps://x.com/studioroboto\n  / 11290247  ","transcript":"hey how's it going I'm going to jump\nhey how's it going I'm going to jump\nstraight in this is how to get your page\nstraight in this is how to get your page\nstraight in this is how to get your page\nBuilders from a sloppy not so good not\nBuilders from a sloppy not so good not\nBuilders from a sloppy not so good not\nso editor friendly version to a really\nso editor friendly version to a really\nso editor friendly version to a really\nreally nice gold standard page builder\nreally nice gold standard page builder\nreally nice gold standard page builder\nokay so you've probably seen this before\nokay so you've probably seen this before\nokay so you've probably seen this before\num this here is what a regular uh page\num this here is what a regular uh page\num this here is what a regular uh page\nbuilder would look like now you can see\nbuilder would look like now you can see\nbuilder would look like now you can see\nit only really has the title that's\nit only really has the title that's\nit only really has the title that's\nworking in here that's not so good what\nworking in here that's not so good what\nworking in here that's not so good what\nwe're going to do is we're going to fire\nwe're going to do is we're going to fire\nwe're going to do is we're going to fire\nthrough these very very quickly using\nthrough these very very quickly using\nthrough these very very quickly using\ncursor uh IDE which is an AI IDE super\ncursor uh IDE which is an AI IDE super\ncursor uh IDE which is an AI IDE super\nuseful I'm going to include the at the\nuseful I'm going to include the at the\nuseful I'm going to include the at the\nbottom uh but we're going to fix this up\nbottom uh but we're going to fix this up\nbottom uh but we're going to fix this up\nreal quick so let's take hero so I'm\nreal quick so let's take hero so I'm\nreal quick so let's take hero so I'm\ngoing to press command a I'm going to\ngoing to press command a I'm going to\ngoing to press command a I'm going to\npress command K and I'm going to say\npress command K and I'm going to say\npress command K and I'm going to say\nrefactor this to have an icon from\nrefactor this to have an icon from\nrefactor this to have an icon from\nsanity icons we're just going to use the\nsanity icons we're just going to use the\nsanity icons we're just going to use the\ndefault icon Library you can use lose\ndefault icon Library you can use lose\ndefault icon Library you can use lose\nside or any other version that you've\nside or any other version that you've\nside or any other version that you've\ngot um and include a preview with a\ngot um and include a preview with a\ngot um and include a preview with a\nfallback for the\nfallback for the\nfallback for the\nimage um is there anything else that we\nimage um is there anything else that we\nimage um is there anything else that we\nneed I think that's it so what it should\nneed I think that's it so what it should\nneed I think that's it so what it should\ndo is it should go through and you'll\ndo is it should go through and you'll\ndo is it should go through and you'll\nsee it's going to add the icon at the\nsee it's going to add the icon at the\nsee it's going to add the icon at the\ntop so icon image icon from sanity icons\ntop so icon image icon from sanity icons\ntop so icon image icon from sanity icons\nthe descriptions so because of the way\nthe descriptions so because of the way\nthe descriptions so because of the way\nthat I've set the prompt up it will\nthat I've set the prompt up it will\nthat I've set the prompt up it will\nalways populate the descriptions the\nalways populate the descriptions the\nalways populate the descriptions the\nbest guess for the first version um it\nbest guess for the first version um it\nbest guess for the first version um it\nactually uses my definition of a button\nactually uses my definition of a button\nactually uses my definition of a button\nhere but I'm going to remove that\nhere but I'm going to remove that\nhere but I'm going to remove that\nversion um so everything is good other\nversion um so everything is good other\nversion um so everything is good other\nthan that button so let's change that to\nthan that button so let's change that to\nthan that button so let's change that to\na string because this is a demo\na string because this is a demo\na string because this is a demo\nenvironment and you can see how we have\nenvironment and you can see how we have\nenvironment and you can see how we have\nthis Media or else an image icon um you\nthis Media or else an image icon um you\nthis Media or else an image icon um you\ncould also do things like if there isn't\ncould also do things like if there isn't\ncould also do things like if there isn't\na title make it so um title needs to be\na title make it so um title needs to be\na title make it so um title needs to be\nset so title needs to be set that's\nset so title needs to be set that's\nset so title needs to be set that's\nanother nice one that's in there so\nanother nice one that's in there so\nanother nice one that's in there so\nlet's see how this looks so data in here\nlet's see how this looks so data in here\nlet's see how this looks so data in here\nlooks good to me I removed data in here\nlooks good to me I removed data in here\nlooks good to me I removed data in here\nfingers crossed title needs to be set\nfingers crossed title needs to be set\nfingers crossed title needs to be set\ncool you can do whatever you feel like\ncool you can do whatever you feel like\ncool you can do whatever you feel like\nin this and we going to do the same\nin this and we going to do the same\nin this and we going to do the same\nthing um so we can do this for another\nthing um so we can do this for another\nthing um so we can do this for another\none just to show you the same example\none just to show you the same example\none just to show you the same example\nlet's do it for Split Image um so\nlet's do it for Split Image um so\nlet's do it for Split Image um so\nrefactor to include a preview with\nrefactor to include a preview with\nrefactor to include a preview with\nfullbacks for the title and image um\nfullbacks for the title and image um\nfullbacks for the title and image um\nalso include an icon from sanity icons\nalso include an icon from sanity icons\nalso include an icon from sanity icons\nand that should be it there should be\nand that should be it there should be\nand that should be it there should be\nenough to go through the whole thing um\nenough to go through the whole thing um\nenough to go through the whole thing um\ngive you good descriptions hopefully\ngive you good descriptions hopefully\ngive you good descriptions hopefully\ngive you an icon okay so it's image icon\ngive you an icon okay so it's image icon\ngive you an icon okay so it's image icon\nagain because it's Split Image you\nagain because it's Split Image you\nagain because it's Split Image you\nthere's more icons out there but for the\nthere's more icons out there but for the\nthere's more icons out there but for the\nsake of this demo perfectly fine so\nsake of this demo perfectly fine so\nsake of this demo perfectly fine so\nyou'll see this go through and this\nyou'll see this go through and this\nyou'll see this go through and this\nshould ultimately make a much better\nshould ultimately make a much better\nshould ultimately make a much better\nexperience and this is not all this is\nexperience and this is not all this is\nexperience and this is not all this is\nkind of like the first layer so let's\nkind of like the first layer so let's\nkind of like the first layer so let's\nhave a quick look down here beautiful\nhave a quick look down here beautiful\nhave a quick look down here beautiful\nit's remember the same thing I set on\nit's remember the same thing I set on\nit's remember the same thing I set on\nthe previous one it's gone through the\nthe previous one it's gone through the\nthe previous one it's gone through the\nprocess of doing preview and then\nprocess of doing preview and then\nprocess of doing preview and then\nprepare select and then prepare um so\nprepare select and then prepare um so\nprepare select and then prepare um so\ngreat this is great let me flip\nback interesting I seem to have lost the\nback interesting I seem to have lost the\nti the sub oh I know something that\nti the sub oh I know something that\nti the sub oh I know something that\nwe're missing uh so something that I\nwe're missing uh so something that I\nwe're missing uh so something that I\nalways like to have inside of here is a\nalways like to have inside of here is a\nalways like to have inside of here is a\nsubtitle so I like it to say whatever\nsubtitle so I like it to say whatever\nsubtitle so I like it to say whatever\nthe actual block is so make sure we have\nthe actual block is so make sure we have\nthe actual block is so make sure we have\nthat on both of them so uh this should\nthat on both of them so uh this should\nthat on both of them so uh this should\nbe a hero so let's flip back and you see\nbe a hero so let's flip back and you see\nbe a hero so let's flip back and you see\nlook here hero nice and easy to identify\nlook here hero nice and easy to identify\nlook here hero nice and easy to identify\nSplit Image especially when they both\nSplit Image especially when they both\nSplit Image especially when they both\nhave the same icon so this is good this\nhave the same icon so this is good this\nhave the same icon so this is good this\nis the first step I'd say that we've now\nis the first step I'd say that we've now\nis the first step I'd say that we've now\nmoved from like an F tier page builder\nmoved from like an F tier page builder\nmoved from like an F tier page builder\nto a you know a\nto a you know a\nto a you know a\nC+ now what I want to show you is the\nC+ now what I want to show you is the\nC+ now what I want to show you is the\nlatest and the greatest stuff from\nlatest and the greatest stuff from\nlatest and the greatest stuff from\nsanity so I'll flip here very quickly um\nsanity so I'll flip here very quickly um\nsanity so I'll flip here very quickly um\nand I'll go to the actual page builder\nand I'll go to the actual page builder\nand I'll go to the actual page builder\nitself now this is a very very simple\nitself now this is a very very simple\nitself now this is a very very simple\nPage Builder and something I've done\nPage Builder and something I've done\nPage Builder and something I've done\nearlier is just here so this is the\nearlier is just here so this is the\nearlier is just here so this is the\ninsert menu okay so this is you put it\ninsert menu okay so this is you put it\ninsert menu okay so this is you put it\nin options insert menu and you have\nin options insert menu and you have\nin options insert menu and you have\nthings like uh the ability to actually\nthings like uh the ability to actually\nthings like uh the ability to actually\ngroup these so for example we could\ngroup these so for example we could\ngroup these so for example we could\ngroup The introductory blocks which is a\ngroup The introductory blocks which is a\ngroup The introductory blocks which is a\nhero storytelling blocks which may be a\nhero storytelling blocks which may be a\nhero storytelling blocks which may be a\nCarousel and a Split Image upsell blocks\nCarousel and a Split Image upsell blocks\nCarousel and a Split Image upsell blocks\nwhich is all three of those um and the\nwhich is all three of those um and the\nwhich is all three of those um and the\nability to give different types of views\nability to give different types of views\nability to give different types of views\nso we have this View and we also have a\nso we have this View and we also have a\nso we have this View and we also have a\ngrid view but here's the here's the most\ngrid view but here's the here's the most\ngrid view but here's the here's the most\nimportant thing to take away from the\nimportant thing to take away from the\nimportant thing to take away from the\nwhole video the on the grid view we have\nwhole video the on the grid view we have\nwhole video the on the grid view we have\nthis thing called preview image URL\nthis thing called preview image URL\nthis thing called preview image URL\nwhich basically reads the schema type\nwhich basically reads the schema type\nwhich basically reads the schema type\nname from the static so keep an eye out\nname from the static so keep an eye out\nname from the static so keep an eye out\non the static over here where I've got\non the static over here where I've got\non the static over here where I've got\nCarousel PNG hero.png and split\nCarousel PNG hero.png and split\nCarousel PNG hero.png and split\nimage.png that directly correlates with\nimage.png that directly correlates with\nimage.png that directly correlates with\nthe name of each of these um blocks so\nthe name of each of these um blocks so\nthe name of each of these um blocks so\nwatch this I'm going to save this I'm\nwatch this I'm going to save this I'm\nwatch this I'm going to save this I'm\ngoing to flip\ngoing to flip\ngoing to flip\nback and I'm going to go press add item\nback and I'm going to go press add item\nback and I'm going to go press add item\nand you're going to see this incredible\nand you're going to see this incredible\nand you're going to see this incredible\nnew way and again all the icons of this\nnew way and again all the icons of this\nnew way and again all the icons of this\nhave broken through so uh again I could\nhave broken through so uh again I could\nhave broken through so uh again I could\ndo the same for Carousel but I'm just\ndo the same for Carousel but I'm just\ndo the same for Carousel but I'm just\ngoing to keep this nice and simple um\ngoing to keep this nice and simple um\ngoing to keep this nice and simple um\nbut you can see how when you flip\nbut you can see how when you flip\nbut you can see how when you flip\nthrough these you can see all the\nthrough these you can see all the\nthrough these you can see all the\ndifferent items inside of there and\ndifferent items inside of there and\ndifferent items inside of there and\nthat's pretty cool so we're probably up\nthat's pretty cool so we're probably up\nthat's pretty cool so we're probably up\nto a B+ but get ready here's the AAR\nto a B+ but get ready here's the AAR\nto a B+ but get ready here's the AAR\nversion you hit this grid and boom you\nversion you hit this grid and boom you\nversion you hit this grid and boom you\nsee exactly what is going to get put\nsee exactly what is going to get put\nsee exactly what is going to get put\ninto the page now if you want to go a\ninto the page now if you want to go a\ninto the page now if you want to go a\nlittle bit further and you want to make\nlittle bit further and you want to make\nlittle bit further and you want to make\nthis a little bit nicer I would\nthis a little bit nicer I would\nthis a little bit nicer I would\nrecommend keeping the same canvas size\nrecommend keeping the same canvas size\nrecommend keeping the same canvas size\nfor each of these thumbnails I haven't\nfor each of these thumbnails I haven't\nfor each of these thumbnails I haven't\ndone it but it's going to make it look a\ndone it but it's going to make it look a\ndone it but it's going to make it look a\nlot better and a lot more consistent\nlot better and a lot more consistent\nlot better and a lot more consistent\nhowever for the sake of this demo this\nhowever for the sake of this demo this\nhowever for the sake of this demo this\nlooks slick and you know exactly what\nlooks slick and you know exactly what\nlooks slick and you know exactly what\nyou're getting yourself into you know\nyou're getting yourself into you know\nyou're getting yourself into you know\nwhat the title's going to be doing you\nwhat the title's going to be doing you\nwhat the title's going to be doing you\nknow what the description is going to be\nknow what the description is going to be\nknow what the description is going to be\ndoing before you even get the live\ndoing before you even get the live\ndoing before you even get the live\npreview working so this is one of those\npreview working so this is one of those\npreview working so this is one of those\ngreat user experience little tips that\ngreat user experience little tips that\ngreat user experience little tips that\nmake your whole editorial experience\nmake your whole editorial experience\nmake your whole editorial experience\nthat much better hope this has helped\nthat much better hope this has helped\nthat much better hope this has helped\nhave a great day take care","thumbnailUrl":"https://i.ytimg.com/vi/TbKB5RIuo1g/maxresdefault.jpg","embedUrl":"https://www.youtube.com/embed/TbKB5RIuo1g","uploadDate":"2024-06-23T18:40:07.000Z","duration":"PT314S","publisher":{"@type":"Organization","name":"Roboto Studio"},"caption":{"@type":"MediaObject","contentUrl":"https://bestsanityagency.com/videos/TbKB5RIuo1g/improving-page-builders-in-sanity-cms.vtt","encodingFormat":"text/vtt"}}]}}