Live webinar | How we built it: The new OFFF Barcelona website

let's get started and first of all let me introduce you to myself my name is edu jan sante you can call me edu if you want or ed if that's easier for you i'm your community manager so i manage the editor x community and i'm here with liat anolena who'll be sharing a ton of really really good stuff we're building for the off barcelona website uh so we're gonna show you the process behind it and then we're gonna walk you through what is that like in practice like how do we show like how do we build that because you have so much going on you have animation you have hover interactions you have repeaters a ton of things and we're gonna do all of that for you today we're gonna actually even share some parts with you so you can actually build yourself so super excited to get started and as i said if you stay here with us we're going to share a contest that we're going to launch today for you who are building your websites so it's a really really good opportunity for you and right so i guess we're good to go now we're good to go so first of all for our first part of the editor x uh workshop we're going to show you the off barcelona website i want to introduce you to my colleague liat yeah the designer and art director in our in-house agency and she's going to show you a little bit more behind the thought process on how she built and how she fought about the design for the of barcelona website so liat are you here with me just want to make sure she's on and i think she is cool just to make sure okay cool yeah i figure there you go how are you yes i'm good thank you sir awesome all right so the floor is yours take it away thank you hi everybody thanks for joining us today i'm liat i'm a designer and an art director at the editor x in-house agency and i'm going to share with you my process of designing the new off-site i'm joined by elena one of our designers she will be showing you a live product demo after my presentation our team specializes in creating websites for enterprises brands non-profits and influencers some of our previous clients include sauber timothy goodman print magazine carly claus dazzle and many many more so the process of creating these new exciting websites for off was based on methods i've developed in my years of designing digital experiences and layouts these methods helps me be more creative innovative and more open-minded and i use these methods in all of my projects so you can also take some of them and try them yourself in your own projects so let's get started method number one is creating what i call a shopping list it's basically a site structure or a master list of all the content requirements i need to include in my final design this is the first step i take in any new design project i start this shopping list helps me avoid getting any ideas about how elements should look like or behave within my design it means that i don't start researching a specific web design trend on the contrary i keep my mind free from any design ideas for example this is my shopping list for the off website you can see how i simply named the first section as welcome i won't call it a big video welcome or a gallery welcome it means that i don't attach any design ideas to content to content elements yet the same goes for the blog section i didn't write a description for what type of blog it should be or what type of layout it should have and not even if it's an image focused or a text focused layout so one way to get inspiration for a blog is to look at other blogs but it's just going to lead you to creating another versions of what's already been done and we the designers always want to create something new and to push our limits and that leads me to my second method which is creating unexpected connections between fields what does it mean let's take a look at some of my research process for the block section so usually blogs are heavy with content and i was thinking in a different direction of a clean minimal layout using perfect squares which feels more designed to me with images in the front rather than text and since i'm not limiting myself to just looking at other blogs i researched lots of different websites and i found these interesting examples like the pink album covers displayed in the top left corner or look how unique is that green side showing those large display icons or in the bottom the clean minimalist way products displayed in ecom galleries and i was also inspired by this photography of the packaging and print in this perfect alignment anything that can make me think of unexpected solutions for layouts so looking at all these other fields helped me open my mind to new ideas and to create my own new blog layout however it's not only the digital world that can inspire me it can really come from anywhere especially print i really like to mix and play between those worlds for example do you see those three books stacking on top of one another so i saw this physical stack and i translate it into a digital animation same goes for the pink and yellow poster and how i imagined the behavior of the yellow strip that overlaps the pink strip and hides the text and the key is to keep on moving between those different worlds so the last method i developed is one that usually comes with a good amount of design experience this one i developed over the years and i find it extremely useful to my process what i do is i identify and analyze compositions and then i translate them into layouts so this off website is for a massive audience thousands of designers like you visit this site so ultimately we need to decide to be functional as well as attractive enough to make our users engage and keep on scrolling and finally sign up so for the welcome section i wanted to make the typography big and bold with a clear messaging because i needed to showcase the lineup and center and also to combine it with the clear cta the most important button in the site so people can buy tickets so i started to look for inspirations for the button itself but again instead of searching for a standard button inspiration i was looking at all other kinds of shapes interesting and bold ones from other fields that can that would be eye-catching too so the result turned out to be much more is interesting once i found the elements i liked i saved them in my mind and immediately i translate them into compositions and to layout and created this structure just a moment before i place my content and my visuals which turned into this final design and as you can see the third method allowed me to sketch these compositions and to create design in a much faster and more efficient way so let's take a look at the finished site i hope you all agree that we achieved our aim of making it playful interactive and easy to navigate so on the side here we have a cool burger with an endless scroll to navigate through the pages the welcome section with its big and bold typography shows up the line up front and center and looks how look how the movement adds some fun to it and here we have this important big button i separated the button so it doesn't compete with the welcome section and comes after a bit of scrolling and i also added some hover hover color to emphasize it even more check out how the button leaves the viewport going out from the screen this is something you will learn to do with elena in the live demo coming up next and then we have this perfect square a square grid layout with a surprise of color and these arrows they add some fun to it even more and there are some scrolling background effects in this white section so you don't miss this form to join the community and then we have this surprise of the pink with stacking images of the artist and as i scroll down the site you can see how visually interesting interesting it is so that users can engage to the end and lastly we have this big black typography footer that overlaps the blue section and gives us a good strong finish to the site this is so cool yeah i love that really like i mean you guys came up with something so cool uh but i have to ask you a question what's your favorite part of the website oh that's easy i think i really really like the pink section because after all these black sections and white also i really like this pop of color this pink that gives a surprise so this one for sure this one is my favorite yeah i like that too so that's all for me as i mentioned at the beginning these three methods can be taken and adapted to all your design process thank you for so much for listening uh now you're going to dive into the editorics with elena where you can try out these designs for yourself that's beautiful thank you so much thank you so much leah for sharing this with us really really love it um we're going to actually have now more that olen is going to cover just before we get into elena uh let me make sure that you guys are all right here with the zoom setup so there are a couple of extra buttons here you might be seeing so you go to the chat in the chat you have an option to chat with panelists or to chat to panelists and attendees if you select the latter essentially gonna chat to everyone so that's really cool so you can actually get to know each other you can start talking uh and so on so yeah i see josh just did that right now this is great uh and then if you have any question any question throughout this process click on the q a you can ask a question there if it's a question that we can answer at the end we're going to do it at the end but if it's something that's a burning question that's coming as alan is talking to you we're gonna try and stop her i'll make sure that uh she can pay attention to us here and then she can answer your question so feel free to ask as many questions as you want there's no limit um really like feel free to also you know comment you know on things that you're like finding new to you things that you're like excited about so we'd love to see that okay um now remember guys we have a contest that we're gonna launch and this contest is for you to share your best work uh and i'm gonna share the link at the end after elena is done with her presentation and she's gonna actually walk you through the build of the off website uh and also if you wanna get your editor x premium account if you email us in the next 48 hours at hi editorx.com and you send us editor x at off 2021 and remember off with three f's you're gonna get a discount code so you can actually you know go into any plan you want and you're gonna get like a super super special discount for um this specific uh off team here so super excited i saw pep that from from the off team is also online here thank you pep it's great to see you here as well so guys so now we're gonna share a little bit more about the behind the scenes of the build okay so olenna is going to walk you through three sections first of all the welcome section that wanted to see the repeaters and she's going to show you how to build that then we're going to go over the blog with the hover interactions that's a super cool one as well and then we're gonna share something for you so we can work with us on building the actual last part the one that's the pink part actually the favorite part uh so before we get there let me hand over to olenna she's also a designer in our in-house agency elena thank you so much for being here with us and take it away thanks anu hi everyone cool okay so we're going to start with figuring out how this website was even built and for this we're going to roll back a little bit in time uh when we really had uh just the plan just the sketch and how we wanted to do it how to build it and this is how you basically will start every project uh especially a project that you need to build uh later on on your on your own and a platform like editor x uh so i'm gonna walk you through a little bit of general things how we plan usually every project so first of all you're gonna start with something that you know uh once you finish your design and the first thing you know is definitely the typography so you will create a type style for all of your type styles that you have for all of the breaking points as well and we have something that is called type and color themes and you can see a screenshot here i'll also show it to you in the live editor so you plug in basically all of your typestyles here and they become global so every time you need to change and update across all of the site you will really do this here and this will be a universal change everywhere super handy dandy and then like in this video that i recorded basically i have a page where i set all of them on one page so i can see if the relationships are right and then i'm going to go to breakpoints and like here and also see if this feels right and the sizes are okay and this is how i'm going to be working with typestyle so we have one thing done and our editor is not empty anymore which is the scariest part when you start to start with a blank screen second thing is the colors so the same approach here we have color themes and you plug in all of your color themes that you have decided during your design process and then you can apply them from here and every time you change them here in this theme panel it will apply everywhere across your website and make your job much much faster if any design changes come later on so now when we come to when we have already set our main parameters which is the color and type we want to go over page by page section by section and figure out how we're going to build it and with which elements so this is a super crucial point uh to save your time later on and also to understand how you're going to make your process work so we're going to take a look at this welcome section here as an example and this is how i start together with lyad after we finish the design process we go into this planning stage and we decide what kind of the behaviors that we really need and based on the behaviors that we need we'll figure out what tools we're going to use uh inside the editor so first of all you can kind of take a look and see that it's broken down into a few important sections i would say maybe two important sections here just this one part so the first section is here this is the extended header the black one with the description of what off is and the burger menu then there's a second kind of part to it which is these three rows uh that liat was showing you that they have movement when you do a hover effect on it so that's the second important part and all of these two are combined kind of into one when we let me just show you the real website here as you can see when we scroll uh the button goes over and then away but these two elements stay together and they don't leave until the button is past the screen and then they both leave so this means they're somehow related to each other and most likely they will be in some sort of parent kind of grouped together so we'll see how we can do that but just remembering that they need to be together because they respond to behaviors together and then the third part of this one section is the big buy tickets button and this one we know that it needs to scroll a little bit later it's not um the focus point when you just land on the screen only after you scroll it appears and then it leaves so it's going to be a separate element so based on this we can already know that this section this black welcome section would be divided into two one is the uh this this part with the three rows the header and then the second part would be the button so this is great you also know that the first uh these two that they have to cover full height of the screen this is something that we call 100 vh100 viewport height in the editor and we're going to talk about some of these measurements would be also really cool if you guys uh look at the academy link that edu was sharing before uh everything is going to be even easier for you if you do some of the exercises we have on the editor x academy and then so once we figure this out then i make another screen about notes of what's the behavior in terms of code or interactions so here we had an interaction on however and then the every row would move and then we also had code implemented which would mean that every time you reload a screen you actually see different artist images so we can look at all of the artists basically in a span of time and so many times you reload the page we can see a full range of them and then the button is also going to have a hover interaction so when you hover on it it turns white so that's also something that we can do and going back to this part i want to talk about this three rows element we were thinking in the beginning how which tool to use and how to build it and after some thoughts and looking at all the tools that we have in editor we decided it's going to be a repeater and why repeater is because every item in the repeater is designed exactly the same way so you basically need to design only one row um considering that every row will then repeat uh the elements that are there so for example we have text arrow image and text and it repeats in every row like this so as you can see here it's always text arrow image text and then it repeats just three times so for this and again every change that i make the repeater will take care of it they will apply all these changes so now we know this is also a repeater this is a header and a button and i think uh this is enough for us to really start building it and let me know if that made sense uh we and we will start building cool cool okay so let's take a look at what we have i have an empty page empty section here in the ready page and this page has some elements from the live site and some of the other ones we're gonna fill up together uh during this demo so first the header section we don't have yet so we're gonna build this one this gray one is my assets that i saved from before that's something that we can use and don't have to recreate them this is basically just text then we have our blog section here we're going to apply our interaction interactions we don't have them set on here yet so we're going to do that together then we have this white form section the videos the pink looks very different here uh because we want to show you the structure and build this one together uh it's going to be filled up together here uh with the button and then we land on this black artist section uh with hover effects with images so this one we're not going to uh cover but the principles here are applied exactly the same that we are going to cover earlier on and then we have our sponsors and supporters list and then the big map so these are filled and we're gonna talk about the three sections the pink one the blog one is right here and then we're going to build together the welcome section and we're going to start with the welcome section so i have an empty one here uh always scary again to start with the empty one good i have other things here uh and we're going to take a look at this section second and the first thing we're going to do is take a look at the measurements here so these are the universal measurements for just this section but we actually need a little bit more control over here uh we need to specify uh the number of columns the number of rows and what's really going to be inside the section so we're going to remember this parameter and and we're going to actually say not the height 100 vh again 100 viewport high we're going to say that minimum height should be maybe 200 vh and this is just so and this one will set to auto this is just for us to really see what's happening we will change this later and we select the section i like to use breadcrumbs uh but we can also always use layers here to see the structure and i will hit apply grid and i need to have two rows so i'm going to apply the two row grid and i will see this dashed line which means that the grid has been added and i have two columns so why i'm having two columns is because of this this is what we talked about where we have uh this header and this repeater being together in some sort of group so i think it will be that this these two will be in one row and then the button will be in the second row and we will set up the sticky position behavior a bit later so now we have the two rows let's go to adjust grid and just take a look at uh the settings that we have so grids is like the biggest friend you should be your biggest friend in editor x is super handy and this is where full control really comes and we're going to start with something simple and then go into something a little bit more complicated with grids um complicated meaning definitely more control so here we have two rows and we see these measurements here these are the default measurements and it said so it's a little bit more clear to you how to control it but we need to change this measurement so like we said that the first row this one has to cover the full height of the screen so we don't see the button so for this uh like we mentioned before 100 vh so this is the setting that we're actually going to input now we're going to just say 100 vh and it changes it the vh is here viewport height uh and this means that we want this row to be a hundred okay uh i would also like us to test this if this is actually going to be a 100 vh and for this i'm going to drag from the add panel a regular container into this uh column and row just this one not the second one and i will stretch it i just want to see if it's actually going to work so uh design i'm going to change the border to pink and i'm going to have it at two points and this is just for us to see how it's actually working so let's hit preview and just take a look uh what a 100vh does okay so we see a little bit of this border here the pink one and as i start scrolling so what i want to see is that when i start scrolling the border will right away go go away from the screen like scroll up because this is supposed to be only a hundred and it's doing this this is exactly what we asked it to do that it's a hundred but it's a little bit hard to see from the screen share what it actually is that this row is a hundred vh but it starts right here so this mean but we wanted to start over here uh so this means what means is that this blue header is actually on the way and we need to make sure that that calculation is not included and so the 100 vh will actually end right here so for this we will go back to edit site and look at the measurements that we have the measuring units let's go to back to section adjust grid and see what is happening here so it's definitely a hundred but we want to take away the measurement of this blue header and for this we actually have a calculation measurement in the rows settings so we're going to say that okay be a hundred vh but make sure that you take away their measurement of this other section that we know about and that section is a 40 pixel height so we're going to say be a 100 vh but minus 40. so be a little bit shorter than a hundred and we're going to click done and when we preview now let's see what happens so when we preview now i'm scrolling and actually i don't even need to scroll much by one pixel i scroll it's already coming up which means that this container is exactly the space uh that i need it's covering exactly 100 vh but minus this area so this is perfect this is what we were looking for and now we can fill this container up with our content so we have our header here i have it pre-saved and i'm going to use this little blue drag icon and i'm going to just drag this in and when i drag attention to the docking mechanism that's happening so it's telling me which one is the closest line and to which it's docking but we need it to be inside this pink border container and i'm going to drag it over and all the way to the top okay so now it's in this pink border container i can tell that by the breadcrumbs here or again in the layers it's right here actually let's rename this container to first row just so we are not confused like to keep organized and now we're going to select this container again and we could drag it around to match it exactly where it needs to be but i like to be a little bit more precise uh and less dragging but more numbers i guess if you like to say that um but i'm going to dock it to both sides so it means it has a relationship with each end and it's going to stretch to that left and right edge and when i do that in margins you see that it says 4.7 that's this part and then the same is on the other side so i'm actually going to set it to zero and the top margin it says 116 pixels i'm also needed to be at zero so i'm going to put zeros everywhere and this means that it's not going to be bigger or smaller than the screen widths because our container is the screen width so whatever is this container whatever is the section width which is usually 100 va v w uh it's always going to be this measurement great so we have this one set up and we also know that this height is 100 uh pixel we're going to come back to this for a second uh and then we can move on to our repeater so i'm going to go to the plus and add a repeater here from the quick add i'm just going to drag it on stage and see how it says attach so i'm attaching it to this area which is our pink border container because it takes some more space and this is basically a look of a repeater how it looks like it has three items and every time i will design an item it will appear on all of them and the design style will be kept the same so i need to go to the repeater i'm using breadcrumbs i'm gonna go to manage items and i'm actually going to get rid of the other two because i don't want to be confused uh at what i'm doing i want to see just one design and then going back to repeater again i'm going to change layout and select list so we had a card layout before now i want the list layer so i have actually full rows and i'm going to say that the vertical margins which will be the space between all of these uh list items i'm going to set it to 20 pixels but we're going to see it a little bit later now i have this item here and i am actually ready to design it so let me select this repeater i'll drag it over here so i can see okay and now i have these elements so these are the elements that are going to be used for the header section this uh rows and i just did selected them and i copied them and i'm going to paste them here and now i can use them so i have four of these let me change this pink background uh just take it away let it be transparent and the arrow and the image and then the fourth element is our uh fourth well second type element so here first uh type element arrow image second type element and we're going to now separate them into where they're supposed to be and i like to have full control over where i place things and how they're related to each other and um their width so i can control them and for this i am going to use grids again i will create a grid of four so each element will have their own column and just sit where they need to be never overlap anything else and i will also make sure that each element is indeed in its own column so as you can see now this image is probably not in one column it's in two columns whereas these type elements are probably in just their one column individually so i'm going to do the same thing that i did for the header i will dock left and right and you see where it's docking so yeah this is the right column and i will select zeros again everywhere so it's exact and i will also undock from top which will center it vertically because it's not docked to top or bottom it's just basically vertically centered i'm going to do the same for all of them well all of the type uh we're gonna do something else with uh the icon here so now the icon and the image let's do the image first um so let's just take a look and see which columns these are located in we will open grid area and the grid area is really handy if you need to specify exactly which column or which row an element should be in instead of dragging around like this which you could still do you want to really really be exact and dragging might not be uh possible in some scenarios you know if you have little really little elements or really big elements so let's see at what measurements this is so it says that this image is between the column lines three and five so let's count one two three four five so it starts at three which is correct but we need it to end at four so i'm going to say that and now it's in exactly the right column and i will also make 0 0 on the left side align it to the left and top and then i will do the opposite to the arrow i will do top and right zero zero just in case just so they stay together grouped so this is the composition i want them to be but of course we will get to this point where everything is equidistant but just in case um i'm going to keep this composition now i want them all to kind of all these four elements to be centered vertically even though we only centered vertically these two elements but what's happening here is that we have a minimum height here so something i mentioned before about the parent section we have a 350 pixel uh minimum height so we're going to want to get rid of this and also go inside the grid and get rid of it here and what this will do will select max content and what this will do as you can see the height of the row is determined by the height of all of the elements or the biggest element that's there so the image here is the biggest in height bigger than the text so now the in the column and the row will be this height and now we see that the columns are all in one frs so this is something that is also default one fr is really uh interesting measurement that we use really a lot but for this exact instance we actually need to use something else so one fr is a universal one unit measurement and also fills up the space if we want to have a control over what's the width of the column and for it to be dictated by the inside content so like in this case we actually want to use max content so max content as you can see now this column is as small or as big as this text element once we fail the text the correct text in it this column will be much wider to fill this content and we're going to actually do the same for all of them we're going to select max content everywhere so you see how the size of this arrow i think it's about 16 pixels so that's the size of the column now and also the same here and the same here okay so everything is at max content we want this but once we did this we see that we have like a gap in here and this is actually correct because um the content that is in here is smaller than the width of this item so it just doesn't really have another column to fill the space and for this we will actually use one fr and i will use it on both sides so i can center this content at all times always center because one fr will be taken from the space that's left over and if it's both equal one frs on each side it means it's exactly the same measurement of the columns so this way it's always centered and one more thing we're left here in this item is spacing it out uh so we could create columns in between to make sure that they're always you know the same measurement which would be ideal but we have something that is called gaps and this is an even faster way to separate columns so we can specify let's say 20 pixel uh gaps between all the columns so i just do this once and it applies to all the columns that i have i'm going to hit done and now we have our item designed almost ideal to what the original site is i know it doesn't look like it because we don't have content but that's something we're gonna do now uh so let's just drag this here so first i will also do the same that i did on other elements making sure that the widths of this item the width of this repeater will be full so full widths so for this i see that the width is 45 percent 45 percent of the width of the screen but i want it to be a hundred or at least it could be a hundred or i do this zero zero zero everywhere docking it to both and stretching it completely the width so now it's that width completely the width of the screen and now let's uh go back to the repeater i will go to manage items and now we will duplicate them and as you can see they're identical so the design is identical it's kept the same and all i'm left to do is really just to update content and i'm gonna hit save we have auto saved here but i also have an old habit of keep saving so i'm gonna just copy this live text that we have on the live site and i'm just going to copy paste so i'm starting with the first one i pasted the first line let me paste the second line take this away so i can see and let's see what's happening so we have a few things that are happening that are a little bit um not what we originally planned but this is not really a big deal this is what the behavior is that we just need to adjust so what it's doing is actually doing this correctly uh let me go back to the item so i'll select item and let's take a look at the repeater okay so the repeater we said that it's going to be docked to the left side and it's going to start exactly at it so zero anything any measurement zero from that margin so it starts exactly here and then it ends also exactly at the right edge so it doesn't look like it because there's more content that fits on the screen and for this we can actually not start this repeater exactly at the edge we need to start it a little bit earlier so to show you what i mean is here so you see how it's coming out from this edge of the screen from one side also coming from the edge of the screen or the other side so this means that this is actually this repeater or this item is bigger than the screen and we're going to do that we're going to set it to be a negative margin i will use percent for this so i will say maybe start at minus 50 percent uh on the left and also and minus 50 percent on the right so this now i have equal from both sides but it's not zero uh in any case it's centered um and it's going away and now when we do the interactions on left and right it's going to look like it's coming away from the screen on the left or on the right and one more thing we see here that's also not something we expected originally because we only had two letters and we couldn't see it is that the content is actually going off and if i scroll here horizontally i can see this content so what this is called is overflow content and if we go to the item settings here so you see there is a specific setting exactly for this scenario uh that is called overflow content and right now it's on show so everything that's overflowing uh the space that it's in is going to be in shown we actually need it to be on hide in some instances it's also nice to do a scroll so you need to do a horizontal scroll or vertical scroll this way so we're going to go to our repeater in the breadcrumbs and then we're going to go to our uh blue sorry pink border container here which is our parent in which this repeater exists this first row container and we are going to set the overhaul content to hide here so i'm hitting this and let's scroll now i am scrolling horizontally but you can't it doesn't scroll anymore because it's hiding and that's exactly what we want but since we hit only the first row container we can still do the hover effect on the items and they will show left and right and will be exactly like we have it on a live site so let's go in and just update the rest of the content i am copy pasting this barcelona type here and can you reach it okay i'm gonna set this back to show just so i can see but i will set that back to hide later on just so i can reach this text and it's gonna be this one now all right and then this one i am copy pasting [Music] okay let's just get rid of some okay so you can reach it copy paste and now let's do one more this one copy paste all right and i'm going to go back to this blue sorry i keep saying blue to pink border container and i'm going to set it to hide like it was okay great let's actually hit preview and see what we have here so far and then we will have to update images but let's just see the structure if it's looking similarly what's the problem here now what can we adjust so it's looking great this is actually just static now we will apply interactions later on but it looks exactly the layout that we have here and it's almost besides the images the same content we do notice that there's one adjustment of space that we really care about so here for example you can see that the distance between this uh black extended header that we call this space between this and the image the first row versus the space of this last row to the edge of the bottom of the screen is very controlled it's a little bit here a little bit more here but definitely it feels centered on the whole page on the whole section versus here we have of course it's very on the bottom we want to raise it so what this means is there is some relationship between these two elements right now if we go back the way we just you know drag the repeater on the screen we didn't really pay attention to it but now is the time to really take care of it look at this feature it's dark to the top and it's a specific number of pixels that it's docking to the top but of course we're doing everything responsive we want you know things to change and adjust according to the size even the height of the browser so to get this effect we really need to make these two elements like sister and a brother like they need to be somehow related to each other so for this i'm gonna go to this pink border container now and i'm gonna also apply grid here and i will select two rows again and we will make sure that this container that is our header is in the first row so let's go to grid area between row line one and two that is correct we see a dashed line here we'll adjust the size of this row and then this repeater between row line 1 and 3 okay so we want it to be between 2 and 3 and we will take away uh also the top docking we'll get it to be a zero so now it's actually vertically centered within that second row so let's hit this container let's see what's the default measurements uh we are having here so one is this uh minimum to be at least the size of the content but don't be more than 50 this is the default measurement here it's useful in a lot of examples but not for us we need it to be either in pixels because we know exactly the height of this um of this row that we have so we know it's actually a hundred we saw that before or it could be in max content because it's the same thing it's uh going to be the size of the content inside and then the second one we're actually going to set to a fraction again fr 1fr so 1fr is telling um this grid row to be the height of the remaining space after you calculate this max content which is 100 pixels so now this leftover space is our row for this repeater in which we have this repeater that is vertically centered so now actually let's also change the images so we have a full effect here i have them preset here and we'll change quick question if people don't have the images they can they get some uh for free there oh for sure so if you go to the plus and then media so i have my preloaded here you can't reload yours or you can use some of these single images that's from the wicks they're really good images here or you can go to show more for example and media from wix has a lot of really good stock images that we create um yeah go ahead and feel free to use them awesome thank you cool so now that we finished that let's preview and see if our spaces are matching exactly like we wanted them okay so we have this our pink border here is still correct it's a 100 vh minus this area we have the right images we have the right content and also the relationship between this and the edge here is really good this is a little bit shorter screen here than our original but it's really centered if you can compare this space and this space so it's working exact when we open our editor on a full screen publish it's going to look exactly like the live site and now this structure is done so we know that these two elements are related to each other let me just hit save even though it is already saved um even though these two elements are related to each other we know this we got this done we can now build the second important element on here and that's the button so i'm scrolling to the left side this is our button we will first just create it and place it and then we'll do the position of this behavior of going over and away and the hardware effects so to start off we have our buy tickets here text that i pre-saved from earlier i am just dragging it inside this section and again this is the second row of that parent section here okay and i'm going to recreate this button from scratch so i'm going to go to plus and what is the button it's really just a container so i'm going to drag the container on stage here and now we can style it i'm going to go to design border uh we had it at four points and white and also the corners i am going to round it to the maximum and this is basically the style of our button we're almost there now we need to place this text inside this button so i'm dragging and i see the attach this means it's going to be here and i'm just going to drag this to the center so you can see okay so the next step is to make sure that this button this container that will be a button with text is going to be the weights dictated by the text inside so the width of this button should be at least the width of the buy tickets or more for some margins in space around so to do that we're going to do something that we already did a few times and i hope uh this one will not be super surprising and that is to create grids so we're gonna create one more container and we're gonna stretch it and it's in the second row of the parent section let's take a look at our layers okay so we have this container which is our button i'm going to call it button we have our first row we finished with that and now we have this other container so this other container we're going to hit arrange bring to back so it's in the back layer so now we can work with it and this button here that's going to be soon a real button we use this dragging handle and we drag it around just to make sure it's going to attach to this uh container of ours okay so now it's in here and we're going to call this container a second row so now we have this in this black section we have two rows uh from a grid and we also have two containers that one is called first row and another one called is the second row in the second row we're going to apply grid of three columns so i'm doing that okay and now we're going to place our button inside one of these columns and then we're going to control this column to really behave exactly like we want so we're going to go back to grid area and we're going to place this soon to be button into the middle column of this second row container here and that is a column between column lines two and four but we need it to be between column lines uh two and three so this will make sure that this button is actually here now i know it shrank a little bit and that is because this width is said to be 51 of whatever wherever it's located so we want it to be a hundred percent we can set a hundred or we can do what i always like to do is um a docket to both sides and stretch it this way so we're going to make sure it's zero and zero on that side on both sides and undock it to from the top and zero so now it's vertically centered and it's inside the middle middle column and we will go to this second row container and hit adjust grid and let's see what um measurements we have here and we have one of ours one of ours we will switch to max content so the max content one second let's take a look at this look at this negative margin we created by dragging so we will do uh this as well we will stretch dock left and right inside the button okay so now we stretch this text made sure that there is no negative margin here so it starts exactly at the edge to the edge it doesn't start away like we have in the welcome section we will also undock from top and vertically centered and now because with the use of max content columns we have created a place where this container for a button will always shrink together and make bigger together with the text and we can check that when we go to a breakpoint still we're going to still keep in desktop but we're going to go to the smallest pixel point and as you can see this button is as short as this text or if we go to 1920 for example which is like a really big monitor it's keeping that same size as the text we just need to take care of the height now we see that the height is a little bit different every time and that is because we have a minimum height here on this container so we're going to get rid of that and now the height of the container is exactly the height of the text which is what we wanted but we also wanted to add some breathing room around this text and for this we can actually use padding which is the easiest way to create space around elements so nothing breaks in that edge and i think i will use a measurement of vw which is a viewport width so it's like the viewport height but just depending on the width not on height and let's start at four uh vw what's the measurement and i'm gonna hit the lock to get it everywhere okay four looks good let's just check it on like a smaller size this looks pretty good i think this yeah this is definitely our button okay so now we have the buttons selected with text let's take a look oh and this second row container since we did the pink border before let's do like a blue or green border now from our colors just so we can see how these two rows are interacting with each other let's take a look okay let's hit preview and look at our construction so far okay so we have this and we see that they're starting at the same point both of these rows because we have our containers and then we have it finishing here and the button is in the center and it's going to be as responsive as we want everything is shrinking together great so what's our next step uh we will take a look at the sticky position now and let me just go back to the screen all right and i'll make the breakpoint size just a little bit smaller so everything fits here on my screen okay and let's take a look at the live site again so what we have here is these two elements stay together so what this means is these elements need to be in a sticky position and they will be together in a sticky position as long as the button comes and then leaves and only then it will all go away together so if we scroll we have button going over and then leaving so let's sign up uh for a sticky position for this first section and see how it's going to work how the sticky position really uh really works so we have this first container first row container and we're going to set it to be in a sticky position okay and let's take a look so i'm scrolling scrolling and this is what happens so what what is happening here is again correct by the setting uh it's just about us understanding how this is happening so there's two things here first thing is that we scroll and only then this first row container becomes sticky so we scroll for a little bit and then it gets sticky and then the second thing is that of course there's some overlay here uh it looks like the button is underneath but we need it to be on top so it looks like pretty easy fixes for both of these so the first one why it's happening again it's because of this uh fixed position blue header here it's going uh going up the section is going up by 40 pixels it looks exactly like that and only then it becomes sticky so for this uh specific example we can use a setting that is called an offset so we select let's select this container sticky top offset so we need it to be offset by 40 which is exactly where it should start underneath this header and then the second part is actually the arrangement of layers so every time a sticky position comes up it always means that it's going to be the first one in order uh that's the default setting and that is something that we just need to flip so we will say that this first row container arrange bring to back and this will mean that this layer now will be the bottom most layer of the section and the biotics button will be on top of it let's double check this button it's in this location and the style i think we should give it also a background color which is black full black okay and now when we preview let's see if we were able to fix those things with two clicks so i'm here i'm going up and this first container is not moving it's saying exactly where it needs to be and then the second row is going over and they're all leaving together so the arrangement worked and the top offset is definitely made exactly for these purposes so we can take a use of that great i think structure wise we have one more thing here which is let's take a look at how it's in the live site so we have the button it comes over then goes away completely still revealing this content and only then it goes away in our example so far we have that the button gets to the middle and then everything is leaving so what this means is we just need to actually just give a little bit more space for this button to scroll uh and we will go to the section not the rows we'll go to actually the section and let's take a look now so remember in the beginning i talked about the minimum height here and everything so now we can actually get rid of this because now we already have all our content we don't need to see it we don't need to make it bigger or anything and now we'll adjust this so we see that this shrunk a little bit and this is because we didn't set any grid measurements to that row so we'll go to our section hit adjust grid and let's take a look at what's happening this first one we have set from the beginning now the second one we never set this uh height of this row so we and so right now it's kind of on max content so we need to set it and we will actually use probably the same calculation oh sorry let's start with 100 vh so 100bh will be covering the full height but we then want to switch to calculation it's just a little bit easier to type this way than uh to type on your own so we will set it to 100 minus 40 the same one that is the top one and then we'll create one more row maybe it's a 100 vh this time and this will allow this button to scroll past by 100 vh and only then the section is finished so let's take a look at the preview okay so scrolling this is the green container with the button going or up here exactly covering the height going away 400 or we could do a calculation also and then going everything is going away perfect this is exactly what we wanted i think now we can actually look at the interactions which is the fun moving part of everything the structure is done let's get rid of these borders we don't need them anymore we saw how they work and how all of the sticky position elements are interacting with each other there's this green one also here so we'll get rid of it just a quick one um yeah first of all it's amazing to see how people are amazed by the magic that you're doing here this is super cool super cool uh there was a question that came me that i think it's worth asking um and that question is when you're editing the grids uh in which case you have like that max content uh when you specify the minimum content so for example minimum content equals max content or max content equals fifty percent that was a question from pratan um and i think it's worth uh checking you can see he's aware of the max content but how do you use the minimum content okay the minimum content is really interesting one and it works for um a lot of specific instances so minimum content let's think of things that could have a minimum content so maybe i could set that the image will have a minimum content at some point or for example text if you have a word off let's say you have four letters so the minimum content would actually be one letter um there are instances where you need it at the top of my head and specifically for this website we didn't really use um the minimum content here but if you need for example it to be like the text just show one line sorry one character of the text uh at least then like this would be your setting there are also other tools for which minimum content would be used uh i think also repeater or layouters would also have um that kind of setting but i think actually you will find a lot more information on units and measurements in the academy so maybe we can just copy paste that link again yeah yeah that'll be cool let's do that um and guys just make sure that you are making following us here that uh london is not going too fast or too slow i think they're all like following their like the feedback has been great so far uh we're gonna get into the cool stuff now so i actually want to ask you to invite your friends to join in you know if you have friends who are designers who are builders invite them in to join because this is going to get even better now i can tell you because i've watched this before and i've been with olenna before so i can tell you it's going to be really cool so make sure you bring your friends in people who are working in design and agencies so they can watch this uh so yeah you can keep going there elena oh yeah there you go pretend thank you hope that was helpful wow i'm excited to hear all that feedback because i actually can't read the chat and it seems alone here keep it to the end yeah okay so we can move on to the interactions now and you will discover that this is like a super fun feature but actually it doesn't take a long time to learn um i guess it could be a set part at some point you don't get to play around a lot of it because it just everything happens so quickly so let's take a look at the items here okay so what we want to do let's go back to the left side we want to interact with every row and set this horizontal movement for every row let's take a look at the options we have hitting an item now and i'm going to this icon that says interactions better we're gonna hit add hover interaction and click custom we have some presets here but of course we want to be super special so we're gonna do our custom interactions and what do we see now we see a change in the screen so this is a mode for interactions and it's made this way so you're not confused and it's very clear to you that you're in this editing mode and we have one item selected here as you can see i can't select any other layers because we're in the interactions mode for this specific item so now that we're here we take a look at what are the panel options here we have we have opacity rotation scale skew and translate translate is actually this horizontal or vertical if you choose the y-axis movement that we need for our welcome section so we're going to select the translate x-axis and i think we're going to use something like eight percent i've played around with these numbers before so this is this is the ultimate one we want but definitely all up to you you can go all the way up and all the way down whichever one you prefer and that is actually all the movement we're going to use here so this was literally one click and a number and then we're going to take a look at this timing so this is the panel in which every interaction that you add to any element will appear here and this is kind of like your menu of things that you know you applied and here you set up the timing so the duration of this interaction is going to be from zero to one and that seems to me like a good number because we have this horizontal movement and we need a little bit of time to to take it we don't want this to be too fast it's not a button it's not something that happen has to happen super quick and flashy so for this we are going to keep one second movement and let's take a look here we have another panel here on top that where we can when we're done we can just click done or play to see how it's going to be okay and this is the timing panel and also this state you can see that we're in a hover state but we can also do an initial state of the interaction we will touch base with that later for another one but for now we're done and we're gonna click done and we're gonna click preview and see what we did let's see what's happening all right so i'm hovering and look what's happening so remember that we use the repeater so every item uh of the repeater just like the design things that we just duplicated created only once the same logic applies to interactions it will also be copied inside the repeater and i just did it once and because i'm doing every other row you know um one is going left another one is going right so it's creating this movement that everything is going different directions when in fact we have one single interaction for eight percent going one way and that's creating this amazing effect in this really quick way so that's really what i meant it's super quick uh let's go back to the edit site and take a look at the button interaction that will have and i will again click save because i have an old habit um going back to the button okay we're going to select this container we named it a button because we like to keep organized and we're going to add and custom okay so now again everything is in a different mode now we're in this button interaction mode and we haven't added any interactions yet so we're going to do that first since the bottom container is already selected we see that the color is black we are going to change it to white and look disappeared here so we know this happened and we select text now just click it on the canvas or any layers and we're going to change the color here to black of the text so we're reversing the colors and now i think that one second default uh is a little bit too much for us this is a button it needs to be pretty quick change so i'm going to go with 0.1 from 0 to 0.1 here okay click done let's go back up and let's click uh preview again and see what's the result here so the button one was two elements so like two ish clicks this one is working i'm scrolling up and i'm getting the hover interaction for two elements inside of this container the container and the text and it's already done uh basically we're finished with this welcome section uh and the interactions and we can move on to the block section here we will also delete this gray section we don't need it and here we're going to apply a little bit more uh interactions because there's more elements here besides just a button so we're going to work on something like this where we have a color change of the background the text is changing color and also rotation of these arrows and the arrow is also changing color from white and black let's let's edit let's do some interactions on that blog post okay scrolling down okay we can get rid of this i'm just hitting delete key and now let's go to the blog post okay i'm selecting an item again this is a repeater so our job is uh six times it's six times easier there's six items here and we're gonna go to the interactions ad hover interactions on the item custom interactions okay and now we have a window i also like used to use layers for this because sometimes in like in this case you have a lot of small elements they're kind of not convenient to grab like this so layers are going to keep you super organized you're going to go to the color background and we're going to change it to green and you can see initially everything is changing right away on your screen okay so this one changed and let's go back to black just for a second okay i think something's happening with my internet so we're going to do this again i'm going to hit delete and add hover interaction custom interaction select the item change color okay and then we're gonna go into each one now so we have two textiles one is the date it used to be white we're in a hover state right here uh click it to black clothes then this body title post title is used to be y also we want it to be black okay and now the arrows okay so we have this arrow uh which looks like one let's take a look looks like one atom but actually it's two arrows one is black one is white and we're going to make sure that the black one is only going to appear on the hover state and the white one will stay on the initial state so this is where we can take care of the initial state here in this box so this container hosts two of them you see i named the layers white and black so we're gonna select the black one okay and we're gonna say that on hover your opacity should be a hundred which is correct but if we go to the initial state the black on the initial state opacity should be zero and this way it appears in our timing and then the white we will do reverse so we'll say initial state white arrow opacity 100 and white arrow in the hover state opacity zero and you can see even here in this uh preview here mode that it's doing that it's doing exactly that and let's take a look at the numbers here again the timing so again and one second for something like this kind of acts as a button is a bit too long so we're gonna do 0.1 duration for all of them instead of one okay one more so now we made all of the color changes and we adjusted the timing period for each of them and you see it's quite a lot of elements here that all of them are going to be interacting at the same time during the same time period 0.1 second we have one more thing to take care of in terms of interactions here and that's the rotation on hover here so we're going to rotate the container in which we have two of those arrows and we have a rotate adjustment here so on the hover state we're telling the rotation to be a 360 rotation which is a full circle so um on hover please do a full circle of this container and we have it set here and you see that it's also default to one i think that 0.1 is too quick so we our eye probably won't catch this quick rotation it will just look like uh really changing quickly or flipping even so we're gonna go with something like 0.4 which should be enough for the small element to really rotate full circle and our eye to catch it so that's the selection we're going to make and we're going to click down okay and it's auto saved and we're gonna click preview all right we have our first second interaction scrolling through and we have our third interaction which is our rotation the color change to green uh black text to white text and it's looking exactly like our live sites and how cool is this we did like uh what three clicks um in average for each of them and it was really quick let's go back to edit site i think at this point we are ready to dive into the pink section which is the outsping section nice cool helena you're missing the feedback here but people are loving it uh they're saying you explain it so well and uh even for people who are new to editor x they're finding this super helpful well that's that's a pleasure to hear really yeah yeah so are we ready to go to the next part yeah yeah let's do the liat's favorite section my favorite section as well i love this so guys before we get into this section actually this is the part where you're going to join us so if you look at the link that was shared this uh in just below here in the chat you're gonna be able to open it make sure that you have your editor x account if you don't have one it takes you two seconds to set up one it's super quick um and then you can actually do that at the same time so you can actually if you have two screens it's going to be easier if you don't you can share your screen in half so you have elena on one side and then you have your editor x on the other and then you can do that i also want to remind you that if you actually want to get your premium account if you send us an email to hit editor x you can just put in the subject line editor x at off 2021 and then in the next 48 hours we're going to give you a super discount code so you can actually you know get your premium plan so that's fantastic and next one which is like probably the one that i'm most excited about is the contest that we're gonna run so we're gonna do a contest that's actually starting today as we speak and you can actually have the ability to submit your best website creation so if you have a super cool website that you built and you want to share that work you can submit that there's going to be a super cool prize if you win uh so yeah uh the link is gonna be shared right after this right after this because otherwise you're gonna forget us here so wait for this to be over wait for this to be over because elena's gonna share this like super cool uh next piece how on how she built this so just before you do that just make sure you follow us here make sure you got the template so the template is in the chat there's a link there uh i'm gonna paste this again in case you couldn't see it i'm gonna just make sure copy and paste here again there you go um so you can open up on the right hand side and then we're gonna be ready for you let's just make sure you're all good cool again elena i think oh my god so many cool comments here yeah i never wanted to see like the recording afterwards it's going to be available later so you can actually download and not only download you can actually watch this live on our academy uh you're going to go to editorx.com academy webinar um and you're gonna be able to watch it from there if you missed some part i know some people probably had to drop some people are coming back some people are just coming in now um i know it's like still like some working hours uh depending on where you are time zone wise so don't worry about that okay um yeah so some people are saying like i don't have the access don't worry about that if you if you missed some piece of the content we're going to have the recording and again just go to the template i shared in the chat and uh he also shared that as well so you can click on that link the tiny url link and then you open up on a separate screen so you don't drop here and then you can follow us well i can follow olenna because i'm going to just be watching here and learning myself cool are you guys ready okay are you ready there elena yeah i'm ready is that right everyone is also ready but in any case you can watch the recording if uh you didn't make it on time during open the template now so let's move on one second i'll open my settings panel okay so we now are reaching the pink section and this one i want you to really really see how we built the construction of this section it's going to seem like it's very long and it is but it has to accommodate you know every single image which we want to show really big because it's an artist's uh featured website so we really need to see all these images huge um so you will see these layers uh in your your pink section so i have it called pink academy section and then inside i have four main layers in which i have more things of course and grids because they're fun to work with so first one is called four images in the button so this one is the biggest container that contains all of the images that we show in a stockpile here so the container it's invisible but we'll take a look at it it has this image and this image in this image and this in a button so that's the first layer second layer is header and titles uh so this one holds the information the title uh you can edit it and make it your own then the third one is called top text so this one is small description of whatever this section is about in the in our instance is the of academy description and i also have here uh a button here the links to the academy and the last layer here is called outline plus vertical and that's the black outline that you see here and it's bigger than all of the other containers because it acts kind of like a frame and it also has inside of it this vertical text that we have also on a sticky position so uh let's take a look at this this four images in the btn layer a button layer and we're gonna go to selected and go to adjust grid it's kind of large so just scroll through to see uh this panel and we're gonna go to edit grid and now we'll land again in the grid settings of this very large long container that will have all of our images let's take a look how we build the sections so you will see here something that we already discussed before this is the use of 100 vh because for this site really wanted everything to be in whatever is the focal point of every section to really cover it completely and give it the most attention so in this way every image of the artist is super important we want to focus point it so it's going to be in the center so every colored box is where we're going to place the images and it's at 100 bh so you take a look it's all of them are 100 vh even the button one also will be at a hundred then inside of this inside of this layer of four images in the button we have these color containers and i call them image containers so we can see which one goes where uh and i will start with this green one so after we finish the sticky position and the piling event will take away the color and these containers will just be transparent but they will be holding our images i want us to really see how this uh using this color of the background to really see how this layering effect will happen and what's giving the height and how the width is responding so this color just really helps us see but once we're done we'll just get rid of it so i'm gonna open my settings panel here and i'm selecting this first green one into which i will drag the first image so i will go to the media and i will go to show more and i have some presets here i have the images already here but again you can go ahead to media from wix and select anything here for practice or upload anything on your own uh so i'm going to go to my folder i have this image that is exactly the same we're using and it's being placed at the top of the section so i will just drag it inside this green i see attach okay this means it's dragged actually there and now i will i'm done one second moving this okay uh center it horizontally and vertically using these align tools here and now it's you see it's undocked everywhere so that's exactly the perfect center it's when everything is at zero and then everything is conduct it's the same if we use these align alignment tools and now we want to make this image bigger so this is the most bottom image on our live site and it's also horizontal which is usually the size of the screens so we want it to be super big and feel the most that it can so i'm going to start at 80 percent widths and maybe i even want to go more um maybe 85 so it feels a little bit even more okay so now it's like really really bigger much bigger i can even set it to 100 this is really a design decision uh whatever is your image maybe you start to put the portrait so it will have a different dimensions okay so now this image is here in this container in this colored container and this colored container is inside the parent that has a 100 vh row height great so now we're going to go to the second image and i'm at the blue container now i'm gonna go to plus uh i have actually the gray image that i want to use here in the site files quick access but otherwise again just select the image that you would like and i will go to these alignment tools and i will do two clicks and it's going to uh center it vertically and horizontally for me all right just making sure i'm docking gray and now i'm we need to check so this one is 85 percent weight it's so clearly this is going to be not 85 percent widths because this is a portrait so it's actually longer by height um so i'm gonna go with 50 for now and see what it is okay 50 looks good but just to show you something i will go also to 80 and what we see now is that the image is actually being cut off here and we can leave this this is going to be a design decision that you would want but the stickiness will be like this so if it's top let's say dark to the top and whatever is left over after the height of the image will just be sticky you won't really see it so at this point this is a design decision so i'm going to go back to 50 because this is the closest that we have to the original site this is how we were building it now i'm finished with this gray one i am going to add my next one and for this one i'm actually going to drag whatever image do i have here first and do a different method how to update an image i'll go to change image so i just dragged any image on stage and then i'm going to go to change image and just select the right one [Music] and i have this here and i'm just going to adjust this ratio and go center vertically and horizontally and since this one it was also vertical uh a portrait and this was at 50 this is kind of closer to a square but maybe not a 50 because i want to have a stockpile effect i think even like 38 maybe so it's different and it's going to be on top great and now i'm up to the orange part the orange container and for this i have this blue image in a quick head [Music] and i will center it vertically and horizontally and probably the width should be maybe 25 okay so it's like really different and the stockpiling effect will really create this effect because all of them are different and i also see that i have a 8.4 margin so i'm just going to keep it at zero making sure that all of them are i need to see all zeros here on the bottom for margins okay okay we have that and we have a preset button here and we know that it's vertically centered and everything so we're just working with our images okay so now it's not in nothing is set to sticky position so it's just a long scroll of these images now let's take a look at the sticky position so we'll start with the green one i'm selecting the green one and i'm going to the scroll and scroll effect i'm gonna set to sticky and let's see what's the result that it's giving us we remember a few things that um in terms of layer arrangements that the stickiness default brings it to the top so let's see if it's actually the case again here okay so we're scrolling and yes it's becoming sticky and then you can see this um scroll bar here that i have i am scrolling down but you just don't see anything changing on the screen and that is because that the sticky position made this exact green container be the first layer and it's covering everything that's happening underneath and we just don't see it so the solution here uh could be the same that we did before which is just to arrange it to the back but since we have other containers that also are going to be at a sticky position we don't really need to do that because every time now that we create a sticky position this layer will become on top and since we're doing this in order from the bottom to the top we don't need to do the arrangement of layers it will be done automatically so we did the green one now let's do the pink one we'll create it in a sticky position the white one now so now the blue became on top now i made the white one sticky so that became on top now i'm doing the orange one sticky and it became the top layer and i'm doing this transparent already transparent one for the button with the three columns exactly built the same way we built the buy tickets one i'm going to create scroll effect sticky and now this is the most top layer so in this instance we didn't really have to do this additional arrange because we're doing all the other ones it's also sticky so i'm hitting preview and let's see how how it's working okay so yeah every time so now the layer order is correct and the stickiness is happening in order that we want wanted we just have these colored boxes to get rid of but basically the behavior is exactly like we wanted and the bigger image on the bottom vertical then and then a smaller one and then a blue one and then the button which also has a hover effect on top of it so let's get rid of the color boxes and we will finally publish the site and open it in a new tab with published version so container selecting container going to design and i'm going to get rid of the background make it zero blue make it zero white zero opacity background and orange and this one is already transparent okay and i'm gonna hit publish and i have this open so this is where this is a published link but be from before i haven't reloaded it and this is how we started if you guys remember we had empty section here asset section here uh this one didn't have interactions and this one was colored so now i'm going to reload this page and we're going to take a look at our final creation with the structure correct the interactions are here we're moving side to side uh as you can see the measurements are correct so this repeater here is exactly in the center of the screen we have the button going over has interactions going away and only then everything else is going away then we have hover interactions on this block section with our blog posts in perfect squares and scrolling scrolling on we have our yeah it's favorite section uh the pink one with stockpile effect of images and the button that also has a hover effect how do you like it edu how's the reactions over there i can't read anything that's amazing well done oh my god i'm super pumped this is super super cool uh it's insane like i mean how fast you got that done and really really really well explained everyone is loving it i'm actually gonna read some of the comments love it very good instructor amazing awesome love this thank you so much it's all for you really really good thank you so much elena

Channel: Editor X

Views: 2,581

Keywords: Editor X, responsive web design, responsive design, responsive, website builder, create a website, build a responsive website, how to make a website, CSS, CSS grid, layout, graphic design, web design, web development, web design inspiration, fluidity, CMS, content management system, ux, ux design process, flexbox, flexbox technology, web design agency, free responsive website templates, build websites for clients, breakpoint control, advanced web design, responsive layouts, webinar

Id: b3JoJwYpYls

Length: 93min 16sec (5596 seconds)

Published: Sun May 09 2021