Cómo codificar un sitio web desde cero (Guía para principiantes)

Cómo codificar un sitio de WordPress


¿Quieres codificar un sitio web desde cero? Por eso, puede sentirse intimidado por la idea de dominar tediosos lenguajes de codificación para diseñar un sitio que funcione tan bien como se ve..

Afortunadamente, WordPress ofrece mucha flexibilidad a cualquiera que quiera construir un sitio web que se vea genial, tenga características poderosas y no requiera conocimientos complejos de codificación..

Entonces, si desea codificar un sitio web desde cero, pero no es un experto en codificación, esta publicación es para usted. Porque después de leer este tutorial, sabrás cómo diseñar un sitio web como un profesional en menos de un día.

Y esta guía no solo le enseñará la forma más fácil de diseñar un sitio web, sino que también le ahorrará horas de tiempo, energía y dolores de cabeza..

Pero si todavía no está seguro de si es mejor codificar un sitio web desde cero o crear uno con WordPress, aquí hay algunos puntos que lo ayudarán a tomar su decisión.

En caso de que realmente codifique un sitio web?

Codificar un sitio web completo puede ser una tarea difícil para los principiantes. Aquí hay algunos problemas que enfrentan los nuevos codificadores cuando intentan crear un sitio web:

  • Aprender nuevos idiomas lleva mucho tiempo: Hay varios lenguajes de programación que puede necesitar aprender para construir su sitio web. HTML y CSS son dos conceptos básicos que no puedes ignorar. Y si desea opciones avanzadas, puede agregar más idiomas a su lista, como jQuery, JavaScript y PHP. Esto significa que necesita dominar varios idiomas para presentar su producto final. A menos que tenga muchos conocimientos de codificación en su haber, su sitio web podría tardar meses en construirse en lugar de días.
  • Encontrar los recursos correctos es complicado: Lo que es más desafiante es que Internet está cargado de información. Esto aumenta las posibilidades de que se confunda más al intentar aprender nuevos lenguajes de codificación. Esto lleva a algunos codificadores nuevos a inscribirse en cursos guiados, lo que puede ser costoso.
  • Planear problemas inesperados es imposible: Incluso si supera todos esos desafíos y finalmente crea un sitio web hermoso, podrían aparecer más desafíos con el tiempo. Por ejemplo, si desea agregar una barra lateral a su sitio o cambiar el fondo de su sitio para ciertas páginas, puede terminar perdiendo días de su tiempo aprendiendo la solución.

Con tantos obstáculos que superar, solo usted puede decidir si desea codificar un sitio desde cero o no. Si le gustan muchos creadores de sitios web, puede considerar otras opciones.

¿Cuál es una alternativa fácil??

La mejor respuesta es codificar un sitio web con un creador de sitios web de WordPress.

¿Qué es un creador de sitios web??

En WordPress, un creador de sitios web es un editor visual que le permite crear un sitio web utilizando su interfaz de arrastrar y soltar. Entonces, a diferencia de la codificación pura, tiene todos los elementos agregados al generador visual. Luego, simplemente arrastre y suelte los elementos que desea utilizar para crear su sitio. Lo mejor es que tiene una vista previa en tiempo real de su diseño mientras trabaja en él.

WordPress tiene varias excelentes opciones para elegir un buen creador de sitios web. Aquí hay algunos buenos creadores de páginas que puede consultar. Sin embargo, por el bien de este tutorial, utilizaremos Beaver Builder y el Creador de sitios web de Constant Contact para crear su sitio web..

Comencemos con Beaver Builder.

Método 1: codificar un sitio web con WordPress + Beaver Builder

Beaver-Builder-Personalizar-WordPress

Paso 1. Instalar y activar Beaver Builder

Para codificar un sitio web con Beaver Builder, primero debe instalar WordPress. Luego, desde su panel de WordPress, instale y active el complemento Beaver Builder. Una vez hecho esto, puede comenzar a usarlo para diseñar su sitio web.

Así es como funciona:

Volver a Páginas »Agregar nuevo en tu panel de WordPress. Ahora verá que el editor Gutenberg le ofrece la opción de iniciar el complemento Beaver Builder.

Beaver Builder

Haga clic en Lanzar Castor de constructores.

Esto lanzará el editor visual Beaver Builder, donde puede trabajar en su diseño. A su derecha, verá las opciones para agregar filas, módulos y plantillas. También tiene una pestaña llamada Salvado donde puedes ver todas tus plantillas guardadas previamente.

Beaver Builder, cómo codificar un sitio web

Paso 2: Seleccionar una plantilla para su sitio web

El siguiente paso es crear una plantilla para su diseño. Puede seleccionar una plantilla haciendo clic en el Plantillas pestaña a su derecha.

plantillas de generador de castores, cómo codificar un sitio web

Aquí verá que se muestran varias plantillas preconstruidas. También tendrá una opción de plantilla en blanco que puede usar para crear una apariencia más personalizada.

Además, Builder Beaver ofrece opciones separadas para sus páginas de destino. Al seleccionar una de estas plantillas preconstruidas, puede comenzar de inmediato. Solo se necesitan algunos ajustes para personalizar diferentes elementos como el texto, el logotipo, el lema, etc..

Paso 3: Agregar filas y módulos a su diseño

Este paso es esencial si desea construir su diseño desde cero. O también puede agregar filas y columnas a una plantilla preconstruida.

Para agregar filas a su diseño simplemente seleccione el Filas pestaña y seleccione el número de filas que desea agregar. Ahora arrastre sus filas y suéltelas a su izquierda. Puede hacer clic en cada una de estas pestañas para personalizar su apariencia.

Filas de diseño de Beaver Builder

Con estas opciones de personalización, puede mover fácilmente sus columnas, duplicarlas, ajustar el ancho de fila o trabajar en cada columna individualmente. Para editar sus columnas, haga clic en la columna donde desea realizar los cambios. Luego haga clic en el Editar columna icono para comenzar. Ahora verás el Configuraciones de columna opción.

Configuración de columna castor constructor

Aquí puede agregar texto, enlaces, colores de fondo, agregar bordes, animación y muchos otros elementos a sus columnas. Ahora que se agregaron las filas, es hora de agregar sus módulos.

Agregar módulos es tan simple como agregar sus filas. Solo ve al Módulos pestaña, arrastre el módulo que desee desde su derecha y suéltelo a su izquierda.

Agregar módulos al generador de castores

También puede personalizar cada uno de estos módulos. Por ejemplo, si desea trabajar en su encabezado, todo lo que necesita hacer es hacer clic en su módulo de encabezado. Verás aparecer una ventana emergente en tu pantalla con 3 pestañas diferentes.

  1. General
  2. Estilo
  3. Avanzado

En el General pestaña, puede editar su texto, agregar una etiqueta de encabezado, agregar enlaces, agregar una etiqueta “nofollow” o dejar que sus enlaces se abran en una nueva ventana si lo desea.

Personalizando tu rumbo

los Estilo pestaña le permite trabajar en el color, fuente, estilo & espaciado y más.

Beaver Builder personalización

Finalmente, está el Avanzado lengüeta. En esta pestaña, puede agregar espacios, personalizar la visibilidad, agregar animaciones, insertar elementos HTML y exportar o importar su diseño también.

Opciones de estilo de constructor de castor

Solo no olvides hacer clic en el Salvar botón si no quieres perder tu configuración.

Puede repetir el proceso con todos los módulos agregados a su sitio web para que pueda personalizar cada aspecto de su sitio web. También puede agregar barras laterales, tablas de precios y otros elementos a su página con Beaver Builder.

Entonces todo lo que queda es publicar su sitio.

Paso 4: Publica tu sitio web

Una vez que todo se ha agregado y personalizado correctamente, es hora de que usted Publicar Tú sitio. Para eso, verás el Publicar botón en la esquina superior derecha de la pantalla.

Publicación de diseño de generador de castor

¡Y eso es! Ahora ha creado un sitio personalizado con Beaver Builder que no requiere costosos cursos de codificación o largas noches de insomnio examinando foros de codificadores..

Hemos repasado los conceptos básicos de lo que puede hacer con Beaver Builder, pero es posible que le interese profundizar. Si es así, encontrará útil este artículo para crear un diseño personalizado con Beaver Builder.

Ahora que hemos cubierto nuestro primer método, veamos otro creador de sitios de WordPress que puede usar: Creador de sitios web de contacto constante.

Método 2: codificar un sitio web con Constant Contact Builder

El siguiente método es codificar su sitio web con el creador de sitios web de Constant Contact.

Constant Contact es un proveedor de servicios de marketing por correo electrónico que optimiza sus estrategias de marketing por correo electrónico..

Pero también ofrece un creador de sitios web que le permite crear sitios web profesionales para su negocio sin usar una sola línea de código. Veamos cómo usar este constructor para crear su sitio..

Para comenzar el proceso, vaya a la página oficial del creador del sitio web de Constant Contact y haga clic en el Crea tu sitio gratis pestaña en su pantalla.

Constructor de sitios web de contacto constante

Ahora estará en una nueva pantalla donde se le pedirá que asigne su sitio web a una categoría.

Constructor de contactos constantes

Cuando hayas hecho eso, estarás en el generador donde puedes comenzar a crear tu sitio web. A su izquierda, verá un campo para agregar el nombre de su sitio web. A su derecha, verá la vista real de cómo aparecerá su sitio web.

Constructor de sitios web de contacto constante

Si se desplaza hacia abajo, obtendrá una vista global del sitio. Puede agregar el nombre de su sitio web y hacer clic en el Seguir botón debajo de él. Entonces es hora de uno de los aspectos más importantes del diseño de su sitio: elegir una imagen de fondo.

Constant Contact mostrará algunas opciones de fotos de archivo que puede usar de forma gratuita según la categoría de su sitio. Si no desea usar una foto de archivo, puede usar el Subir botón para agregar una imagen propia.

Imagen de fondo de contacto constante

Una vez que seleccione su imagen de fondo, haga clic en el Seguir botón para ir al siguiente paso donde puede cargar su logotipo.

Haga clic en el área en blanco donde vea la opción para haz clic para subir tu imagen y sube tu logo desde tu escritorio.

Logotipo de Constant Contact Builder

Luego presiona el Seguir botón para ir al siguiente paso. Ahora puede elegir la combinación de colores de su sitio. Tiene varias opciones, todas comenzando con 2 temas: claro y oscuro. Puede elegir el que considere mejor para su sitio web y marca.

Colores de contacto constante

De nuevo, presiona el Seguir botón para ir al siguiente paso. A continuación, puede seleccionar su estilo de navegación y fuente. Una vez que estén seleccionados, puede actualizar sus datos de contacto en el siguiente paso.

Datos de contacto, demo de contacto constante

Ahora haga clic en el Terminar botón debajo de él. Verá una descripción general de su página de inicio, galería y otras páginas para confirmar que está satisfecho con el aspecto general. Si todo se ve bien, puede seguir adelante y presionar el Publicar botón en la esquina superior derecha de la pantalla.

Vista previa del sitio de contacto constante

Y eso es. Todo lo que queda es familiarizarse con la configuración del creador de sitios web de Constant Contact..

Configuración de Contact Contact Website Builder

Si necesita hacer algún cambio en su sitio, tiene muchas opciones simples para hacerlo. Usando las pestañas en la parte superior del editor del creador de sitios web, también puede cambiar su tema o trabajar en otras configuraciones.

Vista previa del sitio de contacto constante

Por ejemplo, si hace clic en el Configuraciones verá varias opciones para mejorar diferentes aspectos del rendimiento de su sitio

Configuración de contacto constante

Con estas opciones de configuración, puede cambiar su nombre y dominio, logotipo, favicon e incluso trabajar en el SEO de su sitio. También puede actualizar sus datos de contacto en el Mi negocio pestaña a su izquierda.

Si desea agregar sus enlaces sociales, haga clic en el Cuentas sociales lengüeta.

Contacto constante social

Esto le permite insertar los enlaces de su cuenta de redes sociales para que se muestren en el pie de página de su sitio. También puede realizar un seguimiento del rendimiento de su sitio web en el Rastreo & Analítica lengüeta. Todo lo que necesita hacer es agregar su ID de seguimiento de Google Analytics.

Aquí hay un artículo útil si aún no ha configurado su cuenta de Google Analytics.

Finalmente, bajo el Legal pestaña, puede agregar sus términos y servicios. También puede agregar HTML personalizado con el Inyección HTML pestaña, pero esto es menos importante para los creadores de sitios principiantes.

¡Y ahí lo tienes! Ahora ve lo fácil que es crear un sitio web personalizado con un creador de sitios web. Lo mejor es que no implica escribir o aprender ningún código.

El uso de un creador de sitios le permite obtener el mismo resultado en una fracción del tiempo..

¿No te convence Beaver Builder o el creador de sitios web de Constant Contact? No te preocupes Tenemos más sugerencias de creadores de sitios web para usted que pueden simplificar el proceso de diseño de su sitio web..

Pero si aún decide codificar su sitio desde cero pero no sabe cómo comenzar, también tenemos la solución para eso. Poner a prueba o probar Codecademy. Es el mejor punto de partida para cualquiera que tenga tiempo y quiera aprender a programar con un curso guiado paso a paso..

Una vez que haya terminado de aprender a codificar, y esté listo para construir su primer sitio web, deberá elegir un nombre de dominio y elegir un buen alojamiento web donde pueda alojar su sitio.

Gracias por leer y esperamos que hayas disfrutado este artículo. Si lo hiciste, ¿por qué no compartirlo con un amigo??

¿Y tiene alguna sugerencia interesante para trabajar con los creadores de sitios??

Háganos saber en la sección de comentarios. Nos encanta saber de nuestros lectores comprometidos!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map