title
How To Make a WordPress Website 2024 | Divi Theme Tutorial (Updated)

description
Ready To Create an Amazing WordPress Website With The Divi Theme? Get Discounted Hosting: https://www.darrelwilson.com/namehero Try Divi Theme: https://www.darrelwilson.com/divi Demo Website: https://demo.dwtutorial.com/divi1 New DIVI THEME Templates: https://darrelwilson.com/product-category/divi-pro-layouts/ Download Demo Images: https://www.dropbox.com/s/9rs8ylei76av4kd/Practice%20Images.zip?dl=0 The Divi theme is the most popular WordPress Theme In the World. In fact, when I first started WordPress, I used the Divi theme for a majority of my problems. In this video, I will cover how to use the Divi theme, how to use the Divi theme builder, and also how to use all of the advanced features that come with the Divi theme. If you want to learn how to make a WordPress website with the Divi theme or even a web design career, then Divi is a great WordPress theme to start out with. Divi Theme Tutorials and Resources I Mentioned (Divi Template) https://darrelwilson.com/product/divi-orioz-layout/ https://darrelwilson.com/best-divi-theme-tutorials/ https://darrelwilson.com/divi-theme-resources/ https://darrelwilson.com/how-to-speed-up-your-wordpress-website/ https://darrelwilson.com/product/divi-corporate-multipurpose-layout/ Divi Scroll Effects: https://www.youtube.com/watch?v=rdWK5IosiCM CSS For HomePage (Copy And Paste This) background-size: 58vw auto !important; background-position: 100% 50% !important; 👉👉Important Links Our Elementor Pro Templates: https://darrelwilson.com/product-category/elementor-pro-templates/ My Kopi Coffee Website: https://www.kopicoffee.com Our Pinterest With Design Templates: https://www.pinterest.com/OfficialDarrelWilson/ Connect with me on Twitter: https://twitter.com/DarrelWilsonYT My Facebook Page: https://www.facebook.com/DarrelWilson03 Join Our WP Social Network: https://wpfriends.com Visit My Website at https://www.darrelwilson.com Timestamps For The Divi Theme WordPress Tutorial 00:00 Intro 01:32 Website Intro 06:10 Get Hosting 10:37 Install WordPress 13:49 General Settings 17:45 Download Divi Theme 22:19 Create Pages And Menu 28:18 Start Designing Home Page 47:17 Web Design Tip #1 50:15 Home Page Creation 01:37:07 Divi Sticky Options 01:41:30 Kit Creations 01:49:13 How To Import Website 01:57:04 Theme Customizer + Divi Options 02:13:21 Divi Blog And Projects 02:23:10 Divi Projects 02:26:36 Divi Advanced Features 02:43:59 Misc Settings 02:51:25 Guest Intro 02:52:03 Divi Conditions 03:02:39 Divi Mobile 03:13:19 Divi Inline Modules 03:22:17 Create Event Registration 03:39:40 Divi Theme Builder Tutorial 03:41:22 Divi Custom Header 03:47:03 Divi Custom Footer 03:51:56 Divi 404 Page 04:00:20 Divi Market Place 04:04:23 Divi Extensions 04:06:23 Divi Layouts 04:07:23 Divi Child Themes 04:12:42 Closing Remarks Important Links I Mention In The Video Get A Professional Logo: https://www.darrelwilson.com/fiverr Get Help With Gradients: https://uigradients.com/ WordPress Resources: https://darrelwilson.com/wordpress-resources/ Google Mobile Tester: https://search.google.com/test/mobile-friendly Special Guests Michelle: Michelle: https://www.youtube.com/c/MichelleSchneider Divi Engine: https://www.youtube.com/c/DiviEngine Pee-Aye: https://www.youtube.com/c/PeeAyeCreative Victor/Divi Mundo: https://www.youtube.com/c/DiviMundo Check out my other Multilingual WordPress Tutorial Youtube Channels! Spanish Channel: https://www.youtube.com/channel/UC1Sm53FofDOVA5T0pzyebEA Arabic Channel: https://www.youtube.com/channel/UCDxCp7gMbzmNIjUqOCu1xcg/videos Hindi Channel: https://www.youtube.com/channel/UCjTje7OJghnjEJ8d4llefQw Portuguese Channel: https://www.youtube.com/channel/UCOs-QXBdlmT0YL3I-bnyeug French Channel: https://www.youtube.com/channel/UCLEH_xAh0VxCTSq1AQBYPsg German Channel: https://www.youtube.com/channel/UCTkmZD2BCJpedWe4Hb5QVLw Thanks for watching party people, if you have any questions or want to know more about WordPress and the Divi theme, feel free to visit my website at https://www.darrelwilson.com This is a complete tutorial on how to make a WordPress website with Divi theme.

detail
{'title': 'How To Make a WordPress Website 2024 | Divi Theme Tutorial (Updated)', 'heatmap': [{'end': 1832.954, 'start': 1517.815, 'weight': 0.815}, {'end': 2893.31, 'start': 2733.158, 'weight': 0.728}, {'end': 13389.164, 'start': 13229.625, 'weight': 0.731}, {'end': 15206.991, 'start': 15057.233, 'weight': 1}], 'summary': 'This tutorial provides a comprehensive guide to creating a wordpress website using the divi theme, covering hosting setup, advanced functionalities, design customization, blog modules, theme options, woocommerce integration, and css customization, with an emphasis on user-friendly features, mobile optimization, and divi marketplace resources.', 'chapters': [{'end': 540.203, 'segs': [{'end': 95.647, 'src': 'embed', 'start': 56.879, 'weight': 0, 'content': [{'end': 60.681, 'text': 'With the Divi theme, you can build any type of website you wanted from their backend builder.', 'start': 56.879, 'duration': 3.802}, {'end': 68.045, 'text': 'In 2018, Divi developed their frontend visual builder, which enables users to build their website visually on the frontend,', 'start': 61.161, 'duration': 6.884}, {'end': 70.026, 'text': 'making it very easy to build a website.', 'start': 68.045, 'duration': 1.981}, {'end': 76.512, 'text': 'Every year Divi is constantly adding in new templates and innovative features to really push the limits of web design.', 'start': 70.646, 'duration': 5.866}, {'end': 84.279, 'text': 'And as of 2022, Divi is now the most active WordPress theme in the world with more than 3 million active installs worldwide.', 'start': 77.032, 'duration': 7.247}, {'end': 87.922, 'text': "Now, before we begin, let me first show you guys the website we'll be making today,", 'start': 84.719, 'duration': 3.203}, {'end': 91.645, 'text': 'along with some free templates that we have made specially for you guys in this video.', 'start': 87.922, 'duration': 3.723}, {'end': 95.647, 'text': "So today I'll be showing you guys how to build websites using Divi.", 'start': 92.486, 'duration': 3.161}], 'summary': 'Divi is the most active wordpress theme with over 3 million active installs worldwide, offering a frontend visual builder and new templates.', 'duration': 38.768, 'max_score': 56.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE056879.jpg'}, {'end': 315.963, 'src': 'embed', 'start': 281.058, 'weight': 2, 'content': [{'end': 283.419, 'text': "In step one, I'll show you how to get your domain and hosting.", 'start': 281.058, 'duration': 2.361}, {'end': 286.98, 'text': 'A domain is the web address for your website, like mywebsite.com.', 'start': 283.759, 'duration': 3.221}, {'end': 292.362, 'text': 'We also do have a special discount available in the description that you guys will only find on this YouTube channel.', 'start': 287.36, 'duration': 5.002}, {'end': 295.503, 'text': "In step two, I'll explain the general settings of WordPress.", 'start': 292.982, 'duration': 2.521}, {'end': 298.884, 'text': 'We will then go ahead and download the Divi theme and start building the websites.', 'start': 295.843, 'duration': 3.041}, {'end': 303.506, 'text': "I'll introduce you guys to the builder and explain how to use this drag and drop builder step by step.", 'start': 299.084, 'duration': 4.422}, {'end': 306.435, 'text': "In step three, we'll design the websites.", 'start': 304.673, 'duration': 1.762}, {'end': 310.298, 'text': "In step three, I'll teach you guys how to design the website using Divi.", 'start': 307.395, 'duration': 2.903}, {'end': 315.963, 'text': "I'll also show you how to adjust the websites, upload images, add modules, and make your website from scratch.", 'start': 310.678, 'duration': 5.285}], 'summary': 'Learn to set up domain, hosting, and design a website using divi with special discount available.', 'duration': 34.905, 'max_score': 281.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0281058.jpg'}, {'end': 394.273, 'src': 'embed', 'start': 365.681, 'weight': 3, 'content': [{'end': 367.181, 'text': 'And welcome to NameHero.com.', 'start': 365.681, 'duration': 1.5}, {'end': 370.342, 'text': "Now I've been recommending NameHero.com for years and people love it.", 'start': 367.221, 'duration': 3.121}, {'end': 373.563, 'text': "This week alone, I've had zero downtime with NameHero.", 'start': 371.103, 'duration': 2.46}, {'end': 375.564, 'text': 'So you guys will have a reliable website.', 'start': 373.663, 'duration': 1.901}, {'end': 379.345, 'text': 'And also my websites load at under one second with NameHero.', 'start': 376.004, 'duration': 3.341}, {'end': 383.687, 'text': 'So we do test these servers to make sure that you guys do get the best web hosting possible.', 'start': 379.685, 'duration': 4.002}, {'end': 389.51, 'text': "Now, once you guys are here, you'll click on Get Started Now, and then it'll bring you to four different pricing options.", 'start': 384.187, 'duration': 5.323}, {'end': 394.273, 'text': 'So we have the Starter Cloud, the Plus Cloud, the Turbo Cloud, and the Business Cloud.', 'start': 389.55, 'duration': 4.723}], 'summary': 'Namehero.com offers reliable web hosting with zero downtime and under one second website loading time.', 'duration': 28.592, 'max_score': 365.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0365681.jpg'}], 'start': 0.389, 'title': 'Creating a wordpress website with divi', 'summary': 'Provides a comprehensive guide to creating a wordpress website using the popular divi theme, highlighting its 3 million active installs, drag-and-drop features, and suitability for beginners and designers. it also covers domain and hosting setup, advanced functionalities, theme builder, marketplace resources, and hosting recommendations from namehero.com, including a special discount and server performance metrics.', 'chapters': [{'end': 225.693, 'start': 0.389, 'title': 'Making a wordpress website with divi', 'summary': 'Covers a step-by-step guide on making a wordpress website using the popular divi theme, which has over 3 million active installs worldwide, with a focus on its drag-and-drop features and its appeal to beginners and designers.', 'duration': 225.304, 'highlights': ['Divi theme has over 3 million active installs worldwide. The Divi theme is highlighted as the most active WordPress theme globally with more than 3 million active installs, showcasing its widespread popularity.', 'Divi enables users to build websites visually on the frontend with a drag-and-drop builder. The capability of Divi to enable frontend visual building with a drag-and-drop feature is emphasized, showcasing its user-friendly nature for creating websites.', "Derral Wilson will demonstrate step-by-step website creation using Divi's drag-and-drop builder. The video will feature a step-by-step demonstration by Derral Wilson on creating a website using Divi's drag-and-drop builder, providing hands-on guidance for viewers."]}, {'end': 540.203, 'start': 225.713, 'title': 'Building a wordpress website with divi', 'summary': 'Outlines the process of building a wordpress website using divi, covering aspects such as domain and hosting setup, divi theme features, advanced functionalities, theme builder, marketplace resources, and hosting recommendations from namehero.com, with a special discount and server performance metrics.', 'duration': 314.49, 'highlights': ['The chapter outlines the process of building a WordPress website using Divi, covering aspects such as domain and hosting setup, Divi theme features, advanced functionalities, theme builder, marketplace resources, and hosting recommendations from NameHero.com, with a special discount and server performance metrics.', 'NameHero.com is recommended for web hosting, with zero downtime and websites loading at under one second, and offers various pricing options like Starter Cloud, Plus Cloud, Turbo Cloud, and Business Cloud, with the Turbo Cloud providing NVMe storage for enhanced performance.', 'A special discount for NameHero.com hosting is available, and the domain setup process is explained, including selecting the billing cycle, opting for ID protection, and the pricing details, with a recommendation for a one-year billing cycle for a large discount.']}], 'duration': 539.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0389.jpg', 'highlights': ['Divi theme has over 3 million active installs worldwide', 'Divi enables users to build websites visually on the frontend with a drag-and-drop builder', "Derral Wilson will demonstrate step-by-step website creation using Divi's drag-and-drop builder", 'NameHero.com is recommended for web hosting, with zero downtime and websites loading at under one second', 'A special discount for NameHero.com hosting is available, and the domain setup process is explained', 'The chapter outlines the process of building a WordPress website using Divi, covering various aspects']}, {'end': 3102.15, 'segs': [{'end': 580.778, 'src': 'embed', 'start': 557.808, 'weight': 0, 'content': [{'end': 564.911, 'text': 'and then also we have payment methods, so you can pay with PayPal, Coinbase, which is cryptocurrency, and credit card.', 'start': 557.808, 'duration': 7.103}, {'end': 571.894, 'text': "Here, you'll go ahead and put in your payment details and if you guys do want to get their spam or their emails,", 'start': 565.351, 'duration': 6.543}, {'end': 574.015, 'text': "they actually send some pretty good emails, guys, I'm not gonna lie.", 'start': 571.894, 'duration': 2.121}, {'end': 575.836, 'text': 'They have some cool promotional offers.', 'start': 574.035, 'duration': 1.801}, {'end': 580.778, 'text': "You'll go ahead and check that box and then you'll, of course, agree to their terms of service, right?", 'start': 576.256, 'duration': 4.522}], 'summary': 'Multiple payment options including paypal, coinbase, and credit card. optional email subscription with attractive promotional offers.', 'duration': 22.97, 'max_score': 557.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0557808.jpg'}, {'end': 630.91, 'src': 'embed', 'start': 596.227, 'weight': 3, 'content': [{'end': 598.428, 'text': 'All right, and welcome to your new dashboard.', 'start': 596.227, 'duration': 2.201}, {'end': 599.949, 'text': 'So this is your current dashboard.', 'start': 598.468, 'duration': 1.481}, {'end': 604.452, 'text': 'As you guys can see, I had many different packages, many domains, and I also have tickets with NameHero,', 'start': 600.009, 'duration': 4.443}, {'end': 606.314, 'text': 'and they really helped me out with all of my problems.', 'start': 604.452, 'duration': 1.862}, {'end': 608.255, 'text': 'So this is just your interface.', 'start': 606.914, 'duration': 1.341}, {'end': 610.336, 'text': 'On the left side, you can see your hosting packages.', 'start': 608.355, 'duration': 1.981}, {'end': 612.237, 'text': 'These are your current domains.', 'start': 610.897, 'duration': 1.34}, {'end': 613.999, 'text': 'You can always register a new domain.', 'start': 612.338, 'duration': 1.661}, {'end': 620.643, 'text': 'Also billing, so if you want to see your payments or you want to add funds or you want to adjust your payment methods, you can do that here.', 'start': 614.859, 'duration': 5.784}, {'end': 622.064, 'text': 'And also the support.', 'start': 621.083, 'duration': 0.981}, {'end': 630.91, 'text': 'so if you guys run into something weird I know with websites things just kind of get weird sometimes you guys can always open a ticket here and they will help you out with all of your problems.', 'start': 622.064, 'duration': 8.846}], 'summary': 'New dashboard with hosting packages, domains, and support for managing problems and payments.', 'duration': 34.683, 'max_score': 596.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0596227.jpg'}, {'end': 1018.402, 'src': 'embed', 'start': 977.874, 'weight': 1, 'content': [{'end': 983.318, 'text': "You'll go to your domain and then you'll type in dash WP dash admin and then press enter.", 'start': 977.874, 'duration': 5.444}, {'end': 990.263, 'text': "You'll then go ahead and put in your username or the email that you guys use to sign up with WordPress along with your password.", 'start': 984.319, 'duration': 5.944}, {'end': 993.926, 'text': "And once you enter all that information, you'll then click on login.", 'start': 990.804, 'duration': 3.122}, {'end': 996.008, 'text': "And that's it.", 'start': 995.607, 'duration': 0.401}, {'end': 998.77, 'text': "That's how you guys can log in and log out of your WordPress website.", 'start': 996.148, 'duration': 2.622}, {'end': 1004.312, 'text': 'All right guys, so in the next step, we are now going to download and purchase the Divi theme.', 'start': 1000.649, 'duration': 3.663}, {'end': 1007.114, 'text': 'Now there is a link in the description of this video.', 'start': 1004.672, 'duration': 2.442}, {'end': 1009.896, 'text': "It'll take you to a page to purchase the Divi theme.", 'start': 1007.254, 'duration': 2.642}, {'end': 1012.077, 'text': 'And this is elegantthemes.com.', 'start': 1010.496, 'duration': 1.581}, {'end': 1018.402, 'text': 'And here we have two different pricing options, right? We have the yearly access and we also have the lifetime access.', 'start': 1012.257, 'duration': 6.145}], 'summary': 'To log in to wordpress, use domain/wp-admin, enter credentials, and click login. purchase divi theme from elegantthemes.com with yearly or lifetime access options.', 'duration': 40.528, 'max_score': 977.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0977874.jpg'}, {'end': 1268.299, 'src': 'embed', 'start': 1244.14, 'weight': 4, 'content': [{'end': 1250.564, 'text': 'So the folder that we downloaded from the Elegant Themes website, we are now going to upload this to our current WordPress website.', 'start': 1244.14, 'duration': 6.424}, {'end': 1255.548, 'text': 'So go ahead and click on Divi and click on open and then click on install now.', 'start': 1250.824, 'duration': 4.724}, {'end': 1258.71, 'text': "And now it's uploading Divi to your WordPress website.", 'start': 1256.428, 'duration': 2.282}, {'end': 1261.572, 'text': "And now we're going to click on activate.", 'start': 1259.771, 'duration': 1.801}, {'end': 1263.974, 'text': 'All right, cool, awesome.', 'start': 1262.793, 'duration': 1.181}, {'end': 1268.299, 'text': 'Now we have the Divi theme successfully installed on our current website.', 'start': 1264.255, 'duration': 4.044}], 'summary': 'Uploaded and installed divi theme from elegant themes to the current wordpress website, and successfully activated it.', 'duration': 24.159, 'max_score': 1244.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE01244140.jpg'}, {'end': 1832.954, 'src': 'heatmap', 'start': 1517.815, 'weight': 0.815, 'content': [{'end': 1522.158, 'text': 'And I want them to go to our homepage as the very first page when they visit the website, right? Makes sense.', 'start': 1517.815, 'duration': 4.343}, {'end': 1523.279, 'text': "So let's do that.", 'start': 1522.698, 'duration': 0.581}, {'end': 1527.5, 'text': "Up here under my blog, we'll click on the theme customizer.", 'start': 1524.139, 'duration': 3.361}, {'end': 1530.261, 'text': "We'll come back to the theme customizer a little bit later.", 'start': 1527.96, 'duration': 2.301}, {'end': 1534.563, 'text': "I don't use it too much, I'll be honest, maybe for like your menu or something,", 'start': 1530.281, 'duration': 4.282}, {'end': 1540.585, 'text': 'but the theme customizer is a little dated because the page builder does most of the work designing your website.', 'start': 1534.563, 'duration': 6.022}, {'end': 1543.546, 'text': 'But down here under homepage, we have settings.', 'start': 1541.145, 'duration': 2.401}, {'end': 1546.447, 'text': 'Here we have your homepage displays.', 'start': 1544.586, 'duration': 1.861}, {'end': 1551.968, 'text': 'Click on a static page and then select your homepage to the actual home page.', 'start': 1546.747, 'duration': 5.221}, {'end': 1560.55, 'text': "So what I'm telling the website to do is saying, I want this home page to be the actual home page of the website and then click on publish.", 'start': 1552.388, 'duration': 8.162}, {'end': 1564.071, 'text': 'And then we can close the theme customizer.', 'start': 1562.35, 'duration': 1.721}, {'end': 1567.451, 'text': "And now we're ready to start building out the WordPress website.", 'start': 1564.731, 'duration': 2.72}, {'end': 1567.712, 'text': 'All right.', 'start': 1567.511, 'duration': 0.201}, {'end': 1571.272, 'text': "You guys ready? At the top right here, you'll see enable visual builder.", 'start': 1567.872, 'duration': 3.4}, {'end': 1573.453, 'text': 'Go ahead and click on enable visual builder.', 'start': 1571.552, 'duration': 1.901}, {'end': 1574.153, 'text': 'All right.', 'start': 1573.953, 'duration': 0.2}, {'end': 1579.194, 'text': 'Congratulations We have now uploaded Divi and we are now ready to start designing the WordPress website.', 'start': 1574.173, 'duration': 5.021}, {'end': 1582.635, 'text': "Now, in this next section, I'll be showing you how to use Divi right?", 'start': 1579.714, 'duration': 2.921}, {'end': 1587.637, 'text': "So we'll start using modules, we'll add background colors, we'll make it look like a real website.", 'start': 1582.715, 'duration': 4.922}, {'end': 1591.158, 'text': 'I also do have images for all of you in the description below of this video.', 'start': 1588.077, 'duration': 3.081}, {'end': 1598.441, 'text': 'We also will be giving you guys demo templates a little bit later in the video, but I first want to show you all how to use the Divi builder,', 'start': 1591.518, 'duration': 6.923}, {'end': 1602.062, 'text': 'explain what modules are and how to make columns, and stuff like that.', 'start': 1598.441, 'duration': 3.621}, {'end': 1607.284, 'text': "So with that said, let's go ahead and go to step three and start designing the website using Divi.", 'start': 1602.582, 'duration': 4.702}, {'end': 1615.23, 'text': "Alright, so once you guys enable the builder, you'll first be prompted to build from scratch, choose a premade layouts or clone an existing page.", 'start': 1607.944, 'duration': 7.286}, {'end': 1618.173, 'text': 'Now Divi also has a lot of cool premade templates.', 'start': 1615.691, 'duration': 2.482}, {'end': 1622.016, 'text': "But before we jump into the templates, let's first talk about how to use the builder and elements.", 'start': 1618.373, 'duration': 3.643}, {'end': 1624.118, 'text': "So let's go ahead and build this from scratch right here.", 'start': 1622.396, 'duration': 1.722}, {'end': 1626.56, 'text': 'So right here, just click on build from scratch.', 'start': 1624.278, 'duration': 2.282}, {'end': 1632.08, 'text': 'Now, if you take a look at my previous website right here, I want you guys to visualize something here.', 'start': 1627.717, 'duration': 4.363}, {'end': 1637.405, 'text': 'We really only have two columns, right? We have one column and we have two columns.', 'start': 1632.461, 'duration': 4.944}, {'end': 1640.607, 'text': "So let's go ahead and make a two column row right?", 'start': 1637.905, 'duration': 2.702}, {'end': 1644.73, 'text': 'And the first thing that we wanna do is insert a text module right?', 'start': 1641.828, 'duration': 2.902}, {'end': 1649.094, 'text': "So just taking a look here really quickly, I'm just gonna go ahead and make you guys visualize.", 'start': 1645.371, 'duration': 3.723}, {'end': 1654.278, 'text': 'We have a text module, an icon, a text, a text, and a button.', 'start': 1649.134, 'duration': 5.144}, {'end': 1655.698, 'text': "And that's pretty much it.", 'start': 1654.918, 'duration': 0.78}, {'end': 1656.318, 'text': 'All right.', 'start': 1655.718, 'duration': 0.6}, {'end': 1661.9, 'text': "And once you guys enter the text module, you'll then see that we now have the text settings on this little box right here.", 'start': 1656.378, 'duration': 5.522}, {'end': 1662.74, 'text': 'You guys can.', 'start': 1661.96, 'duration': 0.78}, {'end': 1667.081, 'text': 'first you can add it to the side of the screen like that, or you guys can make it bigger,', 'start': 1662.74, 'duration': 4.341}, {'end': 1670.462, 'text': 'and then you can also adjust the size of this at any time right here.', 'start': 1667.081, 'duration': 3.381}, {'end': 1677.283, 'text': 'I would leave it like this because with this, it actually makes it so you can see how the website will look in preview, which makes a lot more sense.', 'start': 1670.942, 'duration': 6.341}, {'end': 1680.464, 'text': 'But you guys can go ahead and type in your content here.', 'start': 1677.883, 'duration': 2.581}, {'end': 1686.767, 'text': 'So this would be your This would be your content.', 'start': 1680.564, 'duration': 6.203}, {'end': 1691.951, 'text': 'Now the content section has a lot of different options, right? You can make this link somewhere.', 'start': 1687.548, 'duration': 4.403}, {'end': 1697.376, 'text': 'So if someone clicks on this, you can insert like a link, like mywebsite.com or something like that.', 'start': 1692.111, 'duration': 5.265}, {'end': 1702.94, 'text': 'You can also add like a background and you can also add in your own admin label for your actual modules.', 'start': 1698.056, 'duration': 4.884}, {'end': 1709.765, 'text': 'The design tab is where you essentially design it, right? So this controls the sizing, the colors, and also the fonts.', 'start': 1703.601, 'duration': 6.164}, {'end': 1712.587, 'text': "You'll see over here how we just have this red font.", 'start': 1710.245, 'duration': 2.342}, {'end': 1714.228, 'text': "So let's go ahead and change the color really quick.", 'start': 1712.707, 'duration': 1.521}, {'end': 1716.269, 'text': "I'm gonna click on the text right here.", 'start': 1714.908, 'duration': 1.361}, {'end': 1718.371, 'text': 'And now we have the text fonts.', 'start': 1716.93, 'duration': 1.441}, {'end': 1724.716, 'text': "I believe I'm using, I think it's Jost, right? But you can go ahead and select a font that you choose.", 'start': 1719.031, 'duration': 5.685}, {'end': 1728.02, 'text': 'A really good one is Poppins Bold, which I really do like.', 'start': 1725.177, 'duration': 2.843}, {'end': 1729.241, 'text': 'And also Lado.', 'start': 1728.14, 'duration': 1.101}, {'end': 1731.783, 'text': 'Lado, Roboto, Poppins Bold.', 'start': 1729.681, 'duration': 2.102}, {'end': 1735.046, 'text': 'And those are my favorite ones to be honest.', 'start': 1732.344, 'duration': 2.702}, {'end': 1740.712, 'text': "But the ones that we're using for this specific demo is Jost, right? J-O-S-T.", 'start': 1735.387, 'duration': 5.325}, {'end': 1743.533, 'text': 'here you have different options.', 'start': 1742.532, 'duration': 1.001}, {'end': 1750.479, 'text': 'right you can make this thin to have, like that, really nice, elegant layout, or you can make it bold, which makes it a little bit more friendlier,', 'start': 1743.533, 'duration': 6.946}, {'end': 1754.802, 'text': 'and then you can choose to have it italicized and underlined and stuff like that.', 'start': 1750.479, 'duration': 4.323}, {'end': 1760.007, 'text': "and then here you can adjust the color, so i'll change mine to red right.", 'start': 1754.802, 'duration': 5.205}, {'end': 1766.734, 'text': 'and for the text size, this is where you can adjust the size of the actual text or introduce more letter spacing.', 'start': 1760.007, 'duration': 6.727}, {'end': 1768.055, 'text': 'So that adds more spacing.', 'start': 1766.774, 'duration': 1.281}, {'end': 1771.219, 'text': "Now I want to reset this because I don't know which one I set it at.", 'start': 1768.195, 'duration': 3.024}, {'end': 1777.007, 'text': "So right here, I'm going to click on reset and that resets it back to the original default of what it was at.", 'start': 1771.26, 'duration': 5.747}, {'end': 1783.435, 'text': 'You also have some other really cool options like text shadow, where you can add some sort of shadow to your text.', 'start': 1778.069, 'duration': 5.366}, {'end': 1785.578, 'text': 'Here you can also adjust the alignments.', 'start': 1784.056, 'duration': 1.522}, {'end': 1787.32, 'text': 'So you can move the alignment here.', 'start': 1785.758, 'duration': 1.562}, {'end': 1790.083, 'text': 'Now remember, it only resides within this little box right here.', 'start': 1787.62, 'duration': 2.463}, {'end': 1793.727, 'text': "So it really can't go too far because over here, there's another box.", 'start': 1790.443, 'duration': 3.284}, {'end': 1796.23, 'text': 'So it can only go within the actual first box.', 'start': 1793.827, 'duration': 2.403}, {'end': 1797.972, 'text': 'And this is a shortcut.', 'start': 1797.091, 'duration': 0.881}, {'end': 1803.237, 'text': "This is like an old option where you can have it light or dark, but that's only if you left it at default settings.", 'start': 1798.352, 'duration': 4.885}, {'end': 1803.958, 'text': 'All right.', 'start': 1803.257, 'duration': 0.701}, {'end': 1807.462, 'text': 'So that is pretty much the text settings here in a nutshell, right?', 'start': 1804.058, 'duration': 3.404}, {'end': 1808.363, 'text': 'Pretty simple, right?', 'start': 1807.622, 'duration': 0.741}, {'end': 1811.666, 'text': "Now I'm gonna go ahead and make it a little bit smaller, like the actual demo.", 'start': 1808.883, 'duration': 2.783}, {'end': 1813.248, 'text': 'All right.', 'start': 1812.967, 'duration': 0.281}, {'end': 1816.171, 'text': "And then I'll go ahead and save the changes.", 'start': 1814.289, 'duration': 1.882}, {'end': 1821.627, 'text': 'Now below that we have another, um, oh no, we have a icon.', 'start': 1817.361, 'duration': 4.266}, {'end': 1823.33, 'text': "So let's go ahead and grab in an icon here.", 'start': 1821.768, 'duration': 1.562}, {'end': 1830.56, 'text': "So to get another element, you would just go ahead and click on the plus icon here, and then we'll type in icon.", 'start': 1823.871, 'duration': 6.689}, {'end': 1832.954, 'text': 'All right.', 'start': 1832.574, 'duration': 0.38}], 'summary': 'The tutorial covers setting the homepage and using divi builder to design a wordpress website with modules, colors, and fonts.', 'duration': 315.139, 'max_score': 1517.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE01517815.jpg'}, {'end': 1602.062, 'src': 'embed', 'start': 1574.173, 'weight': 7, 'content': [{'end': 1579.194, 'text': 'Congratulations We have now uploaded Divi and we are now ready to start designing the WordPress website.', 'start': 1574.173, 'duration': 5.021}, {'end': 1582.635, 'text': "Now, in this next section, I'll be showing you how to use Divi right?", 'start': 1579.714, 'duration': 2.921}, {'end': 1587.637, 'text': "So we'll start using modules, we'll add background colors, we'll make it look like a real website.", 'start': 1582.715, 'duration': 4.922}, {'end': 1591.158, 'text': 'I also do have images for all of you in the description below of this video.', 'start': 1588.077, 'duration': 3.081}, {'end': 1598.441, 'text': 'We also will be giving you guys demo templates a little bit later in the video, but I first want to show you all how to use the Divi builder,', 'start': 1591.518, 'duration': 6.923}, {'end': 1602.062, 'text': 'explain what modules are and how to make columns, and stuff like that.', 'start': 1598.441, 'duration': 3.621}], 'summary': 'Learn to use divi builder to design a wordpress website with modules, background colors, and demo templates.', 'duration': 27.889, 'max_score': 1574.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE01574173.jpg'}, {'end': 2182.233, 'src': 'embed', 'start': 2146.966, 'weight': 5, 'content': [{'end': 2149.628, 'text': 'All right, so congrats, you guys just made a landing page.', 'start': 2146.966, 'duration': 2.662}, {'end': 2150.87, 'text': "No, I'm just kidding, we're not done yet.", 'start': 2149.889, 'duration': 0.981}, {'end': 2155.414, 'text': 'We gotta add in a background, which is probably one of the most important aspects of web design.', 'start': 2151.19, 'duration': 4.224}, {'end': 2159.838, 'text': 'Now, I also wanna educate you guys a little bit on why we added everything to the left side.', 'start': 2155.774, 'duration': 4.064}, {'end': 2162.56, 'text': 'You guys notice you guys go to a lot of these websites here.', 'start': 2160.198, 'duration': 2.362}, {'end': 2169.787, 'text': 'You guys probably go to a lot of websites on the internet, and you always notice the button is on either the middle or on the left side.', 'start': 2163.501, 'duration': 6.286}, {'end': 2177.33, 'text': 'Studies also show that the button on the left side creates more engagement, because right here we see this picture of this cat right?', 'start': 2170.407, 'duration': 6.923}, {'end': 2179.611, 'text': "And the cat's so cute and it's captured my attention.", 'start': 2177.35, 'duration': 2.261}, {'end': 2181.012, 'text': 'Now I want to take action.', 'start': 2180.012, 'duration': 1}, {'end': 2182.233, 'text': "So I'm going to click on the button.", 'start': 2181.032, 'duration': 1.201}], 'summary': 'Adding a left-sided button can increase engagement, as studies show.', 'duration': 35.267, 'max_score': 2146.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE02146966.jpg'}, {'end': 2893.31, 'src': 'heatmap', 'start': 2733.158, 'weight': 0.728, 'content': [{'end': 2741.723, 'text': "so here for the background image size, we're going to change this to something like you know fits, or actual size or stretch to fill,", 'start': 2733.158, 'duration': 8.565}, {'end': 2746.306, 'text': 'or even a custom size, which you guys can also adjust the size of this, which is really cool.', 'start': 2741.723, 'duration': 4.583}, {'end': 2749.007, 'text': "But I'm just going to go ahead and change this to fit.", 'start': 2746.786, 'duration': 2.221}, {'end': 2752.569, 'text': 'And then we can also change the position of this.', 'start': 2750.008, 'duration': 2.561}, {'end': 2756.832, 'text': "So the background image position, I'm going to change this to the center right.", 'start': 2752.889, 'duration': 3.943}, {'end': 2758.581, 'text': "I'm gonna put her over there.", 'start': 2757.841, 'duration': 0.74}, {'end': 2765.825, 'text': "I like this option better because when you add the image to the background, it's a little bit more responsive by default.", 'start': 2759.402, 'duration': 6.423}, {'end': 2767.526, 'text': 'So it looks better on all devices.', 'start': 2765.945, 'duration': 1.581}, {'end': 2774.709, 'text': "However, if I were to create like an image module here and add in the image, it doesn't look as responsive in my personal opinion.", 'start': 2767.966, 'duration': 6.743}, {'end': 2779.271, 'text': 'So I would go ahead and add in an image like this, if you wanna add it to your background,', 'start': 2774.769, 'duration': 4.502}, {'end': 2785.214, 'text': 'cause it just looks a lot nicer and you guys can actually adjust the actual position of the actual image.', 'start': 2779.271, 'duration': 5.943}, {'end': 2787.055, 'text': "So I'll go ahead and click on check.", 'start': 2785.774, 'duration': 1.281}, {'end': 2793.198, 'text': 'And look at that guys, we now have a perfect landing page that we created in just a few minutes.', 'start': 2788.374, 'duration': 4.824}, {'end': 2794.94, 'text': 'It looks very similar to ours.', 'start': 2793.639, 'duration': 1.301}, {'end': 2798.703, 'text': 'In fact, just a small little position of the image.', 'start': 2795.1, 'duration': 3.603}, {'end': 2804.028, 'text': 'This is a little bit larger and bolded, but ultimately it is pretty much the same exact thing.', 'start': 2799.344, 'duration': 4.684}, {'end': 2809.351, 'text': 'Now, the next thing I wanna do here is I wanna actually make this box a little bit larger, right?', 'start': 2805.069, 'duration': 4.282}, {'end': 2812.192, 'text': "It's too small and I want it to stretch over here a little bit.", 'start': 2809.391, 'duration': 2.801}, {'end': 2815.313, 'text': "So to stretch a box, we'll click on the gear icon.", 'start': 2812.612, 'duration': 2.701}, {'end': 2822.916, 'text': "We'll go to design, the spacing, I'm sorry, the sizing, and then we'll actually increase the max width.", 'start': 2816.013, 'duration': 6.903}, {'end': 2826.958, 'text': "So the max width, I want it to extend about 1, 250 pixels or 1, 248, that's fine.", 'start': 2823.576, 'duration': 3.382}, {'end': 2836.464, 'text': "click on check and then maybe we should increase this size, because you know it's just a little too small.", 'start': 2830.899, 'duration': 5.565}, {'end': 2844.71, 'text': "now, now that we've actually made the page a little bit bigger and we can make this a lot bigger like that, and then we can also, you know,", 'start': 2836.464, 'duration': 8.246}, {'end': 2848.693, 'text': 'add some emphasis to it and maybe even all caps.', 'start': 2844.71, 'duration': 3.983}, {'end': 2849.754, 'text': "no, that's fine.", 'start': 2848.693, 'duration': 1.061}, {'end': 2852.576, 'text': "i think that's fine, and then we'll click on check.", 'start': 2849.754, 'duration': 2.822}, {'end': 2854.578, 'text': "so that's how we created a really nice landing page.", 'start': 2852.576, 'duration': 2.002}, {'end': 2855.653, 'text': 'All right.', 'start': 2855.373, 'duration': 0.28}, {'end': 2859.576, 'text': 'next I wanna make sure this background is responsive on all devices, right?', 'start': 2855.653, 'duration': 3.923}, {'end': 2862.599, 'text': "Now I'm gonna introduce you guys to custom CSS.", 'start': 2859.977, 'duration': 2.622}, {'end': 2867.502, 'text': "CSS is normally used by developers, but don't worry, this code is really simple.", 'start': 2863.299, 'duration': 4.203}, {'end': 2870.124, 'text': "You'll just have to copy and paste some code.", 'start': 2867.642, 'duration': 2.482}, {'end': 2876.709, 'text': "So over here under section settings, I wanna go to advanced, and then we're gonna click on custom CSS.", 'start': 2870.665, 'duration': 6.044}, {'end': 2880.714, 'text': 'And for the main elements, I want you guys to paste this code.', 'start': 2877.93, 'duration': 2.784}, {'end': 2885.48, 'text': 'I will leave this code in the description of this video that you guys can use on your websites.', 'start': 2881.154, 'duration': 4.326}, {'end': 2893.31, 'text': "But what this does here is that it actually forces the image to be responsive and it adjusts it perfectly so it's in the middle.", 'start': 2886.121, 'duration': 7.189}], 'summary': 'Demonstrating how to adjust background image size, position, and responsiveness using custom css, resulting in a larger, more impactful landing page.', 'duration': 160.152, 'max_score': 2733.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE02733158.jpg'}, {'end': 2994.566, 'src': 'embed', 'start': 2966.028, 'weight': 9, 'content': [{'end': 2969.91, 'text': "Now we're gonna scroll down till we see scroll effects, and this is really cool.", 'start': 2966.028, 'duration': 3.882}, {'end': 2972.132, 'text': "So we're gonna click on horizontal motion.", 'start': 2970.391, 'duration': 1.741}, {'end': 2976.494, 'text': 'I want to make sure that there is some horizontal motion to this bad boy right?', 'start': 2973.032, 'duration': 3.462}, {'end': 2979.076, 'text': "So we're going to enable horizontal motion.", 'start': 2976.675, 'duration': 2.401}, {'end': 2987.362, 'text': "Now, with this setting here, you'll see that if we scroll down, the cloud actually scrolls with us, which is pretty cool.", 'start': 2979.677, 'duration': 7.685}, {'end': 2989.563, 'text': 'In fact, you can use this for all of your elements.', 'start': 2987.402, 'duration': 2.161}, {'end': 2994.566, 'text': 'But I feel like the cloud here really just adds some, you know, some really neat design to your sites.', 'start': 2990.043, 'duration': 4.523}], 'summary': 'Enabling horizontal motion adds visual interest to elements while scrolling.', 'duration': 28.538, 'max_score': 2966.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE02966028.jpg'}, {'end': 3096.146, 'src': 'embed', 'start': 3066.267, 'weight': 8, 'content': [{'end': 3068.088, 'text': 'uh, just try to stick to like three to four colors.', 'start': 3066.267, 'duration': 1.821}, {'end': 3072.11, 'text': 'you guys can tell on my demo websites that we only use like three or four colors.', 'start': 3068.088, 'duration': 4.022}, {'end': 3074.432, 'text': 'I see a lot of beginners try to add too many colors.', 'start': 3072.33, 'duration': 2.102}, {'end': 3078.154, 'text': 'And what that does is that that loses your brand, it loses your identity.', 'start': 3074.852, 'duration': 3.302}, {'end': 3085.099, 'text': 'So try to stick to around three colors, max four colors on your website and carry that throughout your entire website.', 'start': 3078.534, 'duration': 6.565}, {'end': 3087.14, 'text': "Also, don't use more than two fonts.", 'start': 3085.459, 'duration': 1.681}, {'end': 3089.141, 'text': 'okay, stick to one to two fonts.', 'start': 3087.14, 'duration': 2.001}, {'end': 3091.863, 'text': 'anything more than two fonts, your website will.', 'start': 3089.141, 'duration': 2.722}, {'end': 3093.044, 'text': "it'll start to lose its identity.", 'start': 3091.863, 'duration': 1.181}, {'end': 3094.445, 'text': 'You know, people are kind of like.', 'start': 3093.144, 'duration': 1.301}, {'end': 3096.146, 'text': 'what website is this like?', 'start': 3094.445, 'duration': 1.701}], 'summary': 'Stick to 3-4 colors and 1-2 fonts to maintain brand identity on websites.', 'duration': 29.879, 'max_score': 3066.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03066267.jpg'}], 'start': 540.223, 'title': 'Setting up wordpress and web design with divi theme', 'summary': 'Provides a step-by-step guide on setting up hosting and installing wordpress, including selecting payment methods, navigating the customer portal, and installing wordpress on a new domain. it also covers setting up a wordpress dashboard, installing and activating the divi theme, and creating a landing page with background images, emphasizing the significance of each feature for creating an engaging website.', 'chapters': [{'end': 750.484, 'start': 540.223, 'title': 'Setting up hosting and installing wordpress', 'summary': 'Provides a step-by-step guide on setting up hosting and installing wordpress, including selecting payment methods, navigating the customer portal, and installing wordpress on a new domain, with a focus on ease of use and support response time.', 'duration': 210.261, 'highlights': ['The customer portal provides options for payment methods including PayPal, Coinbase, and credit card, and offers promotional emails, enhancing user experience and engagement.', 'The customer dashboard allows users to manage hosting packages, domains, and access support, with emphasis on the speed of support response, potentially under one hour.', 'The detailed instructions for installing WordPress on a new domain include selecting HTTPS protocol, setting admin username and password, and choosing a preferred language for the website.']}, {'end': 1150.406, 'start': 751.244, 'title': 'Wordpress dashboard and divi theme setup', 'summary': 'Covers setting up a wordpress dashboard, including installation, general settings, and language adjustment, with specific focus on divi theme purchase options and benefits, offering unlimited support, lifetime updates, and 30-day money-back guarantee.', 'duration': 399.162, 'highlights': ['Divi theme purchase options and benefits Divi offers two pricing options, yearly access and lifetime access, with benefits including unlimited support, lifetime updates, and 30-day money-back guarantee.', 'WordPress dashboard setup and language adjustment Instructions for setting up WordPress dashboard, changing general settings, and adjusting the language, with emphasis on site language and permalink settings for SEO practices.', "WordPress installation process and administrative URL Walkthrough of WordPress installation process, duration, and accessing the administrative URL to log in to the website's dashboard."]}, {'end': 2129.914, 'start': 1151.246, 'title': 'Installing and activating divi theme on wordpress', 'summary': 'Provides a detailed guide on how to install and activate the divi theme on a wordpress website, including steps on downloading, uploading, activating the theme, and customizing the website using divi builder, with a focus on visual elements and design options.', 'duration': 978.668, 'highlights': ['The chapter provides a detailed guide on how to install and activate the Divi theme on a WordPress website The guide includes steps on downloading, uploading, activating the theme, and customizing the website using Divi builder.', 'The Divi theme comes with its own theme and the visual page builder, and the Divi builder plugin is just the visual builder for other WordPress themes The Divi theme includes its own theme and the visual page builder, while the Divi builder plugin is specifically for other WordPress themes.', "The chapter explains the steps to activate Divi onto the website using an account's API key from Elegant Themes The chapter provides a demonstration of activating Divi onto the website using an account's API key from Elegant Themes.", 'The chapter demonstrates how to create pages and a menu, including setting the homepage as a default page The chapter covers creating pages, setting the homepage as a default, and arranging the menu for the website.', 'The chapter explains how to use Divi builder to design the website, including adding modules, adjusting text settings, and designing elements The guide includes using Divi builder to design the website, adding modules, adjusting text settings, and designing elements.']}, {'end': 2511.054, 'start': 2130.134, 'title': 'Web design background options', 'summary': 'Discusses the importance of background in web design, the impact of button placement on user engagement, and demonstrates how to add background color, gradient, image, video, pattern, and mask using divi, emphasizing the significance of each feature for creating an engaging website.', 'duration': 380.92, 'highlights': ['The importance of background in web design The chapter emphasizes the significance of background in web design, highlighting its importance for creating an engaging website.', 'Impact of button placement on user engagement The chapter discusses the impact of button placement on user engagement, stating that placing the button on the left side creates more engagement, supported by studies.', 'Adding background color, gradient, image, video, pattern, and mask using Divi The chapter demonstrates how to add background color, gradient, image, video, pattern, and mask using Divi, providing step-by-step guidance for each feature.']}, {'end': 3102.15, 'start': 2511.494, 'title': 'Creating a landing page with background images', 'summary': 'Covers creating a landing page with background images, utilizing practice images for tutorials, and providing design tips such as color scheme and font usage for web design.', 'duration': 590.656, 'highlights': ['Utilizing practice images for tutorials The speaker provides demo images for viewers to use as practice images, aiding in following along with the tutorials.', 'Design tip: Stick to three to four colors and one to two fonts for website design The speaker advises sticking to a specific color scheme of three to four colors and using only one to two fonts to maintain brand identity and avoid overwhelming website design.', 'Introduction to motion effects and design customization The speaker introduces motion effects for design customization, demonstrating the use of horizontal motion for a cloud element on the website to enhance design.']}], 'duration': 2561.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE0540223.jpg', 'highlights': ['The customer portal offers payment methods including PayPal, Coinbase, and credit card, enhancing user experience.', 'Divi theme purchase options include yearly access, lifetime access, unlimited support, and 30-day money-back guarantee.', 'Instructions for installing WordPress on a new domain include selecting HTTPS protocol and setting admin username and password.', 'The customer dashboard allows managing hosting packages, domains, and access support with emphasis on speed of support response.', 'The chapter provides a detailed guide on how to install and activate the Divi theme on a WordPress website.', 'The chapter emphasizes the significance of background in web design for creating an engaging website.', 'The chapter discusses the impact of button placement on user engagement, stating that placing the button on the left side creates more engagement.', 'The chapter demonstrates how to add background color, gradient, image, video, pattern, and mask using Divi.', 'The speaker advises sticking to a specific color scheme of three to four colors and using only one to two fonts for website design.', 'The speaker introduces motion effects for design customization, demonstrating the use of horizontal motion for a cloud element on the website.']}, {'end': 4013.579, 'segs': [{'end': 3129.933, 'src': 'embed', 'start': 3102.19, 'weight': 9, 'content': [{'end': 3107.955, 'text': "So now that you guys have a good understanding of how to design and add elements, let's go ahead and move on to the next section here.", 'start': 3102.19, 'duration': 5.765}, {'end': 3112.519, 'text': "So right here, we'll click on the plus icon for the blue setting.", 'start': 3108.416, 'duration': 4.103}, {'end': 3116.883, 'text': 'And now we have three options, right? We have regular, specialty, and full width.', 'start': 3112.619, 'duration': 4.264}, {'end': 3123.088, 'text': 'We already did regular, so I just want to introduce you guys to these other two before we go on any further.', 'start': 3117.843, 'duration': 5.245}, {'end': 3129.933, 'text': 'Specialty is just adding like a special type of column here, where here you can see that these are a little bit longer.', 'start': 3123.748, 'duration': 6.185}], 'summary': 'Introduction to adding elements: regular, specialty, and full width options demonstrated.', 'duration': 27.743, 'max_score': 3102.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03102190.jpg'}, {'end': 3164.734, 'src': 'embed', 'start': 3139.741, 'weight': 3, 'content': [{'end': 3146.247, 'text': "You know, you can insert an image module here, a text, a call to action, call to action, right? So it really depends on what you're trying to go for.", 'start': 3139.741, 'duration': 6.506}, {'end': 3149.508, 'text': "There's also the full width section here.", 'start': 3146.947, 'duration': 2.561}, {'end': 3152.95, 'text': 'The full width section allows you to add in full width elements.', 'start': 3150.289, 'duration': 2.661}, {'end': 3159.072, 'text': 'These elements extend all the way to the ends of the page, and some of them even extend on the entire page itself.', 'start': 3153.39, 'duration': 5.682}, {'end': 3164.734, 'text': "For example, here I'll just grab in the full width header, which is a very popular one,", 'start': 3159.572, 'duration': 5.162}], 'summary': 'The full width section allows adding elements that extend to the ends of the page and even the entire page itself.', 'duration': 24.993, 'max_score': 3139.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03139741.jpg'}, {'end': 3367.562, 'src': 'embed', 'start': 3335.202, 'weight': 1, 'content': [{'end': 3338.303, 'text': 'All right, so now I wanna teach you guys how to manage the blurbs.', 'start': 3335.202, 'duration': 3.101}, {'end': 3339.583, 'text': 'Blurbs are pretty popular.', 'start': 3338.423, 'duration': 1.16}, {'end': 3343.664, 'text': 'Right here, you can see that this is a blurb, right? It has this icon with some text.', 'start': 3339.823, 'duration': 3.841}, {'end': 3347.225, 'text': 'And yeah, blurbs are actually a really popular element.', 'start': 3344.244, 'duration': 2.981}, {'end': 3349.666, 'text': "So right here, let's go ahead and design this really quick.", 'start': 3347.245, 'duration': 2.421}, {'end': 3353.907, 'text': "We're gonna go ahead and change this title right here to something like digital marketing.", 'start': 3349.686, 'duration': 4.221}, {'end': 3361.409, 'text': 'And for the body paragraph, you guys can obviously put something that relates to your website.', 'start': 3356.288, 'duration': 5.121}, {'end': 3367.562, 'text': "But I'll just go ahead and put in like official marketing partner.", 'start': 3362.129, 'duration': 5.433}], 'summary': "Tutorial on managing blurbs, a popular element, with example of changing title to 'digital marketing' and body to 'official marketing partner'.", 'duration': 32.36, 'max_score': 3335.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03335202.jpg'}, {'end': 3405.013, 'src': 'embed', 'start': 3377.274, 'weight': 2, 'content': [{'end': 3384.923, 'text': "So you can use an image, but if you don't have an image, you can use their library of like icons and they have tons and tons of them to go through.", 'start': 3377.274, 'duration': 7.649}, {'end': 3390.183, 'text': "I'll just go ahead and put in something and then we can customize and design this.", 'start': 3385.88, 'duration': 4.303}, {'end': 3395.547, 'text': "Now, to be honest, if you go on the design tab, it's hard to find out where to actually go to design stuff.", 'start': 3390.643, 'duration': 4.904}, {'end': 3398.729, 'text': "So for every module, there's this little pencil icon.", 'start': 3395.667, 'duration': 3.062}, {'end': 3405.013, 'text': 'This will automatically take you to the settings that are there that you guys would, you know, design everything with.', 'start': 3399.169, 'duration': 5.844}], 'summary': 'The platform offers a library of icons for design, with a little pencil icon for module settings.', 'duration': 27.739, 'max_score': 3377.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03377274.jpg'}, {'end': 3525.663, 'src': 'embed', 'start': 3499.754, 'weight': 7, 'content': [{'end': 3505.597, 'text': "Now here we have the text, so we can adjust the alignments of the actual text here, but I'm gonna leave it to the left side.", 'start': 3499.754, 'duration': 5.843}, {'end': 3509.119, 'text': 'And then we can adjust the actual font here as well.', 'start': 3506.978, 'duration': 2.141}, {'end': 3511.7, 'text': "So I'm gonna change mine to Jost, right? Jost.", 'start': 3509.159, 'duration': 2.541}, {'end': 3515.518, 'text': "I think that's fine like that.", 'start': 3514.377, 'duration': 1.141}, {'end': 3523.142, 'text': 'Change this to like a black, right? And we can make this bigger or smaller, right? So we can make this bigger or smaller.', 'start': 3517.258, 'duration': 5.884}, {'end': 3525.663, 'text': 'Probably do like 25, right? Something like that.', 'start': 3523.162, 'duration': 2.501}], 'summary': 'Adjusting text alignment, font, size, and color for better visibility and aesthetics.', 'duration': 25.909, 'max_score': 3499.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03499754.jpg'}, {'end': 3623.44, 'src': 'embed', 'start': 3597.897, 'weight': 4, 'content': [{'end': 3604.161, 'text': "So this little thing right here we're going to click on save module to library and this will be like the button for our website.", 'start': 3597.897, 'duration': 6.264}, {'end': 3607.983, 'text': "And we're just going to save this to the library.", 'start': 3605.561, 'duration': 2.422}, {'end': 3610.925, 'text': "That's basically saying that I want to use this for later.", 'start': 3608.423, 'duration': 2.502}, {'end': 3612.866, 'text': 'In fact, you can do this for all of your modules.', 'start': 3611.145, 'duration': 1.721}, {'end': 3623.44, 'text': 'So if you want to, uh, grab this text, you can say, this is like the primary text, right? And I will save this to the actual menu as well.', 'start': 3613.106, 'duration': 10.334}], 'summary': 'Save module to library for website design and reuse.', 'duration': 25.543, 'max_score': 3597.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03597897.jpg'}, {'end': 3737.423, 'src': 'embed', 'start': 3704.024, 'weight': 0, 'content': [{'end': 3704.544, 'text': 'Just like that.', 'start': 3704.024, 'duration': 0.52}, {'end': 3707.525, 'text': 'So now we have these three options, which I do like.', 'start': 3705.104, 'duration': 2.421}, {'end': 3708.746, 'text': 'I think this looks a lot nicer.', 'start': 3707.545, 'duration': 1.201}, {'end': 3714.487, 'text': "Now let's say, for example, you want to add a background color to the first icon here or the first row.", 'start': 3709.366, 'duration': 5.121}, {'end': 3716.348, 'text': "You'll click on the gear icon.", 'start': 3715.227, 'duration': 1.121}, {'end': 3718.422, 'text': "And then you'll go to backgrounds.", 'start': 3717.281, 'duration': 1.141}, {'end': 3720.843, 'text': 'And then from here, you can add a background color.', 'start': 3719.142, 'duration': 1.701}, {'end': 3729.527, 'text': "So let's say you want to add in red, right? But I want to reduce the subtleness of that, right? Something like that.", 'start': 3721.263, 'duration': 8.264}, {'end': 3737.423, 'text': 'I think that looks a lot nicer, right? Now you guys might also notice here how this color is just way too close to the button.', 'start': 3729.547, 'duration': 7.876}], 'summary': 'Options for adding background color, improving subtleness, and color contrast are discussed.', 'duration': 33.399, 'max_score': 3704.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03704024.jpg'}, {'end': 3798.364, 'src': 'embed', 'start': 3767.45, 'weight': 5, 'content': [{'end': 3769.631, 'text': "It's like you know, we got some room here.", 'start': 3767.45, 'duration': 2.181}, {'end': 3773.492, 'text': 'And over here for the border, we can add in like this rounded effect.', 'start': 3770.171, 'duration': 3.321}, {'end': 3775.433, 'text': "So it's not so pointy.", 'start': 3774.012, 'duration': 1.421}, {'end': 3777.333, 'text': 'So that looks a lot nicer, right?', 'start': 3775.573, 'duration': 1.76}, {'end': 3785.276, 'text': 'Now, instead of actually doing this all over again, we can actually copy these styles and we can address it to these next two modules.', 'start': 3778.053, 'duration': 7.223}, {'end': 3788.598, 'text': "So for example, here, I'm going to click on this little gear icon.", 'start': 3785.856, 'duration': 2.742}, {'end': 3794.842, 'text': "Under the first one right here, I'm going to right click and we can go to copy item styles.", 'start': 3789.979, 'duration': 4.863}, {'end': 3798.364, 'text': 'And on the second one, I can paste the item styles.', 'start': 3795.062, 'duration': 3.302}], 'summary': 'Improving design by adding rounded effect, and efficiently copying styles to other modules.', 'duration': 30.914, 'max_score': 3767.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03767450.jpg'}, {'end': 3995.739, 'src': 'embed', 'start': 3972.776, 'weight': 8, 'content': [{'end': 3979.901, 'text': "So I'll just go ahead and add in a very, a very faint color here, you know, like a very small one here.", 'start': 3972.776, 'duration': 7.125}, {'end': 3984.405, 'text': 'right?. Just like a very faint color like that.', 'start': 3979.901, 'duration': 4.504}, {'end': 3985.786, 'text': 'And there you go.', 'start': 3985.225, 'duration': 0.561}, {'end': 3987.927, 'text': 'Now we have this sort of masking style effect.', 'start': 3985.846, 'duration': 2.081}, {'end': 3988.548, 'text': 'All right.', 'start': 3988.308, 'duration': 0.24}, {'end': 3995.739, 'text': "So that's how you guys can use the background masks, add an elements and just have a really nice looking little section right here.", 'start': 3989.775, 'duration': 5.964}], 'summary': 'Demonstrated adding a faint color for masking effect in design.', 'duration': 22.963, 'max_score': 3972.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03972776.jpg'}], 'start': 3102.19, 'title': 'Website design customization', 'summary': 'Covers customizing website design elements such as columns, background colors, padding, border styles, copying styles, extending styles, adding new rows and modules, and using background masks to create a professional and visually appealing website layout.', 'chapters': [{'end': 3238.032, 'start': 3102.19, 'title': 'Designing and adding elements', 'summary': 'Introduces the options of regular, specialty, and full width elements, highlighting their differences and limitations, and discusses their diverse uses for adding content.', 'duration': 135.842, 'highlights': ['The chapter introduces the options of regular, specialty, and full width elements The chapter discusses the three options available for adding elements to the design, including regular, specialty, and full width.', 'Discusses the diverse uses for adding content The speaker explains the various uses for the different types of elements, such as inserting images, text, or call to action, depending on the desired presentation.', 'Highlights the limitations of the full width elements The speaker emphasizes that full width elements have limitations, such as being preset and not allowing the addition of modules on top of the text module, compared to regular modules.']}, {'end': 3680.412, 'start': 3238.092, 'title': 'Managing website elements', 'summary': 'Covers the concept of call to action and blurb, demonstrating how to design and customize them, as well as how to save and reuse modules, with emphasis on using icons and images and adjusting text and button properties.', 'duration': 442.32, 'highlights': ['The chapter covers the concept of call to action and blurb The speaker explains the concept of call to action and blurb, emphasizing their purpose in inviting users to take action.', 'Demonstrating how to design and customize elements like blurb and button The speaker provides a step-by-step demonstration of designing and customizing elements such as blurbs and buttons, including changing titles, adding images, and adjusting colors and sizes.', 'Emphasizing the process of saving and reusing modules The importance of saving and reusing modules is highlighted, with the speaker explaining how to save elements like buttons and text to the library for future use.', 'Using icons and images as part of element customization The chapter highlights the option of using icons and images for customization, demonstrating the use of icons in blurbs and showcasing the process of adding images and text for employee profiles.', 'Adjusting text and button properties for effective design The speaker demonstrates the process of adjusting text properties like font, size, and line height, as well as adjusting button properties such as corners and saving the customized elements for future use.']}, {'end': 4013.579, 'start': 3680.933, 'title': 'Website design customization', 'summary': 'Covers customizing website design elements such as columns, background colors, padding, border styles, copying styles, extending styles, adding new rows and modules, and using background masks to create a professional and visually appealing website layout.', 'duration': 332.646, 'highlights': ['Customizing website design elements The speaker discusses customizing design elements such as columns, background colors, padding, and border styles to enhance the visual appeal of the website.', 'Copying and extending styles The process of copying and extending styles is explained, which includes duplicating settings from one module to another, as well as extending styles to multiple elements to speed up the workflow.', 'Adding new rows and modules The speaker demonstrates adding new rows and modules and utilizing saved elements to efficiently create and position content within the website layout.', 'Using background masks The concept of using background masks to add subtle color effects to the website layout is introduced, providing a visually appealing design element for the website.']}], 'duration': 911.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE03102190.jpg', 'highlights': ['Customizing website design elements like columns, background colors, padding, and border styles', 'Demonstrating how to design and customize elements like blurb and button', 'Using icons and images as part of element customization', 'Adding new rows and modules to efficiently create and position content', 'Emphasizing the process of saving and reusing modules', 'Copying and extending styles to speed up the workflow', 'Discussing the diverse uses for adding content', 'Adjusting text and button properties for effective design', 'Using background masks to add subtle color effects to the website layout', 'Introducing the options of regular, specialty, and full width elements']}, {'end': 4913.121, 'segs': [{'end': 4112.011, 'src': 'embed', 'start': 4077.516, 'weight': 1, 'content': [{'end': 4078.337, 'text': "I'm gonna change that to one.", 'start': 4077.516, 'duration': 0.821}, {'end': 4080.761, 'text': "All right, so now there's no more space.", 'start': 4078.357, 'duration': 2.404}, {'end': 4082.343, 'text': 'You guys see that? No space at all.', 'start': 4080.941, 'duration': 1.402}, {'end': 4084.826, 'text': 'And over here, we have the width.', 'start': 4083.545, 'duration': 1.281}, {'end': 4086.578, 'text': "I'm gonna make it 100%.", 'start': 4086.138, 'duration': 0.44}, {'end': 4089.079, 'text': 'And here you have the max width.', 'start': 4086.578, 'duration': 2.501}, {'end': 4095.203, 'text': 'Now what the max width means is this is basically applying to the screen size of the actual visitor.', 'start': 4089.54, 'duration': 5.663}, {'end': 4099.465, 'text': "So right now I'm going to just apply it to like 1800.", 'start': 4095.683, 'duration': 3.782}, {'end': 4105.188, 'text': 'This means if the user is on a monitor up to 1800 pixels, it will stay full width.', 'start': 4099.465, 'duration': 5.723}, {'end': 4112.011, 'text': 'But if they are on like a four or 8K monitor, then you might have to add in more pixels for that specific user right?', 'start': 4105.368, 'duration': 6.643}], 'summary': 'Adjusting width and max width for screen size, up to 1800 pixels.', 'duration': 34.495, 'max_score': 4077.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04077516.jpg'}, {'end': 4173.917, 'src': 'embed', 'start': 4145.948, 'weight': 0, 'content': [{'end': 4150.251, 'text': "What that means is I don't want any space whatsoever in this column.", 'start': 4145.948, 'duration': 4.303}, {'end': 4154.732, 'text': 'Now for this blue column, we also need to get rid of this space on all the sides.', 'start': 4150.85, 'duration': 3.882}, {'end': 4162.354, 'text': 'So the gear icon, design, spacing, 0000 as well.', 'start': 4155.112, 'duration': 7.242}, {'end': 4163.774, 'text': 'And there you go.', 'start': 4163.113, 'duration': 0.661}, {'end': 4165.314, 'text': 'So now we have this beautiful grid.', 'start': 4163.814, 'duration': 1.5}, {'end': 4169.256, 'text': 'which we can put on, you know, any images and make it look really nice.', 'start': 4166.255, 'duration': 3.001}, {'end': 4173.917, 'text': "So that's how you guys would achieve a grid style effect for your websites.", 'start': 4169.696, 'duration': 4.221}], 'summary': 'Achieve a grid style effect for websites with no space, making images look really nice.', 'duration': 27.969, 'max_score': 4145.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04145948.jpg'}, {'end': 4295.57, 'src': 'embed', 'start': 4265.464, 'weight': 2, 'content': [{'end': 4267.285, 'text': 'and main button and use this module.', 'start': 4265.464, 'duration': 1.821}, {'end': 4270.586, 'text': 'This is a lot faster than doing it, you know, all from scratch.', 'start': 4267.585, 'duration': 3.001}, {'end': 4275.048, 'text': 'I mean, it would take way too long, right? So next we need to add in the toggle module.', 'start': 4270.726, 'duration': 4.322}, {'end': 4280.13, 'text': "So right here, click on plus and we're going to type in toggle.", 'start': 4275.248, 'duration': 4.882}, {'end': 4286.253, 'text': 'toggle means that if they click on this, it will then open up a little bit more information like that, which is really cool.', 'start': 4280.13, 'duration': 6.123}, {'end': 4289.234, 'text': 'So this will be like digital marketing, right? Digital marketing.', 'start': 4286.873, 'duration': 2.361}, {'end': 4295.57, 'text': 'And then we have some other information, and this would be the information that would.', 'start': 4291.929, 'duration': 3.641}], 'summary': 'Using modules for efficiency, adding toggle functionality for digital marketing content.', 'duration': 30.106, 'max_score': 4265.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04265464.jpg'}, {'end': 4524.146, 'src': 'embed', 'start': 4501.036, 'weight': 3, 'content': [{'end': 4509.22, 'text': "now, dividers are not necessarily for creating division or creating space, yet they're also used for decor and design purposes,", 'start': 4501.036, 'duration': 8.184}, {'end': 4511.421, 'text': 'for example this website.', 'start': 4509.22, 'duration': 2.201}, {'end': 4519.424, 'text': "you can see how we added in these dividers right here just to break up all this text, so it's not so distracting on the eye right.", 'start': 4511.421, 'duration': 8.003}, {'end': 4524.146, 'text': 'so we just want to make it look a little bit more nicer by putting in text divider text.', 'start': 4519.424, 'duration': 4.722}], 'summary': 'Dividers are used for decor and design, breaking up text for a more visually appealing website.', 'duration': 23.11, 'max_score': 4501.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04501036.jpg'}, {'end': 4860.262, 'src': 'embed', 'start': 4831.103, 'weight': 4, 'content': [{'end': 4833.625, 'text': 'Bar counters are another new module, right? This one right here.', 'start': 4831.103, 'duration': 2.522}, {'end': 4839.631, 'text': 'And what we can do here is we can just go ahead and make it like our demo.', 'start': 4834.806, 'duration': 4.825}, {'end': 4843.114, 'text': "So this will be like marketing, right? So over here, I'm gonna click on the title.", 'start': 4839.671, 'duration': 3.443}, {'end': 4844.315, 'text': 'This will be marketing.', 'start': 4843.575, 'duration': 0.74}, {'end': 4852.695, 'text': 'And this is like 90%, right? And then over here under the design tab, this is where you guys can actually design stuff.', 'start': 4845.717, 'duration': 6.978}, {'end': 4860.262, 'text': "So let's say I want it red, right? For the title, you can move the title around here, but I'm gonna leave it to the left side.", 'start': 4852.755, 'duration': 7.507}], 'summary': 'New bar counters module for marketing, 90% completion, design customization.', 'duration': 29.159, 'max_score': 4831.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04831103.jpg'}], 'start': 4013.579, 'title': 'Creating grid style effect and using modules for website design', 'summary': 'Demonstrates how to create a grid style effect for websites and efficiently use modules for website design, including adjusting image sizing and spacing, achieving a clean layout, and utilizing dividers, image filters, and bar counters for responsive design.', 'chapters': [{'end': 4120.156, 'start': 4013.579, 'title': 'Creating grid style effect', 'summary': 'Demonstrates how to create a grid style effect by adjusting image sizing and spacing, with a focus on achieving a clean layout and responsive design for various screen sizes.', 'duration': 106.577, 'highlights': ['By adjusting the gutter width to one, the chapter demonstrates the elimination of spacing between the images, creating a clean grid layout.', 'The chapter explains the concept of max width, where a value of 1800 pixels is used for the screen size, ensuring a full-width display on monitors up to 1800 pixels.', 'The demonstration emphasizes the ease of duplicating images and adjusting their layout, showcasing a time-saving approach to creating the grid style effect.']}, {'end': 4913.121, 'start': 4120.996, 'title': 'Creating grid style effect and using modules for website design', 'summary': 'Explains the process of creating a grid style effect for websites and demonstrates the efficient use of modules for website design, including the utilization of dividers, image filters, and bar counters.', 'duration': 792.125, 'highlights': ['The chapter explains the process of creating a grid style effect for websites The speaker demonstrates how to remove white space and create a grid style effect for website design, ensuring zero padding on all sides for columns.', 'Efficient use of modules for website design The speaker efficiently utilizes modules by reusing existing elements, such as text and buttons, from the library, emphasizing working smarter, not harder.', 'Demonstrating the utilization of dividers for design purposes The speaker discusses the use of dividers for design purposes, highlighting their role in creating a visually appealing layout and breaking up text for improved aesthetics.', 'Explaining the functionality of image filters and transforms The speaker explains the functionalities of image filters, such as adjusting contrast and brightness, and warns about potential responsive issues when using transform options.', "Effective use of bar counters for showcasing data The speaker adds bar counters to display data, showcasing the efficient use of the module to present percentages and design elements to match the website's aesthetics."]}], 'duration': 899.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04013579.jpg', 'highlights': ['The chapter demonstrates the elimination of spacing between images, creating a clean grid layout.', 'The chapter explains the concept of max width, using a value of 1800 pixels for full-width display.', 'Efficient use of modules for website design, emphasizing working smarter, not harder.', 'Demonstrating the utilization of dividers for design purposes, creating a visually appealing layout.', 'Effective use of bar counters to display data, showcasing the efficient use of the module.']}, {'end': 5948.421, 'segs': [{'end': 4970.289, 'src': 'embed', 'start': 4937.458, 'weight': 0, 'content': [{'end': 4938.018, 'text': 'And there it is.', 'start': 4937.458, 'duration': 0.56}, {'end': 4940.079, 'text': 'So now we have this beautiful section.', 'start': 4938.098, 'duration': 1.981}, {'end': 4942.64, 'text': 'All we need to do now is get rid of that background image.', 'start': 4940.359, 'duration': 2.281}, {'end': 4948.081, 'text': "So I'm gonna double click here, background, background image, and I'm going to delete that.", 'start': 4942.66, 'duration': 5.421}, {'end': 4949.382, 'text': 'And there you go.', 'start': 4948.522, 'duration': 0.86}, {'end': 4951.983, 'text': 'We have successfully made another section.', 'start': 4949.782, 'duration': 2.201}, {'end': 4957.665, 'text': "Now the next section here is, it's interesting, right? three column row right here.", 'start': 4952.443, 'duration': 5.222}, {'end': 4964.227, 'text': "And I added a lot of padding here to this blurb to give it this effect that it's in the middle of this whole box.", 'start': 4957.825, 'duration': 6.402}, {'end': 4965.608, 'text': "So it's really interesting.", 'start': 4964.507, 'duration': 1.101}, {'end': 4970.289, 'text': "So let's go ahead and utilize this next section right here.", 'start': 4965.628, 'duration': 4.661}], 'summary': 'Successfully removed background image, added padding for effect, moving to next section.', 'duration': 32.831, 'max_score': 4937.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04937458.jpg'}, {'end': 5107.368, 'src': 'embed', 'start': 5064.983, 'weight': 2, 'content': [{'end': 5066.524, 'text': 'And I think we should reduce the size of this.', 'start': 5064.983, 'duration': 1.541}, {'end': 5069.846, 'text': "You can see this is a lot smaller and also it's center aligned.", 'start': 5066.564, 'duration': 3.282}, {'end': 5074.968, 'text': "So what I'm gonna do here is I'm gonna make this just a lot smaller here, like just 40.", 'start': 5069.906, 'duration': 5.062}, {'end': 5080.271, 'text': 'And then for this text, we are now going to make this center aligned like that, all right?', 'start': 5074.968, 'duration': 5.303}, {'end': 5084.694, 'text': "Now, the first thing that we're gonna do is we are going to spread out this column right?", 'start': 5080.832, 'duration': 3.862}, {'end': 5087.166, 'text': "So we're going to make this a little bit bigger.", 'start': 5085.905, 'duration': 1.261}, {'end': 5088.067, 'text': 'All right.', 'start': 5087.186, 'duration': 0.881}, {'end': 5089.689, 'text': 'Design sizing.', 'start': 5088.087, 'duration': 1.602}, {'end': 5093.073, 'text': 'We are going to go ahead and increase the max width here.', 'start': 5090.51, 'duration': 2.563}, {'end': 5094.374, 'text': "Well, first we'll do like 90%.", 'start': 5093.093, 'duration': 1.281}, {'end': 5097.517, 'text': "And then we're going to increase the max size here.", 'start': 5094.374, 'duration': 3.143}, {'end': 5099.499, 'text': 'Right now.', 'start': 5098.038, 'duration': 1.461}, {'end': 5103.504, 'text': "Also, what we're going to do is that we're going to make these images larger, right?", 'start': 5099.62, 'duration': 3.884}, {'end': 5107.368, 'text': "So what I'm going to do here is I'm going to take this and I'm going to drag it.", 'start': 5103.524, 'duration': 3.844}], 'summary': 'Reducing size, center aligning, spreading column, increasing max width to 90%, and enlarging images.', 'duration': 42.385, 'max_score': 5064.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE05064983.jpg'}, {'end': 5625.573, 'src': 'embed', 'start': 5596.029, 'weight': 1, 'content': [{'end': 5599.17, 'text': "It's really all about being creative with, you know, with Divi in the module.", 'start': 5596.029, 'duration': 3.141}, {'end': 5603.092, 'text': "So yeah, I just wanted to throw that out there, but let's go ahead and jump back to the tutorial.", 'start': 5599.23, 'duration': 3.862}, {'end': 5607.489, 'text': "Alright, so now for the next section, we're going to make this section here.", 'start': 5604.028, 'duration': 3.461}, {'end': 5610.189, 'text': 'Now this is actually a specialty section.', 'start': 5607.889, 'duration': 2.3}, {'end': 5617.871, 'text': 'This is one of the other options and we wanted to use this to sort of teach you guys how to actually use the actual specialty section.', 'start': 5610.469, 'duration': 7.402}, {'end': 5619.071, 'text': "So we're going to do that.", 'start': 5618.311, 'duration': 0.76}, {'end': 5620.872, 'text': "Let's go ahead and get started.", 'start': 5619.811, 'duration': 1.061}, {'end': 5625.573, 'text': "Right here, we're going to click on plus and we're going to add in a new specialty section.", 'start': 5621.552, 'duration': 4.021}], 'summary': 'Tutorial on using divi module for creating a specialty section.', 'duration': 29.544, 'max_score': 5596.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE05596029.jpg'}, {'end': 5930.913, 'src': 'embed', 'start': 5904.161, 'weight': 3, 'content': [{'end': 5909.784, 'text': 'so it shows the user all this information and they can read about it, and as they read about it,', 'start': 5904.161, 'duration': 5.623}, {'end': 5913.827, 'text': 'they might be convinced and influenced to purchase the product.', 'start': 5909.784, 'duration': 4.043}, {'end': 5917.229, 'text': 'once that happens, they then click on the button and they go to the website.', 'start': 5913.827, 'duration': 3.402}, {'end': 5922.391, 'text': 'If they click on it and they purchase something, I then do make a commission.', 'start': 5917.709, 'duration': 4.682}, {'end': 5927.572, 'text': 'So this is how you guys can use the actual sticky feature on your website.', 'start': 5922.511, 'duration': 5.061}, {'end': 5930.913, 'text': 'Now you guys can also apply it to specific elements.', 'start': 5928.272, 'duration': 2.641}], 'summary': 'Sticky feature can influence users to purchase, leading to commissions for website owners.', 'duration': 26.752, 'max_score': 5904.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE05904161.jpg'}], 'start': 4913.142, 'title': 'Web design elements', 'summary': 'Covers quick creation of website sections with design elements, optimizing design by adjusting text size, column width, and using modules creatively in web design with examples and marketing tactics.', 'chapters': [{'end': 5064.503, 'start': 4913.142, 'title': 'Website design section creation', 'summary': 'Covers the quick creation of website sections with various design elements including background color, borders, images, and icons.', 'duration': 151.361, 'highlights': ['The speaker demonstrates the quick creation of website sections, highlighting the addition of background color and the removal of background images.', "The speaker showcases the utilization of design elements such as padding, borders, and images to enhance the section's appearance.", 'The process involves adding icons and adjusting text styles to maintain consistency and improve visual appeal.']}, {'end': 5577.661, 'start': 5064.983, 'title': 'Web design optimization', 'summary': 'Discusses optimizing web design by adjusting text size, column width, image margin, padding, adding box shadows, and creating sections with images and padding, emphasizing the importance of design elements.', 'duration': 512.678, 'highlights': ['Adjusting text size and alignment The speaker emphasizes the reduction of text size to 40 and center alignment, aiming to optimize the design for better visual appeal.', 'Increasing column width and max width The speaker focuses on spreading out the column, increasing the max width to 90% to enhance the layout and design of the web page.', 'Manipulating image size and margin The speaker demonstrates dragging images to create margin, explaining the concept of margin as a way to position elements, and using negative margin to force image placement, emphasizing the importance of margin in design.', "Utilizing box shadows for emphasis The speaker discusses adding box shadows to elements, cautioning against excessive use to maintain the website's identity and visual appeal.", 'Creating sections with images and padding The speaker illustrates the process of creating sections with images and padding, highlighting the importance of padding and demonstrating how to adjust gutter widths and space.']}, {'end': 5948.421, 'start': 5578.561, 'title': 'Using modules creatively in web design', 'summary': 'Discusses the creative usage of divi modules, including examples of customizing specialty sections and utilizing the sticky feature for marketing tactics.', 'duration': 369.86, 'highlights': ['The chapter discusses the creative usage of Divi modules The speaker emphasizes the flexibility of using modules creatively in web design, providing examples of using call to actions without the button module and customizing specialty sections.', 'Utilizing the sticky feature for marketing tactics The speaker demonstrates how to use the sticky feature to make specific elements stay with the user as they scroll down, highlighting its application for marketing tactics such as offering discounts and influencing purchasing decisions.', 'Customizing specialty sections The speaker guides the audience through customizing a specialty section, including adding text, images, and testimonials, while encouraging creative usage of modules for different purposes such as showcasing staff or client testimonials.']}], 'duration': 1035.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE04913142.jpg', 'highlights': ['The speaker demonstrates the quick creation of website sections, highlighting the addition of background color and the removal of background images.', 'The chapter discusses the creative usage of Divi modules, emphasizing the flexibility of using modules creatively in web design.', 'Adjusting text size and alignment The speaker emphasizes the reduction of text size to 40 and center alignment, aiming to optimize the design for better visual appeal.', 'Utilizing the sticky feature for marketing tactics The speaker demonstrates how to use the sticky feature to make specific elements stay with the user as they scroll down, highlighting its application for marketing tactics such as offering discounts and influencing purchasing decisions.', 'Increasing column width and max width The speaker focuses on spreading out the column, increasing the max width to 90% to enhance the layout and design of the web page.']}, {'end': 7004.271, 'segs': [{'end': 6023.551, 'src': 'embed', 'start': 5997.612, 'weight': 1, 'content': [{'end': 6003.436, 'text': 'So and every time we make a post, they will display right here under the news and article section automatically.', 'start': 5997.612, 'duration': 5.824}, {'end': 6006.779, 'text': 'And you guys can also design your actual blog element.', 'start': 6004.157, 'duration': 2.622}, {'end': 6009.581, 'text': 'So for example, you can see that we have this blog here.', 'start': 6006.799, 'duration': 2.782}, {'end': 6014.385, 'text': 'And for the design, we can design every part of the actual blog.', 'start': 6010.202, 'duration': 4.183}, {'end': 6019.67, 'text': 'So we can design the title right here by you know, changing the actual font to you know, whatever.', 'start': 6014.445, 'duration': 5.225}, {'end': 6023.551, 'text': 'And then we can also do the same thing for the meta text.', 'start': 6020.39, 'duration': 3.161}], 'summary': 'Automated post display under news and article section, customizable blog design.', 'duration': 25.939, 'max_score': 5997.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE05997612.jpg'}, {'end': 6069.853, 'src': 'embed', 'start': 6044.021, 'weight': 0, 'content': [{'end': 6050.144, 'text': "We'll talk more about blogs a little bit later in this video, but I just wanted to introduce you all to the blog module.", 'start': 6044.021, 'duration': 6.123}, {'end': 6051.445, 'text': 'It is very popular.', 'start': 6050.505, 'duration': 0.94}, {'end': 6055.828, 'text': 'A lot of users tend to use them because you can make some really nice looking blog posts with it.', 'start': 6051.605, 'duration': 4.223}, {'end': 6059.05, 'text': 'But yeah, that is the example of a blog module.', 'start': 6056.268, 'duration': 2.782}, {'end': 6062.771, 'text': 'And guys, this is the very last section of the homepage.', 'start': 6059.97, 'duration': 2.801}, {'end': 6069.853, 'text': 'And just by looking at this, I think you guys can already know what this is, right? So we have a two column row, right? We have a two column row.', 'start': 6063.211, 'duration': 6.642}], 'summary': 'The blog module is popular and enables users to create visually appealing blog posts.', 'duration': 25.832, 'max_score': 6044.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06044021.jpg'}, {'end': 6193.225, 'src': 'embed', 'start': 6160.892, 'weight': 2, 'content': [{'end': 6164.372, 'text': 'right now this is a very interesting use of the actual border here.', 'start': 6160.892, 'duration': 3.48}, {'end': 6172.634, 'text': 'but over here, under the actual row settings for the first column, under the design section under border,', 'start': 6164.372, 'duration': 8.262}, {'end': 6177.155, 'text': "there's an option here where you guys can actually add a border here to every side.", 'start': 6172.634, 'duration': 4.521}, {'end': 6180.116, 'text': 'right. you can add a border to the bottom, you see that.', 'start': 6177.155, 'duration': 2.961}, {'end': 6185.579, 'text': 'or we can add a boredom to the left, like that, or border to the actual top, like that.', 'start': 6180.116, 'duration': 5.463}, {'end': 6193.225, 'text': "But what we've done here is we just wanted to only add it on one side, just to give it some sort of you know,", 'start': 6186.159, 'duration': 7.066}], 'summary': 'Instruction on adding border to one side in design settings.', 'duration': 32.333, 'max_score': 6160.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06160892.jpg'}, {'end': 6234.811, 'src': 'embed', 'start': 6205.174, 'weight': 3, 'content': [{'end': 6206.075, 'text': 'And this section here.', 'start': 6205.174, 'duration': 0.901}, {'end': 6210.038, 'text': 'you know, this is a text module, an image, an image right?', 'start': 6206.075, 'duration': 3.963}, {'end': 6211.739, 'text': 'So this is just a two column row.', 'start': 6210.058, 'duration': 1.681}, {'end': 6213.039, 'text': 'you guys probably already know how to do that.', 'start': 6211.739, 'duration': 1.3}, {'end': 6216.841, 'text': 'Now this next section, we just basically made another specialty section.', 'start': 6213.399, 'duration': 3.442}, {'end': 6221.184, 'text': "So we added in three column row with blurbs, like that's right.", 'start': 6217.001, 'duration': 4.183}, {'end': 6224.165, 'text': 'And then we just stack the elements over here on top of each other.', 'start': 6221.564, 'duration': 2.601}, {'end': 6225.426, 'text': 'And then we just design them.', 'start': 6224.305, 'duration': 1.121}, {'end': 6228.928, 'text': 'So again, you guys can download this template kit for free if you guys want.', 'start': 6225.966, 'duration': 2.962}, {'end': 6229.868, 'text': "It's on my website.", 'start': 6228.988, 'duration': 0.88}, {'end': 6234.811, 'text': 'So you guys can sort of practice with it and get a little bit more information on how to achieve specific looks.', 'start': 6229.948, 'duration': 4.863}], 'summary': 'Creating a webpage layout with two column, three column, and stack elements. template kit available for free download on website.', 'duration': 29.637, 'max_score': 6205.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06205174.jpg'}, {'end': 6321.842, 'src': 'embed', 'start': 6289.293, 'weight': 7, 'content': [{'end': 6292.275, 'text': "We'll go ahead and scroll down and click on background.", 'start': 6289.293, 'duration': 2.982}, {'end': 6294.704, 'text': "And then we'll click on the actual image.", 'start': 6293.103, 'duration': 1.601}, {'end': 6295.385, 'text': 'So there it is.', 'start': 6294.744, 'duration': 0.641}, {'end': 6301.709, 'text': 'We added in the actual image here to the entire module itself.', 'start': 6295.685, 'duration': 6.024}, {'end': 6303.97, 'text': 'This gave it this really nice effect.', 'start': 6302.249, 'duration': 1.721}, {'end': 6308.153, 'text': 'And then we had to force the image to stay inside of this box.', 'start': 6304.391, 'duration': 3.762}, {'end': 6309.694, 'text': 'So it was a lot of work.', 'start': 6308.653, 'duration': 1.041}, {'end': 6314.878, 'text': "I know it looks a little easy, but it's very responsive and it also has that really nice parallax effect.", 'start': 6310.134, 'duration': 4.744}, {'end': 6321.842, 'text': 'For this one here as well, you can see that we added the background to the actual row setting.', 'start': 6315.858, 'duration': 5.984}], 'summary': 'Added image to module, created parallax effect, made image responsive.', 'duration': 32.549, 'max_score': 6289.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06289293.jpg'}, {'end': 6380.417, 'src': 'embed', 'start': 6353.124, 'weight': 4, 'content': [{'end': 6356.066, 'text': 'So this actually was a lot more complicated to make than we thought it was.', 'start': 6353.124, 'duration': 2.942}, {'end': 6362.071, 'text': "I'm just showing you guys that you guys can pretty much get creative and make anything that you guys want with the Divi theme.", 'start': 6356.446, 'duration': 5.625}, {'end': 6367.1, 'text': 'Now, the last thing I wanna show you guys is the very last part of the homepage tutorial,', 'start': 6362.734, 'duration': 4.366}, {'end': 6372.046, 'text': 'where I show you guys how to actually make these blocked and how to stretch them across.', 'start': 6367.1, 'duration': 4.946}, {'end': 6378.455, 'text': "I'm sure you guys are very familiar with this, but I just wanna walk you guys through on how to achieve the look that I have on the demo websites.", 'start': 6372.427, 'duration': 6.028}, {'end': 6380.417, 'text': 'You guys ready? Here we go.', 'start': 6378.936, 'duration': 1.481}], 'summary': 'Demonstrating creative use of divi theme for homepage design.', 'duration': 27.293, 'max_score': 6353.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06353124.jpg'}, {'end': 6415.865, 'src': 'embed', 'start': 6387.364, 'weight': 5, 'content': [{'end': 6393.089, 'text': "But let's go ahead and further increase your knowledge by showing you guys how to achieve the grid look with the blurbs.", 'start': 6387.364, 'duration': 5.725}, {'end': 6397.532, 'text': "So let's go over here to the settings icon for the design.", 'start': 6393.989, 'duration': 3.543}, {'end': 6399.434, 'text': 'For the spacing.', 'start': 6398.493, 'duration': 0.941}, {'end': 6402.557, 'text': 'I also want zero for everything, right? We want zero for everything.', 'start': 6399.634, 'duration': 2.923}, {'end': 6410.243, 'text': 'Okay And I also want to go ahead and go to the sizing, turn on the gutter width.', 'start': 6404.221, 'duration': 6.022}, {'end': 6415.865, 'text': "And then we're also going to get rid of the gutter width and equalize the column heights.", 'start': 6411.524, 'duration': 4.341}], 'summary': 'Demonstrating how to achieve the grid look with blurbs, adjusting settings for spacing and gutter width.', 'duration': 28.501, 'max_score': 6387.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06387364.jpg'}, {'end': 6702.415, 'src': 'embed', 'start': 6669.741, 'weight': 6, 'content': [{'end': 6678.646, 'text': "So I'm gonna go ahead and go over here and take the actual about us and I can just drag it onto the page.", 'start': 6669.741, 'duration': 8.905}, {'end': 6683.529, 'text': "Here I'm going to just import the Divi builder layout.", 'start': 6679.747, 'duration': 3.782}, {'end': 6687.311, 'text': "And I'll go ahead and open this up.", 'start': 6685.39, 'duration': 1.921}, {'end': 6693.713, 'text': "And now it's importing the actual About Us page that I created for you guys.", 'start': 6689.811, 'duration': 3.902}, {'end': 6696.754, 'text': 'And there it is.', 'start': 6695.773, 'duration': 0.981}, {'end': 6700.235, 'text': "So let's take a quick look here, make sure everything looks great.", 'start': 6697.974, 'duration': 2.261}, {'end': 6702.415, 'text': 'And look at that, guys.', 'start': 6701.415, 'duration': 1}], 'summary': 'Imported about us page using divi builder, ensuring everything looks great.', 'duration': 32.674, 'max_score': 6669.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE06669741.jpg'}], 'start': 5948.841, 'title': 'Creating elegant blog modules and specialized layouts with divi theme', 'summary': 'Discusses designing blog modules, demonstrating automatic blog post display on the homepage and customizing appearance. it also explores creating specialized webpage sections using divi theme, including adding background images to text modules, achieving grid looks with blurbs, and importing pre-made layouts.', 'chapters': [{'end': 6241.432, 'start': 5948.841, 'title': 'Creating elegant blog modules', 'summary': 'Discusses the creation and design of blog modules, demonstrating how to automatically display blog posts on the homepage and customize the blog appearance, with a focus on design elements and options.', 'duration': 292.591, 'highlights': ['The chapter demonstrates how to automatically display blog posts on the homepage, making it a popular choice among users.', 'The tutorial provides detailed information on customizing the blog appearance, including designing the title, meta text, and controlling excerpt content.', 'The instructor introduces the use of a two column row and demonstrates the design process, emphasizing the importance of elegant placement and background adjustments.', "The tutorial showcases the use of borders to add design elements to columns, providing a detailed explanation of the border options and their impact on the module's appearance.", 'The tutorial offers practical insights on creating specialty sections, including a three column row with blurbs, and encourages users to download the template kit for practice and reference.']}, {'end': 7004.271, 'start': 6241.713, 'title': 'Creating specialized layouts with divi theme', 'summary': 'Demonstrates the process of creating specialized webpage sections using the divi theme, including adding background images to text modules, achieving grid looks with blurbs, and importing pre-made layouts via the visual builder.', 'duration': 762.558, 'highlights': ['The chapter demonstrates the process of creating specialized webpage sections using the Divi theme. The tutorial focuses on creating unique webpage sections using the Divi theme, showcasing the complex process behind seemingly simple designs.', 'Adding background images to text modules is highlighted as a challenging task. The speaker emphasizes the complexity of adding background images to text modules and the effort required to achieve visually appealing effects.', 'The process of achieving grid looks with blurbs is demonstrated. The tutorial explains the steps to achieve a grid layout with blurbs, including adjusting spacing, gutter width, and column heights, and extending styles to multiple elements for consistency.', 'Importing pre-made layouts via the visual builder is showcased as a convenient feature. The tutorial demonstrates the ease of importing pre-made layouts using the visual builder, allowing users to quickly customize and deploy webpage templates.']}], 'duration': 1055.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE05948841.jpg', 'highlights': ['The chapter demonstrates how to automatically display blog posts on the homepage, making it a popular choice among users.', 'The tutorial provides detailed information on customizing the blog appearance, including designing the title, meta text, and controlling excerpt content.', "The tutorial showcases the use of borders to add design elements to columns, providing a detailed explanation of the border options and their impact on the module's appearance.", 'The tutorial offers practical insights on creating specialty sections, including a three column row with blurbs, and encourages users to download the template kit for practice and reference.', 'The chapter demonstrates the process of creating specialized webpage sections using the Divi theme, showcasing the complex process behind seemingly simple designs.', 'The process of achieving grid looks with blurbs is demonstrated. The tutorial explains the steps to achieve a grid layout with blurbs, including adjusting spacing, gutter width, and column heights, and extending styles to multiple elements for consistency.', 'The tutorial demonstrates the ease of importing pre-made layouts using the visual builder, allowing users to quickly customize and deploy webpage templates.', 'Adding background images to text modules is highlighted as a challenging task. The speaker emphasizes the complexity of adding background images to text modules and the effort required to achieve visually appealing effects.']}, {'end': 8208.568, 'segs': [{'end': 7050.522, 'src': 'embed', 'start': 7021.755, 'weight': 5, 'content': [{'end': 7026.296, 'text': "All right, so in this section, let's talk about the Divi options along with the theme customizer.", 'start': 7021.755, 'duration': 4.541}, {'end': 7033.197, 'text': "Now, in the beginning of the video, I did briefly mention the theme customizer and I told you guys that we'll be coming to that a little bit later,", 'start': 7026.476, 'duration': 6.721}, {'end': 7034.438, 'text': 'and now is that later.', 'start': 7033.197, 'duration': 1.241}, {'end': 7037.378, 'text': "But first, let's go ahead and talk about the Divi options.", 'start': 7034.578, 'duration': 2.8}, {'end': 7039.359, 'text': "So there's a few Divi options here.", 'start': 7037.938, 'duration': 1.421}, {'end': 7045.72, 'text': "There's the actual Divi options, the Divi theme builder, the customizer, the role editor, and then the library and the support center.", 'start': 7039.439, 'duration': 6.281}, {'end': 7050.522, 'text': 'The support center, this is where you guys can get support for Divi.', 'start': 7046.6, 'duration': 3.922}], 'summary': 'The divi options include theme builder, customizer, role editor, library, and support center for getting divi support.', 'duration': 28.767, 'max_score': 7021.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07021755.jpg'}, {'end': 7086.535, 'src': 'embed', 'start': 7058.985, 'weight': 0, 'content': [{'end': 7064.407, 'text': 'This gives the team over at Divi full access to the backend of your website.', 'start': 7058.985, 'duration': 5.422}, {'end': 7070.81, 'text': "So they can go ahead and take a look to see if there's any bugs or glitches that are reported or that you may have come across.", 'start': 7064.467, 'duration': 6.343}, {'end': 7073.291, 'text': 'Next, you have the actual Divi library.', 'start': 7071.53, 'duration': 1.761}, {'end': 7078.553, 'text': 'Remember earlier how we created that Divi button? Well, this is where you can edit the button.', 'start': 7074.192, 'duration': 4.361}, {'end': 7082.994, 'text': 'So this is where you can create specific modules, right? You can add this in your library.', 'start': 7078.653, 'duration': 4.341}, {'end': 7086.535, 'text': 'So for example, add new, you can give the name of your layouts.', 'start': 7083.054, 'duration': 3.481}], 'summary': 'Divi team gains full backend access to website to check for bugs and glitches, also enables creation of specific modules and layouts.', 'duration': 27.55, 'max_score': 7058.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07058985.jpg'}, {'end': 7145.455, 'src': 'embed', 'start': 7115.492, 'weight': 1, 'content': [{'end': 7117.313, 'text': 'You can make it on the front end or the back end.', 'start': 7115.492, 'duration': 1.821}, {'end': 7118.554, 'text': "It's all the same results.", 'start': 7117.433, 'duration': 1.121}, {'end': 7120.574, 'text': "but let's go back over here.", 'start': 7119.192, 'duration': 1.382}, {'end': 7122.936, 'text': 'And next we have the role editor.', 'start': 7121.134, 'duration': 1.802}, {'end': 7131.266, 'text': 'The role editor essentially gives specific roles for users on your website to access specific parts of the website.', 'start': 7123.517, 'duration': 7.749}, {'end': 7133.808, 'text': 'For example, a contributor.', 'start': 7131.686, 'duration': 2.122}, {'end': 7137.391, 'text': 'These are the options a contributor has access to.', 'start': 7134.789, 'duration': 2.602}, {'end': 7141.353, 'text': 'They have access to the visual builder, a moving item, all this other stuff.', 'start': 7137.451, 'duration': 3.902}, {'end': 7145.455, 'text': "Let's say, for example, you have a customer and they want access to your website,", 'start': 7141.793, 'duration': 3.662}], 'summary': 'Role editor assigns specific roles for website access, e.g., contributor with access to visual builder and moving item.', 'duration': 29.963, 'max_score': 7115.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07115492.jpg'}, {'end': 7285.873, 'src': 'embed', 'start': 7258.611, 'weight': 2, 'content': [{'end': 7261.752, 'text': "Now I'm going to skip these two and go to Divi theme options.", 'start': 7258.611, 'duration': 3.141}, {'end': 7265.195, 'text': 'So this is where you guys can upload your logo here.', 'start': 7262.412, 'duration': 2.783}, {'end': 7268.598, 'text': "I'll click on upload and we're going to upload our logo here.", 'start': 7265.235, 'duration': 3.363}, {'end': 7271.501, 'text': 'And next you have the fixed navigation bar.', 'start': 7269.199, 'duration': 2.302}, {'end': 7274.164, 'text': 'This is essentially the bar at the top of the menu.', 'start': 7271.561, 'duration': 2.603}, {'end': 7278.248, 'text': 'As you scroll, it will stay with your visitors.', 'start': 7274.464, 'duration': 3.784}, {'end': 7279.81, 'text': "So it's just a fixed menu.", 'start': 7278.348, 'duration': 1.462}, {'end': 7281.311, 'text': "Pretty much it's like a sticky menu.", 'start': 7279.85, 'duration': 1.461}, {'end': 7285.873, 'text': 'There are a lot of other options, like if you want a sidebar layout.', 'start': 7281.952, 'duration': 3.921}], 'summary': 'Demonstrating divi theme options including logo upload and fixed navigation bar.', 'duration': 27.262, 'max_score': 7258.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07258611.jpg'}, {'end': 7765.787, 'src': 'embed', 'start': 7734.754, 'weight': 3, 'content': [{'end': 7737.655, 'text': 'You see those? If you want to have those on, you can turn those on or off.', 'start': 7734.754, 'duration': 2.901}, {'end': 7742.157, 'text': 'Now remember, you can link these social icons in the Divi theme options.', 'start': 7738.135, 'duration': 4.022}, {'end': 7748, 'text': 'Remember the theme options, what I showed you guys earlier how you can enable the actual URL?', 'start': 7742.457, 'duration': 5.543}, {'end': 7750.541, 'text': "That's where you would go ahead and enter it in the Divi theme options.", 'start': 7748.28, 'duration': 2.261}, {'end': 7752.942, 'text': 'the footer menu.', 'start': 7751.341, 'duration': 1.601}, {'end': 7757.844, 'text': 'you guys can go ahead and design the footer menu as well and then you also have the bottom bar.', 'start': 7752.942, 'duration': 4.902}, {'end': 7760.865, 'text': 'the bottom bar is this bottom part right here.', 'start': 7757.844, 'duration': 3.021}, {'end': 7765.787, 'text': 'so if you want to change that, you can disable the footer credits or you can just change it.', 'start': 7760.865, 'duration': 4.922}], 'summary': 'In the divi theme options, you can link social icons, enable urls, and customize the footer and bottom bar.', 'duration': 31.033, 'max_score': 7734.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07734754.jpg'}, {'end': 7805.662, 'src': 'embed', 'start': 7773.308, 'weight': 6, 'content': [{'end': 7774.369, 'text': 'whatever you guys wanna add.', 'start': 7773.308, 'duration': 1.061}, {'end': 7779.674, 'text': 'And then this is where you can design that bottom one, where you can change the look and feel of it.', 'start': 7774.389, 'duration': 5.285}, {'end': 7780.955, 'text': 'if you decide to do that right?', 'start': 7779.674, 'duration': 1.281}, {'end': 7783.077, 'text': 'Change this text color to white.', 'start': 7781.816, 'duration': 1.261}, {'end': 7783.957, 'text': 'All right, cool.', 'start': 7783.097, 'duration': 0.86}, {'end': 7790.623, 'text': "Now let's talk about how to add widgets to this footer area, right? So here let's click on widgets.", 'start': 7784.798, 'duration': 5.825}, {'end': 7793.366, 'text': 'Here you have footer area one.', 'start': 7791.684, 'duration': 1.682}, {'end': 7801.036, 'text': "Now, what do you wanna add in footer area one? Well, I'm gonna go ahead and first delete all these things, cause this is really annoying.", 'start': 7794.488, 'duration': 6.548}, {'end': 7805.662, 'text': "I'll remove this and we're gonna get rid of this, get rid of this.", 'start': 7801.256, 'duration': 4.406}], 'summary': 'Discussion on designing and adding widgets to the footer area, removing unnecessary elements.', 'duration': 32.354, 'max_score': 7773.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07773308.jpg'}, {'end': 7844.68, 'src': 'embed', 'start': 7816.633, 'weight': 9, 'content': [{'end': 7818.674, 'text': 'And you know, we can have a lot of blocks here.', 'start': 7816.633, 'duration': 2.041}, {'end': 7822.277, 'text': 'So we can click on browse all and then you guys can add in blocks here.', 'start': 7818.814, 'duration': 3.463}, {'end': 7827.08, 'text': "Here, I'll put in the page list, right? Like the home, the about the contact services.", 'start': 7822.997, 'duration': 4.083}, {'end': 7828.481, 'text': 'All right, cool.', 'start': 7827.1, 'duration': 1.381}, {'end': 7831.603, 'text': "Now let's add in another block area two.", 'start': 7829.541, 'duration': 2.062}, {'end': 7833.324, 'text': "I'll turn this on.", 'start': 7832.663, 'duration': 0.661}, {'end': 7836.893, 'text': "And I'll click on browse all.", 'start': 7835.211, 'duration': 1.682}, {'end': 7842.678, 'text': "And I don't know, what do you want to put here? You know, we can add in a lot of stuff here, like a Facebook like box.", 'start': 7837.773, 'duration': 4.905}, {'end': 7844.68, 'text': 'We can add in a social feed.', 'start': 7842.718, 'duration': 1.962}], 'summary': 'Demonstrating how to add blocks to a webpage and suggesting options like a facebook like box and social feed.', 'duration': 28.047, 'max_score': 7816.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07816633.jpg'}, {'end': 7953.524, 'src': 'embed', 'start': 7923.738, 'weight': 8, 'content': [{'end': 7927.819, 'text': 'this is actually showing you what it looks like on mobile devices.', 'start': 7923.738, 'duration': 4.081}, {'end': 7929.119, 'text': 'we do have a little bit of work to do.', 'start': 7927.819, 'duration': 1.3}, {'end': 7934.261, 'text': 'we did not optimize this site for mobile just yet, and we will do that in the very next section.', 'start': 7929.119, 'duration': 5.142}, {'end': 7940.484, 'text': "But I'm not really sure why they have this here, because we can actually check out the mobile styles from the actual page builder.", 'start': 7934.921, 'duration': 5.563}, {'end': 7944.107, 'text': "So that's pretty much it for the actual theme customizer.", 'start': 7941.105, 'duration': 3.002}, {'end': 7946.028, 'text': 'You guys can check out the blog as well.', 'start': 7944.707, 'duration': 1.321}, {'end': 7953.524, 'text': 'The blog post, you guys can actually design the actual blog post right here once we do create blog post.', 'start': 7947.179, 'duration': 6.345}], 'summary': 'Site not yet optimized for mobile, to be done in next section, can check mobile styles from page builder, blog post design available.', 'duration': 29.786, 'max_score': 7923.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07923738.jpg'}, {'end': 8014.079, 'src': 'embed', 'start': 7986.424, 'weight': 4, 'content': [{'end': 7991.007, 'text': 'but here you can add a little bit more icons and stuff to the top of the menu if you choose to do that.', 'start': 7986.424, 'duration': 4.583}, {'end': 7998.971, 'text': "All right, so now that we talked about the Divi theme options and the Divi theme customizer, now let's talk about post and also projects.", 'start': 7992.187, 'duration': 6.784}, {'end': 8006.334, 'text': "Alright, so in this section, I'll be showing you guys how to add blog posts, how to add them to the menu and also explain projects.", 'start': 8000.051, 'duration': 6.283}, {'end': 8011.417, 'text': 'Now, the first thing that we need to do is we need to create a page for our blog posts.', 'start': 8007.035, 'duration': 4.382}, {'end': 8014.079, 'text': "So let's go to plus new and go to page.", 'start': 8011.757, 'duration': 2.322}], 'summary': 'Tutorial on adding blog posts and projects to divi theme, creating a page for blog posts.', 'duration': 27.655, 'max_score': 7986.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07986424.jpg'}], 'start': 7004.811, 'title': 'Customizing divi theme options', 'summary': 'Discusses divi theme options, theme customizer, and role editor, providing insights into website customization, user access management, and client handover procedures. it also covers customizing the footer, adding blog posts, and optimizing the site for mobile devices.', 'chapters': [{'end': 7257.951, 'start': 7004.811, 'title': 'Divi theme options and role editor', 'summary': 'Discusses the divi options, including the theme customizer, divi library, and role editor, providing insights into website customization, user access management, and client handover procedures.', 'duration': 253.14, 'highlights': ['Divi Library and Global Settings The Divi library allows users to create and edit specific modules, set them as global, and organize them into categories and tags, facilitating efficient website customization and management.', 'Role Editor and User Access Management The role editor enables assigning specific roles for users, restricting access to certain website parts, and creating new users with designated roles, ensuring secure and controlled website access for clients and contributors.', 'Web Design Business Guide The chapter mentions a comprehensive video guide on starting a web design business, covering topics like website pricing, contracts, maintenance services, and SEO, providing valuable insights for individuals interested in web design entrepreneurship.']}, {'end': 7413.408, 'start': 7258.611, 'title': 'Divi theme options overview', 'summary': 'Provides an overview of the divi theme options, including the ability to upload a logo, enable a fixed navigation bar, enter a google api key for maps, and configure social media profiles, as well as highlighting the importance of back to top and smooth scrolling options.', 'duration': 154.797, 'highlights': ['The chapter provides an overview of the Divi theme options, including the ability to upload a logo, enable a fixed navigation bar, enter a Google API key for maps, and configure social media profiles.', 'The back to top button and smooth scrolling options are highlighted as essential features that should be turned on by default to enhance user experience.', 'Instructions on how to enter a Google API key for enabling Google Maps on websites are provided, emphasizing its importance for the contact form functionality.', 'The chapter also covers the option to hide specific pages from the menu, as well as the builder options for customizing blog posts layouts and general settings for global posts.', 'New features like blog style mode and DV gallery are mentioned, although their functionalities are not fully explained.']}, {'end': 7716.285, 'start': 7413.408, 'title': 'Divi theme customizer overview', 'summary': 'Covers the divi theme options, theme customizer, and detailed settings including site identity, layout settings, header and navigation, fixed navigation, and footer builder, providing insights into the different customization options available within the divi theme.', 'duration': 302.877, 'highlights': ['The chapter covers the Divi theme options, theme customizer, and detailed settings. The chapter introduces the Divi theme options and the theme customizer, providing an overview of the detailed settings available for customization.', 'Detailed settings including site identity, layout settings, header and navigation, fixed navigation, and footer builder. The chapter delves into specific settings such as site identity, layout settings, header and navigation options, fixed navigation, and footer builder, offering a comprehensive understanding of the customization features within these areas.', 'Insights into the different customization options available within the Divi theme. The chapter provides insights into the diverse customization options within the Divi theme, offering users a range of choices for personalizing their website according to their preferences.']}, {'end': 7902.126, 'start': 7716.285, 'title': 'Customizing footer in divi theme', 'summary': 'Explains how to customize the footer in the divi theme, covering options such as enabling social icons, designing the footer menu, changing the bottom bar, adding widgets like page lists, social feeds, calendars, and images, and adding paragraph text for about us section.', 'duration': 185.841, 'highlights': ['The chapter covers options for customizing the footer in the Divi theme, including enabling social icons, designing the footer menu, and changing the bottom bar.', "The process of adding widgets to the footer area is detailed, including adding page lists, social feeds, calendars, images, and paragraph text for 'about us' section.", "The demonstration includes adding various blocks to the footer area, such as page lists, social feeds, calendars, images, and paragraph text for 'about us' section."]}, {'end': 8208.568, 'start': 7902.366, 'title': 'Customizing divi theme and adding blog posts', 'summary': 'Explains how to customize the divi theme by adding widgets to the bottom of the page, creating a footer, adjusting mobile styles, and adding blog posts to the menu, emphasizing the importance of optimizing the site for mobile devices.', 'duration': 306.202, 'highlights': ['The process of customizing the Divi theme and adding blog posts is explained. The chapter explains how to customize the Divi theme by adding widgets to the bottom of the page, creating a footer, adjusting mobile styles, and adding blog posts to the menu.', 'Emphasis on the importance of optimizing the site for mobile devices. Emphasizes the importance of optimizing the site for mobile devices, mentioning that there is still work to do in optimizing the site for mobile devices and that it will be covered in the next section.', 'Demonstrating the process of creating a blog page and adding it to the menu. Demonstrates the process of creating a blog page, setting it as the post page in the theme customizer, and adding it to the menu.']}], 'duration': 1203.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE07004811.jpg', 'highlights': ['The Divi library allows users to create and edit specific modules, set them as global, and organize them into categories and tags, facilitating efficient website customization and management.', 'The role editor enables assigning specific roles for users, restricting access to certain website parts, and creating new users with designated roles, ensuring secure and controlled website access for clients and contributors.', 'The chapter provides an overview of the Divi theme options, including the ability to upload a logo, enable a fixed navigation bar, enter a Google API key for maps, and configure social media profiles.', 'The chapter covers options for customizing the footer in the Divi theme, including enabling social icons, designing the footer menu, and changing the bottom bar.', 'The process of customizing the Divi theme and adding blog posts is explained.', 'The chapter covers the Divi theme options, theme customizer, and detailed settings.', "The process of adding widgets to the footer area is detailed, including adding page lists, social feeds, calendars, images, and paragraph text for 'about us' section.", 'The chapter introduces the Divi theme options and the theme customizer, providing an overview of the detailed settings available for customization.', 'Emphasis on the importance of optimizing the site for mobile devices.', "The demonstration includes adding various blocks to the footer area, such as page lists, social feeds, calendars, images, and paragraph text for 'about us' section."]}, {'end': 8980.055, 'segs': [{'end': 8263.532, 'src': 'embed', 'start': 8232.325, 'weight': 0, 'content': [{'end': 8233.947, 'text': "However, I don't like this method,", 'start': 8232.325, 'duration': 1.622}, {'end': 8239.929, 'text': "because you guys cannot actually design this page and it's just basically fully propagated and it doesn't really look that good.", 'start': 8233.947, 'duration': 5.982}, {'end': 8244.75, 'text': "So what I'm gonna do now is I'm going to go to plus new and go to page.", 'start': 8240.409, 'duration': 4.341}, {'end': 8250.392, 'text': 'And what we can do here is that we can actually make a custom blog page using the actual Diva Builder.', 'start': 8244.809, 'duration': 5.583}, {'end': 8252.573, 'text': "So here I'll type in custom blog.", 'start': 8250.472, 'duration': 2.101}, {'end': 8255.574, 'text': "I'll click on publish and publish.", 'start': 8254.313, 'duration': 1.261}, {'end': 8259.891, 'text': 'And now I wanna click on use the Divi builder.', 'start': 8256.949, 'duration': 2.942}, {'end': 8263.532, 'text': "All right, here I'm going to build this from scratch.", 'start': 8260.55, 'duration': 2.982}], 'summary': 'The speaker plans to create a custom blog page using divi builder to improve the design and appearance of the page.', 'duration': 31.207, 'max_score': 8232.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08232325.jpg'}, {'end': 8408.76, 'src': 'embed', 'start': 8381.557, 'weight': 1, 'content': [{'end': 8386.101, 'text': "so now that I've actually added that to the menu, if I click on custom blog here,", 'start': 8381.557, 'duration': 4.544}, {'end': 8390.965, 'text': 'you can then see that we have now used this as our primary blog page.', 'start': 8386.101, 'duration': 4.864}, {'end': 8394.988, 'text': 'So all of the blog posts that we create will be propagated here automatically.', 'start': 8391.085, 'duration': 3.903}, {'end': 8402.054, 'text': "And also don't forget, you guys can turn on the Divi Builder and you guys can design these blogs the way you want it to look.", 'start': 8395.689, 'duration': 6.365}, {'end': 8408.76, 'text': 'So for the design tab, for, like the layout and the overlay, we can add a lot of stuff to this right?', 'start': 8402.114, 'duration': 6.646}], 'summary': 'Added blog to menu, making it primary page for all posts. can use divi builder for custom design.', 'duration': 27.203, 'max_score': 8381.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08381557.jpg'}, {'end': 8565.359, 'src': 'embed', 'start': 8539.842, 'weight': 2, 'content': [{'end': 8544.544, 'text': 'So now we can actually design the actual blog post using the actual Divi builder.', 'start': 8539.842, 'duration': 4.702}, {'end': 8550.347, 'text': 'And you can build this blog post just the way like we did on the homepage, except this would be for your blog post.', 'start': 8545.025, 'duration': 5.322}, {'end': 8555.05, 'text': "Now if I click on post right here, and I scroll down, first, I'll put this under dating.", 'start': 8550.487, 'duration': 4.563}, {'end': 8560.455, 'text': 'And if I scroll down under the Divi page settings, I want to make sure that this is full width right here.', 'start': 8555.69, 'duration': 4.765}, {'end': 8565.359, 'text': 'We can even disable like the post title and stuff like that, dot navigation.', 'start': 8561.236, 'duration': 4.123}], 'summary': 'Design blog post using divi builder, set under dating, and ensure full width layout.', 'duration': 25.517, 'max_score': 8539.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08539842.jpg'}, {'end': 8599.99, 'src': 'embed', 'start': 8578.074, 'weight': 3, 'content': [{'end': 8586.865, 'text': "i'm just showing you that you guys can use the divi builder to build out your blog post and we do have these really cool little dot navigations where users can scroll on your blog.", 'start': 8578.074, 'duration': 8.791}, {'end': 8587.846, 'text': 'so that is pretty cool.', 'start': 8586.865, 'duration': 0.981}, {'end': 8590.468, 'text': 'So next we have the projects right?', 'start': 8588.627, 'duration': 1.841}, {'end': 8597.509, 'text': 'So I showed you guys how to create blog posts with Divi and the Divi builder and also how to create a custom blog page with Divi.', 'start': 8591.168, 'duration': 6.341}, {'end': 8599.99, 'text': "Now let's talk about the actual projects.", 'start': 8597.909, 'duration': 2.081}], 'summary': 'Using divi builder, create blog posts with dot navigations. also, create custom blog page with divi and discuss projects.', 'duration': 21.916, 'max_score': 8578.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08578074.jpg'}, {'end': 8784.495, 'src': 'embed', 'start': 8761.077, 'weight': 5, 'content': [{'end': 8769.242, 'text': 'You guys can actually use the project, and if a user clicks on this Divi project, they will then be brought to the actual project here,', 'start': 8761.077, 'duration': 8.165}, {'end': 8777.247, 'text': 'where you can showcase your portfolio, your pictures, your web design skills or anything that you want to showcase on your website.', 'start': 8769.242, 'duration': 8.005}, {'end': 8781.29, 'text': "So that's how you guys would use the projects on your Divi website.", 'start': 8777.767, 'duration': 3.523}, {'end': 8784.495, 'text': "All right guys, well that's pretty much it for this section.", 'start': 8782.571, 'duration': 1.924}], 'summary': 'Users can showcase their portfolio and web design skills on their divi website.', 'duration': 23.418, 'max_score': 8761.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08761077.jpg'}], 'start': 8209.41, 'title': 'Customizing blog pages and creating blog posts with divi', 'summary': "Covers customizing a blog page using divi builder, creating a custom blog page, adding it to the website's menu, resulting in a cleaner and neater blog layout, and designing blog posts to the user's preference. it also details creating blog posts and projects with divi, including using the divi builder to customize blog posts and demonstrating the use of divi projects to showcase portfolios.", 'chapters': [{'end': 8451.708, 'start': 8209.41, 'title': 'Customizing blog pages with divi builder', 'summary': "Demonstrates how to customize a blog page using divi builder, creating a custom blog page, and adding it to the website's menu, resulting in a cleaner and neater blog layout, as well as the ability to design the blog posts to the user's preference.", 'duration': 242.298, 'highlights': ['Using Divi Builder to customize a blog page The speaker demonstrates using the Divi Builder to create a custom blog page, resulting in a neater and more visually appealing blog layout.', "Adding custom blog page to the website's menu The speaker walks through the process of adding the custom blog page to the website's menu, ensuring that all created blog posts will be automatically propagated to this page.", 'Ability to design blog posts with Divi Builder The speaker highlights the capability to design blog posts the way users want them to look by using various design options, including changing the layout, overlay colors, and font styles.']}, {'end': 8980.055, 'start': 8452.148, 'title': 'Creating blog posts and projects with divi', 'summary': 'Details how to create blog posts and projects with divi, including using the divi builder to customize blog posts and demonstrating the use of divi projects to showcase portfolios.', 'duration': 527.907, 'highlights': ['The chapter details how to create blog posts and projects with Divi The tutorial covers creating blog posts and projects with Divi, demonstrating the use of the Divi Builder to customize blog posts and the Divi projects tab to showcase portfolios.', 'Using Divi Builder to customize blog posts Instructions are provided on using the Divi Builder to customize blog posts, including selecting pre-made layouts and entering the Divi API key to access layouts.', 'Demonstrating the use of Divi projects to showcase portfolios The tutorial explains using Divi projects to showcase portfolios, including creating projects using the Divi Builder, setting featured images, and customizing layouts.']}], 'duration': 770.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08209410.jpg', 'highlights': ['Using Divi Builder to customize a blog page resulting in a neater and visually appealing layout', "Adding custom blog page to the website's menu to automatically propagate created blog posts", 'Designing blog posts with Divi Builder to customize layout, overlay colors, and font styles', 'Creating blog posts and projects with Divi, using Divi Builder to customize blog posts and projects', 'Using Divi Builder to customize blog posts, including selecting pre-made layouts and entering the Divi API key', 'Demonstrating the use of Divi projects to showcase portfolios, creating projects using the Divi Builder and customizing layouts']}, {'end': 10848.885, 'segs': [{'end': 9138.647, 'src': 'embed', 'start': 9113.715, 'weight': 5, 'content': [{'end': 9120.638, 'text': 'you guys can change the entire color scheme on your websites from one location using the actual find and replace option.', 'start': 9113.715, 'duration': 6.923}, {'end': 9128.3, 'text': "It's a really helpful feature and it really speeds up the workflow and helps you get more ideas on how to implement certain color schemes on your websites.", 'start': 9120.958, 'duration': 7.342}, {'end': 9133.063, 'text': "But because this looks hideous, I'm gonna go ahead and change that back right?", 'start': 9128.86, 'duration': 4.203}, {'end': 9138.647, 'text': "We're gonna go ahead and change that back and I'm going to exits and I'm not gonna save this because I don't want my site to look like that.", 'start': 9133.083, 'duration': 5.564}], 'summary': 'Changing color scheme from one location speeds up workflow and helps with implementing color schemes on websites.', 'duration': 24.932, 'max_score': 9113.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09113715.jpg'}, {'end': 9244.914, 'src': 'embed', 'start': 9217.948, 'weight': 3, 'content': [{'end': 9224.652, 'text': 'This is very similar to the bulk editing, except it allows you to save these presets and apply them to another module later.', 'start': 9217.948, 'duration': 6.704}, {'end': 9228.635, 'text': "For example, I'll go ahead and click on this module settings here.", 'start': 9225.553, 'duration': 3.082}, {'end': 9232.526, 'text': "for the design, I'm just gonna alter this just a little bit.", 'start': 9229.804, 'duration': 2.722}, {'end': 9232.866, 'text': 'All right.', 'start': 9232.666, 'duration': 0.2}, {'end': 9234.307, 'text': 'just to give you guys an example here.', 'start': 9232.866, 'duration': 1.441}, {'end': 9239.791, 'text': "I'm just gonna, you know, I'm just gonna edit this just a little bit here, just so you guys can see this, right?", 'start': 9234.307, 'duration': 5.484}, {'end': 9244.914, 'text': "Okay, and I think from there, from there, we're good, right?", 'start': 9240.771, 'duration': 4.143}], 'summary': 'Bulk editing feature allows saving presets and applying them to other modules, demonstrated with a design alteration.', 'duration': 26.966, 'max_score': 9217.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09217948.jpg'}, {'end': 9387.366, 'src': 'embed', 'start': 9350.105, 'weight': 9, 'content': [{'end': 9354.609, 'text': 'And that is an example of a copy and paste where you can paste the module styles.', 'start': 9350.105, 'duration': 4.504}, {'end': 9357.55, 'text': 'Now the next one is called the extend styles.', 'start': 9355.109, 'duration': 2.441}, {'end': 9363.953, 'text': "This is where it's pretty much the same thing, except you can extend it to all the elements on the entire row.", 'start': 9358.011, 'duration': 5.942}, {'end': 9370.717, 'text': "For example, I'll go over here to the module settings and I'm gonna go to the extend blurb styles.", 'start': 9364.634, 'duration': 6.083}, {'end': 9378.259, 'text': "Now I want to extend the styles through the entire section row or column, but I'll just say this entire row.", 'start': 9371.994, 'duration': 6.265}, {'end': 9384.604, 'text': "So what that's going to do is that it's going to take all of these, uh, this style, and it's going to apply it to all of the modules in this row.", 'start': 9378.459, 'duration': 6.145}, {'end': 9386.165, 'text': "And then I'll click on extend.", 'start': 9385.204, 'duration': 0.961}, {'end': 9387.366, 'text': 'All right.', 'start': 9387.125, 'duration': 0.241}], 'summary': 'Demonstrates copy and paste and extending styles to entire row in module settings.', 'duration': 37.261, 'max_score': 9350.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09350105.jpg'}, {'end': 9450.833, 'src': 'embed', 'start': 9422.744, 'weight': 8, 'content': [{'end': 9426.448, 'text': "Design, and then we have the actual, let's see here, dividers.", 'start': 9422.744, 'duration': 3.704}, {'end': 9426.849, 'text': 'There we go.', 'start': 9426.468, 'duration': 0.381}, {'end': 9429.952, 'text': "So let's say for example, you wanna add dividers here at the top.", 'start': 9427.509, 'duration': 2.443}, {'end': 9433.876, 'text': 'You can add a divider here at the top and you can give it this little effect.', 'start': 9430.333, 'duration': 3.543}, {'end': 9436.479, 'text': 'You can change the color of the divider as well.', 'start': 9434.557, 'duration': 1.922}, {'end': 9438.821, 'text': 'You can change the height and adjust it.', 'start': 9437.08, 'duration': 1.741}, {'end': 9441.024, 'text': "And there's a lot of other really cool options.", 'start': 9439.362, 'duration': 1.662}, {'end': 9442.205, 'text': 'You can actually flip it.', 'start': 9441.064, 'duration': 1.141}, {'end': 9443.686, 'text': 'You can rotate it.', 'start': 9442.765, 'duration': 0.921}, {'end': 9450.833, 'text': 'You can put it underneath it or on top of it, just depending on if there are modules here and it might be blocking that module.', 'start': 9444.447, 'duration': 6.386}], 'summary': 'Instruction on adding dividers with customizable options such as color, height, rotation, and placement.', 'duration': 28.089, 'max_score': 9422.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09422744.jpg'}, {'end': 9612.364, 'src': 'embed', 'start': 9579.272, 'weight': 7, 'content': [{'end': 9580.872, 'text': "you'll see that we have this little notice here.", 'start': 9579.272, 'duration': 1.6}, {'end': 9584.514, 'text': 'As the user scrolls, they will continue to see this notice.', 'start': 9581.613, 'duration': 2.901}, {'end': 9590.736, 'text': 'But when we scroll past the actual area where the module was first placed, it will then stop there.', 'start': 9584.614, 'duration': 6.122}, {'end': 9593.097, 'text': 'And then if we keep scrolling, it will be gone.', 'start': 9591.136, 'duration': 1.961}, {'end': 9597.343, 'text': "All right, so that's an example of the scroll effects features.", 'start': 9593.737, 'duration': 3.606}, {'end': 9598.485, 'text': "It's a really cool feature.", 'start': 9597.403, 'duration': 1.082}, {'end': 9601.229, 'text': "Check out Elegant Themes' YouTube channel.", 'start': 9599.426, 'duration': 1.803}, {'end': 9605.836, 'text': 'They have tons of ways on how to make some really cool effects and animations using the scroll effects.', 'start': 9601.269, 'duration': 4.567}, {'end': 9612.364, 'text': "next is a really cool feature that's been in with divi for quite some time, and that is the a b split testing.", 'start': 9606.94, 'duration': 5.424}], 'summary': 'Divi has a scroll effects feature and a/b split testing.', 'duration': 33.092, 'max_score': 9579.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09579272.jpg'}, {'end': 9946.808, 'src': 'embed', 'start': 9811.1, 'weight': 1, 'content': [{'end': 9815.603, 'text': 'And then once you guys are done reading the analytics, you guys can end the split test and pick a winner.', 'start': 9811.1, 'duration': 4.503}, {'end': 9817.244, 'text': 'And then you guys can say you know what?', 'start': 9816.083, 'duration': 1.161}, {'end': 9825.456, 'text': "I wanna go ahead and I want to pick, uh, this one here, this one's the winner, and then divi will automatically use that text for your websites.", 'start': 9817.344, 'duration': 8.112}, {'end': 9827.9, 'text': "so that's how you guys can use the a b split test feature.", 'start': 9825.456, 'duration': 2.444}, {'end': 9832.891, 'text': "it's really helpful and i think everyone should at least give it one try, All right.", 'start': 9827.9, 'duration': 4.991}, {'end': 9838.995, 'text': 'and the next thing I wanna talk about is the actual elements here on the bottom of the page, plus the other Divi templates.', 'start': 9832.891, 'duration': 6.104}, {'end': 9842.837, 'text': 'Over here, you have this little question, right? This is actually a Divi helper.', 'start': 9839.535, 'duration': 3.302}, {'end': 9846.399, 'text': 'And this just essentially gives you help just in case you guys might get stuck.', 'start': 9843.017, 'duration': 3.382}, {'end': 9849.14, 'text': 'There was also the layer section.', 'start': 9846.939, 'duration': 2.201}, {'end': 9851.282, 'text': 'This is where you guys can actually see the layers.', 'start': 9849.22, 'duration': 2.062}, {'end': 9853.443, 'text': 'You can click on this and sort of expand everything.', 'start': 9851.342, 'duration': 2.101}, {'end': 9859.85, 'text': 'And you guys can also design everything using the layer section of this, if you guys choose to do that.', 'start': 9854.043, 'duration': 5.807}, {'end': 9865.457, 'text': "If you guys do click on something, it'll actually take you to the exact column and show you what to edit.", 'start': 9860.271, 'duration': 5.186}, {'end': 9867.239, 'text': 'There is also the finder.', 'start': 9866.097, 'duration': 1.142}, {'end': 9873.623, 'text': 'All right, and the find your elements, this basically just takes you to different parts of the website.', 'start': 9869.281, 'duration': 4.342}, {'end': 9877.804, 'text': "It also just shows you things on the website if you're looking for.", 'start': 9873.863, 'duration': 3.941}, {'end': 9884.046, 'text': 'The helper option essentially does things for you on your website and it also takes you to other parts of the websites.', 'start': 9877.824, 'duration': 6.222}, {'end': 9886.147, 'text': "I don't really use it too much to be honest.", 'start': 9884.566, 'duration': 1.581}, {'end': 9891.609, 'text': 'For example, if you wanna view this in like desktop, you would just show it in desktop.', 'start': 9886.507, 'duration': 5.102}, {'end': 9894.311, 'text': "Yeah, it just, you know, it's just like a shortcut builder.", 'start': 9892.129, 'duration': 2.182}, {'end': 9896.734, 'text': 'It just takes you to different parts of the website.', 'start': 9894.451, 'duration': 2.283}, {'end': 9898.535, 'text': "Again, I don't really use it too much.", 'start': 9897.134, 'duration': 1.401}, {'end': 9906.002, 'text': 'So if you guys do want to use this finder to view different parts of the website or go to different parts, you guys can use this,', 'start': 9898.816, 'duration': 7.186}, {'end': 9907.103, 'text': "but I don't really use it.", 'start': 9906.002, 'duration': 1.101}, {'end': 9911.627, 'text': 'This option right here is essentially going to export the entire layout.', 'start': 9908.084, 'duration': 3.543}, {'end': 9919.494, 'text': "So let's say for example, you guys build your websites, and then you guys want to export this onto another websites, you guys can export this.", 'start': 9911.787, 'duration': 7.707}, {'end': 9923.958, 'text': "And once that's done, it's going to give you guys a JSON file.", 'start': 9920.355, 'duration': 3.603}, {'end': 9928.382, 'text': 'you guys can go ahead and take this and then you can import it on another Divi websites.', 'start': 9923.958, 'duration': 4.424}, {'end': 9931.344, 'text': 'So this is the imports and the export feature.', 'start': 9928.842, 'duration': 2.502}, {'end': 9937.975, 'text': 'The next feature is the undo, I guess you wanna say the history thing.', 'start': 9932.486, 'duration': 5.489}, {'end': 9944.626, 'text': "So let's say for example, you made a mistake, right? Like for example, I'll make a big mistake right here, right? I'll make another mistake.", 'start': 9938.015, 'duration': 6.611}, {'end': 9946.808, 'text': "and then I'll make another mistake.", 'start': 9945.748, 'duration': 1.06}], 'summary': 'The transcript discusses using a/b split test, divi helper, layer section, finder, export feature, and undo feature in divi websites.', 'duration': 135.708, 'max_score': 9811.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE09811100.jpg'}, {'end': 10096.052, 'src': 'embed', 'start': 10065.233, 'weight': 0, 'content': [{'end': 10065.993, 'text': 'And there we go.', 'start': 10065.233, 'duration': 0.76}, {'end': 10068.955, 'text': 'So we have this beautiful website, everything imported.', 'start': 10066.273, 'duration': 2.682}, {'end': 10071.637, 'text': 'And yeah, they have over like 500 templates, guys.', 'start': 10069.555, 'duration': 2.082}, {'end': 10073.558, 'text': 'So be sure to check out the Divi templates.', 'start': 10071.657, 'duration': 1.901}, {'end': 10081.183, 'text': 'On the right side, this is obviously the phone view, the tablet view, and also the desktop view.', 'start': 10074.419, 'duration': 6.764}, {'end': 10083.225, 'text': 'There is also a zoom out.', 'start': 10081.744, 'duration': 1.481}, {'end': 10088.988, 'text': 'which allows you to zoom out here and just, it just gives you like a better visual of the website.', 'start': 10084.285, 'duration': 4.703}, {'end': 10096.052, 'text': 'I do like this a lot because this helps like you understand like how it looks from, uh, it just helps you get a better idea for it.', 'start': 10089.088, 'duration': 6.964}], 'summary': 'A website with over 500 divi templates, viewable in phone, tablet, and desktop, with a zoom out feature for better visual understanding.', 'duration': 30.819, 'max_score': 10065.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010065233.jpg'}, {'end': 10136.114, 'src': 'embed', 'start': 10108.54, 'weight': 2, 'content': [{'end': 10113.082, 'text': 'So you guys can actually build your website from the actual wireframe view.', 'start': 10108.54, 'duration': 4.542}, {'end': 10117.164, 'text': 'When Divi first came out, this was actually the only way to build a website.', 'start': 10113.642, 'duration': 3.522}, {'end': 10118.725, 'text': 'And you had to build it like this.', 'start': 10117.404, 'duration': 1.321}, {'end': 10125.708, 'text': 'But Divi 3.0, which came out a few years ago, actually allowed you to build everything from the front end.', 'start': 10119.345, 'duration': 6.363}, {'end': 10132.952, 'text': 'So it was a very big update, but I have videos on YouTube that actually show you guys how to build the website from this method.', 'start': 10126.108, 'duration': 6.844}, {'end': 10136.114, 'text': 'I have been using Divi for quite some time.', 'start': 10133.912, 'duration': 2.202}], 'summary': 'Using divi, you can now build websites from the front end, a major update from the previous wireframe view.', 'duration': 27.574, 'max_score': 10108.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010108540.jpg'}, {'end': 10213.563, 'src': 'embed', 'start': 10184.593, 'weight': 16, 'content': [{'end': 10190.983, 'text': 'I just want to let you guys know that I do have a blog post that actually pulled up a lot of the best Divi Theme tutorials.', 'start': 10184.593, 'duration': 6.39}, {'end': 10198.074, 'text': 'Divi Theme actually has created a lot of really nice tutorials, like how to add specific effects and animations.', 'start': 10191.604, 'duration': 6.47}, {'end': 10203.637, 'text': 'And the thing is they actually released these just randomly and they just put them on the internet.', 'start': 10198.514, 'duration': 5.123}, {'end': 10207.939, 'text': 'So what I did here was actually compiled a lot of their best tutorials.', 'start': 10203.757, 'duration': 4.182}, {'end': 10213.563, 'text': 'Like for example, here, they added this like option on top of the actual menu, which is really cool.', 'start': 10208.06, 'duration': 5.503}], 'summary': 'Compiled a blog post featuring the best divi theme tutorials, including specific effects and animations, released by divi theme randomly and put them on the internet.', 'duration': 28.97, 'max_score': 10184.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010184593.jpg'}, {'end': 10314.598, 'src': 'embed', 'start': 10285.799, 'weight': 17, 'content': [{'end': 10287.9, 'text': 'All right, and our first guest, his name is Nelson Miller.', 'start': 10285.799, 'duration': 2.101}, {'end': 10290.661, 'text': 'He is the owner of picreative.com.', 'start': 10287.98, 'duration': 2.681}, {'end': 10293.603, 'text': 'where he has tons of Divi products.', 'start': 10291.101, 'duration': 2.502}, {'end': 10295.104, 'text': 'He offers Divi child themes.', 'start': 10293.643, 'duration': 1.461}, {'end': 10299.547, 'text': "He actually has one product here that's pretty popular, and it's the Responsive Helper.", 'start': 10295.484, 'duration': 4.063}, {'end': 10304.671, 'text': 'This is on the Divi marketplace, and it is a trending product, so a lot of people do like it.', 'start': 10299.968, 'duration': 4.703}, {'end': 10306.652, 'text': 'He also does have courses.', 'start': 10305.111, 'duration': 1.541}, {'end': 10314.598, 'text': 'He has a lot of tutorials on how to do stuff, so if you ever get stuck on something or you wanna learn on how to do something with Divi,', 'start': 10307.453, 'duration': 7.145}], 'summary': 'Nelson miller, owner of picreative.com, offers popular divi products and courses, including the trending responsive helper on the divi marketplace.', 'duration': 28.799, 'max_score': 10285.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010285799.jpg'}, {'end': 10356.45, 'src': 'embed', 'start': 10329.131, 'weight': 18, 'content': [{'end': 10333.833, 'text': 'Some of you may know me from my Divi tutorials every week and my Divi plugins.', 'start': 10329.131, 'duration': 4.702}, {'end': 10339.876, 'text': "So today we're looking at a really powerful, exciting feature in Divi.", 'start': 10334.473, 'duration': 5.403}, {'end': 10349.922, 'text': "It's called their conditions feature conditional logic displays where we can actually choose to display any section, row, column,", 'start': 10339.956, 'duration': 9.966}, {'end': 10353.706, 'text': 'module based on some kind of condition that we can choose and set.', 'start': 10349.922, 'duration': 3.784}, {'end': 10356.45, 'text': 'You can add one or you can combine conditions.', 'start': 10354.207, 'duration': 2.243}], 'summary': "Divi's new conditions feature allows display customization based on user-set conditions.", 'duration': 27.319, 'max_score': 10329.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010329131.jpg'}, {'end': 10544.06, 'src': 'embed', 'start': 10516.119, 'weight': 19, 'content': [{'end': 10523.502, 'text': 'I could go in here and add a condition that this, for this month, this will appear based on date and time.', 'start': 10516.119, 'duration': 7.383}, {'end': 10532.889, 'text': "And then I can say display only if current date is after And let's say I choose the last day of the last month.", 'start': 10524.263, 'duration': 8.626}, {'end': 10544.06, 'text': "Now I'm going to add another condition on this one and say date and time is before and then I'll actually choose the first day of the next month.", 'start': 10533.81, 'duration': 10.25}], 'summary': 'Set conditions to display content based on specific dates and times.', 'duration': 27.941, 'max_score': 10516.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010516119.jpg'}, {'end': 10614.378, 'src': 'embed', 'start': 10587.421, 'weight': 20, 'content': [{'end': 10594.848, 'text': "Well, I just happen to know that the sale actually ends tomorrow because I've set that in the back end of this WooCommerce product.", 'start': 10587.421, 'duration': 7.427}, {'end': 10601.554, 'text': 'So I would like to have a countdown timer here that will display until the sale is over.', 'start': 10595.449, 'duration': 6.105}, {'end': 10607.896, 'text': "So right now I'm editing the Theme Builder template that's applied to all of my products.", 'start': 10602.455, 'duration': 5.441}, {'end': 10609.177, 'text': 'So I have to keep that in mind.', 'start': 10607.936, 'duration': 1.241}, {'end': 10614.378, 'text': "I'm not just editing this particular product page, I'm actually editing the Theme Builder template.", 'start': 10609.237, 'duration': 5.141}], 'summary': 'The sale ends tomorrow, and a countdown timer is needed to display the time left on all product pages.', 'duration': 26.957, 'max_score': 10587.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010587421.jpg'}, {'end': 10767.579, 'src': 'embed', 'start': 10737.291, 'weight': 21, 'content': [{'end': 10740.452, 'text': 'I could choose a specific first day of the month or last day of the month.', 'start': 10737.291, 'duration': 3.161}, {'end': 10742.232, 'text': 'So things like that are also available.', 'start': 10740.532, 'duration': 1.7}, {'end': 10744.933, 'text': 'So here is a cart page layout.', 'start': 10742.872, 'duration': 2.061}, {'end': 10751.814, 'text': "So if someone has added a product to the cart, now it looks like there is a product here in the cart, so that's great.", 'start': 10745.413, 'duration': 6.401}, {'end': 10756.735, 'text': 'What I can do is actually add some kind of upsell here.', 'start': 10752.494, 'duration': 4.241}, {'end': 10763.117, 'text': 'to maybe something that is a related product that I know is related to that,', 'start': 10757.415, 'duration': 5.702}, {'end': 10767.579, 'text': 'or just like maybe I have a membership and like why not buy that instead of this product?', 'start': 10763.117, 'duration': 4.462}], 'summary': 'Options for cart page layout include upsell for related products or memberships.', 'duration': 30.288, 'max_score': 10737.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010737291.jpg'}], 'start': 8980.416, 'title': 'Divi theme features', 'summary': 'Covers various features of the divi theme, including website design features overview, bulk editing and presets, divi features overview, page elements and features, website creation using divi, advanced features and tutorials, and conditional display for e-commerce websites, aiming to streamline design processes and improve workflow efficiency while enhancing user experience. it showcases the availability of over 500 templates for website creation, the usefulness of bulk editing for module customization, and the automation of specific content display on e-commerce websites based on conditions.', 'chapters': [{'end': 9152.219, 'start': 8980.416, 'title': 'Website design features overview', 'summary': 'Introduces the process of adding lottie files to a website, utilizing the find and replace feature to efficiently update design elements, and the bulk editing feature for concurrent design modifications, aiming to streamline the design process and improve workflow efficiency.', 'duration': 171.803, 'highlights': ['The Find and Replace feature allows users to efficiently update design elements on their website, such as changing all buttons or text colors at once, streamlining the design process and boosting workflow efficiency. The Find and Replace feature enables users to change all buttons or text colors across the entire website at once, providing a streamlined design process and improved workflow efficiency.', "The process of adding Lottie files to a website is demonstrated, ensuring that the selected files are compatible with the website's style for seamless integration. The demonstration showcases the process of selecting Lottie files that align with the website's style for seamless integration, enhancing the website's visual appeal.", 'The Bulk Editing feature allows for concurrent design modifications, enabling users to design multiple elements simultaneously, rather than individually, further optimizing the design process. The Bulk Editing feature empowers users to design multiple elements concurrently, eliminating the need for individual modifications and enhancing the overall design process.']}, {'end': 9329.656, 'start': 9152.219, 'title': 'Bulk editing and presets in divi', 'summary': 'Discusses how to use bulk editing by holding the shift button and changing module settings, allowing users to edit multiple modules simultaneously. it also explains how to create and apply presets for module styles, saving time and effort in design customization.', 'duration': 177.437, 'highlights': ['Bulk editing allows users to simultaneously edit multiple modules by holding the Shift button and changing module settings, saving time and effort in design customization. The bulk editing feature enables users to edit multiple modules at once by holding the Shift button and changing module settings. This can save significant time and effort, especially when needing to make uniform changes across multiple modules.', 'Presets feature allows users to create and apply saved styles to modules, streamlining the design customization process. The presets feature in Divi allows users to create and apply saved styles to modules, providing a streamlined approach to design customization. This can significantly reduce the time and effort required for repetitive design tasks.']}, {'end': 9827.9, 'start': 9331.53, 'title': 'Divi features overview', 'summary': 'Introduces various features of the divi theme, including copy and paste module styles, extending styles to entire rows, using shape dividers for design effects, scroll effects for elements, and a/b split testing for text and performance analysis.', 'duration': 496.37, 'highlights': ['The Divi A/B split testing feature allows users to compare different text or images to determine which performs best, providing analytics to show which one is performing the best and the ability to end the split test and pick a winner. A/B split testing allows comparison of different text or images, provides analytics for performance, and enables users to end the split test and pick a winner.', "The Divi scroll effects feature enables elements to stick or move with scrolling, offering various use cases and effects, and the ability to check Elegant Themes' YouTube channel for more ways to utilize scroll effects. Scroll effects allow elements to stick or move with scrolling, provides various use cases and effects, and references Elegant Themes' YouTube channel.", 'The use of shape dividers in Divi allows for creative design effects, such as adding dividers to sections, changing colors and heights, and introducing various shapes for creative website designs. Shape dividers offer creative design effects, allow adding dividers to sections, changing colors and heights, and introducing various shapes for creative website designs.', 'The feature of extending styles in Divi enables applying styles to the entire row or column, providing an example of applying styles to all modules in a row. Extending styles applies styles to the entire row or column and provides an example of applying styles to all modules in a row.', 'The copy and paste module styles feature in Divi allows for copying and pasting module styles, providing an example of copying and pasting module styles. Copy and paste module styles feature allows for copying and pasting module styles and provides an example of copying and pasting module styles.']}, {'end': 9980.618, 'start': 9827.9, 'title': 'Divi page elements and features', 'summary': 'Discusses the various elements and features of divi, including divi helper, layer section, finder, import/export feature, and undo history, highlighting their functionalities and the benefits they offer to users.', 'duration': 152.718, 'highlights': ['The import/export feature allows users to export the entire layout of their website as a JSON file, facilitating easy transfer to another Divi website.', 'The undo history feature enables users to revert to previous states of the website, providing a convenient way to correct mistakes and track editing history.', 'The Divi helper provides assistance and guidance to users, offering help when needed and serving as a shortcut builder for different parts of the website.', 'The layer section allows users to view and design individual elements of the website, providing a detailed overview and editing capability.', 'The finder feature assists in navigating and locating specific parts of the website, offering a convenient way to access different sections of the site.']}, {'end': 10165.308, 'start': 9980.618, 'title': 'Using divi to create beautiful websites', 'summary': 'Demonstrates using divi to import pre-made layouts, build websites using different views, and features over 500 templates, allowing customization of colors, fonts, and images to fit client criteria. it also showcases the option to view the website in multiple device formats and wireframe view.', 'duration': 184.69, 'highlights': ['The Divi platform offers over 500 pre-made templates for building websites, allowing for easy customization of colors, fonts, and images to match client preferences, as demonstrated by importing agency layout. (Relevance Score: 5)', "The chapter showcases the functionality of viewing the website in different device formats, including phone, tablet, and desktop, providing a better visual representation and understanding of the website's appearance. (Relevance Score: 4)", 'The feature to build websites from a wireframe view is highlighted, explaining the historical method of web building and the transition to front-end building with Divi 3.0. (Relevance Score: 3)']}, {'end': 10471.124, 'start': 10165.388, 'title': 'Divi theme: advanced features and tutorials', 'summary': 'Discusses the advanced features of the divi theme, highlighting the availability of tutorials for specific effects and animations, as well as showcasing the usefulness of the conditions feature in divi, allowing the user to display content based on specific conditions. additionally, it introduces a guest, nelson miller, who offers divi products and courses.', 'duration': 305.736, 'highlights': ["The Divi Theme offers a wide range of tutorials for specific effects and animations, providing users with the opportunity to improve their skills. The Divi Theme provides a variety of tutorials, such as adding specific effects and animations, to enhance users' skills.", 'Nelson Miller, the owner of picreative.com, offers Divi child themes, a trending product called the Responsive Helper, and various courses, catering to the needs of Divi users. Nelson Miller provides Divi users with a range of products, including the Responsive Helper, and offers courses to assist users with using Divi effectively.', 'The conditions feature in Divi allows users to display content based on specific conditions, such as operating systems, providing a more tailored user experience. The conditions feature in Divi enables users to customize the display of content based on specific conditions, such as operating systems, for a more personalized user experience.']}, {'end': 10848.885, 'start': 10471.944, 'title': 'Conditional display for e-commerce website', 'summary': 'Discusses using conditional display based on date and time, product availability, and cart contents to automate the display of specific content on an e-commerce website, reducing the need for manual updates and enhancing user experience.', 'duration': 376.941, 'highlights': ['Conditional display based on date and time Demonstrates how to use date and time conditions to automatically display content, such as the flavor of the month, based on specific dates, improving user experience and reducing manual updates.', 'Countdown timer for sale end date Illustrates the implementation of a countdown timer to display the remaining time for a product sale, enhancing urgency and informing customers about the sale end date.', 'Conditional display for cart contents Explains the use of conditional display to offer upsells or promotions based on the products in the cart, optimizing the user experience and potentially increasing sales.']}], 'duration': 1868.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE08980416.jpg', 'highlights': ['The Divi platform offers over 500 pre-made templates for building websites, allowing for easy customization of colors, fonts, and images to match client preferences, as demonstrated by importing agency layout. (Relevance Score: 5)', "The chapter showcases the functionality of viewing the website in different device formats, including phone, tablet, and desktop, providing a better visual representation and understanding of the website's appearance. (Relevance Score: 4)", 'The feature to build websites from a wireframe view is highlighted, explaining the historical method of web building and the transition to front-end building with Divi 3.0. (Relevance Score: 3)', 'The Bulk Editing feature allows for concurrent design modifications, enabling users to design multiple elements simultaneously, rather than individually, further optimizing the design process.', 'The presets feature in Divi allows users to create and apply saved styles to modules, streamlining the design customization process.', 'The Find and Replace feature allows users to efficiently update design elements on their website, such as changing all buttons or text colors at once, streamlining the design process and boosting workflow efficiency.', 'The Divi A/B split testing feature allows users to compare different text or images to determine which performs best, providing analytics to show which one is performing the best and the ability to end the split test and pick a winner.', "The Divi scroll effects feature enables elements to stick or move with scrolling, offering various use cases and effects, and the ability to check Elegant Themes' YouTube channel for more ways to utilize scroll effects.", 'The use of shape dividers in Divi allows for creative design effects, such as adding dividers to sections, changing colors and heights, and introducing various shapes for creative website designs.', 'The feature of extending styles in Divi enables applying styles to the entire row or column, providing an example of applying styles to all modules in a row.', 'The copy and paste module styles feature in Divi allows for copying and pasting module styles, providing an example of copying and pasting module styles.', 'The import/export feature allows users to export the entire layout of their website as a JSON file, facilitating easy transfer to another Divi website.', 'The undo history feature enables users to revert to previous states of the website, providing a convenient way to correct mistakes and track editing history.', 'The Divi helper provides assistance and guidance to users, offering help when needed and serving as a shortcut builder for different parts of the website.', 'The layer section allows users to view and design individual elements of the website, providing a detailed overview and editing capability.', 'The finder feature assists in navigating and locating specific parts of the website, offering a convenient way to access different sections of the site.', 'The Divi Theme offers a wide range of tutorials for specific effects and animations, providing users with the opportunity to improve their skills.', 'Nelson Miller, the owner of picreative.com, offers Divi child themes, a trending product called the Responsive Helper, and various courses, catering to the needs of Divi users.', 'The conditions feature in Divi allows users to display content based on specific conditions, such as operating systems, providing a more tailored user experience.', 'Conditional display based on date and time Demonstrates how to use date and time conditions to automatically display content, such as the flavor of the month, based on specific dates, improving user experience and reducing manual updates.', 'Countdown timer for sale end date Illustrates the implementation of a countdown timer to display the remaining time for a product sale, enhancing urgency and informing customers about the sale end date.', 'Conditional display for cart contents Explains the use of conditional display to offer upsells or promotions based on the products in the cart, optimizing the user experience and potentially increasing sales.']}, {'end': 12173.834, 'segs': [{'end': 10873.8, 'src': 'embed', 'start': 10849.265, 'weight': 5, 'content': [{'end': 10856.61, 'text': "Would you like to add this to your cart and purchase this? So that's just one of the many ways you can use conditions with WooCommerce.", 'start': 10849.265, 'duration': 7.345}, {'end': 10859.111, 'text': "There's a lot of things to do with WooCommerce.", 'start': 10856.63, 'duration': 2.481}, {'end': 10865.855, 'text': 'So I hope that gives you a clear overview of just how powerful the conditions feature is in Divi.', 'start': 10860.172, 'duration': 5.683}, {'end': 10873.8, 'text': 'So I encourage you to explore it and try to find, you know, the things that work for your use case and there are a lot more obviously.', 'start': 10866.296, 'duration': 7.504}], 'summary': 'Woocommerce offers powerful conditions for flexible use cases.', 'duration': 24.535, 'max_score': 10849.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010849265.jpg'}, {'end': 11436.719, 'src': 'embed', 'start': 11405.063, 'weight': 3, 'content': [{'end': 11412.545, 'text': 'so I can open the image settings here, go to the design sizing And we can take the max width.', 'start': 11405.063, 'duration': 7.482}, {'end': 11418.526, 'text': 'click the responsive icon and I can set this to max width of 150 pixels.', 'start': 11412.545, 'duration': 5.981}, {'end': 11421.847, 'text': 'And instead of doing this to all the five other logos here,', 'start': 11419.006, 'duration': 2.841}, {'end': 11431.569, 'text': 'I can just right click the max width and I can extend the max width to all images throughout this row.', 'start': 11421.847, 'duration': 9.722}, {'end': 11433.25, 'text': 'And I click extend.', 'start': 11432.31, 'duration': 0.94}, {'end': 11436.719, 'text': 'There we go, looks much better.', 'start': 11434.537, 'duration': 2.182}], 'summary': 'Adjusted max width to 150 pixels, applied to all images, improving appearance.', 'duration': 31.656, 'max_score': 11405.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE011405063.jpg'}, {'end': 11574.988, 'src': 'embed', 'start': 11505.569, 'weight': 2, 'content': [{'end': 11514.433, 'text': 'so that means that all my existing rows will be 90% wide in mobile and all my future rows will have this size by default as well.', 'start': 11505.569, 'duration': 8.864}, {'end': 11520.416, 'text': "So I'll right click the width and I'll choose apply style to active preset.", 'start': 11514.933, 'duration': 5.483}, {'end': 11525.471, 'text': 'This will affect all rows using the row default preset across your entire site.', 'start': 11521.308, 'duration': 4.163}, {'end': 11526.993, 'text': 'Do you wish to proceed? Yes.', 'start': 11525.511, 'duration': 1.482}, {'end': 11534.439, 'text': 'Perfect And if I would like to override this in one single row somewhere, maybe I want it to be 60% or 100%, I can just go into the row settings.', 'start': 11527.853, 'duration': 6.586}, {'end': 11547.5, 'text': "design, sizing, I'll go to mobile and I could change this to maybe 100% and this will override the default setting.", 'start': 11538.052, 'duration': 9.448}, {'end': 11548.741, 'text': "That's all for today.", 'start': 11547.82, 'duration': 0.921}, {'end': 11558.769, 'text': 'If you want more Divot tutorials, for example on how to style the mobile menu or how to change the number of columns in mobile or tablet,', 'start': 11549.401, 'duration': 9.368}, {'end': 11562.124, 'text': 'Or about 60 other Divi tutorials.', 'start': 11559.739, 'duration': 2.385}, {'end': 11564.168, 'text': 'You should check out my YouTube channel.', 'start': 11562.484, 'duration': 1.684}, {'end': 11570.499, 'text': "Just search for Divimundo or check out divimundo.com and you'll find everything there.", 'start': 11564.769, 'duration': 5.73}, {'end': 11572.123, 'text': 'Now back to you, Darrell.', 'start': 11570.76, 'duration': 1.363}, {'end': 11574.988, 'text': 'All right, cool, thanks, Victor.', 'start': 11573.968, 'duration': 1.02}], 'summary': 'Existing rows 90% wide in mobile, future rows default to 90%. can override in single row. check out divimundo for more tutorials.', 'duration': 69.419, 'max_score': 11505.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE011505569.jpg'}, {'end': 11647.138, 'src': 'embed', 'start': 11613.942, 'weight': 1, 'content': [{'end': 11615.303, 'text': "But there's no need to worry.", 'start': 11613.942, 'duration': 1.361}, {'end': 11619.544, 'text': 'With Divi, you can customize just about anything with the help of CSS.', 'start': 11615.423, 'duration': 4.121}, {'end': 11625.787, 'text': "So the example that I'm going to show you today is how to stack any Divi module side by side within a row.", 'start': 11619.945, 'duration': 5.842}, {'end': 11631.97, 'text': "This works really great if you're trying to put two call to action buttons next to each other or even small images.", 'start': 11626.307, 'duration': 5.663}, {'end': 11637.172, 'text': 'I actually just used this technique on a site that needed to display eight tiny logos next to each other.', 'start': 11632.45, 'duration': 4.722}, {'end': 11643.295, 'text': 'And instead of going through the trouble of building out eight columns, I used the technique and it worked great.', 'start': 11637.192, 'duration': 6.103}, {'end': 11645.196, 'text': "So let me show you how it's done.", 'start': 11643.755, 'duration': 1.441}, {'end': 11647.138, 'text': "We're going to start with an example web page.", 'start': 11645.457, 'duration': 1.681}], 'summary': 'Customize divi modules with css to stack them side by side, useful for displaying multiple logos.', 'duration': 33.196, 'max_score': 11613.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE011613942.jpg'}, {'end': 11746.406, 'src': 'embed', 'start': 11721.977, 'weight': 0, 'content': [{'end': 11732.291, 'text': "Navigate to the advanced tab and custom CSS in the main element section is where we're going to start to add some CSS to modify our modules.", 'start': 11721.977, 'duration': 10.314}, {'end': 11734.975, 'text': "So the first thing I'm going to add is display flex.", 'start': 11732.491, 'duration': 2.484}, {'end': 11739.661, 'text': 'As you can see, the buttons are now side by side next to each other.', 'start': 11735.235, 'duration': 4.426}, {'end': 11741.983, 'text': "There isn't any spacing around them.", 'start': 11739.981, 'duration': 2.002}, {'end': 11746.406, 'text': 'We will address that in a moment, but the next thing I want to tackle is to get them centered.', 'start': 11742.043, 'duration': 4.363}], 'summary': 'Adding display flex to main element section aligns buttons side by side, addressing spacing and centering next', 'duration': 24.429, 'max_score': 11721.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE011721977.jpg'}, {'end': 11847.92, 'src': 'embed', 'start': 11822.141, 'weight': 9, 'content': [{'end': 11827.187, 'text': "So let's hit save on these row settings, and then we will navigate to each individual button.", 'start': 11822.141, 'duration': 5.046}, {'end': 11836.296, 'text': "I will click on the design spacing tab for this, and then I'm going to add 10 pixels to every single side of the button.", 'start': 11827.727, 'duration': 8.569}, {'end': 11846.1, 'text': 'And that will allow for just a little bit of space in between each button as well as when, and if we want these buttons to stack,', 'start': 11836.977, 'duration': 9.123}, {'end': 11847.92, 'text': "then they'll have that extra space too.", 'start': 11846.1, 'duration': 1.82}], 'summary': 'Adjusting design spacing by adding 10 pixels to every side of the button for better visibility and spacing between buttons.', 'duration': 25.779, 'max_score': 11822.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE011822141.jpg'}], 'start': 10849.265, 'title': 'Enhancing divi website with woocommerce, mobile optimization, and css customization', 'summary': 'Covers woocommerce conditions, divi website optimization for mobile, and css customization including a free 5-hour course, image and row width adjustments, stacking modules, and css modifications for different devices.', 'chapters': [{'end': 11405.063, 'start': 10849.265, 'title': 'Woocommerce conditions overview', 'summary': 'Explains the powerful conditions feature in divi, highlighting the use cases for woocommerce, encouraging exploration of the feature, and introducing a free divi course with a five-hour detailed course and free resources by victor from divimundo.', 'duration': 555.798, 'highlights': ['The chapter explains the powerful conditions feature in Divi, highlighting the use cases for WooCommerce. The speaker discusses the use of conditions with WooCommerce as one of the many ways to utilize them with Divi.', 'Introducing a free Divi course with a five-hour detailed course and free resources by Victor from Divimundo. Victor from Divimundo offers a free Divi course, a five-hour detailed course, and free resources including Divi layouts and a blog with tips and tricks for using Divi.', 'Encouraging exploration of the feature. The speaker encourages the audience to explore and find what works for their use case with the conditions feature in Divi.']}, {'end': 11548.741, 'start': 11405.063, 'title': 'Optimizing divi website for mobile', 'summary': 'Discusses optimizing a divi website for mobile by adjusting the max width of images to 150 pixels and changing the default row width to 90% for better display, with the option to override this setting for specific rows.', 'duration': 143.678, 'highlights': ['Adjusting max width of images to 150 pixels The speaker sets the max width of images to 150 pixels to improve the display on mobile devices.', 'Changing default row width to 90% The speaker changes the default row width to 90% for better content display on smaller screens, ensuring all future rows follow this size by default.', 'Option to override default row width for specific rows The speaker explains the ability to override the default row width for specific rows, providing flexibility in design.']}, {'end': 11721.597, 'start': 11549.401, 'title': 'Customize designs in divi', 'summary': 'Discusses how to customize designs in divi by using css to stack any divi module side by side within a row, which is useful for placing call to action buttons or small images, and also mentions the availability of 60 other divi tutorials on the divimundo youtube channel and divimundo.com.', 'duration': 172.196, 'highlights': ['The availability of 60 other Divi tutorials on the Divimundo YouTube channel and divimundo.com. Divimundo offers about 60 other Divi tutorials, providing a wide range of resources for learning Divi.', 'Explaining how to customize designs in Divi using CSS to stack any Divi module side by side within a row. The tutorial focuses on using CSS to stack any Divi module side by side within a row, providing a practical solution for placing call to action buttons or small images.', 'The demonstration of a technique to stack eight tiny logos next to each other using the mentioned method. The speaker demonstrates using the technique to stack eight tiny logos next to each other, showcasing the versatility and applicability of the method.']}, {'end': 12173.834, 'start': 11721.977, 'title': 'Css modification for divi modules', 'summary': 'Covers the process of modifying the css for divi modules, including using display flex, aligning items, justifying content, fixing padding and spacing, and adjusting for different device types, with a focus on tablet and mobile views, and techniques for stacking buttons and adjusting alignments.', 'duration': 451.857, 'highlights': ['The chapter explains the process of modifying CSS for Divi modules, including using display flex, aligning items, and justifying content, resulting in buttons being centered on the page.', 'The transcript details the process of fixing padding and spacing issues by adjusting the gutter width and adding spacing to individual buttons, with 10 pixels added to every side of the button for space between them.', 'Additionally, it covers the adjustments required for tablet and mobile views, such as decreasing text size, increasing row width, and stacking buttons on top of each other, as well as modifying alignments for different device types.', 'Lastly, it mentions the versatility of using display flex in column settings, allowing for stacking side by side of any module type, and provides a link for obtaining the CSS code for the described modifications.', 'The transcript also introduces Divi Engine, specializing in Divi extensions and plugins, and provides an overview of their plugin list, team, blog, and their collaboration with Daryl Wilson to create an event registration page using the Divi theme.']}], 'duration': 1324.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE010849265.jpg', 'highlights': ['The chapter explains the process of modifying CSS for Divi modules, including using display flex, aligning items, and justifying content, resulting in buttons being centered on the page.', 'The speaker demonstrates using the technique to stack eight tiny logos next to each other, showcasing the versatility and applicability of the method.', 'The availability of 60 other Divi tutorials on the Divimundo YouTube channel and divimundo.com, providing a wide range of resources for learning Divi.', 'The speaker sets the max width of images to 150 pixels to improve the display on mobile devices.', 'The speaker changes the default row width to 90% for better content display on smaller screens, ensuring all future rows follow this size by default.', 'The chapter explains the powerful conditions feature in Divi, highlighting the use cases for WooCommerce.', 'The speaker encourages the audience to explore and find what works for their use case with the conditions feature in Divi.', 'The speaker explains the ability to override the default row width for specific rows, providing flexibility in design.', 'The tutorial focuses on using CSS to stack any Divi module side by side within a row, providing a practical solution for placing call to action buttons or small images.', 'The speaker details the process of fixing padding and spacing issues by adjusting the gutter width and adding spacing to individual buttons, with 10 pixels added to every side of the button for space between them.']}, {'end': 13174.804, 'segs': [{'end': 12198.096, 'src': 'embed', 'start': 12173.834, 'weight': 0, 'content': [{'end': 12180.199, 'text': "you'll see that we've got a bunch of different elements on the page here and we're going to show you how to utilize all the features you'll find in divi.", 'start': 12173.834, 'duration': 6.365}, {'end': 12186.544, 'text': "to achieve this layout, why don't we start off by dropping in all the modules that go on this page?", 'start': 12180.199, 'duration': 6.345}, {'end': 12192.01, 'text': "so we're going to start with our two column row and then we're going to start adding text modules.", 'start': 12186.544, 'duration': 5.466}, {'end': 12195.553, 'text': "so we said that there were a few text modules here, so i'll put one in there.", 'start': 12192.01, 'duration': 3.543}, {'end': 12198.096, 'text': "i know that there'll be one more.", 'start': 12195.553, 'duration': 2.543}], 'summary': 'Demonstrating use of divi features to create a layout with two column row and text modules.', 'duration': 24.262, 'max_score': 12173.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012173834.jpg'}, {'end': 12314.573, 'src': 'embed', 'start': 12280.328, 'weight': 1, 'content': [{'end': 12282.569, 'text': 'And there we have most of our section ready.', 'start': 12280.328, 'duration': 2.241}, {'end': 12285.13, 'text': 'We just need to do one more thing here on design.', 'start': 12283.069, 'duration': 2.061}, {'end': 12290.312, 'text': 'We need to go to sizing and we want to make sure that it takes up the full height of the browsers.', 'start': 12285.39, 'duration': 4.922}, {'end': 12293.533, 'text': 'We just say 100 VH for the minimum height.', 'start': 12290.392, 'duration': 3.141}, {'end': 12297.123, 'text': "and then that's it for our section.", 'start': 12294.662, 'duration': 2.461}, {'end': 12298.844, 'text': "we're good to go, okay.", 'start': 12297.123, 'duration': 1.721}, {'end': 12301.526, 'text': "so next up we're going to tackle these row settings.", 'start': 12298.844, 'duration': 2.682}, {'end': 12307.449, 'text': "so we're going to open that up, and for these we don't need to do that much similar to the section.", 'start': 12301.526, 'duration': 5.923}, {'end': 12314.573, 'text': "we're just going to go over at first to the design tab here and then we'll just adjust some of the sizing settings.", 'start': 12307.449, 'duration': 7.124}], 'summary': 'Preparing section, setting full browser height, and adjusting row sizing.', 'duration': 34.245, 'max_score': 12280.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012280328.jpg'}, {'end': 12422.779, 'src': 'embed', 'start': 12394.999, 'weight': 4, 'content': [{'end': 12398.201, 'text': "And we're going to change the font for just the normal text.", 'start': 12394.999, 'duration': 3.202}, {'end': 12402.684, 'text': "So the text that's at the bottom here, we want that to be cabin.", 'start': 12398.221, 'duration': 4.463}, {'end': 12405.986, 'text': "So I'm going to type in C-A-V-N.", 'start': 12403.204, 'duration': 2.782}, {'end': 12410.969, 'text': "And then what I'm going to do is change that color to white.", 'start': 12407.246, 'duration': 3.723}, {'end': 12416.394, 'text': "And we're going to adjust that text size to 28.", 'start': 12412.249, 'duration': 4.145}, {'end': 12417.275, 'text': 'Makes it nice and big.', 'start': 12416.394, 'duration': 0.881}, {'end': 12420.938, 'text': "We'll add one pixel of letter spacing, makes it easy to read.", 'start': 12417.995, 'duration': 2.943}, {'end': 12422.779, 'text': 'These are the details of our event.', 'start': 12420.998, 'duration': 1.781}], 'summary': 'Changing font to cabin, color to white, size to 28, and adding 1 pixel letter spacing for normal text.', 'duration': 27.78, 'max_score': 12394.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012394999.jpg'}, {'end': 12751.024, 'src': 'embed', 'start': 12728.173, 'weight': 2, 'content': [{'end': 12736.399, 'text': "Okay, So let's hop into the contact form settings and we're going to set up the form first and then we'll add all the fields that we need that aren't in here already.", 'start': 12728.173, 'duration': 8.226}, {'end': 12741.183, 'text': "So let's start by just creating a form title down here in text.", 'start': 12737.04, 'duration': 4.143}, {'end': 12744.265, 'text': "We'll say join the fun.", 'start': 12742.323, 'duration': 1.942}, {'end': 12751.024, 'text': 'And we will just put a custom success message in here.', 'start': 12747.523, 'duration': 3.501}], 'summary': "Setting up a contact form with the title 'join the fun' and a custom success message.", 'duration': 22.851, 'max_score': 12728.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012728173.jpg'}, {'end': 12855.975, 'src': 'embed', 'start': 12826.407, 'weight': 3, 'content': [{'end': 12829.49, 'text': "And then the field's text color will get the same treatment.", 'start': 12826.407, 'duration': 3.083}, {'end': 12834.014, 'text': "It's going to be white, but also with a 50% opacity.", 'start': 12829.57, 'duration': 4.444}, {'end': 12838.397, 'text': 'And of course, that 50% on the 50% gives it that darker color.', 'start': 12834.034, 'duration': 4.363}, {'end': 12841.6, 'text': 'Now our field focus text color will be white.', 'start': 12839.138, 'duration': 2.462}, {'end': 12847.325, 'text': "And then we'll just kind of work on that text.", 'start': 12844.042, 'duration': 3.283}, {'end': 12849.487, 'text': "For that, we're going to set the font to cabin.", 'start': 12847.625, 'duration': 1.862}, {'end': 12855.975, 'text': 'And we will increase the text size to about 18.', 'start': 12850.954, 'duration': 5.021}], 'summary': 'Field text color will be white with 50% opacity, font set to cabin, text size increased to 18.', 'duration': 29.568, 'max_score': 12826.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012826407.jpg'}], 'start': 12173.834, 'title': 'Utilizing divi features, web design, and customizing forms', 'summary': 'Covers utilizing divi features for page layout, including adding modules, creating a gradient background, using patterns and masks, and configuring colors. it also delves into web design settings for section, row, text modules, image, and contact form, emphasizing vh for minimum height, css adjustments, and form configuration. additionally, the chapter discusses customizing divi forms, covering field settings, layout customization, and adding user-friendly fields for events or classes.', 'chapters': [{'end': 12279.628, 'start': 12173.834, 'title': 'Utilizing divi features for page layout', 'summary': 'Covers the process of utilizing various divi features to create a layout, including adding modules, creating a gradient background, using patterns and background masks, and configuring colors.', 'duration': 105.794, 'highlights': ['The chapter covers the process of utilizing various Divi features to create a layout, including adding modules, creating a gradient background, using patterns and background masks, and configuring colors.', 'The layout includes a two-column row with text modules, a bird module, a contact form, and an image.', "The section background utilizes a gradient with red and black colors, and a pattern called 'pulls' is added with a speedy effect.", "The background mask feature 'chevron' is used with a blue color, and the modules are styled up in a moment."]}, {'end': 12776.755, 'start': 12280.328, 'title': 'Web design section overview', 'summary': "Covers the design settings for a website's section, row, text modules, image and contact form, emphasizing the use of vh for minimum height, css adjustments for text alignment, font size, color, and shadow, and the configuration of form title, success message, and submit button text.", 'duration': 496.427, 'highlights': ['The use of VH for minimum height in the section and row settings The speaker emphasizes setting the minimum height to 100 VH for both the section and row, ensuring full height coverage, promoting a responsive design.', 'CSS adjustments for text alignment, font size, color, and shadow in the text modules settings The speaker details the process of adjusting font size, color, and shadow for different text elements, enhancing readability and visual appeal.', 'Configuration of form title, success message, and submit button text in the contact form settings The speaker walks through the customization of form title, success message, and submit button text, providing a personalized touch to the registration process.']}, {'end': 13174.804, 'start': 12776.795, 'title': 'Customizing divi form', 'summary': 'Discusses customizing a divi form, including setting field opacity, text color, font, layout, and adding fields like first name, last name, email, age, and fitness level, with the aim of creating user-friendly registration forms for events or classes.', 'duration': 398.009, 'highlights': ['Setting field opacity and text color Adjusting field background color to 50% opacity and text color to white with 50% opacity to create a darker color for better readability.', "Customizing text and font Setting the font to 'cabin', increasing the text size to 18, and adding one pixel letter spacing for improved legibility.", 'Adding fields and customizing layout Adding fields for first name, last name, email, age, and fitness level, customizing layout by making specific fields full width, and using a select dropdown for the fitness level with pre-made options.', 'Enhancing user experience Mentioning the usefulness of creating such forms for event or class registrations, emphasizing the ease of creating user-friendly pages, and highlighting the ability to add custom placeholders and labels, as well as saving submissions to the database.']}], 'duration': 1000.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE012173834.jpg', 'highlights': ['The chapter covers utilizing various Divi features to create a layout with modules, gradient background, patterns, and colors.', 'Using VH for minimum height in section and row settings to ensure full height coverage and responsive design.', 'Customizing form title, success message, and submit button text in the contact form settings for a personalized touch.', 'Adjusting field background color to 50% opacity and text color to white with 50% opacity for better readability.', 'Customizing font, text size, and letter spacing for improved legibility and adding fields for event or class registrations.']}, {'end': 15207.331, 'segs': [{'end': 13390.282, 'src': 'heatmap', 'start': 13215.876, 'weight': 0, 'content': [{'end': 13224.002, 'text': 'With the Divi theme builder, you guys can enable custom headers, custom footers, custom 404 pages using the actual Divi builder.', 'start': 13215.876, 'duration': 8.126}, {'end': 13229.225, 'text': 'For example, we have this menu here at the top and this is all controlled by the theme customizer.', 'start': 13224.402, 'duration': 4.823}, {'end': 13236.41, 'text': "However, you guys can also build your own menu with the actual Divi theme elements and I'll walk you guys through on how to do that.", 'start': 13229.625, 'duration': 6.785}, {'end': 13239.679, 'text': "So let's go ahead and go to our dashboard here.", 'start': 13237.051, 'duration': 2.628}, {'end': 13243.951, 'text': "We'll go down to Divi and click on Theme Builder.", 'start': 13240.622, 'duration': 3.329}, {'end': 13247.23, 'text': 'So this is the Divi Theme Builder options.', 'start': 13245.609, 'duration': 1.621}, {'end': 13252.214, 'text': 'Here you can see that we can have a global header, a global body, and also a global footer.', 'start': 13247.31, 'duration': 4.904}, {'end': 13258.918, 'text': 'We can also click on new template here and we can create specific templates for specific parts of the websites.', 'start': 13252.714, 'duration': 6.204}, {'end': 13262.581, 'text': "We're gonna go ahead and do another example here in just a bit.", 'start': 13258.938, 'duration': 3.643}, {'end': 13266.804, 'text': 'But what I first wanna do is I wanna walk you guys through on how to create a global header.', 'start': 13262.981, 'duration': 3.823}, {'end': 13272.61, 'text': 'Now you guys saw previously that we are using the default menu with the theme customizer.', 'start': 13267.424, 'duration': 5.186}, {'end': 13274.312, 'text': 'So I want to use the theme builder here.', 'start': 13272.95, 'duration': 1.362}, {'end': 13279.238, 'text': "So I'm going to first click on build a global header and click on build global header.", 'start': 13274.552, 'duration': 4.686}, {'end': 13281.861, 'text': "And I'll see that the Divi builder is loading here.", 'start': 13279.778, 'duration': 2.083}, {'end': 13285.583, 'text': "All right, so right now we're brought to the screen where we can now use the Divi Builder.", 'start': 13282.261, 'duration': 3.322}, {'end': 13291.527, 'text': 'So what I wanna do here is I wanna build out a custom header that we can design using the Divi Builder.', 'start': 13285.723, 'duration': 5.804}, {'end': 13295.45, 'text': "So right here I'll click on the plus and then go to.", 'start': 13291.867, 'duration': 3.583}, {'end': 13301.654, 'text': "we're gonna go to this one here, right? Where it has this large menu and also this really small section.", 'start': 13295.45, 'duration': 6.204}, {'end': 13307.118, 'text': "I'm doing this because I wanna have the menu here with enough space to work with, and then also have the button here,", 'start': 13302.314, 'duration': 4.804}, {'end': 13309.119, 'text': "because the button doesn't really need a lot of space, right?", 'start': 13307.118, 'duration': 2.001}, {'end': 13311.861, 'text': 'So right here I will click on menu.', 'start': 13309.699, 'duration': 2.162}, {'end': 13314.382, 'text': 'click on check now.', 'start': 13313.062, 'duration': 1.32}, {'end': 13318.825, 'text': 'you guys can see that our menu has self propagated here and then also over here.', 'start': 13314.382, 'duration': 4.443}, {'end': 13325.81, 'text': "i'm going to add from library and i want to add in the button that we've been using, uh, throughout the entire website right, and this can lead to,", 'start': 13318.825, 'duration': 6.985}, {'end': 13330.313, 'text': 'like your contact form, uh, by clicking on the gear icon for the link.', 'start': 13325.81, 'duration': 4.503}, {'end': 13336.49, 'text': 'this would be like you know your, you know your website dot com, slash, contact us or something you know.', 'start': 13330.313, 'duration': 6.177}, {'end': 13340.031, 'text': 'it would just be the link of a you know whatever page you wanted users to go to.', 'start': 13336.49, 'duration': 3.541}, {'end': 13344.212, 'text': "Right So, um, now that we've done that, I want to reduce this padding.", 'start': 13340.131, 'duration': 4.081}, {'end': 13348.494, 'text': "Cause now you can see this menu is too big, right? It's, it's a lot of white space and I want to get rid of that.", 'start': 13344.232, 'duration': 4.262}, {'end': 13350.415, 'text': "So I'm going to go ahead and reduce this padding.", 'start': 13348.514, 'duration': 1.901}, {'end': 13352.153, 'text': 'Get rid of all that.', 'start': 13351.332, 'duration': 0.821}, {'end': 13356.935, 'text': 'And then also for this section here, I also want to get rid of the padding.', 'start': 13353.193, 'duration': 3.742}, {'end': 13360.097, 'text': 'So spacing zero and zero.', 'start': 13357.135, 'duration': 2.962}, {'end': 13366.3, 'text': "Right Or maybe like, I don't know, let's do like two pixels and two pixels or something like that.", 'start': 13361.157, 'duration': 5.143}, {'end': 13369.412, 'text': 'Okay So there we go.', 'start': 13367.751, 'duration': 1.661}, {'end': 13370.493, 'text': 'We got the menu there.', 'start': 13369.432, 'duration': 1.061}, {'end': 13375.015, 'text': "Uh, one thing though, is I think this button's a little bit too close to the top of the page.", 'start': 13370.513, 'duration': 4.502}, {'end': 13382.02, 'text': "So let's say for example, you want it to control only one part of the actual column here for row settings for column two.", 'start': 13375.316, 'duration': 6.704}, {'end': 13389.164, 'text': 'I want to go to design, go to the spacing, and I want to add a little bit more just for that one right there.', 'start': 13382.8, 'duration': 6.364}, {'end': 13390.282, 'text': 'just for that row.', 'start': 13389.522, 'duration': 0.76}], 'summary': 'Using divi theme builder, create custom headers, footers, and 404 pages, as demonstrated in the tutorial.', 'duration': 174.406, 'max_score': 13215.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE013215876.jpg'}, {'end': 14399.96, 'src': 'embed', 'start': 14371.431, 'weight': 1, 'content': [{'end': 14373.753, 'text': 'For the DV theme builder and everything should be just fine.', 'start': 14371.431, 'duration': 2.322}, {'end': 14376.675, 'text': "So I'll go ahead and go over here and now I'm going to import that.", 'start': 14373.773, 'duration': 2.902}, {'end': 14377.876, 'text': 'All right.', 'start': 14377.576, 'duration': 0.3}, {'end': 14378.796, 'text': 'The DV theme builder.', 'start': 14377.936, 'duration': 0.86}, {'end': 14382.319, 'text': "And now I'm going to import the DV theme builder templates.", 'start': 14379.297, 'duration': 3.022}, {'end': 14384.694, 'text': 'And there you go.', 'start': 14383.912, 'duration': 0.782}, {'end': 14386.198, 'text': 'So everything is saved.', 'start': 14384.795, 'duration': 1.403}, {'end': 14388.444, 'text': 'All I got to do is click on Save Changes.', 'start': 14386.84, 'duration': 1.604}, {'end': 14391.271, 'text': "Now let's go ahead and click on Visit Sites.", 'start': 14389.446, 'duration': 1.825}, {'end': 14394.235, 'text': 'And perfect, everything is loaded.', 'start': 14392.674, 'duration': 1.561}, {'end': 14395.316, 'text': 'Everything looks great.', 'start': 14394.476, 'duration': 0.84}, {'end': 14399.96, 'text': "If you go to the bottom of the page, you'll also see that our custom footer that we made is back there.", 'start': 14395.616, 'duration': 4.344}], 'summary': 'Successfully imported dv theme builder templates and custom footer, site is loaded and looks great.', 'duration': 28.529, 'max_score': 14371.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE014371431.jpg'}, {'end': 14482.916, 'src': 'embed', 'start': 14450.187, 'weight': 3, 'content': [{'end': 14450.508, 'text': "Let's go.", 'start': 14450.187, 'duration': 0.321}, {'end': 14454.871, 'text': 'All right party people, welcome to the last section of this video.', 'start': 14451.849, 'duration': 3.022}, {'end': 14458.114, 'text': "In this part of the video, I'll be explaining the Divi Marketplace.", 'start': 14455.252, 'duration': 2.862}, {'end': 14465.38, 'text': 'Now the Divi Marketplace is essentially add-ons, layouts, and child themes that you can add to your Divi website.', 'start': 14458.614, 'duration': 6.766}, {'end': 14470.885, 'text': "For example, we'll go ahead and scroll down here and I'm first going to uncheck layouts and child themes.", 'start': 14465.921, 'duration': 4.964}, {'end': 14473.787, 'text': 'Now the Divi extensions are plugins.', 'start': 14471.385, 'duration': 2.402}, {'end': 14477.211, 'text': 'So these are plugins that give your website more functionality.', 'start': 14474.048, 'duration': 3.163}, {'end': 14482.916, 'text': 'For example, this one here is a plugin that gives you 50 new premium modules.', 'start': 14477.671, 'duration': 5.245}], 'summary': 'The divi marketplace offers add-ons, layouts, and child themes for divi websites, including plugins with 50 new premium modules.', 'duration': 32.729, 'max_score': 14450.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE014450187.jpg'}, {'end': 14566.919, 'src': 'embed', 'start': 14544.169, 'weight': 2, 'content': [{'end': 14551.734, 'text': 'They also do have just normal template packs like hero sections for Divi, which is like landing page sections, slider modules.', 'start': 14544.169, 'duration': 7.565}, {'end': 14559.937, 'text': 'Basically a bunch of designers got together and they just created some really nice styles and stuff that you guys can add on your website.', 'start': 14552.594, 'duration': 7.343}, {'end': 14561.137, 'text': "So that's Divi layouts.", 'start': 14559.997, 'duration': 1.14}, {'end': 14562.638, 'text': 'Divi child themes.', 'start': 14561.857, 'duration': 0.781}, {'end': 14566.919, 'text': 'Divi child themes are essentially modified versions of Divi with code.', 'start': 14563.158, 'duration': 3.761}], 'summary': 'Divi offers template packs and child themes for website customization.', 'duration': 22.75, 'max_score': 14544.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE014544169.jpg'}, {'end': 14934.796, 'src': 'embed', 'start': 14908.865, 'weight': 4, 'content': [{'end': 14914.573, 'text': "All right, so right here it's telling us that the parent Divi must be installed, right? So it requires a parent theme.", 'start': 14908.865, 'duration': 5.708}, {'end': 14915.534, 'text': 'This is a child theme.', 'start': 14914.613, 'duration': 0.921}, {'end': 14918.979, 'text': 'It has detected Divi, so it has installed successfully.', 'start': 14915.895, 'duration': 3.084}, {'end': 14920.201, 'text': "Now let's click on activate.", 'start': 14918.999, 'duration': 1.202}, {'end': 14923.653, 'text': 'All right, so I went ahead and I installed the child theme.', 'start': 14921.752, 'duration': 1.901}, {'end': 14927.774, 'text': 'Now this child theme has some instructions, okay? So I actually went through and researched this.', 'start': 14923.733, 'duration': 4.041}, {'end': 14934.796, 'text': "The first thing we're gonna do is go to the Divi theme options and we're going to import the options in the Divi theme options.", 'start': 14928.454, 'duration': 6.342}], 'summary': 'Child theme successfully installed for divi, with instructions to import options.', 'duration': 25.931, 'max_score': 14908.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE014908865.jpg'}, {'end': 15206.991, 'src': 'heatmap', 'start': 15057.233, 'weight': 1, 'content': [{'end': 15057.993, 'text': 'Divi library.', 'start': 15057.233, 'duration': 0.76}, {'end': 15060.634, 'text': "We'll click on the import and export.", 'start': 15059.033, 'duration': 1.601}, {'end': 15063.334, 'text': "We'll import, choose the file.", 'start': 15061.374, 'duration': 1.96}, {'end': 15065.995, 'text': 'And this will be the pro builder layouts.', 'start': 15064.254, 'duration': 1.741}, {'end': 15069.615, 'text': "I'll open that and I will import the Divi builder layouts.", 'start': 15066.875, 'duration': 2.74}, {'end': 15071.916, 'text': 'All right, cool.', 'start': 15071.416, 'duration': 0.5}, {'end': 15073.996, 'text': "So I think now we're ready to go here.", 'start': 15072.076, 'duration': 1.92}, {'end': 15077.017, 'text': "So I'm gonna go to visit sites, we're going to add a new page.", 'start': 15074.016, 'duration': 3.001}, {'end': 15080.817, 'text': 'And this will be like the homepage.', 'start': 15079.397, 'duration': 1.42}, {'end': 15083.758, 'text': "I'll publish this, I'll publish this.", 'start': 15082.118, 'duration': 1.64}, {'end': 15087.975, 'text': "I'll use the Divi builder.", 'start': 15087.014, 'duration': 0.961}, {'end': 15091.999, 'text': "And now I'm going to click on add from library.", 'start': 15087.995, 'duration': 4.004}, {'end': 15094.101, 'text': 'All right.', 'start': 15093.881, 'duration': 0.22}, {'end': 15100.668, 'text': "And once that's done, we're going to go over here and we're going to click on this little plus icon and go to your saved layouts.", 'start': 15094.121, 'duration': 6.547}, {'end': 15104.252, 'text': 'Now you guys will see that we have the homegrown page.', 'start': 15100.968, 'duration': 3.284}, {'end': 15107.175, 'text': "I'll just click on this and use this layout.", 'start': 15104.952, 'duration': 2.223}, {'end': 15110.246, 'text': "And that's it, we're done.", 'start': 15109.366, 'duration': 0.88}, {'end': 15114.447, 'text': 'Now you guys have a fully completed website that was made in just a few seconds.', 'start': 15110.426, 'duration': 4.021}, {'end': 15119.809, 'text': "So these child themes, they have a lot of really cool animations and features that a lot of other themes don't.", 'start': 15114.567, 'duration': 5.242}, {'end': 15123.99, 'text': 'For example, you can see this right here is a probably good work of CSS.', 'start': 15120.309, 'duration': 3.681}, {'end': 15126.991, 'text': "They might've used that and they probably added that in a child theme.", 'start': 15124.13, 'duration': 2.861}, {'end': 15130.872, 'text': 'But yeah, so child themes are essentially like pre-made websites.', 'start': 15127.591, 'duration': 3.281}, {'end': 15135.233, 'text': 'They just come with a little bit more features than the typical layouts.', 'start': 15131.692, 'duration': 3.541}, {'end': 15138.414, 'text': "So over here, I'll actually the visual builder and I'll save the changes.", 'start': 15135.673, 'duration': 2.741}, {'end': 15143.479, 'text': 'So that is pretty much it guys for the Divi marketplace and also for this tutorial.', 'start': 15138.914, 'duration': 4.565}, {'end': 15146.142, 'text': 'I really do hope this tutorial was really helpful.', 'start': 15143.919, 'duration': 2.223}, {'end': 15151.067, 'text': 'I did my best to provide as much information as possible yet not make this video too long.', 'start': 15146.262, 'duration': 4.805}, {'end': 15153.89, 'text': 'So I really do hope you guys enjoy this tutorial.', 'start': 15151.467, 'duration': 2.423}, {'end': 15158.094, 'text': 'My name is Derral Wilson and I will see all of you party people in the next video guys.', 'start': 15154.33, 'duration': 3.764}, {'end': 15159.376, 'text': 'Take care and thanks for watching.', 'start': 15158.275, 'duration': 1.101}, {'end': 15161.646, 'text': 'All right, party people, congratulations.', 'start': 15160.165, 'duration': 1.481}, {'end': 15163.548, 'text': 'You guys are now Divvy professionals.', 'start': 15161.666, 'duration': 1.882}, {'end': 15165.909, 'text': 'So congrats on completing your websites.', 'start': 15163.988, 'duration': 1.921}, {'end': 15169.612, 'text': 'If you guys have any questions for me, feel free to let me know in the comments below.', 'start': 15166.149, 'duration': 3.463}, {'end': 15173.975, 'text': "If you guys liked this video, if you didn't like this video, just give me the like anyways.", 'start': 15169.632, 'duration': 4.343}, {'end': 15175.376, 'text': 'I spent a long time making it.', 'start': 15174.215, 'duration': 1.161}, {'end': 15180.82, 'text': 'Also, if you guys want to give me any feedback, just let me know in the comments.', 'start': 15176.657, 'duration': 4.163}, {'end': 15186.885, 'text': 'Also, my favorite beer is Modelo, so just let me know that my favorite beer is Modelo, just to let me know you guys made it to the end.', 'start': 15180.96, 'duration': 5.925}, {'end': 15189.946, 'text': "I actually live in Asia right now, and they don't even have Modelo here.", 'start': 15187.245, 'duration': 2.701}, {'end': 15192.747, 'text': "It's like, why? You know, they have San Miguel Light.", 'start': 15190.106, 'duration': 2.641}, {'end': 15193.487, 'text': 'They have Singa.', 'start': 15192.927, 'duration': 0.56}, {'end': 15195.527, 'text': 'They have a lot of other good beers, but not Modelo.', 'start': 15193.507, 'duration': 2.02}, {'end': 15196.728, 'text': 'Just send help.', 'start': 15196.028, 'duration': 0.7}, {'end': 15201.869, 'text': "Ship something to me, you know? I'll tip you, you know? But I hope you guys really enjoyed this video.", 'start': 15196.768, 'duration': 5.101}, {'end': 15203.89, 'text': 'If you guys have any questions, let me know in the comments below.', 'start': 15201.909, 'duration': 1.981}, {'end': 15206.991, 'text': 'And until then, I will see all of you party people in the next video, guys.', 'start': 15204.09, 'duration': 2.901}], 'summary': 'Tutorial on creating a fully completed website with divi builder layouts and child themes, completed in just a few seconds.', 'duration': 149.758, 'max_score': 15057.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE015057233.jpg'}], 'start': 13175.064, 'title': 'Customizing headers and footers with divi theme builder', 'summary': 'Covers using divi theme builder to create custom headers, footers, and 404 pages, customizing headers for different pages, and the extensive capabilities of importing layouts and child themes, with insights into divi marketplace functionalities and usage. it includes demonstrations of building custom headers with menu, button, and logo, adding background color, linking elements to pages, and the process of importing and customizing divi layouts and child themes, emphasizing usability for beginners.', 'chapters': [{'end': 13477.184, 'start': 13175.064, 'title': 'Using divi theme builder', 'summary': 'Covers the usage of divi theme builder, enabling creation of custom headers, footers, and 404 pages using divi builder, with a demonstration of building a custom header with menu, button, and logo.', 'duration': 302.12, 'highlights': ['The Divi Theme Builder allows creation of custom headers, footers, and 404 pages using Divi Builder. The Divi Theme Builder enables users to create custom headers, footers, and 404 pages using Divi Builder.', 'Demonstrated building a custom header with menu, button, and logo using the Divi Builder. The demonstration included building a custom header with a menu, button, and logo using the Divi Builder, adjusting padding, adding a logo, and setting the background color.']}, {'end': 14072.147, 'start': 13477.485, 'title': 'Custom header and footer using divi builder', 'summary': 'Demonstrates how to create a custom header and footer using the divi builder, emphasizing the process of adding a background color, importing templates, and linking specific elements to pages, with a focus on usability for beginners.', 'duration': 594.662, 'highlights': ['The process of adding a background color to the section, module, and element is explained, ensuring a seamless blend with the menu. The tutorial emphasizes the addition of a background color to the section, module, and element, creating a seamless blend with the menu, enhancing the visual appeal for users.', 'Importing and customizing templates for the global header and footer, including font adjustments, is demonstrated, ensuring a consistent design across the website. The tutorial showcases the import and customization of templates for the global header and footer, with a focus on font adjustments to maintain a consistent design across the website.', 'Explanation of linking specific elements to pages, such as services, about us, and contact us, to enhance user navigation and functionality. The tutorial explains the process of linking specific elements to pages, enhancing user navigation and functionality, ensuring a seamless browsing experience with clear page associations.']}, {'end': 14263.074, 'start': 14073.485, 'title': 'Customizing headers with theme builder', 'summary': 'Demonstrates customizing headers with the theme builder, including creating specific custom headers for different pages, with an emphasis on global header, footer, and 404 page, and the ability to have different headers for different pages.', 'duration': 189.589, 'highlights': ['The chapter demonstrates customizing headers with the theme builder, including creating specific custom headers for different pages, with an emphasis on global header, footer, and 404 page, and the ability to have different headers for different pages.', 'The speaker explains the process of linking a button to the homepage, ensuring that the link is pasted for the original homepage.', 'The speaker demonstrates importing a template and customizing the header by removing the background and button for specific pages, resulting in a different menu appearance.', 'The chapter emphasizes the importance of having different headers for different pages, such as a special header for the homepage and a basic one for other pages.']}, {'end': 14773.391, 'start': 14263.134, 'title': 'Using divi theme builder and marketplace', 'summary': 'Covers the extensive capabilities of the divi theme builder, including customizing post templates, archive pages, and author pages, as well as the process of exporting and importing designs. it also delves into the options available in the divi marketplace, such as plugins, layouts, and child themes, with insights into their functionalities and the process of adding them to a website.', 'duration': 510.257, 'highlights': ['The Divi Theme Builder allows for extensive customization, including specific post templates, archive pages, and author pages. The ability to design specific post templates, archive pages, and author pages using the Divi Theme Builder provides tailored experiences for site visitors and enhances user engagement.', 'The process of exporting and importing designs enables applying customized themes to other websites, saving time and effort in creating new designs. The capability to export and import designs from the Divi Theme Builder streamlines the process of replicating customized themes across multiple websites, saving time and effort.', 'The Divi Marketplace offers a variety of add-ons, layouts, and child themes, such as plugins for enhanced functionality and templates for headers, hero sections, and more. The diverse options in the Divi Marketplace, including plugins for enhanced functionality and templates for headers and hero sections, provide opportunities to enhance website design and user experience.']}, {'end': 15207.331, 'start': 14773.891, 'title': 'Importing and using divi layouts and child themes', 'summary': 'Details the process of importing divi layouts and child themes, including downloading, importing, and using them in a website, with a focus on the divi business pro layout, importing multiple layouts, and activating and customizing a divi child theme.', 'duration': 433.44, 'highlights': ['The chapter details the process of importing Divi layouts and child themes, including downloading, importing, and using them in a website, with a focus on the Divi Business Pro layout, importing multiple layouts, and activating and customizing a Divi child theme.', 'The Divi layout library offers 220 sections, providing a wide range of options for users to choose from and import into their websites.', 'The tutorial provides step-by-step instructions for importing and customizing a Divi child theme, emphasizing the need for Divi to be installed on the website and detailing the import process for theme options, theme builder templates, theme customizer settings, and Divi library sections.', 'The speaker highlights the convenience of using child themes, which come with additional features and animations compared to typical layouts, showcasing the ease and speed of creating a fully completed website by using pre-made child themes.', "The chapter concludes with the speaker's hope that the tutorial was helpful, along with a personal message and request for feedback from viewers, creating an engaging and interactive conclusion to the instructional content."]}], 'duration': 2032.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KfZy4RLeUE0/pics/KfZy4RLeUE013175064.jpg', 'highlights': ['The Divi Theme Builder enables users to create custom headers, footers, and 404 pages using Divi Builder.', 'The process of exporting and importing designs streamlines the process of replicating customized themes across multiple websites.', 'The Divi layout library offers 220 sections, providing a wide range of options for users to choose from and import into their websites.', 'The Divi Marketplace offers a variety of add-ons, layouts, and child themes, providing opportunities to enhance website design and user experience.', 'The tutorial provides step-by-step instructions for importing and customizing a Divi child theme, emphasizing the need for Divi to be installed on the website.']}], 'highlights': ['Divi platform offers over 500 pre-made templates for building websites (Relevance Score: 5)', 'Customer portal offers payment methods including PayPal, Coinbase, and credit card (Relevance Score: 4)', 'Divi theme has over 3 million active installs worldwide', 'NameHero.com is recommended for web hosting, with zero downtime and websites loading at under one second', 'Divi Builder enables users to create custom headers, footers, and 404 pages using Divi Builder', 'Divi enables users to build websites visually on the frontend with a drag-and-drop builder', 'The Divi library allows users to create and edit specific modules, set them as global, and organize them into categories and tags', 'Instructions for installing WordPress on a new domain include selecting HTTPS protocol and setting admin username and password', 'The tutorial provides step-by-step instructions for importing and customizing a Divi child theme', 'The Divi layout library offers 220 sections, providing a wide range of options for users to choose from and import into their websites']}