WEBVTT 1 00:00:00.160 --> 00:00:04.019 Hey there. We'll be taking a look at how to edit the pricing page on your website. 2 00:00:04.080 --> 00:00:10.660 And since we'll be working in the web page builder, we'll also review some of the options you have at your disposal when building or editing web pages. 3 00:00:10.880 --> 00:00:19.135 Before we get started, it's important to note that the content displayed on the pricing page is completely independent from the membership plans you have set up on your website. 4 00:00:19.355 --> 00:00:27.695 So once you set up your membership plans, you'll want to edit this pricing page to make sure all the features and benefits you've included in your plans are communicated accurately. 5 00:00:28.010 --> 00:00:36.670 Here we have the default pricing page with this hero section at the top, followed by a list of 3 membership plans that we're offering and then a brief FAQ section. 6 00:00:37.050 --> 00:00:43.665 We found that this layout works well for the majority of membership websites, at least to start, but you can, of course, edit all of this. 7 00:00:43.665 --> 00:00:48.805 So let's take a look at how we can edit this page along with some of the tools included in the web page builder. 8 00:00:49.025 --> 00:00:56.565 In our website's admin area, we'll go to my content and web page builder, and here we'll click the edit button for the pricing page. 9 00:00:57.010 --> 00:00:58.469 This is the web page builder. 10 00:00:58.530 --> 00:01:08.210 We'll run through some of the basic features here in the web page builder so you have some familiarity when it comes time for you to edit any of your default web pages or if you'd like to create your own. 11 00:01:08.210 --> 00:01:09.885 Let's start up here at the top. 12 00:01:09.885 --> 00:01:14.545 Here in the text field is where we can enter the URL that we want to assign to this page. 13 00:01:14.685 --> 00:01:17.905 In this case, the URL for this page is set up my website.com/join. 14 00:01:19.805 --> 00:01:22.110 If you'd like to edit this, you can do so here. 15 00:01:22.190 --> 00:01:33.330 And in the top of the sidebar on the right, we have some page details along with some page options where you can select whether or not you want to display a sidebar, the position of the sidebar, as well as some other display settings. 16 00:01:33.870 --> 00:01:38.905 And right here under where you can edit the URL, you can edit the title and subtitle of this page. 17 00:01:39.205 --> 00:01:48.105 These two pieces of text display in the hero section of this web page, so you can see here by default we have membership plan options, join our online community, 18 00:01:48.580 --> 00:01:52.119 which is the same text we have here in the title and subtitle fields. 19 00:01:52.340 --> 00:01:57.240 So speaking of the hero section, let's go into the hero section tab here in the web page builder. 20 00:01:57.380 --> 00:02:07.575 The first option here is whether or not you want to display the hero section on this page, and you can also choose to hide this section on mobile devices if you'd like to save some room on those smaller screens. 21 00:02:08.275 --> 00:02:10.695 Next, we have some settings for the hero image. 22 00:02:10.835 --> 00:02:13.575 This is where you can choose your own hero image to upload. 23 00:02:13.635 --> 00:02:17.610 We do recommend a size of 1800 by 600 for this image. 24 00:02:17.610 --> 00:02:27.550 You can, of course, go larger or smaller, but do keep in mind if the image is larger, then that probably means the file size is also larger, which will increase the load time of this page. 25 00:02:27.690 --> 00:02:47.685 You can also choose an overlay color and the overlay color opacity that will be placed on top of the image to help make your title and subtitle text pop a little bit more, and you can also choose to edit the top and the bottom padding of the hero section, which is simply the space between the top of the image and the top of the text and the bottom of the text and the bottom of the image. 26 00:02:48.650 --> 00:02:52.030 We also have the title text settings here in this section. 27 00:02:52.090 --> 00:03:04.665 You can choose how much width you want this text to take up in the hero section, the alignment of the text, whether you want it center, left, or right aligned, and, of course, you can edit the font color, size, and weight of your title and subtitle. 28 00:03:05.045 --> 00:03:08.325 You can also add additional content to the hero section here. 29 00:03:08.325 --> 00:03:12.985 And lastly, for the hero section, you have some options to add a call to action button. 30 00:03:13.125 --> 00:03:15.450 Next, let's go into the page content tab. 31 00:03:15.450 --> 00:03:19.150 This is where you can edit all of the content within the body of the page. 32 00:03:19.209 --> 00:03:25.069 So if we scroll down, you can see we have those 3 membership plans here along with the frequently asked questions section. 33 00:03:25.530 --> 00:03:31.185 This all works very similarly to a word processor, such as Microsoft Word, which you're probably familiar with. 34 00:03:31.265 --> 00:03:34.325 Here in the top toolbar, you can choose the font of your text, 35 00:03:34.625 --> 00:03:36.805 whether you want the text to be bold, italicized, 36 00:03:37.265 --> 00:03:39.345 underlined, or have a strike through through it. 37 00:03:39.345 --> 00:03:42.245 You can choose the font size as well as the text color, 38 00:03:42.625 --> 00:03:47.120 a background color for the text. You can also insert links, choose icons, 39 00:03:47.900 --> 00:03:50.319 insert images, as well as embed videos. 40 00:03:50.700 --> 00:03:52.400 There's also a code view option. 41 00:03:52.459 --> 00:04:05.165 If you're at all familiar with HTML or CSS, you might want to occasionally come in here to fine tune some of the layout, but if you're unfamiliar with any of that, you can do all of your editing here in the standard display view where you don't need to mess with any code. 42 00:04:05.224 --> 00:04:11.165 And on the right end of the toolbar, we have some formatting options for the text, such as line height, text alignment, 43 00:04:11.465 --> 00:04:14.285 some list options, and you can insert tables. 44 00:04:14.950 --> 00:04:17.190 So let's talk about the membership plans here. 45 00:04:17.190 --> 00:04:23.990 Each membership plan here has a button that, when clicked, will take users to the sign up page for that particular membership plan. 46 00:04:23.990 --> 00:04:28.410 So it's important to make sure that these buttons link out to the correct sign up pages. 47 00:04:28.845 --> 00:04:32.445 So we can click one of these buttons, and we'll be presented with this toolbar here. 48 00:04:32.445 --> 00:04:39.585 We can click the edit icon, and here, we can edit the URL that the button links to as well as the text that's displayed on the button. 49 00:04:39.645 --> 00:04:43.665 Let's make sure that this plan 1 is linking to the correct sign up page. 50 00:04:43.879 --> 00:04:52.060 In the website admin area, we'll go to finance and membership plans, and here's where we can see all of the membership plans that we have set up on our website. 51 00:04:52.199 --> 00:04:56.775 In this example, we wanna get the sign up page URL for membership plan 1. 52 00:04:56.854 --> 00:05:01.415 We can click this green button for any of the membership plans that says view sign up page. 53 00:05:01.415 --> 00:05:05.335 This will take us to the sign up page for this particular membership plan. 54 00:05:05.335 --> 00:05:10.310 All we need to do is copy the URL, in this case, slash checkout slash 1. 55 00:05:10.310 --> 00:05:14.090 We can then go back to editing our pricing page and paste that URL 56 00:05:14.470 --> 00:05:16.630 here in the URL field for the button. 57 00:05:16.630 --> 00:05:25.914 In this case, the URL was already correct, so we don't need to edit that, but it is important to make sure to come here to the pricing page and make sure that your buttons are linking to the proper sign up pages. 58 00:05:26.535 --> 00:05:30.875 Additionally, you can, of course, edit all of the text that you see here on this page. 59 00:05:31.095 --> 00:05:34.634 So instead of plan 1, we might wanna call this the basic plan. 60 00:05:34.775 --> 00:05:44.509 And, again, all of the information displayed on this page is independent from how your membership plans are actually set up in the finance section of your website's admin area. 61 00:05:44.569 --> 00:05:54.365 So we can edit all of this accompanying text, and in some cases, maybe you only have 2 membership plans, so you won't need to have 3 membership plans listed on this pricing page. 62 00:05:54.505 --> 00:06:01.485 If you click into any of these rows, in this toolbar that comes up, you can select the row icon and choose delete row. 63 00:06:01.545 --> 00:06:04.605 That will delete the entire row for that membership plan. 64 00:06:04.620 --> 00:06:08.560 So you can see here we now only have the 2 membership plans that would display. 65 00:06:08.699 --> 00:06:14.560 If you want to display more plans on this page, then you can go into the right hand sidebar under premade elements. 66 00:06:14.860 --> 00:06:17.840 Here, we have a variety of draggable content blocks. 67 00:06:17.985 --> 00:06:33.690 We have single elements such as images, video embeds, buttons, text blocks, a contact form, but if you scroll down, you'll see some more complex elements such as text with images, column feature lists, the FAQ module, but also a membership plan content block. 68 00:06:33.690 --> 00:06:38.190 So we can grab this membership plan and drag it to the left into the page content. 69 00:06:38.650 --> 00:06:43.070 So now you can see we, again, have 3 membership plans listed here on the pricing page. 70 00:06:43.130 --> 00:06:48.075 We can go in here and edit any of this text to make sure that the information displayed is correct. 71 00:06:48.315 --> 00:06:55.695 Again, you'll wanna make sure to edit the URL of the button to make sure that it's taking users to the correct sign up page for this membership plan. 72 00:06:56.075 --> 00:06:59.935 If we scroll down a little bit more, we'll come to the frequently asked questions section. 73 00:07:00.155 --> 00:07:02.255 Again, you can edit any of this text. 74 00:07:02.550 --> 00:07:11.770 You can also delete rows, and if you'd like to add more rows, you can do that as well by clicking the row icon and choosing whether to insert a row above or below. 75 00:07:11.830 --> 00:07:13.910 You can also do this with columns as well. 76 00:07:13.910 --> 00:07:25.435 So the web page builder, especially when used with the draggable pre made content elements and through the flexibility of utilizing tables, is an incredibly robust tool that you can use to edit or create web pages. 77 00:07:25.655 --> 00:07:27.755 When it comes to the page SEO settings, 78 00:07:28.420 --> 00:07:32.260 if you're unfamiliar with SEO or meta tags, you probably won't need to edit any of this. 79 00:07:32.260 --> 00:07:36.660 However, if you do want to manually change any of these elements, you can certainly do so. 80 00:07:36.660 --> 00:07:42.105 One element in the SEO settings that you probably will want to edit, though, is the social media shared image. 81 00:07:42.105 --> 00:07:49.945 When you share a link on Facebook, Twitter, or any other social network, they'll typically automatically pull an image from the page to accompany the link. 82 00:07:49.945 --> 00:07:55.245 If you add an image here, that image will be displayed with your link when this page is shared on social networks. 83 00:07:55.380 --> 00:08:02.360 This can help bring more attention to the link when people are scrolling their social network feeds and, thus, can help increase clicks to this page. 84 00:08:02.420 --> 00:08:09.675 A quick note while we're here in the SEO settings tab, you may notice strings of text surrounded by percentage signs throughout the admin area. 85 00:08:09.914 --> 00:08:20.574 These are text labels, so the system will automatically replace these text labels with the corresponding text you have set, typically in your general settings or the text label section of the admin area. 86 00:08:20.634 --> 00:08:22.650 And finally, we have the advanced tab. 87 00:08:22.650 --> 00:08:31.310 This tab will typically only be used by developers or by you if you have any coding knowledge here is where you can add page level CSS, head tags and JavaScript 88 00:08:32.092 --> 00:08:35.612 So that's all there is to it. If you have questions, please reach out at any time. 89 00:08:35.612 --> 00:08:38.272 Our team is always happy to help and support you.