Tutorial: Crear Landing pages personalizadas sin programar y desde 0

  • Autor Autor AnT12
  • Fecha de inicio Fecha de inicio
AnT12

AnT12

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Hola gente, en este tutorial les enseñare a crear landing pages de calidad sin saber absolutamente nada de programación :couple_inlove:

(el tutorial es 100% mio y si quieres copiarlo en otro lugar al menos mándame un privado pidiendo el permiso)

Lo único es que tienes que tener un programa, que es Adobe Muse, puedes descargarlo gratis ( mientras se pueda ) ya sea el portable o el completo 😉, si deseas me puedes mandar un MP y te paso el link donde yo lo descargue y me funciono al 100%.

Bueno ya que hayas descargado el programa, procederemos a crear nuestra landing 😱nthego:

Al iniciar el programa se nos abrirá una ventana y tendremos que dar clic en "Crear nuevo sitio" Despues se nos abrirá otra ventana 😕 donde configuraremos el ancho y altura de nuestra landing, la altura no importa ya que se desplegara automáticamente cuando vayamos necesitando nuevo espacio.

fdNnt7j.png


Yo te recomendaría dejarlo como esta, luego damos en "ok", después damos nos vamos a inicio donde sale una miniatura de nuestra pagina.

Luego veremos nuestra pagina sin ninguna edición, en blanco:

hbF1U4r.png

Ahora si, que empiece la edición 😱nthego:

Primero tenemos que crear la cabecera, tienen que hacerla un poco mas grande solo tienen que arrastra un flecha o como se llame hacía abajo

kUzPfqD.png

Luego creamos un cuadro y desplegamos hasta abarcar todo el espacio

UhSuu5D.png

puedes elegir el color del cuadro con solo pulsar "relleno"

p3fVkXW.png

Ahora solo nos falta poner una imagen en la cabecera, para eso tecleamos Ctrl+D y seleccionamos nuestra imagen, y asi ya tendremos nuestra cabecera lista

6wSj1dA.png

Luego editamos el color de fondo, solo clickeamos en "Relleno del navegador" y elegimos el color

3zyWzHJ.png

Ahora donde dice trazo

ZTwQ67C.png


Pasaremos a escribir un texto, podemos cambiar el color, tamaño y la fuente también

7oBlDUR.png

Añadimos otro texto mas abajo

CH8Cp8x.png


Mas abajo de eso puedes añadir una imagen, vídeo, para añadir un vídeo tendremos que ir a añadir objeto ---> insertar html e insertar el código del vídeo

9raH9jX.png


NHs3zIZ.png


Ahora solo pasamos a crear el texto de descarga, sigue los pasos anteriores el de crear un texto e insertar una imagen y les quedara algo así

EQnMtrP.png


para añadir un link a una imagen, solo sigue la siguiente imagen xD

Wk1h7MG.png


ya tendremos todo listo, solo faltar el footer, solo tienes que crear un nuevo cuadro y seguir los mismos pasos que dije en el de la cabecera
YDnzjNH.png


Ahora exportaremos nuestra landing, seleccionamos "Exportar como HTML"

FUKeOSw.png

TGZS4iP.png


listo!! ya tendremos nuestra landing page, solo tendremos que subirla a nuestro hosting :encouragement: si no tienen hosting mañana actualizo el post para enseñarles como pasar nuestras landings a blogger :drunk: claro solo si miro el apoyo que me den con un "me agrada" en este tutorial :encouragement:

DEMO:

nwTXmil.png

wyQIwed.png


DEMO ONLINE: ENLACE

Claro que ustedes pueden hacerlas mucho mejor, solo es cuestión de creatividad y aprender a usar el programa 😉

kiUad88.png

 
Última edición:
Con esta demostración puedes dar malas ideas ajajaja pero está bien realizado tu sitio, gracias por compartir el tutorial hacia los demás.
 
Jaja muy chula la plantilla que hiciste, descargare el programa adobe muse y me pondre hacer plantilla para cpa
 
Está buena, ya le haz quitado el trabajo a algunos users del foro :fatigue::devilish:
 
Muy buen tutorial, espero que subas el otro de como pasar nuestras landings a blogger...
 
Realmente el programa esta muy bueno yo tengo el adobe muse cc, pero aun así es bueno aprender a programar xD
 
Vaya no sabía eso, buen tuto y desde luego tienes mi agrada :topsy_turvy:
Espero el tuto para pasar a blogger 😉
 
muy buena info, uno mas en la lista para aprender a crear nuestras propias landings. Se agradece :encouragement:
 
Excelente gracias por compartir :encouragement:
 
Un tuto para ponerlo en practica, muchas gracias 😛8:
 
Excelente tutorial amigo, pronto lo pondre en practica:encouragement:
 
Muy pero muy bueno, ya descargue el Muse CC Portable...Gracias por este programa y lo bueno que hace 😛8:
 
[MENTION=109289]AnT12[/MENTION] puedes pasarme el Link del programa por MP.

Gracias de antemano 🙂
 
me podrias pasar el link del programa? gracias 🙂
 
Que programa para Linux se podria usar
 
Muchas gracias para lo que no entendemos ni what de programacion es muy util , como pasarlo a blogger seria muy util tambien 😛7:
 
Up! para quienes no lo han visto 😛7:
 

Temas similares

Atrás
Arriba