Volto Hands-On

About

Learn how to quickly bootstrap and customize a Volto project

Level

All levels

This is the documentation for the "Volto Hands-On" training, which is intended as a half to full day training for people who already know the basics of ReactJS.

Volto Hands-On

• Introduction
  • Who are you?
  • What will we do?
  • What to expect
  • The hands-on exercise
  • Software requirements
• Quick Start
  • Set Up Volto Project
  • Folder structure
  • Build environments
  • Volto source code
  • Recommended plugins
• Project requirements
  • Tasks
  • Training ressources and assets
• Theming
  • Set up theming for your addon
  • Basic font family
• Header
  • custom.overrides
  • Some dummy content
  • Header styling
  • Logo
  • Header component
  • Component shadowing
• Breadcrumbs
  • Hiding them from the App first level component
• Footer
• Edit config and site cleanup
  • site cleanup
  • Making the Title block deletable
• Brief introduction to Volto blocks
  • How to manually enable Blocks on a content type
  • Blocks anatomy
  • Register Block Files in index
  • Blocks settings
• Blocks - Slider Block
  • Block view component
  • Block edit
  • Styling
• Configurable Release Block
  • Initital Block setups
  • Create the schema for your Block
  • Implement schema in sidebar
  • Create the View
  • Release
• Grid listing Variation
  • create some dummy events to display
  • create the actual variation
  • Markup for the Grid
• Plone Release content type
  • Creating a dummy for the View
  • Displaying the actual content
  • Add blocks to the content type
• Internationalization
  • Set up site to be multilingual
  • Adding first translatable strings
  • Translate non JSX strings
  • Translations in customizations

This training was originally created by Victor Fernandez de Alba (sneridagh) and kept up to date by Jakob Kahl (jackahl).