GUÍA WEB
Introducción a Framer
Framer es un software que nos permite tener una Landing Page compleja con mucha optimización en su funcionamiento, buen SEO y una alta personalización para lograr una web única. Con framer no hace falta tener un servidor alojado con una instalación ya que se corre como un servicio a demanda aunque si debemos tener un manejador de dominio.
Configuraciones básicas
Las configuraciones básicas se modifican ingresando al icono de rombo del menu superior derecho.
Dominio
Para configurar nuestro dominio seleccionamos la siguiente opción
Y en nuestro gestor de dominio tenemos que poner los siguientes valores para los A records y CNAME
Configuración de metadata de páginas
Dentro de la configuración están las páginas de nuestro proyecto y podemos modificar la información de las mismas seleccionandolas.
Componentes layout
Variante desktop:
El navbar es un elemento complejo que puede modificarse desde afuera o desde adentro del compoente.
Opciones
Para modificar un item simple se debe tocar el label del mismo, cambiar la propiedad Content, para cambiar su icono se debe seleccionar y elegir uno entre la lista.
Tratamiento de projects: Esta opción contiene un componente diferente adentro para la selección de proyectos. Para editarlo debemos ingresar, seleccionar el item correspondiente y editar sus propiedades que son autodescriptivas.
Podemos editar también la imagen y textos de cada opción de forma simple.
Botón de navbar: Sus propiedades se pueden editar seleccionandolo.
Navbar mobile
Items: Para modificar los items hay que entrar al subcomponente y dentro de items editarlos con el nombre del label y la redirección.
Projects: En el caso de los proyectos tengo que irme a la variante projects de ese subcomponente de items y podremos hacerlo de la misma forma.
Botones de contacto: Ambos botones pueden editarse de forma simple seleccionandolos.
También se puede editar el subtítulo de la misma forma.
Links: Para editar los links tengo que seleccionarlos, editar el content y en la parte superior el link de redireccionamiento
Para editar alguna de las redes sociales tengo que seleccionarla y editar el link.
2.3 Formulario de contacto
Mail al que se envían los formularios: Para editar este mail tengo que seleccionar el formulario y editar la propiedad Send To.
Botón de contacto vía WhatsApp: Para editar la re-dirección debemos seleccionarlo.
Edición de propiedades: Seleccionando el componente podemos editar todas estas propiedades.
Home
Hero
Para editar el hero completo debemos darle click al componente y rellenar el formulario
File: Es el archivo correspondiente al video que se reproduce cuando se hace hover sobre la tarjeta del video.
Modal de video: Al ingresar a la edición del modal tenemos que seleccionar el componente de youtube y editar la propiedad Video donde ingresamos la URL del video de Youtube.
Sección globo
La edición de esta sección cuenta primero con la edición del título y subtítulo directamente sobre el canva.
Animación de lugares: Este componente está compuesto por 5 sub-componentes. Para editarlos debo seleccionarlo y editar su label incluyendo un emoji con la bandera correspondiente dentro del label.
Sección blog
Tanto la edición del título como de la tarjeta con título de “BLOG” y la imagen dentro del canva
Listado de blogs: Este componente es generado de forma dinámica con los posts se subamos al blog. Podemos editar en el canva únicamente su título llamado “Our posts”.
Sección CTA
Este componente es generado de forma dinámica con los posts se subamos al blog. Podemos editar en el canva únicamente su título llamado “Our posts”.
Botón de acción: Podemos editar el label, el link y colores del botón seleccionándolo.
Sección About us
Para realizar las modificaciones en esta sección se deben hacer desde el canva, tanto las imagenes como títulos de las tarjetas.
Botón: Para editar el botón tengo que seleccionarlo y editar sus propiedades..
Blog
La página /Blog se genera de forma dinámica por lo que no podremos editar más que el título dentro del canva.
CMS: En este lugar podemos subir y editar los posts del blog, para entrar al ABM(alta, baja y modificación) del mismo entramos desde este botón en la botonera de la esquina superior izquierda.
Al crear una nueva entrada nos saldrán las siguientes opciones para completar
Detalle de los campos:
Title: Título del post
Slug: Se genera automáticamente y será el link por el que se ingresará al post
Date: Fecha en la que se hará la publicación
Image: Portada del post
Category: Categoría a la que pertenece el post
Subtitle: pequeña frase alusión a la temática del post.
Content: Cuerpo del post, se edita como un archivo word.
Projects
La página projects sirve para contener la redirección hacia los projectos, cada item representa un projecto y se puede editar.
Materials: Al editar este apartado tenemos que hacerlo de una forma específica, en mayúsculas y poniendo los materiales en filas separadas hasta 3 materiales.
Página de projecto
Imagen: Podemos seleccionar y editar la imagen desde la propiedad fill
Nombre del projecto: De la misma forma podemos seleccionar el texto y editarlo.
Cuerpo del projecto: El cuerpo de cada proyecto es un componente separado que tiene una variante para cada espacio del proyecto con las imagenes correspondientes. Las propiedades que podemos editar en el canva son las siguientes
5.1 Imágenes del proyecto
Para la modificación de las imágenes de un proyecto hay que tener en cuenta que la misma imagen se debe presentar en diferentes lados.
