Transcrições
1. Introdução: Olá, sou a Sarah. Sou um designer e desenvolvedor de front-end baseado em Toronto. Como uma companheira noiva para ser, eu sei o quão importante é manter seus custos ao mínimo e manter tudo super simples. Com este curso, vou mostrar-lhe, como criar um site para o seu casamento do início ao fim. Tudo, desde comprar o domínio até entrar no ar. No final do curso, você terá um site onde seus convidados podem RSVP bem
como descobrir tudo o que precisam para o grande dia. Você não precisa saber como codificar para criar este site. O tema é totalmente personalizável para se adequar ao seu casamento e responde a todos os tamanhos de tela.
2. Compre um domínio: A primeira coisa que você precisa fazer é comprar um nome de domínio. A coisa mais comum a fazer é usar os primeiros nomes da noiva e do noivo. Se você acessar godaddy.com, você pode pesquisar um nome de domínio e ver se ele está disponível. Como você pode ver, eu procurei Kevin e Sarah, kevinandsarah.com tinha ido embora, mas eu escolhi ir com kevinandarh.rocks apenas para ser bonito. Em seguida, você pode adicioná-lo ao seu carrinho. No entanto, você pode querer ir e comprar hospedagem primeiro
e, em seguida, obter o nome de domínio gratuitamente. No entanto, eu já tenho hospedagem com GoDaddy, então eu vou apenas comprar o nome de domínio. Você precisa comprar hospedagem, caso contrário seu site não será visível. Você pode continuar no carrinho. Uma vez que você tem todos os itens que você precisa e check-out usando PayPal ou cartão de crédito. Você também pode escolher entre um ano e cinco anos. Eu só escolhi um ano porque eu não vou precisar dele depois do casamento, mas sinta-se livre para escolher mais de você quer mantê-lo como uma lembrança. Uma vez que você tenha feito o check-out, tudo deve estar pronto para ir e em breve você receberá um e-mail com todas as informações sobre o seu novo site. A próxima coisa que você quer fazer é clicar em seu nome
no canto superior direito e escolher visitar minha conta. É aqui que você vai encontrar todos os seus produtos, informações sobre o seu domínio, bem como sua hospedagem. É aqui que vamos começar a entrar em como adicionar a página WordPress ao seu site.
3. Configurar a hospedagem: A próxima coisa que queremos fazer é colocar a hospedagem com o nome de domínio. Se você clicar no canto superior direito e ir para “Minha conta”, você verá sua hospedagem na web na segunda linha, clique nela e escolha “Gerenciar”. Uma vez que você está na página de hospedagem, você verá uma lista de todos os seus domínios, Eu tenho alguns, mas você pode ter apenas um. Para adicionar um domínio à sua hospedagem, clique em “Adicionar domínio” e digite o nome do site que você acabou de comprar. Para mim é Kevinandsarah. Rocks. Assim que você digitar a primeira letra, ela será preenchida por baixo. Em seguida, escolha um nome para a pasta. Isso pode ser o que você quiser, algo que é fácil de lembrar, e clique em “Ok”. Quando você estiver digitando o nome no campo domínio, se ele não tiver sido preenchido, isso significa que ele ainda não estava pronto. Talvez você volte em algumas horas para ver se ele está lá, porque às vezes pode demorar um pouco mais. Uma vez adicionado, você verá que ele aparece na sua lista. Vai dizer “Pendente” sob o status. Isso também leva algum tempo. Normalmente, você receberá um e-mail, a notificação de que ele está pronto.
4. Instalar o Wordpress: Agora que a hospedagem está concluída, podemos instalar o WordPress. Se você entrar no canto superior esquerdo
do menu de navegação verde e clicar em Início, você verá esta página. No lado direito, você verá opções e configurações. Clique em Wordpress. Agora você pode gerenciar seus aplicativos WordPress. Então, você vai querer clicar em instalar. Você deseja escolher o nome de domínio do site
do casamento e, em seguida, você deseja colocar um diretório. O diretório é onde seu site WordPress vai viver. Quero que esteja na página em que as pessoas pousam quando digitam kevinandsarah.rocks. No entanto, você pode querer que ele seja kevinandsarah.rocks/casamento. Para levá-lo para a rota principal, que seria kevinandsarah.rocks, basta deixá-lo em branco. Você também precisa adicionar seu nome de administrador e senha de administrador. Isto é o que você vai precisar para fazer login no site WordPress para fazer quaisquer alterações, upload de fotos, todas as coisas que vamos fazer no futuro. Você também precisará adicionar seu e-mail e digitar um título de blog. Mas não se preocupe, você sempre pode mudar isso mais tarde, uma vez que entrar no site WordPress. Quando tiver todos os campos preenchidos, clique em OK. Como você pode ver, ele diz que WordPress está instalando. Isso também leva algum tempo. Então, sente-se, relaxe e espere que o e-mail diga que está pronto.
5. Faça login no Wordpress: Uma vez instalado o WordPress, podemos fazer login e fazer algumas alterações. Se você está digitando seu site de casamento agora, isso é o que você veria. Um tema inacabado, no entanto, para fazer alterações, você vai querer fazer login. Então você vai querer ir para o seu endereço do site barra wp traço admin. Quando você chegar à página de login, você verá o nome do administrador, bem como a senha do administrador. Se você se lembra, nós configuramos estes quando estamos configurando o aplicativo WordPress no Go Daddy. Digite a senha e seu nome de usuário e clique em Login. Você está agora no WordPress, é
aqui que vamos construir o seu site. Certifique-se de marcar esta página, às vezes é difícil lembrar o endereço longo que você precisa digitar para chegar aqui.
6. Compre um tema: Agora você está pronto para adicionar um tema. Há muitos temas por aí, para compra e de graça. O que estou usando neste tutorial é de themeforest.com. Se você acessar themeforest.com e digitar Lily, na barra de pesquisa, você encontrará esse tema. Eu escolhi este tema porque é bonito e eu realmente gostei da linha do tempo perto do fundo que mostra todos os eventos importantes de você e sua noiva para ser ou noivo para ser esposa de. Este tema tem tudo, desde o seu registro de festa nupcial, localização
RSVP, bem como quaisquer outros detalhes que você deseja adicionar. Este é um tema pago. Existem prós e contras sobre temas pagos e gratuitos. compra de tema pago é ótimo porque você recebe o apoio. Se você tiver alguma dúvida, você pode enviar um e-mail para o desenvolvedor e geralmente eles são muito bons em responder. Eu, pessoalmente, tinha uma pergunta sobre este tema e e-mail o desenvolvedor e ele foi muito rápido com a resposta e respondeu minhas perguntas. Você pode pagar usando PayPal ou cartão de crédito. Depois de pagar, verá um botão Transferir onde poderá transferir o tema para o computador.
7. Instale o tema do Wordpress: Seu próximo passo é carregar o tema para o WordPress. Quando você baixá-lo, você terá um arquivo ZIP como o da minha área de trabalho. Você vai querer clicar duas vezes nisso para descompactá-lo. Ao abrir o arquivo, você verá um monte de outros arquivos. Se você abrir a documentação, verá uma página index.html. Clique duas vezes nisso e ele será aberto no seu navegador. Este é um tutorial rápido para mostrar tudo o que você precisa saber sobre este tema. A primeira parte mostra como carregá-lo para o WordPress. O tema que você deseja enviar para o WordPress é o arquivo lily.zip. Vá para o seu Painel do WordPress e vá para Aparência, Temas. Clique em Adicionar novo. Este é o lugar onde você pode carregar um tema ou usar um dos três temas WordPress. Você pode ver alguns deles na primeira página, e você também pode pesquisar temas na barra de pesquisa. Vamos usar o que baixamos do ThemeForest. Para fazer isso, você deseja clicar no botão Carregar tema no canto superior esquerdo. Em seguida, clique em Escolher arquivo, selecione a pasta e, em seguida, lily.zip. Clique em Instalar agora. Quando terminar, você poderá clicar em Ativar. Você também vai notar que este tema requer alguns plugins para executar todos os diferentes recursos que ele mostra. Se você clicar em Visitar Site, verá como ele se parece sem os plugins e sem qualquer conteúdo.
8. Instale os plugins de temas: Agora você quer instalar todos os plugins, a fim de ter o RSVP, fotos, todas essas coisas divertidas. Clique em Iniciar instalação de plug-ins. Você verá uma lista dos plug-ins, selecione todos
e, no menu de ações em massa, escolha Instalar e clique em Aplicar. Demora alguns minutos para instalar todos os plugins. Uma vez concluído, você terá uma lista de tudo o que instalou e um link para voltar ao instalador. Clique no link para voltar ao instalador. Aqui você verá todos os plugins que você acabou de instalar. Mas você notará que ele diz, a instalação ainda precisa ser ativada. Todos os seus plugins estão localizados no menu à esquerda. Clique em Plugins instalados. Aqui você encontrará uma lista de todos os plugins instalados em seu site WordPress. Alguns deles estão lá por padrão do GoDaddy ou WordPress. Há alguns que eu pessoalmente vou excluir, porque quanto mais plugins, mais peso está em seu site e mais lento será. Então, apenas guarde o que é necessário. Agora estou selecionando todos os que acabamos de instalar, e no menu Ações em massa, estou clicando em Ativar. Depois de clicar em Aplicar, você verá que há algumas informações na parte superior. Akismet é para regular comentários de spam. Eu não pretendo ter uma seção de comentários no meu site, então eu vou apenas ignorar essa mensagem e passar para a mensagem Jetpack. Você precisará conectar o wordpress.com para que este plugin funcione. Eu tenho uma conta, então eu vou apenas fazer login com meu nome de usuário e senha. No entanto, se você não fizer isso, há um link para criar um ali mesmo. Depois de iniciar sessão, verá esta mensagem
e, se clicar em Jumpstart, poderá ajustar algumas das definições com o Jetpack. Alguns deles você não vai precisar. Você pode desativar muitos deles e apenas ajudar com a espera e o carregamento do seu site novamente. Então eu estou desligando as estatísticas do site, compartilhando, publicando, postagem
relacionada, distribuição aprimorada, porque nada disso é realmente necessário. Eu só quero que as pessoas que são convidadas para o meu casamento para ir a este site. Agora está tudo instalado, e estamos prontos para seguir em frente.
9. Instale o conteúdo de demonstração: A maneira mais fácil de ver o site é vê-lo com algum conteúdo de demonstração. Este tema vem com conteúdo de demonstração, a fim de dar-lhe um guia de onde você pode colocar algumas fotos ou algum texto e apenas dar-lhe uma idéia melhor de como ele pode parecer no final. Para importar este conteúdo, vá para Ferramentas, Importar. Você verá uma lista de diferentes opções de importação. Clique em WordPress. Você precisará instalar o Importador para importar esse conteúdo. Vá em frente e clique em Instalar, clique em Ativar e execute o Importador. Vou mostrar-lhe um rápido antes e depois. Se você se lembrar, este é o que o nosso site parecia antes do conteúdo. Agora clique em Escolher arquivo e vamos importar o conteúdo na pasta. Na pasta de temas, você verá um arquivo XML. Escolha isso e clique em Abrir. Em seguida, clique em Carregar arquivo e importar. Em seguida, você verá uma página com algumas configurações. Você deseja marcar o download e a importação de anexos de arquivos
e, em seguida, selecione um de seus usuários existentes e clique em “Enviar”. Demora um pouco para importar, mas uma vez feito, ele irá dizer-lhe e você está pronto para visualizar o novo site. Clique em Atualizar no site e você pode ver agora que há algum conteúdo lá dentro. Não parece como foi no exemplo, mas estamos chegando lá. Se você clicar em uma das postagens, você poderá ver algum texto e talvez algumas fotos.
10. Personalizações básicas: Agora que temos algum conteúdo de demonstração, devemos personalizá-lo para que fique mais alinhado com nosso tema de casamento. Então vá para “Aparência” e clique em “Personalizar”. Aqui você tem um menu com algumas opções. A primeira coisa que queremos fazer é alterar a aparência da página quando ela é carregada. Neste momento, mostrou todas aquelas caixas. Mas queremos uma página inicial que tenha uma imagem de feição grande. Então, clique em “Página inicial estática”
e, em seguida, em exibições de primeira página, escolha “Página estática”. Na primeira página do menu suspenso, selecione “Página inicial”. Esta é uma pré-visualização de como será o site. Agora você vê um ponto onde você vai ter a imagem grande da página inicial. Se você vê-lo ao vivo, você verá que ele está lá. Também queremos alterar o título e o slogan. Agora ele diz apenas mais um site WordPress. Aqui você pode colocar a data do seu casamento como visto no exemplo. Se você olhar através do menu, há muitas opções e nós vamos chegar a essas em breve. Certifique-se de clicar em “Salvar” e “Publicar” para salvar todas as alterações que você acabou de fazer. Aqui está uma rápida visão geral das configurações no menu. Se você escolher cores, poderá ver aqui que pode alterar a cor do texto,
a cor do acento, a cor do plano de fundo e visualizar todas as alterações no lado direito. Você também pode alterar sua imagem de cabeçalho aqui. Você pode fazer com que a imagem de fundo seja uma apresentação de slides, onde você tem várias imagens girando uma após a outra. Eu escolhi desligar a apresentação de slides. O conteúdo de demonstração inclui fotos com dimensões sobre elas. Isso irá ajudá-lo e escolher as fotos certas. Você também pode ir para “Configurações”, “Geral”, é
aqui que você altera algumas das coisas nos bastidores, como o endereço de e-mail associado à conta. Você também pode alterar o título e o slogan aqui, a forma como as datas são exibidas nas postagens do blog. Você também pode entrar na seção de escrita e leitura e alterar qualquer configuração lá. No entanto, para este tutorial, eu não vou mudar nenhuma dessas configurações. Então sinta-se livre para deixá-los em paz por enquanto.
11. Como incluir conteúdo: Agora precisamos adicionar algum conteúdo. Para fazer isso, vá para Aparência e clique em Widgets. Este tema funciona com widgets, a fim de obter todos os recursos que você vê na página inicial. Você verá no lado esquerdo uma lista de
um monte de widgets que você pode arrastar para lá. Localizado perto da parte inferior, você vai ver todos os widgets que vieram instalados com este plugin. Todos começam com o Themechills. Estes são os que você vê na página inicial no site de demonstração. Queremos arrastá-los para aquele diretório. Eu adicionei três widgets. Para verificá-los, vou clicar em Visitar site. Eu deveria ver um temporizador, alguns eventos e um mapa. Se você rolar para baixo, há seu temporizador de contagem regressiva, há sua lista de eventos e seus mapas devem estar lá, mas ele ainda não está pronto para ser instalado. Agora eu vou adicionar o resto dos widgets para a seção.
12. Galeria de fotos de: A primeira seção ou widget em que vamos trabalhar são fotos. Esta é a área onde você tem um pergaminho horizontal de algumas fotos de você e seu outro significativo. Você pode citar esta seção com o que quiser. Você também pode adicionar uma descrição. Copiei e colei um lá dentro. Você também vai querer adicionar um botão ou chamada à ação menos para obter
mais informações sobre a recepção para convidados que não podem ir para o casamento de destino. Você precisará inserir um URL para que o botão funcione. Se você não tiver um agora porque a página ainda não está pronta, deixe-a para mais tarde. Se você acessar este site e clicar em “Atualizar”, você verá o texto que acabou de inserir ali. Agora precisamos adicionar nossas fotos. No lado esquerdo, se você clicar em “Fotos”
, verá uma lista do conteúdo de demonstração que já está lá. Podemos editá-los em vez de adicionar novas fotos. Basta escolher um e clicar em “Editar”. Você verá no lado direito, há uma imagem de feição. Este é o lugar onde a imagem realmente vai aparecer no site. Removo essa imagem de recurso e altero o título para grupo de engajamento. E eu vou adicionar uma imagem de feição. E esta imagem vai estar na festa de noivado. Clique em “Procurar” e, em seguida, percorra suas pastas e verifique a imagem desejada. Eu tenho alguns que eu vou fazer upload em alguns que têm a ver com esta seção de fotos. Vou fazer isso agora. Eu mostra várias imagens pressionando o comando e selecionando com o mouse. Depois que eles terminarem de fazer o upload, eu escolhi aquele que eu queria ser a imagem de recurso para esta seção de fotos. Selecione isso e clique em “Definir imagem em destaque”. Clique em “Atualizar” para salvar suas alterações. Volte para fotos e faça a mesma coisa para quantas fotos você tiver. Quando terminar, volte ao site e clique em “Atualizar”. As fotos aparecem abaixo do texto e você pode visualizá-las rolando para a esquerda ou para a direita.
13. Contagem e tempo e: Em seguida, vamos adicionar a contagem regressiva e os eventos. A contagem regressiva é aquela seção com os dias, meses e horas antes do casamento. Então, na área de widgets em “Aparência” na seção Homepage, abra o menu suspenso do temporizador de contagem regressiva. Aqui você pode colocar a data para o casamento e a hora. Sob o temporizador há dois pontos para mensagens. primeiro campo é uma mensagem para quando a contagem regressiva terminar, e o abaixo é a mensagem que será mostrada com sua contagem regressiva. Você pode ver que ele tem os dias, horas, minutos e segundos nessa ordem. Você pode definitivamente alterá-los apenas copiando e colando no local desejado. Se você atualizar sua página, verá a contagem regressiva com o fundo cinza no meio
da seção de fotos e a seção de eventos. Agora vamos atualizar os eventos. Você pode adicionar um título se quiser, mas eu vou escolher não fazer isso. No lado esquerdo, vou clicar em “Eventos” para entrar e alterar os que estão com o conteúdo de demonstração. Assim como o primeiro e clique em “Editar”. É aqui que você pode alterar o título, bem como alterar a descrição e adicionar uma imagem de feição. Vou fazer o upload dos arquivos da mesma forma que fez na última vez. Só pegando alguns para esta seção de uma vez. Depois que terminarem de carregar, escolherei aquele para este evento que quero ser a imagem da feição. Quando terminar, clique em “Atualizar”. Uma pequena dica, se você passar o mouse sobre e clicar em “Atualização Rápida”, você poderá fazer algumas pequenas atualizações aqui, como a data e o título. Continue com o resto dos títulos do evento e altere-os para se adequar ao seu site. Certifique-se de acertar as datas porque é assim que elas serão exibidas no site do início ao fim. Quando terminar, você deve ser capaz de clicar “Atualizar” e conferir sua nova linha do tempo.
14. Callout e festa de casamento: Há algumas outras características que podemos adicionar, uma sendo a chamada e a outra é a sua festa nupcial. Em widgets na página inicial, você pode ver a seção para texto explicativo. Isto é basicamente apenas um texto extra. Qualquer coisa que você quiser que vá com o fundo cinza,
o mesmo que a contagem regressiva. A tripulação está sob perfis. Aqui é onde você vai colocar todas as fotos e biografias de seus padrinhos e damas de honra. Você pode adicionar um título e clicar em “Salvar”. Em seguida, do lado esquerdo, clique em “Perfis”. Aqui você tem um monte de exemplos já lá dentro. Vamos fazer a mesma coisa e editar os que já estão lá. Basta escolher um e clicar em “Editar”. Mude o nome no topo e a pequena descrição sobre eles. Em seguida, na imagem do recurso, é o mesmo que eventos, basta carregar algumas imagens e selecionar o caminho certo. Defina a imagem do recurso e clique em “Atualizar”. Continuem a fazer isto por todas as vossas damas de honra e padrinhos até acabarem. Se você precisar adicionar mais pessoas do que você tem nos exemplos, basta clicar em “Adicionar perfil” no canto superior esquerdo ao lado do título do perfil. Quando terminar, clique em “Atualizar” e você verá todas as fotos pop-up abaixo da sua chamada. Se você passar o mouse sobre eles, você vai começar a ver o nome e a descrição rápida, e você pode clicar sobre eles para ver mais sobre essa pessoa. Há também alguma navegação na parte inferior. Você pode passar pela próxima ou pela madrinha anterior ou padrinhos.
15. Mapa de localização: Agora vamos adicionar um mapa para a localização do casamento. Sob aparências em widgets, página inicial, você verá o mapa, suspenso, você pode adicionar um título, e então também precisaremos pegar um código para colocar na seção de códigos incorporados ou curtos. Se você ir para a página de plugins e encontrar o plugin de mapa que instalamos chamado Responsive Styled Google Maps. Clique em “Configurações”, aqui você tem seu mapa, é
aqui que você vai escolher a cor do ponteiro, a cor do fundo, e também onde você vai inserir o endereço para as pessoas encontrarem seu casamento. Todos os estilos de mapa estão neste menu suspenso, Eu selecionei o número 8. Há muitas outras opções, mas realmente você só precisa mudar as cores e certifique-se de colocar o endereço certo. Quando você tiver tudo definido como quiser, certifique-se de ir para a direita na caixa cinza escuro, selecione todo esse texto e copie-o. Em seguida, volte para seus widgets e abra os widgets da página inicial na seção do mapa, e cole essas informações na seção de incorporação ou código curto, pressione “Salvar”. Atualize seu site e confira seu novo mapa. Lá está ele. Se você clicar no ícone do ponteiro pequeno, você vai obter o endereço com um link para direções.
16. RSVP e Instagram: Agora vamos adicionar uma maneira para convidados RSVP e seguir junto no Instagram. Nos widgets, esta seção de tecnologia é onde o formulário de contato real está indo para ir. Vamos para o lado esquerdo e clique em Contato e clique em Editar em RSVP. Este é o formulário RSVP. Aqui é onde você vai escolher o que você quer que eles coloquem. Agora, onde eles têm nome completo, e-mail, você estará participando, bem como opções de menu. Você também deseja alterar o endereço de e-mail nas duas seções, pois deseja que o RSVP seja enviado para o seu endereço de e-mail. Você também pode alterar o corpo da mensagem. Quando terminar, clique em Salvar. Certifique-se de copiar e colar o código do formulário de contato no fundo azul e voltar aos widgets. Em textos, você vai colar esse código na seção de conteúdo e, em seguida, clicar em Salvar. Se você atualizar sua página, verá o formulário de contato ali mesmo. Instagram é muito fácil, tudo que você tem a fazer é colocar em uma hashtag, bater salvar e todas as fotos que têm essa hashtag vão aparecer em seu site. Basta notar que as fotos que estão em uma conta privada não aparecerão. Eles precisam ser públicos para aparecer em seu site.
17. Imagem de cabeçalho de página: Para alterar a imagem do cabeçalho, você precisa entrar na aparência, personalizar. Escolha a imagem do cabeçalho no menu à esquerda. Como eu mencionei antes, há uma imagem de suporte de lugar com dimensões. Queremos fazer upload de uma imagem com as mesmas dimensões. Há duas maneiras de fazer isso. Primeiro, você pode tirar sua foto no Photoshop, ajustar as dimensões lá. Usando a ferramenta de corte, mude-a para 1920 por 1080. Você quer se certificar de salvar para a Web porque deseja que o tamanho da imagem seja o menor possível. Nas opções Salvar para Web, no canto superior direito, você verá um menu suspenso para o tipo de imagem, bem como a qualidade da imagem. Eu escolhi alto, mas eu pensei que ainda era muito alto, então eu escolhi médio. Você pode ver que diminuem o tamanho do arquivo. Agora vou continuar e guardar isso para a minha página inicial. Como eu disse antes, eu não tenho uma apresentação de slides,
então clique em adicionar nova imagem, fazer upload de arquivos, selecione o arquivo que você acabou de salvar e,
em seguida, clique em Selecionar e cortar. Em seguida, pressione pular recorte se ele já estiver recortado e lá você tiver. Aí está a sua imagem. Se você não tem o Photoshop, você pode facilmente fazê-lo no WordPress. Escolha a imagem de tamanho completo e clique em Selecionar e recortar. Na próxima página, você terá a opção de alterar as dimensões da imagem. Você pode ver que já há um tamanho pré-carregado para esta seção. Basta movê-lo até obter um ponto que você gosta e,
em seguida, selecione cortar imagem. Você deseja se certificar de excluir a imagem de espaço reservado com as dimensões para ver a nova imagem que você carregou em seu site. Se você atualizar a página, você deverá ver a nova imagem em segundo plano agora. Agora, vamos adicionar o texto na parte superior da imagem de fundo. Clique em Header Hero Text, digite o que você gostaria de aparecer sobre a imagem. Quando você terminar com isso, você pode adicionar um botão para sob o texto. Eu escolhi colocar um botão de RSVP aqui. No menu suspenso, você pode escolher a página vinculada para a qual deseja que o botão o leve
e, em seguida, digite o texto que deseja mostrar no botão. Não se esqueça de clicar em Salvar e publicar.
18. Menus de navegação: Vamos adicionar os menus que você vê no canto superior direito do site. No mesmo menu de personalização, escolha “Menus” e, em seguida, escolha “Locais de menu”. Na lista suspensa, clique em “Menu superior”. Você pode ver no lado direito onde este menu vai aparecer. Há alguns itens padrão lá no momento: blog, registro, linha do tempo. Se você voltar e escolher o menu, você pode decidir se deseja mantê-los ou removê-los. Eu não vou ter um blog, então eu removi ito.Você também pode adicionar mais itens de menu clicando no botão Adicionar menu. Você pode adicionar um link personalizado, você pode adicionar postagens, você pode adicionar as páginas que você já criou, há muitas opções para escolher para colocar no menu superior direito. Você também pode arrastar os itens do menu para colocá-los em uma ordem diferente. Quando terminar, clique em Salvar e publicar.
19. Registro de presentes: Para o registro, teremos uma página separada. Não vai estar na página inicial. Você vai ser capaz de chegar lá a partir do menu superior direito. Se você clicar no link “Registro” agora, você verá esta página. Está dizendo que você tem que baixar outro plugin. Este você tem que baixar separadamente fora do WordPress. Escolha o download gratuito e insira seu endereço de e-mail. Você deve obter um link em seu e-mail para baixar o plugin. Uma vez baixado, vá para a página Plugins e clique em Carregar plugin. Clique em “Escolher arquivo” e selecione o arquivo bean-registry.zip, clique em “Instalar agora” e, quando terminar, clique em “Ativar plug-in”. Agora, quando você vai para este site e clique na página “Registro”, você deve ver algumas imagens com lojas e logotipos para ir para o seu registro. Para alterá-los, vamos para as páginas e clique em “Editar” em Registro. Você verá um monte de códigos curtos nesta página. É aqui que você vai mudar o nome da loja. Para obter uma lista dos nomes das lojas oferecidos, selecione a pasta de imagens no arquivo que você acabou de baixar. Você verá uma lista de todos os logotipos diferentes que eles oferecem. Copie e cole esse nome de arquivo no código curto no WordPress. No local onde há duas hashtags, é onde você vai colocar o endereço para chegar ao seu registro. Depois de clicar em “Atualizar”, o link deve ser atualizado e você deve ver o novo logotipo em seu site. Quando o convidado clica nesse logotipo, ele deve ser trazido para o seu registro.
20. Como adicionar uma nova página: Você pode querer adicionar uma nova página ao seu site. No menu à esquerda, clique em “Páginas”, “Adicionar novo”. Digite o título da sua página na parte superior. Quando terminar, clique em “Publicar”. Convém adicionar esta página ao menu. Então vá para Aparência, Personalizar. Clique em “Menus”, selecione “Menu superior”. Vou substituir o Menu da Linha do Tempo por este novo. Então eu removi isso, e agora eu clico em “Adicionar itens”, escolho “Páginas”, pego “Detalhes” e aperto “Salvar”. Agora você deve vê-lo no canto superior direito. Quando você clica na página “Detalhes”, você provavelmente só vai ver uma página vazia com um título. Para adicionar conteúdo, basta inserir todas as informações na caixa branca abaixo do título. Aqui é onde vou colocar os detalhes da cerimônia, a localização do hotel, bem como o jantar depois. Se quiser adicionar estilo ao texto, clique no ícone para abrir a barra de ferramentas abaixo. Em seguida, adicione cabeçalhos ou cor ou tamanho da fonte e alinhe o texto ao centro ou à esquerda, se desejar. Você também pode adicionar um link destacando o texto e usando o ícone de link para adicionar o endereço.
21. Personalizações de CSS: Nesta última seção, vou mostrar como fazer alguma personalização avançada. A primeira coisa que vou mostrar é adicionar fontes personalizadas. Você vai para Plugins e pesquisar fontes do Google e encontrar um plugin chamado fontes WP Google. Clique para ativar o plugin. Uma vez que esteja pronto. Você pode ir até ele no lado esquerdo e clicar em “Fontes do Google”. O resto das personalizações requerem alterações CSS. Para fazer isso, eu tenho alguns passos delineados aqui, e são basicamente os mesmos passos para cada vez que queremos mudar algo. É melhor usar um navegador Chrome ou Firefox. Quando você encontrar o elemento da Web que deseja alterar, botão direito do mouse nele e clique em Inspecionar elemento ou Inspecionar dependendo do navegador em que você estiver. Eu usei a imagem de fundo como um exemplo aqui. Depois de pressionar Inspect, você verá uma janela pop-up da barra de ferramentas do desenvolvedor com vários códigos HTML e CSS. Em seguida, você vai querer encontrar o HTML que acompanha os elementos que você deseja alterar. Em seguida, a partir daí, você clicar sobre isso e, em seguida, alterar os valores CSS. Você então copiar e colar isso e trazê-lo para a seção CSS em WordPress.We terá um arquivo para você baixar em projetos que tem todas as alterações CSS que eu fiz se você gostaria de aplicar os mesmos. Este é um rápido antes e depois. Esta é a aparência da fonte padrão. Se você clicar com o botão direito e clicar em inspecionar, você pode ver que estilo de texto é, é um H3. Isso é importante saber para que você saiba qual fonte colocar com qual estilo. Marque H3 para alterar o cabeçalho. Se você quiser ver os estilos de fontes do Google Fonts, acesse google.com/fonts. Aqui você pode percorrer todas as fontes de estilo diferentes,
em seguida, quando você voltar para o plugin, você pode escolher aquele no menu suspenso. Quando terminar, clique em “Salvar todas as fontes”. Se você atualizar sua página, verá uma nova fonte. Agora vamos adicionar uma imagem personalizada para mostrar quando o convidado clica no ícone do mapa. Vou procurar o Tropicana e pegar o logotipo do Google Images e salvá-lo no meu computador. Em seguida, vou abrir uma nova guia com a Biblioteca de Mídia. Em seguida, carregue a imagem que acabamos de salvar, clique na imagem para abri-la e clique em “Ver página de anexo”. Clique com o botão direito na imagem e clique em “Abrir imagem em nova guia”. Aqui você pode copiar e colar a barra de endereço superior, colá-la no endereço que está na caixa de descrição. Eu só vou selecionar novamente minhas cores, e então certifique-se de copiar o texto na caixa cinza para sobrescrever o texto antigo. Volte para Widgets, abra a página inicial, abra o Mapa e substitua o texto antigo pelo novo texto. Clique em “Salvar”. Se você atualizar a página e clicar no ícone do mapa, você deverá ver a nova imagem. Agora vamos mudar a flor rosa que aparece na divisória sob os títulos. Para fazer isso, vou pegar um ícone do flaticon.com. Procurei no coração e encontrei um com anel de noivado com um coração em cima. Se você clicar no olho, poderá baixar um arquivo PNG com a cor que escolher. Clique em “Download gratuito”, e se você clicar com o botão direito do mouse e Inspecionar elemento, você verá que ele está definido como uma imagem de fundo chamada lily.svg. Vamos substituir isso pela nossa nova imagem. Vamos fazer isso indo para godaddy.com, entrar em gerenciar seu site de hospedagem
e, em seguida, clicando em Gerenciador de Arquivos. Quando você estiver aqui, você deve navegar até o site do casamento, abrir essa pasta, abrir wp-content, depois Temas, e então o nome do seu tema que é Lily. Em seguida, abra Image e você verá o arquivo lily.svg, então você vai arrastar seu novo arquivo para essa pasta. Para colocar isso no lugar você vai querer ir para o editor de aparências. Você verá uma lista de páginas no lado direito, você rolar todo o caminho para baixo você pode clicar em style.css. Antes de fazer qualquer alteração, uma boa ideia é copiar todo o texto da página que você está alterando e colá-lo em um arquivo de texto. Só no caso de você estragar alguma coisa, você pode colocá-lo de volta ao que era originalmente. Quando esse arquivo estiver aberto, se você clicar em Apple F para pesquisar o arquivo e digitar lily, ele o levará a esse estilo. Em seguida, você pode alterar o lily.svg para o nome do seu novo arquivo. Quando terminar, atualize a página e veja se o ícone aparece. Para mim, não aconteceu. Ainda está lá, mas está escondido no fundo. Vou mudar o tamanho do fundo para 100%. Lá está ele. Você vai querer copiar toda a seção do
texto onde você acabou de alterar o tamanho do plano de fundo, agora precisamos adicionar esse estilo que acabamos de mudar. Se você ir para a aparência e clicar em Editar CSS, você tem uma página CSS em branco. Cole o texto que você acabou de copiar no editor de folhas de estilo CSS. Salve a folha de estilos e siga em frente. Vamos adicionar mais estilos. Vou mudar a sobreposição na imagem de fundo. É um pouco escuro então eu cliquei direito que, eu fui para inspecionar elemento e, em seguida, encontrei a cor de fundo era um cinza opaco, eu estou mudando isso para transparente então é um pouco mais brilhante. Você vai querer fazer a mesma coisa e destacar o texto para
que você possa copiá-lo e colá-lo no editor CSS. Agora eu vou mudar o tamanho da fonte para os títulos. Mas quando eu clique com o botão direito e clique em Inspecionar Elemento, eu posso ver que o tamanho da fonte é um pouco grande, então eu peguei um REM, e agora tudo se encaixa dentro da linha. Também vou alterar o tamanho da fonte e a cor da fonte da navegação superior direita. Era um pouco leve demais, então eu mudei para a cor 666666. Novamente, exclua tudo o que você não estiver usando ao colar tudo de volta na folha de estilos. Agora eu vou mudar a cor
dessa borda muito clara ao redor para uma cor branca sólida. Estou mudando a cor RGBA transparente para branco, que é FFFFF. Agora, eu só estou mudando a altura da imagem de fundo porque eu achei que era um pouco grande, então eu mudei de 800 pixels para 700 pixels. Agora estou mudando a cor de fundo da
contagem regressiva para a mesma cor que o cinza que está por trás dela. Eu primeiro fui para verificar os elementos de fundo cinza e descobri qual cor de cinza é, e então fui para o fundo branco e mudou isso para ser o mesmo. Eu também estou mudando o tamanho da fonte porque eles são um pouco pequenos, então eu vou torná-lo um pouco maior. Uma coisa que eu gostaria de me livrar é dos direitos autorais no rodapé. Eu comprei o tema, então eu tenho os direitos de usá-lo. Eu só vou colocar um estilo de exibição nenhum no rodapé para que nada apareça na parte inferior.
22. Finalização: Para encerrar, este é um exemplo de como será o site acabado. No final, vou mostrar as diferentes resoluções de tamanho de tela, como ele ficará em tablets e dispositivos móveis. Se você pegar as alças do seu navegador e deslizar o navegador para um tamanho um pouco menor, você verá que ele se transforma em uma visualização de tablet e em
seguida, você vai trazê-lo ainda menor e você vai vê-lo ir até o celular. Ao mover seu navegador, você notará que o site parece bom, independentemente do tamanho da tela em que você o visualiza.
Sarah Trafford, Designer
