¿Acaso debes diseñar un nuevo sitio web en WordPress y te has quedado sin ideas para su diseño?. Muchas veces no hay mejor manera para inspirarse que visitar las webs de tu competencia, seguro algo bueno puedes sacar de ellas. Pero ahora que has encontrados algunos diseños chulos que te gustaría plasmar en tu web, ¿cómo lo haces?. ¿Sabes como hacer para copiar los diseños de otras webs en WordPress?. En caso que no lo sepas estas en el lugar indicado.
1. Cuatro claves para copiar otros diseños de WordPress
En este breve post analizaremos cuatro consejos que te ayudarán para llevar diseños de otras webs a las tuyas. Que esté escribiendo este post no significa que aconseje al lector a tomar otras webs y copiarlas por completo, sino que tenga las herramientas para tomar algunas ideas y de ahí ser capaz de diseñar su propia web.
En primer lugar veremos de que manera puedes descubrir que plantilla y plugins tiene instalada la web en cuestión, para luego ver otros aspectos claves en un diseño, como los colores, las fuentes de textos utilizadas y los códigos HTML y CSS.
1.1 Cómo descubrir que plantilla y plugins usa?
No hay ninguna duda que WordPress es el CMS más usado actualmente, pero no todas las webs están creados con WordPress. Por ello lo primero que debemos hacer antes que nada es asegurarnos que la web que estamos analizando use WP. Para ello existen varias herramientas, pero por ser la más ser la más sencilla solo recomendaré whatcms.org. Basta con que coloques la URL y en unos segundos descubrirás si utiliza WordPress.
Habiéndonos asegurado que la web estada diseñada con WordPress, es momento de destriparla para saber con que plantilla y plugins está montada. Para el caso te recomendaré varias herramientas, sobre todo por que ninguna detecta todos los plugins. Razón por la cual necesitarás analizar con más de una herramienta para sacar la mayor información posible.
- Builtwith.com: es mucha la información que podrás obtener usando builtwith.com, entre ellas la plantilla en uso y algunos plugins. En el caso de mi blog solo fue capaz de detectar 6 de los 15 plugins que uso.
- WordPress Theme Detector: una de las herramientas más populares cuando necesitas conocer el theme de una web. Aunque también encontrarás algunos de los plugins que están en uso.
- What WordPress Theme Is That: otra buena opción si necesitas conocer que plantilla y plugins usa una web. Nuevamente en el caso de mi blog solo detecto 4 plugins, siendo que uso 15 me resulta algo escaso.
- WordPress Plugin Checker: como su nombre lo indica esta herramienta sirve para detectar plugins, como aspecto negativo debo decir que solo encontró 2 de mis plugins. Como positivo que uno de esos dos no había sido detectado por ninguna de las herramientas anteriores.
Podría continuar listado herramientas similares a las anteriores, pero no creo que valga la pena, solo es cuestión de Googlear un poco y las encontrarás. En todos los casos son muy buenas para detectar las plantillas, pero con el tema plugins se les complica.
1.2 Copiar colores de otra web
En el diseño de casi cualquier cosa el color es algo fundamental. Para analizar los colores en una web te recomiendo estas dos herramientas:
- Colorzilla: esta es una extensión de Google Chrome que al ser instalada y activada, te permite obtener el código HTML de cada color por el que pases el cursor. Solo deberás ubicar el cursor y te dirá de que color se trata.
- Degraeve: Dentro de este sitio web podrás extraer la gama de colores que hay en una imagen. Al cargar la misma en el sistema, y una vez procesada, tendrás disponibles los colores de la misma.
1.3 Descubrir que fuentes de textos usa
Dependiendo del tipo de mensaje que quieres transmitir en tu web puedes necesitar una u otra tipografía en tus textos, y que hay si has encontrado una fuente que te gusta en otro sitio web. Sencillo, puedes hacer uso de la siguiente herramienta:
- WhatFont: esta es una extensión de Chrome que permite inspeccionar las fuentes webs simplemente colocando el cursor sobre ellas. Sin dudas es la forma más fácil de identificar fuentes en páginas web.
1.4 Códigos utilizados (HTML y CSS)
Ya hemos visto como analizar que plantilla, plugins, colores y fuentes usan una web, pero que hay si queremos analizar como está diseñado un elemento, como pueden ser botones, menues, widgets, formularios, etc. Para ello necesitaremos ver los códigos con los cuales están programados dichos elementos.
Y si de copiar códigos de una web se trata no hay nada mejor que el inspector de elementos de Google Chrome. Con solo un click derecho sobre el elemento en cuestión, y seleccionando la opción inspeccionar, Chrome despliega una pantalla en la cual se te muestran los códigos HTML y CSS de la web. Y no solo eso, podrás copiar dicho elemento o también realizar ediciones en el CSS que se reflejan al instante en el sitio.
Bueno con esto ya llegamos al final, espero que algunos de los consejos sobre diseño web con WordPress que aquí he dejado sea de tu utilidad. Por cualquier consulta puedes dejarla en la caja de comentarios. 😉
Imagen de portada creado por freepik – www.freepik.es