Na página de cardápio, adicione um container e deixe ele com a opção Full Width, e dentro dele coloque um Info Box. Vamos fazer a seção de cardápio e faça a edições com os textos desejados.
Embaixo dele, colocamos uma lista de preços, onde colocaremos nosso cardápio. Em Separator podemos escolher o estilo. No +
logo abaixo, à direita, podemos adicionar mais itens. Em General, podemos ajustar as colunas desejadas. Podemos adicionar as imagens em cada item também.
Para ajustar os textos com os preços, vamos usar o MicroThemer. Configure ele no painel, logo ele aparecerá na barra de configurações do site. Em dimensões, vamos diminuir a largura equivalente à div de cada item.
Podemos personalizar o CSS do site também.
Na página de Depoimentos, vamos colocar os depoimentos do site. Vamos colocar um container nele, vamos colocar com duas colunas acima e duas embaixo, com o Minimun Height 650 e Equal Height. Na primeira, vamos colocar de fundo uma imagem de aspas, com o Size Contain, e o Overlay Type com transparência. Na segunda, escrevemos o depoimento, usando a opção Testemonial. Podemos colocar uma imagem da pessoa que fez o depoimento, que por padrão, já ficará redondinha, mas podemos configurar isso em General e em Image, no mesmo lugar que colocamos as imagens.
PS: Podemos copiar um elemento do Wordpress indo em duplicar.
Em Personalizar, em Editar Página, vamos adicionar um container abaixo dele, que será o nosso rodapé. Coloque a opção Full Width nele e o Minimun Height como 250 px. Coloque a HTML Tag como footer, pros buscadores saberem que se trata de um rodapé. Coloque uma imagem de background nela e o Overlay Type como 0.75 preto. Coloque um info box e configure as cores do mesmo.
Depois de configurado, vá nos três pontinhos e em Criar Padrão, coloque o nome rodape-tel e escolha a categoria Rodapés, e deixe marcado a Sincronização. Isso criará um componente próprio personalizado pro nosso rodapé, que pode ser editado clicando diretamente nele.
Para inserir esse rodapé personalizado em outras páginas, clique no +
e em Padrões, procure os Meus Padrões e escolha o rodapé criado.
Caso queira editar esse componente em apenas uma página, vá no bloco e clique em Desanexar.
Em Personalizar, podemos personalizar diretamente pelo tema do site (Astra), vá em Rodapé e Elements e no último espaço, adicione um Widget nele, depois vá em Widgets e no lápis, clique em Adicionar Widget. Escolha a quantidade de colunas desejadas. Dentro dele podemos por os mesmos elementos colocados anteriormente, como background, info box, etc.
Esse rodapé aparecerá em tudo, então no caso de querermos algo que apareça em todas as páginas, podemos usar esse daí.
O Microthemer pode ajudar a configurar o CSS em coisas específicas no site, onde não dá pra fazer diretamente pelo tema.
Entre no site e vá em Microthemer, ali você pode colocar as configurações do CSS desejadas usando as opções como fonte, texto, etc.
Nós podemos editar diretamente o código em CSS também, indo em Code.
Depois de feita as alterações no site, clique em Publish.
Para criar um formulário, instale o plugin WPForms, primeiramente. O Gravity Forms também é uma opção, mas este é pago. O WPForms também tem a versão paga, mas dá pra usar a gratuita com algumas limitações.
Primeiramente, vamos na opção dele e em Configurações, vamos em Captcha e escolher um deles para o nosso formulário, como o reCaptcha. Ele dará as opções de ocultar ou mostrar a caixa de seleção, mensagem de falha, etc. Ali colocaremos a Chave do Site e a Chave Secreta. Para gerar as chaves do reCaptcha, primeiramente vá nesse site: https://www.google.com/recaptcha/admin/create
Daí você coloca a etiqueta (que pode ser um nome qualquer que identifique o site), o tipo de reCaptcha (o mais comum é Desafio com a Caixa Não Sou um Robô
). E embaixo você coloca seu domínio.
Para criar o formulário, vá em Add New Form e em Crie seu Formulário. Podemos criar formulários baseados em modelos, mas escolheremos um formulário em branco, que terá o nome Contato
. Ele abrirá a página com os campos padrão disponíveis na versão free, que serão colocados simplesmente arrastando e soltando.
Nós temos o campo de texto e o de nome, que tem diferenças entre eles. Vamos colocar esses campos aqui, inicialmente:
No Geral, colocamos o nome do campo, no qual pode ter uma descrição também logo abaixo, e também podemos marcar se o campo é obrigatório.
Em Avançado, podemos colocar o tamanho do campo, valor padrão (que inclusive pode ser configurada), texto de espaço reservado (placeholder, que pode ter o rótulo ocultado logo abaixo), entre outros.
No e-mail, podemos colocar para que o e-mail seja confirmado também, no mesmo campo.
PS: Em Classes CSS podemos selecionar um layout pro nosso formulário.
Para configurar o campo de telefone, podemos colocar uma máscara de entrada com o valor (99) 9999-9999[9], onde o último número em colchetes é opcional. Para usar as máscaras, é só ir nesse site e pegar ela: https://wpforms.com/docs/how-to-use-custom-input-masks/
Na Lista Suspensa, colocaremos as opções, como Copacabana, Leblon e Bangu. O Texto de Espaço Reservado é um texto padrão antes de selecionar uma opção. Nas opções dinâmicas podemos escolher Taxonomia (categorias), Tipo de Post (no qual podemos escolher Posts ou Páginas, mas nesse caso manteremos Desligado).
Outras opções do formulário são Caixas de Marcação (checkbox), Múltipla Escolha (rádio).
Para ver a prévia do formulário, vá em Pré-Visualizar.
Para configurar o formulário, vá em Configurações (na segunda) e vá em Geral. E coloque esses dados:
meu-formulario.meu-formulario-botao.PS: As classes CSS são definidas caso desejemos estilizar os componentes do formulário. Podemos selecionar um layout nelas caso desejemos que alguns campos fiquem de lado, por exemplo.
O Envio de Formulário AJAX evita que a página seja carregada novamente ao enviar o formulário.
Em Proteção e Segurança contra Spam, ative todas as opções referentes ao Captcha que nós configuramos.
Em Notificações, deixe ativado essa opção (já que na versão gratuita ele não armazena no servidor do Wordpress). Ali você coloca seu e-mail que receberá as mensagens (não precisa ser o e-mail de administrador), o Assunto, o Remetente e seu e-mail, etc.
Em Confirmação, vamos colocar uma mensagem que será enviada automaticamente para quem enviou os dados no nosso formulário. Podemos redirecionar a uma página, por exemplo.
PS: Para administrar seus e-mails, podemos instalar o plugin WP Mail SMTP.
Em WPForms e Todos os Formulários, nós encontraremos o formulário de contato que nós criamos. Qualquer edição nele, podemos ir ali em editar, e para incorporar ele, basta ir em Incorporar, Selecionar Página e selecionaremos a página de contato e clique em Vamos Lá. Ele abrirá a página de edição.
Na página de edição, arraste o WPForms para ele, e na caixa de seleção, escolha o formulário de contato criado.
Do lado, podemos ir em configurações como em qualquer outro bloco.
Acima do formulário, vamos colocar um container com uma imagem de fundo e uma Info Box com algo como Faça sua Reserva
e o telefone. Em General, as configurações serão Full Width no Width, com Minimum Height de 250. Em Style, vamos em Backgroun e escolher a imagem de fundo, com Overlay preto de 0.75. O Info Box terá o texto branco.
Abaixo do Formulário, vamos colocar mais um container, e dentro dele, um Google Maps. Podemos colocar o idioma como Português. Em Address podemos colocar o endereço ou o nome do estabelecimento a ser apontado.
PS: O Maps poderá mostrar uma borda na página de edição, mas essa borda não aparece no site. Visualize o mesmo para ver como ele fica.
Para usar o Wordpress como blog, teremos que saber como fazer posts no mesmo.
Para fazer os posts, vá em Posts no painel e em Todos os Posts, ali podemos administrar os mesmos.
Os posts podem ter categorias, que são adicionadas indo em Categorias, e estas podem ter uma hierarquia (como por exemplo, teremos duas categorias, Notícias e Receitas, dentro de Notícias podemos ter Eventos, por exemplo). As categorias são uma forma de organizar o conteúdo de blogs. As categorias podem ser editadas e excluídas (mas categorias não tem lixeira, apenas os posts tem).
As tags são marcações na qual podemos fazer nos posts, como por exemplo, os posts de receitas de saladas podem ter a tag Salada
. Diferente das categorias, as tags não tem hierarquia e elas não são obrigatórias. O ideal é criar elas dentro do artigo que estarmos criando. As tags do Wordpress podem ter espaço.
Vamos adicionar um post no nosso blog, indo em Adicionar Post. Ele vai abrir o editor tal como na página, onde já estará tudo estilizado igual foi configurado, nem precisa colocar container nem nada, apenas colocar os blocos com parágrafos. Ali nas configurações, ao lado, podemos escolher as categorias e tags, além de poder adicionar novas por ali mesmo.
Ali nas configurações ao lado, em bloco, podemos, por exemplo, colocar a letra capitular (aquela que a primeira é bem maior que o restante do texto). Basta ir em tipografia e marcar essa opção. Podemos, num bloco abaixo, colocar uma Galeria com algumas fotos, que podem ser carregadas, e nas configurações, em Bloco, podemos configurar coisas como a resolução, a quantidade de colunas e se as imagens serão cortadas. Em cada imagem, podemos colocar uma legenda clicando nas opções da mesma.
Vamos instalar o plugin Simple Lightbox, que nem precisará ser configurado inicialmente, apenas ativado. Ao ativar o plugin, ao clicar numa imagem da galeria, ela abrirá em tela cheia numa galeria rotativo com a legenda e tudo configuradinho. Nós podemos configurar em quais páginas ele poderá ou não funcionar. Não esqueça de ir em link, nas configurações da galeria, e marcar a opção Vincular Imagens a arquivos de mídia.
PS: Podemos configurar o Lightbox, como por exemplo, mudar as palavras em inglês pro português.
Indo em Salvar, podemos clicar depois em Publicar, e configurar a visibilidade do mesmo e se será publicado agora ou será programado.
Em Post, podemos ir na imagem destacada e colocar uma imagem que aparecerá no blog, nos posts recentes. Podemos também adicionar um resumo. Em discussão podemos deixar aberto caso desejemos aceitar que adicionem comentários. Caso não queira que a imagem destacada apareça no post, apenas no blog, marque a opção Show Featured Image in the Posts Lists Only.
No Personalizar do Astra, em Post Types, Post Individual, podemos desmarcar a opção ali também. Indo em Post Área do Título, podemos ocultar por exemplo, o autor (recomendado quando só uma pessoa posta no blog) e a caixa de comentários. Podemos fazer a configuração global, indo em Blog/Arquivos, onde podemos configurar essas e outras coisas, como se as tags aparecerão (em Meta), etc.
PS: Podemos programar também para um post ser excluído depois de um determinado tempo, mas para isso devemos instalar o plugin Post Expiration, que podemos programar um post pra ser revertido para rascunho (que tirará ele da visualização do público).
Vamos adicionar uma página de notícias, é nela que os posts do blog aparecerão. No painel, em Aparência e Menus, adicione a página de notícias.
Para adicionar o bloco de posts, temos as opções para adicionar os mesmo, indo em +
, como Post Grid, Post Carrousel, Posts mais Recentes, Post Timeline, etc.
Em bloco, podemos configurar o bloco de post, como o Post Type, Taxonomia (filtro de categorias e tags), Categorias, Posts por Página, Colunas, Ordenação, etc. Em General e Image, ativamos a opção Show Featured Image para mostrar a imagem configurada anteriormente no fundo.
Para configurar a imagem de fundo, escolha a opção Background em Position, da mesma forma, podemos configurar o Overlay e a cor das letras. Podemos também configurar os botões e seu texto.
Podemos remover o botão desmarcando a opção Display Continue Reading Link, em General e Content, que deixará o post todo clicável.
Em Content, podemos configurar se ele mostrar autor, data, comentários e taxonomia.
PS: Para ordenar os posts da forma que queremos, podemos instalar o plugin Post Types Order.
Usando o celular ou o modo de desenvolvedor do navegador, podemos ver como o site fica no celular. O Astra já tem uma responsividade boa, mas podemos fazer alguns ajustes.
Vamos resolver o logo, por exemplo, clique no Personalizar do Astra, em Aparência e Personalizar, e vá em Cabeçalho e Título do Site e Logo, e clique no celular logo abaixo, podemos ajustar a largura do logo (como, por exemplo, 128), e em Design podemos colocar 0 de margem. Podemos fazer o mesmo pra tablet. Ainda no Personalizar do Astra, vá em Menus e Configurações do Menu e Ver Todas as Localidades, e selecione o Menu Off-Canvas como Principal, isso fará que ele fique na ordem que definimos, quando navegar pelo mobile ou tablet.
Em Cabeçalho e em Menu Off Canvas, podemos marcar a opção Divisor de Item.
Para estilizar o hamburguinho
, vá em Cabeçalho e Botão Alternar, e altere ele por lá.
Usando o MicroThemer, podemos estilizar o CSS para modificar apenas o mobile, abra ele e clique ao lado de "Todos os Dispositivos", na resolução equivalente ao celular (< 480), e ali podemos ajustar o tamanho de outros componentes, como aprendido anteriormente, e quaisquer outros ajustes que podem ser feitos com CSS. Um ajuste que podemos fazer é do Captcha, com esse código aqui:
.g-recaptcha {
transform: scale(0.85);
transform-origin: 0 0;
}
Depois de ajustar tudo no celular, faça o mesmo pro tablet, seguindo as proporções dele (geralmente entre 768 a 980).