See BuilderAll sales page
ClickFunnels - 2 Comma Club
Karta: Best All-in-One Solution

hello hello everybody Welcome in welcome welcome um please tell us where you're calling in from We're super excited that you guys are here uh we have a part two um of Brian uh this is Brian katung and he is a coding ninja um so our part one was over um uh custom code in pages and now he's going to be doing membership so we're super excited um to have Brian here and I wanted to give a quick little intro of who he is kind of what he's about um so Brian katung was born in raised in California San Francisco Bay Area now living in suburban Chicago has been pursuing his passion of helping people leverage computers and other information technology since 1974 so he he is an OG um of the computer coding um he was re-energized by the growth of the internet around the turn of the century and he became interested in topics like internet marketing and cloud computing and then how to help others leverage those Technologies in an increasingly digital world he began exploring cartra in 2019 quickly became enamored with its feature set especially its sensibility via custom code and browser extensions um and Brian is actually a cartra certified technical expert um a frequent contributor of the cartra community he is the author of kcsg tools for cartra which is a Google Chrome browser plugin that helps cartra content authors work more efficiently um he's also the author of kcsg cartra pages which is a cartra tuned word plusus plugin for embedding cartra Pages um and several other cartra related tools his website is available through his Facebook profile um and we're super excited to have him um and answer any questions we'll have at the end so without okay I'm about to share my screen all right can everyone uh hear me and see my screen can I get a uh a thumbs up okay thank you Matt great okay so uh last time I I ran a little long um I don't think I'm going to run as long this time because I covered most of the common stuff uh for pages in part one but just in case I'll cover a little bit of administrative stuff at this the start here uh just in case we run long and if I don't get to all the questions um you'll know how to reach me um first of all note that all of the examples in this presentation are free uh freely accessible uh there are many other customizations possible in addition to this so feel free to reach out to me uh either through the cartra official group uh or through any of the contact methods I have a connect with Brian section here at the end uh there's also a uh feedback form I'd love to get your feedback about the presentation any questions you have uh suggestions for other topics you you'd like me to cover so if you have a chance at the end of the presentation I'd really appreciate you going to the form there and providing me some feedback um the information about part one I've got the link to the the Replay for part one here I'll also include the link for the replay play for part two uh after that's posted you'll be able to find that here you can follow along with me um it's at kcsg.com portal NN custom code so you can follow along during the presentation all of the uh ex all of the slides are unlocked now and should be available I also have an index uh I indexed part one previously before part two was ready so originally there was just one index now I've got the indexes for part one and part two so if you're looking for a topic and you know which section it was covered in if it was part one you can search the part one index and that'll have just the part one topics likewise part two index has the part two topics and the main index is everything Allin one so you can go in there and search for a keyword so if you're looking for the the third party uh protected conditional redirect you could come in here and look that up and so forth all right so without too much further Ado let's jump into uh the membership customizations now uh since presentation part one on pages uh note that the custom code capability for the custom code blocks for both pages and memberships um is now not available in the starter level since the levels have been readjusted you will need a a growth level account or higher to use the custom code blocks you can still use the the tracking features for the page builder but for the custom code blocks for both pages and in the membership area you will need the growth level or higher so the the custom code blocks are the last content option in the post content section so here you have all your content types and the custom code block you'll just drag that into your post from here and then it will give you a code editor that looks like this now just like in the page builder uh unlike the the the tracking section code blocks the code blocks that you add to a membership post are live as soon as you add them to the page so the tracking sections in the page builder are basically held behind and not added to the page until the page is published live so that code you don't have to worry about running the code that you add using the custom code blocks for both the Page Builder and the membership Builder you want to make sure that uh with very few exceptions you don't want that code to be running in the Builder because if you're doing for example an embed code it will change the structure of the page so if you're embedding for example uh an external widget that will that code the changes that the widget make to your code will get saved with the the membership post and generally you don't want the to happen you want that to happen only on the final published page so how do you avoid doing that here is a a sample script and I have updated this to work slightly differently um than before the the general concept is the same but the implementation has changed slightly and I've I've updated the corresponding uh section in the in the pages part of the presentation for part one but here's a a copy and paste JavaScript snippet that you can include in your code block and it's basically a framework it sets a a variable a JavaScript variable called preview live that says uh that is set to true if the the page or in this case the membership post is being viewed either in the preview or live view and it will be false when the code is being examined in the membership Builder and then this code here between this if and this closing brace at the end you can put code that should run in preview and live but should not be run while you're in the Builder so this is how you can put code in and make sure that it only executes when it's being shown either in preview for your testing in review or in live and being viewed by your membership members so using custom code blocks in multiple posts most of these changes most of these customizations are things that you'll need to apply to all of the all of the membership posts in your membership area so they generally get applied across the entire membership so without using thirdparty products there are basically two options to get these customizations into all of your posts you can either copy and paste the custom code block into each membership so in each membership you would just drag over the the custom code block component from the component list on the left hand side drag it in using uh something like notepad you could keep the code that you wanted to copy and paste in your Notepad or text edit and then you would copy that fresh into the custom code component and then save the content that uh can be very tedious for a lot of posts so if you know what custom code you're going to need for your membership as you're building it a faster and more convenient way to do it is to create a template post for your membership area and put a a framework into the template post post including your code customizations and then you can clone your template post and each copy of the cloned post would then have your custom code already present so the other option for doing custom code in memberships is to use the Chrome browser built-in developer tools note that this is beyond going beyond the copy and paste level of of changes so generally you shouldn't do this unless you're comfortable with coding or you have Specific Instructions to follow so unlike the page builder there is no section editor for the the membership Builder so your only options are either the custom content or to use the built-in developer tools and the instructions for opening the developer tools I have in the corresponding page builder section there's a link to that I'm not going to go into depth here you can review that uh either in the slides or go back to the first uh presentation recording so now um before we get too far into to the actual examples some popular examples are there any uh short questions before we dive in into the examples all right it looks like uh there might be a little bit of a delay to see if any questions show up so I'll start into the examples and if any questions come up we can take a break either in the middle or at the end as appropriate so the first example is doing linked dual resolution membership logos so if you look at the prev page I had you can see that I have a logo up here it looks like the standard logo but it's it this is an example of an enhancement so first of all you may have noticed as I move the cursor over the logo it's an active link so if I click on that link I can have it go to another page so it doesn't have to be just a passive logo you can have it linked somewhere so this could either be your main page page or you could link it to a membership portal if your membership is part of a portal uh an obvious option would be to have this go back to the portal you can also just create a post and do a redirect for that that's uh actually a commonly asked question in the group U I didn't think to include that U maybe I'll come back and add a post on that after the presentation is over how you can create a post that is a redirect to your portal if you want that as an option you can also use the the notification bar for the membership area as you redirect or you can add a sidebar Banner couple of different options for getting to a portal so what this does is you can see here I've I've changed it to show that this the the larger of these two resolution membership logos is up to 32 pixels wide by 60 a fixed 60 pixel height image it needs to be 60 pixels High it can be anywhere from 1 to 312 pixels high and instead of letting the browser resize this this image which is what happens with the standard membership Lo logo when the browser window resizes the browser will rescale this image and it's not a very large image to begin with so as the browser resizes it it tends to get really blurry and onsharp so what this particular customization does is it lets you specify two different images one at 312 pixels by 60 high and another at 208 by 40 pixels high and as you can see when I resize this as the window gets too small to show the full-size one it will switch to the smaller one so now it's popped in to show the 208 pixels by 40 pixels so if we go back to the previous post and look at an actual logo so you can see it's it's sharp there if I can grab the edge of my window and as I go down to a smaller now it's jumped to a smaller size image but it's not scaling the image it's using one that was creative natively at the size that needs to be used so this gives you two features it gives you sharper logos that don't get resized it uses the large one when it will fit and the small one when the large one won't fit and it gives you the option you don't have to make it linked to something but you can if you want to so that is that was the Dual resolution linked membership logos here is the the paste bin that shows the code that you'll need so when you're working with these paste bins you can um come in here and it will show you the code an easy way to copy the code you can select it all from here or you can just just come down here where it says raw paste data here's the same code without any of the formatting but you can just click on this and it will copy that code to the clipboard and then when you come into your membership Builder and you're dragging the custom component in you can paste the code straight into the code editor so the next example is changing the the navigation icons from log from um icons to text so as you can see up here instead of having the typical search and profile sit map help and log out I've set it up so that it it provides actual text labels so that it's more congruent with the styling of the rest of the navigation I I just have it as an option uh I think it provides a slightly cleaner look if you agree then it it gives you a styling option for a styling alternative for your memberships and again here's the past bin and you would typically post this in every membership so the Dual resolution logo you would typically also Post in every Post in the membership another popular one that I've seen asked for a lot is how can I add some sort of custom background to the post in my membership so here is a custom code that lets you do that so you'll need the URL for a background image which you can store in the in the in the files area in the media file storage area well not the file storage the image storage in the media storage area is one place you could put it it doesn't have to be there but you can use it for that and to to get the the scrolling right and to have the the image fit the background properly when the window is resized so for example as I do this it it needs to scroll the image one way if the window is is short and wide and it needs to scale it a different way when the window is tall and skinny so as I as I switch the P the perspective of the window you're also seeing the the responsive Reflow of the the membership content itself but in order to have the background image properly fill the window you need to tell it the aspect ratio of the image so that it knows when to focus on vertical mode or portrait mode versus horizontal or landscape mode so you'll need those two things and you'll you'll see in the code there's a place to plug that in so here is the the URL for the background image and then you'll need the aspect ratio uh as a as a percent would get plugged in not you don't change the VW part you just change this number and the decimal and then the next one is um making enhanced image borders and Shadows so the the modern restyle at least in the modern restyle for the cartra membership layouts it it adds a very subtle and I mean very subtle if you have a really good monitor um you might be able to see it but there's a very slight Shadow around the edge of the picture and a a little bit of of rounding in a in a very slight border um but at least to my aging eyes it's fairely perceptible and doesn't really make your image pop off the page so this customization lets you add uh a bit more of a a border it's still pretty subtle you can see a slight gray around here and by changing the the CSS customization in the past pin you can change the Border color and the the shadow style but as you can see this helps lift the image up off the page a little bit for a little extra pop in your content the next one is how to do Post specific sidebars so a lot of times people will want to have for example they'll they'll want to have U multiple different levels in their membership so they might have bronze silver or gold or a beginner in Pro or a free and a paid version so if you want to make an offer if you want to have a sidebar Banner that is link to an offer or maybe you offer support to paid customers and not to your your free trials you can have have a a sidebar that that only shows in certain posts so for example if I go to the previous you'll see that that sidebar isn't there so this is a post specific sidebar so you can make these sidebar banners show up only in specific posts and if you want a sidebar to only show up for a specific level then you can create create a post that is only available to the level where you want the sidebar to be present so if necessary you could create two copies of the post if the only difference between excuse me if the only difference you want is for the sidebar to be present or absent based on the level and the content should be the same then just clone the post so you have the same content make the one that has the custom code for the sidebar be available to for example your Free level and the custom the copy of the post with the custom code to show it would be shown in the paid level and the way this works is there is a a paste bin for that as well and that is basically the sidebar manager and the sidebar manager looks for a Content box so you would go to the content box it's one of the content Types on the left hand side you would drag in a Content box and you give it a specific type of title you say pound sign pound sign banner and then at and then you can give a a number which is counting down uh sidebar items either a positive number which is counting down for the top so um my presenter box would be zero and then so one means it's going to be between what was previously or what was item zero and what was previously item one so this custom sidebar becomes the new item one so 0 one two you can also if you want them to be relative to the bottom you can start counting from negative one so this would be negative one this is now -2 this was -2 before this was added it's now neg -3 so depending on how you want it to be positioned whether you want to start from the top or start from the bottom you can say where you want it to appear if you are using the two sidebar format of the the two sidebar layout for your membership you can specify which side you can say l Banner and our Banner instead of just banner and it will apply that to either the left side or the right side the plain Banner will just use whichever side you have configured you don't have to tell it if you're just using one which side to use it it will use whichever one your membership is currently configured for so you just create a a highlight box with that special title and then you can put in an image using the embed image in the text box editor you you don't you wouldn't drag an image component from the membership Builder use the membership content item for the text Builder so you can add your image into the content box and then if you want it to be a linked image which most of the time you'll want if you just want to show them something you don't have to link it but typically you want them to be able to click on it and have it go somewhere where again this just goes to you know whatever page you want to link it to and then you would use this to set up the link and then when you save that highlight box it will look like the Highlight box in the membership Builder but when the page is active the membership manager the code or sorry the sidebar manager that's in this paste bin will pull this alert box this highlight box out of the main content and put it over here so this is what it this is a screenshot of this post from the membership Builder so as you can see the Highlight box doesn't show up in the post because it's been the content has been taken over here hopefully that makes sense and I can come back and we can discuss uh how any of these work um when I get through I've got two more to go through and then we can jump into Q&A so this one is um a tip to uh take advantage of the powered by cartra so as you you may have noticed and it's fairly subtle now I think they they may have changed the the color at some point and maybe the font weight but down at the bottom it there's the The cartra Branding that says powered by cartra and it's against the service the terms of service to remove that where that appears but there's nothing that says that you can't take advantage of that being there and turn that into your affiliate link for cartra so uh it's a little hard to see here but when I hover over the cartra with with a bit of custom code here the cart is now an affiliate link if you come over here and you you see the browser showing the link on Hover you can see that it's got my cartra affiliate link pops over to cartra and because when you have an affiliate link you should uh for uh legal purposes you should include your affiliate disclaimer so it adds an affiliate disclaimer link goes to the affiliate compensation disclosure so now you can turn your your lemons into lemonade and use this turn this into an your personal affiliate link to promote cartra and again this is something you'd probably want to have in every post most of these you'd want to have in every post um a sidebar Banner you probably want to put it in specific posts uh because otherwise you could just use a membership WI sidebar banner and here's here's one that's a a popular request how can I put a a copyright either in my my page builder Pages or membership posts this will work equally well for both here's a the paste bin for code that will look for a um the word words this year in braces between braces so open brace this year closed brace in a a paragraph basically a standard text Block in your membership post or on on your page builder page and it will replace the words this year with the current year so for example you can say um the I I've I told it not to replace it in this paragraph So that you can see what the input looks like but in this paragraph I didn't disable it so it's replaced this year with 2023 because we're in 2023 if you come back in January this very same post will say this year 2024 and it's it's smart so you can say copyright and then you then you give your open brace and then the year of that you first publish the content because technically in a copyright you're you're in in some cases at least your content isn't all going to be from the same year if you're putting in a brand new website then yes it'll probably all be the same year if you created a website this year and it didn't exist previously then sure everything's going to say copyright 2023 but if you create content this year and you add new brand new content next year on a page or a post that didn't exist yet you're not supposed to say copyright 2023 because that content didn't exist in 2023 and you don't want to just switch all of your content to say copyright 2024 because then someone with comparable content if there's a challenge about who published first and someone's content is similar to yours and you changed all your 2023 content to say copyright 2024 you could essentially um be setting yourself up for a claim that um maybe you changed your page and this is new content in 2024 and that you released your copyright interest to your content from 2023 so ideally you want to have the copyright run from the true and actual first year through at least the year that it was last modified and typically on most websites people will will state that the current year is the most recent year for content on the website so ideally you want it to to your copyright to run from the actual starting year through the current year and that's what this syntax lets you do so you can have you can have a number which is your your year of first publication and then any kind of separator it can be a dash or a hyphen or a long Dash or the the word you know two uh so you could say 2020 space t space this year 2020 to this year uh it doesn't matter the the code simply looks for a number followed by something followed by the words this year and the case it doesn't matter whether this is uppercase or lowercase or capitalized or uh what whatever you can you can have capital T capital I capital y capital A it really doesn't care it just looks for the letters that make up this year and so what it does is if there's a number and something before the this year it looks at the number part and if it is if if the number matches the current year it just ignores that part and puts in this year so in in 2020 this would have shown copyright 2020 because this year would have been 2020 and it it won't say 2020 to 2020 it's smarter than that it will just say copyright 2020 but now that it's 2023 it says well it's not 2020 anymore so I need to include the 2020 and whatever separator came between the number and the this year part so if it's just this year it just shows this year if there's a range and the year has changed from the initial year it says copy you know it says whatever comes before and then it plugs in the range with whatever separator because I put in a a long hyphen it puts in a long hyphen if I said 2022 this year it would say copyright 20202 2023 and then you'd fill in your name and every year this would well whatever day your visitor arrives it will show the correct information for the date um actually in whatever time zone they're in so if you if you are operating out of the United States and a visitor comes to your website uh on in from Australia on new years's if it it could still be 2023 in the United States and it could be 2024 in Australia and your Australian visitor would see copyright 2020 to 2024 because their time zone it would be 2024 and someone in California would see 2020 2023 because their New Year hasn't flipped yet so those are some examples of popular customizations as I mentioned um these are just things you can do with free code there's lots of other stuff you can do out there um plenty more this is just the tip of the iceberg um if you're interested in customizations feel free to reach out to me either through the cartter official group reach out through the resources that a connect with Brian section I have half a dozen ways to reach out to me there um once again I'd love it if you'd fill out the form and provide feedback on the presentation and if there's anything else you'd like me to cover in future presentations that uh concludes the formal part of my presentation and I'd be happy to address your questions and we're I'm I'm having some audio difficulties uh hearing the the presentation through webinar Jam so please be patient while Grant and team relay your your questions uh through webinar Jam chat and Facebook Messenger yeah thank you so much Brian if you guys have questions do let us so I see a question to uh post the link did we get the um the link to yes we did okay thank you Kira for posting the link looks like Deborah might have a question glad you were able to get the dual resolution membership logos going on your site Matt that's great hi Deborah glad you could attend so Deborah says sorry um it says um is it worth it to clean up CSS even when you build it in Incognito garbage slips in so I'm not sure which which CSS you mean is getting messed up um if you mean CSS that you're putting in a either a custom code Block in memberships or uh for custom Styles if you see there really shouldn't be extra stuff being added to your custom code um it might actually accidentally get saved with a page so if you're using a plugin that uh makes like style suggestions and things that can get added to to your page I strongly recommend you you turn those plugins off when you're going to be doing any editing in the back end either with the page builder or the membership Builder and uh I probably the most convenient way to do that is to have a separate profile to use for when you're going to be editing cartra Assets in the background so you can come over here and Google will let you create different profiles you can click on ADD sorry my my phone thinks I'm trying to talk to it you can add different profiles so you can have one that's just for authoring or for different projects U if you're an agency and you are working on multiple clients it's a great idea to have um an extra profile or two setup so if you're in the middle of working on content for one client you can simply it like if a an urgent need comes up and someone needs maintenance on their site or um an image needs to be replaced or something needs to be changed real fast you can open up a new profile and when you when you click on another profile it will open that in a new window so you could leave whatever client project you were working on open as is in the first window you could start open a new profile you could log in cartra in the other profile and make your changes without affecting the session you had going so so there's a there's a prip on customizations you can also use that to create a profile that has the bare minimum plugins that you need so for example you might want to have uh just last pass or one pass for your passwords uh a Color Picker kcsg tools for cartra in there for your for your editing so that you don't have any extracting or conflicting uh plugins running you could also make sure that you don't have Google translate enabled for those profiles because you don't if you're doing multilingual site editing you don't want to go into a page like if you go into the Page Builder and you're editing the English copy of your page you don't want Google to suddenly come in and go oh hey that's in English do you want me to translate that in French and then the autosave comes in and you've just lost your English page content and now your your page for English just got saved as French so those are a whole bunch of uses for setting up separate profiles so that's that's one way to get around having plugins make like word choice comments and stuff in the margins and having that get saved with your page or your post see if we've got anything else in here okay it's looking like we got most of the questions um and just just to cover a little bit of housekeeping there is a um Grant and team have set up a a section um in cartra so if you're not aware of this there is a guides section here and guide number two has a review of all of the presentations has the video recordings of all of the presentations and I I believe the people who are doing um cartra based slide presentations like I'm doing mine in a in a cartra membership um and for those who might not be aware this is just this is a slideshow built into a cartra membership um hopefully uh if cartra knows who you are uh you are hopefully greeted by name when you come into the presentation that that's a little bit of of custom code but anyway the the the recording links are here and for those of us who are doing presentations with uh cartra um or otherwise able to share our slides um I believe the authors have been sharing their links under their presentation announcements all righty guys that is it thank you so much for being here I appre apprciate it um and as I mentioned I'm available in the group I'm in the group all the time so feel free to reach out to me if uh any if you have uh questions or anything I can help you with handing it back to you grant and thank you everyone for attending and thank you grant and team cartra for offering this platform appreciate it perfect thank you Brian I appreciate that um yeah if you guys want to have um any more questions you want the replay let us know you can always send us an email at Community Genesis digit.co and then we'll see you in the community if not thank you guys so much for for [Music] [Music] for for [Music]

As found on YouTube

Get your RESOURCES HERE