TIENDA ONLINE CON DISEÑO PROFESIONAL

Tienda online con diseño profesional y sin contratar a ningún profesional ? , si es posible, y te explico como en este articulo .

Para crear tu tienda online con un diseño profesional no hace falta estudios de bellas artes ni nada parecido , existen themes y herramientas que nos van a permitir tener nuestra tienda online con un diseño super profesional , por que NO HAY QUE OBSESIONARSE (perdón por gritar) con el diseño, el diseño es una parte pero claro no es lo mismo una tienda así

Tienda mal diseñada

Que algo así

El segundo ejemplo es una web sencilla con un diseño basado en plantillas y que nos permite tener ordenada toda la tienda con sus categorías y ofertas promociones etc .

Como conseguimos este segundo diseño sin necesidad de contratar a un profesional y sin tener que gastarnos miles de euros ?.


TEMAS GRATUITOS PARA TU TIENDA ONLINE

STOREFRONT

Woocommerce tiene su propio tema gratuito storefront que lo podéis descargar en este  link STOREFRONT , creado por el mismo equipo que desarrolla WooCommerce. Entre sus características destacan su ligereza y sencillez, pensado más como un tema base que se puede ir personalizando a base de extensiones y temas hijo creados especialmente para el.

Al ser de los propios desarrolladores de Woocommerce las actualizaciones siempre serán seguras actualizas woocommerce actualiza storefront,es compatible con WPL así tienes las traducciones siempre listas,es totalmente responsive,incluye etiquetado schema lo cual es un extra al SEO.

Schema y SEO en otro articulo hablaremos que es.

El tema esta preparado para funcionar con varias extensiones de pago como WooCommerce Bookings, Brands, Wishlists, Ajax Layered Navigation, Variation Swatches and Photos o Composite Products. Lo que significa que automáticamente cargara la hoja de estilos necesario y todo quedara perfectamente integrado.

COMO MODIFICAR STOREFRONT 

Storefront se puede modificar desde apariencia->personalizar

personalizarwoocommerce

Puedes cambiar los colores , puedes añadir tu logo , imagen de cabecera , los widgets y ves los cambios en vivo , también si eres un poco “manitas” puedes personalizar con hooks “trocitos de código” el numero de productos que enseñar en la pagina , cambiar como se ve la ficha de producto y un montón de cosas mas aquí puedes personalizar storefront con hooks

Y si no quieres complicarte con código tienes extensiones para hacer ese trabajo mas sencillo aunque son de pago , el plugin seria Storefront Powerpack , que permite cambiar casi cualquier aspecto visual del tema aquí tienes un vídeo en ingles para que veas lo que puede hacer este plugin

O bien puedes comprar las extensiones sueltas lo que necesites , aunque puede que te resulte mas económico comprar el powerpack, aquí tienes las extensiones de storefront y ejemplos de uso

TEMAS HIJO PARA STOREFRONT 

Si estas empezando con tu tienda , quizás esto de temas hijo te suena a , que dices , no me líes Pedro , estas hablando de storefront , te lo explico fácil un tema hijo es poder añadir “cosas” nuevas a tu tema pero no las perderás cada vez que actualices , por ejemplo si al tema le añado un hook de los que te explique antes , cuando actualice el tema (y lo vas hacer te lo aseguro) pues perderás el hook y tendrás que añadirlo de nuevo , para eso se usan los temas hijos las modificaciones se quedan con los hijos y podemos actualizar lo importante del tema , me explique mas o menos ?

Pues storefront ya dispone de varios temas hijo que ademas nos posibilitan tener en un solo click un diseño prediseñado en lo que cuesta descargar y activar , algunos son de pago otros son gratuitos mira que chulos son https://woocommerce.com/product-category/themes/storefront-child-theme-themes/

childthemestorefront

Te quedaste con la boca abierta verdad ? , debo decirte que no solo es descargar y activar hay muchas cosas para que todo funcione correctamente , definir categorías , métodos de pago de envió , el seo de la tienda etc etc pero eso que tanto te obsesiona con storefront puedes tenerlo gratis o casi gratis

Storefront un tema de referencia para empezar con tu tienda online Clic para tuitear

OCEANWP

Es el tema que utilizo mas habitualmente junto con Astra en su versión pro , oceanwp nació de Nik un chico francés que de no saber hacer un blog en el 2012 a crear su theme propio en 2016 y nació por que no encontraba un theme que tuviera lo que el buscaba , si no existe pues lo creo , fácil no ?

Es un tema que se lleva de maravilla con Elementor (luego entramos en Elementor tranquil@) y tiene dos versiones una gratuita y otra de pago pero el precio base son 39€ puedes ver sus precios en la web de OCEANWP  

En su versión gratuita podemos usar el personalizador de temas para cambiar la estructura de la web (ancho,posición de los sidebars),la tipografía de toda la web(cuerpo,encabezados,menús),puedes poner una barra superior iconos sociales o añadir tu contacto,existen 7 maneras de mostrar el encabezado y los menús o elegir tamaños margenes,puedes cambiar la estructura de la pagina de blog e incluso las entradas,cambiar colores individualmente menús cabecera pie de pagina etc,widgets de pie de pagina y copyright , cambiar configurar para móviles y tablets .

Que te puedes tirar una tarde entera probando cosas en tu web , pero repito y no me canso de repetir no te obsesiones por el diseño

Pero por un poco de dinero tenemos la opción de pago y lo primero que vemos al instalar la opción de pago es que en el escritorio tenemos Theme Panel

OCEAN WP THEME PANEL

Y veremos esto

OCEAN WP PERSONALIZADOR

Donde podemos quitar cosas que no vamos a usar y así aligeramos la web y también veremos una opción de scripts como esta

OCEAN WP SCRIPTS

Lo mejor de la versión de pago es que permite personalizar individualmente entradas y paginas , nos sale un menú en cada entrada o pagina así

OCEAN WP modificar paginasEl diseño principal de la página (posición de la barra lateral, poner el ancho completo, diseño del pie de página, etc).

Añadir shortcodes en varios lugares de la página (antes o después de la barra superior, antes o después de la cabecera, antes o después del título, etc).

Personalizar el estilo de la cabecera, así como ocultarla (también la barra superior).

Mostrar un logo diferente y modificar su tamaño para los diferentes dispositivos.

Personalizar el estilo del menú y de los iconos sociales, así como poner un menú diferente.

Personalizar el título y los subtítulos de la página.

Mostrar u ocultar las migas de pan para esa página y personalizar su estilo.

Mostrar u ocultar los widgets del pie de página y el mensaje de copyright.

Te maree con tanta opción lo mejor pruebalo y me dices que tal te aseguro que no vas a arrepentirte de la compra

Como ocurre con storefront tenemos demos para instalar de un solo click algunas tan chulas como esta

OCEANWP DEMO

Puedes verlas en su web OCEANWP DEMOS y también plugins para hacer mas sencilla la compra a tus clientes OCEANWP EXTENSIONES

OCEANWP diseña tu tienda online en tiempo record Clic para tuitear

USAR UN MAQUETADOR EN TU TIENDA ONLINE

Un maquetador visual o en ingles page builder (constructor de paginas) es un plugin que se instala y nos sirve para modificar el aspecto de la pagina ampliando las funciones del diseñador wordpress o no utilizar gutenberg que quizás para empezar puede resultar mas “engorroso” pero eso es otro post

Un maquetador nos permite modificar visualmente cualquier parte de la web ,  la home , paginas de promociones , paginas ,entradas y paginas de producto .

Algunos maquetadores mas conocidos y que te sonaran

Elementor gratuito y Elementor Pro (la version de pago),Visual Composer (de pago) de los primeros en salir y por eso más conocido,beaverbuilder(de pago) mas de un millón de webs lo usan,Gutenberg(gratuito) el propio maquetador de wordpress pero no tan intuitivo como los otros.

La ventaja de usar un maquetador es que te permite ver lo que haces en todo momento por ejemplo mira este pantallazo de elementor

Como ves a la izquierda nos da una serie de opciones que solo tenemos que arrastrar y soltar en el lienzo de la derecha y maquetar lo que necesitemos  , mi recomendación empieza con elementor gratuito y vas viendo sobre la marcha .

Elementor o Elementor Pro he ahí la cuestión Clic para tuitear

CONCLUSIONES Y CONSEJOS

Como vistes , existen opciones totalmente gratuitas que te permitirán crear webs igual de “chulas” que zalando , amazon , no no es broma ,pero en algunos casos tenemos que rascarnos el bolsillo un poco ya viste que las opciones de pago son para todos los bolsillos

Mi recomendación durante todo el articulo es que no te obsesiones con el diseño es una parte de tu tienda pero no lo mas importante , consejos mantén una coherencia , no uses mil colores, si en la home es naranja por que es su color intenta usar siempre ese naranja no pongas la tienda en verde el checkout amarillo , intenta tener una coherencia de colores si los botones son naranja todos los botones de la web son naranja , me sigues ?

Igual con la tipografía , usa los mismos tipos de letra en toda la web si los títulos son arial bold todos los titulos son arial bold , si los textos son roboto todos los textos son roboto

Las fotografías siempre originales y de calidad , si te las facilita tu proveedor que sean de calidad que el cliente pueda ampliarlas y no se vean pixeladas.

Haz el proceso de compra sencillo , no compliques la vida a tu cliente ,cuando tu compras en otras webs te gusta tener todo ordenado y fácil de encontrar , si compras unos zapatos de hombre por que vas a enseñar todos los zapatos no tendría sentido , estos temas o themes como te guste llamarlos , tienen la opción de crear megamenus tipo zalando para desplegarse y ver todo ordenado y con coherencia.

Y por experiencia te digo que en la sencillez esta el saber hacer .

Repito por decimocuarta vez , no te obsesiones con el diseño no sobrecargues la web de cosas que no sirven para nada , el tiempo de carga es muy importante y ademas la mayoría de compras por internet se realizan con el móvil con lo que un diseño espectacular de ordenador en el móvil se vera supersencillo y en vertical (No me crees ? ) , mira amazon versión web

Y su versión móvil

Ves como lo que importa es la usabilidad y lo que ahora esta muy de moda la UX (user experience) la forma en que el usuario esta en tu web y lo bien que le hacemos sentir.

El diseño es importante pero no lo más importante Clic para tuitear

Como siempre te digo , si te ves agobiado no crees que podrás empezar o terminar , me tienes aquí para lo que necesites https://112tecnologico.com te ayudare en cualquier tema que me preguntes .

Espero tus comentarios y aportes , dime que tema usas tu , usas algún maquetador ? , dime cual usas

Nos vemos en el próximo articulo y gracias si llegaste hasta aquí y compártelo alguien te lo agradecerá seguro.

Sherpatecnologico

POR PEDRO CALVET

Ayudo a emprendedores digitales a disfrutar de su vida knowada liberándoles de todas las tareas tecnológicas con mi servicio mantenimiento wordpress/woocommerce y servicio de diseño web/tienda online

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email

Deja un comentario

× Hablamos por "guasap" ?