5 PASOS SENCILLOS PARA CONVERTIR UN PSD A UN TEMA DE WORDPRESS 9August 2019

5 pasos sencillos para convertir un PSD a un tema de WordPress (Bootstrap)

¿Qué es un PSD?

La mayoría de las personas que han estado dentro o alrededor de la industria del diseño y el diseño web pueden comprender fácilmente esta terminología, al igual que entenderían cualquier otro término de diseño que no sea familiar para las personas fuera del nicho (kerning, CMYK, relleno, tipografía, liderazgo, Serif, etc.) Pero en realidad, el término es muy simple de entender.

PSD es la abreviatura de  P hoto S hop D esign, por lo tanto, PSD a WordPress es el proceso de convertir un archivo de diseño de Photoshop a una plantilla WP que funcione usando Bootstrap u otras metodologías y marcos.

Esto se debe a que Photoshop es la única pieza de software que es más popular entre los diseñadores gráficos y la forma en que se crean la mayoría de los diseños de sitios web de WordPress.

¿Qué es un tema de WordPress?

Por lo general, hay dos aspectos principales para crear un sitio web de WordPress.

(1) El aspecto real del sitio web, y

(2) el contenido del sitio.

En WP, el CMS más popular para crear un sitio, el contenido es independiente de cómo se ve realmente el sitio web. El aspecto del sitio web en realidad está definido por un tema de WordPress. Piense en temas como lo haría para teléfonos inteligentes, para su computadora de escritorio o computadora portátil o cualquier otra cosa que pueda “pelar” a su preferencia. La plantilla o el tema que use se puede usar para “aplicar” el contenido o darle un aspecto que está eligiendo.

Los temas de WordPress son una colección de archivos PHP que contienen “comandos” o especificaciones que definen los colores y patrones, los estilos, los iconos, las fuentes, los tamaños de los encabezados y el texto, los botones y esencialmente el aspecto completo de todos los elementos. del sitio web que está diseñando. Hay toda una industria en torno a estos diseños, donde puede obtener su plantilla de forma gratuita o comprar una que ya está hecha (generalmente llamada premium), por cualquier cosa, desde $ 25 hasta unos pocos cientos de dólares.

También existe la opción de crear su propio diseño personalizado, en lugar de optar por un producto popular que ya se haya creado. Este es el proceso real de convertir un PSD a un tema de WordPress (cómo se verá su sitio web al final).

En el futuro, lo guiaremos al procedimiento exacto para crear su propio diseño.

 

Servicios de PSD a WordPress

Antes de continuar leyendo, ¿está buscando desarrolladores o socios que lo ayuden con el proyecto de su sitio web?
Usted está en la difícil situación de tener que encontrar un buen socio confiable, sin ser engañado, o perder mucho tiempo (y dinero) con un proveedor de servicios de baja calidad.
Nuestra experiencia en la búsqueda de desarrolladores de confianza no ha sido agradable. Hemos tenido que lidiar con una serie de problemas importantes:
  • Desarrolladores que devuelven código de muy baja calidad
  • Personas que se comunicaron de forma muy esporádica, creando problemas de comunicación significativos.
  • Código que fue 100% plagiado creando problemas legales para nosotros
  • Tasas caras, con una calidad que era mediocre en el mejor de los casos.
  • Desarrolladores que desaparecieron (o nunca tuvimos noticias de los siguientes depósitos)
Pero no permita que esto lo asuste de la subcontratación, solo necesita encontrar una   compañía confiable , estamos aquí para ayudarlo!

Convertir un PSD a un tema de WordPress

Paso 1: Corta el archivo PSD

En términos de nuestro tutorial de PSD a Bootstrap, “Slicing” es lo primero y más importante en todo el PSD para el proceso de conversión de WordPress receptivo.

El término “rebanar” puede parecerle bastante confuso al principio, pero no se preocupe demasiado por eso. La división se refiere a cortar y dividir un solo archivo de imagen en múltiples archivos de imagen, cada uno de los cuales contiene diferentes elementos de diseño de todo el diseño. Algunas personas se refieren a ellos como empalmes porque crean elementos separados de un solo “organismo” de diseño que eventualmente se reorganizará o sintetizará y se transformará en un diseño completo.

Esto es crucial ya que no puede codificar una plantilla / tema desde un solo archivo de diseño de imagen.

Por lo tanto, para diseñar una página web, primero debe cortar el archivo de imagen principal en muchos archivos de imagen individuales y luego coserlos sin problemas.

PSD Slicing para convertir a HTML y CSS y eventualmente a Bootstrap

Por lo general, la mayoría de los diseñadores web y gráficos prefieren usar Adobe Photoshop para cortar.

Aunque se puede hacer lo mismo con un software de edición de imágenes equivalente como GIMP (Programa de manipulación de imágenes GNU) o cualquier otro paquete de software de imágenes, recomendamos encarecidamente que use Photoshop, ya que hace el trabajo más fácil y rápido, con herramientas como Capas y Capa. Máscaras, extracción de metadatos, mezcla, manipulación y uso de archivos PSD e imágenes RAW.

Independientemente del software / aplicación que use, el punto principal es crear archivos de imagen con píxeles perfectos al final, que representen los diferentes elementos de su diseño final.

Además de eso, no necesita cortar elementos de diseño, como el color del encabezado / pie de página y el fondo de color sólido, en su totalidad, que se pueden crear dinámicamente. En cambio, solo corte elementos de diseño, como botones e imágenes, que no se puedan crear dinámicamente.

Encuentre a continuación un video de YouTube que explica los conceptos básicos de la división de PSD

https://youtu.be/XgxEieLbloc

Paso 2: Descarga y Bootstrap tu tema

Una vez que haya cortado su archivo de diseño de imagen, vaya a http://getbootstrap.com y descargue la última versión de Twitter Bootstrap desde allí. Después de completar la descarga, extraiga el archivo zip en una carpeta.

Ahora, si abre la carpeta extraída, encontrará tres carpetas (  css, fuentes  y  js  ) dentro de ella.

Tenga en cuenta que uno de los usos principales de este marco es porque hace un uso extensivo de las consultas de medios para poder crear diseños que funcionan en cualquier tipo de dispositivo, permitiendo que su diseño fluya sin problemas entre un tamaño de dispositivo a otro (xs – Extra Pequeño, para móviles, sm – Pequeño, para tabletas, md – Medio, para computadoras portátiles y de escritorio y lg – Grande, para equipos de escritorio grandes). Esto se llama diseño web receptivo .

Lectura adicional :  Frameworks CSS o CSS Grid: ¿Qué debo usar para mi proyecto?(Revista Smashing)

Paso 3: Crear archivos Index.html y Style.css

El siguiente paso es codificar los elementos divididos en formato HTML / XHTML y aplicarles estilo usando el CSS. Para esto, debe crear un archivo index.html y un archivo style.css , lo que requiere que tenga suficiente dominio sobre HTML CSS. Básicamente, estamos convirtiendo el PSD a HTML, antes de poder continuar con los siguientes pasos.

Aparte: HTML o XHTML representa (E X extensible) H yper T ext M arkup Llinguage, mientras que CSS representa C escalando S tyle S heets.

Como desea desarrollar su tema utilizando Bootstrap, deberá inicializar Bootstrap en la sección de encabezado y el JavaScript asociado en la sección de cuerpo de su página index.html de la siguiente manera:

<! DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “utf-8”>
<meta name = “viewport” content = “width = device-width, initial-scale = 1.0”>
< link href = “https://cdn.collectiveray.com/css/bootstrap.min.css” rel = “stylesheet” media = “screen”>
</head>
<body>
<script GARBAGE> </script>
<script src = “https://cdn.collectiveray.com/js/bootstrap.min.js”> </script>
</body>
</html>

Ahora puede utilizar los componentes de Bootstrap en su plantilla HTML. Por ejemplo, aquí estamos construyendo una página web simple con un menú de navegación y componentes en miniatura. La parte mínima de bootstrap significa que el archivo se ha minimizado por razones de rendimiento:

<! DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “utf-8”>
<meta name = “viewport” content = “ancho = ancho del dispositivo, escala inicial = 1”>
<link href = “https://cdn.collectiveray.com/css/bootstrap.min.css” rel = “stylesheet” media = “screen”>
</head>
<cuerpo>
<div class = “container-fluid” >
<div class = “navbar” >
<a class=”navbar-brand” href=”#”> WPBootstrap.com </a>
<ul class = “nav navbar-nav pull-right” >
<li> <a href=”#”> Inicio </a> </li>
<li> <a href=”#”> Acerca de </a> </li>
<li> <a href=”#”> Servicios </a> </li>
<li> <a href=”#”> Pedido </a> </li>
<li> <a href=”#”> Contacto </a> </li>
</ul>
</div>
<div class = “row” >
<div class = “col-sm-6 col-md-4” >
<div class = “thumbnail” >
<img src = “https://cdn.collectiveray.com/image1.png”>
<div class = “caption” >
<h3> Acerca de </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>
<div class = “col-sm-6 col-md-4” >
<div class = “thumbnail”>
<img src = “https://cdn.collectiveray.com/image2.png”>
<div class = “caption” >
<h3> Proyectos </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>
<div class = “col-sm-6 col-md-4” >
<div class = “thumbnail” >
<img src = “https://cdn.collectiveray.com/image3.png”>
<div class = “caption” >
<h3> Servicios </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>
<hr>
<footer>
<p> & copy; WPBootstrap 2015 </p>
</footer>
</div>
<script BASURA> </script>
<script src = “https://cdn.collectiveray.com/js/bootstrap.min.js”> </script>
</body>
</html>

Si abre este archivo en su navegador, debería verse así:

BootStrap WordPress Theme - 1er borrador

Como puede ver, actualmente no está funcionando ningún CSS personalizado en esta página. Entonces, para diseñar el contenido de la página html de acuerdo con nuestros requisitos, crearemos un archivo style.css personalizado . Para nuestro ejemplo, hemos agregado el siguiente código a mi archivo CSS personalizado:

.navbar {
fondo: # 222222;
margen inferior: 0px;
radio de borde: 0px;
}
.navbar-brand {
color: #FFFFFF;
altura de línea: 50 px;
relleno-izquierda: 10px;
}
a.navbar-brand: hover {
color: # FFEB3B;
}
.navbar ul {
relleno derecho: 4%;
}
.navbar ul li a {
color: #FFFFFF;
margen derecho: 10%;
}
.navbar ul li a: hover { 
color: # 222222;
color de fondo: amarillo;
}
a.btn-primary {
color de fondo: # E91E63;
color: #FFFFFF;
}

Para que nuestro archivo CSS personalizado recién creado funcione, debemos incluirlo en nuestra página HTML (tal como lo hicimos bootstrap.min.css ). Por lo tanto, incluya un enlace de referencia al archivo style.css en su archivo index.html , justo encima de la línea donde hizo referencia bootstrap.min.css .

<head>
<link href = “https://cdn.collectiveray.com/css/style.css” rel = “stylesheet” media = “screen”>
<link href = ”css / bootstrap.min.css” rel = ”stylesheet” media = ”screen”>
</head>
<cuerpo>


</body>

Ahora abra nuevamente el archivo index.html en su navegador y verá el cambio: nuestro CSS personalizado está funcionando ahora, puede ver la barra de encabezado en la parte superior y los botones con un color diferente al de los botones de arranque predeterminados. Todos los cambios se han definido a través del archivo CSS anterior.

Convertir PSD a WordPress BootStrap Theme - Draft 2

Este fue solo un ejemplo simple. Del mismo modo, haciendo uso de Bootstrap, puede codificar todo su archivo PSD (por supuesto, después de cortar) en HTML. Al final de este paso, tendrá dos archivos en sus manos: uno es index.html y otro es style.css .

Hasta ahora estábamos principalmente en un tutorial de PSD a Bootstrap. Ahora viene la conversión a un tema de Bootstrap WordPress.

Ahora, ¿lo anterior es demasiado trabajo para ti y prefieres no comenzar desde cero? Este paquete de plantillas de inicio de WP lo ayudará a comenzar con una serie de temas de inicio que puede usar para eventualmente producir su propio diseño personalizado.

Descargue ahora el paquete 20 WP Starter Theme

Como puede ver, la conversión de PSD a HTML es una parte bastante importante de todo el proceso, pero cuando lo elimina, las cosas se ponen un poco más fáciles.

Paso 4: Romper el archivo Index.html según la estructura del tema de WP

La razón principal para convertir un archivo de diseño de Photoshop a WordPress es crear una plantilla de sitio web que funcione bien y que pueda cargarse en el tablero del sitio web. Temas como Divi y Avada , y otros temas populares tienen un conjunto estándar de archivos que deben implementarse para ser considerados un tema WP válido. Eso es lo que haremos en nuestro próximo paso.

Real y verdaderamente, las siguientes fases de esta conversión están relacionadas con la estructura de codificación de WordPress para temas y plantillas, porque ahora estamos llevando nuestro tema hacia WP.

Ahora que tiene el archivo index.html de su PSD, debe dividirlo en múltiples archivos php de acuerdo con la estructura del archivo de temas de WordPress. Al hacerlo, no solo podrá convertir el archivo estático index.html a un tema dinámico de WP, sino que también podrá agregarle varias características y funciones asociadas con WP.

(Aparte, PHP es un lenguaje de script del lado del servidor conocido como preprocesador de hipertexto).

Para facilitar una mejor codificación y categorización, una plantilla típica está compuesta por varios archivos PHP como header.php, footer.php, index.php, sidebar.php, search.php, etc.

Sin embargo, solo necesita los archivos index.php y style.css para crear un tema de WordPress totalmente funcional. Como ejemplo, aquí estamos dividiendo nuestro archivo index.html creado anteriormente en tres archivos: header.php, index.php y footer.php .

Estructura básica de plantilla de WordPress

Comencemos con header.php. Todo el código HTML que se incluye en la parte superior de la página index.html irá al archivo header.php .

<! DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “utf-8”>
<meta http-equiv = “X-UA-Compatible” content = “IE = edge”>
<meta name = “viewport” content = “ancho = ancho del dispositivo, escala inicial = 1”>
<link href = “https://cdn.collectiveray.com/css/style.css” rel = “stylesheet” media = “screen”>
<link href = “https://cdn.collectiveray.com/css/bootstrap.min.css” rel = “stylesheet” media = “screen”>
</head>
<cuerpo>
<div class = “container-fluid”>
<div class = “navbar”>
<a class=”navbar-brand” href=”#”> WPBootstrap.com </a>
<ul class = “nav navbar-nav pull-right”>
<li> <a href=”#”> Inicio </a> </li>
<li> <a href=”#”> Acerca de </a> </li>
<li> <a href=”#”> Servicios </a> </li>
<li> <a href=”#”> Pedido </a> </li>
<li> <a href=”#”> Contacto </a> </li>
</ul>
</div>

Mientras que la parte media del archivo index.html irá al archivo index.php:

<div class = “row”>
<div class = “col-sm-6 col-md-4”>
<div class = “thumbnail”>
<img src = “https://cdn.collectiveray.com/image1.png”>
<div class = “caption”>
<h3> Acerca de </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>
<div class = “col-sm-6 col-md-4”>
<div class = “thumbnail”>
<img src = “https://cdn.collectiveray.com/image2.png”>
<div class = “caption”>
<h3> Proyectos </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>
<div class = “col-sm-6 col-md-4”>
<div class = “thumbnail”>
<img src = “https://cdn.collectiveray.com/image3.png”>
<div class = “caption”>
<h3> Servicios </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>

Y nuestro archivo footer.php se vería así:

<hr>
<footer>
<p> & copy; WPBootstrap 2015 </p>
</footer>
</div>
<script BASURA> </script>
<script src = “https://cdn.collectiveray.com/js/bootstrap.min.js”> </script>
</body>
</html>

Por lo tanto, este paso incluye dividir su archivo index.html en header.php, index.php, footer.php y otros archivos de características necesarios de acuerdo con la estructura de archivos de temas de WordPress.

La lista completa de archivos que debe tener cada plantilla se puede encontrar a continuación, con una imagen para mostrar cómo se relacionan entre sí:

  • style.css
  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php
  • page.php
  • comentarios.php
  • 404.php
  • funciones.php
  • archive.php
  • searchform.php
  • search.php

Si sigue alguna guía para convertir su diseño de Photoshop a WordPress, siempre encontrará que dan como resultado una estructura similar a la siguiente. A continuación se muestra una vista más detallada de cómo debería ser un tema final de WP:

Tema WP: estructura detallada después de seguir un tutorial de PSD a WordPress

Paso 5: Agregue etiquetas WP multidisciplinarias a su plantilla Bootstrap

Este es el paso final de nuestro tutorial.

Lo mejor de WP es que ofrece una gran cantidad de funciones integradas en su estructura y referencia de codificación que se pueden usar para agregar funciones y características personalizadas a un tema de sitio web. Para incorporar cualquier funcionalidad deseada en sus temas de WordPress, todo lo que necesita hacer es usar el conjunto correcto de etiquetas de función incorporadas en sus archivos. El marco WP se encargará de todo y eso es lo que hace que la plataforma sea tan poderosa.

En el paso anterior, hemos dividido el archivo index.html en función de la estructura de archivos requerida.

Ahora es el momento de agregar etiquetas WP PHP a varios archivos de tema, como header.php, index.php, footer.php y sidebar.php, etc., que obtuvimos en el paso anterior y luego combinarlos para producir un Tema funcional de WordPress.

Para nuestro ejemplo anterior, aquí hemos usado <? Php bloginfo ($ show); ?> función en header.php para mostrar el título de nuestro sitio en un enlace:

<a href=”/<?php bloginfo(‘url’); ?> “title =” <? php bloginfo (‘name’);?> “class =” navbar-brand “> <? php bloginfo (‘name ‘); ?> </a>

Y para el menú, hemos usado <? Php wp_nav_menu ($ args); ?> funcionan de la siguiente manera:

<? php wp_nav_menu (array (‘menu’ => ‘Project Nav’, ‘menu_class’, ‘nav navbar-nav pull-right’)); ?>

Ahora, nuestro archivo header.php se vería así:

<? php
?> <! DOCTYPE html>
<html <? php language_attributes (); ?> class = “no-js”>
<head>
<meta charset = “<? php bloginfo (‘charset’);?>”>
<meta name = “viewport” content = “ancho = ancho del dispositivo, escala inicial = 1”>
<? php wp_head (); ?>
</head>
<cuerpo <? php body_class (); ? >>
<div class = “container-fluid”>
<div class = “navbar”>
<a href=”/<?php bloginfo(‘url’); ?> “title =” <? php bloginfo (‘name’);?> “class =” navbar-brand “> <? php bloginfo (‘name ‘); ?> </a>
<? php wp_nav_menu (array (‘menu’ => ‘Project Nav’, ‘menu_class’, ‘nav navbar-nav pull-right’)); ?>
</div>

El código de pie de página para nuestro  footer.php seguirá siendo el mismo, excepto agregar <? Php wp_footer (); ?> función.

<? php?>
<footer>
<p> & copy; WPBootstrap 2015 </p>
</footer>
</div>
<? php wp_footer (); ?>
</body>
</html>

Ahora pasemos a index.php . Para mostrar nuestros componentes en miniatura, hemos usado <? Php dynamic_sidebar ($ index); ?> función.

<? php 
get_header (); ?>
<div class = “row”>
<? php dynamic_sidebar (‘barra lateral-1’); ?>
<? php dynamic_sidebar (‘barra lateral-2’); ?>
<? php dynamic_sidebar (‘barra lateral-3’); ?>
<hr>
<? php get_footer (); ?>

¡Eso no es suficiente! Para mostrar nuestros componentes en miniatura correctamente, necesitamos definir sidebar-1 , sidebar-2 y sidebar-3 en nuestro archivo functions.php de la siguiente manera:

función wpbootstrap_widgets_init () {
register_sidebar (array (
‘name’ => __ (‘Área de widgets’, ‘wpbootstrap’),
‘id’ => ‘sidebar-1’,
‘description’ => __ (‘Agregue widgets aquí para que aparezcan en su barra lateral’, ‘wpbootstrap’),
‘before_widget’ => ‘<aside id = “% 1 $ s” class = “widget% 2 $ s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class = “widget-title”>’,
‘after_title’ => ‘</h2>’,

register_sidebar (array (
‘name’ => __ (‘Área de widgets’, ‘wpbootstrap’),
‘id’ => ‘sidebar-2’,
‘description’ => __ (‘Agregue widgets aquí para que aparezcan en su barra lateral’, ‘wpbootstrap’),
‘before_widget’ => ‘<aside id = “% 1 $ s” class = “widget% 2 $ s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class = “widget-title”>’,
‘after_title’ => ‘</h2>’,

register_sidebar (array (
‘name’ => __ (‘Área de widgets’, ‘wpbootstrap’),
‘id’ => ‘sidebar-3’,
‘description’ => __ (‘Agregue widgets aquí para que aparezcan en su barra lateral’, ‘wpbootstrap’),
‘before_widget’ => ‘<aside id = “% 1 $ s” class = “widget% 2 $ s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class = “widget-title”>’,
‘after_title’ => ‘</h2>’,

);
}
add_action (‘widgets_init’, ‘wpbootstrap_widgets_init’);

Esto registrará tres áreas de widgets en el panel de control de WP, donde tendríamos que poner el ” código HTML ” para cada componente en miniatura en los widgets sidebar-1 , sidebar-2 y sidebar-3 respectivamente. Por ejemplo, usaremos el siguiente código en el widget sidebar-1 .

<div class = “col-sm-6 col-md-4”>
<div class = “thumbnail”>
<img src = “https://cdn.collectiveray.com/image1.png”>
<div class = “caption”>
<h3> Acerca de </h3>
<p> … </p>
<p> <a href=”#” class=”btn btn-primary” role=”button”> Explore </a> </p>
</div>
</div>
</div>

¡Y así!

Lo último que debemos hacer es cargar nuestras hojas de estilo. Esto se puede hacer usando wp enqueue style () en el archivo function.php , de la siguiente manera.

// Cargue la hoja de estilo principal
wp_enqueue_style (” wpbootstrap-style ‘, get_stylesheet_uri ());

// Cargar hoja de estilo Bootstrap
wp_enqueue_style (‘wpbootstrap’, get_template_directory_uri (). ‘/css/bootstrap.css’);

Para obtener una lista completa de todas las etiquetas y funciones disponibles, le recomendamos que consulte estas páginas oficiales del Codex:

  • Etiquetas de plantilla : esta página le proporciona una lista completa de etiquetas WP, cada una de las cuales tiene una página dedicada donde puede encontrar más información sobre una etiqueta en particular.
  • Referencia de funciones : esta página es una guía de referencia para todas las funciones de PHP utilizadas en el software de WordPress. Al igual que las etiquetas de plantilla, cada función de PHP está vinculada a una página dedicada donde se explica en detalle con ejemplos apropiados.

Después de agregar etiquetas y funciones WP esenciales, todos estos archivos se colocarán en una sola carpeta con un nombre similar al nombre del tema. Posteriormente, deberá colocar esta carpeta en el directorio / wp-content / themes / de la instalación de su sitio web. ¡Y ese es el paso final del tutorial!

Una vez que haya hecho eso, tendrá un tema de WordPress receptivo que funciona bien usando Bootstrap que puede activar a través del panel de WP.

Listo para comenzar las cosas?

Comience su tema de WP  descargando el paquete 20 Starter ahora

Algunas reflexiones adicionales

Lento pero seguro, Responsive  Web Design se  ha convertido en un estándar dominante para crear sitios web preparados para el futuro. En la actualidad, casi todos los sitios web funcionan con esta increíble técnica para brindar a los usuarios una experiencia óptima de visualización e interacción, independientemente del dispositivo que estén utilizando, ya sea un teléfono, tableta o computadora portátil / de escritorio.

Según una  encuesta reciente  realizada por el equipo de Google Webmaster en Google+, más del 81% de las personas prefieren utilizar un enfoque de diseño receptivo para que sus sitios web se procesen correctamente en todo tipo de dispositivos.

Es por eso que es esencial aprender cómo crear un tema de sitio web de WordPress usando Twitter Bootstrap u otro marco receptivo para su diseño web desde un PSD. Si bien hay muchos temas gratuitos para sitios web, crear su propio tema WP personalizado con Bootstrap es la máxima expresión de creatividad en diseño web.

Aunque WP  domina más del 24% de todos los sitios web , convertir un archivo de Photoshop (PSD) en un tema receptivo que funcione bien no es tan fácil como crees. Esto requiere que tenga un buen control sobre cómo escribir consultas de medios CSS que finalmente determinan si una plantilla responde o no.

¿No sería mejor si obtienes una hoja de estilo receptiva precodificada con todas las características esenciales?

Convertir Psd a WordPress Bootstrap theme - un tutorial

Gracias a  Bootstrap , el marco front-end receptivo más popular del mundo, para facilitar la vida de los desarrolladores, esta es ahora una tarea bastante más simple de lo que solía ser. En este artículo, le mostraremos cómo convertir una plantilla PSD en un tema sensible de WordPress usando  Bootstrap  como marco de desarrollo.

Una vez más, primero convertimos nuestro PSD a Bootstrap, por lo que, esencialmente, la primera parte es realmente un tutorial de PSD a Bootstrap.

BY TRITONCORPTM 0 Read More

Leave a Reply

Your email address will not be published. Required fields are marked *