title
Build a Website from Start to Finish using WordPress [Full Course]

description
Learn how to build a completely custom website using WordPress, PHP, HTML, CSS, and Elementor. You will learn how set up your local server, create the design, and build a custom WordPress theme that works with Elementor. The design section is sped up because it is just an example about how the design is done. You can create your own design or use a preexisting design. Once you have learned how to build out your website, you will learn how to get it from your local server to a production server and how to setup SEO, security, and caching the right way. Don't worry if you don't know much PHP. Everything you need is explained in the course. 💻 Assets (including mockup, theme folder, and images): https://github.com/thedevdrawer/sample-law-firm-template ✏️ This course was created by The Dev Drawer. Check out tutorials like this and many more on his channel: https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:00:49) Designing Your Website (Speed Art) ⌨️ (0:03:03) Setting Up Your Local Server ⌨️ (0:04:50) Create Your WordPress Database ⌨️ (0:05:33) Download WordPress ⌨️ (0:06:26) Installing WordPress ⌨️ (0:08:07) Install Elementor and Theme Plugins ⌨️ (0:09:43) Creating Your Theme Files ⌨️ (0:11:57) Using functions.php to Set Up Your Theme Defaults ⌨️ (0:21:39) Creating Default Theme Pages ⌨️ (0:23:41) Install Your Theme ⌨️ (0:25:24) General Setup ⌨️ (0:32:05) Creating Header and Footer Blocks ⌨️ (1:01:25) Creating Your Home Page ⌨️ (1:35:18) Create Custom Post Type and Meta Boxes ⌨️ (1:42:02) Creating Shortcodes Using Your CPTs ⌨️ (2:16:10) Modifying Columns for Your CPTs ⌨️ (2:24:13) Create Your Menus ⌨️ (2:29:45) Creating Additional Pages ⌨️ (2:33:04) Create Single Pages for Your CPTs ⌨️ (2:51:25) Create A Form ⌨️ (3:03:16) Create Elementor Section Templates ⌨️ (3:20:00) Create Another CPT ⌨️ (4:27:18) Validate and Modify Mobile ⌨️ (4:34:50) Export Your Website for Production ⌨️ (4:46:12) Recommend Security, SEO, and Caching Plugins ⌨️ (4:48:10) Setup Security ⌨️ (4:56:25) Setup Caching ⌨️ (5:01:13) Setup SEO ⌨️ (5:08:51) Wrap Up -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Build a Website from Start to Finish using WordPress [Full Course]', 'heatmap': [], 'summary': 'The full course on building a wordpress law firm website covers setting up a local server, designing the website layout and adding customizations, integrating wordpress content, troubleshooting, and optimizing for seo, including security setup and ada compliance, offering practical techniques for effective web development.', 'chapters': [{'end': 170.447, 'segs': [{'end': 44.792, 'src': 'embed', 'start': 15.672, 'weight': 0, 'content': [{'end': 20.935, 'text': "In this lesson, we'll be going over the initial design, installing and setting up WordPress, adding Elementor,", 'start': 15.672, 'duration': 5.263}, {'end': 27.758, 'text': 'as well as creating custom post types and integrating your own custom post types through shortcodes, as well as these Elementor templates.', 'start': 20.935, 'duration': 6.823}, {'end': 30.18, 'text': 'And all of this will be done on our local server.', 'start': 28.258, 'duration': 1.922}, {'end': 36.505, 'text': "Once we're done building the website, so it looks just like this I'll show you how to publish the website to a live server,", 'start': 30.6, 'duration': 5.905}, {'end': 38.507, 'text': 'set up security and manage your SEO.', 'start': 36.505, 'duration': 2.002}, {'end': 44.792, 'text': 'If you like this type of video, check out my channel, The Dev Drawer, for tutorials just like this, as well as other types of coding.', 'start': 39.027, 'duration': 5.765}], 'summary': 'Learn to build a wordpress website with elementor, custom post types, and local server setup, and publish to live server with security and seo management.', 'duration': 29.12, 'max_score': 15.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg15672.jpg'}, {'end': 89.515, 'src': 'embed', 'start': 49.642, 'weight': 1, 'content': [{'end': 52.545, 'text': "So I use Illustrator whenever I'm building a design.", 'start': 49.642, 'duration': 2.903}, {'end': 59.692, 'text': "You can use whatever you want or you can actually skip this part if you already have a designer or you don't really know how to design.", 'start': 52.705, 'duration': 6.987}, {'end': 61.915, 'text': "There's a lot of options out there,", 'start': 59.712, 'duration': 2.203}, {'end': 68.842, 'text': 'but I like to design out the websites using Illustrator because it gives me some flexibility with the colors and how to build it.', 'start': 61.915, 'duration': 6.927}, {'end': 75.59, 'text': "Whenever I'm building a website, I initially build a home page design as well as an internal page design.", 'start': 69.648, 'duration': 5.942}, {'end': 81.832, 'text': "So in this design, I'm actually taking it from a previous client that I had that needed a law firm website.", 'start': 75.95, 'duration': 5.882}, {'end': 85.033, 'text': 'And this is kind of what they wanted me to build.', 'start': 82.673, 'duration': 2.36}, {'end': 89.515, 'text': "So I'm going to use this as kind of like a placeholder design for this entire website.", 'start': 85.173, 'duration': 4.342}], 'summary': 'Uses illustrator for website design, creating home and internal page designs, based on law firm website model.', 'duration': 39.873, 'max_score': 49.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg49642.jpg'}], 'start': 0.885, 'title': 'Building a wordpress law firm website', 'summary': 'Covers creating a wordpress law firm website with initial design, setting up wordpress, adding elementor, creating custom post types, integrating through shortcodes, and publishing to a live server with security and seo setup.', 'chapters': [{'end': 170.447, 'start': 0.885, 'title': 'Building a wordpress law firm website', 'summary': 'Covers building a wordpress law firm website, including initial design, setting up wordpress, adding elementor, creating custom post types, integrating them through shortcodes, and publishing to a live server with security and seo setup.', 'duration': 169.562, 'highlights': ['The chapter covers building a WordPress law firm website, including initial design, setting up WordPress, adding Elementor, creating custom post types, integrating them through shortcodes, and publishing to a live server with security and SEO setup.', 'The speaker uses Illustrator for designing, providing flexibility with colors and visualizing the website, and then proceeds to build the website from the header to the footer, referencing the images and obtaining hex codes for the color scheme.', "The speaker emphasizes the importance of visually seeing the website to check fonts, color scheme, and other design elements, and explains the process of building a home page design as well as an internal page design based on a previous client's requirements."]}], 'duration': 169.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg885.jpg', 'highlights': ['The chapter covers building a WordPress law firm website, including initial design, setting up WordPress, adding Elementor, creating custom post types, integrating them through shortcodes, and publishing to a live server with security and SEO setup.', 'The speaker uses Illustrator for designing, providing flexibility with colors and visualizing the website, and then proceeds to build the website from the header to the footer, referencing the images and obtaining hex codes for the color scheme.', "The speaker emphasizes the importance of visually seeing the website to check fonts, color scheme, and other design elements, and explains the process of building a home page design as well as an internal page design based on a previous client's requirements."]}, {'end': 1250.836, 'segs': [{'end': 198.101, 'src': 'embed', 'start': 171.267, 'weight': 2, 'content': [{'end': 175.969, 'text': 'But from what you can see right here, this is what the website would end up looking like.', 'start': 171.267, 'duration': 4.702}, {'end': 182.174, 'text': "And again, if you don't know how to do design, there's a bunch of different ways that you can utilize something else.", 'start': 176.912, 'duration': 5.262}, {'end': 183.255, 'text': 'But this is it.', 'start': 182.414, 'duration': 0.841}, {'end': 187.557, 'text': "So let's get started installing WordPress and setting up our database.", 'start': 183.735, 'duration': 3.822}, {'end': 193.019, 'text': "So as you can see here, I'm using a WAMP server for a local server because it's free.", 'start': 187.777, 'duration': 5.242}, {'end': 198.101, 'text': 'Typically, I would use our own Ubuntu-based Linux server.', 'start': 193.399, 'duration': 4.702}], 'summary': 'Setting up wordpress with a wamp server for local development.', 'duration': 26.834, 'max_score': 171.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg171267.jpg'}, {'end': 566.968, 'src': 'embed', 'start': 543.087, 'weight': 1, 'content': [{'end': 549.989, 'text': "we're going to use this to create header and footer blocks that are displayed per the entire website or per certain pages.", 'start': 543.087, 'duration': 6.902}, {'end': 553.81, 'text': "For this tutorial, it's going to be on for the entire website.", 'start': 550.809, 'duration': 3.001}, {'end': 558.032, 'text': 'But this just gives us the Elementor view, so we can go in there and install that as well.', 'start': 554.151, 'duration': 3.881}, {'end': 566.968, 'text': 'Then we also have this Elementor section here and we can go over to settings and you can see which kind of post types you can use Elementor on.', 'start': 559.257, 'duration': 7.711}], 'summary': 'Using elementor to create header and footer blocks for entire website or certain pages.', 'duration': 23.881, 'max_score': 543.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg543087.jpg'}, {'end': 928.047, 'src': 'embed', 'start': 900.692, 'weight': 0, 'content': [{'end': 907.175, 'text': "And inside of this function, we're going to add theme support, image sizing, and we're going to register that nav.", 'start': 900.692, 'duration': 6.483}, {'end': 910.117, 'text': "So let's go ahead and do register underscore nav.", 'start': 907.215, 'duration': 2.902}, {'end': 911.618, 'text': 'We want it to run that function.', 'start': 910.217, 'duration': 1.401}, {'end': 919.302, 'text': "And then we also want to add the ability to create post thumbnails because we're going to be using those when we go to create a staff page.", 'start': 912.258, 'duration': 7.044}, {'end': 923.124, 'text': "So let's do add theme support.", 'start': 919.982, 'duration': 3.142}, {'end': 928.047, 'text': "And then we're going to do post thumbnail.", 'start': 924.525, 'duration': 3.522}], 'summary': 'Adding theme support, image sizing, and registering nav for staff page creation.', 'duration': 27.355, 'max_score': 900.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg900692.jpg'}], 'start': 171.267, 'title': 'Local server wordpress installation, website setup, and theme support', 'summary': "Covers setting up a local server using wamp, installing wordpress with a 'lawfirm' database, creating a law firm website with default and additional plugins, using elementor and header and footer blocks, and setting up theme support, image sizing, and scripts for header and footer.", 'chapters': [{'end': 419.798, 'start': 171.267, 'title': 'Local server wordpress installation', 'summary': "Demonstrates how to set up a local server using wamp, create a virtual host, and install wordpress with a database named 'lawfirm' and username 'root' with no password.", 'duration': 248.531, 'highlights': ['The chapter demonstrates how to set up a local server using WAMP. The speaker explains the process of installing WAMP and creating a virtual host for the local server.', "Installation of WordPress with a database named 'lawfirm' and username 'root' with no password. The speaker guides through the process of downloading, extracting, and setting up WordPress with specific database configurations."]}, {'end': 897.132, 'start': 419.818, 'title': 'Setting up wordpress website and plugins', 'summary': 'Covers the installation of wordpress, setup of default and additional plugins, and creation of theme files for a law firm website, emphasizing the use of elementor and header and footer blocks. it also includes the creation of functions for registering navigation menus and setting up image sizes and scripts.', 'duration': 477.314, 'highlights': ['The chapter covers the installation of WordPress, setup of default and additional plugins, and creation of theme files for a law firm website. The tutorial guides through installing WordPress, setting up default plugins, and installing additional plugins like Elementor and Header and Footer Blocks for a law firm website.', 'Emphasis on using Elementor and Header and Footer Blocks for the website design. The emphasis is placed on using Elementor and Header and Footer Blocks to design the website, providing flexibility and options for creating header, footer blocks, and custom post types.', 'Creation of functions for registering navigation menus, setting up image sizes, and enqueueing scripts. Functions are created to register navigation menus, set up custom image sizes, and enqueue scripts for pulling the style.css, enabling the addition of header, footer, and 404 menus.']}, {'end': 1250.836, 'start': 900.692, 'title': 'Setting up theme support and image sizing', 'summary': 'Discusses setting up theme support, adding post thumbnails, creating custom image sizes, and scripts for header and footer, with specific functions and actions mentioned for each task.', 'duration': 350.144, 'highlights': ['Setting up theme support, adding post thumbnails, and creating custom image size The chapter covers adding theme support, registering navigation, adding post thumbnails, and creating a custom image size of 475x475 pixels, ensuring the image is trimmed and centered if larger, to be used in the template.', 'Creating functions for scripts in header and footer Functions for scripts in header and footer are created, with CSS stylesheet being added using WP enqueue script and actions for WordPress to use these functions.']}], 'duration': 1079.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg171267.jpg', 'highlights': ['The chapter covers adding theme support, registering navigation, adding post thumbnails, and creating a custom image size of 475x475 pixels, ensuring the image is trimmed and centered if larger, to be used in the template.', 'Emphasis on using Elementor and Header and Footer Blocks for the website design. The emphasis is placed on using Elementor and Header and Footer Blocks to design the website, providing flexibility and options for creating header, footer blocks, and custom post types.', 'The chapter demonstrates how to set up a local server using WAMP. The speaker explains the process of installing WAMP and creating a virtual host for the local server.']}, {'end': 2903.58, 'segs': [{'end': 1313.424, 'src': 'embed', 'start': 1281.286, 'weight': 1, 'content': [{'end': 1284.229, 'text': "Because most likely you're going to be using jQuery whenever you're writing it.", 'start': 1281.286, 'duration': 2.943}, {'end': 1289.634, 'text': "But again, it's not something that we need right now, so I'm just going to comment it out.", 'start': 1285.15, 'duration': 4.484}, {'end': 1297.842, 'text': 'But this will give us the functionality that we need in order to kind of get started with setting up the fundamentals of our site.', 'start': 1290.015, 'duration': 7.827}, {'end': 1301.586, 'text': "And now let's switch over to the index.php.", 'start': 1298.803, 'duration': 2.783}, {'end': 1303.728, 'text': 'This is going to be a very simple page.', 'start': 1301.646, 'duration': 2.082}, {'end': 1313.424, 'text': "We're not going to do anything with it, but we do need to have the content displayed on it or else Elementor will not work correctly.", 'start': 1304.632, 'duration': 8.792}], 'summary': 'Setting up website fundamentals with jquery for functionality and displaying content on index.php page.', 'duration': 32.138, 'max_score': 1281.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1281286.jpg'}, {'end': 1427.999, 'src': 'embed', 'start': 1400.241, 'weight': 2, 'content': [{'end': 1403.583, 'text': "Let's go ahead and copy that over and paste it here.", 'start': 1400.241, 'duration': 3.342}, {'end': 1407.425, 'text': "So that's essentially all of the setup that we currently need.", 'start': 1404.243, 'duration': 3.182}, {'end': 1409.355, 'text': 'inside of the code.', 'start': 1408.315, 'duration': 1.04}, {'end': 1420.417, 'text': "so I'm going to take this and I'm going to switch back to our Chrome window so that we can finish doing what we need to do on that side of it.", 'start': 1409.355, 'duration': 11.062}, {'end': 1427.999, 'text': "okay, so now we're back in Chrome and I'm gonna go to our parents themes, and now we have this law firm sample.", 'start': 1420.417, 'duration': 7.582}], 'summary': 'Setting up code for law firm sample in chrome window.', 'duration': 27.758, 'max_score': 1400.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1400241.jpg'}, {'end': 1569.67, 'src': 'embed', 'start': 1538.916, 'weight': 0, 'content': [{'end': 1543.217, 'text': "And if you're not using it specifically for a blog, the other ones aren't really good either.", 'start': 1538.916, 'duration': 4.301}, {'end': 1549.219, 'text': "So we're going to be using post name just because this is going to be a small law firm website.", 'start': 1543.777, 'duration': 5.442}, {'end': 1550.839, 'text': "Maybe they'll have a blog, maybe they won't.", 'start': 1549.279, 'duration': 1.56}, {'end': 1553, 'text': "But for the most part it's going to be an informational website.", 'start': 1550.879, 'duration': 2.121}, {'end': 1562.325, 'text': 'Okay, so another thing that we want to do right now is create the font and the colors that are going to be used.', 'start': 1553.94, 'duration': 8.385}, {'end': 1569.67, 'text': "In order to do that, you need to open up your pages, click on Edit, and then you're going to have this Elementor.", 'start': 1562.846, 'duration': 6.824}], 'summary': 'Recommend using post name for law firm website, focusing on informational content.', 'duration': 30.754, 'max_score': 1538.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1538916.jpg'}, {'end': 1689.392, 'src': 'embed', 'start': 1660.769, 'weight': 7, 'content': [{'end': 1676.533, 'text': "so the primary color we're going to use like this kind of darkish blue and and then we're also going to for the secondary color we are going to use like a darkish gray kind of color.", 'start': 1660.769, 'duration': 15.764}, {'end': 1679.834, 'text': "I guess that's kind of the same color that's here.", 'start': 1676.533, 'duration': 3.301}, {'end': 1682.635, 'text': "yep, so that one's fine.", 'start': 1679.834, 'duration': 2.801}, {'end': 1686.291, 'text': 'then the text, then the accent.', 'start': 1682.635, 'duration': 3.656}, {'end': 1687.131, 'text': 'so the accent.', 'start': 1686.291, 'duration': 0.84}, {'end': 1689.392, 'text': "let's do it like a lighter version of this blue.", 'start': 1687.131, 'duration': 2.261}], 'summary': 'Primary color: darkish blue, secondary color: darkish gray, accent color: lighter version of blue.', 'duration': 28.623, 'max_score': 1660.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1660769.jpg'}, {'end': 1779.836, 'src': 'embed', 'start': 1745.545, 'weight': 6, 'content': [{'end': 1747.046, 'text': "We're going to do Open Sans.", 'start': 1745.545, 'duration': 1.501}, {'end': 1751.371, 'text': "And you can see it's changing it as we're doing it because it's actually doing it in real time.", 'start': 1747.607, 'duration': 3.764}, {'end': 1760.118, 'text': "And then finally, our Accent is also, let's just make it Times New Roman.", 'start': 1752.272, 'duration': 7.846}, {'end': 1764.241, 'text': "So I think for the most part, we're using Times New Roman for everything.", 'start': 1760.618, 'duration': 3.623}, {'end': 1770.267, 'text': 'Just because Times New Roman is very lawyer-like.', 'start': 1764.802, 'duration': 5.465}, {'end': 1772.269, 'text': "So let's update that.", 'start': 1770.867, 'duration': 1.402}, {'end': 1779.836, 'text': 'And I think that is all that we need for the global colors and global fonts.', 'start': 1773.069, 'duration': 6.767}], 'summary': 'Using times new roman for global fonts, as it looks lawyer-like.', 'duration': 34.291, 'max_score': 1745.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1745545.jpg'}, {'end': 1889.169, 'src': 'embed', 'start': 1857.052, 'weight': 3, 'content': [{'end': 1861.893, 'text': 'select that we want to make it a primary text font and then use a different color,', 'start': 1857.052, 'duration': 4.841}, {'end': 1868.275, 'text': "and it'll actually show up here and update it on there for us all right.", 'start': 1861.893, 'duration': 6.382}, {'end': 1873.156, 'text': 'so we have our site settings done.', 'start': 1868.275, 'duration': 4.881}, {'end': 1883.198, 'text': "let's go ahead and create this home page real quick, just to kind of make it look like it does on the on the website.", 'start': 1873.156, 'duration': 10.042}, {'end': 1889.169, 'text': "so let's rename this to home and update it.", 'start': 1883.198, 'duration': 5.971}], 'summary': 'Setting primary text font and color for a website homepage.', 'duration': 32.117, 'max_score': 1857.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1857052.jpg'}, {'end': 1969.105, 'src': 'embed', 'start': 1941.493, 'weight': 4, 'content': [{'end': 1945.454, 'text': "Let's say if you're creating a landing page specifically for an ad campaign or something like that.", 'start': 1941.493, 'duration': 3.961}, {'end': 1948.475, 'text': 'you can actually change up the way your header looks inside of it.', 'start': 1945.974, 'duration': 2.501}, {'end': 1951.757, 'text': "But for this purpose, we're going to be using it for the entire website.", 'start': 1948.555, 'duration': 3.202}, {'end': 1954.738, 'text': "And we're going to go ahead and publish it out.", 'start': 1952.597, 'duration': 2.141}, {'end': 1958.58, 'text': 'And then we pull up the design again.', 'start': 1956.979, 'duration': 1.601}, {'end': 1961.881, 'text': "So the header, we don't want it to be boxed.", 'start': 1959.54, 'duration': 2.341}, {'end': 1963.442, 'text': 'We want it to be full width.', 'start': 1961.941, 'duration': 1.501}, {'end': 1966.163, 'text': "So let's update that.", 'start': 1965.023, 'duration': 1.14}, {'end': 1969.105, 'text': "And it's going to be full width.", 'start': 1966.824, 'duration': 2.281}], 'summary': 'The header on the landing page will be changed to full width for the entire website.', 'duration': 27.612, 'max_score': 1941.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1941493.jpg'}, {'end': 2673.232, 'src': 'embed', 'start': 2648.278, 'weight': 9, 'content': [{'end': 2654.483, 'text': "So that'll give us that alignment on where they're kind of in the center of the whole thing across the board.", 'start': 2648.278, 'duration': 6.205}, {'end': 2665.333, 'text': "Now also, for every website that I've ever developed for a law firm, there's always been a disclaimer at the bottom of it.", 'start': 2655.564, 'duration': 9.769}, {'end': 2673.232, 'text': "So I'm going to take this, I'm going to right click on it, and we're going to duplicate it down, but we don't need all of the columns.", 'start': 2665.788, 'duration': 7.444}], 'summary': 'Aligning websites to center, adding disclaimers, and duplicating columns for law firm websites.', 'duration': 24.954, 'max_score': 2648.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg2648278.jpg'}, {'end': 2843.283, 'src': 'embed', 'start': 2818.079, 'weight': 5, 'content': [{'end': 2827.447, 'text': "so that's going to give us the titles for each one of our sections, which the first one is going to be navigation and then the second one, i believe,", 'start': 2818.079, 'duration': 9.368}, {'end': 2831.711, 'text': 'is contact us.', 'start': 2827.447, 'duration': 4.264}, {'end': 2838.642, 'text': "okay, so now we have our sub subsections and then for the contact us, it's just going to be simple,", 'start': 2831.711, 'duration': 6.931}, {'end': 2843.283, 'text': 'like icons that are next to the text and they actually have a element or widget for that.', 'start': 2838.642, 'duration': 4.641}], 'summary': 'Creating navigation and contact us sections with simple icons and widgets.', 'duration': 25.204, 'max_score': 2818.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg2818079.jpg'}], 'start': 1251.416, 'title': 'Setting up law firm website', 'summary': 'Covers setting up the fundamentals of a law firm website, emphasizing the importance of post name in permalinks for better seo. it also includes customizing website fonts and colors using specific hex codes, implementing website layout and design elements, and detailing design customization for a professional and lawyer-like design.', 'chapters': [{'end': 1553, 'start': 1251.416, 'title': 'Setting up law firm website', 'summary': 'Covers setting up the fundamentals of a law firm website, including grabbing javascript files, creating simple pages, activating and customizing themes, and making essential configurations, emphasizing the importance of post name in permalinks for better seo.', 'duration': 301.584, 'highlights': ['Activating and customizing themes The chapter focuses on activating and customizing a specific law firm theme, addressing the importance of customizing themes after the website is done for a better presentation.', 'Setting up the fundamentals of a law firm website The chapter discusses the process of setting up the fundamentals of a law firm website, including grabbing JavaScript files and creating simple pages to ensure the correct functionality.', 'Importance of post name in permalinks for better SEO The chapter emphasizes the importance of using post name in permalinks for better SEO, particularly for a small law firm website, which may or may not include a blog.']}, {'end': 2042.186, 'start': 1553.94, 'title': 'Customizing website fonts and colors', 'summary': 'Covers the process of customizing global colors and fonts for a website using specific hex codes for primary and secondary colors, along with times new roman and open sans as primary and secondary fonts, aiming to achieve a professional and lawyer-like design.', 'duration': 488.246, 'highlights': ['The primary color chosen for the website is a darkish blue, while the secondary color is a darkish gray. The specific choice of colors for the website, with the primary color being a darkish blue and the secondary color being a darkish gray, is highlighted.', 'The accent color, a lighter version of the primary blue, is also specified using hex codes. The emphasis on specifying the accent color, a lighter version of the primary blue, using hex codes is noted as an important step in the customization process.', 'The primary font for the website is set to Times New Roman for a professional and lawyer-like design, with Open Sans considered as a secondary font. The decision to use Times New Roman as the primary font to achieve a professional and lawyer-like design, along with considering Open Sans as a secondary font, is highlighted.']}, {'end': 2579.905, 'start': 2044.127, 'title': 'Website design and layout implementation', 'summary': 'Discusses the process of designing and implementing website layout and design elements, including resizing the logo, adjusting the site width, creating a header and footer, and customizing the navigation menu.', 'duration': 535.778, 'highlights': ['The chapter discusses the process of designing and implementing website layout and design elements. It covers various aspects such as resizing the logo, adjusting the site width, creating a header and footer, and customizing the navigation menu.', 'Resizing the logo and adjusting the site width. The speaker mentions drag-and-dropping to make the logo smaller and sets the site width to 1800, ensuring responsiveness.', "Creating and customizing the navigation menu. The process involves creating a menu called 'header,' setting it as the header menu, and aligning it to the right, while also discussing font style customization."]}, {'end': 2903.58, 'start': 2579.925, 'title': 'Website design customization', 'summary': 'Details the customization process for a website, including adjusting text color, resizing icons, aligning elements, adding disclaimers, and placing search and contact elements, with a focus on design aesthetics and functionality.', 'duration': 323.655, 'highlights': ['The chapter provides a detailed process of customizing a website, including adjusting text color, resizing icons, and aligning elements for improved aesthetics and functionality.', 'It discusses the addition of a disclaimer at the bottom of the website, a common requirement for law firm websites, and the process of adding search and contact elements based on design aesthetics.', 'The customization process involves specific actions such as setting text color, resizing icons, aligning elements, adding disclaimers, and placing search and contact elements, emphasizing the importance of design consistency and functionality.', 'It includes the detailed steps for customizing the top and bottom footers of the website, focusing on categories such as navigation, contact us, and search elements.']}], 'duration': 1652.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg1251416.jpg', 'highlights': ['Importance of post name in permalinks for better SEO The chapter emphasizes the importance of using post name in permalinks for better SEO, particularly for a small law firm website, which may or may not include a blog.', 'The chapter discusses the process of setting up the fundamentals of a law firm website, including grabbing JavaScript files and creating simple pages to ensure the correct functionality.', 'Activating and customizing themes The chapter focuses on activating and customizing a specific law firm theme, addressing the importance of customizing themes after the website is done for a better presentation.', 'The chapter provides a detailed process of customizing a website, including adjusting text color, resizing icons, and aligning elements for improved aesthetics and functionality.', 'The chapter discusses the process of designing and implementing website layout and design elements. It covers various aspects such as resizing the logo, adjusting the site width, creating a header and footer, and customizing the navigation menu.', 'The customization process involves specific actions such as setting text color, resizing icons, aligning elements, adding disclaimers, and placing search and contact elements, emphasizing the importance of design consistency and functionality.', 'The primary font for the website is set to Times New Roman for a professional and lawyer-like design, with Open Sans considered as a secondary font. The decision to use Times New Roman as the primary font to achieve a professional and lawyer-like design, along with considering Open Sans as a secondary font, is highlighted.', 'The primary color chosen for the website is a darkish blue, while the secondary color is a darkish gray. The specific choice of colors for the website, with the primary color being a darkish blue and the secondary color being a darkish gray, is highlighted.', 'The accent color, a lighter version of the primary blue, is also specified using hex codes. The emphasis on specifying the accent color, a lighter version of the primary blue, using hex codes is noted as an important step in the customization process.', 'The chapter discusses the addition of a disclaimer at the bottom of the website, a common requirement for law firm websites, and the process of adding search and contact elements based on design aesthetics.']}, {'end': 4109.488, 'segs': [{'end': 3139.214, 'src': 'embed', 'start': 3057.813, 'weight': 1, 'content': [{'end': 3061.796, 'text': "Edit this again and then we're going to select that menu, which isn't going to change it,", 'start': 3057.813, 'duration': 3.983}, {'end': 3065.898, 'text': "just because we didn't actually change anything between the navigations.", 'start': 3061.796, 'duration': 4.102}, {'end': 3074.923, 'text': "And the hover isn't really super visible, so I think I'm going to make it a little bit darker.", 'start': 3069.858, 'duration': 5.065}, {'end': 3077.825, 'text': "Can't really tell that you're hovering over it.", 'start': 3075.924, 'duration': 1.901}, {'end': 3080.348, 'text': 'There we go.', 'start': 3079.927, 'duration': 0.421}, {'end': 3083.07, 'text': "That's a better transition.", 'start': 3080.388, 'duration': 2.682}, {'end': 3089.356, 'text': 'OK, so now we have our header and our footer done.', 'start': 3085.472, 'duration': 3.884}, {'end': 3092.879, 'text': 'Looks just like the way that it does in our initial design.', 'start': 3089.616, 'duration': 3.263}, {'end': 3099.522, 'text': 'And I think that is it for the footer and the header.', 'start': 3097.279, 'duration': 2.243}, {'end': 3105.93, 'text': "Okay, so now that I'm comparing it to the design, there's a few things that I need to add still.", 'start': 3099.542, 'duration': 6.388}, {'end': 3111.978, 'text': "So one is there's a gray bar at the top over here that has like the phone number and some social media icons.", 'start': 3106.01, 'duration': 5.968}, {'end': 3114.541, 'text': "And then down here you can see there's a little spacing.", 'start': 3112.038, 'duration': 2.503}, {'end': 3118.326, 'text': 'So we need to adjust this spacing.', 'start': 3116.405, 'duration': 1.921}, {'end': 3120.927, 'text': "So let's go back to our footer.", 'start': 3118.986, 'duration': 1.941}, {'end': 3128.91, 'text': 'And if we click on the wrapper for it, we can control that by doing stretch sections.', 'start': 3122.207, 'duration': 6.703}, {'end': 3130.611, 'text': 'Yeah, it pushes it all the way out to the side.', 'start': 3128.97, 'duration': 1.641}, {'end': 3132.351, 'text': "And it's going to do that for both of them.", 'start': 3130.631, 'duration': 1.72}, {'end': 3139.214, 'text': "Then we're going to update that and refresh over here.", 'start': 3134.932, 'duration': 4.282}], 'summary': 'Adjustments made to header and footer design for better visibility and alignment.', 'duration': 81.401, 'max_score': 3057.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg3057813.jpg'}, {'end': 3596.077, 'src': 'embed', 'start': 3561.645, 'weight': 4, 'content': [{'end': 3562.766, 'text': 'Let me add anything here.', 'start': 3561.645, 'duration': 1.121}, {'end': 3569.389, 'text': 'So whenever you get into a situation like this with Elementor, you can easily go back to this history.', 'start': 3562.846, 'duration': 6.543}, {'end': 3574.311, 'text': 'And you can find out where you started that.', 'start': 3569.929, 'duration': 4.382}, {'end': 3577.993, 'text': "So let's say we want to do section margin edited.", 'start': 3574.472, 'duration': 3.521}, {'end': 3583.316, 'text': "And that'll bring us back to where we were before we started making the changes.", 'start': 3580.234, 'duration': 3.082}, {'end': 3586.298, 'text': "But it's still displaying a column inside of a column.", 'start': 3583.376, 'duration': 2.922}, {'end': 3589.839, 'text': 'So what happens if I duplicate that column? OK.', 'start': 3586.738, 'duration': 3.101}, {'end': 3596.077, 'text': "So let's get rid of this and this.", 'start': 3591.733, 'duration': 4.344}], 'summary': "Using elementor's history feature to revert changes and troubleshoot design issues.", 'duration': 34.432, 'max_score': 3561.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg3561645.jpg'}, {'end': 3852.972, 'src': 'embed', 'start': 3823.578, 'weight': 0, 'content': [{'end': 3826.539, 'text': "And I'm just going to put in the sample way since this is a sample website.", 'start': 3823.578, 'duration': 2.961}, {'end': 3828.8, 'text': 'So the sample way.', 'start': 3826.659, 'duration': 2.141}, {'end': 3832.262, 'text': 'Now for this one, I want to have the text a little bit smaller.', 'start': 3829.761, 'duration': 2.501}, {'end': 3834.723, 'text': 'Not too much smaller though.', 'start': 3833.422, 'duration': 1.301}, {'end': 3837.197, 'text': 'Maybe about right there.', 'start': 3835.976, 'duration': 1.221}, {'end': 3843.223, 'text': "Okay, so you can't really read the white on the black and white background.", 'start': 3837.598, 'duration': 5.625}, {'end': 3849.028, 'text': "So we're going to come over here to our style and we're going to give this a gradient overlay.", 'start': 3844.003, 'duration': 5.025}, {'end': 3852.972, 'text': "Let's go ahead and make this parallax.", 'start': 3851.01, 'duration': 1.962}], 'summary': 'Applying a gradient overlay and parallax effect to improve text visibility on black and white background.', 'duration': 29.394, 'max_score': 3823.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg3823578.jpg'}, {'end': 3923.483, 'src': 'embed', 'start': 3883.988, 'weight': 6, 'content': [{'end': 3892.078, 'text': "All right, so let's also give it some padding on the top and the bottom so it's not so bunched up together.", 'start': 3883.988, 'duration': 8.09}, {'end': 3898.126, 'text': "Let's see, margin.", 'start': 3892.098, 'duration': 6.028}, {'end': 3899.908, 'text': 'No, we want to do padding.', 'start': 3898.406, 'duration': 1.502}, {'end': 3905.11, 'text': "Yeah, let's do it here.", 'start': 3904.369, 'duration': 0.741}, {'end': 3909.493, 'text': "OK, so let's say we want to do 50 pixels.", 'start': 3905.63, 'duration': 3.863}, {'end': 3912.375, 'text': "Don't need all of them.", 'start': 3911.354, 'duration': 1.021}, {'end': 3913.956, 'text': "Let's make them all 0.", 'start': 3912.395, 'duration': 1.561}, {'end': 3919.34, 'text': "And we're just going to do 50 on the bottom, 50 on the top.", 'start': 3913.956, 'duration': 5.384}, {'end': 3923.483, 'text': "I'm still thinking this is a little bit too light.", 'start': 3920.721, 'duration': 2.762}], 'summary': 'Adjust padding to 50 pixels on top and bottom for better spacing.', 'duration': 39.495, 'max_score': 3883.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg3883988.jpg'}, {'end': 3994.253, 'src': 'embed', 'start': 3958.275, 'weight': 7, 'content': [{'end': 3961.696, 'text': "And let's go ahead and remove one of the columns,", 'start': 3958.275, 'duration': 3.421}, {'end': 3966.058, 'text': "because what we're going to do is we're going to create the columns one by one and then we're just going to duplicate them.", 'start': 3961.696, 'duration': 4.362}, {'end': 3977.088, 'text': "And the way that we do that is, based on the design, it's going to be an icon box here.", 'start': 3968.525, 'duration': 8.563}, {'end': 3984.55, 'text': "And then the icon box, it's going to have a background of white.", 'start': 3978.968, 'duration': 5.582}, {'end': 3994.253, 'text': "So let's go over here and do this column style.", 'start': 3986.07, 'duration': 8.183}], 'summary': 'Create columns one by one, duplicate based on design for icon box with white background.', 'duration': 35.978, 'max_score': 3958.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg3958275.jpg'}], 'start': 2903.58, 'title': 'Website design and styling', 'summary': 'Details the process of making design updates, adjusting header and footer, editing page layout, and designing the website, including specific actions such as changing alignment, adding social media icons, resolving layout issues, and creating a gradient overlay.', 'chapters': [{'end': 3083.07, 'start': 2903.58, 'title': 'Website design updates and navigation setup', 'summary': 'Details the process of making design updates to a website, including changing the alignment, size, and color of icons and text, as well as setting up navigation menus and adjusting hover effects.', 'duration': 179.49, 'highlights': ['The process of making design updates to a website, including changing the alignment, size, and color of icons and text The speaker discusses the need to adjust the alignment, size, and color of icons and text on the website to achieve a desired visual presentation.', 'Setting up navigation menus and adjusting hover effects The chapter covers the creation of a footer navigation menu and the adjustment of hover effects to ensure better visibility and user experience.']}, {'end': 3515.856, 'start': 3085.472, 'title': 'Header and footer design review', 'summary': 'Details the adjustments made to the website header and footer, including stretching sections, adding social media icons and phone number, and aligning elements for a cleaner layout.', 'duration': 430.384, 'highlights': ['The footer and header are adjusted to stretch all the way across the screen for a consistent layout. The footer and header are stretched to ensure they go all the way across the screen, providing a consistent layout.', 'Addition of a gray bar at the top with phone number and social media icons. The chapter discusses the addition of a gray bar at the top of the website containing the phone number and social media icons.', 'Adjusting spacing and layout for social media icons and phone number in the footer and header. The spacing and layout for the social media icons and phone number are adjusted in the footer and header to achieve a cleaner and aligned design.']}, {'end': 3822.818, 'start': 3515.856, 'title': 'Editing page layout and adding content', 'summary': 'Discusses editing the page layout using elementor, including resolving the issue of a column inside another column, adjusting column size, reverting changes using history, aligning sections and adding content to the home page.', 'duration': 306.962, 'highlights': ['Resolving the issue of a column inside another column The speaker encounters the problem of a column inside another column while using Elementor.', "Reverting changes using history The speaker mentions the ability to revert changes using Elementor's history feature, providing a way to track and undo modifications.", 'Aligning sections and adding content to the home page The speaker discusses aligning sections, setting up columns with middle alignment, and adding content to the home page.']}, {'end': 4109.488, 'start': 3823.578, 'title': 'Website design and styling', 'summary': 'Discusses the process of designing and styling a website, including adjusting text size, creating a gradient overlay, adding padding, and duplicating sections to accommodate different content.', 'duration': 285.91, 'highlights': ['The process of designing and styling a website, including adjusting text size, creating a gradient overlay, adding padding, and duplicating sections to accommodate different content.', 'Applying a gradient overlay to improve readability on the black and white background.', 'Adding padding of 50 pixels to the top and bottom to prevent the content from appearing bunched up.', 'Discussing the use of icon boxes with a white background and customized icons to represent different types of content.']}], 'duration': 1205.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg2903580.jpg', 'highlights': ['The process of designing and styling a website, including adjusting text size, creating a gradient overlay, adding padding, and duplicating sections to accommodate different content.', 'Setting up navigation menus and adjusting hover effects to ensure better visibility and user experience.', 'The footer and header are adjusted to stretch all the way across the screen for a consistent layout.', 'Adding a gray bar at the top with phone number and social media icons for improved accessibility.', 'Resolving the issue of a column inside another column while using Elementor.', 'Applying a gradient overlay to improve readability on the black and white background.', 'Adding padding of 50 pixels to the top and bottom to prevent the content from appearing bunched up.', 'Discussing the use of icon boxes with a white background and customized icons to represent different types of content.']}, {'end': 6006.389, 'segs': [{'end': 4152.089, 'src': 'embed', 'start': 4126.46, 'weight': 8, 'content': [{'end': 4133.986, 'text': "one Should have did this before I duplicated, and that's the reason why I waited to duplicate them, So I wouldn't have to do it for all three of them.", 'start': 4126.46, 'duration': 7.526}, {'end': 4135.227, 'text': "but it's a simple change.", 'start': 4133.986, 'duration': 1.241}, {'end': 4137.169, 'text': 'so 10, 10 and 10.', 'start': 4135.227, 'duration': 1.942}, {'end': 4144.935, 'text': "so we have some spacing around it and Now we need to get these icons to go up, which we're actually going to do with CSS.", 'start': 4137.169, 'duration': 7.766}, {'end': 4146.316, 'text': "So let's go ahead and update this.", 'start': 4144.935, 'duration': 1.381}, {'end': 4152.089, 'text': "It's hard to do this whenever I'm going back and forth between an image and the code.", 'start': 4148.268, 'duration': 3.821}], 'summary': 'Delayed duplication to avoid repetitive work, 10, 10, 10 spacing, updating icons with css.', 'duration': 25.629, 'max_score': 4126.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg4126460.jpg'}, {'end': 4460.827, 'src': 'embed', 'start': 4380.823, 'weight': 2, 'content': [{'end': 4384.865, 'text': 'What do I want to call it? Hero.', 'start': 4380.823, 'duration': 4.042}, {'end': 4388.546, 'text': "Let's see.", 'start': 4384.885, 'duration': 3.661}, {'end': 4389.867, 'text': 'Hero CTA.', 'start': 4388.806, 'duration': 1.061}, {'end': 4391.967, 'text': "OK So let's update that.", 'start': 4390.287, 'duration': 1.68}, {'end': 4396.369, 'text': 'And now that should give us a class that wraps around these.', 'start': 4393.628, 'duration': 2.741}, {'end': 4398.75, 'text': 'And then we can call that.', 'start': 4397.61, 'duration': 1.14}, {'end': 4400.651, 'text': "So I'm going to switch back over to Visual Studio.", 'start': 4398.77, 'duration': 1.881}, {'end': 4413.396, 'text': "and inside of this we're going to do hero CTA,", 'start': 4403.713, 'duration': 9.683}, {'end': 4423.14, 'text': "then we're going to put a space and then this is where I want to add that code for the pretty this up a little bit.", 'start': 4413.396, 'duration': 9.744}, {'end': 4429.222, 'text': "this is where I want to add the code that's going to move those element or box icons up off of the screen.", 'start': 4423.14, 'duration': 6.082}, {'end': 4435.251, 'text': 'so inside of that we need to do a position.', 'start': 4431.568, 'duration': 3.683}, {'end': 4439.814, 'text': 'think position relative.', 'start': 4435.251, 'duration': 4.563}, {'end': 4442.396, 'text': "let's try that,", 'start': 4439.814, 'duration': 2.582}, {'end': 4460.827, 'text': "let's do position relative and then I think maybe we can do top and then let's do like minus minus 50 pixels and I'm gonna refresh that real quick to see what it looks like.", 'start': 4442.396, 'duration': 18.431}], 'summary': 'Developing and updating hero cta class in visual studio, adjusting position by -50 pixels.', 'duration': 80.004, 'max_score': 4380.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg4380823.jpg'}, {'end': 4634.27, 'src': 'embed', 'start': 4605.474, 'weight': 0, 'content': [{'end': 4611.379, 'text': "This one should be pretty easy to do, so let's go ahead and add in a new section with two columns.", 'start': 4605.474, 'duration': 5.905}, {'end': 4615.502, 'text': "We're going to make this column a little bit smaller, let's say about 38%.", 'start': 4611.599, 'duration': 3.903}, {'end': 4619.686, 'text': "Then over here, I'm just going to add in some dummy text.", 'start': 4615.502, 'duration': 4.184}, {'end': 4627.087, 'text': "So let's just add in an intersection.", 'start': 4624.125, 'duration': 2.962}, {'end': 4629.688, 'text': "And let's add in a header.", 'start': 4628.207, 'duration': 1.481}, {'end': 4631.829, 'text': "Nope, that's not what I wanted to do.", 'start': 4629.708, 'duration': 2.121}, {'end': 4634.27, 'text': "I don't know why I just did an intersection.", 'start': 4631.849, 'duration': 2.421}], 'summary': 'Adding a new section with two columns, one of which is 38% smaller, and adding dummy text.', 'duration': 28.796, 'max_score': 4605.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg4605474.jpg'}, {'end': 4961.854, 'src': 'embed', 'start': 4924.092, 'weight': 5, 'content': [{'end': 4928.296, 'text': "so let's come here and we're going to type in where's the content.", 'start': 4924.092, 'duration': 4.204}, {'end': 4934.521, 'text': "at divider we're going to say practice areas,", 'start': 4928.296, 'duration': 6.225}, {'end': 4947.805, 'text': "and then this text is going to be the primary color and the topography is also going to be the primary topography, but we're going to make it 22..", 'start': 4934.521, 'duration': 13.284}, {'end': 4950.887, 'text': "No, let's do 25 pixels.", 'start': 4947.805, 'duration': 3.082}, {'end': 4954.489, 'text': 'And okay.', 'start': 4952.468, 'duration': 2.021}, {'end': 4961.854, 'text': "Alright, so since it's a separator area, we don't necessarily need to have the weight to be bold.", 'start': 4955.47, 'duration': 6.384}], 'summary': 'Configuring website layout with 25px primary text, not bold.', 'duration': 37.762, 'max_score': 4924.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg4924092.jpg'}, {'end': 5031.162, 'src': 'embed', 'start': 5004.167, 'weight': 4, 'content': [{'end': 5008.809, 'text': "OK, so now for the practice areas, we're going to build out the practice areas.", 'start': 5004.167, 'duration': 4.642}, {'end': 5012.31, 'text': "They're going to be very similar to these, but it's going to be different colors.", 'start': 5008.849, 'duration': 3.461}, {'end': 5027.977, 'text': "So what I want to do here is we're going to duplicate this for now and drag it down and put it underneath the practice areas.", 'start': 5012.651, 'duration': 15.326}, {'end': 5031.162, 'text': "Alright, so we're still recording.", 'start': 5029.881, 'duration': 1.281}], 'summary': 'Building and duplicating practice areas, with different colors.', 'duration': 26.995, 'max_score': 5004.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg5004167.jpg'}, {'end': 5314.339, 'src': 'embed', 'start': 5245.257, 'weight': 1, 'content': [{'end': 5251.141, 'text': "So the one that I'm looking for is called Strong Testimonials, I think.", 'start': 5245.257, 'duration': 5.884}, {'end': 5253.282, 'text': 'Yep, Strong Testimonials.', 'start': 5252.201, 'duration': 1.081}, {'end': 5254.483, 'text': "So let's install that.", 'start': 5253.542, 'duration': 0.941}, {'end': 5266.129, 'text': "And once it gets done installing, I'll show you how to set it up so that we can actually use it.", 'start': 5259.606, 'duration': 6.523}, {'end': 5270.472, 'text': "All right, so let's activate it.", 'start': 5269.091, 'duration': 1.381}, {'end': 5282.305, 'text': 'and first thing we want to do is go to our settings and then on the settings, you have different options that you can set up.', 'start': 5274.398, 'duration': 7.907}, {'end': 5285.508, 'text': 'you know the, the administration, the output.', 'start': 5282.305, 'duration': 3.203}, {'end': 5292.858, 'text': "so what we want to do is No, it's not in the settings.", 'start': 5285.508, 'duration': 7.35}, {'end': 5294.239, 'text': "Views, that's what I'm looking for.", 'start': 5293.058, 'duration': 1.181}, {'end': 5295.901, 'text': 'Views, OK.', 'start': 5295.16, 'duration': 0.741}, {'end': 5298.443, 'text': "So let's go ahead and create a new view.", 'start': 5296.421, 'duration': 2.022}, {'end': 5301.787, 'text': 'And this is going to be called Homepage.', 'start': 5299.264, 'duration': 2.523}, {'end': 5305.811, 'text': "So Homepage, because that's where it's going to be displayed at.", 'start': 5302.667, 'duration': 3.144}, {'end': 5308.373, 'text': 'It is a slideshow.', 'start': 5306.932, 'duration': 1.441}, {'end': 5311.696, 'text': "And let's do random.", 'start': 5309.394, 'duration': 2.302}, {'end': 5314.339, 'text': "It's going to view all of them.", 'start': 5312.777, 'duration': 1.562}], 'summary': 'Installing and setting up strong testimonials for a slideshow on the homepage.', 'duration': 69.082, 'max_score': 5245.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg5245257.jpg'}, {'end': 5477.837, 'src': 'embed', 'start': 5445.057, 'weight': 9, 'content': [{'end': 5449.578, 'text': "there's like a parallax background, like a light colored background here.", 'start': 5445.057, 'duration': 4.521}, {'end': 5460.481, 'text': "so if we go here and we're going to edit this, go to style, do our background, and i think i have an image for that as well.", 'start': 5449.578, 'duration': 10.903}, {'end': 5461.481, 'text': 'maybe this one would work.', 'start': 5460.481, 'duration': 1}, {'end': 5464.509, 'text': 'So insert that.', 'start': 5463.248, 'duration': 1.261}, {'end': 5474.415, 'text': "I think that we're also going to need some padding on the top and the bottom of it.", 'start': 5466.19, 'duration': 8.225}, {'end': 5477.837, 'text': "So let's go to Advanced.", 'start': 5475.896, 'duration': 1.941}], 'summary': 'Adjusting parallax background with image and padding for top and bottom.', 'duration': 32.78, 'max_score': 5445.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg5445057.jpg'}, {'end': 5735.018, 'src': 'embed', 'start': 5706.861, 'weight': 7, 'content': [{'end': 5713.224, 'text': 'so normally, in order to create a custom post type, I would code it using something like type rocket, but I think,', 'start': 5706.861, 'duration': 6.363}, {'end': 5717.589, 'text': "in order to make this a little bit more accessible for most people, I I'm going to use a plugin.", 'start': 5713.224, 'duration': 4.365}, {'end': 5725.973, 'text': "The plugins that I'm going to use is, I think one of them is called Advanced Custom Fields and then Custom Post Type UI.", 'start': 5718.47, 'duration': 7.503}, {'end': 5730.435, 'text': 'So Custom Post Type UI.', 'start': 5726.494, 'duration': 3.941}, {'end': 5735.018, 'text': "And let's go ahead and install that.", 'start': 5730.455, 'duration': 4.563}], 'summary': 'To make custom post type creation accessible, a plugin like advanced custom fields and custom post type ui will be used instead of coding, making it more user-friendly.', 'duration': 28.157, 'max_score': 5706.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg5706861.jpg'}], 'start': 4109.488, 'title': 'Website design and customization', 'summary': "Covers adding spacing and updating icons with css, troubleshooting css alignment issues, adjusting layout and styling, web design elements, building practice areas, creating a testimonial slider, and customizing website design. it involves adding specific pixel measurements, a new class 'hero cta', and discussing custom post types and meta boxes for post types.", 'chapters': [{'end': 4146.316, 'start': 4109.488, 'title': 'Add spacing and update icons with css', 'summary': 'Covers adding 10 pixels of spacing around the boxes and updating the icons using css.', 'duration': 36.828, 'highlights': ['Adding 10 pixels of spacing around the boxes to ensure they do not touch each other.', 'Updating the icons using CSS to position them accordingly.']}, {'end': 4423.14, 'start': 4148.268, 'title': 'Troubleshooting css alignment and class addition', 'summary': "Involves troubleshooting css alignment issues with a 1800 pixel width and 20 pixel width, as well as adding a new class 'hero cta' to improve the visual appearance of the website.", 'duration': 274.872, 'highlights': ['Troubleshooting CSS alignment issues with 1800 pixel width and 20 pixel width. The speaker encounters alignment issues with a 1800 pixel width and 20 pixel width, aiming to fix the layout and visual appearance of the website.', "Adding a new class 'hero CTA' to improve the visual appearance of the website. The speaker plans to add a new class 'hero CTA' to enhance the visual appearance of the website, focusing on improving the visual layout of specific sections."]}, {'end': 4757.916, 'start': 4423.14, 'title': 'Adjusting layout and styling', 'summary': 'Discusses adjusting the layout and styling of elements, including using position, margin, and typography properties to achieve desired visual outcomes, and adding sections with columns, text, and images.', 'duration': 334.776, 'highlights': ['Using position and top properties to adjust the vertical position of elements, achieving the desired layout. Positioning icons off the screen by adjusting top property, e.g., from -50 to -40 pixels.', 'Applying margin-top property to create spacing for a specific element, adjusting the value until the desired outcome is achieved. Setting margin-top property to 50 pixels and adjusting it to 30 pixels.', 'Adjusting typography properties to modify the size of text for improved visual appearance, with consideration for orphan characters. Modifying typography to set text size to 25 pixels for better appearance.', 'Creating a section with two columns, setting specific width for one column, adding text and image content, and planning for future use of short code for custom post type content. Creating a section with two columns, setting one column to 38% width, adding text and image content, and planning for future use of short code for custom post type content.']}, {'end': 5002.417, 'start': 4759.437, 'title': 'Web design testimonial and separator', 'summary': 'Discusses the design elements of a website, including adding a testimonial and separator with specific styling details and the rationale behind them.', 'duration': 242.98, 'highlights': ['The chapter explains the process of adding a separator with a lighter color and a testimonial section with specific styling details such as centered text, primary topography, and margin adjustments.', 'It details the importance of differentiation between content types and provides insights based on previous website design experience.', 'The chapter mentions the intention to add a testimonial slider and emphasizes the importance of understanding common features in similar websites.']}, {'end': 5445.057, 'start': 5004.167, 'title': 'Building practice areas and testimonial slider', 'summary': 'Details the process of building practice areas with different colors and creating a testimonial slider using the strong testimonials plugin, including setting up views, generating a short code, and adding testimonials.', 'duration': 440.89, 'highlights': ['The process of building practice areas with different colors is detailed, including duplicating, dragging, deleting, and setting background colors and text styles. The chapter provides a step-by-step guide on building practice areas with different colors, emphasizing the actions of duplicating, dragging, and setting background colors and text styles.', 'The decision to use the Strong Testimonials plugin for creating a testimonial slider is explained, highlighting the ease of use and the ability to generate a short code. The rationale behind using the Strong Testimonials plugin for the testimonial slider is discussed, emphasizing its ease of use and the process of generating a short code.', 'The process of setting up views for the testimonial slider, including options such as slideshow type, navigation, pagination, and template, is outlined. The chapter explains the setup of views for the testimonial slider, detailing options such as slideshow type, navigation, pagination, and template.', 'The addition of a testimonial using the Strong Testimonials plugin is demonstrated, covering the steps of adding a new testimonial, providing details such as title, text, and company name. The process of adding a testimonial using the Strong Testimonials plugin is demonstrated, covering the steps of adding a new testimonial and providing details such as title, text, and company name.']}, {'end': 6006.389, 'start': 5445.057, 'title': 'Customizing website design and implementing custom post types', 'summary': 'Discusses customizing the website design by adding a parallax background with padding, applying color overlay, and updating testimonial views. additionally, it covers the process of implementing custom post types using plugins and creating custom meta boxes for the post types.', 'duration': 561.332, 'highlights': ['Adding parallax background and color overlay The speaker demonstrates adding a parallax background with padding and color overlay to create a professional-looking design for the home page.', 'Updating testimonial views The speaker explains the process of changing the color in testimonial views, including identifying the class, copying the color code, and applying the color and background using the visual editor.', 'Implementing custom post types using plugins The chapter discusses using plugins like Custom Post Type UI and Advanced Custom Fields to create custom post types and meta boxes, making the process more accessible for users.']}], 'duration': 1896.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg4109488.jpg', 'highlights': ['Creating a section with two columns, setting one column to 38% width, adding text and image content, and planning for future use of short code for custom post type content.', 'The process of setting up views for the testimonial slider, including options such as slideshow type, navigation, pagination, and template, is outlined.', "Adding a new class 'hero CTA' to improve the visual appearance of the website.", 'Using position and top properties to adjust the vertical position of elements, achieving the desired layout.', 'The process of building practice areas with different colors is detailed, including duplicating, dragging, deleting, and setting background colors and text styles.', 'The chapter explains the process of adding a separator with a lighter color and a testimonial section with specific styling details such as centered text, primary topography, and margin adjustments.', 'The decision to use the Strong Testimonials plugin for creating a testimonial slider is explained, highlighting the ease of use and the ability to generate a short code.', 'The chapter discusses using plugins like Custom Post Type UI and Advanced Custom Fields to create custom post types and meta boxes, making the process more accessible for users.', 'Updating the icons using CSS to position them accordingly.', 'Adding parallax background and color overlay The speaker demonstrates adding a parallax background with padding and color overlay to create a professional-looking design for the home page.']}, {'end': 6954.057, 'segs': [{'end': 6068.555, 'src': 'embed', 'start': 6006.789, 'weight': 0, 'content': [{'end': 6012.934, 'text': 'And then the next part based on again this we want to have the blurb that goes here.', 'start': 6006.789, 'duration': 6.145}, {'end': 6016.616, 'text': "so let's create a new field.", 'start': 6014.135, 'duration': 2.481}, {'end': 6025.817, 'text': "we're going to call it blurb, and then that's going to just give us the ability to add a text area where they can add in some text.", 'start': 6016.616, 'duration': 9.201}, {'end': 6034.179, 'text': "I'm also going to make it a required field as well, and I don't think we need anything else for this.", 'start': 6025.817, 'duration': 8.362}, {'end': 6036.239, 'text': 'so that should be it.', 'start': 6034.179, 'duration': 2.06}, {'end': 6038.679, 'text': "let's just publish this out now.", 'start': 6036.239, 'duration': 2.44}, {'end': 6047.223, 'text': 'so now, if we go back to practice areas and we go to add new Now we have an icon and a blurb that they have to put in in order to submit something.', 'start': 6038.679, 'duration': 8.544}, {'end': 6050.805, 'text': 'So let me create a sample practice area.', 'start': 6048.083, 'duration': 2.722}, {'end': 6061.094, 'text': "So let's call this one service one and then I'm just going to grab some dummy text for the description.", 'start': 6050.826, 'duration': 10.268}, {'end': 6065.914, 'text': 'come on, let me copy it.', 'start': 6064.633, 'duration': 1.281}, {'end': 6068.555, 'text': "okay, it's not gonna.", 'start': 6065.914, 'duration': 2.641}], 'summary': "Created new 'blurb' field for practice areas, set as required. added icon. published changes.", 'duration': 61.766, 'max_score': 6006.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6006789.jpg'}, {'end': 6243.157, 'src': 'embed', 'start': 6124.362, 'weight': 3, 'content': [{'end': 6133.825, 'text': 'we want to see how this is producing itself here so that we can duplicate it, and we also want to create this shortcode over here.', 'start': 6124.362, 'duration': 9.463}, {'end': 6142.567, 'text': "so i'm going to switch over to visual studio and we're going to create shortcodes.", 'start': 6133.825, 'duration': 8.742}, {'end': 6146.968, 'text': "so let's say, inside of visual studio, inside of this theme,", 'start': 6142.567, 'duration': 4.401}, {'end': 6156.482, 'text': "we're going to create a new folder called shortcodes And then inside of this folder we're going to create a file called practice areas.", 'start': 6146.968, 'duration': 9.514}, {'end': 6167.95, 'text': 'And this is just for me to show you how to split it out so that you can create your functionality elsewhere and then come back to it.', 'start': 6159.424, 'duration': 8.526}, {'end': 6176.747, 'text': "So let's go ahead and create a simple short code that displays those links that we were looking for.", 'start': 6169.224, 'duration': 7.523}, {'end': 6190.892, 'text': "So let's do function, and let's call it practice areas link.", 'start': 6177.567, 'duration': 13.325}, {'end': 6195.053, 'text': "And then it's just going to be a function.", 'start': 6193.853, 'duration': 1.2}, {'end': 6196.954, 'text': "We're going to add our PHP up here.", 'start': 6195.073, 'duration': 1.881}, {'end': 6204.86, 'text': "and then, just at the end of it, we're going to create the actual shortcode for it.", 'start': 6200.618, 'duration': 4.242}, {'end': 6211.303, 'text': "so we're going to add shortcode and then we're going to name that shortcode.", 'start': 6204.86, 'duration': 6.443}, {'end': 6215.425, 'text': 'let me see what i named it here practice areas.', 'start': 6211.303, 'duration': 4.122}, {'end': 6216.745, 'text': "actually, let's call it the same thing.", 'start': 6215.425, 'duration': 1.32}, {'end': 6222.348, 'text': "we called it up here, so practice area, link, and then we're going to pass the function.", 'start': 6216.745, 'duration': 5.603}, {'end': 6227.684, 'text': "And that's how you create a short code.", 'start': 6224.441, 'duration': 3.243}, {'end': 6236.812, 'text': "So inside of the short code, we're going to use some WordPress coding in order to grab a list of all of the practice areas.", 'start': 6228.345, 'duration': 8.467}, {'end': 6238.973, 'text': "So let's create a query.", 'start': 6237.612, 'duration': 1.361}, {'end': 6243.157, 'text': "And it's going to be new WP underscore query.", 'start': 6238.993, 'duration': 4.164}], 'summary': 'Creating a shortcode in visual studio to display practice area links using wordpress coding.', 'duration': 118.795, 'max_score': 6124.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6124362.jpg'}, {'end': 6669.982, 'src': 'embed', 'start': 6638.402, 'weight': 9, 'content': [{'end': 6643.564, 'text': "So the issue is that we created this file, but we didn't actually call it anywhere.", 'start': 6638.402, 'duration': 5.162}, {'end': 6650.906, 'text': 'So inside of our functions.php, we are going to create our shortcodes reference down here.', 'start': 6643.924, 'duration': 6.982}, {'end': 6655.568, 'text': "Shortcodes And then we're going to do require once.", 'start': 6652.307, 'duration': 3.261}, {'end': 6666.538, 'text': 'Shortcodes slash practice dash areas dot php.', 'start': 6658.228, 'duration': 8.31}, {'end': 6669.982, 'text': "So it doesn't matter how the file is created.", 'start': 6667.259, 'duration': 2.723}], 'summary': 'A file was created but not called, resolved by creating shortcodes and referencing the file in functions.php.', 'duration': 31.58, 'max_score': 6638.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6638402.jpg'}, {'end': 6757.055, 'src': 'embed', 'start': 6719.51, 'weight': 10, 'content': [{'end': 6721.251, 'text': "So I'm going to copy this element.", 'start': 6719.51, 'duration': 1.741}, {'end': 6724.653, 'text': "Then I'm going to switch back to Visual Studio.", 'start': 6722.592, 'duration': 2.061}, {'end': 6732.669, 'text': 'And inside of our practice areas, we are going to create a new short code.', 'start': 6726.713, 'duration': 5.956}, {'end': 6741.785, 'text': "So let's go create function practice areas.", 'start': 6733.971, 'duration': 7.814}, {'end': 6753.112, 'text': "And then in here, I'm just going to paste the div code right now so that we can reference it in just a minute.", 'start': 6745.848, 'duration': 7.264}, {'end': 6757.055, 'text': "And then I'm also going to copy over this because it's the same thing.", 'start': 6753.693, 'duration': 3.362}], 'summary': 'Creating new shortcode for practice areas in visual studio.', 'duration': 37.545, 'max_score': 6719.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6719510.jpg'}, {'end': 6851.769, 'src': 'embed', 'start': 6793.192, 'weight': 11, 'content': [{'end': 6805.534, 'text': 'so we got div class equals Elementor dash row and then on the outside of it.', 'start': 6793.192, 'duration': 12.342}, {'end': 6813.438, 'text': "After this, we're going to have the closing of that div.", 'start': 6807.37, 'duration': 6.068}, {'end': 6824.131, 'text': "Whenever we get ready to close it, since we're going to be doing this dynamically, we are going to have to, let's change this real quick.", 'start': 6816.525, 'duration': 7.606}, {'end': 6830.176, 'text': "So when we're doing this, we're going to have to see whether or not it needs to add a new row after it gets to the third column.", 'start': 6824.351, 'duration': 5.825}, {'end': 6835.78, 'text': "Because if we don't, it'll just keep going and going and going on one line, which is not what we want.", 'start': 6830.516, 'duration': 5.264}, {'end': 6845.628, 'text': "So there's some code in PHP that you can use that will allow you to check to see if a number equals another number.", 'start': 6836.02, 'duration': 9.608}, {'end': 6851.769, 'text': 'So let me show you that real quick.', 'start': 6850.347, 'duration': 1.422}], 'summary': 'Using php to dynamically check and add new rows after every third column.', 'duration': 58.577, 'max_score': 6793.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6793192.jpg'}], 'start': 6006.789, 'title': 'Customizing wordpress shortcodes', 'summary': 'Discusses customizing wordpress shortcodes, including adding a blurb field in practice areas, creating shortcodes, troubleshooting, and recreating elementor div class for custom code implementation.', 'chapters': [{'end': 6098.289, 'start': 6006.789, 'title': 'Adding blurb field in practice areas', 'summary': 'Discusses adding a blurb field in practice areas, making it a required field and creating a new practice area with an icon and blurb, allowing text input and submission.', 'duration': 91.5, 'highlights': ["Creating a new field called 'blurb' for adding text in practice areas.", "Making the 'blurb' field a required field for submission.", "Adding an icon and a blurb for a new practice area named 'service one'."]}, {'end': 6337.94, 'start': 6098.289, 'title': 'Creating shortcodes in wordpress', 'summary': 'Discusses creating a shortcode in wordpress to display practice areas, explaining the process of creating a shortcode and using wordpress coding to grab a list of practice areas and display them.', 'duration': 239.651, 'highlights': ['Explaining the process of creating a shortcode in WordPress and using WordPress coding to grab a list of practice areas and display them', "Demonstrating the steps to create a new folder called 'shortcodes' and a file called 'practice areas' in the theme", "Creating a shortcode function called 'practice areas link' and adding the actual shortcode for it", 'Using WordPress coding to create a query that grabs a list of all published practice areas and ordering them by menu order']}, {'end': 6669.982, 'start': 6342.334, 'title': 'Wordpress shortcode implementation', 'summary': 'Explains the process of creating and troubleshooting a wordpress shortcode, including adding links, customizing titles, and resolving issues with the shortcode implementation.', 'duration': 327.648, 'highlights': ['Explaining the process of creating and troubleshooting a WordPress shortcode Process of creating and troubleshooting a WordPress shortcode', 'Adding links and customizing titles within the shortcode Adding links, customizing titles', 'Resolving issues with the shortcode implementation Resolving issues with the shortcode implementation']}, {'end': 6954.057, 'start': 6670.122, 'title': 'Creating elementor div class', 'summary': 'Involves creating a new shortcode by copying elementor div class and dynamically adding closing divs based on the number of columns, aiming to recreate the code outside elementor.', 'duration': 283.935, 'highlights': ["Creating a new shortcode function 'practice areas' to recreate Elementor div class in real time.", 'Dynamically adding closing divs based on the number of columns to prevent continuous display on one line.', 'Using PHP code to check if a number equals another number and start a new div if it equals three.']}], 'duration': 947.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6006789.jpg', 'highlights': ["Creating a new field called 'blurb' for adding text in practice areas.", "Making the 'blurb' field a required field for submission.", "Adding an icon and a blurb for a new practice area named 'service one'.", 'Explaining the process of creating a shortcode in WordPress and using WordPress coding to grab a list of practice areas and display them.', "Demonstrating the steps to create a new folder called 'shortcodes' and a file called 'practice areas' in the theme.", "Creating a shortcode function called 'practice areas link' and adding the actual shortcode for it.", 'Using WordPress coding to create a query that grabs a list of all published practice areas and ordering them by menu order.', 'Explaining the process of creating and troubleshooting a WordPress shortcode.', 'Adding links and customizing titles within the shortcode.', 'Resolving issues with the shortcode implementation.', "Creating a new shortcode function 'practice areas' to recreate Elementor div class in real time.", 'Dynamically adding closing divs based on the number of columns to prevent continuous display on one line.', 'Using PHP code to check if a number equals another number and start a new div if it equals three.']}, {'end': 8611.746, 'segs': [{'end': 7106.353, 'src': 'embed', 'start': 7075.838, 'weight': 0, 'content': [{'end': 7081.521, 'text': "So I'm just going to recreate the look of it without actually doing the Elementor design.", 'start': 7075.838, 'duration': 5.683}, {'end': 7084.423, 'text': 'OK, so let me tell you what I did so far.', 'start': 7081.541, 'duration': 2.882}, {'end': 7086.304, 'text': 'So first, we need Elementor columns.', 'start': 7084.483, 'duration': 1.821}, {'end': 7089.887, 'text': "because that's going to structure it the way it has three columns.", 'start': 7086.926, 'duration': 2.961}, {'end': 7096.43, 'text': "but this we're going to create that little box that goes around it, that is the the darker color,", 'start': 7089.887, 'duration': 6.543}, {'end': 7106.353, 'text': "and then inside of that we want to make sure that there's padding and we want to make sure that we can position the content of the icon box and everything to go up.", 'start': 7096.43, 'duration': 9.923}], 'summary': 'Recreating the design using elementor columns, with 3 columns and a darker color box, ensuring padding and content positioning.', 'duration': 30.515, 'max_score': 7075.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg7075838.jpg'}, {'end': 7557.234, 'src': 'embed', 'start': 7522.125, 'weight': 1, 'content': [{'end': 7526.806, 'text': "And then let's do a border radius of 50%.", 'start': 7522.125, 'duration': 4.681}, {'end': 7527.946, 'text': 'So it makes it a circle.', 'start': 7526.806, 'duration': 1.14}, {'end': 7531.527, 'text': 'And then we align that center.', 'start': 7527.966, 'duration': 3.561}, {'end': 7536.368, 'text': "And everything that I'm doing will become clear in just a second.", 'start': 7534.007, 'duration': 2.361}, {'end': 7542.629, 'text': "Let's do display inline block.", 'start': 7538.928, 'duration': 3.701}, {'end': 7548.83, 'text': "And let's make the width of the icon itself 80 pixels.", 'start': 7544.889, 'duration': 3.941}, {'end': 7552.732, 'text': "And we'll verify that against what we already have there in just a second.", 'start': 7549.89, 'duration': 2.842}, {'end': 7557.234, 'text': 'All right, so let me show you what this looks like.', 'start': 7554.313, 'duration': 2.921}], 'summary': 'Styling a circle icon with 50% border radius and 80-pixel width.', 'duration': 35.109, 'max_score': 7522.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg7522125.jpg'}, {'end': 8143.309, 'src': 'embed', 'start': 8106.901, 'weight': 2, 'content': [{'end': 8113.087, 'text': "Now we're going to do 6.", 'start': 8106.901, 'duration': 6.186}, {'end': 8117.269, 'text': "Six And then let's select user with tie.", 'start': 8113.087, 'duration': 4.182}, {'end': 8119.369, 'text': 'Publish OK.', 'start': 8117.969, 'duration': 1.4}, {'end': 8122.931, 'text': 'So now, if we refresh this, we should have six of them.', 'start': 8119.649, 'duration': 3.282}, {'end': 8129.473, 'text': 'And we also have six of them here because this is also pulling from a short code as well.', 'start': 8124.951, 'duration': 4.522}, {'end': 8139.566, 'text': "I think that with the custom post type, we've created it, we've edited, we've allowed the short code.", 'start': 8131.5, 'duration': 8.066}, {'end': 8143.309, 'text': "So let's say like right now they don't know what order these are in.", 'start': 8139.666, 'duration': 3.643}], 'summary': 'Implemented functionality to display 6 items using custom post type and short code.', 'duration': 36.408, 'max_score': 8106.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg8106901.jpg'}, {'end': 8198.021, 'src': 'embed', 'start': 8161.964, 'weight': 3, 'content': [{'end': 8170.109, 'text': 'then, at the bottom of our practice areas, we are going to add some wordpress functionality to create these columns.', 'start': 8161.964, 'duration': 8.145}, {'end': 8186.138, 'text': 'so first thing we need to do is add filter, manage, and then this is the shortcode, not shortcode but the custom post type permalink.', 'start': 8170.109, 'duration': 16.029}, {'end': 8194.599, 'text': "so it's going to be practice dash areas, underscore post columns.", 'start': 8186.138, 'duration': 8.461}, {'end': 8198.021, 'text': "And then we're going to create a function.", 'start': 8196.58, 'duration': 1.441}], 'summary': 'Adding wordpress functionality to create columns in practice areas.', 'duration': 36.057, 'max_score': 8161.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg8161964.jpg'}], 'start': 6956.217, 'title': 'Improving html code and design customization', 'summary': 'Discusses cleaning up html code, creating custom elementor designs, styling circular icons, creating custom post types, and adding order to arrays in coding, with a focus on code clarity, design customization, and post organization.', 'chapters': [{'end': 7019.502, 'start': 6956.217, 'title': 'Cleaning up html code', 'summary': 'Discusses cleaning up html code by removing unnecessary elements and data, focusing on retaining specific elements and columns and improving code clarity.', 'duration': 63.285, 'highlights': ['Removing unnecessary background data and custom IDs to improve code clarity and efficiency', 'Retaining specific elements and columns while discarding irrelevant data for improved code functionality']}, {'end': 7485.958, 'start': 7019.502, 'title': 'Creating custom class for elementor design', 'summary': 'Discusses creating a custom class to mimic elementor design, including creating a practice-area box with homepage-services, structuring elementor columns, positioning content and icon box, and using short codes for advanced custom fields.', 'duration': 466.456, 'highlights': ['Creating a custom class to mimic Elementor design The speaker discusses creating a custom class to mimic the design of Elementor, avoiding the use of Elementor directly.', 'Structuring Elementor columns and creating practice-area box with homepage-services The chapter explains the process of structuring Elementor columns and creating a practice-area box with homepage-services to achieve a specific design layout.', 'Positioning content and icon box with padding The speaker talks about the importance of positioning content and icon box with padding to achieve the desired design.', 'Using short codes for advanced custom fields The chapter discusses using short codes for advanced custom fields to call and utilize specific content within the code.']}, {'end': 7983.298, 'start': 7486.639, 'title': 'Styling circular icons and multiple box wrapping', 'summary': 'Covers the process of styling circular icons, adjusting padding and width to achieve the desired circle size, modifying background color and content positioning, and duplicating a practice area box to ensure proper wrapping using php code.', 'duration': 496.659, 'highlights': ['The process of styling circular icons involves setting the icon color to white, adjusting the font size to 33 pixels, applying a border radius of 50% to create a circle, and setting the width of the icon to 80 pixels. The icon is styled with a white color, a font size of 33 pixels, a border radius of 50% to create a circle, and a width of 80 pixels.', 'The adjustment of padding and width is necessary to achieve the desired circle size, with a specific focus on dynamic padding and fine-tuning the dimensions to create the circular icon. The padding and width are adjusted to fine-tune the dimensions and achieve the desired circular icon size.', 'Modifying the background color and adjusting padding and margin for the practice area box, including changing the color from text to secondary and ensuring proper content positioning for a visually appealing display. The background color is modified, and padding and margin are adjusted for the practice area box, with a focus on proper content positioning and color change from text to secondary.', 'Duplicating a practice area box and utilizing a plugin for ease, renaming and editing the duplicate to ensure proper display and wrapping of multiple boxes using PHP code. A practice area box is duplicated and edited using a plugin to ensure proper wrapping of multiple boxes with PHP code.']}, {'end': 8271.512, 'start': 7983.298, 'title': 'Creating custom post types and columns', 'summary': 'Demonstrates the creation of custom post types and columns in wordpress, where six custom posts are created with specific ids and icons, and columns are added to display the post order and other default columns.', 'duration': 288.214, 'highlights': ['Six custom posts are created with specific IDs and icons. The chapter demonstrates the creation of six custom posts with order IDs of 1 to 6 and specific icons such as puzzle piece, user with tie, and question mark.', 'Columns are added to display the post order and other default columns. The process involves adding custom columns to display the post order and other default columns like the checkbox and title.', "Function 'practice areas columns' is created to restructure the columns. A function named 'practice areas columns' is created to restructure the default columns and add custom functionality to the WordPress post type."]}, {'end': 8611.746, 'start': 8271.652, 'title': 'Adding order to array', 'summary': "Details the process of adding an 'order' variable to an array in a coding context, involving functions, filters, and actions, ultimately enabling the sorting of values within the array.", 'duration': 340.094, 'highlights': ["The process involves creating a new variable 'order' to indicate the order of items in the array.", "Functions such as 'add_filter' and 'add_action' are utilized to manipulate the array and enable sorting functionality.", "The 'order' variable allows for sorting the values within the array, enhancing its functionality and usability.", "The chapter also involves using 'global post' to gather necessary information for the array manipulation."]}], 'duration': 1655.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg6956217.jpg', 'highlights': ['Creating custom class to mimic Elementor design and structuring Elementor columns', 'Styling circular icons with specific dimensions and adjusting padding and width', 'Creating six custom posts with specific IDs and icons, adding custom columns', "Utilizing functions like 'add_filter' and 'add_action' to manipulate and sort arrays"]}, {'end': 9601.142, 'segs': [{'end': 8685.321, 'src': 'embed', 'start': 8647.272, 'weight': 1, 'content': [{'end': 8651.075, 'text': "which I think we'd just be able to use that same short code that we just created for this page.", 'start': 8647.272, 'duration': 3.803}, {'end': 8655.297, 'text': "Let's go ahead and add that to our menu items.", 'start': 8651.835, 'duration': 3.462}, {'end': 8658.709, 'text': 'So practice areas.', 'start': 8657.148, 'duration': 1.561}, {'end': 8666.652, 'text': "No, let's just do a main link to them.", 'start': 8664.832, 'duration': 1.82}, {'end': 8673.476, 'text': "So let's do custom links and then slash practice areas.", 'start': 8667.493, 'duration': 5.983}, {'end': 8679.518, 'text': "And I'm in the wrong menu.", 'start': 8678.558, 'duration': 0.96}, {'end': 8681.579, 'text': 'Let me copy this so I can rewrite it again.', 'start': 8679.898, 'duration': 1.681}, {'end': 8685.321, 'text': "Let's go to the header menu, not the footer.", 'start': 8681.599, 'duration': 3.722}], 'summary': 'Creating and adding a custom link to the header menu for practice areas.', 'duration': 38.049, 'max_score': 8647.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg8647272.jpg'}, {'end': 8799.85, 'src': 'embed', 'start': 8758.846, 'weight': 0, 'content': [{'end': 8761.708, 'text': 'in order to make it where it reacts like Elementor.', 'start': 8758.846, 'duration': 2.862}, {'end': 8765.47, 'text': "So what we're going to do is actually edit this page with Elementor.", 'start': 8761.748, 'duration': 3.722}, {'end': 8767.772, 'text': "So let's go pages.", 'start': 8766.491, 'duration': 1.281}, {'end': 8782.715, 'text': 'add new and this is gonna be practice areas and then here only thing we need to do is just add that shortcode that we created,', 'start': 8769.551, 'duration': 13.164}, {'end': 8788.857, 'text': 'which was what do we call it practice underscore areas.', 'start': 8782.715, 'duration': 6.142}, {'end': 8795.347, 'text': "So I'm going to do it this way", 'start': 8791.443, 'duration': 3.904}, {'end': 8799.85, 'text': "So let's do short code practice areas.", 'start': 8795.387, 'duration': 4.463}], 'summary': "Edit page with elementor, add shortcode 'practice_areas' to 'practice areas' page.", 'duration': 41.004, 'max_score': 8758.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg8758846.jpg'}, {'end': 9227.878, 'src': 'embed', 'start': 9190.563, 'weight': 5, 'content': [{'end': 9202.689, 'text': "Okay, so what we need to do is create a new page, or a new file, and we're going to call it single-practice-areas.php.", 'start': 9190.563, 'duration': 12.126}, {'end': 9207.832, 'text': "And then for right now, I'm just going to comment out the code that I pasted.", 'start': 9203.87, 'duration': 3.962}, {'end': 9213.935, 'text': 'Throw in some PHP so I can comment this.', 'start': 9207.852, 'duration': 6.083}, {'end': 9221.096, 'text': "I don't know what's wrong with my typing right now.", 'start': 9219.616, 'duration': 1.48}, {'end': 9222.937, 'text': 'OK All right.', 'start': 9221.116, 'duration': 1.821}, {'end': 9224.357, 'text': "So let's clean this up a little bit.", 'start': 9222.957, 'duration': 1.4}, {'end': 9226.478, 'text': 'All right.', 'start': 9226.218, 'duration': 0.26}, {'end': 9227.878, 'text': "Let's not worry about that right now.", 'start': 9226.518, 'duration': 1.36}], 'summary': 'Creating a new file named single-practice-areas.php and adding php comments.', 'duration': 37.315, 'max_score': 9190.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9190563.jpg'}, {'end': 9408.411, 'src': 'embed', 'start': 9376.997, 'weight': 3, 'content': [{'end': 9378.798, 'text': "and then we'll just kind of continue from there.", 'start': 9376.997, 'duration': 1.801}, {'end': 9387.201, 'text': 'Okay, so whenever you create a page, we want to make sure that it pulls content from WordPress.', 'start': 9379.438, 'duration': 7.763}, {'end': 9393.463, 'text': "So there's a thing we're going to have to wrap our entire HTML inside of and that's going to be the while loop for PHP.", 'start': 9387.241, 'duration': 6.222}, {'end': 9397.085, 'text': "So we're going to do PHP while have underscore post.", 'start': 9393.483, 'duration': 3.602}, {'end': 9402.687, 'text': "And then if it does, we're going to get the post.", 'start': 9398.945, 'duration': 3.742}, {'end': 9408.411, 'text': "And then it's going to display the information that we want inside of it.", 'start': 9405.47, 'duration': 2.941}], 'summary': 'Creating a page to pull content from wordpress using php while loop.', 'duration': 31.414, 'max_score': 9376.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9376997.jpg'}, {'end': 9579.183, 'src': 'embed', 'start': 9552.12, 'weight': 4, 'content': [{'end': 9558.023, 'text': 'So we do want it to use the container and use the gap default column width.', 'start': 9552.12, 'duration': 5.903}, {'end': 9559.324, 'text': "And then we're going to have our row.", 'start': 9558.244, 'duration': 1.08}, {'end': 9562.186, 'text': "And then on this one, instead of being 50, we're going to make it 75.", 'start': 9559.804, 'duration': 2.382}, {'end': 9564.187, 'text': "And we're going to make this one 25.", 'start': 9562.186, 'duration': 2.001}, {'end': 9568.189, 'text': "So that'll give us the 75% width and the 25% width.", 'start': 9564.187, 'duration': 4.002}, {'end': 9579.183, 'text': "Now, inside of this, we can get rid of this element element because we're not using that.", 'start': 9568.209, 'duration': 10.974}], 'summary': 'Setting container to default gap column width, with 75% and 25% widths.', 'duration': 27.063, 'max_score': 9552.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9552120.jpg'}], 'start': 8611.746, 'title': 'Setting up navigation links and page design, creating single practice areas page, and wordpress content integration', 'summary': 'Covers setting up navigation links and page design, creating a single practice areas page, and integrating wordpress content into html using php while loop, emphasizing flexibility, automatic updates, and page customization.', 'chapters': [{'end': 9090.59, 'start': 8611.746, 'title': 'Setting up navigation links and page design', 'summary': 'Covers setting up navigation links for practice areas and designing the archive and individual pages using elementor, emphasizing the use of shortcodes for flexibility and automatic updates.', 'duration': 478.844, 'highlights': ['Setting up navigation links for practice areas and adding a custom link to the header menu. The chapter details the process of adding a navigation link to the practice areas archive page by creating a custom link in the header menu, allowing easy access to the practice areas.', 'Configuring the practice areas page layout using Elementor and shortcodes for flexibility and automatic updates. The process of configuring the practice areas page layout using Elementor and shortcodes is explained, highlighting the benefits of flexibility and automatic updates for added services.', 'Designing the individual practice area page and setting up the layout with Elementor. The chapter discusses the need to design the individual practice area page and set up the layout using Elementor, emphasizing the creation of a standard page and its customization for the specific needs of the practice areas.']}, {'end': 9376.997, 'start': 9090.59, 'title': 'Creating single practice areas page', 'summary': "Covers the process of creating a single practice areas page, including inspecting the web page structure, creating a new file 'single-practice-areas.php', testing and editing the template, and customizing the page layout.", 'duration': 286.407, 'highlights': ['Inspecting the web page structure to identify the necessary elements and content for the single practice areas page.', "Creating a new file named 'single-practice-areas.php' and adding code to call default functions for WordPress to get the header and footer.", "Testing and editing the template to ensure proper display and functionality of the page's content.", 'Customizing the page layout by simplifying the code and adjusting the content framework for the single practice areas page.']}, {'end': 9601.142, 'start': 9376.997, 'title': 'Wordpress content integration and html structure', 'summary': 'Discusses the integration of wordpress content into html using php while loop, creating rows and columns, and modifying the structure for elementor, emphasizing the importance of staying within the container and adjusting column widths.', 'duration': 224.145, 'highlights': ['The chapter emphasizes the use of PHP while loop to pull content from WordPress, ensuring efficient integration of dynamic content into the HTML structure.', 'The importance of structuring rows and columns within the container is highlighted, with specific emphasis on adjusting column widths to 75% and 25% for effective layout design.', 'The significance of removing unnecessary elements such as data IDs and elements to streamline the HTML structure for better readability and functionality is emphasized.']}], 'duration': 989.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg8611746.jpg', 'highlights': ['Configuring the practice areas page layout using Elementor and shortcodes for flexibility and automatic updates.', 'Setting up navigation links for practice areas and adding a custom link to the header menu.', 'Designing the individual practice area page and setting up the layout with Elementor.', 'The chapter emphasizes the use of PHP while loop to pull content from WordPress, ensuring efficient integration of dynamic content into the HTML structure.', 'The importance of structuring rows and columns within the container is highlighted, with specific emphasis on adjusting column widths to 75% and 25% for effective layout design.', "Creating a new file named 'single-practice-areas.php' and adding code to call default functions for WordPress to get the header and footer."]}, {'end': 10523.538, 'segs': [{'end': 9650.679, 'src': 'embed', 'start': 9601.602, 'weight': 2, 'content': [{'end': 9604.504, 'text': 'And then inside of that, we have our column wrap and our widget wrap.', 'start': 9601.602, 'duration': 2.902}, {'end': 9607.185, 'text': "So I'm going to put on this side, we're going to say left.", 'start': 9605.044, 'duration': 2.141}, {'end': 9609.947, 'text': "And on this one, we're going to say right.", 'start': 9607.906, 'duration': 2.041}, {'end': 9617.011, 'text': "So that'll give us an idea of where we need to put our content at.", 'start': 9611.348, 'duration': 5.663}, {'end': 9622.874, 'text': "So let's switch back over to the browser here and refresh.", 'start': 9617.691, 'duration': 5.183}, {'end': 9626.639, 'text': "And now we have a left and a right that's inside of that container.", 'start': 9623.877, 'duration': 2.762}, {'end': 9630.603, 'text': 'So now we need to add a header.', 'start': 9628.561, 'duration': 2.042}, {'end': 9632.004, 'text': "And let's go back.", 'start': 9630.983, 'duration': 1.021}, {'end': 9633.625, 'text': "Let's go out of this.", 'start': 9632.424, 'duration': 1.201}, {'end': 9645.775, 'text': "And we're going to go back to the content that we have for these practice areas because we created a custom meta box for the blurb.", 'start': 9633.645, 'duration': 12.13}, {'end': 9650.679, 'text': 'We want to have it where it displays the title, the blurb, and then the information, and then a contact form.', 'start': 9645.975, 'duration': 4.704}], 'summary': 'Setting up column wraps and widget wraps for left and right content placement, adding a header and custom meta box for displaying title, blurb, information, and contact form.', 'duration': 49.077, 'max_score': 9601.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9601602.jpg'}, {'end': 9965.306, 'src': 'embed', 'start': 9930.943, 'weight': 3, 'content': [{'end': 9936.838, 'text': "but let's just say I don't want it to affect anything else.", 'start': 9930.943, 'duration': 5.895}, {'end': 9943.549, 'text': "that's inside of a column wrap, like it would add padding to the bottom of the site, if we just use that class.", 'start': 9936.838, 'duration': 6.711}, {'end': 9949.958, 'text': "All right, so let's do create a class over here.", 'start': 9945.852, 'duration': 4.106}, {'end': 9962.045, 'text': "Content. so that'll give us a class that we can pull from so single areas and then Content and then that wrap,", 'start': 9952.841, 'duration': 9.204}, {'end': 9965.306, 'text': "and then we're gonna add padding 10 pixels around it.", 'start': 9962.045, 'duration': 3.261}], 'summary': 'Creating a class to add 10 pixels of padding within a column wrap.', 'duration': 34.363, 'max_score': 9930.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9930943.jpg'}, {'end': 10089.07, 'src': 'embed', 'start': 10060.234, 'weight': 1, 'content': [{'end': 10061.495, 'text': "let's just leave that one as it is.", 'start': 10060.234, 'duration': 1.261}, {'end': 10070.518, 'text': "so let's get rid of this and save that, and let's open Chrome back up and do a refresh.", 'start': 10061.495, 'duration': 9.023}, {'end': 10073.019, 'text': 'alright. so now we have our header.', 'start': 10070.518, 'duration': 2.501}, {'end': 10074.539, 'text': 'h1 is a little different than our h2.', 'start': 10073.019, 'duration': 1.52}, {'end': 10076.92, 'text': 'it stands out a little bit more so.', 'start': 10074.539, 'duration': 2.381}, {'end': 10081.322, 'text': 'now we need to grab the list code that we added to the home page.', 'start': 10076.92, 'duration': 4.402}, {'end': 10084.203, 'text': 'so if we go back to the home page, we have this.', 'start': 10081.322, 'duration': 2.881}, {'end': 10089.07, 'text': "that's what we're going to display in um inside of the individual practice areas.", 'start': 10084.203, 'duration': 4.867}], 'summary': 'Adjustments made to header and list code for home page display.', 'duration': 28.836, 'max_score': 10060.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10060234.jpg'}, {'end': 10349.946, 'src': 'embed', 'start': 10297.411, 'weight': 0, 'content': [{'end': 10300.734, 'text': 'so we got fluent forms here.', 'start': 10297.411, 'duration': 3.323}, {'end': 10302.775, 'text': "so let's go ahead and install that.", 'start': 10300.734, 'duration': 2.041}, {'end': 10313.025, 'text': "It's taking its time.", 'start': 10312.264, 'duration': 0.761}, {'end': 10313.445, 'text': 'There we go.', 'start': 10313.065, 'duration': 0.38}, {'end': 10315.086, 'text': "OK So let's activate it.", 'start': 10313.785, 'duration': 1.301}, {'end': 10320.851, 'text': "And then we're going to go to Fluent Forms and create a form.", 'start': 10316.848, 'duration': 4.003}, {'end': 10323.233, 'text': "And we're just going to have a general contact form.", 'start': 10320.871, 'duration': 2.362}, {'end': 10327.21, 'text': 'Okay, so first name, last name, email, subject, your message.', 'start': 10324.608, 'duration': 2.602}, {'end': 10332.393, 'text': "So what we want to do that's going to be different than any other contact form that we do is that we're going to have,", 'start': 10327.45, 'duration': 4.943}, {'end': 10336.596, 'text': "where there's a hidden field that populates, which practice area they're on.", 'start': 10332.393, 'duration': 4.203}, {'end': 10341.019, 'text': "So whenever the client gets an email, it's going to get an email stating which page they were on.", 'start': 10336.616, 'duration': 4.403}, {'end': 10348.425, 'text': "So let's come over here and let's just do a regular simple text field.", 'start': 10341.92, 'duration': 6.505}, {'end': 10349.946, 'text': 'Put it up top.', 'start': 10349.205, 'duration': 0.741}], 'summary': 'Installing and activating fluent forms, creating a contact form with hidden field to capture the page the client was on.', 'duration': 52.535, 'max_score': 10297.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10297411.jpg'}, {'end': 10477.432, 'src': 'embed', 'start': 10442.162, 'weight': 4, 'content': [{'end': 10453.769, 'text': "Let's say you can complete the following form to request a consultation.", 'start': 10442.162, 'duration': 11.607}, {'end': 10463.567, 'text': "OK, so now let's go back to our Chrome and back over here to a single practice area.", 'start': 10455.444, 'duration': 8.123}, {'end': 10467.208, 'text': 'Refresh, and we have our consultation form.', 'start': 10463.787, 'duration': 3.421}, {'end': 10470.189, 'text': "I'm going to go ahead and center this in the Visual Studio code.", 'start': 10467.628, 'duration': 2.561}, {'end': 10471.03, 'text': "It's pretty easy to do.", 'start': 10470.249, 'duration': 0.781}, {'end': 10476.392, 'text': 'You just add a class of text align center.', 'start': 10471.05, 'duration': 5.342}, {'end': 10477.432, 'text': "Well, that's in using Bootstrap.", 'start': 10476.412, 'duration': 1.02}], 'summary': 'The transcript discusses adding a consultation form using bootstrap in visual studio code.', 'duration': 35.27, 'max_score': 10442.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10442162.jpg'}], 'start': 9601.602, 'title': 'Customizing web layout, troubleshooting, and adding contact form', 'summary': 'Covers customizing web layout by adding content sections, troubleshooting design issues, including adding 10 pixel padding and customizing header tags, and adding a contact form using fluent forms with detailed steps like installation, form creation, and customization.', 'chapters': [{'end': 9737.239, 'start': 9601.602, 'title': 'Customizing web layout and adding content', 'summary': 'Discusses customizing web layout by adding left and right content sections inside a container, and adding a header with title, blurb, information, and contact form to practice areas page.', 'duration': 135.637, 'highlights': ['Adding left and right content sections inside a container to customize web layout. Customizing web layout by adding distinct content sections for left and right.', 'Incorporating a header with title, blurb, and contact form to the practice areas page. Adding a header with title, blurb, and contact form to the practice areas page.']}, {'end': 10240.329, 'start': 9737.299, 'title': 'Web design troubleshooting', 'summary': 'Details the process of troubleshooting and correcting design issues on a website by adjusting padding and styling elements, including adding 10 pixel padding to a column wrap and customizing header tags to stand out, resulting in a visually enhanced web page.', 'duration': 503.03, 'highlights': ['Adding 10 pixel padding to a column wrap to ensure consistent spacing around content The chapter discusses adding 10 pixel padding to a column wrap to match the spacing around other content, ensuring consistent and visually appealing design.', 'Customizing header tags to stand out with specific styling, including color and font size adjustments It details the process of customizing header tags, such as h1 and h2, to stand out by adjusting the color and font size, resulting in visually enhanced headers.', 'Troubleshooting and correcting design issues on a web page in real-time The chapter describes the process of troubleshooting and correcting design issues on a web page in real-time while ensuring that the adjustments made do not affect other elements on the page.']}, {'end': 10523.538, 'start': 10241.09, 'title': 'Adding contact form with fluent forms', 'summary': 'Details the process of adding a contact form using the plugin fluent forms, highlighting the steps involved such as installation, form creation, and customization, as well as the purpose of adding a hidden field to populate the practice area in the received email, along with styling adjustments and form submission.', 'duration': 282.448, 'highlights': ['The chapter details the process of adding a contact form using the plugin Fluent Forms. The chapter begins with the process of adding a contact form using the plugin Fluent Forms and outlines the steps involved in the installation and activation of the plugin.', 'The purpose of adding a hidden field to populate the practice area in the received email is explained. The purpose of adding a hidden field to populate the practice area in the received email is explained, ensuring that the client receives an email stating which page they were on.', 'Steps for styling adjustments and form submission are discussed. The process of making styling adjustments, including centering the form and changing button color, as well as form submission, is discussed in the chapter.']}], 'duration': 921.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg9601602.jpg', 'highlights': ['Adding a contact form using the plugin Fluent Forms with detailed steps', 'Customizing header tags to stand out with specific styling', 'Adding left and right content sections inside a container to customize web layout', 'Adding 10 pixel padding to a column wrap to ensure consistent spacing around content', 'Troubleshooting and correcting design issues on a web page in real-time', 'The purpose of adding a hidden field to populate the practice area in the received email is explained', 'Steps for styling adjustments and form submission are discussed', 'Incorporating a header with title, blurb, and contact form to the practice areas page']}, {'end': 11590.757, 'segs': [{'end': 10554.595, 'src': 'embed', 'start': 10523.558, 'weight': 4, 'content': [{'end': 10525.038, 'text': "We're going to click on this.", 'start': 10523.558, 'duration': 1.48}, {'end': 10531.56, 'text': 'And default style is going to change to custom.', 'start': 10528.579, 'duration': 2.981}, {'end': 10535.601, 'text': 'The background color is going to be that color.', 'start': 10532.44, 'duration': 3.161}, {'end': 10536.721, 'text': 'Text is fine.', 'start': 10535.741, 'duration': 0.98}, {'end': 10539.182, 'text': 'Just do the border color, make it the same.', 'start': 10536.741, 'duration': 2.441}, {'end': 10543.023, 'text': 'And then whenever they go to hover, background color is going to be white.', 'start': 10539.942, 'duration': 3.081}, {'end': 10546.271, 'text': 'So this would kind of give it like a transparent look on it.', 'start': 10543.789, 'duration': 2.482}, {'end': 10548.732, 'text': 'All right.', 'start': 10548.432, 'duration': 0.3}, {'end': 10554.595, 'text': "So now let's save the form and refresh.", 'start': 10549.352, 'duration': 5.243}], 'summary': 'Changing default style to custom with specified colors and hover effect.', 'duration': 31.037, 'max_score': 10523.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10523558.jpg'}, {'end': 10660.052, 'src': 'embed', 'start': 10630.487, 'weight': 1, 'content': [{'end': 10635.256, 'text': "So whenever they get an email, it'll actually say that practice area sample one has been selected.", 'start': 10630.487, 'duration': 4.769}, {'end': 10637.576, 'text': 'Okay, all right.', 'start': 10636.195, 'duration': 1.381}, {'end': 10642.56, 'text': 'so now we have the practice area.', 'start': 10637.576, 'duration': 4.984}, {'end': 10648.143, 'text': 'archive page is done, the short codes for practice areas displayed on the home page,', 'start': 10642.56, 'duration': 5.583}, {'end': 10655.489, 'text': 'and then we also have the single page for the practice area with a custom content contact form.', 'start': 10648.143, 'duration': 7.346}, {'end': 10660.052, 'text': 'Okay, so I think the next thing that we want to do, let me go look at the design.', 'start': 10656.189, 'duration': 3.863}], 'summary': 'Completed tasks include practice area archive page, home page display, and single page with custom contact form.', 'duration': 29.565, 'max_score': 10630.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10630487.jpg'}, {'end': 10719.695, 'src': 'embed', 'start': 10686.307, 'weight': 3, 'content': [{'end': 10702.268, 'text': "okay, so now we need to go to our pages and inside of this we're going to edit the about us page with Elementor and here.", 'start': 10686.307, 'duration': 15.961}, {'end': 10705.489, 'text': "okay, so on this one, we don't need this anymore.", 'start': 10702.268, 'duration': 3.221}, {'end': 10706.99, 'text': "so let's go ahead and get rid of that.", 'start': 10705.489, 'duration': 1.501}, {'end': 10715.453, 'text': "the pretty much all of the internal pages are going to have a title, the content, and then it's just gonna do some other things.", 'start': 10706.99, 'duration': 8.463}, {'end': 10719.695, 'text': "so let's go ahead and add a title.", 'start': 10715.453, 'duration': 4.242}], 'summary': 'Editing the about us page with elementor by adding a title and removing unnecessary content.', 'duration': 33.388, 'max_score': 10686.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10686307.jpg'}, {'end': 11420.378, 'src': 'embed', 'start': 11387.366, 'weight': 0, 'content': [{'end': 11391.447, 'text': 'so once you have your template kind of set up, you can duplicate it for your single pages.', 'start': 11387.366, 'duration': 4.081}, {'end': 11391.747, 'text': 'you never.', 'start': 11391.447, 'duration': 0.3}, {'end': 11397.888, 'text': "you don't have to really design each one of them individually, unless you want each one of them to be dynamic and custom looking.", 'start': 11391.747, 'duration': 6.141}, {'end': 11403.449, 'text': "so for right now we're just going to kind of rush through creating the content for these dummy pages.", 'start': 11397.888, 'duration': 5.561}, {'end': 11412.696, 'text': "so contact us and then we're going to publish that out And now we're going to edit it with Elementor.", 'start': 11403.449, 'duration': 9.247}, {'end': 11420.378, 'text': "And I'm going to change this to contact us over here.", 'start': 11414.056, 'duration': 6.322}], 'summary': 'Demonstrates how to quickly create and duplicate pages using a template and elementor for customization.', 'duration': 33.012, 'max_score': 11387.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg11387366.jpg'}], 'start': 10523.558, 'title': 'Website design and customizing forms', 'summary': 'Covers customizing form style, changing background color, adding hidden fields for seamless design, developing practice area archive page, short codes for home page, single page design, and creating templates with elementor.', 'chapters': [{'end': 10630.006, 'start': 10523.558, 'title': 'Customizing form and adding hidden field', 'summary': 'Covers customizing form style, changing background color, and adding a hidden field, which allows the form to exist on all practice areas, resulting in a more seamless and integrated design.', 'duration': 106.448, 'highlights': ['The background color is going to be changed to custom, and whenever hovered, it will turn white, creating a transparent look.', 'The form is saved and refreshed, blending in better with the overall design.', "A hidden field named 'practice area selected' is added, allowing the form to exist on all practice areas and displaying a value of 'sample one'."]}, {'end': 10919.839, 'start': 10630.487, 'title': 'Website design and content creation', 'summary': 'Details the development of the practice area archive page, short codes for practice areas on the home page, and the single page for the practice area, and the design of internal pages with elementor, including implementing dual column content and testimonials.', 'duration': 289.352, 'highlights': ['The practice area archive page, short codes for practice areas on the home page, and the single page for the practice area have been developed.', 'The design of internal pages with Elementor includes implementing dual column content and testimonials.', 'The client requested testimonials on the about us page, similar to those on the home page.', 'The titles for the internal pages are centered and are made as h1 tags.', "The client's site design includes a custom content contact form for the practice area."]}, {'end': 11590.757, 'start': 10919.839, 'title': 'Website design tutorial', 'summary': 'Covers the process of duplicating web page sections, creating templates, and adding pages to the navigation menu using elementor, emphasizing the ease of duplicating content for consistent design and the limitations of non-pro elementor version.', 'duration': 670.918, 'highlights': ['The process of duplicating web page sections and creating templates is explained, highlighting the ease of duplicating content for consistent design and layout.', 'The limitations of the non-pro version of Elementor are discussed, emphasizing the inability to use dynamic tags for content and the need to manually edit titles.', 'The addition of pages to the navigation menu using Elementor is demonstrated, showcasing the ease of managing website structure.', "The process of creating a widescreen contact form with three columns, icons, and relevant information is detailed, highlighting the client's specific design requirements for the website contact page."]}], 'duration': 1067.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg10523558.jpg', 'highlights': ['The process of duplicating web page sections and creating templates is explained, highlighting the ease of duplicating content for consistent design and layout.', 'The practice area archive page, short codes for practice areas on the home page, and the single page for the practice area have been developed.', "The client's site design includes a custom content contact form for the practice area.", 'The addition of pages to the navigation menu using Elementor is demonstrated, showcasing the ease of managing website structure.', 'The background color is going to be changed to custom, and whenever hovered, it will turn white, creating a transparent look.']}, {'end': 13930.847, 'segs': [{'end': 12159, 'src': 'embed', 'start': 12127.329, 'weight': 0, 'content': [{'end': 12133.191, 'text': "Dashicon's business person is what we want to copy.", 'start': 12127.329, 'duration': 5.862}, {'end': 12139.093, 'text': "so let's take that and paste it in here and add post type.", 'start': 12133.191, 'duration': 5.902}, {'end': 12145.855, 'text': 'so now we have our team here, but we also need to add some custom fields to it as well.', 'start': 12139.093, 'duration': 6.762}, {'end': 12150.776, 'text': "so let's create a new field group and we're gonna call it team.", 'start': 12145.855, 'duration': 4.921}, {'end': 12154.518, 'text': 'then inside of this field group we want to give them some information.', 'start': 12150.776, 'duration': 3.742}, {'end': 12159, 'text': "so let's say add the field.", 'start': 12157.259, 'duration': 1.741}], 'summary': "Copying dashicon's business model and adding post type and custom fields to the team.", 'duration': 31.671, 'max_score': 12127.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg12127329.jpg'}, {'end': 12456.682, 'src': 'embed', 'start': 12425.87, 'weight': 1, 'content': [{'end': 12432.356, 'text': 'And we need to make sure that we also call that inside of our short codes, because these short codes are going to be required on the front end.', 'start': 12425.87, 'duration': 6.486}, {'end': 12435.499, 'text': "So let's do team.php.", 'start': 12432.816, 'duration': 2.683}, {'end': 12438.181, 'text': "And that'll call this blank page for us.", 'start': 12436.279, 'duration': 1.902}, {'end': 12440.884, 'text': "So let's start writing the code.", 'start': 12439.462, 'duration': 1.422}, {'end': 12444.447, 'text': "Let's see what we can copy from here.", 'start': 12442.025, 'duration': 2.422}, {'end': 12451.638, 'text': "Let's just copy this whole thing because that's displaying the archive for us.", 'start': 12446.834, 'duration': 4.804}, {'end': 12456.682, 'text': 'And we named our post type team.', 'start': 12452.599, 'duration': 4.083}], 'summary': 'Ensure to call the function inside short codes for required front-end display.', 'duration': 30.812, 'max_score': 12425.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg12425870.jpg'}, {'end': 13196.446, 'src': 'embed', 'start': 13165.466, 'weight': 3, 'content': [{'end': 13169.989, 'text': 'And now we have our staff member with their name and their title.', 'start': 13165.466, 'duration': 4.523}, {'end': 13176.073, 'text': "What I want to do is kind of clean this up a little bit and make it actually, that's why we have those classes wrapping around the code.", 'start': 13170.529, 'duration': 5.544}, {'end': 13179.115, 'text': "So let's switch back over to Visual Studio.", 'start': 13176.813, 'duration': 2.302}, {'end': 13192.305, 'text': "And inside of our style sheet, we're going to create some styles for the team members.", 'start': 13181.281, 'duration': 11.024}, {'end': 13196.446, 'text': 'So the first style we need to do is staff.', 'start': 13193.865, 'duration': 2.581}], 'summary': 'Creating styles for team members in visual studio', 'duration': 30.98, 'max_score': 13165.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg13165466.jpg'}, {'end': 13388.011, 'src': 'embed', 'start': 13348.932, 'weight': 4, 'content': [{'end': 13356.897, 'text': "h2, because that's going to be their title and let's just give it a margin of zero and i want to do a font size of 2rem.", 'start': 13348.932, 'duration': 7.965}, {'end': 13365.38, 'text': "And we're going to do the same thing for the H3, I believe is what we have on there.", 'start': 13359.318, 'duration': 6.062}, {'end': 13367.06, 'text': 'So H2 and H3.', 'start': 13365.84, 'duration': 1.22}, {'end': 13371.341, 'text': "So let's change this to an H3.", 'start': 13367.86, 'duration': 3.481}, {'end': 13373.602, 'text': 'And we want to do something different with this.', 'start': 13371.361, 'duration': 2.241}, {'end': 13382.825, 'text': "So let's do margin 0, font size, let's do 0.8rem.", 'start': 13374.642, 'duration': 8.183}, {'end': 13388.011, 'text': "And then we're going to do color, RGBA.", 'start': 13385.509, 'duration': 2.502}], 'summary': 'Styling h2 and h3 with zero margin, 2rem font size for h2 and 0.8rem for h3, and rgba color.', 'duration': 39.079, 'max_score': 13348.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg13348932.jpg'}], 'start': 11591.197, 'title': 'Website features and styling', 'summary': 'Covers adding a contact form, social media icons, custom post types, team member display, staff image integration, and styling h2 and h3 elements. it includes creating customizations with specific colors, styles, shortcodes, and css, along with details on html and wordpress shortcode usage.', 'chapters': [{'end': 11945.846, 'start': 11591.197, 'title': 'Adding contact form and social media icons', 'summary': 'Demonstrates the process of adding a contact form with specific customizations and incorporating social media icons, using specific colors and styles, to the website. it also includes the creation of a new form and the addition of a shortcode for the contact form.', 'duration': 354.649, 'highlights': ['The chapter demonstrates the process of adding a contact form with specific customizations and incorporating social media icons, using specific colors and styles, to the website. It includes adding TEL, fax, break tag, and phone number, creating a section for social media, adding a divider, using specific colors such as light gray, and incorporating social icons with custom colors.', 'It also includes the creation of a new form and the addition of a shortcode for the contact form. The process involves creating a custom contact form, customizing the submit button, styling a background color for the form section, and adjusting the display of labels for the form fields.']}, {'end': 12742.953, 'start': 11947.287, 'title': 'Building a website with contact form and custom post type', 'summary': 'Details the process of adding a contact form, creating a custom post type for a staff page, and setting up a custom archive page. it also explains the addition of custom fields for the staff page and the use of shortcodes to display the content on the front end.', 'duration': 795.666, 'highlights': ["The chapter details the process of adding a contact form The author explains the steps for adding padding above and below a contact form to create spacing, enhancing the website's visual appeal.", "Creating a custom post type for a staff page The author demonstrates the creation of a custom post type named 'team' and sets up custom fields such as title, email address, phone number, areas of practice, professional associations, and education for the staff page.", "Setting up a custom archive page for the staff page The chapter describes the process of creating a custom archive page for the staff page using PHP and shortcodes, with specific steps outlined for modifying the code and creating a new file named 'team.php'."]}, {'end': 13047.393, 'start': 12742.953, 'title': 'Creating team member display', 'summary': 'Covers creating a display for team members with an image, name, title, email, and phone number, using html and wordpress shortcodes.', 'duration': 304.44, 'highlights': ["Creating a variable 'thumbnail' to associate an image with team members using the function 'get_the_post_thumbnail_url' and passing the ID and class for it.", "Utilizing HTML and WordPress shortcodes to display team member's name, title, email address, and phone number within div classes and anchor elements.", "Implementing a layout that automatically closes and creates new rows after every three columns for displaying team members' information."]}, {'end': 13348.932, 'start': 13047.393, 'title': 'Adding staff image and styling', 'summary': 'Details the process of adding a featured image for a staff member, integrating it with their name and title, and then styling it using css to create a hover effect.', 'duration': 301.539, 'highlights': ["The process involves uploading a staff image, setting it as the featured image, and then integrating it with the staff member's name and title.", 'Styling the staff image involves creating a class for the image wrapper, setting a background color, and defining the width, height, and transition properties to achieve a hover effect.', 'The chapter also discusses creating styles for the team members and modifying the CSS for the team member info.']}, {'end': 13930.847, 'start': 13348.932, 'title': 'Styling h2 and h3 elements', 'summary': 'Involves styling h2 and h3 elements, creating a border, adding margin, and resolving issues with column wrap to display team members in rows with specific margins and spacing.', 'duration': 581.915, 'highlights': ['Styling H2 and H3 elements with font size and color Setting the font size of H2 to 2rem and H3 to 0.8rem, changing font color to off black, and making the text uppercase.', 'Adding border and margin to H3 element Adding a bottom border with light black color and 0.3 visibility to H3 element, and setting a margin of 5 pixels at the bottom.', 'Resolving issue with column wrap for team member display Identifying the need for Elementor column wrap and widget wrap to ensure proper display of team members in rows, and adjusting margins between columns.']}], 'duration': 2339.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg11591197.jpg', 'highlights': ["Creating a custom post type named 'team' with specific fields for staff page.", 'Setting up a custom archive page for the staff page using PHP and shortcodes.', "Utilizing HTML and WordPress shortcodes to display team member's information.", 'Styling the staff image with a hover effect and modifying CSS for team member info.', 'Styling H2 and H3 elements with specific font size, color, and border properties.']}, {'end': 15486.002, 'segs': [{'end': 14155.589, 'src': 'embed', 'start': 14097.615, 'weight': 1, 'content': [{'end': 14101.256, 'text': 'So it has the smaller section on the left and the larger section on the right.', 'start': 14097.615, 'duration': 3.641}, {'end': 14108.117, 'text': 'So the smaller section is essentially going to have an image of the person, their phone number, and their email address.', 'start': 14101.796, 'duration': 6.321}, {'end': 14113.099, 'text': "And then on the right side, it's going to have the information about them and the content.", 'start': 14108.498, 'duration': 4.601}, {'end': 14120.161, 'text': "So let's first get rid of the stuff that we don't need, which would be this and this.", 'start': 14113.839, 'duration': 6.322}, {'end': 14134.273, 'text': "OK, so inside of this, let's create, let's see what I want to do.", 'start': 14123.702, 'duration': 10.571}, {'end': 14136.856, 'text': "All right, let's get the image first.", 'start': 14135.154, 'duration': 1.702}, {'end': 14147.166, 'text': "So we're going to do, what is it? PHP echo the post thumbnail.", 'start': 14137.777, 'duration': 9.389}, {'end': 14149.907, 'text': "And we're just going to echo out the image here with the class on it.", 'start': 14147.566, 'duration': 2.341}, {'end': 14151.347, 'text': "And then we're going to create that class.", 'start': 14150.247, 'duration': 1.1}, {'end': 14155.589, 'text': "I'm going to use a bootstrap class just because it's easier for me to translate to you guys.", 'start': 14151.387, 'duration': 4.202}], 'summary': "Creating a web layout with smaller and larger sections for person's details and using php to echo the post thumbnail.", 'duration': 57.974, 'max_score': 14097.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg14097615.jpg'}, {'end': 14453.621, 'src': 'embed', 'start': 14406.999, 'weight': 0, 'content': [{'end': 14411.72, 'text': 'So if we go to our styles, we already created the element that does the wrapping.', 'start': 14406.999, 'duration': 4.721}, {'end': 14417.482, 'text': 'So we just type in single team content element or content wrap and then padding 10 pixels.', 'start': 14411.8, 'duration': 5.682}, {'end': 14423.109, 'text': "And that'll give us the padding that we want around it, which I'll show you here.", 'start': 14418.464, 'duration': 4.645}, {'end': 14426.813, 'text': 'It has the padding on the side just like we want it now.', 'start': 14423.129, 'duration': 3.684}, {'end': 14430.076, 'text': 'So now we just got to go in there and add the other information that they want.', 'start': 14427.153, 'duration': 2.923}, {'end': 14434.241, 'text': 'So let me look at my design a little bit.', 'start': 14430.797, 'duration': 3.444}, {'end': 14443.779, 'text': "So on the design, we're going to have this is going to be our H1 in the style that the other one is for the practice areas.", 'start': 14435.638, 'duration': 8.141}, {'end': 14447.22, 'text': "And then underneath it, we're going to have managing member or whatever their team title is.", 'start': 14443.819, 'duration': 3.401}, {'end': 14453.621, 'text': "And then we're going to have the content about them, area of expertise, education, contact me.", 'start': 14447.24, 'duration': 6.381}], 'summary': 'Creating padding for content wrap and adding team information on the website.', 'duration': 46.622, 'max_score': 14406.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg14406999.jpg'}, {'end': 14735.786, 'src': 'embed', 'start': 14710.847, 'weight': 3, 'content': [{'end': 14719.634, 'text': "essentially I'm going to go in here and set my headers to have no margin or to have a little margin, but that's it.", 'start': 14710.847, 'duration': 8.787}, {'end': 14727.88, 'text': "so we're going to do h1 through h6 and then we're going to say margin 0 and then margin-bottom.", 'start': 14719.634, 'duration': 8.246}, {'end': 14734.305, 'text': "let's just say 0.5, REM, and that should give it where it's kind of it's a little bit closer for.", 'start': 14727.88, 'duration': 6.425}, {'end': 14735.786, 'text': "so it's not all.", 'start': 14734.305, 'duration': 1.481}], 'summary': 'Setting h1 through h6 headers to have a margin of 0 and margin-bottom of 0.5 rem.', 'duration': 24.939, 'max_score': 14710.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg14710847.jpg'}], 'start': 13930.847, 'title': 'Web design and optimization', 'summary': 'Covers creating archive and single pages for staff, styling images with php and bootstrap, web design element creation, web style sheet adjustment, and optimizing content display for a legal website, offering practical techniques and design considerations for effective web development.', 'chapters': [{'end': 14120.161, 'start': 13930.847, 'title': 'Creating archive and single pages for staff', 'summary': 'Discusses creating archive and single pages for staff, including removing background color, creating a single page for the staff, and adjusting layout proportions for displaying information.', 'duration': 189.314, 'highlights': ['Creating single-teen.php page for staff The speaker creates a new page called single-teen.php to set up the single page for staff, similar to the process for creating single practice areas page.', "Adjusting layout proportions for displaying information The speaker modifies the layout proportions to display 30% and 70% sections on the single team page, with the smaller section containing the person's image, phone number, and email address, and the larger section displaying information about them.", 'Removing background color from archive page The speaker removes the background color from the archive page for the staff to achieve the desired layout.']}, {'end': 14406.459, 'start': 14123.702, 'title': 'Creating and styling image with php and bootstrap', 'summary': 'Covers creating and styling an image using php to echo the post thumbnail and applying bootstrap classes, ensuring the image stretches to the width of the column and aligning text center, resulting in the image being stretched across the container.', 'duration': 282.757, 'highlights': ['Creating an image with PHP echo post thumbnail and applying Bootstrap classes The chapter discusses using PHP to echo the post thumbnail and applying Bootstrap classes to create and style the image, ensuring it stretches to the width of the column.', 'Aligning text center and organizing classes The process involves aligning text center and organizing classes to avoid inline code and maintain cleanliness, ensuring a professional and organized coding structure.', 'Verifying the image stretch across the container The chapter emphasizes the importance of verifying that the image is stretched across the container, which is achieved by applying the appropriate styling and Bootstrap classes.']}, {'end': 14583.086, 'start': 14406.999, 'title': 'Web design element creation', 'summary': 'Discusses creating web design elements such as padding, headings, and custom fields for team information.', 'duration': 176.087, 'highlights': ['Creating padding for content wrap by adding 10 pixels, resulting in desired padding around the content.', 'Defining headings for team information including H1, H3, and custom fields like title for displaying team member information.', 'Making adjustments to ensure consistent styling for team subtitles similar to the practice areas headings.']}, {'end': 14806.204, 'start': 14584.042, 'title': 'Web style sheet adjustment', 'summary': 'Discusses adjusting the padding and margin for h1 and h2 tags, aiming to achieve a specific design layout and spacing, ultimately settling on a 25-75 split for the single team content.', 'duration': 222.162, 'highlights': ['The chapter focuses on adjusting padding and margin for H1 and H2 tags to achieve desired design and spacing.', 'The H1 tag has a huge amount of padding, prompting the decision to remove it.', 'The author sets headers (h1-h6) to have minimal margin for consistent spacing.', 'The author settles on a 25-75 split for the single team content, finding it visually better than other ratios.']}, {'end': 15486.002, 'start': 14806.204, 'title': 'Optimizing content display for legal website', 'summary': 'Details the process of optimizing the display of practice areas, associations, and education information on a legal website by declaring variables, organizing content into columns to prevent long pages, and creating a contact form for consultation requests.', 'duration': 679.798, 'highlights': ['The chapter details the process of optimizing the display of practice areas, associations, and education information on a legal website. The chapter discusses the optimization of displaying practice areas, associations, and education information on a legal website.', 'Creating variables for practice areas, associations, and education. The transcript mentions the creation of variables for practice areas, associations, and education.', 'Organizing content into columns to prevent long pages. The chapter emphasizes the importance of organizing content into columns to prevent long pages and excessive white space.', 'Creating a contact form for consultation requests. The process of creating a contact form for consultation requests is discussed in the transcript.']}], 'duration': 1555.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg13930847.jpg', 'highlights': ['The chapter details the process of optimizing the display of practice areas, associations, and education information on a legal website.', "The speaker modifies the layout proportions to display 30% and 70% sections on the single team page, with the smaller section containing the person's image, phone number, and email address, and the larger section displaying information about them.", 'The chapter discusses using PHP to echo the post thumbnail and applying Bootstrap classes to create and style the image, ensuring it stretches to the width of the column.', 'The chapter focuses on adjusting padding and margin for H1 and H2 tags to achieve desired design and spacing.', 'Creating padding for content wrap by adding 10 pixels, resulting in desired padding around the content.']}, {'end': 16612.877, 'segs': [{'end': 15620.581, 'src': 'embed', 'start': 15540.778, 'weight': 0, 'content': [{'end': 15554.333, 'text': "let's just go ahead and get rid of these two, because we only need to have one line here and it's going to be ahref mail to,", 'start': 15540.778, 'duration': 13.555}, {'end': 15561.2, 'text': "and then we're gonna pass the email to it.", 'start': 15554.333, 'duration': 6.867}, {'end': 15566.605, 'text': "and then let's do a font awesome icon.", 'start': 15561.2, 'duration': 5.405}, {'end': 15570.208, 'text': "so I'm going to copy this.", 'start': 15566.605, 'duration': 3.603}, {'end': 15575.933, 'text': "so we're gonna use the envelope square and then we're gonna make it three times bigger than normal.", 'start': 15570.208, 'duration': 5.725}, {'end': 15577.735, 'text': 'that way it shows a nice little icon here.', 'start': 15575.933, 'duration': 1.802}, {'end': 15588.363, 'text': "And then let's do a title for ADA compliance and just say email and then the title, or get the title.", 'start': 15579.215, 'duration': 9.148}, {'end': 15591.685, 'text': 'Get the title.', 'start': 15589.263, 'duration': 2.422}, {'end': 15597.69, 'text': 'OK, so we got that.', 'start': 15596.409, 'duration': 1.281}, {'end': 15599.972, 'text': "Now we're going to do another one for the phone.", 'start': 15597.75, 'duration': 2.222}, {'end': 15604.196, 'text': "And this one's going to be a tell link.", 'start': 15602.174, 'duration': 2.022}, {'end': 15608.179, 'text': "It's going to be for phone.", 'start': 15605.417, 'duration': 2.762}, {'end': 15620.581, 'text': "up here, do phone there and then we're just going to say call the person's name and then we're going to do the phone square here.", 'start': 15610.217, 'duration': 10.364}], 'summary': 'Creating ada compliant email and phone links with font awesome icons.', 'duration': 79.803, 'max_score': 15540.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg15540778.jpg'}, {'end': 15711.882, 'src': 'embed', 'start': 15656.768, 'weight': 1, 'content': [{'end': 15668.555, 'text': 'so you look at this email address and then phone number now should work.', 'start': 15656.768, 'duration': 11.787}, {'end': 15675.159, 'text': "Let's go back over here and refresh that now.", 'start': 15669.675, 'duration': 5.484}, {'end': 15676.5, 'text': "Nope, still doesn't work.", 'start': 15675.539, 'duration': 0.961}, {'end': 15681.122, 'text': "They're trying to send anything.", 'start': 15679.682, 'duration': 1.44}, {'end': 15688.387, 'text': "Am I echoing it? Yeah, I'm echoing it.", 'start': 15686.226, 'duration': 2.161}, {'end': 15706.76, 'text': 'person to email address.', 'start': 15700.658, 'duration': 6.102}, {'end': 15709.241, 'text': "let me just make sure that that's the variable.", 'start': 15706.76, 'duration': 2.481}, {'end': 15711.882, 'text': 'so we go back to custom fields.', 'start': 15709.241, 'duration': 2.641}], 'summary': 'Troubleshooting email and phone number input, encountering issues with sending data.', 'duration': 55.114, 'max_score': 15656.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg15656768.jpg'}, {'end': 15971.556, 'src': 'embed', 'start': 15934.496, 'weight': 3, 'content': [{'end': 15949.039, 'text': "um, all right, so let's add the navigation for the team members at the top, let's go back out of here, go to appearance menus, go to our team.", 'start': 15934.496, 'duration': 14.543}, {'end': 15951.76, 'text': "we're going to add that right here.", 'start': 15949.039, 'duration': 2.721}, {'end': 15959.17, 'text': "and then for the team members, we're just going to select all four team members and put them in whatever order that we want to.", 'start': 15951.76, 'duration': 7.41}, {'end': 15967.654, 'text': "so we're just going to put them in order like this here.", 'start': 15959.17, 'duration': 8.484}, {'end': 15971.556, 'text': 'okay, so we save that.', 'start': 15967.654, 'duration': 3.902}], 'summary': 'Added navigation for team members, selected and ordered all four members.', 'duration': 37.06, 'max_score': 15934.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg15934496.jpg'}], 'start': 15486.002, 'title': 'Web development update', 'summary': "Focuses on implementing email and phone contact links for ada compliance, using 'ahref mail to' and 'tell link' for email and phone, and troubleshooting issues with variable usage and misspellings.", 'chapters': [{'end': 15540.778, 'start': 15486.002, 'title': 'Php variables and display logic', 'summary': 'Covers creating and displaying php variables for email and phone fields, as well as implementing logic to only display the content if it exists.', 'duration': 54.776, 'highlights': ["The chapter discusses creating PHP variables for email and phone fields using the 'get field' function.", "It emphasizes implementing logic to only display the content if it exists, such as not displaying email if it's empty."]}, {'end': 15711.882, 'start': 15540.778, 'title': 'Web development update', 'summary': "Focuses on implementing email and phone contact links for ada compliance, including using 'ahref mail to' and 'tell link' for email and phone, respectively, and troubleshooting issues with variable usage and misspellings.", 'duration': 171.104, 'highlights': ["Implemented email and phone contact links for ADA compliance using 'ahref mail to' and 'tell link', respectively.", 'Troubleshot issues with variable usage and misspellings for email and phone contact links.', 'Utilized font awesome icons, such as the envelope square, and adjusted its size for visual enhancement.']}, {'end': 15880.38, 'start': 15711.882, 'title': 'Fixing icon display issue', 'summary': 'Involves troubleshooting and fixing the issue of icon display in the code, including identifying the problem and implementing a solution.', 'duration': 168.498, 'highlights': ['Identifying the issue of the icon not populating due to a title tag not being closed properly.', 'Troubleshooting the code to ensure the proper display of two icons.', 'Implementing a solution by adding a class around the section and modifying the icons with specific styling.']}, {'end': 16612.877, 'start': 15880.781, 'title': 'Building a responsive website with elementor', 'summary': 'Discusses the process of building a fully functional and responsive website using elementor, including making design and layout changes, adding navigation menus, and preparing for site export.', 'duration': 732.096, 'highlights': ['The chapter discusses the process of building a fully functional and responsive website using Elementor, including making design and layout changes, adding navigation menus, and preparing for site export.', 'Adding navigation for team members, rearranging the order, and testing the functionality, resulting in a fully functioning website.', 'Making design changes for mobile view, including hiding specific sections and centering icons, resulting in a cleaner and smoother appearance.', 'Preparing for site export by ensuring WordPress and plugins are up to date, installing the Duplicator plugin, and creating a new package for the website, with potential issues related to large images slowing down the process.']}], 'duration': 1126.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg15486002.jpg', 'highlights': ["Implemented email and phone contact links for ADA compliance using 'ahref mail to' and 'tell link', respectively.", 'Troubleshot issues with variable usage and misspellings for email and phone contact links.', 'Utilized font awesome icons, such as the envelope square, and adjusted its size for visual enhancement.', 'Adding navigation for team members, rearranging the order, and testing the functionality, resulting in a fully functioning website.']}, {'end': 18611.939, 'segs': [{'end': 16637.827, 'src': 'embed', 'start': 16613.857, 'weight': 0, 'content': [{'end': 16620.92, 'text': "But we're just going to just go through the sample installer for this tutorial just because this website is very small.", 'start': 16613.857, 'duration': 7.063}, {'end': 16625.383, 'text': "It's only got maybe four or five images and five or six pages.", 'start': 16621.241, 'duration': 4.142}, {'end': 16628.404, 'text': "So let's go ahead and hit next on this.", 'start': 16626.344, 'duration': 2.06}, {'end': 16630.506, 'text': "And while that's working.", 'start': 16629.265, 'duration': 1.241}, {'end': 16636.046, 'text': "okay. well, it went ahead and went through really quick, so everything's good.", 'start': 16631.586, 'duration': 4.46}, {'end': 16637.827, 'text': "we didn't fail anything.", 'start': 16636.046, 'duration': 1.781}], 'summary': 'Sample installer for a small website with 4-5 images and 5-6 pages completed successfully.', 'duration': 23.97, 'max_score': 16613.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg16613857.jpg'}, {'end': 16681.283, 'src': 'embed', 'start': 16654.99, 'weight': 1, 'content': [{'end': 16661.273, 'text': "I'm going to be setting up a production server that it's not going to be live accessible on the internet,", 'start': 16654.99, 'duration': 6.283}, {'end': 16667.576, 'text': 'but it will be something that you can create on your own server using cPanel or whatever it is that you use.', 'start': 16661.273, 'duration': 6.303}, {'end': 16671.378, 'text': "So I'm going to do it in WAMP.", 'start': 16668.536, 'duration': 2.842}, {'end': 16673.098, 'text': 'So this is the local host.', 'start': 16671.918, 'duration': 1.18}, {'end': 16677.301, 'text': "I'm just going to create a new folder on my desktop.", 'start': 16674.159, 'duration': 3.142}, {'end': 16681.283, 'text': "So I'm just going to call it production.", 'start': 16678.361, 'duration': 2.922}], 'summary': "Setting up a production server on localhost using wamp to create a new folder named 'production'.", 'duration': 26.293, 'max_score': 16654.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg16654990.jpg'}, {'end': 17133.679, 'src': 'embed', 'start': 17105.707, 'weight': 2, 'content': [{'end': 17111.57, 'text': "most of the time, If you run into any issues, they're usually pretty good about telling you what you need to do next.", 'start': 17105.707, 'duration': 5.863}, {'end': 17118.392, 'text': "But I've used this plugin for years and it always does what it's supposed to do.", 'start': 17112.41, 'duration': 5.982}, {'end': 17125.996, 'text': "But that's essentially how you would move it from a development server to a staging server or maybe from a staging server to a production server.", 'start': 17118.453, 'duration': 7.543}, {'end': 17127.036, 'text': "It's very easy.", 'start': 17126.316, 'duration': 0.72}, {'end': 17133.679, 'text': 'You just create the zip file, create your installer, run the installer with all your new information and then everything just works.', 'start': 17127.056, 'duration': 6.623}], 'summary': 'Plugin is reliable for moving files, easy process, no issues encountered.', 'duration': 27.972, 'max_score': 17105.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg17105707.jpg'}, {'end': 17216.952, 'src': 'embed', 'start': 17163.766, 'weight': 3, 'content': [{'end': 17174.392, 'text': "now, whenever i first spin up a website, there is a few plugins that i install, and i'll list those plugins out now, the first one being yoast.", 'start': 17163.766, 'duration': 10.626}, {'end': 17179.156, 'text': "if you're not familiar with yoast, yoast is a seo plugin.", 'start': 17174.392, 'duration': 4.764}, {'end': 17182.678, 'text': 'again, you can use any other kind of seo plugin that you want.', 'start': 17179.156, 'duration': 3.522}, {'end': 17188.762, 'text': "this is just the one that i prefer, because i like the visual aspect of it whenever i'm building out a page.", 'start': 17182.678, 'duration': 6.084}, {'end': 17193.766, 'text': "So we're going to install that.", 'start': 17192.344, 'duration': 1.422}, {'end': 17195.968, 'text': "And then there's another one that I install.", 'start': 17194.286, 'duration': 1.682}, {'end': 17196.969, 'text': "It's called iThemes.", 'start': 17196.008, 'duration': 0.961}, {'end': 17204.317, 'text': 'And iThemes is a security plug-in, a security plug-in that is very good.', 'start': 17197.71, 'duration': 6.607}, {'end': 17209.162, 'text': 'It has a lot of really good options in it, like changing the URL for the WP admin.', 'start': 17204.737, 'duration': 4.425}, {'end': 17216.952, 'text': 'enforcing passwords, creating user groups, and backups, and all this kind of stuff.', 'start': 17211.289, 'duration': 5.663}], 'summary': 'When setting up a website, i install yoast for seo and ithemes for security, with features like url changing and backups.', 'duration': 53.186, 'max_score': 17163.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg17163766.jpg'}, {'end': 18544.453, 'src': 'embed', 'start': 18514.957, 'weight': 5, 'content': [{'end': 18524.965, 'text': "You can validate this against Google's schema tag generator to test to make sure that it actually displays all of the information that it needs.", 'start': 18514.957, 'duration': 10.008}, {'end': 18527.367, 'text': 'But Yoast is pretty good about handling that.', 'start': 18525.566, 'duration': 1.801}, {'end': 18533.866, 'text': 'So I think for this tutorial that is probably going to do it.', 'start': 18528.502, 'duration': 5.364}, {'end': 18537.308, 'text': 'We created a fully functional website.', 'start': 18535.507, 'duration': 1.801}, {'end': 18544.453, 'text': 'I showed you how to publish it out, how to set up security, caching, Yoast.', 'start': 18537.368, 'duration': 7.085}], 'summary': 'The tutorial covers website creation, publishing, security, caching, and yoast.', 'duration': 29.496, 'max_score': 18514.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg18514957.jpg'}], 'start': 16613.857, 'title': 'Website installation and optimization', 'summary': 'Covers installing a sample website with an installer, setting up a production server with wamp, moving a website using duplicator plugin, wordpress security, caching setup, and optimizing seo with yoast for improved search engine visibility and performance.', 'chapters': [{'end': 16654.99, 'start': 16613.857, 'title': 'Sample installer walkthrough', 'summary': 'Discusses a sample installer for a small website with four to five images and five to six pages, highlighting the process of hitting next, size checks, and building the installer.', 'duration': 41.133, 'highlights': ['The installer is for a very small website with four to five images and five to six pages.', 'The process involves hitting next, which is quick and successful.', 'Size checks are in place to warn about any issues with the content to be uploaded.']}, {'end': 17065.193, 'start': 16654.99, 'title': 'Setting up production server with wamp', 'summary': 'Covers setting up a production server using wamp, creating a virtual host, configuring a database, and finalizing the installation process.', 'duration': 410.203, 'highlights': ["Creating a virtual host named 'production.local' and configuring the database 'production' in WAMP The speaker demonstrates creating a virtual host named 'production.local' and setting up a database named 'production' in WAMP, providing a clear and specific approach to the server setup.", 'Guiding through the installation process, including database validation and final setup The process involves guiding through the installation process, including database validation, and finalizing the setup, ensuring a comprehensive understanding of the installation steps.', 'Emphasizing the importance of creating a new database and user credentials for security The speaker emphasizes the importance of creating a new database and user credentials for security, highlighting the best practices for securing the database.']}, {'end': 17544.555, 'start': 17065.693, 'title': 'Moving website with duplicator plugin and installing essential plugins', 'summary': 'Discusses using the duplicator plugin to move a website from a development server to a staging server or production server and the installation and setup of essential plugins including yoast, ithemes, hummingbird, and smush for seo, security, caching, and image optimization respectively.', 'duration': 478.862, 'highlights': ["The Duplicator plugin is effective for duplicating websites and transferring them between servers, with minimal issues and simple setup process. The Duplicator plugin successfully duplicates websites, enabling easy transfer between servers, with minimal issues and a simple setup process, as confirmed by the speaker's years of usage.", 'Recommendation of essential plugins including Yoast for SEO, iThemes for security, Hummingbird for caching, and Smush for image optimization, with specific benefits and functions outlined for each plugin. The speaker recommends essential plugins such as Yoast for SEO, iThemes for security, Hummingbird for caching, and Smush for image optimization, highlighting their specific benefits and functions.', 'Detailed walkthrough of iThemes security plugin setup, including options for security checks, user groups, 404 detection, ban list, database backups, file change detection, file permissions, brute force protection, and SSL compliance. The transcript provides a detailed walkthrough of setting up the iThemes security plugin, covering options for security checks, user groups, 404 detection, ban list, database backups, file change detection, file permissions, brute force protection, and SSL compliance.']}, {'end': 18161.292, 'start': 17544.555, 'title': 'Wordpress security and caching setup', 'summary': 'Outlines the process of securing a wordpress website including system tweaks, wordpress tweaks, and advanced level configurations, followed by setting up caching using plugins like hummingbird and smush, and configuring yoast seo for indexing and site visibility.', 'duration': 616.737, 'highlights': ['The chapter outlines the process of securing a WordPress website including system tweaks, WordPress tweaks, and advanced level configurations. It covers various security measures such as protecting system files, disabling directory browsing, and filtering out request methods, along with WordPress tweaks like removing Live Writer header and disabling login error messages.', 'Setting up caching using plugins like Hummingbird and Smush. The process involves enabling page caching, browser caching, and gzip compression, as well as optimizing images using Smush to improve website performance.', 'Configuring Yoast SEO for indexing and site visibility. The setup includes configuring the Yoast SEO plugin, adjusting reading settings to allow search engine indexing, and running the configuration wizard for site visibility and business type.']}, {'end': 18611.939, 'start': 18161.292, 'title': 'Optimizing website seo with yoast', 'summary': 'Discusses optimizing website seo using yoast, explaining the process of setting up seo, modifying titles and meta descriptions, and utilizing schema tags for improved search engine visibility and website performance.', 'duration': 450.647, 'highlights': ['The chapter discusses optimizing website SEO using Yoast, explaining the process of setting up SEO, modifying titles and meta descriptions, and utilizing schema tags for improved search engine visibility and website performance.', "The speaker demonstrates how to modify titles and meta descriptions for better SEO, using 'law firm' as the focus key phrase and visually monitoring the content length to ensure optimization.", 'The tutorial emphasizes the importance of schema tags and demonstrates their usage for different types of pages, showing the process of adding and validating schema tags with Yoast for improved search engine visibility.', 'The speaker highlights the completion of a fully functional website and offers further tutorials on building WordPress themes from scratch or with Elementor, as well as setting up servers and custom website development.']}], 'duration': 1998.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IPo71JPKUmg/pics/IPo71JPKUmg16613857.jpg', 'highlights': ['The installer is for a very small website with four to five images and five to six pages.', "Creating a virtual host named 'production.local' and configuring the database 'production' in WAMP.", 'The Duplicator plugin is effective for duplicating websites and transferring them between servers, with minimal issues and simple setup process.', 'Recommendation of essential plugins including Yoast for SEO, iThemes for security, Hummingbird for caching, and Smush for image optimization, with specific benefits and functions outlined for each plugin.', 'The chapter outlines the process of securing a WordPress website including system tweaks, WordPress tweaks, and advanced level configurations.', 'The chapter discusses optimizing website SEO using Yoast, explaining the process of setting up SEO, modifying titles and meta descriptions, and utilizing schema tags for improved search engine visibility and website performance.']}], 'highlights': ['The chapter covers building a WordPress law firm website, including initial design, setting up WordPress, adding Elementor, creating custom post types, integrating them through shortcodes, and publishing to a live server with security and SEO setup.', 'The chapter discusses the process of setting up the fundamentals of a law firm website, including grabbing JavaScript files and creating simple pages to ensure the correct functionality.', 'The process of designing and styling a website, including adjusting text size, creating a gradient overlay, adding padding, and duplicating sections to accommodate different content.', 'Creating a section with two columns, setting one column to 38% width, adding text and image content, and planning for future use of short code for custom post type content.', 'The process of building practice areas with different colors is detailed, including duplicating, dragging, deleting, and setting background colors and text styles.', "Creating a new field called 'blurb' for adding text in practice areas.", 'Adding a contact form using the plugin Fluent Forms with detailed steps', 'The process of duplicating web page sections and creating templates is explained, highlighting the ease of duplicating content for consistent design and layout.', "Creating a custom post type named 'team' with specific fields for staff page.", "Implemented email and phone contact links for ADA compliance using 'ahref mail to' and 'tell link', respectively.", 'The Duplicator plugin is effective for duplicating websites and transferring them between servers, with minimal issues and simple setup process.', 'The chapter discusses optimizing website SEO using Yoast, explaining the process of setting up SEO, modifying titles and meta descriptions, and utilizing schema tags for improved search engine visibility and website performance.']}