WEBVTT 00:00:07.860 --> 00:00:15.570 In this video we are going to populate our contacts page using a nice Google map and also a nice contact 00:00:15.600 --> 00:00:16.230 form. 00:00:16.230 --> 00:00:16.790 OK. 00:00:17.110 --> 00:00:20.470 So other movements our contacts page is empty. 00:00:20.580 --> 00:00:21.110 OK. 00:00:21.360 --> 00:00:24.840 So first of all we are going to disable comments from our page. 00:00:25.030 --> 00:00:25.840 OK. 00:00:26.020 --> 00:00:32.170 And then we're going to add a new row where we're going to place a nice Google map. 00:00:32.190 --> 00:00:38.760 So let's go to our contacts page from dashboard pages and then contact 00:00:41.500 --> 00:00:43.170 them disable comments 00:00:46.230 --> 00:00:56.550 and add a neuro using the page builder Andro and we want our road to consist of only one column and 00:00:56.550 --> 00:00:59.880 that's what we're going to place our map. 00:01:00.060 --> 00:01:07.320 So to add the Google map you could select the arrow and click on Add widgets and we're going to use 00:01:07.320 --> 00:01:10.750 the sites or using Google Maps. 00:01:11.330 --> 00:01:12.230 OK. 00:01:12.900 --> 00:01:24.820 So before we edit the map let's go to the options of our row and change the layout of the row so that's 00:01:26.580 --> 00:01:31.110 it's got full width stretched. 00:01:31.880 --> 00:01:32.660 OK. 00:01:33.140 --> 00:01:34.410 And I literally cannot update 00:01:37.640 --> 00:01:40.440 now if we go to our map click on edit 00:01:47.400 --> 00:01:49.900 we can said the center of our map. 00:01:50.040 --> 00:01:55.270 I'm going to go for Bedford United Kingdom. 00:01:55.710 --> 00:02:07.040 That's where I live and I'm going to set the heights to 200 pixels and leave the zoom level at 12. 00:02:07.130 --> 00:02:11.290 I'm going to disable scroll to zoom OK. 00:02:11.630 --> 00:02:21.810 And then if you click on done updates and now if we refresh our contacts page we can see our Google 00:02:21.810 --> 00:02:22.560 map there. 00:02:22.740 --> 00:02:23.510 OK. 00:02:24.210 --> 00:02:31.130 We can take out this search bar to do that. 00:02:31.140 --> 00:02:41.660 Let's just change the layout of our page so we don't want the area 14. 00:02:41.850 --> 00:02:45.740 So rather than having the site by 14 we're going to have mine. 00:02:45.990 --> 00:02:46.990 OK. 00:02:47.960 --> 00:02:49.090 Let's update 00:02:53.010 --> 00:02:56.430 and refresh the page. 00:02:57.100 --> 00:02:58.430 Now it looks better. 00:02:58.800 --> 00:03:01.470 OK. 00:03:01.470 --> 00:03:07.260 All right now we are going to add a new road to our page consisting of two columns in the right hand 00:03:07.260 --> 00:03:08.030 side column. 00:03:08.250 --> 00:03:12.330 We're going to place a nice concise form on the left hand side column. 00:03:12.540 --> 00:03:17.450 We are going to place our contacts details and a nice picture of the bottom. 00:03:17.490 --> 00:03:20.330 So let's go ahead and create on your route. 00:03:20.430 --> 00:03:24.370 So again it goes to our contacts page and click on adro. 00:03:24.990 --> 00:03:32.340 So we want our roads consists of two columns but we're going to give the left side column width of 70 00:03:32.340 --> 00:03:38.400 percent OK and the right hand side column is going to take 40 percent of the way. 00:03:38.640 --> 00:03:41.910 Let's click on inserts and go out when you wrote that. 00:03:42.300 --> 00:03:51.330 Let's change the layout of our row by going to this wrench and going to each row and then lay outs and 00:03:51.330 --> 00:03:56.280 then change the rolling out to full with stretched and safe. 00:03:56.940 --> 00:03:58.340 OK. 00:03:59.280 --> 00:04:05.970 Now let's select the first column and odd a visual editor. 00:04:06.570 --> 00:04:07.310 OK. 00:04:07.690 --> 00:04:10.480 We're going to place our concise details. 00:04:10.560 --> 00:04:11.690 Let's click on and it's 00:04:16.640 --> 00:04:18.900 OK. 00:04:18.920 --> 00:04:22.080 And now I'm going to add some details there. 00:04:22.260 --> 00:04:28.050 Let's start with the e-mail. 00:04:33.820 --> 00:04:34.800 OK. 00:04:35.310 --> 00:04:37.170 And phone number 00:04:40.300 --> 00:04:47.610 is going to put some numbers here and address 00:04:57.000 --> 00:05:08.780 OK and it's a horizontal line by clicking on these icons OK and let's make the email bold. 00:05:09.210 --> 00:05:11.920 And also the phone address 00:05:16.060 --> 00:05:27.070 book and click on the updates and then if you go to our page we're going to see our concise details 00:05:27.190 --> 00:05:27.570 . 00:05:28.100 --> 00:05:28.900 OK. 00:05:29.850 --> 00:05:35.020 So now we're going to add the picture at the bottom of the text. 00:05:35.500 --> 00:05:45.860 So let's add another visual editor or just duplicate this one great. 00:05:45.900 --> 00:05:47.740 Click on edits. 00:05:50.620 --> 00:05:51.380 OK. 00:05:51.510 --> 00:05:54.320 So it's deletes contents for now 00:05:54.350 --> 00:06:00.110 . 00:06:00.990 --> 00:06:04.540 And now let's add a background image to our visual editor. 00:06:04.690 --> 00:06:09.160 So you going to go to design and then background image. 00:06:09.760 --> 00:06:10.120 OK. 00:06:10.250 --> 00:06:19.440 And let's select this picture window and click on that and also it changed the image display to cover 00:06:19.460 --> 00:06:20.160 . 00:06:20.970 --> 00:06:22.120 OK. 00:06:23.040 --> 00:06:27.570 So when I click on done and updates 00:06:30.450 --> 00:06:31.750 then refresh our page 00:06:35.540 --> 00:06:37.310 we're not gonna see any pictures there. 00:06:37.440 --> 00:06:42.750 And the reason why is because our visual editor doesn't have any heights so we're going to go back to 00:06:42.750 --> 00:06:49.430 our visual editor and click on edits and to add some Heiss there. 00:06:49.470 --> 00:06:51.530 We are going to use a spacer. 00:06:52.000 --> 00:06:59.280 So we're going to click on the space icon at this space are there and let's give it a height of three 00:06:59.280 --> 00:07:03.420 hundred eighty pixels. 00:07:03.690 --> 00:07:06.330 Let's click on non updates. 00:07:06.630 --> 00:07:08.490 And now if we refresh our page 00:07:14.010 --> 00:07:16.360 we are going to see our picture. 00:07:17.340 --> 00:07:20.590 OK. 00:07:23.430 --> 00:07:24.000 All right. 00:07:24.000 --> 00:07:27.950 Now let's create our contact form in the right hand side column. 00:07:28.260 --> 00:07:38.280 So to do that let's select our column art a visual editor inside the column and then inside our visual 00:07:38.280 --> 00:07:42.330 editor we are going to place some code. 00:07:42.660 --> 00:07:48.700 Basically we're going to be doing we're going to create our form using a plugin called Contact form 00:07:48.690 --> 00:07:49.360 7. 00:07:49.800 --> 00:07:55.530 And once we have created our contacts form we're going to get a strong code that we are going to paste 00:07:55.590 --> 00:07:57.240 inside our editor. 00:07:57.730 --> 00:07:58.610 OK. 00:07:58.800 --> 00:08:08.520 So let's get out of the area for now click on updates and then go to plugins 00:08:14.250 --> 00:08:20.960 and then click on and you are going to look for Contacts form 7. 00:08:21.270 --> 00:08:24.340 OK. 00:08:24.880 --> 00:08:26.010 Here is our plugin. 00:08:26.010 --> 00:08:26.730 It's in Soliz 00:08:34.260 --> 00:08:38.010 . 00:08:38.670 --> 00:08:41.580 Let's excavate our playing. 00:08:43.360 --> 00:08:44.280 OK. 00:08:45.040 --> 00:08:49.720 So the obligate is activated then you would see and you have there in your dashboard contacts. 00:08:49.770 --> 00:08:50.640 OK. 00:08:50.640 --> 00:08:55.820 So let's click on our new and then again on you 00:08:58.860 --> 00:09:01.960 right. 00:09:02.130 --> 00:09:04.590 All right so let's give our form a title. 00:09:04.600 --> 00:09:08.820 I'm going to call it my contacts form. 00:09:09.910 --> 00:09:16.910 OK so what we see here is the standard form which consists of these labels. 00:09:16.950 --> 00:09:17.790 OK. 00:09:18.030 --> 00:09:21.030 These fields. 00:09:21.150 --> 00:09:21.500 OK. 00:09:21.630 --> 00:09:24.520 So the fields they are shown here between brackets. 00:09:24.690 --> 00:09:30.570 So we can change the form if you want to just by copying any field we want. 00:09:30.580 --> 00:09:30.960 OK. 00:09:31.060 --> 00:09:34.200 And just adding as many paragraphs as we want. 00:09:34.770 --> 00:09:35.850 OK. 00:09:36.390 --> 00:09:43.600 So we're going to keep the standard form for now and click on Save. 00:09:45.340 --> 00:09:48.350 OK. 00:09:51.160 --> 00:09:59.850 And here is the source code you're going to need to paste inside our editor to create our form inside 00:10:00.580 --> 00:10:06.150 our page so we select that and click on Control see come command see. 00:10:06.380 --> 00:10:08.350 Ok then go back to our page 00:10:15.660 --> 00:10:17.700 then go inside the editor 00:10:21.110 --> 00:10:23.340 base the source code. 00:10:24.110 --> 00:10:24.700 OK. 00:10:24.930 --> 00:10:34.290 It's critical then then updates and refresh our page. 00:10:35.460 --> 00:10:38.880 We are going to see our contacts form that. 00:10:39.060 --> 00:10:45.750 All right now we've got a really nice contex page with a nice Google map and a really nice concise one 00:10:45.750 --> 00:10:46.470 . 00:10:46.530 --> 00:10:48.180 OK. 00:10:48.310 --> 00:10:48.840 All right. 00:10:48.850 --> 00:10:51.530 Now let's add some final touches to our page. 00:10:51.610 --> 00:10:54.680 Let's add some icons to our menu items. 00:10:55.020 --> 00:11:03.940 So to do that we are going to go to appearance menus and they're going to select our menu. 00:11:04.060 --> 00:11:13.290 So we're looking at the top menu which is menu one Kailas click on selects and no let's go to the menu 00:11:13.290 --> 00:11:20.240 items starting with the home item and then we can select an icon. 00:11:21.120 --> 00:11:24.460 So we're going to SYNNEX the home icon. 00:11:25.250 --> 00:11:26.010 OK. 00:11:26.260 --> 00:11:33.450 And then let's go to the About item on for the icon. 00:11:33.450 --> 00:11:36.870 We're going to choose info. 00:11:37.200 --> 00:11:45.670 And finally for the contacts item we're going to choose the envelope icon. 00:11:47.320 --> 00:11:49.210 OK. 00:11:49.380 --> 00:11:55.340 All right so now let's click on Save money. 00:11:58.380 --> 00:11:59.020 OK. 00:11:59.320 --> 00:12:04.900 Now let's go to our page and refresh. 00:12:06.160 --> 00:12:09.630 And now we can see that's our menu items. 00:12:09.690 --> 00:12:11.990 They have nice icons. 00:12:12.540 --> 00:12:12.770 OK 00:12:12.850 --> 00:12:23.910 .