Breve Resumo
Este vídeo de Marcelo Rocha Designer oferece um guia completo para criar sites responsivos, abordando desde os conceitos básicos até técnicas avançadas e ferramentas inovadoras. O vídeo detalha a importância de entender as unidades de medida, os breakpoints do Elementor e as larguras dos dispositivos, além de apresentar um plugin exclusivo para otimizar o fluxo de trabalho.
- Unidades de medida absolutas e relativas
- Breakpoints do Elementor e larguras de dispositivos
- Plugin "Starter Selado" para WordPress e Figma
Introdução [0:04]
Marcelo Rocha, o apresentador, expressa seu entusiasmo e nervosismo para compartilhar informações valiosas sobre web design. Ele promete que a live mudará a forma como os espectadores trabalham, oferecendo insights essenciais para a criação de sites responsivos.
Preparativos e Avisos [0:18]
Marcelo pede aos espectadores para darem likes e compartilharem a live, prometendo uma surpresa no final. Ele enfatiza que não está vendendo nada, mas que o conteúdo é valioso e prático.
Início do Conteúdo e Live 45 [1:20]
Marcelo explica que a live é uma atualização da Live 45, que tratava de sites 100% responsivos. Ele garante que, mesmo para quem já assistiu à Live 45, há conteúdo novo e importante a ser aprendido.
Unidades de Medida: Absolutas e Relativas [17:06]
Marcelo explica a diferença entre unidades de medida absolutas (que não mudam) e relativas (que se adaptam ao dispositivo). Ele lista exemplos de cada tipo, como pixels (absoluta) e em, rem, porcentagem, VH e VW (relativas).
Breakpoints do Elementor [29:58]
Marcelo explica o conceito de breakpoints, que são pontos de quebra onde o site se adapta a diferentes dispositivos. Ele mostra como ativar os breakpoints adicionais no Elementor Pro e quais são os sete breakpoints disponíveis: Wide, Desktop, Notebook, Tablet Paisagem, Tablet Retrato, Celular Paisagem e Celular Retrato.
Larguras dos Dispositivos e Asteriscos [38:24]
Marcelo detalha as larguras de cada breakpoint, enfatizando que o Elementor considera apenas a largura do dispositivo. Ele explica que o asterisco ao lado de "Celular Retrato" e "Wide" indica que há nuances a serem consideradas.
Variações do Wide e Celular Retrato [47:38]
Marcelo explica que o "Wide" se divide em Ultra Wide, WQHD Ultra Wide e 5K Ultra Wide, cada um com resoluções específicas. Ele também divide o "Celular Retrato" em Estreito, Médio e Largo, com larguras de viewport entre 320-375px, 376-414px e 415-480px, respectivamente.
Conceitos de Alinhamento [1:00:22]
Marcelo define termos importantes como largura "boxed" e "full width", colunas, linhas guia (grids), media nins (gutter ou gap), espaçamento offset e largura útil. Ele explica que a largura útil deve ser menor que a largura mínima do dispositivo para evitar quebras no layout.
Recomendações Seladas para Alinhamento de Conteúdo [1:07:37]
Marcelo compartilha suas recomendações para largura útil, gap e número de colunas em cada breakpoint. Ele também explica como configurar essas medidas no Elementor e na extensão "Selon Grids".
Configuração no Figma [1:18:49]
Marcelo mostra como configurar as grids no Figma, criando um "starter file" com todos os breakpoints pré-configurados. Ele enfatiza a importância de salvar as configurações para facilitar o trabalho em projetos futuros.
Recomendações Seladas para Tamanhos de Imagens [1:27:50]
Marcelo oferece recomendações para os tamanhos de imagem em cada breakpoint, enfatizando a importância de usar a largura correta para evitar distorções. Ele sugere usar o formato AVIF para otimizar o peso das imagens.
Configuração no Photoshop e Ações [1:33:43]
Marcelo mostra como criar linhas guia no Photoshop e como salvar predefinições para facilitar o trabalho. Ele também ensina a criar "ações" para automatizar a criação de grids, agilizando o fluxo de trabalho.
Variáveis no Elementor [1:51:53]
Marcelo explica o conceito de variáveis no Elementor e como elas podem ser usadas para otimizar o fluxo de trabalho. Ele mostra como criar variáveis para tamanho de texto e como usá-las nos elementos do Elementor.
Plugin "Starter Selado": Variáveis e Mais [2:05:02]
Marcelo apresenta o plugin "Starter Selado", que automatiza a criação de variáveis e oferece outras funcionalidades. O plugin permite aplicar variáveis em todo o site ou em páginas específicas, além de criar variáveis personalizadas para diferentes breakpoints.
Plugin do Figma: Starter Selado Exporter [2:37:12]
Marcelo apresenta o plugin "Starter Selado Exporter" para Figma, que permite exportar as variáveis criadas no Figma para o plugin do WordPress. Ele explica a nomenclatura correta para as variáveis no Figma e como importar o arquivo JSON para o WordPress.
Testes de Responsividade e Dicas Finais [3:00:26]
Marcelo recomenda usar a extensão "Responsive Viewer" para testar a responsividade do site em diferentes dispositivos. Ele também sugere testar o site com diferentes níveis de zoom e usar o modo responsivo do Chrome DevTools.
Encerramento [3:28:32]
Marcelo encerra a live, agradecendo aos espectadores e incentivando-os a darem likes, compartilharem e se inscreverem no canal. Ele reforça que o plugin "Starter Selado" estará disponível gratuitamente na biblioteca do WordPress em breve.