Live webinar | How we built it: Our new Editor X homepage

so let's get started guys so my name is edu i'm your community manager um if you haven't seen my face yeti i hope you're going to see it more often because we're going to be joining you in more webinars and today we're going to talk to you about how did we build this amazing editor x homepage which is actually so good that's actually competing in the webby awards which is nice and we're going to share a little bit behind the scenes on how did we come up with it like a little bit about the strategy marie is going to cover that and then we have idle talking a little bit about the build so he is part of the team that has built this amazing amazing uh homepage for us and there's so much little uh secrets and hidden uh things that we added to showcase a little bit of the uh capabilities of editor x so we have a lot to cover and at the end uh before the q a i'm gonna share a contest that we're actually running which is also a good opportunity for you to showcase your best work and perhaps get a prize who knows so let's maybe get started and for that i'm going to invite maria to share a little bit about the behind the scenes and the marketing decisions so maria take it away sure thank you so much edu and hello everybody as educaria from the x team and i'm gonna dive straight in so i'm hoping lots of you have seen our homepage um if you haven't um and you're already logged in which i also hope you are if you're logged into editor x you won't see it you're going to bypass it and go to my site so uh edu is going to send you now a special link in the chat so that you can take a look at the page and explore it while we're while we're going through this webinar so um just let's take a quick scroll through here and you'll notice right away that our page is very light on content it's very tight and direct and to the point in line with our brand voice guidelines it was crafted by a very talented content writer diane from the team and you'll also see straight away that it's a heavily visual page so the page shows off a lot of our key features visually so the approach that we took uh in general was a show don't tell approach to our brand's key message um we want to especially because we're catering to you know such a design-oriented audience and our product is so design focused so we're going to show you uh how to build some of these sections i won't actually e dog will show you um how to build some of these sections in a few minutes but first i want us to take a little bit of perspective on the goals for this page and how we tackled it from a marketing perspective um so as a lot of you uh if you know editor x if you've been exploring us for a little while you'll know a few things about us but put simply this page as with all home pages is a gateway for potential creators to sign up to editor x so we need to provide an overview of our entire offering um as with all home pages so editor x has an extremely broad offering uh it's massive platform with a huge range of products and solutions from design and collaboration features business marketing solutions that go all the way to the end client so one of our key challenges here in building this page and structuring it was honing in on what's the most important message and figuring out how to get this message across quickly and elegantly and especially in a way that would appeal to our intended audience which is in fact you um so basically what we had in our minds was what matters most to designers and agency professionals like you so we there were a few ways that we that we did this um and first of all of course there were a lot of teams involved and uh uh with this from design to seo to bi to product marketing to content so one of the things that we did was to just map out our key value propositions as i'm sure lots of you do for projects all the time um this is this is again this is our approach that i'm sharing and we're very curious to hear your approach in the chat if if you if you feel free to share um so what we did was we figured out the hierarchy that was the most important first step um between all of our uh propositions uh in into how we could structure that into a into a page so as i'm sure lots of you also know long scroll pages are becoming very common people are used to having to scroll to get information but still it's i think the latest stats is 81 are still only looking at the first three folds of a page so we bought this in mind of course while we were building our structure and we really wanted to place our most significant value propositions really early on in the page and here here is also where our seo strategists uh and specialists came came into play here because they were helping us uh guide us towards this optimal content structuring um to help us convey our core message to you our target audience and also of course in this day and age to search engines to make sure that we're you know relevant on search so a few of the approaches that the seo team use is uh you know through analyzing topic hierarchy using there's a lot of smart internal linking within the page and of course we did uh the content team worked with some keyword targeting um but also i think it's important that i that i point this out that a lot of it was just us putting ourselves into the minds of prospective creators like you so one of the driving factors behind building this structure was telling a story in a logical build order so we we wanted to really talk to uh designers who are approaching a website and considering a platform that they might want to use and so the one of the ways that we've structured it here is you know starting with the design elements throwing things onto the canvas how you start sort of prototyping your your design and then once that's in in place you'll loop in other team members perhaps um i'm sure lots of uh lots of you guys work with other collaborators and contributors on your site so it was important for us to put that in your minds as a viewer of this page then comes the moment when you want to be adding content to your page perhaps through a back office cms uh with some dynamic content if you've got a lot of rich content for a brand um and then you might loop in a developer and add some extra custom code to really break those boundaries of the site and once you've got all all the way there you might start thinking about all the really deep infrastructure that you need to be going on on this page so that's why we've in terms of story we've positioned our business and marketing solutions here underneath the creation aspects and then if you get that far once you've been scrolling the page for that far and we've we've managed to keep you interested it's a moment with that we chose to inject a little bit of trust here so um of course switching the website builder or choosing website builder is a huge decision uh for for a professional and so we wanted to really show the viewer that they can feel confident that they're surrounded by other creators who've produced some truly beautiful things and uh this i say with great pride about the wonderful creators that we have on our platform building some really beautiful things so we thought it was important to give them a space here on this page as a representation of other creators um to uh to show off their work so and then of course the story builds further if we if we've got your interest and you are interested in trying out the platform you might be interested in how to learn it so we've got academy resources and you might wonder if there's a community surrounding it so it was really really most of it was logic with how to how to build the structure of this page so and i mentioned seo very briefly uh back there but um i want to say that our seo strategist carly is here with us today um she'll join us at the end so if you do have any seo related questions about projects that you're working on or about questions for us um do throw them in the chat because uh carly will be happy to to help out and uh we could have a good conversation about about that as well so uh let's take a look for us about the first fold of our page um just gonna whiz all the way back up here so uh here we have a very quick what why and what next as i said people don't tend to scroll we most people stay at the top so we really need to grab those immediate conversions with the very first thing that we say so and that what why what next if any of you studied copywriting or content you'll know that it's the golden rules uh in terms of uh copy so we what we're doing here is quickly telling the right people that they've come to the right place so in terms of the what we've got a heavy uh product placement of the in terms of visuals um and as i said because we're a visual brand we're not just relying on the content here we're heavily relying on the visuals to convey our message so you'll see it's not an abstract uh impression of the editor or the platform it is actually what the editor looks like inside we want to give you a real honest glimpse of the kind of tool that you'll be working with um by this by the same token we're not afraid to perhaps put off a more um basic uh user who might need a different tool we're happy to say here that this is a complex design tool with lots of advanced features we've got our inspector panel open which is important for that intent and also in terms of the what uh we we're selling a little bit of a dream here with our with our title um we do believe that you know editor x is the way forward for professional web designers and the sub the sub message here is that you know if this is the new standard and you're not with us then you will fall behind so that was the that was the copy approach here and then uh of course in terms of the why we're approaching our two of our key value propositions right off the bat so we've got the fact that we're a very advanced design tool but we also can you know take you straight to production all in one environment is very important for us and we think it's important that a viewer will know this straight away and the second factor is the this very deep responsive css control but powered in a in a very smooth drag-and-drop environment so we believe that they're hooks and important things to say about our brand earlier and so uh and then we come to the what next which is pretty clear here with our cta with start creating and you know there aren't any lengthy sign up flows for editor x you don't have to go through payment pages and stuff so we're straight to the point here that if you're interested then you can go go wrong with it builds build sites uh go live with them if if you wish so this this fold here was of course to help those immediate conversions for people who are pretty convinced already that they want to sign up so um let's take a look at this next uh point i wanted to make here um of course bi comes into play when we're building a page like this and from reviewing our own page bi we did notice the standard pattern so the first few folds are grabbing the most clicks the first one and the second one in fact they've got people signing up to edit direct fastest but actually in third place was our final fold which was right at the bottom of the page was getting the third highest number of clicks which for us was a great success because it means that we've successfully encouraged the a large proportion of our viewers to scroll and to reveal and review the full story that we wanted to tell them so what i would like to do now is to talk a little bit about some of the ways that we encouraged that scrolling behavior so that we could get the right people to get interested in our page and to want to look more so the first example which edo is going to go into in depth with you is this uh very first moment when you just as soon as you touch the mouse here and you you start to scroll you trigger a shift in the design that's intentional it a it raises the curiosity of a visually stimulated audience like you guys and b it also showcases one of our key features which is a sticky position feature which is very popular and it's a it's a very beautiful use case of this uh feature and it helps support our brand message in a lovely way um so you know i'd love it if you could uh dive in and show show our viewers how to how to create this effect sure let me just uh take over the screen sharing here just in the meanwhile while it is sharing his screen uh just a reminder guys if you want to use the q a box so you can ask the questions there we want to make sure that we don't lose anything so um you can use the q and a's just besides the raised hand button at the bottom there so you can ask as many questions as you want i just want to make sure we don't lose it so cool take it away though all right uh so hi everybody my name is ido i'm a technical designer here at the editor x team and i was also part of building our lovely homepage which of course was built completely in editor x and the effect that we get here on the initial scroll is basically using a sticky effect we see that as we scroll down these like this control container we'll call it is scrolling with us as we scroll the page it's it's following us and it stops exactly on this in this position here and as we continue scrolling it stays where it is so i want to show how we set this up all right so first of all let's take a look i've i've cleaned up a bit so we only have the elements that we need for this specific effect so all the other elements that you see here i've cleaned up for the purpose of this demonstration so what we have here is a section the first and second fold are basically part of one section and this section is actually divided into two rows using our css grid capability so as you can see i have a section and it has two rows and it's one section the reason that it is one section it's cool crucial to the to to the effect that we're trying to achieve here so first of all let's talk about the elements that we have here here we have uh this image here and in the second fold we have a container that contains two images and we also have this controls container uh which uh has all our inspector panel in the top bar here and these elements are separate from each other meaning that this image is not in any way inside this container they're totally separate so first thing that we're going to do the effect that we want to get is for the controls container to scroll and get under these images and the first thing that we're going to do we're going to go here to our inspector panel and we're going to set the scroll effect to sticky i selected the controls container and changed the scroll to sticky immediately what happened here is that when i set something to sticky it pops to the front of every other element so now the image is behind it and i actually want to take it back again so i'm gonna go to my layers panel and i'm gonna drag the container under the image and now the image is on top again so the way sticky works is that by default the element sticks to the top of the page and then when we reach the end of its parent container so we have our child container which is the controls container and our parent container as i said before is the section itself so the end of the section is here so basically sticky is going to make it stick to the top of the page it's going to make this container stick to the top of to the top of the page and when it reaches the end of its parent container it's going to be swept away and let's let's demonstrate that all right so you see now as i scroll when i reach the top of the page the element sticks and it keeps on sticking and it will keep on sticking until i reach the edge of the section and from this point it will be swept away by its parent container which is the section all right cool so i think for our next step we obviously don't want it sticking to the top so how can we do that how can we say that i'm going to select my controls container and i'm going to take a look at what's going on with with its position and i see that it's docked to the top with 26.1 percent so i can take that value and i can use it and i'm going to use it here in the top offset of the sticky so i'm going to change this to 26.1 percent and you see now when i preview as i scroll it's no longer sticking to the top it's sticking 26.1 percent from the top because i i set an offset it's still gonna go all the way to the end of the section so now we have to tackle this issue and we have to get a bit smart about it but uh i i personally love this kind of uh these kind of things and what we're going to do is we're going to select this container here and we're going to actually use editor x features for calculation purposes i'm going to do something momentarily and then we're going to undo what i'm doing here but i'm doing it just to get a valor i'll show you what i mean i'm going to use this container which is docked right now to the left and to the top and i'm going to dock it to the bottom all right so i get a value here and because we're talking about responsive web design the value here is in pixels but i'm going to convert that to percentage and i see that it's 13.6 cool i'll remember that now i'm going to undo the last two steps because i want it to be like it was before and now i'm going to select my controls container and what i'm going to do is i'm going to give it a bottom margin of 13.6 so when i add a margin to an element it's basically like adding an invisible block to the other so when the control container reaches the position i want it to reach it will be already touching the bottom of the section and will be swept away immediately so let's see that in action so i'm going to give here 13.6 percent bottom margin i don't have to dock it i'm just giving it a margin and now let's preview and as i scroll you'll see that when i get to this point here it's going to scroll along with me and that's because basically when i get here i'm already touching the edge of the section because of the margin i gave and this is the full effect and we also have some really cool easter eggs hidden here and uh maria is going to tell you about them sure thanks edo um so yes easter that was super interesting um and another way that we do make sure that we're speaking and engaging with our our specific target audience is through little subtle nods and winks if you like that that might go unnoticed by others the by others i mean those for whom the page maybe is not relevant so we're on the team we're all creators so we ourselves had a lot of fun leaving a few easter eggs for curious like-minded people like you um there are a few of them throughout the page so i'd be very interested to to hear in the chat if you found any of them um uh but i'm gonna point out one of them uh to you now which i i i hope that if you were scrolling the page and exploring it and you happened to find it it would be very satisfying if you didn't it's it's all good because we did get the message across um within the within the content within diane's content so if you were interested and curious about breakpoints and web design in general you might have wandered your mouse over these um little uh icons here and you would have found these little hidden treasures and i i do hope that some of you did find them because i know you don't spend a lot of time redesigning this site across uh all the breakpoints so it would be great and also if you if you hover over the ad panel you can explore a little bit on the canvas if you want to to to find out a little bit about the the platform so there are there are a few more easter eggs throughout the page so do write us in the chat if you've noticed any of them or if you're noticing them now now that we've drawn your attention to them um so next up we're going to scroll down to the uh the teamwork and collaboration section so if any of you came to our unstoppable event you'll know that a huge focus for our product is team collaboration so we wanted to dive into this value early on in the page we're still only on fold three right now um so we're not a platform that's exclusively for teams so this isn't a fold one message but we do expect a large proportion of the audience that we're talking to to collaborate in some way on most projects so we wanted those people to see this right away so in terms of visuals here we went very demonstrative so uh it's the functionality and the intent is instantly recognizable we didn't go abstract again it's very uh direct with these avatars dotted lines connecting uh one team member to another and cards suggesting the comments um uh either if you if you uh want to show reveal one of the easter eggs then please do here great so we've just invited john to the team as well it's one of our functions and also what better way to demonstrate the power of our product uh again with this show don't tell approach than with hover interactions so this is one of our latest uh features that is currently in roll out so some of you might already be playing with it um and we're we're silently and kind of casually showcasing a few of the transforms that we have on offer here like translate and rotate at the same time it's talking about collaboration so we're kind of combining our messages in one and giving you a general impression here so um ido i'd love it if you uh show us uh how you built these interactions sure all right so let's go back to editing mode and let's scroll to our interactions to our collaboration section sorry um so in this section we see this team member card layout here and we have this comments card on top and i'm just going to choose not to display it now just a minute and as you can see under it uh there's an avatar and the name of the team member in his email and what we want to achieve here is is two things to happen so we want this little when we hover we want this little circle here to uh rotate 180 degrees and we also want the comments card to fly in from the left side to cover this avatar so i'm just going to undo the not displaying here and first thing that we want to do is select the parent container of all these elements i'm going to do that from here all right so the way interactions work is that you apply them to a parent container and then animate its children so now we have the parent container selected and through the inspector panel i can go to the interactions panel and click add hover interaction and then i'm going to choose custom interactions so as you can see my layers panel is open here and you see that everything is grayed out except the parent container itself so i'm gonna go in into the parent container and now i'm just gonna select the container of the comments that's above and i'm going to change the state here from hover to initial and when i edit interactions in initial state i'm basically editing the behavior of the elements when they're not hovered so i'm editing the unhovered state first so when i'm not hovering over the card i want to change this translate x property here and i'm going to change it to minus 200 percent and immediately you'll see that when i press enter it will throw this container here 200 percent to the left like so all right so that's that next thing i want to do is i want to choose this vector arc which is this circle here and i want to change it to 180 but i'm going to change the state first because i want it to change while i'm hovering so i change the state to hover and here in the rotate i'll just put in 180 and last thing i'm going to do is i'm going to set my timings here and i'm going to set the timings of the interactions to 0.4 seconds and again 0.4 seconds and then i can hit done let's preview this and immediately i can see that the interactions works but i have an issue here because the comments card is visible outside the parents so what we can do here is use a setting of the overflow of the container so let's just select the parent container and we'll go to the layout in the inspector panel and in this overflow content setting i'm going to change it to high and when we preview now it's working as it should nice looks beautiful thank you edo um so i think uh of course i'm sure as lots of you know there are so many ways to use hover interactions to get across a message and in so many different types of website and to generally give that feeling of the site responding to the viewers gestures so another key part of our offering um let's scroll down now to the um business infrastructure section so you'll see here we also use some really simple interactions to illustrate our offering we have as i mentioned we have a big range from you know business solutions to marketing tools for the end client and so we wanted to first of all visually show them and if you're curious if you hover we have this very simple translate interaction coming in here from the left and um again on the template strip we used a simple hide show interaction to reveal a cta and this one's quite interesting because we've built it on a on a repeating layout which gives you some great uh advantages in terms of efficiency of design so i'd i'd love it if you don't you just give a quick glimpse at how how fast this one was to set up these these these cta interactions that you've added here all right so i'll just scroll to the template section here and let's see how this is laid out so basically what we have here is we have a repeater um and there are under under these uh black boxes with the city cta button there is an image of the template and basically we're doing another like cool interaction really quick interaction here when when i'm not hovered over the box i will see the image and when i hover uh the black box will change in opacity and cover uh the image so let's do that so first of all as as i said we have to choose the parent container in this case the parent container is the repeater item itself so i've chosen it and i'm gonna go to um my interactions panel again and i'm gonna choose add other interaction custom interaction and then again i'm gonna go to my layers panel and i'm going to choose this container here which is the black box with the cta and i'm going to go to my initial state and in the initial state i want the opacity of this container to be zero because i don't want it to show when i'm not covered and immediately you see what happens and my timing i like it 0.3 seconds is fine for me and i'm going to hit done and then i'm going to preview and it's that fast and it's immediately applies to all the repeater items here great thanks edo that's uh a super efficient way to apply interactions thank you um so let's uh move back up for a second uh the last point i'd like to make um in the show don't tell approach that we've used here is on our code uh section of the page so um again we're addressing a highly visual audience so we're we're wanting to make sure that our features are constantly speaking for themselves so uh we we code capabilities at one of our strong competitive features letting you take the lid off the platform in a number of ways and in a number of directions so as we we do describe the feature verbally very succinctly here but we also demonstrate the product very literally so um i i'm sure some of you noticed uh maybe you didn't but this code snippet at the bottom actually will can be used to reproduce the moving background gradient that you see in the design of this section so gradients are a big part of our visual brand language both static gradients and and those in motion and um notice that we didn't mention the built-in ide in our content we just showed it really practically with a use case that we're presenting here so and also as a gift to the creators out there we we've added a little cta for you to copy this snippet if you want uh do feel free to use it um idol can can explain more in a second but when you see the those purple dynamic parameters that's for you to add your add your own uh element ids there um yes so basically if you copy this uh this code snippet just make sure the element that i'm referencing now i called it background image uh in in in the editor itself but uh in your uh in your sites it could be called something else so this just has has to match of course perfect yes so whether you're familiar with code and comfortable using it already or if you want to learn more about how to use code on editor x we are going to be running a a two-part webinar on velo which is the name of our open development platform so if if you're curious do check it out on our webinars page i think uh shiri or edu will will will share that link to the sign up in the chat if you're interested um but for now edo let's let's take a look at the this code snippet in action how you applied it here all right so first of all um in order to get into dev mode and to to use velo we need to turn on dev mode and it's from the top panel here and then i'm going to turn on dev mode and immediately we get uh an ide here in which you can enter your coding so velo lets you add custom code and logic to your website and i pasted this code snippet for the background animation effect for those of you who know javascript the syntax should be familiar and what we're going to use is the wix animation api so here at the top we're importing it and inside the on ready function i'm i'm calling an activate background animation function which i defined here so basically when the page is ready this function will run and now let's talk about what we did here so using the dollar w that's a way for me to select an element and i can reference that in the code so and i can set it as a um as a variable like i did here so i did dollar w the id of my background image and set it to uh background image and next thing i'm gonna do is i'm gonna define a timeline and a timeline um a wix animation timeline is like a script it's like a script for my animation and it has some properties here so first of all uh the the general properties is repeat minus one this means that it will repeat the animation will repeat infinitely and when i set yoyo to true it means that the animation will reach the end the end of the animation and then it will animate back in reverse and now for the animation itself i'm using uh the add method here and i'm referencing my background image because that's what i want the animation to be on and i'm scaling the image by 1.8 so it's 1.8 of its size and i'm rotating it 45 degrees and i'm moving it 100 pixels on the x-axis and the duration of the animation is set in milliseconds so we have 15 000 milliseconds so that's 15 seconds so it's pretty like slow animation um and here uh i the timeline that i defined i use the play method on it and when we preview this let's just get to that you'll see that it's animating and that's it that's that's the effect that we get that's so cool man amazing amazing job thank you so much again maria and ital this was really really cool uh i know we have a lot of questions that came in and a lot of people really thanking you both because they're really really good in explaining this in a nice way in a way that makes it very easy to understand so this is really good thanks for that uh so guys we're gonna uh jump into a couple of questions but just before we do it um remember that i told you we have a web a contest for your best web creation so it's gonna be really hard url make sure you remember that so it's editorx.com slash contest done done so you can submit your best work there and then our designers alongside with the uh off uh the guys from barcelona uh designers as well we're gonna be choosing uh the winner and we're gonna have cool prizes so just wanna make sure you guys join the contest don't do that right right now because otherwise you're gonna you know forget us here so stick with us for another while we have the questions um and again if you really like this uh homepage and you felt this was worthy your vote you can go on webby and vote for us which is going to be really really nice you're going to be super thankful for you i'll secretly share the link here just in case um and let's jump into q a the first question i have is for you idol and that that was a question that came in from two different people uh but it's around the sticky effect and the question is will it work in the smaller break points definitely it will work in the smaller breakpoints and furthermore you can override it in the smaller breakpoints if you don't want it to work in the smaller breakpoints so you have that choice for example in in uh in our homepage we decided not to use that sticky effect in the smaller breakpoints gotcha makes sense makes sense that's cool uh another question for you are you ready for this so you you did the hover effect um so how does that work on mobile does it work there so basically um you can set it not to work on mobile if you don't want to again and the way it works on mobile hover is the same as tap so if if you're if you're developing uh and then you're using it on mobile then when you tap it will be the same as hovering got it makes sense um this is another question and um i want to make i don't know if i know where exactly they see that but uh hammond muse asked why did you choose 200 rather than a hundred percent that was probably when you're building the uh was it during the the interaction hammond if you want to actually you know um add your thoughts on that just want to make sure i got your question right that was probably during the understand i understand what he did yeah but he asked so i i wanted i wanted i timed it in a way that i wanted to get uh the the container to get there like slower so i send it further away when i say i for the first time i tried to do it with a hundred percent but it came in too fast so i sent it 200 and that way it came in slower got it cool cool um maria i have a question for you what's your favorite part of the website i don't know actually i guess probably the the the easter egg section or possibly the showcase of the of the beautiful websites by the creators i think they they really add to our our message and they're visually very impressive nice that's cool and it'll same question for you but actually i want to twist a little bit what was the most fun part to build the most fun part to build well i guess it was the was the teams and collaborations section for me because of all the cool functionality inside it and the hover effects and the cool stuff nice that's really cool that's really cool i know we got a ton of questions that are slightly unrelated to today's uh webinar uh but um we should uh try and get back to you we'll see some of them will be answered by the team here in the q a you can also jump into the community uh if you want to ask these questions there so we have other members in the community so you go to editorxcommunity.com and people can jump in they can share their thoughts and we have also our team there uh to try and answer these questions to you so i just want to make sure that we stay within uh the theme uh but i know some questions are really good uh but just not answered you know uh not probably not gonna be answered just now but let me see there are more coming in i'm trying to get all of them because there are a lot of them um another one for you ido are you ready yeah is there a way to make the background image go away uh go all the way to the top underneath the header i think we did that for the off barcelona website probably the background image all the way to the top underneath the header you mean that the header is like oh i understand like for the header to be transparent over the the background image possibly um if uh whoever asked the question wants to let me see who asked so if if um if that's the question uh so if you set uh in editor x if you set uh your header um to fix then you have a setting there of overlap next section and if your header is transparent it will overlap the next section with the background image on it and then the background image will be visible behind the header gotcha does it answer your question bruno uh i think he said yep just want to check yeah cool um another question for you oh my god getting tons of questions here uh the image with the slow movement animation is that originally i still image which becomes animation or animated with the code um i'm assuming that we're referring to this image maybe these are two images right yeah there are two images here um let me just if i just refresh this and if we go in here no we didn't see it just let me refresh again so you mean when we scroll down and we have this image coming in um this one imagine so yeah all right there he goes i mean the image with the blur animation oh the one for the code at the very bottom the image with the blur so what was the question about it um that image that has this low movement so i believe that's the one that's exactly it um so is that a still image that's just moving uh with code and i think it is right yeah that's that's exactly what we showed it's a still image that we're moving around and of course um uh the containers the container that it's in um is is said to be overflow hidden so in that way we don't see the image outside of it got it got it and also you know uh since you asked this question um edo is showing the screen there at the bottom there you have the copy code you can copy that code and then you can play around and see how that works okay uh another question for you you know oh my god very popular um is there a way to set items inside a repeater to sticky um no i don't think you can do that okay fair enough um let's see if they're more quite oh my goodness i'm trying to catch up with all the questions here guys but if you have more questions that are uh coming in uh just now feel free to post them uh there's one from prattan praten is a really really uh good contributor to our community and uh he's really excited with our hover interactions and he's asking you maybe maria that's for you if we're gonna have a webinar if you could have a webinar that's gonna specifically talk about the hover interactions um i don't believe it's coming up uh soon in our pipeline but noted and we can we can definitely do a dedicated interactions webinar i'll talk to the team awesome cool good question um let's see what else we have in here if there's any question that's also related to today's um webinar i'm oh if you're asking in the chat just want to make sure you guys asking the q a because that's the the page i'm looking at um just in case oh look at that more people are associated as like yes webinar for hovers and lisa as well i would love to dedicate hover interactions right now too we hear you no pressure let's see another question um on the layer panel i think that's for you on the layer panel can you move one container from another section to another oh can you move a container from one section to another you can put you can do it uh right now you can do it with uh um like you can cut and paste uh dragging it will only work uh within the section itself got it makes sense um another question for you either can you easily run a video instead of the pictures inside the containers excuse me can you ask again yeah can you can you run a video instead of an image uh inside a container yes definitely you can add a video box you can add a single video player to add to a container no problem pretty straightforward um another question that came in the chat but i just happened to have read this because it's very similar can you add audio inside a container you cannot like an audio player perhaps a player right we have a um let me see how it's called here if if if by audio it means like the audio player then then we have audio players like many audio players that we can add walter's saying no players but um maybe walter if you want to elaborate or even if you want to ping us this question on the community i'll make sure that uh i'll talk to you so we can follow up with you there and just a reminder for people asking if they can watch a replay of this webinar because they came in late yes you can uh so if you go to our editorx.com academy slash webinars it's going to be all available there and the off barcelona webinar is also there so you can uh you know also sign up for any other webinar that's coming up in the future like develop one that we're gonna do uh and hopefully the hover interactions one that's hopefully gonna come too so we never know you ask we listen so yeah oh cool yeah no worries uh let's see if there are any other uh questions coming in um let's see let's see and if you have questions for maria as well like on the you can feel free to ask i know a lot of people want to see behind the code behind the build which is super cool and exciting uh i'm also learning every single day that i'm listening to ido talking so it's good to be here and let's see if you have more questions that are coming in um uh oh some questions about adding effects i think we can answer that in the community as well um good question on the glossing blur um let's see any other questions on the homepage build guys um i know a lot of the questions that are coming in not necessarily on the homepage i know ryan had some questions as well i want to make sure i get back to you ryan i know you asked some questions in the chat as well um what uh i actually want to actually want to get back to the user that asked us about adding sticky to to um to a repeater item um i need to i will check it out if we can get the details uh of this user and i will get back to you in person because i see that we can actually set this to sticky see what that does it sounds good well it's not actually setting to sticky but let me get back to him on that perfect that sounds good that sounds good um any other questions guys related to our homepage build oh david's saying i love the range of customization of interacting elements on the home page thank you you can pass it on and i'll make sure that it is going to pass this on to to our team uh behind the build which is really really cool again if you have a really cool website you have built that you're really proud of go to our contest page and submit it there if you have more questions that are related to other things not necessarily on the homepage you can ask away in the community um if you if you have anything that's a bit more related to seo as well you can ask us we have an excel expert here with us today uh i'm actually saying i don't have a question but i just want to say editor x is amazing thank you we're super happy i know pass this on to the team um cool let's see if there any other new questions coming in here in the chat box on the q a i guess there isn't okay okay cool guys i mean i'm super excited and thank you everyone for sticking with us today uh he was really really good um so bruno bruno clement thank you for the great webinar maxi are you welcome uh tuan thank you yeah awesome awesome and yeah guys thank you so much thanks maria thanks edo again for your time and for sharing your wisdom uh with us welcome thank you thank you everyone thanks guys and see you next time

Channel: Editor X

Views: 3,915

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: N74MW7VHxMs

Length: 54min 23sec (3263 seconds)

Published: Sun May 09 2021