Introducción a la creación de átomos
  • ¿Que lograrás aprender en este curso?
  • ¿Qué necesitamos para llevar este curso?
  • ¿Qué son los átomos?
  • Descarga de archivos que usaremos en este curso
Estructura de un átomo
  • Estructura base de un átomo
  • ¿Qué va hacer nuestro átomo?
  • Consiguiendo un Script
  • Tres criterios para evaluar un Script
  • Creando nuestro archivo YAML
  • Tipos de campos en Gantry 5
  • Creando nuestro archivo TWIG
  • Estructura de un átomo
Implementación del átomo en nuestro sitio web
  • Analizando la estructura de nuestro Script
  • Cargando nuestro archivo CSS
  • Cargando nuestro archivo JS
  • Definiendo las opciones del script (parte 1)
  • Definiento las opciones del script (parte 2)
  • Definiendo la alineación del encabezado
  • Definiendo el tamaño del texto para el encabezado
  • Definiendo el contenido del mensaje
  • Definiendo la alineación del mensaje
  • Definiendo la posición del anuncio
  • Definiendo el diseño del anuncio
  • Cambiando el color de fondo del anuncio
  • Definiendo el margen y las esquinas redondeadas
  • Definiendo el espaciado interno del anuncio
  • Definiendo el efecto Slide del anuncio
  • Definiendo el efecto Fade del anuncio
  • Definiendo color del texto del anuncio
  • Definiendo tamaño del texto del anuncio
  • Definiendo las propiedades para el botón ACEPTAR POLÍTICAS
  • Definiendo las propiedades para el botón LEER MÁS
  • Definiendo el enlace para el botón LEER MAS
  • Definiendo la alineación de los botones
  • Definiendo el borde para los botones
  • Definiendo las opciones Scrollclose e Innerclasss para el mensaje
  • Habilitando el modo de depuración
Optimización y conclusiones
  • Ordenando las opciones en pestañas (parte 1)
  • Ordenando las opciones en pestañas (parte 2)
  • Nuestro átomo en Github
  • Palabras finales