Today as I read a blog article by a client and friend, I was inspired to draft this initial Divi Layout Template. I’m calling it a Vision Board template. The idea is to recreate the concept of a specific type of vision board. (There’s a video at the bottom that describes the type.)
Here’s the draft. I have not worked the Tablet and mobile versions yet. The CSS driven ‘arrow’ will need more work there. I’ll also need to recreate the moving orbs as well on mobile. 🙂
Here’s the draft. I have not worked the Tablet and mobile versions yet. The CSS driven ‘arrow’ will need more work there. I’ll also need to recreate the moving orbs as well on mobile. 🙂
<div class="background-here"><!-- [et_pb_line_break_holder] --><span class="here"><!-- [et_pb_line_break_holder] --><div class="other-here left-here"></div><!-- [et_pb_line_break_holder] --><div class="other-here right-here"></div><!-- [et_pb_line_break_holder] --></span></div><!-- [et_pb_line_break_holder] --><div style="clear: both;"></div>
You are Here
This is the situation we are experiencing in the now.
This is happening
- yada
- yada
- yada
...and this is happening
- yada
- yada
- yada
...and this is happening
- yada
- yada
- yada
...and this is happening
- yada
- yada
- yada
3 Things to do NOW to get to our Goal
Step 1
What we can do
Step 2
What we can do
Step 3
What we can do
<div class="arrow-container"><!-- [et_pb_line_break_holder] --><div id="bkg"><!-- [et_pb_line_break_holder] --> <!-- * #tri-1 --><!-- [et_pb_line_break_holder] --> <!-- * #tri-2 --><!-- [et_pb_line_break_holder] --><!-- * <div id="tri-3"></div> --><!-- [et_pb_line_break_holder] --> <div id="arrow-head"></div><!-- [et_pb_line_break_holder] --> <div id="arrow-foot"></div><!-- [et_pb_line_break_holder] --> </div></div><!-- [et_pb_line_break_holder] -->
This is what it will feel like
- yada
- yada
- yada
This is what it will LOOK like
- yada
- yada
- yada
This is what it will FUNCTION like
- yada
- yada
- yada
This is what it will ACHIEVE
- yada
- yada
- yada
Sources of Inspiration and CSS Tips and tricks
- Draw Your Future – Ted Talk by Patti Dobrowolski
- CSS Arrows Codepen https://codepen.io/achudars/pen/ztrlf pen by Aleks
- Spinning sphere circle for you are here Codepen https://codepen.io/roborich/pen/yidGq pen by Rich Howell