Creación Web

Layoutit: Creando plantillas web fácilmente

Aprende a usar LayoutIt, una potente herramienta online que te permite crear páginas web fácilmente gracias a bootstrap. Vuelven los posts con vídeo y los juegos!!!

Hola que tal! Bueno, ahora mismo, en el momento en que se publique este post, probablemente estaré más relajado pues ya habremos acabado la presentación de Iron Blogger y estaremos disfrutando de unos gin tonics y una risitas. Menudos 15 últimos días!!!!

Así que ahora vuelven los posts con vídeos, los tutoriales, los juegos y las risas en este blog!! Aunque el de hoy es “para abrir boca” y quizás parezca que tenga poca utilidad (y que sea muy técnico y serio), te sorprenderá lo útil que puede llegar a ser la herraMienta que te presento.

Por cierto, que sepas que de verdad vuelven los juegos, así que lee detenidamente el texto porque habrá una preguntita y un regalo!!! (Elisabet**, eres la voz de mi conciencia… gracias!!!).

Te presento a Layoutit

Layoutit es una herramienta online que nos permite construir plantillas de página de una forma muy sencillA, arrastrando elementos predefinidos a la página para luego descargar el código fuente y poder editarlo.

Es un poco al estilo de aquel plugin para WordPress del que hablé en otro post, el Visual Composer, pero esta vez es una herramienta independiente que nos devolverá el código HTML y lo podremos utilizar en cualquier sitio.

En el vídeo podrás ver que su uso es muy sencillo y también explico que se apoya en bootstrap 3, el nuevo framework de diseño de front-ends de Twitter.

Toma, ahí es nada el chorro técnico que te acado de soltar, ¿verdad? Ufff, de verdad que últimamente me caigo mas mal ….

¿Qué es el bootstrap de Twitter?

Así, fácilmente, podemos decir que el bootstrRap es una especie de estándar que Twitter diseñó y puso a disposición de todo el mundo, con un conjunto de elementos básicos y herramientas con los cuales podremos crear cualquier tipo de web que resultará ser rápida y amigable tanto para su uso en móviles como en ordenadores.

¡Toooma de nuevo! Venga, que hoy toca ponerse el birrete de Academics …

Lo cierto es que te sorprendería ver la cantIdad de themes y páginas web que hay hechas con Bootstrap. Si, en tu wordpress, le das a añadir temas y en la búsqueda pones “bootstrap 3” verás como encuentras una gran cantidad de temas que, además, se quedan chulos.

Y, por si no lo sabías, Joomla 3 es 100 % bootstrap, tanto en su parte pública (frontend) como en su parte de administración (backend).

¿Para que “leñes” me puede servir a mi Layoutit?

Bueno, para qué puede servirte no estoy convencido de poder decírtelo, ya sabes que últimamente no atino a atarme las cordoneras. Pero, si te parece bien, te cuento para que lo utilizo yo y así seguimos siendo amigos. ¿Vale?

Por cierto, antes de continuar, ¿ya te has dado cuenta? ¿Sabes cual es el juego?

Yo utilizo esta herramienta para crear plantillas de págiNas bonitas para usarlas dentro de webs que hago, bien sea con Joomla o bien con WordPress.

Si navegas por ahí, te darás cuenta de que la gente suele dedicar mucho esfuerzo a que su página principal se quede bonita pero, cuando accedes a cualquier sección, descubres que se han limitado a pegar un texto de Word.

Desde mi humilde opinión, esto es un error por la siguientes razones:

  • Las visitas no siempre llegan por la página principal. Incluso podríamos decir que casi siempre llegan a una interior. Entonces, si se da este caso, tu visitante no verá tu super y preciosa página principal y solo verá una página que apenas le inspira, pues es un texto pegado.
  • Aunque lleguen por la principal, buscan la secundaria. De esto también estoy convencido. Rara vez un visitante accederá a la página principal y sentirá que ha encontrado todo lo que necesitaba. Puede ser que no le guste y se vaya pero lo más normal es que ande buscando lo que le cuentas o expones en la página interior. Por tanto, debes cuidar muy bien la interior.

Para eso es parA lo que uso yo layoutit, para crear (aunque solo sea para pensarlo) páginas interiores con una estructura bonita y que venda.

Acabo pues, en plan filosóficoestiaraopedantelistilloquetodolosabe, con una frase: Toda página de tu web debe ser tratada como una página de aterrizaje.

¿Qué te parece? ¿Conocías Layoutit? ¿Crees que podría servirte? ¿Se te ocurre qué hacer con ella? ¿Sabes cómo se va a llamar mi peque? ¿Te gusta? A la primera en revelarlo … link de agradecimiento!!!!!

Un capazo de kises y hasta el próximo post!

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado. Alumno del Postgrado de Growth Hacking por IEBS.

Ahora es tu momento

*

29 comentarios

  • Lo de “dificultades para MASTICAR” en el minuto 13:31 es a propósito o ha caído ahí por casualidad? Jajaja!!! ;D

    Qué increíble cada vez que escribes para descubrirnos más y más opciones de poder crecer con el blog. Se me acumula la faena! Me ha encantado la simplicidad de esta herramienta. Habrá que “ponerse a jugar” algún día.

    Yo, a diferencia de José Javier, he leído “MARANA”, ¿puede ser?

    Besotes***

    • Jajajajajajajajajaja, me parto!!!!

      Pues no estaba hecho a posta, “MASTICAR”, jajajajajajaja.

      Por cierto, CAGOEN (esta vez en mayúsculas). Efectivamente se me colo la I. Pero vamos, que si es Marina!!! 🙂

  • Víctor, una advertencia de una errata: este enlace “Layoutit es una herramienta online”, está roto, no está bien escrito.

    Y, por cierto, cuando he leído lo de “layoutit”, he pensado… “otra palabra inventada por Víctor… ¿qué significará?”… pero no, esta vez es algo ya existente jejeje

    Saludos

  • Te leo, te leo y te leo; a ti y a algunos mas, y lo hago mas que nada a ver si se me pega algo de sabiduria, pero va a ser que asi no se pega, sniff
    En fin, a lo que iba: he probado layoutit para crear una landingpage para un amigo (lo que me enrollo) el caso es que no se instalarla
    Descargo todo el zip, pero no se donde poner cada cosa

    • Hola Rebeca! 🙂

      Bueno, una vez descargado el zip, si no quieres editar nada, solo tienes que subirlo por ftp al alojamiento que hayas contratado y asegurarte de que el archivo .html se llama index.html…

    • Jejeje
      Gran respuesta, investigaré su significado!
      Creo que esto aún me va grande, pero a base de leeros me enteraré de toooodo
      Gracias Victor

  • Otra idea que me apunto para probar y cuando lo haga te diré 1. que me parece y 2. si le encuentro más utilidades.

    Aunque eso sí no te aseguro que lo haga pronto, pues no se me ocurre dónde utilizarla en este momento… Puede ser la hora, luego seguro se me ocurrirá lago 🙂

  • Victor que gran post, de mucha utilidad una vez más quisiera hacerte una pregunta.
    con la herramienta.
    hay alguna manera de integrar en el cuerpo de un post en wordpress la estructura que generemos

    Intente copiar el codigo html en el modo de texto de un post, y subir a la carpeta de mi theme los archivos css obtenidos para complementar los actuales y demas, pero no obtuve ningún resultado.

    En caso de no poderse que plugin recomendarias.

    Mil gracias por tanta orientación,

    David, G

  • Victor, para sacarle el jugo a ‘layoutit’ es importante entender que es bootstrap. Mme atrevo a sugerirte , que le expliques a tus seguidores, mas o menos de que se trata y como se relaciona con layoutit. Muy divertido y didactico todo lo que escribes. Un abrazo y gracias

    • Hola Ignacio! Tienes mucha razón. De hecho, como quiero incluir bootstrap en mi plugin de WordPress, cuando lo publique explicare bien qué es Y para qué sirve.

      Gracias por tu comentario y ánimos!! 🙂

    • Jejejeje. Que buen ejemplo de comentarios para llevarse tráfico. ¡Muy bueno!

      Bueno, si no, pos lo siento por el atrevimiento… ¿Me perdonas?

      Yo creo que si quieres simplemente utilizar el truco de Layoutit te vale Joomla 3.0 que lleva incorporado bootstrap. En cualquier otro caso, prefiero WordPress.

      Saludos!

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies