Cómo convertir PSD a WordPress usando Elementor y WidgetKit
Publicado: 2019-12-12¿Está buscando una solución de conversión de PSD a WordPress? ¿Quiere convertir el PSD de su sitio web listo a WordPress, pero no sabe cómo? Está bien, puedo ayudarte con este asunto.
Ya sabes que WordPress es uno de los CMS más utilizados y versátiles de los últimos tiempos. Ahora, crear un sitio web completamente funcional desde PSD a un tema de WordPress sin codificación es mucho más cómodo con un creador de páginas como Elementor.
En este artículo, le mostraré "Cómo convertir un PSD a WordPress usando Elementor y WidgetKit" paso a paso.
Veamos cómo.
Seleccionar un diseño PSD
Antes de convertir un tema de PSD a WordPress, lo primero que debe hacer es seleccionar un diseño PSD de un sitio web. En resumen, PSD es la abreviatura de PhotoShop Design, una de las herramientas de diseño más populares con las que se crean la mayoría de los diseños de sitios web de WordPress.
Puede elegir cualquiera de sus diseños PSD preferidos de la amplia colección de PSDHUB.
Proporcionan plantillas PSD gratuitas de primera calidad para su sitio web, tanto para uso personal como comercial. Recuerde, su diseño PSD seleccionado debe ser simple y de diseño contemporáneo.
Verifique los siguientes factores mientras elige un diseño PSD,
- Estructura de diseño: lo primero que debe tener en cuenta es la estructura de diseño. El diseño no tiene límites, pero la codificación sí.
- Diseño Limpio y Elegante: Lo tercero es que su diseño PSD preferido debe ser limpio y elegante. Ayuda al desarrollador a crear un sitio web perfecto en píxeles a partir de un diseño limpio y elegante.
- Cumplimiento del Propósito: Lo segundo es, si el diseño cumple con su propósito o no. Supongamos que necesita un sitio web de viajes, entonces su diseño PSD debe ser un sitio web de viajes PSD.
- Complejidad: finalmente, intente ignorar la complejidad como lo es para PSD también en la elección de diseño.
Aquí usamos Eventia-Conference and Event Management Template de PSDHUB.
Instalar WordPress
WordPress es conocido por su facilidad de instalación. En la mayoría de las circunstancias, la instalación de WordPress es un proceso muy simple y lleva menos de cinco minutos completarlo. Para convertir un tema de PSD a WordPress, instalar WordPress es el segundo paso a considerar.
WordPress.org proporciona un artículo detallado sobre "Cómo instalar WordPress" en la página de soporte de su sitio. Sin embargo; Aquí están las instrucciones básicas de instalación de WordPress para usted,
- Primero descargue y descomprima el paquete de WordPress.
- Cree una base de datos para WordPress en su servidor web, así como un MySQL.
- Cargue los archivos de WordPress en la ubicación deseada en su servidor web:
- Si desea integrar WordPress en la raíz de su dominio, mueva o cargue todo el contenido del directorio de WordPress descomprimido en el directorio raíz de su servidor web.
- Si desea tener su instalación de WordPress en su propio subdirectorio en su sitio web, cree el directorio del blog en su servidor y cargue el contenido del paquete de WordPress descomprimido en el directorio a través de FTP.
- Ejecute el script de instalación de WordPress accediendo a la URL en un navegador web.
¡Eso es todo! WordPress ahora debería estar instalado.
Instalar Elementor
El artículo trata sobre cómo convertir un PSD a un tema de WordPress usando Elementor. Por lo tanto, necesitamos Elementor para personalizar y editar el archivo PSD. Veamos entonces, cómo instalar Elementor.
Elementor es una de las mejores plataformas de diseño completo para crear un diseño perfecto de píxeles en WordPress. Es mejor por su enfoque de diseño extensible y fácil de usar. El proceso de instalación de Elementor también es una tarea sencilla. Simplemente siga algunos pasos simples y estará listo para diseñar su PSD en el generador de páginas de Elementor.
Hay dos formas de instalar el complemento de Elementor. El proceso de instalación se describe a continuación,
A través del sitio de Elementor
- Primero ve a elementor.com y haz clic en descargar.
- En el panel de control de WordPress, haga clic en Complementos > Agregar nuevo .
- Haga clic en Cargar complemento y elija el archivo que ha descargado para Elementor.
A través del panel de WordPress
- En el panel, haga clic en Complementos > Agregar nuevo.
- En el campo de búsqueda, ingrese Elementor y elija el generador de páginas de Elementor para instalar.
- Después de la instalación, haga clic en Activar.
Esto es todo lo que tiene que hacer para instalar el generador de páginas de Elementor. También puede seguir el siguiente video para saber más sobre el proceso de instalación.
Instalar WidgetKit
WidgetKit para Elementor: el kit de complementos de Elementor más avanzado y potente que mejora las capacidades de creación de su sitio web al agregar más elementos y diseños. Aquí usamos los widgets y elementos de su conversión de PSD a WordPress.
Puede crear casi cualquier tipo de página desde un PSD utilizando WordPress y WidgetKit. La instalación de Widgetkit es tan sencilla como diseñar un tema de PSD a WordPress con él. Desde el panel de control de WordPress, puede agregar WidgetKit fácilmente siguiendo algunos pasos sencillos. Vamos a ver,
Instale WidgetKit a través del panel de WordPress
- En el panel , haga clic en Complementos > Agregar nuevo.
- Ingrese WidgetKit en el campo de búsqueda y elija WidgetKit para que Elementor lo instale.
- Después de una instalación exitosa, haga clic en Activar .
WidgetKit está listo para usar con Elementor ahora. Si todavía tienes alguna confusión, simplemente sigue el video. Esto también le ayudará sobre cómo usar WidgetKit.
Convierte tu PSD a WordPress
La parte de instalación se ha completado. Ahora es el momento de convertir el PSD a WordPress Elementor y WidgetKit. Hay muchos proveedores de servicios de PSD a WordPress que actualmente ofrecen conversión de PSD a WordPress y de PSD a Joomla. Sin embargo; Puedes diseñar tu propia forma preferida. Aquí solo mostramos una forma básica de convertir un PSD en WordPress.
Además, también puede elegir cualquiera de nuestros temas y plantillas listos para usar de la extensa colección de nuestro directorio de temas y complementos de WordPress.
Intente seguir la secuencia mientras diseña un diseño de PSD. Esto le ayudará mucho,
Crear una nueva página
Lo primero que tienes que hacer es crear una nueva página desde el panel de control de WordPress. En la parte superior izquierda del panel de WordPress, haz clic en Páginas > Agregar nuevo.
Luego haga clic en Editar con Elementor para ingresar a Elementor Page Builder. Verá un panel de Elementor como se muestra a continuación.
Cree su página desde un archivo PSD
Para construir una página o convertir un PSD a un tema de WordPress, hay tres cosas principales a considerar; Secciones, columnas y widgets. Aquí las Secciones son los bloques de construcción más grandes y capturan las Columnas. Puede colocar widgets dentro de las columnas. Al hacer clic en la opción de edición, puede controlar la Sección, la Columna y los Widgets con su identificador.
Agregar sección de encabezado
Para la sección de encabezado aquí, usamos un tema Eventia existente de Thexpert. En WordPress, debe usar un tema existente como marco para diseñar una plantilla; de lo contrario, WordPress mismo agregará uno para usted. Luego puede agregar el logotipo y varias páginas utilizando el diseño o diseño del tema existente.
Agregar sección de héroe
Ahora convertimos la sección de héroe. Primero agregamos una imagen de fondo como el PSD y luego agregamos columna en columna para agregar múltiples contenidos e íconos.
Para la opción de contador aquí usamos el elemento WidgetKit Countdown. La salida y la opción de edición están debajo.
Añadir sección interior
Ahora es el momento de diseñar la sección interior. Aquí usamos elementos de Elementor para agregar fondo y texto entre dos columnas.
Esta es la edición de la sección Acerca de este evento con el elemento Elementor. Aquí agregamos algo de texto e imagen de banner dentro de la columna de la sección. La vista está mirando hacia abajo.
Con el icono vertical del equipo WidgetKit diseñamos la sección de altavoz del archivo PSD. Allí agregamos imágenes y el ícono del sitio social en diferentes columnas con nombre y designación.
En esta sección, solo agregamos un ícono aleatorio del PSD y le damos un título.
No podemos hacer todo con Elementor. En tal caso, ¿qué hacemos? Usamos un complemento de un tema diferente o hacemos un complemento propio. Esto es algo común al diseñar un PSD para un tema de WordPress. Aquí usamos Schedule Addon de Eventia Theme.
Para la sección Blog, usamos el elemento de carrusel de blogs de WidgetKit. Con diferentes contenidos visuales, puede agregar un fondo e incluso leer más botones también.
Para la sección de pie de página aquí, usamos un tema Eventia existente de Themexpert como lo hacemos antes de la sección de encabezado. Aquí tenemos múltiples íconos de sitios sociales y un botón de suscripción.
Vista previa y publicación de su página
Una vez que haya terminado de diseñar su página desde el PSD, puede obtener una vista previa de su trabajo y publicarlo . También puede editar una página publicada y guardar su trabajo como borrador . Eso significa que no arruinará su página publicada mientras guarda su trabajo como Borrador . Aquí está la vista previa visual de Eventia PSD.
última palabra
Esto es todo por hoy, chicos. Espero que disfrute el artículo y tenga una idea clara sobre cómo convertir un PSD a WordPress utilizando el generador de páginas Elementor y WidgetKit. Aplique el recurso y, por supuesto, no olvide compartir su experiencia y valiosa opinión en la sección de comentarios a continuación.