Cloudfunnels - New Page Editor

Cloudfunnels - New Page Editor tutorial 

(00:00) hello welcome to this Technic force tutorial in this video are going to discuss the new page editor in cloud funnels here at technic force we're constantly striving to improve our products and make experience better for our users starting in version 3.3 we have a new page editor to check your version go to cloud funnels and in settings the section here in the sidebar and here you'll see your version starting in version 3.
(00:26) 3 we have the new page editor to access the new page editor go to funnels and sites here we'll select a funnel that we're going to edit and under the actions column will edit funnel then we'll select the page we want to edit and if we have a template we can edit the template or we can create a new page from scratch and this opens the new page editor here in the left side pane we have tabs for components and blocks here under the components we have a variety of general components from bootstrap for we're going to cover the basics in this
(01:06) tutorial but if you'd ever like to take a deeper dive visit get bootstrap comm and click on their documentation page you'll get in-depth details on all the various layout content and components and these are all preassembled elements that we can drag and drop into our work area so we have containers grid rows HTML buttons button groups button toolbars headings images Jumbotron alert card list group horizontal rule badge progress bar navbar breadcrumbs pagination form input textarea select input input group checkbox radio button
(01:43) table paragraph link video and HTML button in addition to these there's also a variety of pre-built widgets that we can drag and drop into the work area so we have Google Maps video chart J s Facebook page plug-in PayPal Instagram Twitter custom code countdown and font awesome logo in addition to all these basic tools we also have some pre-built blocks here in the blocks tab that you can drag and drop for example there's a modern sign-in page there's an image slider header an image gallery a video
(02:17) header about in team section and portfolio layouts with one column two three and four columns over here on the right side of the page we have our content style and advanced properties this is where we'll modify the various elements that we add to our work area if you want to expand the amount of work area that you have to work with you can close either the left pane or the right - pane and if you do close either pane notice that there's a new tab added here for properties and this is where the content style and advanced properties
(02:54) are now stored we also have undo and redo buttons which you can also access with short keys ctrl or command Z or ctrl command shift Z there's also a designer mode that allows freehand drag-and-drop so you can drag and move elements around the page as you wish it should be noted that by using the designer mode the page is not completely responsive as it would be otherwise here's a preview button that allows us to preview our work we can expand our work area to full screen we can save our work or download it and here are some
(03:35) responsive mobile view tablet view and desktop view buttons here so let's start off by taking a look at the components well go to the top here and we'll start with a basic container it's generally a good idea to house all of your elements within a container when we add this element we see that there's actually two separate divisions there's one as the main container body and then also this separate division here which contains the container text so let's select this inner division here and here in the
(04:10) pop-up menu we have options to either drag this element around select a parent move the element up move the element down clone it or remove it so let's remove this text element and now we'll just stick with our or box here and by selecting this element we see that the properties pane opens up and we have access to the content style and advanced properties for this element one of the most important controls for a container is its type currently it's set as default which sets the width at a fixed width
(04:47) which is not completely responsive and we want our container to be totally responsive on any device that uses it so what we'll do is we'll change the type to fluid and when we do the container becomes completely responsive and fills the width of our screen also we can see the change takes place here in the class it now becomes container fluid instead of just regular container so let's set this to fluid and allow our container to occupy the full width of the screen next we can set the background appearance so
(05:21) there's a variety of defaults set here for primary/secondary success danger warning info light dark and white if we prefer to upload our own background image we can go to the style tab and scroll down to the bottom here and there's a tab here for a background image so let's open that and here we can choose a file I'll choose a file from our system and then if we choose a file that's too small to fill the container it will automatically loop itself over to fill the space so we can control that
(06:05) here with the repeat function we can set it either for default repeat X which is horizontally repeat Y which is vertically or no repeat at all and just use the image as it was uploaded so let's go ahead and set it for default so that it repeats both x and y directions and it fills our container space now we'd like this container to be a little bit larger to fill the screen more so let's go to padding and we'll open this up and on the bottom we'll some padding here we'll call it 700 pixels and that expands our container to
(06:48) fill the page very similar to padding is margins but rather than expanding the size of the container on the inside expands the margins on the outside so for example if we were to increase the right margin here by 100 pixels it would add a margin on the outside of our container here we're trying to avoid margins here so we'll just remove the margin entirely on the left and right side and now our container is full width of the screen there's also a column here for size and here we can directly adjust
(07:20) the width and height of our container so for example if we wanted to set the bottom padding for zero we could go to size set the height for 700 and that would achieve the same purpose so you'll see as you're working with this editor there's a lot of different ways to achieve the same end result let's go back to components and let's drag a grid row into this container and here we can see that we now have a grid row within the container now there is another way to do this let's undo our last move and
(07:55) let's select our container and now we'll just use this plus button here to add an element and here is all of our bootstrap 4 components and below all of our widgets and if we know that there's something specific that we're looking for out of here and we don't want to scroll down to search we can just type here in the search field grid and we'll see the component that we're looking for but before we select it let's inform cloud funnels where we want the component to appear either after the
(08:25) container that we're working in or inside the container we want this grid row to be inside the container so we'll select inside and then we'll select grid row and now here's the grid row inside if we were to select that grid row for after the container and then select it'll place that component directly after the component that we're working within right now so let's just undo that last move and now within our large container we can see that we have three columns set up within these columns there is a
(09:02) separate division with an h3 header inside beside here is another division with an h3 header inside followed by another division with an h3 header inside this is all structured as blocks within blocks so if we wanted to modify this column we would select the division if we wanted to select the column header then we would select this h3 text box here and then we can adjust the text if we wanted to adjust the width we would select the division component and then here under the component properties we can adjust the properties for the
(09:47) content style or advanced in this case let's go to style and we'll scroll down a bit to the typography section and we will set the text alignment for this for centered and now everything within this division component will be centered we can do the same for these other columns and then again for this one here we also have the option to set background colors so we can select the background color here and choose from the color slider and set our background color and if we choose to change the text color we can
(10:34) adjust that as well as well as our font size font weight and font family there's also a variety of text decorations we can choose from either under line over line strikethrough or double over line under line we can also set the decoration color and style whether that should be solid wavy dotted dashed or double we can also set margins for this to adjust the placement of our components we can add padding to this which adjusts the size of our components we can add borders we'll select a style between solid dotted or dashed we'll adjust the
(11:38) width we can set the color and if we want we can even adjust the border radius to make the border more rounded another feature you can control from the style properties is opacity so here in the style tab we have the opacity slider and this affects the transparency of your element so your image or text or whatever graphics it is you have become transparent and whatever background image you have behind here will be visible through your transparent layer so right now I've adjusted the opacity to about 50% you can reduce this all the
(12:27) way down to zero where it becomes invisible 10% it's slightly visible and you can increase the opacity from there and many of these properties exist for several of the components within this list now in manipulating the grid it's important to understand how the width of the columns works basically the entire grid width equals twelve units of width and by default that's separated into four units for each of the three columns that's what the code here column sm4 stands for is four units and we can see
(13:07) that in the content here with the column flexbox small measurement here four is the measurement of width of this column and these columns are designed to be responsive on any device on a smartphone where the width is too narrow they'll be stacked vertically on a tablet where there's enough width they'll be resized accordingly and on a desktop where there's more room they'll be resized appropriately there if we wanted to adjust the width of these columns we could do so for example we might choose to delete this column and
(13:47) then this middle column here we could go to the Flex box we could set this for 12 for the total width and set this particular column for 8 units wide and now this column here is filling 8 units of width on this side and this column is its original 4 as a note to ourselves we might choose to rename this column sm8 let's take a look at the HTML button here we can add a button to our page and by selecting this we can take a look at the properties and here we have all the similar style properties that we just
(14:31) saw for the text but for content we can assign this button some special functions so here we have the text that appears within the button we can change this to something like submit and then we can set the type of button that we want this to be either a reset button which would return all information on the form back to its original state or we can make it a submit button to actually forward the information there's a field here for name but buttons don't actually require a name let's go back to components and let's try adding an image
(15:08) this time so we can drag and drop an image right over here or we can create a new container to hold that image and then we can add an image here we'll put it inside well erase our previous search and we'll just select image from the menu here and now we'll select our image component here and now we can either add a URL for the location of this image or we can choose to upload a file from our system then we can specify the preferred width of this image if we set a fixed number here it will set the image size in
(15:46) pixels which is not actually responsive a better idea is to set your width as a percentage so if we were to say 100 percent the image will be resized to fill the width of the container and that would be completely responsive on any device that visits your webpage for now we'll just leave this set at 300 pixels going back to the components menu we can take a look at other components here let's have a look at card I'll just drag and drop that over here and that adds the card into the same container below
(16:32) our image component and here we can see the various elements of the card we've got the card label we've got the card title got the card description I've got a button and you've got a division for some footer text and we can edit these any way we want by clicking into the text it opens up a quick format menu here with bold italic underline strikethrough and create a hyperlink to use this simply click the hyperlink button and your highlighted text becomes a hyperlink to configure that select your hyperlink and then over in the
(17:13) property section you can set the target URL if you want the target to appear in a new window you can set the instruction here underscore blank and this will open this page in a new window next let's go back to components and let's take a look at adding a video now here we're gonna see that we have a video component here under the bootstrap elements but then there's also a video component here under the widgets now you can use either one but you'll find that the video under widgets offers you a
(17:45) little bit more control and flexibility over how your video performs on your page so to ensure proper performance of our video we want to ensure it's in a separate container so let's go back here to our container that we're using and we'll select our bottom element here and we'll click the plus symbol here to add a container after this adds a new container and then from within this container we can select the plus symbol again and now we can scroll down to add the video widget and here our video
(18:21) widget has been added so let's select that element and now here under the properties tab we can configure the settings for our video so first we'll let it know whether this is a YouTube or a Vimeo video or an html5 if it's a YouTube or a Vimeo all we have to do is provide the video ID and this is the short code for the video that's embedded within the URL if we're loading in html5 then instead of the video ID we'll have to specify a URL where the video is located so in this case here let's use a YouTube video and
(18:59) we can get the ID right here now in this case it starts with an underscore but it's all of these characters that follow the equals symbol the V stands for video equals and then this is the ID code so we'll just copy this now go back to our page editor and we'll paste that ID code here into the video ID now when we click out of the box the thumbnail automatically uploads with the new video that we just added because we're using the widget we have a few more controls here so we can set the height and width
(19:35) values here so let's go ahead and change the width value of this and we can also adjust the height as well if we leave either of these blank the video will automatically scale to the appropriate size similar to what we saw with the image element we can set the width of to be a percentage rather than a set amount of pixels and that will ensure that our video is responsive no matter what device is watching we also have controls for autoplay to display or hide the controls or to loop the video when it's done now if you're editing a page
(20:25) that you cloned from another website or a template perhaps that has video elements in it you may have some frustration in trying to edit the video element in it because each time you click on the element it plays the video and the properties do not appear in the control panel so do access the video controls what you'll need to do is here on the very edge of the iframe it's so close you can't even see it but if you can click directly on the edge of that blue border there and it's very close it takes a bit of careful
(21:00) clicking to get it there we go it opens the video controls here in the side panel if you hold the control button on your keyboard and scroll up with your mouse you can zoom in on the screen a little bit and that makes the blue border a little bit easier to grab there is a trick to it but it just takes practice once you have the video control panel open then you can adjust all your video controls here what some people like to do to avoid the hassle is click the remove element button go back to components and replace it with the cloth
(21:41) bundles widget which is much easier to work with we just click on that and that gives us access to our video component let's go back to components and let's add something else now we'll go to our little plus icon to add element and this time below our element we will add a form I don't see the form here so let's just do a search there is form this has a form which includes a label which is easily editable and as well there is an input field here and here we can specify the input type so if we choose email
(22:25) then cloud funnels we require that an email format entry needs to be input in order for the user to submit here in the placeholder we can put something like input email here and that will put a placeholder in this field so the user knows where and what to type if you want to specify that this is a required field you might want to put an asterisk here in the placeholder and then here we can check mark the box that says required this is what signals to cloud funnels that it's a required field and the asterisk is just a helpful indicator to
(23:02) the user that this input is required next we'll want to set the input name and we covered this in another tutorial as a brief recap you can go back to your cloud funnels and within your page settings you can open this here and you'll see all the valid input names for the project and the page if you're trying to collect an input that isn't represented here you can just simply add a new input for that page and then when you save your settings it will be added to the project inputs but from the input
(23:36) names we can just select email then we'll do the same thing for password below we have an input for a checkbox so if we select the checkbox we can see the checkbox information here with this if we open the general tab we can also select an input in this case we would use remember user the submit button we select this we'll see the content properties for this buttons don't require a name this button type is a submit type button we also have options for reset as well when used within a form this will submit all the
(24:22) information that's within the form or reset it back to original we can also choose to add other elements to this form like for example we can add some radio buttons we'll just scroll through our list here and find our radio buttons element and we'll drag and drop that in not because that didn't land exactly where I want it this might be a case where I'm gonna use the designer mode so I'm gonna activate designer mode here I'll undo my last addition and now with designer mode engaged
(24:58) I can click the radio button and drag and drop this freeform wherever on the page I want it to land and that's more accurately placed where I prefer to see it and now I'll drag and drop one more over here beside that one perfect now to set the options we can just double-click on the label here and you call this option one and we'll do the same thing here we'll call this option two and we'll just we're still engaged in designer mode here so we'll just select this one and move that over a little bit
(25:46) more no it looks good so I'm done with designer mode I'll disengage that now so I don't forget now for option one and option two we need to select the input for these so let's select the first one and we'll select the actual radio button itself as opposed to the label so here is the radial button and here in the content properties we can see radio button is lit and here we'll select our input and we'll choose optional products and for the second radio button we only want them to be able to choose
(26:22) one or the other not both so what we'll do is we'll choose the identical input name optional products now we can save our work and then we'll preview our page and we'll see that when we select option one or option two that only one can be selected at a time because they are both representing the same value will return back to our editor let's add another element within our container here we'll put this one inside the container and this time let's add custom code here we'll select our custom code span and
(27:06) then over in the properties pane we can see that we have a field here for enter the custom code so we can just input whatever custom code that we have here and it will be automatically added to the page so for example here's a paypal Buy Now button let's select another component here let's try adding a countdown timer don't see it on the list here so let's just go count down and there's our countdown timer here we can select the component we could go to the Styles tab and adjust the typography or
(27:44) font or weight of any of the elements of the day's hours and minutes and in the properties pane we can start the enter starting time and if we select the calendar we can simply select the time and date from a calendar as well as the time and we can just scroll through and find the minutes and seconds that we want to enter and please note this is to be in UTC which is universal time and set a.m.
(28:24) or p.m. and then the ending time we can do the same thing and we see because I've chosen a future date that the field automatically changes to not started yet so let's go ahead and we'll just change this to a previous date here's today's date and automatically the countdown timer updates to show the correct timing now we'll select the timer again and here in the countdown timer field we have a button here for active we can select this and that will automatically activate the timer so we can see it acting in real time if we want to pause
(29:09) that we can just deactivate the timer for the time being to avoid distraction as we work here we can set text to show if the countdown has not started yet I'll just say not yet and now when we change the date to a future date we see here's our custom text here not yet likewise we can set the custom text for when it's expired we'll just say all done and here let's change the text to a previous date and we'll see there we go the countdown timer is now all done now let's add another component let's this
(29:48) time try alerts with the alerts we can select that and there are a variety of alert types that we can choose from either a secondary warning a success warning a danger warning a warning warning info light or dark and then you can customize the text of this any way you wish go ahead and set that for success let's take a look at another component let's see the font awesome logos and don't forget as you're working to occasionally save your work so we'll go ahead and click Save that saves our
(30:45) changes let's take a look at a few more elements so we'll start again by adding a container to our page and we'll remove the container label and we'll adjust this containers properties to be fluid so it is responsive for the full page and will close that side pane so we have a little bit more working room here and now let's try adding to this container inside of it we'll add a table and there is our table element so we'll click on that and here in the properties we can choose what type of table and basically this is
(31:31) the color scheme assigned by bootstrap so we got primary secondary success danger warning similar color schemes as we've seen in bootstraps alerts element so we'll just choose something medium for this for the table options we can select responsive so that the table is automatically responsive regardless of the device that's being used so for example here with responsive turned on we can see what happens when someone uses a mobile device or a tablet or the desktop notice that if they're using a
(32:14) mobile device a scroll bar is automatically added to the bottom this scroll bar is specific only to the table so for example if we were to add to this page here an image the scroll bar will only slide the table left and right and not the image as well so we'll just remove that image here delete go back to desktop view and the other table controls that we have are we can set the size of it for small or regular we can also set a hover animatic so that as the user hovers over the various cells it has a bit of light animation to
(33:06) illustrate where they're hovering we can also set borders for the table which sets an exterior border we can also stripe the alternate row so that it's easier to read particularly along long sections of rows and if we want to add extra rows here we can just select a cell and then duplicate that and then duplicate each cell underneath it as well just to stretch that out to the side then we can go in and change the labels to whatever we want them to be another really useful component that we have here is the font awesome library
(33:48) so we'll just scroll down here to the very bottom we have a library of font awesome icons and the way that works is we can just drag and drop that wherever we need it to be and then we'll select our icon and here in the content properties we can see the icons link so let's go ahead and open this in a new tab and this opens the font awesome gallery and here we have almost 1600 awesome icons that we can use various icons for different interpretations as well as a wide variety of brand logos so font awesome is really handy anytime
(34:31) you're looking to add icons to your page so for example let's deselect brands well search all and we'll just type user and we have all these different user icons here so let's select this one just as an example this is called user graduate and if we double click on that it opens the specifications page for this icon and the information that's important to us is the style and this is a solid style which is referred to as FAS that's font awesome solid and here is the class code it's a font awesome
(35:15) solid font awesome - user - graduate and user - graduate is the icon name here so this formula is what we're after let's highlight this entire formula here and now let's go back to our page editor and we select the font awesome icon and here for icon classes you see the default is using font awesome solid font awesome - user and that's this icon if we replace this class with the new code that we just copied we can convert this to whatever custom icon we want anything from the entire font awesome library now
(35:57) one particularly handy icon that font awesome has is spinners so you might select a spinner here and we see that this is another font awesome solid style and we can just highlight this section and copy that and instead of this little icon here we'll replace that with a spinner and I accidentally copied the wrong code here but it's not a problem we can just either erase this or we know that the name of this icon was FA s space FA - spinner so that's FA s font awesome solid space font awesome - spinner and we can type
(36:48) that in manually and then that will add our spinner to the page and now we can add an animation to this by adding a space here and just adding FA - spin and then when we click outside of the box font awesome automatically adds a spinner animation to this icon another creative trick you might want to take advantage of in the cloud funnels editor is to add a hyperlink to an image so to do that what we'll do is let's go to components now first of all we'll add a container and now within our container
(37:26) we will add a link and don't there's the link here okay now within the link we actually have two elements here the first is a span and if we're very careful with hovering we'll see that there's second division there that allows us to edit the actual link there it is the letter A represents the text so we'll select that box there so now with link selected we'll add an element and here we'll scroll down and we'll add an image there so now here within the a-frame this is our link so we'll select this
(38:10) and here we can choose our target URL and if we want this to open in a new window we can set this for blank and we can select the image that we want we can either use a URL from the internet or we can choose a file and this text here is not necessary so we can just click into that to delete the text and that leaves us with an image with a hyperlink to our target URL and that's just a few of the ways that you can use the new page editor in cloud funnels I hope you found this tutorial useful thanks very much
(38:55) for watching