Hey everyone, Aimee here! If you’re just gettingstarted with GroovePages or haven’t logged into GroovePages for a while and need a refresher,then this video is for you. I just want to do a quick shout out to everyone who upgraded tolifetime through my link, thank you so much from the bottom of my heart because your support keepsthis channel alive and helps everyone out as well. Now if you signed up to Groove.cm using mylinks in the description area below this training is already in the members area for youand it’s broken down into bite-sized videos for easy consumption along with your other bonuses aswell.In this GroovePages tutorial for beginners, I’m going to give you a complete walkthrough ofGroovePages and how to navigate the interface since their updates. Now this video is intense soplease make use of the timestamps below this video in my pinned comment because some of the thingsi’m about to go through you may already know, and you might want to jump to the parts that youdon’t know. Now before we begin, please like this video to show your support because it took me agesto create this one video for you. Are you ready? let’s go! Okay when you’re logged intoGroovePages, you want to head here and click on new site. Up top, in these tabs you willsee templates for single pages, complete site templates, funnel templates webinar templates,my templates are your own personal templates that you saved. I’ll show you how to do that later on.Heading back to single pages, you can sort these templates by category or clicking on any of thesetags. So you might just want a template on lead generation, these are the templates available foryou.Now i’m going to go through this walkthrough on my lifetime account and there will be somefeatures that free account users may not have access to. For example, on your free account youstill get access to some templates but most of these templates will have a premium badge on itwhich means you need to upgrade but don’t let that stop you from creating your own websitesand funnels okay. Personally a tip here is I would sketch out a wireframe i.e a page layoutfirst on pen and paper and then i can go down here. I’ll untick lead generation and then I’lljust scan the different types of templates that have a similar layout like my wireframe to savetime on styling and formatting. Let’s click on complete sites and choose the multi-course academywebsite as a template, click select give this a name and click on start building.The websitetemplate has loaded but first i want to show you global site settings because it’s often forgottenbut necessary. Head down here to settings, click on site settings. For business or website name,this is the name of your GroovePages project. So that when you log it back into GroovePages,you can just search for the name. For example if you are logged back into GroovePages and you typein Aimee in the search box, it will show you your GroovePages projects. Your favicon is the iconthat is associated with your website.For example if i go to aimeevo.com, you see this icon overhere, that’s your favicon. To change your favicon, click on choose image, click on upload image,I’ll select this. Click open to upload your image, you need to click on this up arrow and you will dothat to any image that you upload on GroovePages, that will upload it to the server. Onceit’s finished uploading there will be this pink outline around the image, that means it’sselected and you can reduce the image size by 50 if you wanted to. That’s how you update images byclicking update dimensions, then click on select. Under font, this is the global font settings thatyou can set as default for your website.If you click on the drop down arrow here, you will seeall the available fonts that you can choose from. Let’s say you choose “Poppins” for example, thismeans that every time you drag in a text element, that font is preset to Poppins for you asa default. Under custom css, css stands for cascading style sheets, it’s where you add a bitof code to set a specific style for your website’s layout, borders, colors, fonts etc If you’rea website developer or designer go crazy here and add your own a css. Under code includestracking ga: this is where you can add your google analytics, google tag manager or anyad tracking codes.Let’s say you want to add google analytics, google analytics will giveyou a global site tag which is a bit of code that you need to paste in the head section of yourwebsite. I’ve just opened up my google analytics and this is the global site tag that youneed to paste. Just highlight all of that, head back to your GroovePages and you paste it allin here. Now if you have tracking codes that ask you to paste the code before the body or includedin the bottom of your page, you would paste those codes in the relevant boxes here. Any code thatyou add in global site settings which is here, it will cover all pages in your website soadding google analytics in site settings will track all pages in your entire GroovePagesproject. Scrolling down you have open graph, which is a social share settings.Open graph allowsyou to control how your links are displayed on social media like Facebook. If you were to shareyour website link you want to control the image attached to the website right? You do this viathe OG image, you would click on choose image the dimensions for OG images is 1200 pixels by 627pixels. Upload an image and choose this one. click on open, click on the up arrow, select. Set thetitle that you want to be shown when you share your link, my title can be Aimee Vo Academy.Once you’re done completing your site settings, click on this pink check button EVERY time youmake a change okay and then you will see content save once that’s appeared. Uou can click on theback arrow. Next in settings is Export Site, so to download your html code of all the pages inyour entire GroovePages site, you will click on export site, that’s going to open up a new tab andautomatically download a zip file. I’ve unzipped the file and you can see all the html files foreach page on your website. Revisions show you a timestamp of any previous changes you made.Clickon that, you can see all the time stamps here. For example if you made a mistake and preferthe way your website looked previously, just find the timestamp hover over it, this eyeicon will appear and it will load the version of your website and if that’s correct you canclick on use this version, it will revert the website back to that point in time. Next is ShareSite, so Share Sites are basically sharefunnels. Once you finish designing your website, if youlike to share your website or funnel with another Groove user, you will click on share site, clickon “add”, that’s going to generate a share funnel link for you. And send that link via email to theperson you want to share it with. Now that person needs to be logged into their Groove account andonce they paste that link into their browser, it will clone that site into their GroovePages. A tiphere: is to make sure you publish your site first so that your share funnel link works.For instantedit bookmark, this is a bookmark code that is provided by Groove so that you can edit your grouppages on the fly. I’m not going to show you how to do this because when you click on it, it opensanother tab which shows you how to add the code to your bookmark and use it. We’ll head back togGroovePages, let’s move on to Pages. And Pages is this icon here, click on it you’re goingto see all the Pages in your website here. And when it’s highlighted in pink the correspondingpage will appear on your canvas right here. If I click on course page, It’s going to load thatpage then i’ll need to go back here and go to the page that i want to edit.To edit your page name,url, title and keywords, click on the three dots. Edit Settings for page name, that’s just the pagename on GroovePages for your reference. Page url, that’s the url of that particular page, forexample i can change this url from page dash 2 to Aimee dash Vo courses. This means that the finalpage url will be yourdomain.com/aimee-vo-courses. Page title is the title tag for SEO, forexample if you search “Mike Filsaime” in Google, this here is the page meta title and page titleis where you add your meta title.I’m going to add Aimee Vo courses, you will keep this under60 characters. Any more than 60 characters and Google will cut off your title. For meta keywords,it’s like keyword tags for SEO and you would enter in your page keywords separated by commas likethis. Scrolling down, in a meta description: this is your page’s description for SEO. Goingback to our example, this here is the meta description so you want to keep this under 155characters. A tip is to go to a website called lettercount.com, type in your description overhere and click count characters that’s going to show me that it’s 146 characters which is fine.I do recommend that you use all 155 characters, once you’re happy with that copy that go hereand paste it in the meta description area. In the exit page by confirmation, if youtoggle this to the right the visitor will get a confirmation message before leaving thepage. Now i personally don’t need to do that so i’m just gonna un toggle that and leave it as is.Under font, you can also set the default font for this particular page.So on global site settings,we set the font to poppins but you can also set a default font for this page too besides usingpoppins – it’s entirely up to you. In custom css, because this was a template it’s already loadedsome custom css from the template. Going down to code includes tracking ga, because you alreadyadded your Google Analytics over in site settings it covers this page. But let’s pretend thatthis is a thank you or confirmation page, you might want to add any ad conversion trackingcodes in this section and this is the place to do it.You will place those conversion tracking codeson your thank you page or order confirmation page. Scrolling down to open graph social settings, youcan also add specific OG images and og titles for this specific page. Remember to click on the checkicon to save this page as well. If you want to set a specific page as a home page, besides thisparticular home page, you would click on the three dots and the other pages will have the option ofsetting a specific page as a home page. So you can set this as a home page or set this as a home pagebut you’ll notice under home, you can’t set that as a home page because it’s already set to home.To rename a page you will click on the three dance click on rename i can name this page all coursesclick on the check icon to clone and delete pages clicking on these three dots clone that’s going toduplicate everything on that page the clone page appears as the same name but with the word copyis added to it.I will click on the three dots, rename that and let’s just call it orderconfirmation. For example, click on the check icon to delete a page. Click on the page that youwant to delete, three dots and you will go down and click delete. And let’s say that you finisheddesigning and styling this particular page and you want to save it as a template, you would go tothese three dots, click on “save as template”, wait until the content save green alert hasappeared for confirmation that your page is saved as a template.All your templates will besaved under “my templates”, so you will click on this plus button go to my templates and the helpcenter page that we just saved has appeared. Your page templates can also appear when you click onnew site and click on my templates tab, the help center page template appears here as well. Forhiding pages from the menu navigation, if i click on the three dots, you will see the option of hidefrom navigation. For example, I can go to blocks, scroll down headers nav menu, and drag this menuup on the top. I’ll just collapse this and you see how all the pages appear in the menu.Let’s sayyou want to hide the home page from the menu, all you need to do is go to pages, click on the threedots, hide from menu navigation. This does two things, this page will now appear under the hiddenpages section, and over in the canvas if we scroll over the home page no longer appears in the menu.So hiding any pages from the menu can be done by simply dragging that page down to the hiddensection. Or if you don’t want to hide that page, just hover over these six dots, and then drag itback into the order that you want it to be in. Now the home page has reappeared on the menu. Toadd a new page to your website, just go up here and click on this plus icon. You can start fromscratch or use any of the pre-designed templates as your page. Personally i like to clone anexisting page instead of adding a new page. Now one last thing i forgot to show you, when youclick on that plus button, you also have the url importer.This is for when you own a website ora page from a funnel builder like click funnels, kartra. Let’s say you want to clone groove.cm,copy entire page. What you notice is that they ask you to place this code on your website toprove ownership. Now if that is your website go ahead and paste that code but what i noticed isthat it may not import all your content exactly the way it looks like and you may have to fixcertain elements to make it look like the way you intended. My recommendation is just to rebuild onGroovePages for less headaches and you can build better looking pages anyway. I’ll just cancelout of that.When it comes to moving pages to the funnels tab, let’s go back to all courses, threedots again. If you are an upgraded or lifetime customer, you will get more options in thesesettings. So free account users won’t have access to moving a specific page to the funnels tab. Asyou can see here, i can move the all courses page to the master class funnel. In the funnels tabover here, I’ve got a master class funnel. Right now Groove is in the process of separating outthe funnels tab, so if you go to the icon up here you will notice “GrooveFunnels” as a separateapp. Which means in the future, you might not see this funnels tab available. I’m not entirely surewhen that will happen but if you notice that the funnels tab isn’t available you might want to headto this, and go to the GrooveFunnels app to access all your funnels. What they plan to do is tohave all your web pages built within GroovePages, and that Groovefunnels app that you saw here, thatwill be building any funnels like opt-in funnels, sales funnels.If you go to pages, and click onthe three dots, the option of moving a specific page to a specific funnel is available here foryou. For example, let’s say for this help center, I’ll click on the three dots, and I wantto move it to the master class funnel, so we’ll click on that and if I head to funnelswithin the master class funnel, it was previously four pages now there’s five pages. Click on thatthat’s going to expand all the pages and you can see the help center page is now within thisfunnel. You can click on these three dots again, and move it back to the primary menu navigation.Once you click on that, i’ll go back to pages and you can see the help center page is back into themain pages section.Moving over to the “funnels tab” which is found here. Think of the pages tabfor your website pages, where you have an about, services, contact us pages. The funnels tab here,is where you can create funnels that have multiple pages tied to it. For example in this masterclass, you can see four pages tied to this funnel. And let’s say you have an opt-in funnel,that could have two pages to it: an opt-in page and a thank you page. Creating a funnel is exactlythe same as the pages tab. You will click on this plus icon, head to funnels, let’s select thislead magnet template by clicking select and it might be a bit slow so you got to wait until allfunnel pages have loaded. Once it’s all loaded, sometimes the order could be wrong you would hoverover these six dots and drag it back up. Like “page settings”that you can click on these threedots. I’ll click on edit settings to rename it to opt-in and i can change this to opt-in, as wellgive it a page title of “funnel book: and click on the check icon.Now that you’ve finished editingthe pages within this particular funnel, click on this back button, and you can see that the nameis lead magnet funnel. But you can also rename it by clicking “edit” and calling this an “opt-infunnel”, click on this check icon. Now you’ve got two funnels in the funnels tab and each oneof these funnels have their corresponding pages attached to it. Let’s move on to the webinars tab,the webinar tab works exactly like the funnels tab but it’s tied to GrooveWebinar which means anypages that you create inside the webinars tab, that’s going to be available as a selection whenyou’re setting up GrooveWebinar.And i’ll cover it in future trainings when i show you how to setup GrooveWebinar. Just know for now, that this tab is a setting GrooveWebinar specific pages likeyour webinar registration page, the replay page, order thank you and checkout pages. They’re alllinked to GrooveWebinar, and you can see here that you can select the corresponding pages. So thatcovers all the pages relating to your pages tab, funnels tab, and your webinars tab. Now it’stime to move on to blocks and elements. Once you click on blocks, under block types,there’s three different types of blocks. You’ve got designer blocks, direct response,and wireframe blocks. Designer blocks include empty blocks but mostly pre-designed blocks fordifferent sections of your page. So you can see there are pre-designed blocks for content,countdown timers, lead magnets etc For example, you could have a section on your page that hasa call to action.These call-to-action blocks are already pre-designed or you can have anothersection of your page that has a form. There are already pre-designed blocks for different types offorms. Each one of these blocks will have color, styling, and elements already added withinthe block for you. And all you need to do is drag it into the canvas. Let’s scroll backup and click on Direct Response, Director response blocks are also pre-designed blocksbut they incorporate direct response marketing “elements” that help you build out your salesand order page.So you can see here you’ve got a yellow button with secure checkout options overhere. And you’ve got bullet points, guarantee, and an order recap. Last is Wireframe Blocks,wireframe blocks still give you access to the different types of blocks but when youclick on them they’re black and white with placeholder text and no styling or colors. Soif you’re a web designer or funnel designer, you might want to start with wireframe blocks to planthe layout the wireframe of your website design before showing the client the final result. Tomake your life easier, just go to designer blocks because there are so many pre-designed blocks thatjust save you time on styling and formatting.For example, you might want a content block that hastwo columns. This particular block is awesome because it already has two columns in placefor you, all you need to do is hold it and drag it into the row that you want to add it. Justclick on this back arrow to expand your canvas. Now if you notice that the block didn’t fallinto the right place, click on that block, so that there is a red outline around it.Andyou will know that you’re in the block level by going down to the breadcrumb here. Let’s say thatyou’re clicking here, you’re in the text element. You want to go down here and click on blockso it highlights the whole block and you’re in the block level. And i cover breadcrumbsin tip 2 of my 20 GroovePages tips and tricks, be sure to check out that video when you’re donewith this video. Once you’re in the block level, if you scroll to the right over here, you shouldsee an up arrow or a down arrow. So let’s click on up, that will move that particular block up.But if you want to move it down, click on this down arrow. Very quickly i want to explain thehierarchy, and layout of GroovePages, especially how blocks containers columns and elements workin GroovePages because it’s really important to understand this when you’re designing out yourwebsite or your funnels.Everything starts with a block in GroovePages. In this illustrationthe block is in yellow, inside the block you have the container which is in blue, inside thecontainer columns: and you can choose between one two three four or five columns if you want to.Columns in GroovePages are referred to as “layout: and then inside that layout or column, you haveelements. And elements could be text elements, button elements, image elements or video elements,which is in green. This is the layout and order of how it works in GroovePages. I’ve alreadydragged in a block that has an empty container, so you can see here that the block is yellow.The container level is blue, the column is pink, and the heading is an element.So you can seehow it resembles the slide I had previously in terms of a layout. And this block was createdby going to blocks > empty blocks dragging in an empty container and then i went to elements, anddragged in two columns to create this pink column. And within that pink column, I went to text anddragged in the h1 heading over here. So remember, It’s really important to use breadcrumbs whichis why I always click on an element, then i head down here to the breadcrumb. In this example, youcan see the heading is a text element, it’s inside the first column of the two layout. That layout orcolumn is inside the container which is in blue, and that blue container is inside the yellowblock. Once you finish designing your block, if you like the design of that block youcan save that block as a template for reuse. All you need to do is click on that block, thistoolbar will pop up, click on this star icon and you can either save that block into an existingcategory. Going down here and selecting the category or creating your own personal category byclicking on a “new category” and giving it a name. I can call this category “test”, click on createblock.”Content saved” alert has appeared, now we can go back to blocks, scroll down and you can seethere’s a test category inside. That is my block template that i’ve just saved and they’re stillworking on showing the preview image but that should work when you drag that block into yourcanvas. To add more columns to an existing block, going back to this particular block and thetoolbar, you see this grid icon over here? Click on it, these columns will appear on the top righthand corner. You can turn this particular block into three columns, four columns and five columns.I’m just going to revert to my two columns and I did that by clicking on this back button. Toclone and delete blocks, you still click on that block again and you will click on this duplicatebutton.And lastly this bin button, you’re just deleting this block, by clicking that and pressconfirm. To change a block background color, image or video, you would make sure that you’re inthe block level. Like down here in the breadcrumb, the styling toolbar will expand and you want toclick on background, once you click on that you can change the color to any of these pre-existingcolors or you can click here enter in the hex code, click on the check icon. Because this blockhas an image over it, this background color won’t appear so if you want that background color toappear, you would delete this particular image here. And uploading the image to a background,click on “choose image”, upload your own personal image and then click select.So i’ll cancel outof that. For block backgrounds, you always want to have that image on repeat, the size will be”cover” and you can choose the alignment of where you want that image. If you want a video in theblock background, you will click here in video, toggle this switch over and it will say pleaseset background image too so it will be displayed at first while loading the video if someone hasa slow connection speed. What i’m going to do is go back to the color background and just clearthe blue background color so that the video comes through. Under “select video type”, you havethe option of selecting vimeo, wistia, youtube, your groove video library. Just for this example,I’m choosing youtube, you would need to grab url of the video, paste it in here but they onlywant the video id, so you will need to go here, delete all that and your video id is after theequal sign in the url.Leave it checked, that loop video, mute video is fine, click update. Nowmy video is a shorts video and i had to film it in vertical but you would choose more of a horizontallandscape video and add it in the background. Okay let’s talk about elements, and elements are thingslike text, lists, buttons, media – whatever is available here is an element that you can dragover into your GroovePages. I’m not going to cover every element because we’re going to be here forages, what i want to cover is the main elements that you would use frequently. How to edit themand style those particular elements. Let’s start with text elements. In text elements, h1 standsfor heading, h2 is a subheading. You would want to incorporate h1, h2, h3 for SEO. What we’ll dois go to blocks first, empty block and drag in an empty container. I want to make sure I’m in theblock level, let’s change the background color to a light blue, close out of this, and thenscroll down “spacing”, adding a padding to all sides.You can enter in the padding numberdirectly like this or you can slide it across. Now we want to go to elements, drag in a h1heading inside the container. Click on the heading, head to the styling toolbar. You wantto be in “text” because this is a text element and the default font here was Poppins because weset it in global site settings but you can always change it to a different font, like Merriweather.Once you start increasing the size, we’re at 39 in terms of size. You can also manually enter in thenumber here for a 50 size font. Weight is whether you want it to be a light font, regular, bold. Tochange the color of the heading, go to “color”, click on it and you can make it a dark navyinstead or head over here click on that and enter you know your own hex code for the color. Onceyou’ve done that click on the check icon and close out of it. For letter spacing, if you want to makethe heading or any font a bit more wider, you can click on that.I’ll click on wired to demonstrate,you can see that the heading has expanded a bit. Let’s duplicate these, so that you can see. Andfor “line height”, click on that make it loose, now you can see some spacing in between the topand bottom. Stroke simply adds an outline around your text, if you click on that and add one pixelstroke then you can go to stroke color add a white outline and that creates this effect. You canalso add shadow, I don’t normally add shadows to headlines. What i really want to show you is howto change the text color for a particular word. Let’s say that you want to change this GroovePagesword into a red font, you would highlight this particular word only, this will pop up. Clickon this icon and that can be changed to red. The last thing is to center that particularword, by going down here and align it to the center. Okay uploading images, updating size andcentering an image. To upload an image, you would drag in an image element first.So scrollingdown, images are under “media”. Drag in the square image for now and you want to pop it in thecontainer. Once you click on this, you can tell that the image is inside the container by goingto the breadcrumb. Image is inside the container, click on the image, head over here to configure,select “choose image”. I’m just going to select this image for example, because i want to showyou how to change the size. This image size is quite big and a way to reduce the image size is tojust go into it and update it to a smaller size, then click on “update dimensions”, the contentsave green alert will appear. Once that’s been resized, click select. In the “image alt”,give this image a name. For that image, it can link to a page on GroovePages or your pages thatyou design on these GroovePages will be available here.You also have the option of linking thisimage to a block, a URL, a pop-up your blog, and GrooveKart. All these options are availablefor images and buttons elements for you to configure. Normally for images, you would justleave it at none and click on update. To center align an image as well as the text, you want to bein the “container level” and you know that you’re in the container level by going to the breadcrumb.Making sure that you’re in the container level, you can then go over to the styling bar, clickon layout and you want to select vertical, primary click on this, and this, and that’sgoing to center align your image as well as your heading. Next we want to add a button, goto elements, it will be under button. Drag it in, what we want to do for the button is to give itsome spacing that’s the margin and set it to 40 spacing. Now you want to go to text, increase thefont size and perhaps we also change the button font to Poppins as well by going here clicking onpoppins.Make it semi-bold, we’ll space it out a bit to make it wide. And for the background color,we’ll go to background, click on it make it a green button. Maybe we’ll go back to text and addan outline of black around it. Go to stroke color, add black, you can see the effect here. That’show you edit the button. And lastly to change, the call to action of the button, you willgo to configure under “button main label”, you can change that to “free downloa,d”add an icon to the button by going here and because it’s set to question mark, I normallydo is type in “fa” and all these icons will pop up. So let’s just scroll down, and select thisone, select the size of the icon, i usually leave everything as is.You can see here, like the imageelement, it can link to a URL, a block, a blog and your GrooveKart as well. You can also increasethe padding within the button by going here to spacing and selecting the padding and increaseit to 10. Let’s move on to adding a GrooveVideo element, you’ll go here, it will be under “media”.Drag in a “video player” element, click on this, under configure, select the video in thedrop down arrow. You can choose from Youtube, GrooveVideo. In this example, I want to show youGrooveVideo, and in GrooveVideo, you can create a category for your video. This video here isin the default category, i’ve selected my video from the drop down arrow and click on update.So all these settings including the thumbnail is controlled over in GrooveVideo. Anotherelement that you’ll most likely be using is GrooveMail. Head to elements, it will be under”Groove Apps” and you can see also that the groove webinar registration is added as an elementin GroovePages.We’ll just use GrooveMail, click on it go to configure, and select theGrooveMail form that you’ve set up in GrooveMail. The thank you page could be a thankyou page that you set on GroovePages or another URL. In this example, you want to usea thank you page that you’ve already created on GroovePages, so you would select”page” and we’ve got a thank you page, click update. You can change the backgroundcolor of the button by going to background, clicking here and changing it to a green. Let’ssay that you want the placeholder text of email to be “email address” and you want the font colorto be a lighter gray.All you need to do is click within that input, head down to breadcrumb. You’llnotice that you’re in “input” which is correct. Then you can go to text, go to color makethis a lighter gray, and see that changing? and go to configure, input placeholder, we’regoing to add address, “add validation rules” in that they need to enter in an email and “inputcannot be empty”, click update. and I’ve noticed that the padding has decreased so you go back todesign, go to spacing, add some padding over here and the padding has increased as well.Repeat the same steps for first name. What’s important is that in “first name”, onceyou’ve done all your design and styling here, you would go to configure “add validation rules”,because you are asking people to enter in their first name, it will be “text input cannot beempty”, click update.I’ve just showed you how to do this quickly but once you get used to stylingusing the design tab everything will make sense. Now i want to talk about adjusting the gutterwidth of columns. Go to blocks, empty blocks, and drag in three columns. Click on the blocklevel, we are in the block level by going to the breadcrumb. Now we want to go to spacing, justadd some padding in between it for demonstration. Let’s set it to 20 and add a background colorof yellow.To adjust the width in between these columns, making sure that you’re in layout-3-3-3because the layout is a column, you can head to configure, if you click on the drop down arrow andclick on “extra large”, update. The width between the columns have now increased, and this is usefulwhen you’re dragging in text elements and you notice that the text in column 1 and column 2 aretoo close together. You can fix that by changing the gutter width. One last element i want to showyou is changing the container size and width. What i’ve done is dragged in a “heading” element, a”paragraph” element and also an “image” element. What you notice about this container is that thetext expands across the whole screen and sometimes you want to make the container more narrow.A lotof people would click on the container level, then they go to spacing and add the padding like thatto make it narrow. That looks fine on desktop, however when you switch to the mobile screen uptop here, you can see that since you added a very big padding that’s reflected on the mobile screentoo. A way to fix this, is NOT add a padding. Head back to your desktop screen, making sureyou’re in the container level, you’d go to size and instead of decreasing the size of thecontainer, you would go to “max width” and set it at 60 for example – that would narrow thecontainer. Or you can set it at 50. On desktop, you’ve now got a narrow container and on mobileit also looks great as well. Okay guys, that’s the core basics of using elements okay? and there’sso many elements that you can use and play around with.One last thing that i did forget to mentionis that if you want to move elements up or down, just hover over that particular element, holdingit and then just drag it down. Let’s talk about pop-ups, pop-ups are ideal when someone clickson a button and a popup like a light box appears. Click on pop-up, click on this plus icon, giveyour pop-up a name. I’m just going to call it “get started button 2”. For “type” you want that to beset on “standard”. So you can see here that it’s triggered when a user clicks on an element.In this case, when they click on a button, but you’ve also got the option of having thepop-up appear when someone lands on the page or when someone exits your page.We’ll just stickto standard pop-up for a website because i want the pop-up to appear on the home page for theget started button. I’ll click on the drop-down, select “Home”. once you’ve entered all that, overon the right side is a bunch of templates that you can use for your pop-ups. We’ll select the secondone, that template will load into this box here and now it’s your time to change the headingand add a paragraph.And i would swap this email and this button out, with your email marketingresponder integration by going to elements and let’s say that you’re with ActiveCampaign.Activecampaign, mailchimp getresponse, any other email marketing autoresponders are downunder “email integration”. I’ll drag it in here, then you can go here and click on this “delete”to delete the old input field. And you can go ahead and change it to a different font, differentbackground colors, for the input field. I actually made a video for ActiveCampaign that shows you howto style your forms as well and i’ll leave a link to that video in the description. I don’t wantto waste more of your time in showing you how to format your form but overall if you’re choosingto have a form in your pop-up, what’s really important is that you click on “activecampaign”over here so that the whole form is highlighted. Click on “configure” and that will allow you toselect your ActiveCampaign integration, which list you want it to be on and what happenson the redirect once someone clicks on that submit button.And you can have them redirectedto a thank you page on your GroovePages website or a different URL on your website or even anaffiliate link, and then you click on update. Once you’ve finished styling your pop-up andyour form, you would go up here and click on “sav” and exit. That’s really important now, we’regoing to go back to the button, that we want the pop-up to appear, we’ll click on this againhead to the “configure button” under “link to”, it will be pop-up. But the pop-up we want toselect is the second pop-up. For some reason it didn’t save the name of the second pop-up,so i want to head back here into pop-up, just click on these three dots, rename it.If you like to integrate your email marketing service or zapier or any other integration:Head to your avatar or your image up here, click on the “my integrations” I’ve already addedin ActiveCampaign, but you’ll click on “add”, select the integration type. For CampaignMonitor,you need the api and the client id. For something like ActiveCampaign, it’s the API key and API url.Whatever option that’s listed here, you can add it as an integration.Once you’ve added it in as anintegration, GroovePages will know and would load that integration for you. Most importantly, you goto elements and drag in the relevant integration that you’ve connected. In terms of responsivedesign and mobile optimization: what i normally do is design everything on desktop. Once I’vedone so, I would go here to the mobile device, click on it, and i want to visually see how itlooks like on the mobile. If something looks off, I will toggle this and just be on themobile device. Whatever styling you do with just the mobile device activated, it willonly apply that styling to the mobile device. If you click on the tablet, any formatting andstyling that you do over here for the tablet will only apply to the tablet device.So justgo through individually to see how each device looks like. When you start your design though,all devices will be activated and any design that you’ve created on the desktop will be appliedto ALL devices. I do ALL the formatting and the responsive design towards the end when everythingis completed. Then I’ll head to my mobile device, switch this on, to make independent changes tothe mobile device. In terms of “connecting and publishing your site to a custom domain”, I’vealready got a video on that, just go to my Youtube channel and look for the video “connect yourcustom domain to Groove June 2021 update”.And if you have a wordpress website on your root domain,and you want to use GroovePages on a subdomain, the video to watch for that is “Connect asubdomain to Groove via cloudflare”. You now know the core basics of GroovePages and the videos towatch next is my “20 GroovePages tips and tricks” as well as “How to create an opt-in funnelwith GroovePages”. Just search on my channel using these titles here, and you should findit. Bear in mind these videos are a bit older so they don’t take into consideration of theupdated interface as shown in this video but the principles still apply. Okay guys, if you foundthis video helpful I’d really appreciate it if you hit that like button, subscribe, hit thatbell notification and until next time see ya!.