Hot DAMN! THIS is the kind of in depth build tutorial using Divi modules I was looking for. No extra plugins required and text modules weren't used for 90% of the build lol.
DO NOT TRY THIS!!! I recreated everything exactly. Unfortunately everything "got stuck" on the left side. Could save something - I used 2 columns. Unfortunately not suitable for the smartphone version.
Cool video, however would it be possible to have more detailed explication on scroll effects ? In the video you just say “put this at 50% and this button at 75%...etc” but don’t really explain what each button do exactly. So even if I’d like to remake this effect in my own way, I’m so confused still how to achieve this effect. Thanks for your understanding:)
Don't forget to check out the blog post that goes with the video here: www.elegantthemes.com/blog/divi-resources/how-to-design-a-divi-timeline-layout-with-scroll-effects
EDIT: Found the solution to issue #2 in the comment section under the blog post. "This is because the “rtl” css direction is only meant for languages that read right to left. To fix it, you can wrap the text in the blurb body content box with a div like this: Your Blurb Body Text. " Original Comment: I'm so disappointed in this tutorial. Firstly, it's like the end of the tutorial got cut out. Several steps were missing between where he says to save the page and previews the page. Mine matched his, everything still aligned on the left, the middle blurb all stretched out and flipped, but then everything was magically fixed on his example when he previewed. Mine was not. I ended up downloading the JSON file from the blog post and modifying it from there. Secondly, the custom CSS used in the alternating blurbs (direction: rtl) makes the blurb icon appear on the right (good) but also reverses the way the text appears causing any punctuation at the end of the blurb to show on THE LEFT SIDE OF THE LAST SENTENCE (very bad!). Like this ".This is my ending statement" You can see it in Mak's example as well as in the blog post. When I reached out to support to see if there was a solution, they simply said "I am afraid, it requires some serious amount of customization to change the whole layout of this timeline as changing the blurb position will require to re-design most part of the layout as this is something which is coming from our timeline layout and outside the scope of support that we could provide here." Don't waste an afternoon as I did. Or, don't use punctuation and produce an unfinished looking product. So very disappointed.
Amazing - thank you. I do use that divi timeline on my homepage. On desktop it works fine, but when you display it on a mobile phone, the left text isn't displayed anymore. You just see the divider on the far left and the right text parts. So, every second day of my timeline isn't displayed. How do I fix that?
What a strange end of your turtorial! The start was great.. but in the end you show the final result but you skipped some steps (the timeline is in the center, the icons are correctly aligned, etc.) and It would be nice if you showed them as well. :-)
Really good start to the tutorial. It is sad to see that this video was edited and uploaded with a good 20% of the tutorial missing. From what I understand about the Elegant Themes channel, you guys are for beginners and advanced. You guys explain stuff quite well (better than most), but this is not the quality that I thought I would get with such a good builder.
Before anyone comments that I should have just followed the blog post: I did, and it worked quite well (I just had to make a few tweaks), but I wasted a good 20ish minutes watching this video. I have learned that even though the blog posts will likely take longer to get through, they are the way to go.
Don't waste your time guys on this. No offence , the end version looks superb but when editing this video you must have skipped something. I followed everything exactly as you said and my page is far from your end result :D I'll try to follow the version from the link again and find the bugs will update if finish successfully.
Hi, I used your template because this tutorial wasnt complete, but now I'm struggling to change the color of the red dot. Can you send me the CSS to change the color of the red scrolling dot. It seems to be impossible. I'd appreciate it.
Mann, I want to build something similar, but this does not guide me in how this works in any way. Like what do those scroll numbers even mean in relation to the position of the screen lol. It's also not clearly explained anywhere. It's real hard to replicate anything in htis video, impossible atually. You just got these numbers through trail and error?
Howwww did this video get published? Amazing to me that you guys would just edit the end of the video to show the final version. Definitely the worst video I've seen published by elegant themes. IF YOU READ THIS COMMENT FIRST, DO NOT FOLLOW THE VIDEO!
if you can't end a tutorial properly, just don't publish them like this. it was a good start but the end is terrible. it would be better if you guys put the blog link and tell us to learn from that. it just wasted my time. and, in this video many things left unexplained, skipped. first video from elegant theme that got dislike from me. if you guys recreate this tutorial properly, only then i will give a like.
what i just realized that, in most tutorial video, mak does well but he barely explain things that why he is doing that things. you guys should know that we came to learn things that we don't know about. we feel like what functionality does what, why we doing this - we have no idea coz there are no explanation. you should improve this.
@@Ikmat agreed with you and a few others here. I wasted 2 hours trying to check where I fakked up. Guy is just doint a hocus pocus stuff at the very end of the video...
Hot DAMN! THIS is the kind of in depth build tutorial using Divi modules I was looking for. No extra plugins required and text modules weren't used for 90% of the build lol.
How did he Middle aligned everything??
DO NOT TRY THIS!!! I recreated everything exactly. Unfortunately everything "got stuck" on the left side. Could save something - I used 2 columns. Unfortunately not suitable for the smartphone version.
I thought the same thing! on mobile device...will suck!
same happened to me
here's another one, who is disappointed, because it doesn't work on a mobile phone
Cool video, however would it be possible to have more detailed explication on scroll effects ? In the video you just say “put this at 50% and this button at 75%...etc” but don’t really explain what each button do exactly.
So even if I’d like to remake this effect in my own way, I’m so confused still how to achieve this effect.
Thanks for your understanding:)
you're right! a dedicated tutorial would be nice
I agree with him and waiting for a complete tutorial with a full explanation.
Don't forget to check out the blog post that goes with the video here: www.elegantthemes.com/blog/divi-resources/how-to-design-a-divi-timeline-layout-with-scroll-effects
EDIT:
Found the solution to issue #2 in the comment section under the blog post.
"This is because the “rtl” css direction is only meant for languages that read right to left. To fix it, you can wrap the text in the blurb body content box with a div like this:
Your Blurb Body Text.
"
Original Comment:
I'm so disappointed in this tutorial.
Firstly, it's like the end of the tutorial got cut out. Several steps were missing between where he says to save the page and previews the page. Mine matched his, everything still aligned on the left, the middle blurb all stretched out and flipped, but then everything was magically fixed on his example when he previewed. Mine was not. I ended up downloading the JSON file from the blog post and modifying it from there.
Secondly, the custom CSS used in the alternating blurbs (direction: rtl) makes the blurb icon appear on the right (good) but also reverses the way the text appears causing any punctuation at the end of the blurb to show on THE LEFT SIDE OF THE LAST SENTENCE (very bad!). Like this ".This is my ending statement" You can see it in Mak's example as well as in the blog post.
When I reached out to support to see if there was a solution, they simply said "I am afraid, it requires some serious amount of customization to change the whole layout of this timeline as changing the blurb position will require to re-design most part of the layout as this is something which is coming from our timeline layout and outside the scope of support that we could provide here."
Don't waste an afternoon as I did. Or, don't use punctuation and produce an unfinished looking product. So very disappointed.
Amazing - thank you. I do use that divi timeline on my homepage. On desktop it works fine, but when you display it on a mobile phone, the left text isn't displayed anymore. You just see the divider on the far left and the right text parts. So, every second day of my timeline isn't displayed. How do I fix that?
What a strange end of your turtorial! The start was great.. but in the end you show the final result but you skipped some steps (the timeline is in the center, the icons are correctly aligned, etc.) and It would be nice if you showed them as well. :-)
Thanks for your feedback! We'll take note of that. 👍
Thank you for your time! 🥰
If you habe the problem that it is on the left side just change the Section padding (left)
I love your energy.
Hey Man Awesome, I loved it! thanks for the tutorial. Don't sweat it because people don't know any html & css lol. I liked this one!
Really good start to the tutorial. It is sad to see that this video was edited and uploaded with a good 20% of the tutorial missing. From what I understand about the Elegant Themes channel, you guys are for beginners and advanced. You guys explain stuff quite well (better than most), but this is not the quality that I thought I would get with such a good builder.
Before anyone comments that I should have just followed the blog post: I did, and it worked quite well (I just had to make a few tweaks), but I wasted a good 20ish minutes watching this video. I have learned that even though the blog posts will likely take longer to get through, they are the way to go.
I don't have the start and position option. How do I proceed?
Don't waste your time guys on this. No offence , the end version looks superb but when editing this video you must have skipped something. I followed everything exactly as you said and my page is far from your end result :D I'll try to follow the version from the link again and find the bugs will update if finish successfully.
Hi, I used your template because this tutorial wasnt complete, but now I'm struggling to change the color of the red dot.
Can you send me the CSS to change the color of the red scrolling dot. It seems to be impossible.
I'd appreciate it.
Mann, I want to build something similar, but this does not guide me in how this works in any way. Like what do those scroll numbers even mean in relation to the position of the screen lol. It's also not clearly explained anywhere. It's real hard to replicate anything in htis video, impossible atually. You just got these numbers through trail and error?
Howwww did this video get published? Amazing to me that you guys would just edit the end of the video to show the final version. Definitely the worst video I've seen published by elegant themes. IF YOU READ THIS COMMENT FIRST, DO NOT FOLLOW THE VIDEO!
Hi there! 👋
Sorry for the confusion.To see the final design correctly you have to save and exit the Visual Builder👍
@@elegantthemes I did everything exaclty and mine is still centered to the left, even after exiting the visual builder
if you can't end a tutorial properly, just don't publish them like this. it was a good start but the end is terrible. it would be better if you guys put the blog link and tell us to learn from that. it just wasted my time.
and, in this video many things left unexplained, skipped. first video from elegant theme that got dislike from me.
if you guys recreate this tutorial properly, only then i will give a like.
what i just realized that, in most tutorial video, mak does well but he barely explain things that why he is doing that things.
you guys should know that we came to learn things that we don't know about. we feel like what functionality does what, why we doing this - we have no idea coz there are no explanation.
you should improve this.
@@Ikmat agreed with you and a few others here. I wasted 2 hours trying to check where I fakked up. Guy is just doint a hocus pocus stuff at the very end of the video...
Amazing!!!
Thanks!!
have you actually finished it ? works on the phone? my one was totally broken
no me funciono
How to make 4 or 6 blurbs???????????