Canela Website - ariel-fer/Araena GitHub Wiki

TOC

Ideas to use for implementation

2023-06-19 https://www.cdh.studio/ https://www.rnr.cool/?utm_source=webflow-hire-button https://www.finerfox.com/ https://www.tambien.studio/ https://www.vecora.no/

https://www.instagram.com/remedysthlm/ https://www.instagram.com/p/CbrlUjJspDP/ https://tokyo.uk/what-we-do https://www.remedysthlm.com/

Lessons to take

Webflow university

https://university.webflow.com/lesson Do only modules:

  • Getting Started
  • Elements
  • Layout and Design
  • Interactions and Animations

How to proceed with classes creation

Explain what Webflow creates automatically in classes

Webflow set automatically values from parent's classes. If you change any value from the css, Webflow will create a new class automatically.

Explain how webflow translates interactions to CSS

If you create an interaction in a class, that is how Webflow translates interaction to CSS. image.png

Tips

  • Try to make an order designment by re-use classes
  • Using symbols will make your design faster
  • Make sure your Website is responsive

Useful Workarounds

Adjust content to the middle of the div (margin bottom/top in auto)

Set an image to cover the size of the parent's div

How to create a menu that is full-screen sized

  • Set position=fixed and z-index value in -9000
  • Set width in 100%
  • Then you can create a transition to manage when it will appear

How to place divs contained in an another div in the same line:

Set the container div to display= flex and direction= Horizontal

Captura.PNG

How to avoid auto columns or auto rows creation on grid:

Set all grid childs to position auto and set column and row span to 1

How to show or not elements in lower breakpoints:

Set display none to that class if want to hide the element, cannot delete the element because that will afect all breakpoints. Set display block if want to show the element.

##How to reveal elements on scroll Using interactions, select the element that we want trigger the animation, on element trigger choose scroll into view. After that, on the animation set an initial state with opacity 0% and position of the element 50px down and reset those values after a certain time. https://university.webflow.com/lesson/reveal-elements-on-scroll