Cómo hacer un sitio web comercial con WordPress y Elementor

Aprenda a crear un sitio web para su empresa con WordPress, Elementor y Astra. Estas son todas las herramientas 100% gratuitas que yo personalmente uso.


En este tutorial sobre cómo hacer un sitio web 2019, le mostraré más que solo cómo crear un sitio web, también le enseñaré cómo optimizar SEO su sitio web y cómo generar clientes potenciales a partir de él.

Este tutorial es completo, mi más largo tutorial sobre cómo construir un sitio web. Espero que lo disfruten.

Cosas que necesitas:

  • Hospedaje. Recomiendo SiteGround.
  • UNA nombre de dominio.
  • Tema de WordPress. Para este tutorial, usamos el tema gratuito de Astra.
  • WordPress Page Builder. Para esto, utilizamos el creador de páginas gratuito Elementor.

Empecemos!

Paso 1: Compre un alojamiento web y un nombre de dominio.

La parte más importante del sitio web de su empresa es el hosting. El alojamiento determinará qué tan rápido se carga su sitio web, lo cual es un factor muy importante que afecta la generación y conversión de leads. Google también prefiere sitios web más rápidos con bajas tasas de rebote, por lo que un sitio web más rápido aumenta sus posibilidades de posicionarse en Google.

Una cosa que me gustaría señalar es evitar las empresas EIG y GoDaddy tanto como sea posible. EIG significa Endurance International Group y controla más de 60 empresas de hosting. Despide a su personal de soporte interno y consolida todo bajo un mismo paraguas. Lo que sucede es que la atención al cliente, la calidad del alojamiento y la calidad general del servicio sufren.

Estas son algunas de las conocidas empresas de EIG:

  • Hostgator
  • BlueHost
  • iPage
  • Arvixe
  • Vaca gorda
  • HostMonster Small Orange

GoDaddy también tiene muchas críticas negativas sobre la calidad y el servicio al cliente, y los sitios web que alojan se cargan muy lentamente.

También querrá evitar los hosts “mamá y pop” porque carecen de los recursos para usar tecnologías de alojamiento avanzadas que le darán una ventaja a su sitio web.

También desea elegir un alojamiento que proporcione certificados SSL gratuitos. Sin un certificado SSL, su sitio web tendrá esta fea etiqueta de “No seguro” en la parte superior:

no es seguro

Si es un negocio, prácticamente puede decir adiós a clientes potenciales con esa etiqueta. Si su alojamiento no proporciona certificados SSL de forma gratuita, un certificado SSL puede costarle $ 50- $ 100 por año por sitio web.

También desea un servicio que le permita actualizar a algo llamado PHP7, lo que hará que su sitio web sea mucho más rápido.

Siteground, mi servicio de alojamiento web preferido

Un servicio de alojamiento que encontré que satisface todos estos criterios es SiteGround. SiteGround ofrece un certificado SSL gratuito, le permite actualizar a PHP7, tiene un alojamiento de calidad y una increíble atención al cliente. Realmente es lo mejor que hay.

Estas son las características clave de SiteGround:

  • Certificado SSL gratuito
  • Soporte informado rápido
  • Entorno de ensayo de WordPress
  • Migraciones gratuitas de sitios web
  • 30 días de copias de seguridad

Hice un trato increíble con ellos para dar un 70% de descuento a cualquiera que se registre usando este enlace. Entonces, si quieres ahorrar dinero en tu hosting, haga clic en este enlace y compra tu hosting ahora.

Para comprar su alojamiento de SiteGround, haga clic en este enlace. Una vez que llegue a su página de inicio, verá cuatro tipos diferentes de alojamiento:

elegir un plan de sitio

Elija el alojamiento de WordPress y haga clic Empezar. Luego verá tres planes de precios:

precios de alojamiento de wordpress en el sitio

Elija uno de acuerdo a sus necesidades y presupuesto. También puedes ver sus comparación de cada plan de alojamiento para poder decidir cuál se adapta a las necesidades de su negocio.

Una vez que haya elegido un plan, haga clic en Obtener plan. Luego pasará al siguiente paso que es elegir un dominio. Si ya tiene un nombre de dominio, seleccione “Ya tengo un dominio”. Pero si no tiene uno, seleccione “Registrar un nuevo dominio” para que pueda comprar un dominio directamente dentro de SiteGround. Esto cuesta $ 15.95 por año.

elige un dominio

Tenga en cuenta que si el nombre de dominio que desea comprar ya no está disponible, SiteGround se lo informará y tendrá que elegir otro. Una vez que tenga un nombre de dominio, haga clic en Continuar.

El siguiente paso para completar su compra es proporcionar sus datos personales y de facturación precisos. Una vez hecho eso, haga clic en Pagar ahora. Ahora tiene un alojamiento web confiable y un nombre de dominio.

Paso 2: instala WordPress.

WordPress es la herramienta de creación de sitios web que usaremos para crear el sitio web de su empresa. Es completamente gratuito, muy fácil de usar, pero muy potente. Viene con miles de complementos y temas que te permitirán hacer lo que quieras con tu sitio web.

SiteGround en realidad viene con una instalación de WordPress con un solo clic que instalará rápidamente WordPress por usted.

Una vez que haya completado su compra de alojamiento, verá una pantalla con un enlace que dice “Proceda al área del cliente”. Haga clic en eso y se lo dirigirá a una página donde puede configurar su nueva cuenta de alojamiento. Debajo Configura tu sitio web, Seleccione Comience un nuevo sitio web.

Luego verá una lista de software que puede instalar. Seleccione WordPress.

instalar wordpress

Para completar el proceso, deberá proporcionar los detalles de inicio de sesión de administrador (dirección de correo electrónico, nombre de usuario y contraseña) para su sitio web. Estos son los detalles que usará para acceder al backend de su sitio web, así que asegúrese de mantenerlos seguros.

Una vez hecho eso, haga clic en Confirmar > Configuración completa. Y ahora tienes un sitio web de WordPress en vivo y autohospedado.

Paso 3: instalar el certificado SSL.

Antes de hacer cualquier otra cosa, quiero mostrarle primero cómo instalar un Certificado SSL para deshacerse de la etiqueta No seguro que le mostré antes. Debajo Mis cuentas, hacer clic Ve al cPanel.

ir a cpanel

CPanel es donde puede instalar diferentes software y herramientas para su sitio web. Si se desplaza hacia abajo, debería ver una sección llamada Seguridad. En esta sección, haga clic en Encriptemos.

vamos a encriptar

Seleccione el dominio en el que desea instalar el certificado SSL, seleccione Encriptemos SSL, y haga clic Instalar en pc.

Ahora es el momento de iniciar sesión en su nuevo sitio web. Hacer clic Mis cuentas de nuevo en la parte superior y haga clic en el Instalaciones lengüeta. Aquí verá el nombre de dominio que registró. Al otro lado hay un verde Ir al portal de administración botón. Haga clic en este botón para ir a su página de inicio de sesión de WordPress.

ir al panel de administración de WordPress

Las páginas de inicio de sesión de WordPress suelen seguir estos formatos: yourdomain.com/wp-admin y yourdomain.com/wp-login. El tuyo puede ser diferente. Pero debe recordar o anotar la URL de su página de inicio de sesión para que la próxima vez pueda acceder ingresando directamente la URL en su barra de direcciones y sin tener que iniciar sesión en Siteground..

La página de inicio de sesión de WordPress tiene este aspecto:

página de inicio de sesión de WordPress

Ingrese su nombre de usuario y contraseña aquí para iniciar sesión en su sitio web por primera vez.

Una vez dentro, lo primero que debe hacer es decirle a WordPress que tiene un Certificado SSL. Esto es bastante simple de hacer.

En la barra lateral izquierda, vaya a Configuraciones > General. En la pantalla, verá dos cuadros con su nombre de dominio: Dirección de WordPress (URL) y Dirección del sitio (URL). Debe escribir la letra “s” después de “http” y antes de los dos puntos “:” para ambos cuadros.

Agregar certificado SSL en WordPress

Una vez que haya terminado, haga clic en Guardar cambios. Su sitio web ahora debe tener un icono de candado justo al lado del nombre de dominio:

sitio web seguro con https

Ahora, lo último que debemos hacer para el Certificado SSL es asegurarnos de que las personas que escriben “http” en su dirección sean redirigidas a su URL “https”. Necesitamos un complemento para hacer eso.

Para instalar un complemento, vaya a Complementos > Añadir nuevo. En la barra de búsqueda en la parte superior derecha, busque el complemento SSL realmente simple. Instalarlo y activarlo.

instalar ssl realmente simple

Luego verá este mensaje emergente en su tablero:

activar ssl realmente simple

Haga clic en el azul Adelante, active SSL! botón. Se cerrará la sesión y, una vez que vuelva a iniciar sesión, el complemento SSL realmente simple estará en pleno efecto..

Paso 4: Instale el tema Astra y los sitios Astra.

Para un sitio web de negocios, desea un tema que tenga un código limpio y características flexibles para que la personalización sea lo más fácil y rápida posible. Hay muchos temas de WordPress de calidad, pero el tema que vamos a utilizar aquí es Astra Theme.

Astra Theme es un tema gratuito de WordPress que tiene excelente velocidad y simplicidad. Lo que más me gusta es que se configura en función de las herramientas que necesita, y esto hace que las cosas sean más fáciles para usted. También hay una versión Pro si desea acceder a funciones premium.

tema astra

Estas son las características que más me gustan de Astra:

  • Uno de los temas más rápidos disponibles
  • Más de 100 sitios de inicio (la mayoría son 100% gratuitos)
  • Función de menú mega flexible
  • Potente paquete de complementos
  • Amplio soporte de WooCommerce

Para instalar Astra, vaya a Apariencia > Tema > Añadir nuevo. Busque Astra, haga clic Instalar en pc, y Activar.

instalando astra

Otra cosa increíble sobre Astra es el hecho de que tiene un complemento llamado Sitios de inicio de Astra. Este complemento tiene una biblioteca de plantillas gratuitas y premium preconstruidas que puede usar en su propio sitio web con solo unos pocos clics. Utilizaremos una plantilla de sitio de Astra para reducir el tiempo de creación de nuestro sitio web a la mitad.

Después de instalar Astra, verá este mensaje en su tablero:

empezar con el sitio astra

Hacer clic Empezar. Esto instalará los sitios de inicio de Astra para usted. También puede instalar Astra Sites yendo a Complementos > Añadir nuevo. Buscar Sitios Astra e instalarlo y activarlo. Para acceder a los sitios de Astra, vaya a Apariciones >Sitios de inicio de Astra.

Elegir tu generador de páginas

Después de instalar Astra Sites, se le preguntará qué creador de páginas prefiere: Gutenberg, Elementor, Beaver Builder o Brizy. En este tutorial, voy a usar Elementor.

Elementor es un creador de páginas de WordPress que llevó la construcción de páginas a un nuevo nivel. Tiene un conjunto de características profundas, pero es muy fácil de usar y dominar. La versión gratuita es suficiente para crear una página web decente, pero si desea funciones más avanzadas como poder agregar formularios de contacto, controles deslizantes, tablas de precios y más, puede actualizar a la versión Pro.

Elección del tema de su sitio Astra

Una vez que haya elegido su creador de páginas, se lo dirigirá a la biblioteca de plantillas de Sitios Astra. Hay toneladas de plantillas elegantes y de aspecto profesional, tanto gratuitas como premium, entre las que puede elegir. Las plantillas están organizadas por las siguientes categorías: Blog, Negocios, Comercio electrónico, Gratis y Otros. Dado que está creando un sitio web comercial, es mejor navegar en Negocio sección.

Tómese su tiempo para elegir qué plantilla cree que se alineará más estrechamente con su marca. Estas plantillas son totalmente editables con el generador de páginas que elija, lo que significa que puede cambiar fácilmente el texto, las imágenes, el diseño, los botones y, básicamente, todo en la página..

Para este tutorial, voy a usar el Contador plantilla porque se ve increíble y fácil en los ojos.

Para instalar un tema, solo tiene que hacer clic en él para acceder a la vista previa. Si te gusta lo que ves, haz clic en Importar tema botón y asegúrese de que todas las casillas estén marcadas.

cajas de tema de sitios astra

Si te das cuenta, hay un cuadro que dice “Instalar complementos necesarios”. Al marcar esta casilla, se instalarán todos los complementos necesarios para que el tema se vea exactamente como está. Para este tema, instaló WPForms Lite, un complemento que le permite crear formularios de contacto simples, y Elementor, el generador de páginas que usaré. Puede hacer clic en el pequeño signo de interrogación al lado para ver qué complementos se instalarán.

WPForms es un complemento que puede ayudarlo a obtener clientes potenciales de calidad para su negocio a través de formularios efectivos. Puede consultar mi revisión de WPForms para obtener más información al respecto. Si desea utilizar un complemento de formularios diferente, puede desactivar / eliminar WPForms en Complementos > Complementos instalados e instale su generador de formularios preferido.

instalar el tema del sitio astra

Importar el tema puede llevar un tiempo. No cierre su navegador ni presione Actualizar. Espera, y cuando termine, verás un azul Ver sitio botón. Haga clic en ese botón para acceder a su sitio web que ahora tiene el tema que acaba de importar.

Paso 5. Elegir elementos de diseño.

Su sitio web ahora se ve impresionante, pero querrá personalizarlo. Para hacer eso, necesita su propia combinación de colores, tipografía y logotipo..

Comencemos con su paleta de colores. Si ya tienes el color de tu marca, será más fácil.

Elegir una paleta de colores

Un sitio web normalmente tiene un conjunto de 2-3 colores: el primario, el acento y el color pop. los color primario es el color dominante de su sitio web y probablemente el color de su marca. Este es el color con el que quieres que las personas recuerden tu marca.

Al elegir su color primario, debe investigar la psicología del color o cómo los colores afectan la percepción o el comportamiento de las personas. Ciertos colores hacen que las personas sientan algo, p. el rojo los hace sentir aprensivos, por lo que debe considerar estas cosas al elegir su color primario.

los acentuar el color generalmente se usa para hacer que ciertos elementos se destaquen del resto, como encabezados o títulos de publicaciones.

Por último, el color pop contrasta con el resto de los colores para resaltar elementos importantes del sitio web, como botones de llamada a la acción o formularios de generación de leads.

Hay dos herramientas que me gusta usar para elegir una paleta de colores. El primero es Coolors.co, un sitio web donde puede navegar por diferentes paletas de colores para obtener ideas o inspiración. Si ve algo que le gusta, puede copiar rápidamente el código hexadecimal para usarlo en WordPress.

Si haces clic Explorar en el encabezado, verá esta vasta colección de paletas:

paletas de colores coolors

Si ve una paleta que le gusta, pase el mouse sobre ella, haga clic Ver, y será llevado a una nueva ventana donde verá los códigos hexadecimales de cada color.

códigos hexadecimales de paletas de colores

Estos códigos hexadecimales son lo que necesita para usar estos colores en su sitio web. Más adelante les mostraré cómo usar estos códigos hexadecimales en el backend de WordPress.

Otra herramienta genial es Colorzilla. Esta es una extensión de Google Chrome que le permite obtener el código hexadecimal de cualquier color que vea en cualquier sitio web simplemente haciendo clic en él.

Si quieres obtener la extensión Colorzilla, haga clic aquí. Luego haga clic Añadir a Chrome.

colorzilla

Luego verá este icono en su barra de herramientas:

icono de colorzilla

Ahora, si desea conocer el código hexadecimal de un color que vio en un sitio web, simplemente haga clic en este icono y luego haga clic en el color que desea copiar. El código hexadecimal se copiará automáticamente. Puede pegar este código hexadecimal en áreas específicas en WordPress.

Personalizar tipografía

También desea utilizar su propia tipografía que coincida con la identidad de su marca y ayude a que su sitio web se destaque. Los sitios web normalmente tienen 2-3 fuentes. Al igual que con los colores, tendrás un fuente primaria que son fuentes para titulares o menú. También necesitas un fuente del cuerpo para párrafos de textos y también un extra “fuente pop“Para ayudar a que algunos textos se destaquen.

Al igual que los colores, necesita una tipografía que se mantenga fiel a su marca, se vea agradable a la vista y envíe el mensaje correcto sobre su marca..

Una de mis herramientas favoritas al elegir la tipografía es Fontpair.co. Este es un sitio web que muestra cómo se ven juntas dos fuentes diferentes.

fontpair.co

Si ve algo que le gusta, tenga en cuenta cómo se llama para que pueda buscarlo dentro de WordPress y usarlo en su sitio web.

También me gusta usar WhatFont, una extensión de Google Chrome que te dice qué fuente se usa en cualquier sitio web simplemente pasando el mouse sobre ella.

Para instalar WhatFont, haga clic aquí luego haga clic Añadir a Chrome. Luego verá este icono en su barra de herramientas:

whatfont

Para conocer el nombre de una fuente, haga clic en este icono y desplace el mouse sobre el texto. WhatFont le dirá el nombre de esta fuente, y si hace clic en ella, también verá el tamaño, color, familia, estilo, peso y más de la fuente.

usando whatfont

Conseguir un logotipo

Por último, su negocio necesita un hermoso logotipo que hable de lo que se trata su marca. Puedes ir con tres rutas diferentes aquí. Puede crear su logotipo usted mismo utilizando una herramienta gratuita llamada Canva, Una herramienta de diseño popular que hace que el diseño sea realmente fácil incluso para principiantes.

Te sorprenderá la cantidad de plantillas de logotipos que tiene Canva, y todas se ven increíbles. Puede modificar estas plantillas para hacerlas suyas..

Sin embargo, debe saber que necesita actualizar a Pro si desea exportar el logotipo con un fondo transparente. Sin embargo, hay una prueba gratuita de un mes, así que lo que puede hacer es actualizar a Pro, exportar su logotipo transparente y cancelar antes de que finalice la prueba.

logotipos de canva

También puede contratar a un diseñador de logotipos para que lo haga por usted. Puede probar sitios web como Fiverr.com o 99design, pero debe tener cuidado al elegir un artista en función de su estilo, historial, reseñas, calificaciones y más.

La tercera ruta, y probablemente una buena idea si desea un logotipo de marca fuerte, es contratar a un estratega / consultor de diseño. Las personas como estas son profesionales que se toman el tiempo para comprender de qué se trata su marca, a dónde va su negocio y cuáles son sus valores fundamentales para poder incorporar eso en el logotipo.

Paso 6. Personaliza tu sitio web.

Una vez que tenga una paleta de colores, fuentes y logotipo para su sitio web, ahora es el momento de usarlos en su sitio web. Si estás en el panel de back-end de WordPress, ve a Apariencia > Personalizar para abrir el personalizador de temas.

tema personalizado

También puede ir aquí si está en la interfaz de su sitio web. Debe haber una barra negra en la parte superior de la pantalla, que solo sea visible para aquellos que hayan iniciado sesión en su sitio web. Hacer clic Personalizar para abrir el personalizador de temas.

personalizar la interfaz del tema

Una vez que esté dentro del personalizador de temas, podrá agregar su logotipo, cambiar colores, cambiar el diseño del sitio y mucho más..

personalizador de temas

En la barra lateral izquierda, verá varias opciones para modificar su sitio web. Cada tema tiene diferentes opciones de personalización, por lo que si usa un tema diferente, lo que ve aquí podría ser un poco diferente al mío. Todos los cambios que realice aquí se muestran en tiempo real en su sitio web.

En este tema, para cambiar los colores de su sitio, vaya a Colores y fondo. Tendrá la opción de cambiar los colores base, la ruta de exploración, el encabezado y la barra de pie de página.

editor de fondo de color

Los colores base son el color del tema, el color del enlace, el color del texto y el color de desplazamiento del enlace de su sitio web. Para cambiar los colores base, haga clic en Colores base. Dentro, verás botones que dicen Seleccionar el color. Haga clic en estos botones para cambiar un color específico..

Por ejemplo, para cambiar el Color del tema, haga clic en Seleccionar el color junto a ello. Luego verá dos formas de seleccionar un color. Primero, puede pegar un código hexadecimal en un cuadro. Si recuerda lo que hablamos sobre los códigos hexadecimales en el paso anterior, es en campos como estos donde puede ingresar esos códigos hexadecimales.

Entonces, si encontró un color en Coolors.co o en cualquier otro lugar, puede pegar el código Hex aquí. También puede seleccionar un color en una herramienta de selección de color incorporada..

editor de color base

Lo siguiente es cambiar tu tipografía. Vuelva al personalizador haciendo clic en la flecha hacia atrás en la parte superior de la barra lateral y haga clic en Tipografía. Podrá cambiar la base, la ruta de exploración, el contenido y la tipografía del blog..

tipografía

Por último, para cargar su logotipo, vaya a Diseño > Encabezamiento > Identidad del sitio. En la sección Logotipo, haga clic en el Cambiar logo abotone y cargue su logotipo.

cambiar logo

Astra también le permite usar un logotipo diferente para retina o dispositivos de alta resolución, así como para dispositivos móviles. También puede ajustar el ancho del logotipo. Si se desplaza hacia abajo, también podrá cambiar el título de su sitio, agregar un eslogan del sitio y un ícono o favicon del sitio.

Le sugiero que explore el personalizador de temas para ver las diferentes cosas que puede hacer aquí. Astra Theme le permite hacer más cosas como cambiar el diseño de su encabezado y pie de página, cambiar la estructura de las publicaciones de blog, cambiar el ancho de su sitio y mucho más.

Una vez que haya terminado de personalizar, no olvide hacer clic Publicar para que sus cambios se publiquen en su sitio.

Paso 7. Personalizando su sitio web con Elementor.

Ahora que los colores, la tipografía y el logotipo de su sitio web están configurados, es hora de saltar a Elementor y cambiar por completo la apariencia del sitio web para que coincida con su marca. Vamos a cambiar las imágenes, textos, botones, diseño y mucho más..

Hay dos formas de editar una página con Elementor. Primero, si estás en el backend, ve a Páginas y debería ver una lista de todas las páginas de su sitio web. Esto incluye las páginas que Astra Site creó automáticamente. Las páginas que se hicieron con un generador de páginas específico (por ejemplo, Elementor) se etiquetarán como tales:

paginas

Pase el mouse sobre la página que desea editar con Elementor y haga clic Editar con Elementor.

editar con elemento o backend

Eso te llevará dentro de Elementor.

Si está en la interfaz de su sitio web, puede ingresar a Elementor yendo a la página que desea editar y hacer clic Editar con Elementor en la barra negra en la parte superior:

editar con elemento o frontend

La interfaz de Elementor es simple de entender y acostumbrarse porque es bastante similar al personalizador de temas. La mayoría de la pantalla muestra la página que está editando, mientras que a la izquierda hay una barra lateral con los controles y las opciones..

elementor

Si se dio cuenta, el encabezado no se puede ver dentro de Elementor. La razón es que la versión gratuita de Elementor no puede editar encabezados y pies de página. Esta función solo está disponible para Elementor Pro.

La barra lateral izquierda es donde puede encontrar el elementos que puedes agregar a tu página. Como puede ver, puede agregar un encabezado, imagen, video, botón, divisor y más. Puede agregar estos elementos arrastrándolos y soltándolos en el área deseada.

Elementor también permite la edición de texto en línea, lo que significa que puede cambiar el texto en el área de contenido. Estas son algunas de las cosas que puede hacer con textos dentro de Elementor:

editar texto en elementor

Como puede ver, puede editar o eliminar el texto directamente en el área de contenido, lo que lo hace mucho más fácil. Encontrará más opciones de personalización en la barra lateral, como cambiar el tamaño, el color, el peso, la familia de la tipografía y la sombra. También puede agregar animaciones como desvanecimientos simples, zoom, rebote y más.

También querrás usar tus propias imágenes para hacer que este sitio web sea completamente tuyo. Puede reemplazar o eliminar fácilmente una imagen si eso es lo que desea. Para personalizar una imagen, simplemente haga clic en ella y las opciones aparecerán en la barra lateral izquierda. Puede cargar una nueva imagen, cambiar su tamaño, agregar un borde o sombra, agregar una animación y más.

edición de imagen en elementor

Para mi sitio web, quiero eliminar esta imagen por completo y simplemente usar una imagen de fondo diferente. Para eliminar una imagen, pase el mouse sobre ella y haga clic con el botón derecho icono de bolígrafo azul en la esquina superior derecha Aparecerá un menú emergente. Hacer clic Eliminar para eliminar la imagen.

borrando una imagen en elementor

Para personalizar el encabezado, coloca el mouse sobre él y haz clic en el ícono punteado en la parte superior:

Personalizar encabezado en elementor

Las opciones de personalización para el encabezado aparecerán en la barra lateral izquierda. Para cambiar la imagen de fondo de su encabezado, haga clic en Estilo E ir a Antecedentes. Aquí es donde puedes subir un nuevo fondo.

personalizar el encabezado

Como puede ver, después de cargar la imagen, ajusté la superposición de fondo para asegurarme de que la imagen se vea claramente. Hice esto yendo a Superposición de fondo y ajustando la opacidad.

También ajusté el color del texto para asegurarme de que se puede ver, y ajusté el ancho del texto para que no se superponga con la imagen. Hice esto yendo a Avanzado > Posicionamiento personalizado y seleccionando Personalizado para el ancho.

Crear una página web impresionante es muy fácil con Elementor. Hay tantas opciones disponibles, por lo que es solo una cuestión de explorar cada rincón y grieta. Puede explorarlo a su propio ritmo, y si hay algo que no entiende, puede comunicarse conmigo a través de la sección de comentarios a continuación o incluso buscar en el completo de Elementor base de conocimientos.

También tengo un tutorial de Elementor donde te muestro cómo comenzar a usar Elementor rápidamente. Puedes verlo aquí.

Paso 8. Asegure su sitio web.

También es crucial que un sitio web de negocios esté lo más seguro posible frente a posibles esquemas de piratería y robo de identidad. El hecho es que algunos de ustedes podrían ser vulnerables a los ataques cibernéticos debido a contraseñas débiles, vulnerabilidades de complementos y software obsoleto. Estas cosas dejan un agujero en su sitio web, y necesita encontrar una manera de bloquear estos agujeros.

El mejor complemento de WordPress que he encontrado hasta ahora que hace esto es iThemes Security. La versión gratuita de este complemento ya le ofrece características de seguridad sólidas, y puede activarlo con solo un clic.

Para instalar iThemes Security, dirígete a Complementos > Añadir nuevo luego busque iThemes Security.

instalar ithemes

Una vez que esté activado, verá una nueva opción en la barra lateral llamada Seguridad. Ir Seguridad > Configuraciones y debería ver un mensaje sobre las diferentes funciones que iThemes puede hacer por usted.

sitio seguro ithemes

Habilitar todas estas funciones requiere solo un clic en el azul Sitio seguro botón. Una vez que haga clic en ese botón, verá este mensaje:

activar la protección de la fuerza bruta de la red

La Protección de la fuerza bruta de la red es una función en la que los usuarios que intentaron ingresar a otros sitios que son miembros de esta red tienen prohibido ingresar automáticamente al suyo. Esta es una característica bastante buena que solo iThemes tiene, así que para activarla solo proporcione su dirección de correo electrónico y haga clic Activar la protección de la fuerza bruta de la red.

Con solo unos pocos clics, su sitio web ahora es seguro. Puede hacer mucho más con este complemento, y si desea obtener más información al respecto, puede ver mi revisión de iThemes Security y el tutorial de configuración aquí.

Paso 9. Haz una copia de seguridad de tu sitio web.

También debe hacer una copia de seguridad de su sitio web para salvarse del posible evento desafortunado de perder cualquiera de sus datos. Para esto, vamos a usar UpdraftPlus Backup.

Para instalar este complemento, vaya a Complementos > Añadir nuevo y buscar UpdraftPlus Backup. Instalarlo y activarlo.

instalar updraftplus

Una vez que se active, creará una nueva opción en Configuraciones llamado UpdraftPlus Backups. Haga clic en él para comenzar a configurar sus ajustes de respaldo.

updraftplus copias de seguridad en la configuración

Una vez dentro, haz clic en Configuraciones. Aquí, lo configuraremos para que se realicen regularmente copias de seguridad automáticas fuera del sitio. Para el Programa de copia de seguridad de archivos, Recomiendo configurarlo en semanal y reteniendo uno apoyo. Los archivos no cambian a menudo, así que eso es lo suficientemente bueno.

En cuanto a Programa de respaldo de la base de datos, como esto cambia a menudo, configúrelo en diario y retener 7 copias de seguridad.

Una vez que haya establecido los horarios, desplácese hacia abajo y presione Guardar cambios. Luego, retroceda nuevamente para elegir dónde desea almacenar sus copias de seguridad. Por lo general, recomiendo Dropbox porque es muy fácil de usar, pero puedes usar todo lo que quieras.

configurar copias de seguridad de updraftplus

Haga clic en su almacenamiento remoto preferido y haga clic en Guardar cambios de nuevo. Entonces verá este mensaje:

autenticación de almacenamiento remoto

Debe hacer clic en este enlace para autorizar UpdraftPlus Backups para almacenar copias de seguridad en el almacenamiento seleccionado. En este ejemplo, dado que elegí Dropbox, hacer clic en este enlace me llevará a la página de inicio de sesión de Dropbox. Una vez que inicie sesión, veré este mensaje:

configuración completa updraftsplus copias de seguridad

Solo tengo que hacer clic Configuración completa, y volveré al backend de UpdraftsPlus en WordPress con este mensaje de confirmación en la parte superior:

autenticación completa updraftplus

Si quería hacer una copia de seguridad, todo lo que tengo que hacer es hacer clic en el azul Copia ahora botón. UpdraftPlus también creará copias de seguridad de acuerdo con el programa que hice anteriormente y las insertará en DropBox.

Si desea restaurar una copia de seguridad, simplemente haga clic en Copias de seguridad existentes y haga clic en Restaurar.

Paso 10. Optimiza tu sitio web.

Estamos en el último paso y, en este paso, veremos cómo optimizar su sitio web para motores de búsqueda como Google. Estoy seguro de que la mayoría de ustedes ya han oído hablar del SEO o la optimización de motores de búsqueda. En pocas palabras, es la práctica de asegurarse de que su sitio web esté optimizado de la manera correcta para que sea más fácil para los motores de búsqueda encontrar sus páginas y mostrarle en las páginas de resultados.

SEO tiene un aspecto llamado SEO en la página, y estas son prácticas que puede implementar en su sitio web directamente desde WordPress para comunicar claramente a los motores de búsqueda de qué trata su sitio web y su contenido.

Estas son algunas de las mejores prácticas de SEO en la página que debes implementar:

  • Escriba un meta título y una meta descripción para cada página y publicación.
  • Agregue palabras clave o frases clave y úselas en todo el contenido.
  • Agregue ALT TXT para cada imagen en su página / publicación.

Ahora, si no está familiarizado con estas cosas, está bien. Son bastante fáciles de aprender. El meta título es el título que aparece en los resultados de Google y la meta descripción es la descripción breve debajo del título. Aquí hay un ejemplo:

ejemplo de resultado de búsqueda de google

La palabra clave es lo que los usuarios escriben en el motor de búsqueda para buscar algo. El metatítulo es el título del resultado, y la metadescripción es la breve descripción a continuación. Estos son detalles importantes porque le dicen a Google de qué se trata la página y que es relevante para la frase clave “salón de Nueva York”.

Esta es una breve lista de técnicas de SEO en la página porque literalmente hay mucho que haces aquí. Pero por ahora, nos vamos a centrar en estos.

Para hacer estas cosas, necesitamos un complemento. Uno de los mejores complementos de WordPress para SEO en la página es Yoast SEO, y lo usaremos en este tutorial. Para instalar este complemento, solo vaya a Complementos > Añadir nuevo y buscar Yoast SEO. Hacer clic Instalar ahora y Activar.

instalar yoast seo

Ahora, cuando vaya a cualquier página o publicación, verá este nuevo cuadro debajo del área del editor:

yoast seo box

Aquí es donde puede agregar su meta título, meta descripción y palabras clave. Para agregar una palabra clave, escríbala en el cuadro a continuación Frase clave de enfoque:

agregar una palabra clave

Para agregar un meta título y una descripción, haga clic en Editar fragmento botón.

editar fragmento

Debajo del título de SEO es donde debe agregar su meta título. Es una buena práctica incluir su frase clave de enfoque aquí. En el campo de metadescripción, debe dar una idea clara de lo que trata la página y también incluir la frase clave aquí.

A medida que escribes algo en el campo de título y metadescripción de SEO, verás una barra de progreso naranja debajo de él. Esto significa que el texto aún es demasiado corto. Una vez que se vuelve verde, eso significa que la longitud de su texto es la correcta. Si se pone rojo, es demasiado largo y debes acortarlo. Los títulos y descripciones largos se cortan en los resultados, por lo que es mejor permanecer en el área verde.

Otra cosa que desea hacer es asegurarse de que su mapa del sitio esté habilitado y realmente funcionando. Para hacer eso, ve a Yoast SEO > General > Caracteristicas. Desplácese hacia abajo hasta que vea Mapas de sitio XML. Asegúrese de que esto esté habilitado y luego haga clic en el azul icono de signo de interrogación. Luego verá un enlace que dice Ver el mapa del sitio XML. Haga clic en este para ver su mapa del sitio.

habilitar sitemaps

Para muchos de ustedes, esto puede llevarlos a una página 404. Pero no te preocupes. La solución es bastante simple. Todo lo que tienes que hacer es ir a Configuraciones > Enlaces permanentes. Seleccione Nombre del puesto y golpear Guardar cambios.

nombre de la publicación permalink

Ahora, cuando intente acceder al mapa del sitio XML nuevamente, verá algo como esto:

mapa del sitio xml

Terminando

Y eso resume este tutorial sobre cómo crear un sitio web comercial con WordPress. Me gustaría darle un golpecito en los hombros porque ha hecho mucho y ha logrado mucho siguiendo este tutorial. Si tiene alguna pregunta, simplemente colóquela a continuación en la sección de comentarios y con gusto lo ayudaré.

SiteGround

SiteGround es un proveedor de alojamiento web altamente recomendado en línea, ya que ha atendido a los usuarios de WordPress y aún así tiene un precio asequible. Son más conocidos por su rápido rendimiento y soporte igualmente rápido.

Características clave de SiteGround:

  • Certificado SSL gratuito
  • Soporte informado rápido
  • Entorno de estadificación de WordPress
  • Migraciones gratuitas de sitios web
  • Copias de seguridad diarias

SiteGround es una opción sólida para sus necesidades de alojamiento web. Atienden a sitios web de WordPress y ofrecen menos recursos que sus competidores, pero mayor confiabilidad.

Echa un vistazo a SiteGround

Astra Theme

Astra es un tema gratuito de WordPress que se centra en la velocidad. Opcionalmente, puede comprar la versión Pro por $ 59 que agrega algunas configuraciones y opciones adicionales.

Características clave del tema Astra:

  • No es el tema de Fastes, pero no es holgazán
  • Muchos sitios de demostración gratuitos
  • Función de mega menú flexible
  • Opciones de diseños personalizados
  • Soporte de WooCommerce
  • Soporte de LearnDash

Astra Theme es una elección justa para cualquier proyecto de diseño web de WordPress. Supongo que la pregunta más importante es si incluso necesita comprar un tema en estos días, ya que los creadores de páginas están haciendo las mismas cosas para las que necesitaría un tema. Por ejemplo, Elementor tiene el tema gratuito Hello que le permite a su creador de páginas hacer todo el trabajo..

Todavía hay algunas buenas razones para comprar un tema profesional, pero para la mayoría de las personas, lo más probable es que estén bien con un tema gratuito.

Sin embargo, para mí, creo que Astra Theme no se ha mantenido al día con las tendencias actuales y ya no lo recomiendo.

Hay mucho mejores temas modernos disponibles que ofrecen constructores de encabezado y pie de página incorporados en lugar de estar restringidos a 3 diseños, más diseños de página y publicación más flexibles..

Echa un vistazo a Astra Theme

Elementor

Elementor es un creador de páginas de WordPress que ha tomado el diseño web de WordPress por sorpresa. Tiene el conjunto de características más profundo, pero es muy fácil de usar y dominar. Elementor es el creador de páginas gratuito más completo. También hay un complemento Pro para agregar características de desarrollador adicionales.

Características clave de Elementor:

  • Live Front End Page Editor
  • Características de personalización del sitio web
  • Biblioteca de plantillas y bloques
  • Amplias opciones de respuesta móvil
  • El generador de ventanas emergentes más potente
  • PRO Crear encabezados / pies de página personalizados
  • PRO Crear diseños de tipo de publicación

Elementor es el creador de páginas más fuerte actualmente disponible. Lanzan constantemente nuevas características que están en línea con las tendencias de diseño actuales. Esto significa que podrá mantener su sitio web relevante.

Elementor Pro es un valor increíble teniendo en cuenta todos los módulos adicionales y características de potencia que incluye.

Si comenzara un nuevo proyecto de sitio web hoy, Elementor sería el creador de páginas que elegiría. Considero que es un creador de páginas de WordPress que es un placer usar.

Echa un vistazo a Elementor

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