Como converter PSD para WordPress usando Elementor e WidgetKit
Publicados: 2019-12-12Você está procurando uma solução de conversão de PSD para WordPress? Quer converter o PSD do seu site pronto para WordPress, mas não sabe como? Ok, eu posso te ajudar com esse assunto.
Você já sabe que o WordPress é uma das plataformas CMS mais usadas e versáteis dos últimos tempos. Agora, criar um site totalmente funcional do PSD para o tema WordPress sem codificação é muito mais confortável com um construtor de páginas como o Elementor.
Neste artigo, mostrarei “Como converter um PSD para WordPress usando Elementor & WidgetKit” passo a passo.
Vamos ver como.
Selecionando um design PSD
Antes de converter um tema PSD para WordPress, a primeira coisa que você precisa fazer é selecionar um design PSD de um site. Em suma, PSD é a abreviação de PhotoShop Design, uma das ferramentas de design mais populares com que a maioria dos designs de sites WordPress são criados.
Você pode escolher qualquer um dos seus designs PSD preferidos da extensa coleção do PSDHUB.
Eles fornecem modelos PSD gratuitos de qualidade premium para o seu site, tanto para uso pessoal quanto comercial. Lembre-se, o design PSD selecionado deve ser simples e contemporâneo.
Verifique os seguintes fatores ao escolher um design PSD,
- Estrutura do projeto: A primeira coisa que você deve considerar é a estrutura do projeto. O design não tem limites, mas a codificação tem.
- Layout Limpo e Elegante: A terceira coisa é que seu design PSD preferido deve ser limpo e elegante. Ele ajuda o desenvolvedor a criar um site perfeito em pixels a partir de um layout limpo e elegante.
- Cumprimento do Propósito: A segunda coisa é, se o design atende ao seu propósito ou não. Suponha que você precise de um site de viagens, então seu design PSD deve ser um PSD de site de viagens.
- Complexidade: Finalmente, tente ignorar a complexidade como é para PSD também na escolha do design.
Aqui usamos o Eventia-Conference and Event Management Template do PSDHUB.
Instalar o WordPress
O WordPress é conhecido por sua facilidade de instalação. Na maioria das circunstâncias, a instalação do WordPress é um processo muito simples e leva menos de cinco minutos para ser concluído. Para converter um tema PSD para WordPress, instalar o WordPress é o segundo passo a ser considerado.
O WordPress.org fornece um artigo detalhado sobre “Como instalar o WordPress” na página de suporte do site. No entanto; Aqui estão as instruções básicas de instalação do WordPress para você,
- Primeiro baixe e descompacte o pacote WordPress.
- Crie um banco de dados para WordPress em seu servidor web, bem como um MySQL.
- Carregue os arquivos do WordPress para o local desejado em seu servidor web:
- Se você deseja integrar o WordPress à raiz do seu domínio, mova ou carregue todo o conteúdo do diretório WordPress descompactado para o diretório raiz do seu servidor web.
- Se você deseja ter sua instalação do WordPress em seu próprio subdiretório em seu site, crie o diretório do blog em seu servidor e carregue o conteúdo do pacote WordPress descompactado para o diretório via FTP.
- Execute o script de instalação do WordPress acessando a URL em um navegador da web.
É isso! O WordPress agora deve estar instalado.
Instalar Elementor
O artigo trata da conversão de um tema PSD para WordPress usando o Elementor. Portanto, precisamos do Elementor para personalizar e editar o arquivo PSD. Vamos ver então, como instalar o Elementor.
Elementor é uma das melhores plataformas de design completas para criar um design perfeito de pixel no WordPress. É melhor por sua abordagem de design amigável e extensível. O processo de instalação do Elementor também é uma tarefa simples. Basta seguir alguns passos simples e você está pronto para projetar seu PSD no construtor de páginas Elementor.
Existem duas maneiras de instalar o plug-in Elementor. O processo de instalação é descrito abaixo,
Via Site Elementor
- Primeiro vá para elementor.com e clique em download.
- No painel do WordPress, clique em Plugins > Adicionar novo .
- Clique em Carregar plug -in e escolha o arquivo que você baixou para o Elementor.
Através do painel do WordPress
- No Dashboard, clique em Plugins > Adicionar Novo.
- No campo Procurar, insira Elementor e escolha o construtor de páginas Elementor para instalar.
- Após a instalação, clique em Ativar.
Isso é tudo o que você precisa fazer para instalar o construtor de páginas Elementor. Você também pode acompanhar o vídeo abaixo para saber mais sobre o processo de instalação.
Instalar o WidgetKit
WidgetKit for Elementor-O mais avançado e poderoso Elementor Addons Kit que aprimora os recursos de criação de seu site adicionando mais elementos e layouts. Aqui usamos os widgets e elementos de sua conversão de PSD para WordPress.
Você pode criar quase qualquer tipo de página a partir de um PSD usando WordPress e WidgetKit. A instalação do Widgetkit é tão simples quanto criar um tema PSD para WordPress com ele. No painel do WordPress, você pode adicionar o WidgetKit facilmente seguindo algumas etapas fáceis. Vamos ver,
Instale o WidgetKit através do painel do WordPress
- No Dashboard , clique em Plugins > Adicionar Novo.
- Insira WidgetKit no campo Pesquisar e escolha WidgetKit para Elementor instalar.
- Após a instalação bem-sucedida, clique em Ativar .
O WidgetKit está pronto para uso com o Elementor agora. Se você ainda tiver alguma confusão é só seguir o vídeo. Isso também irá ajudá-lo sobre como usar o WidgetKit.
Converta seu PSD para WordPress
A parte de instalação foi concluída. Agora é hora de converter o PSD para WordPress Elementor e WidgetKit. Existem muitos provedores de serviços PSD para WordPress que estão fornecendo PSD para WordPress, bem como conversão de PSD para Joomla atualmente. No entanto; você pode projetar sua própria maneira preferida. Aqui mostramos apenas uma maneira básica de converter um PSD em WordPress.
Além disso, você também pode escolher qualquer um dos nossos temas e modelos prontos da extensa coleção do nosso diretório de temas e plugins do WordPress.
Tente seguir a sequência ao projetar um Layout do PSD. Isso vai te ajudar muito,
Criar uma nova página
A primeira coisa que você precisa fazer é criar uma nova página no painel do WordPress. No canto superior esquerdo do painel do WordPress, clique em Páginas > Adicionar novo.
Em seguida, clique em Editar com Elementor para entrar no Elementor Page Builder. Você verá um painel Elementor como mostrado abaixo.
Construa sua página a partir de um arquivo PSD
Para construir uma página ou converter um tema PSD para WordPress, há três coisas principais a serem consideradas; Seções, colunas e widgets. Aqui as Seções são os maiores blocos de construção e capturam as Colunas. Você pode colocar Widgets dentro de Colunas. Ao clicar na opção de edição, você pode controlar a Seção, a Coluna e os Widgets com seu identificador.
Adicionar seção de cabeçalho
Para a seção de cabeçalho aqui, usamos um tema existente Eventia por Themexpert. No WordPress, você usa um tema existente como um quadro para projetar um modelo, caso contrário, o próprio WordPress adiciona um para você. Em seguida, você pode adicionar logotipo e várias páginas usando o design ou layout do tema existente.
Adicionar seção de herói
Agora convertemos a seção hero. Primeiro, adicionamos uma imagem de fundo como o PSD, em seguida, adicionamos coluna em coluna para adicionar vários conteúdos e ícones.
Para a opção de contador aqui, usamos o elemento WidgetKit Countdown. A saída e a opção de edição estão abaixo.
Adicionar seção interna
Agora é hora de projetar a seção interna. Aqui usamos elementos Elementor para adicionar plano de fundo e texto entre duas colunas.
Esta é a edição da seção Sobre este evento com o elemento Elementor. Aqui adicionamos algum texto e imagem de banner na coluna da seção. A vista está olhando abaixo.
Com o ícone vertical da equipe WidgetKit, projetamos a seção de alto-falante do arquivo PSD. Lá adicionamos imagens e ícone do site social em coluna diferente com nome e designação.
Nesta seção, apenas adicionamos algum ícone aleatório do PSD e damos um título.
Não podemos fazer tudo com o Elementor. Nesse caso o que fazemos? Usamos addon de um tema diferente ou fazemos um addon para o nosso próprio. Isso é comum ao projetar um tema PSD para WordPress. Aqui usamos o Schedule Addon do Eventia Theme.
Para a seção Blog, usamos o elemento carrossel de blog do WidgetKit. Com visual de conteúdo diferente, você pode adicionar plano de fundo e até o botão ler mais também.
Para a seção de rodapé aqui, usamos um tema existente Eventia por Themexpert como fazemos antes da seção de cabeçalho. Aqui temos vários ícones de sites sociais e um botão de inscrição.
Visualize e publique sua página
Quando terminar de projetar sua página a partir do PSD, você pode visualizar seu trabalho e publicá -lo. Você também pode editar uma página Publicada e salvar seu trabalho como Rascunho . Isso significa que você não arruinará sua página publicada enquanto salva seu trabalho como Rascunho . Aqui está o visual de visualização do PSD da Eventia.
Palavra final
Isso é tudo por hoje, pessoal. Espero que você goste do artigo e tenha uma ideia clara sobre como converter um PSD para WordPress usando o construtor de páginas Elementor e o WidgetKit. Aplique o recurso e, claro, não se esqueça de compartilhar sua experiência e opinião valiosa na seção de comentários abaixo.