How to - Cwicly Modal Pop Up - Wordpress Gutenberg

hi there artemis from the quickly team in this video i will be sharing how to create a pop-up with the use of a moodle element pop-ups are a great way to engage a potential customer and a great way to catch their attention especially if your message pops up before they decide to leave however it is essential to limit the use of pop-ups because they can cheapen the look and feel of a website and they can even bore the customer if they are constantly bombarded one intentional pop-up is much more striking than an overload of them the pop-up we will be building together today is extremely simple to build and set up we went for a standard pop-up look however we decided to have two ways in which this pop-up is stimulated the first is a subtle info icon in the left bottom corner which subtly hints to the user to push on it this is my preferred use of pop-ups because to the user it feels like they triggered it or their own will the second is when you go out of the section the pop-up comes up in case the user hasn't seen the info icon let's get building here we are in the gutenberg editor on our dobr layout which you can find in the quickly design library we will be building our popup for our hero element since it's the first element seen when users come on our website it's the most useful place to have it let's start by adding our info icon to our hero let's give it a size of 50 pixels and give it a white background color to pop out against our black let's give it some padding in the spacing tab of 15 pixels next in the borders panel round our corners with a 15 pixel radius we want our icon to be placed in the left bottom corner so let's head to the advanced tab and navigate to the container layout and select a position of absolute let's also place it 25 pixels from the bottom let's toggle the find as link property and set it up for our modal let's select edit link and select action our source is modal we will leave the open type because that's exactly what we want that is for our pop-up to open when we click on our info icon we haven't made our popup yet so we can't fill in the block id but we must not forget to add it once we have built it now it's time to actually build our popup we will be using a modal block so let's add it to our layout it is perfectly normal that we see a dark gray section this is replicating the user's viewport slash document body before we give our pop-up a width or height let's select a vertical direction select flex start for our blocks in our pop-up to be placed on the left and use the space around property now let's head to the modal style tab this is where we get to control how our pop-up looks where it will be displayed on our page and we can select if we want an overlay or not and customize its color so let's give our pop-up a 50 width as you can see we can't see our pop-up let alone its size and width but that's because we didn't give it a background color so let's do that right now with the background color property now we can see our pop-up i don't want our pop-up to be in the top left corner but in the center of our page so let's head back to the modal style property and center our popup in the align and justify property before we add our blocks let's quickly route our corners by heading to the advanced tab and into the borders panel let's give a 15 pixel border radius i will add my family font now that way all the child blocks of the modal will have the same font family without me needing to add it every time since our pop-up is black our text elements need to be white to be seen so let's select a white text color now let's add our blocks first we will need a div because i want our h2 heading and exit icon to be in a row direction which means next to each other instead of on top of each other selecting our div let's select a horizontal direction and flex start and the space between property now let's navigate to the advanced tab and into the container sizing tab and give it a hundred percent width now let's add our h255 pixel font sized heading and our 30 pixel sized exit icon for our heading let's head to the advanced tab and into the container sizing panel and give it a 75 width selecting our exit icon we can toggle the define as link property and select the same properties as our previous linked icon except that we will choose the close type in order for our popup to be exited we can add our popups id and add it to our info icon that we made earlier now let's add our 35 pixel font size paragraph next we will add a div where our two buttons will sit next to each other so let's select the horizontal direction and center it let's duplicate with the linking feature the buttons that we use in our hero and throughout our design because our buttons are linked our original buttons had a bottom margin because they were on top of each other let's get rid of this margin in the margining padding panel by unlinking the bottom margin and setting it to 0 pixels we must add our first linked buttons class to our second linked button because when we modify the first we wanted to modify the second our button that says no fangs can be made into a link and edited in the same way we did with our exit icon our pop-up really needs some padding and margins let's select our pop-up and navigate to the advanced tab and head to the margining padding panel let's give it a 45 pixel padding now selecting our first div let's give it a 115 pixel bottom margin now selecting our paragraph let's give it a 20 pixel bottom margin let's select the no thanks button and give it a 15 left margin as always we need our pop-up to be responsive on tablet view let's select our pop-up head to the container sizing and give it a 70 width next let's select our heading and give it an 85 percent width and bring down its font size to 40 pixels let's bring down to 30 pixels our paragraph font size let's also bring down our buttons font size to 18 pixels on mobile view let's bring down our headings font size to 25 pixels and our icon size to 25 pixels let's also bring down our paragraph's font size to 22 pixels lastly selecting our buttons let's bring down their left and right padding to 15 pixels as you can see our pop-up still looks oddly shaped but that's because we have to readjust its size to 95 in the container layout now that our pop-up is fully responsive we need to make it look more lively and animated when it comes up because for the moment it lacks smoothness so let's head to the modal animation tab where we will give our transition pop-up a 0.6 seconds duration to make it appear and disappear smoothly as i said in the beginning of the video with this pop-up we want two different ways in which this popup is stimulated we already have our info icon trigger but our exit trigger is missing to quickly and simply add it all we need to do is to head to the modal trigger panel and select from a variety of options on exit intent property now we have a fully responsive pop-up that can be triggered in two different ways now that we have finished our modal if we wanted to continue designing our layout it would be easier to do that without seeing the modal since in the front end the modals are not seen we can easily do this with this hidden modal feature now we have a fully responsive pop-up that can be triggered in two different ways thank you for watching this video and if you have any question whatsoever please write it down in the comment section below bye you

Channel: Cwicly

Views: 433

Keywords: wordpress, gutenberg, modal, popup, website, webbuilder, cwicly, tutorial, howto, design, creating

Id: V3kPBj-NrWE

Length: 9min 10sec (550 seconds)

Published: Sat Nov 27 2021