Including a custom-made toggle for your video records can bring a great deal of advantages to your site. Merely consisting of a video records for each video on your site can enhance user experience, ease of access, and SEO. Users will have the choice of checking out the material which is a fantastic ease of access function for those who are deaf, tough of hearing, or in a loud coffee bar. And you can check out records much faster than enjoying the video (or video subtitles). Plus, the included material will likely consist of a considerable quantity of keywords that would enhance SEO. Producing a custom-made toggle for a video records is likewise good due to the fact that it can keep that long-form material concealed up until it is required.
In this tutorial, we are going to develop a customized (and compact) toggle for video records in Divi. To do this we are going to personalize Divi’s toggle module with a succinct remodeling so that it will fit perfectly under any video. We are going to reveal you how to utilize Youtube’s auto-generated records as material for the toggle. All this without needing to utilize a plugin.
Here is a glance at the style we’ll integrate in this tutorial.
Download the Design free of charge To lay your hands on the styles from this tutorial, you will initially require to download it utilizing the button listed below.
To get to the download you will require to register for our
Divi Daily e-mail list by utilizing the kind listed below. As a brand-new customer, you will get much more Divi goodness and a totally free
Divi Design pack every Monday! Merely enter your e-mail address listed below and click download if you’re currently on the list. You will not be” resubscribed “or get additional e-mails.< div class=" et_bloom_locked_container et_bloom_optin_1" data-page_id=" 148596" data-optin_id=" optin_1" data-list_id=" mailchimp_c886a2fc0a" data-current_optin_id=" optin_1" > Download the Files< div class =" et_bloom_inline_form et_bloom_optin et_bloom_make_form_visible et_bloom_optin_1" >< div class=" et_bloom_form_container with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field" >< div class=" et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline" > You have actually effectively subscribed. Please examine your e-mail address to verify your membership and get access to totally free weekly Divi design loads! To import the area design to your Divi Library, browse to the Divi Library. Click the Import button. In the mobility popup, pick the import tab and select the download file from your computer system. Click the import button.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-127617" src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-2.jpg" alt=" divi notice box" width=" 880" height=" 711" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-14.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-15.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-16.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > As soon as done, the area design will be offered in the Divi Contractor. Let’s get to the tutorial, shall we? What You Required to Get Going< img loading=" lazy" class=" with-border with-border aligncenter size-large wp-image-118230" src =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-791x1024.jpg" alt =" broadening corner tabs" width=" 719" height=" 931" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-791x1024.jpg 791w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-232x300.jpg 232w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-768x994.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-1187x1536.jpg 1187w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-1582x2048.jpg 1582w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started-610x790.jpg 610w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/12/divi-tutorial-getting-started.jpg 1760w" sizes="( max-width: 719px) 100vw, 719px" > To start, you will require to do the following: If you have not yet, set up and
trigger the Divi Style. Develop a brand-new page in WordPress and
home builder). Select the choice” Construct From Scratch “. After that, you will have a blank canvas to begin creating in Divi.
Producing a Customized Toggle for Video Records in Divi Part
1: Including a Youtube Video to the Page utilizing a Divi Video Module For the very first part of our
tutorial, we are going to add/embed a youtube video to a page utilizing a video module in the Divi contractor. This
procedure is truly rather easy. Prior to we include the video, let’s include a one-column row to the area. Next, include a video module to the row.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-148703" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle9.jpg" alt=" divi video records toggle" width=" 880" height=" 392" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle9.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle9-300x134.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle9-768x342.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle9-610x272.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Click the include video plus icon under the alternative” Video MP4 File Or Youtube URL.< img loading=" lazy" class= "with-border aligncenter size-full wp-image-148702" src= "https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle8.jpg" alt =" divi video records toggle" width=" 880" height=" 772" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle8.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle8-300x263.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle8-768x674.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/divi-video-transcript-toggle8-610x535.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Then choose the Insert from URL action on the left sidebar of the popup. Paste in the URL for the YouTube video in the input box. Click the Insert into Post button.< img
loading=” lazy” class=” with-border aligncenter size-full wp-image-148701 “src =” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-3.jpg “alt= “divi video records toggle” width=” 880 “height
We’ll return to the body material later on to paste in our youtube video
later on)< img loading=" lazy "class= "with-border aligncenter size-full wp-image-148698" src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-6.jpg" alt =" divi video records toggle" width=" 880" height=" 598" srcset =" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-6.jpg 880w , https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-26.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-27.jpg 768w,https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-28.jpg 610w” sizes= “( max-width: 880px) 100vw, 880px” > Under the style tab, upgrade the
following: Icon Color: # 42b3a9 Open Toggle Background Color: transparent Closed Toggle Background Color: transparent Text
Alignment: Title Font Style: Roboto Title Font Style Design: TT Max Width: 800px Module Positioning: Padding: 0px leading, 20px bottom, 0px left
, 0px Border Width: 0px< img loading=" lazy" class =" with-border aligncenter size-full wp-image-148696" src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-8.jpg" alt=" divi video
records toggle “width=” 880″ height= “978” srcset =” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-8.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-32.jpg 270w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-33.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-34.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Under the Advanced Tab, we require to include a couple of CSS bits to complete the style of the toggle. Include the following CSS to the Toggle Title: display screen: inline-block; cushioning: 1em 2.5 em 1em 2em! essential; Include the following CSS to the Toggle Icon: right: 0.75 em! crucial; Include the following CSS to the Toggle Material: max-height: 30vh; overflow-y: scroll; cushioning: 20px 3 %;. background: #ffffff;. border: 2px strong #eeeeee;. border-radius: 5px;. text-align: left;.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-148695" src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-9.jpg" alt= "divi video records toggle" width =" 880" height=" 517" srcset =" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-9.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-35.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-36.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-37.jpg 610w" sizes=
“( max-width: 880px )100vw, 880px” > Part 3: Getting the Records from Youtube and Including it
to the Toggle Material Developing records for videos can be a little a trouble to do by hand. And there are services and plugins out there that can do it
in a more expert way( some at a premium expense).
For this tutorial, we are going to utilize a fast, simple, and complimentary approach. We are going to draw out Youtube’s auto-generated records for a
video and utilize it on our site. To do this, go to your video on Youtube and follow these actions: Open the More Actions dropdown menu (3 horizontal dots) beside the Save button under the video
. Click Open Records from the list. At the top of the Records box, open the More Action dropdown menu(
3 vertical dots). Click Toggle timestamps. This will conceal the timestamps from revealing left wing of each block of text. Copy the whole records material within package to your clipboard.< img loading="
https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-11.jpg” alt =” divi video records toggle “width=
” 880 “height= “464” srcset=” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-11.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-41.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-42.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-43.jpg 610w “sizes =”( max-width: 880px) 100vw, 880px “> Today the text is complete
of line breaks. To take those out, you can go to textfixer.com and utilize their totally free line break elimination tool to get rid of line breaks from the text. Under the area Eliminate Line Breaks, choose” Eliminate line breaks just.
” Paste the records text inside the box. And click the Get rid of Line Breaks button. As soon as the text is produced under the area entitled New Text without Line Breaks, copy the text to the clipboard.< img loading=" lazy" class =" with-border aligncenter size-full wp-image-148719" src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-12.jpg "alt=" divi video records toggle" width="880 "height=" 743" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-12.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-44.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-45.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-46.jpg 610w" sizes=" (max-width: 880px) 100vw, 880px" > Return to your website, open the toggle settings, and paste the records material to the module
.< img loading=" lazy "class =" with-border aligncenter size-full wp-image-148694 "src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-13.jpg "alt=" divi video records toggle" width=
doing not have a lot of uppercase, punctuation, paragraphs, and so on.
the content material there and readableLegible You might desire to invest a couple of minutes cleaning up the text up for your readers. That’s it! Result Here is the result of our custom-made toggle for a video records in Divi. On Desktop …< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/desktop.webm" type=" video/webm" > < source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/toggle.webm" type =" video/webm" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/toggle.mp4" type= "video/mp4" > On Tablet …< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/tablet.webm" type=" video/webm" >< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/tablet.mp4" type=" video/mp4 "> And on Phone …< source src= "https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/phone.webm "type=" video/webm" >< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/phone.mp4" type=" video/mp4" > Last Ideas In this tutorial, we revealed you how to change a Divi toggle module into a custom-made toggle for video records in Divi. The distinctively succinct style of the toggle alone has applications that extend beyond that of video records. I indicate you can actually put any text you desire therein. I believe it fits well under a video. Utilizing those auto-generated records for a youtube video can absolutely come in convenient if you require a basic service. Feel totally free to check out other alternatives for transcribing your video material and/or share some with us.