The Example<\/h2>\n
Here is my variation of the pen I mentioned earlier:<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”row” allow_player_pause=”off” parallax=”off” parallax_method=”on” parallax_1=”off” parallax_method_1=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” make_equal=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_code admin_label=”HTML Code” _builder_version=”3.0.50″]<div class=’console-container’><span id=’text’><\/span><div class=’console-underscore’ id=’console’>_<\/div><\/div>[\/et_pb_code][et_pb_code admin_label=”JS Code”]<script type=”text\/javascript”><!– [et_pb_line_break_holder] –>\/\/ function([string1, string2],target id,[color1,color2])<!– [et_pb_line_break_holder] –> consoleText([‘Divi Notes…’, ‘Divi Tips and Tricks’, ‘Made with Love.’], ‘text’,[‘#BD6983′,’tomato’,’lightblue’]);<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –>function consoleText(words, id, colors) {<!– [et_pb_line_break_holder] –> if (colors === undefined) colors = [‘#fff’];<!– [et_pb_line_break_holder] –> var visible = true;<!– [et_pb_line_break_holder] –> var con = document.getElementById(‘console’);<!– [et_pb_line_break_holder] –> var letterCount = 1;<!– [et_pb_line_break_holder] –> var x = 1;<!– [et_pb_line_break_holder] –> var waiting = false;<!– [et_pb_line_break_holder] –> var target = document.getElementById(id)<!– [et_pb_line_break_holder] –> target.setAttribute(‘style’, ‘color:’ + colors[0])<!– [et_pb_line_break_holder] –> window.setInterval(function() {<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> if (letterCount === 0 && waiting === false) {<!– [et_pb_line_break_holder] –> waiting = true;<!– [et_pb_line_break_holder] –> target.innerHTML = words[0].substring(0, letterCount)<!– [et_pb_line_break_holder] –> window.setTimeout(function() {<!– [et_pb_line_break_holder] –> var usedColor = colors.shift();<!– [et_pb_line_break_holder] –> colors.push(usedColor);<!– [et_pb_line_break_holder] –> var usedWord = words.shift();<!– [et_pb_line_break_holder] –> words.push(usedWord);<!– [et_pb_line_break_holder] –> x = 1;<!– [et_pb_line_break_holder] –> target.setAttribute(‘style’, ‘color:’ + colors[0])<!– [et_pb_line_break_holder] –> letterCount += x;<!– [et_pb_line_break_holder] –> waiting = false;<!– [et_pb_line_break_holder] –> }, 1000)<!– [et_pb_line_break_holder] –> } else if (letterCount === words[0].length + 1 && waiting === false) {<!– [et_pb_line_break_holder] –> waiting = true;<!– [et_pb_line_break_holder] –> window.setTimeout(function() {<!– [et_pb_line_break_holder] –> x = -1;<!– [et_pb_line_break_holder] –> letterCount += x;<!– [et_pb_line_break_holder] –> waiting = false;<!– [et_pb_line_break_holder] –> }, 1000)<!– [et_pb_line_break_holder] –> } else if (waiting === false) {<!– [et_pb_line_break_holder] –> target.innerHTML = words[0].substring(0, letterCount)<!– [et_pb_line_break_holder] –> letterCount += x;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –> }, 120)<!– [et_pb_line_break_holder] –> window.setInterval(function() {<!– [et_pb_line_break_holder] –> if (visible === true) {<!– [et_pb_line_break_holder] –> con.className = ‘console-underscore hidden'<!– [et_pb_line_break_holder] –> visible = false;<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> } else {<!– [et_pb_line_break_holder] –> con.className = ‘console-underscore'<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –> visible = true;<!– [et_pb_line_break_holder] –> }<!– [et_pb_line_break_holder] –> }, 400)<!– [et_pb_line_break_holder] –>}<!– [et_pb_line_break_holder] –><\/script>[\/et_pb_code][et_pb_code admin_label=”CSS Code”]<style><!– [et_pb_line_break_holder] –>@import url(https:\/\/fonts.googleapis.com\/css?family=Khula:700); <!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –>.hidden {<!– [et_pb_line_break_holder] –> opacity:0;<!– [et_pb_line_break_holder] –>}<!– [et_pb_line_break_holder] –>.console-container {<!– [et_pb_line_break_holder] –> font-family:Khula;<!– [et_pb_line_break_holder] –> font-size:4em;<!– [et_pb_line_break_holder] –> text-align:center;<!– [et_pb_line_break_holder] –> height:30px;<!– [et_pb_line_break_holder] –> width:600px;<!– [et_pb_line_break_holder] –> display:inline;<!– [et_pb_line_break_holder] –> position:relative;<!– [et_pb_line_break_holder] –> color:black;<!– [et_pb_line_break_holder] –> top:0;<!– [et_pb_line_break_holder] –> bottom:0;<!– [et_pb_line_break_holder] –> left:0;<!– [et_pb_line_break_holder] –> right:0;<!– [et_pb_line_break_holder] –> margin:auto;<!– [et_pb_line_break_holder] –>}<!– [et_pb_line_break_holder] –>.console-underscore {<!– [et_pb_line_break_holder] –> display:inline-block;<!– [et_pb_line_break_holder] –> position:relative;<!– [et_pb_line_break_holder] –> left:10px;<!– [et_pb_line_break_holder] –>}<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –>@media (max-width: 750px) {<!– [et_pb_line_break_holder] –> .console-container { font-size:2em; }<!– [et_pb_line_break_holder] –>}<!– [et_pb_line_break_holder] –><!– [et_pb_line_break_holder] –><\/style>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”row” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial” module_alignment=”left”]<\/p>\n
How To<\/h2>\n
For simplicity sake I’m going to use three Code Modules on the page. You could probably just put it all together in one and you could\u00a0also put the CSS and JavaScript into their proper places (your child theme’s stylesheet for the CSS and the JavaScript in the Integration tab of the Divi Theme Options) but for this tutorial I want to contain everything on same page and not have the CSS and JS load with all the other pages where it won’t be used. By the way, Divi Code Modules<\/strong> are amazing, have a look at the article “The Best Hidden Feature of Divi<\/a>” by Andy Tran for his take on these little pieces of Divi awesomeness.<\/p>\n Before we begin, if you’re going to use the Divi Code Modules like I have, place three of them on your page. You should end up with something like this:<\/p>\n The HTML is short and sweet and looks like this:![\"\"](\"http:\/\/divinotes.com\/wp-content\/uploads\/2017\/05\/Three-Divi-Code-Modules-1024x182.jpg\")
<\/p>\nFirst The HTML<\/h3>\n
\n