Cómo crear una página ‘Acerca de’ para su sitio web usando Elementor

Si deseas promover tu negocio en línea, necesitas una página «Acerca de nosotros» bellamente diseñada en tu sitio web donde puedas mostrar el motivo de tu trabajo, la historia detrás de tu empresa. Puedes exhibir el propósito de una manera efectiva que puede ayudar a aumentar la credibilidad de tu sitio entre los visitantes. Porque después de visitar el sitio web, la gente querrá saber sobre la misión, visión y pasión de esta empresa para poder responder sobre el producto o servicio que estás ofreciendo desde el sitio web.

En muchos casos, la página «Acerca de nosotros» influye en los visitantes para que tomen la decisión final de compra. Entonces, por esta razón, debes hacer que se destaque y ganar la confianza de la audiencia al instante. La perspectiva de la página debe ser muy clara y significativa.

¿Cómo puede ser eficaz la página «Acerca de nosotros»?

Si creas una página «Acerca de nosotros» de apariencia ordinaria con contenido aburrido, los visitantes la pasarán por alto instantáneamente. Entonces, debes destacarte para dejar una buena impresión.

Configurar la página de WordPress para hacerla ‘Estática’:

Cuando figuramos la página de WordPress para usarla como una página estática las personas que lleguen a nuestro sitio Web será la página de ‘Home’ la que se muestre.

En nuestra página web vamos al escritorio, al menú donde dice Lectura le das clic y se abre Ajustes de lectura. Modificas.

Importante: verificar los Enlaces permanentes en Ajustes—>Ajustes de los enlaces permanentes seleccionar : Nombre de la entrada.

Crear página ‘Acerca de’:

• En el menú ir a ‘Páginas’
• Añadir una nueva
• Poner título
• Clic en Editar con Elementor

Editar con Elementor:

En ‘Ajustes’—> Estructura de página: Elementor ancho completo.

Presionando las teclas CTRL + E de nuestro teclado (MaC: Cmnd+E) nos abre un buscador de Elementor, ponemos la palabra Home para buscar nuestra página principal, una vez la encontramos en la lista del buscador la señalamos y con el botón derecho le damos en ‘abrir enlace en una nueva pestaña’ (Open link in new tab)—->vamos a la página abierta que es nuestra ‘home’—-> clic en ‘Editar con Elementor’.

Con la página de ‘home’ abierta en Edición, le damos clic en la sección, parte de arriba, en el centro, en el menú desplegable que sale le damos en copiar y regresamos a nuestra página de ‘Acerca de’ , en el signo + –> clic derecho –>pegar.

Listo, copiar y pegar es el truco.

Cambiar el título en la columna izquierda:

Se lo cambiamos a ‘Acerca de mí’, si es una compañía sería por ejemplo: ‘Acerca de nosotros’. Le podemos cambiar el estilo, ponerle de color negro. Modificamos también el siguiente texto abajo del título y añadimos el texto que deseemos y podemos ponerle el mismo color negro.

Seleccionamos la columna—-> estilo—> limpiar el color del fondo.

El botón que teníamos debajo de ese texto lo eliminamos. Arrastramos el otro botón que tenemos, el de la flecha, para colocarlo debajo del texto, lo centramos, eliminamos el link adjunto, en ‘Estilo’ le cambiamos el color negro a gris que usamos anteriormente—> en ‘Avanzado’ le ponemos un relleno de 50 pixeles solo en la parte de arriba.

Cambiar el estilo a la columna derecha:

Seleccionamos el ícono de la columna para quitar la imágen de fondo, eso lo hacemos en ‘Estilo’—> borrar imágen. Le añadimos una imágen nueva pero no como fondo sinó que usamos el ‘widget’ de Imágen y la seleccionamos de nuestra Biblioteca de medios o subimos una nueva y la insertamos—-> la centramos—> en ‘Estilo’ le podríamos cambiar el ancho y el alto de la imágen pero en este ejemplo se quedará tal cual.

Configurar para dispositivos móviles:

Clic en Modo adaptable—>Seleccionamos móvil. Editamos: Avanzado—>relleno parte de arriba de 40 pixeles. En ‘Adaptabilidad’—> en columnas invertidas cambiar a que NO.

Seleccionamos columna donde está la foto—> Avanzado—> Margen negativo de -90 pixeles, parte arriba. Ahora seleccionamos el botón–>Avanzado—>Z-Index en 1.

Configurar Modo de escritorrio para la siguiente sección:

Editando primera columna:

Le damos clic al signo de + —> dos columnas con 1400 pixeles de ancho—> ‘Altura mínima VH de 50.

En la sección de ‘Widgets’ buscamos una barra de progreso—> la arrastramos a la primera columna, la soltamos y cambiamos el título a lo que querramos, en el progreso le cambiamos a 92, cambiamos también el texto interior que en este ejemplo sería ‘WordPress’, en Estilo en color le ponemos gris que veníamos utilizando y en el color de fondo se deja el blanco—> la altura en 30 pixeles—> el borde en 0—> el texto del interior—> ‘Tipografía’—> familia: Roboto—> tamaño 15 pixeles—> ‘Transformación en mayúsculas—> ‘Peso’ en 400.

En estilo del título le cambiamos el color a negro—> Tipografía—> Familia: Monserrat—>Tamaño 15—> Peso 500—> Transformación en Mayúsculas—> Ancho de linea 3. Duplicamos dos veces, en total nos quedamos en 3. Ahora regresamos al segundo—> eliminamos el título, vamos al tercero—> eliminamos también el título. Cambiamos los porcentajes: en el segundo a 88 y en el tercero a 82. En el segundo le ponemos otro título igual que en el tercero, de acorde a las habilidades que queremos mostrar.

Editando segunda columna:

Copiamos el título que ya tenemos en la parte de arriba y lo pegamos en la segunda columna, modificamos el contenido, en este caso le pondremos ‘MIS METAS’, lo alineamos hacia el lado izquierdo, vamos a Estilo—> Tipografía—> 55 pixeles.

Copiamos el segundo bloque de texto—> lo pegamos debajo del título de MIS METAS—> cambiamos el contenido—> Estilo—> alineamos hacia el lado izquierdo—> Tipografía—> Transformar a Minúsculas, en Avanzado—> relleno en toda la columna—> seleccionamos la columna—> desvinculamos las cajitas—> 100 a la izquierda. Agregar una ancla—> sección de widgets—> buscamos una ancla de menú—> la arrastramos y soltamos justo arriba de donde dice MIS METAS—> le ponemos un nombre—> copiamos el nombre para utilizarlo en el botón que tenemos, para ello seleccionamos el botón y pegamos el nombre en Enlace poniendo primero el signo numeral #.

Comprobando en dispositivos:

Vamos comprobando que todo esté correcto.

Seleccionamos la columna—> Avanzado—> desvinculamos para eliminar el formato de la versión de escritorio. Repetimos con la columna de abajo—> seleccionamos la columna—> desvinculamos los cuadritos para que pierda el formato de escritorio. Seleccionamos la Sección completa—> Avanzado—> desvinculamos el relleno—> le agregamos 100 pixeles arriba y abajo, 50 pixeles derecha e izquierda.

Adaptabilidad—> donde dice Columnas invertidas del Móvil le ponemos que SI. Listo. Regresamos a modo de escritorio.

Siguiente Sección:

Nueva Sección con una sola columna—> Alto mínimo VH—> 100. De la sección de widgets escogemos un widget: ‘Sección Interior’ que lo arrastraremos y soltaremos en la sección que estamos creando, eso nos creará dos columnas por lo que procedemos a borrar la columna del lado derecho. Seleccionamos la sección interior—> 500 de ancho para reducirla. Copiamos el texto de arriba—> clic derecho en la sección interior—> pegar—> cambiar el texto—> regresamos—-> copiamos el botón—> pegamos en la sección interior debajo del texto que colocamos—> seleccionamos el botón—> Estilo—> cambiar el color del fondo, en negro por ejemplo—-> buscamos un widget ‘Imágen’—> arrastramos—> insertamos una imágen—> clic en la imágen, seleccionamos e insertamos.

La imágen que insertamos no la queremos en la sección interior como en la foto de la izquierda sinó que quede debajo de toda la sección a lo ancho así que para ello la arrastramos y la soltamos en la sección de afuera. Avanzado, margen de -45 dando la impresión como si el botón está un poco encima.

Seleccionamos la Sección interior y donde dice: Z-Index le ponemos un 1 para que la sección interior siempre aparezca encima de la sección de afuera.

Vamos a comprobar en dispositivo móvil. Quitamos los espacios en blanco seleccionando la Sección completa—> Avanzado—> desvinculamos los formatos de la versión escritorio. En descripción le ponemos una altura mínima VH—>60.

Seleccionamos Sección interior—-> Avanzado—> desvinculamos formato de la versión anterior—-> relleno de 50 parte izquierda y derecha. Seleccionamos el botón y desvinculamos—> margen—> 30 arriba y 10 abajo—> relleno—> 30 arriba y 10 abajo. Listo. Pasamos a modo de escritorio.

Nueva Sección:

Clic en el signo de + para insertar una sección de 3 columnas—> Alto mínimo VH—> 60 e insertaremos 3 íconos—> panel de los widgets—>seleccionamos el de Caja de Icono porque tiene texto y título integrado—> lo arrastramos—> cambiamos el ícono—> cambiamos el título—> cambiamos el texto—> Editamos caja de icono—> tamaño 35—> cambiar el color del ícono—> cambiar el color del contenido—>Título—> Tipografía—> Familia—> Roboto—> espacio 20—> Peso 400—> Transformación—> todo mayúscula. Descripción—> cambiar el color a negro—> Tipografía—> Familia—> Monserrat. Avanzado 50 pixeles de relleno a todo alrededor—> duplicamos dos veces y borramos dos veces las columnas que no se necesita. Modificamos el texto de las restantes.

Comprobar versión móvil y escritorio:

Publicar o Actualizar y ya tenemos una página completa de ‘Acerca de’.

Guardar como plantilla: