How to Develop a Customized Toggle for Video Records in Divi

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.

Let’s begin!

Preview

Here is a glance at the style we’ll integrate in this tutorial.




< 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/desktop.mp4" type=" video/mp4 ">< 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 ">< source src= "https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/tablet.webm"

< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2021/03/tablet.mp4" type=" video/mp4" >

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 notification box

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

  • utilize the Divi Home builder to modify the page on the front end( visual
  • 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

    divi video transcript toggle

    =” 532″ srcset =” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-3.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-17.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-18.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-19.jpg 610w “sizes =”( max-width: 880px) 100vw,

    divi video transcript toggle

    880px “> Once the video is included, you can include a customized overlay image to

    the video.< img loading =" lazy "class =" with-border aligncenter size-full wp-image-148700 "src =" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-4.jpg" alt=" divi video records toggle "width=" 880" height=" 573" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-4.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-20.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-21.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-22.jpg 610w" sizes="( max-width: 880px )100vw, 880px" >

    divi video transcript toggle

    Part 1: Developing the Customized Toggle for the Records Now that our video remains in location, we can develop the customized toggle that will hold our records material. To do this we

    divi video transcript toggle

    are going to personalize a toggle module. Include a toggle module straight under the video.< img loading=" lazy" class=" with-border aligncenter size-full

  • wp-image-148699″ src=” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-5.jpg “alt=” divi video records toggle” width=” 880″ height =” 570″ srcset= “https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-5.jpg 880w,
  • https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-23.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-24.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-25.jpg 610w” sizes=
  • “( max-width: 880px) 100vw, 880pxdivi video transcript toggle

    • ” > In the Toggle Settings, include the word”
    • Records” for the Title text.(
    • We’ll return to the body material later on to paste in our youtube video
    • records material

    divi video transcript toggle

    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

    divi video transcript toggle

    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

    1. 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
    2. in a more expert way( some at a premium expense).
    3. 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
    4. 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

    divi video transcript toggle

    . Click Open Records from the list. At the top of the Records box, open the More Action dropdown menu(

    divi video transcript toggle

    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="

    lazy “class =” with-border aligncenter size-full wp-image-148718″ src=”

    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

    divi video transcript toggle

    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.

    divi video transcript toggle

    ” 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=

    ” 880″ height=” 515″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-13.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-47.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-48.jpg 768w,


    https://websitedesign-usa.com/wp-content/uploads/2021/03/how-to-develop-a-customized-toggle-for-video-records-in-divi-49.jpg 610w” sizes= “( max-width: 880px) 100vw, 880px” >

    Granted, the records text is

    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.

    I anticipate speaking with you in the remarks.

    Cheers!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *