Cuando vea el Tema Astra en WordPress.org verás una bonita captura de pantalla para el tema como la de arriba. Usted puede replicar esta captura de pantalla fácilmente. Este artículo explica este proceso en detalle.
Hay dos maneras de crear esta captura de pantalla -
- Importar una plantilla (Recomendado) - Este es un proceso fácil en el que puede importar una plantilla lista y una captura de pantalla estará disponible en su sitio web.
- Diseñar capturas de pantalla manualmente - Si prefieres diseñar capturas de pantalla manualmente desde cero puedes hacerlo con sencillos pasos.
Entendamos ambos procesos -
Importar plantilla de capturas de pantalla
Puede importar rápidamente una plantilla para la captura de pantalla de Astra con el plugin Starter Templates. Puede importarla y luego modificarla según sus necesidades. Para ver la plantilla haga clic en aquí.
Siga el siguiente proceso para importar la plantilla.
Paso 1 - Instalar plantillas de inicio plugin. Está disponible gratuitamente en WordPress.org
Paso 2 - Elija 'Block Editor' como opción de constructor de páginas y busque 'Web Design Agency' en la biblioteca.
Paso 3 - Haga clic en la plantilla y haga clic para importarla.
Y ya está. La plantilla importada estará disponible en una página separada. Puede editarla y modificarla según sea necesario.
Diseñar captura de pantalla manualmente
Estos son los pasos para diseñar capturas de pantalla desde cero utilizando Astra.
Instalar tema
El primer paso sería sin duda instale el tema Astra. Tras la instalación, asegúrate de activar el tema.
Empezar a diseñar la captura de pantalla
Para empezar, cree una nueva página y configurarlo como página de inicio. Para establecer una página como página de inicio, vaya a Configuración > Lectura > Una página estática > Página de inicio - seleccione una página recién creada en el menú desplegable.
Ahora, puede diseñar la captura de pantalla en dos secciones -
- Cabecera
- Contenido de la página
Cabecera de diseño
Esta sección contiene el logotipo, el menú de navegación y los iconos para compartir en redes sociales.
Puedes diseñar una cabecera desde los ajustes del personalizador de Astra. Desde el panel de control dirígete a Apariencia > Personalizar > Constructor de cabecera.
Esto abrirá el avanzado constructor visual de cabeceras de Astra. Puedes añadir todas las secciones de cabecera con este constructor fácilmente -
Nota - Vamos a utilizar un encabezado transparente en esta página. Se puede activar sólo para esta página de la configuración de la página meta. La parte posterior de este artículo explicará más sobre él.
Puede editar la configuración de la cabecera transparente desde el personalizador en Constructor de cabecera > Tipos de cabecera > Cabecera transparente.
Aquí tienes un vídeo que explica cómo personalizar la cabecera -
1. Añadir logotipo - Haga clic en el recuadro central izquierdo: es la sección izquierda de un encabezado primario. Se abrirá una ventana emergente con todos los elementos disponibles. Elija Logo de esta lista. Ahora haga clic en el elemento del logotipo, añadir el logotipo y ajustar el ancho.
Si desea un logotipo diferente en la cabecera transparente, puede configurarlo en Tipos de cabecera > Cabecera transparente.
2. Añadir menú principal - Cree un menú que desee mostrar en la cabecera. Ahora haga clic en la sección central del encabezado primario y en la ventana emergente seleccione Menú primario. Puedes establecer colores para el menú desde la pestaña de diseño.
3. Añadir iconos sociales - Haz clic en la sección derecha de la cabecera principal y, en la ventana emergente, selecciona Social. Añade Facebook, Twitter, Instagram o cualquier otro icono social que necesites. Define el estilo en la pestaña de diseño.
Añadir contenido a la página
Hay dos secciones en la página. Edita la página con el editor Gutenberg y empieza a construir estas secciones.
Diseño Primera Fila (¡Tu idea importa!)
Paso 1 - Añade el bloque Portada que ofrece el editor Gutenberg.
Paso 2 - Edite el bloque de portada. Establecer la altura 0f 740 px y el color de superposición con gradiente. (Si necesita los códigos de color exactos para gradiente aquí están - #07018f y #8404ce).
Paso 3 - En la sección Portada, añada un bloque Grupo.
Paso 4 - Dentro del bloque Grupo, añada el bloque Medios y texto. En este bloque, seleccione el diseño para mostrar los medios a la derecha y el contenido a la izquierda.
Paso 5 - En la sección de contenido, añada el bloque Título, defina el título H1 y añada texto. Establezca el color en la configuración del bloque.
Paso 6 - Debajo del encabezado, agregue el bloque Espaciador con una altura de 20 px y luego agregue el bloque Botón. Para el botón de establecer el texto, enlace, y los colores de la configuración del bloque.
Paso 7 - En la sección derecha - sección multimedia, añada una imagen.
Diseño Segunda fila
Paso 1 - Añade un bloque Grupo. Dentro de él añade un bloque Columnas con 4 columnas.
Paso 2 - Dentro de cada columna añada bloques de Imagen, Título y Párrafo. A continuación, agregue la imagen, el título y el texto en un párrafo.
Configuración de página
Astra ofrece configuraciones específicas para cada página que le ayudan a controlar la visualización de metadatos de páginas individuales.
En la barra lateral derecha de ajustes, busca la sección - Ajustes de Astra.
A partir de aquí -
- Barra lateral - Sin barra lateral
- Diseño de contenido - Ancho completo/ Contenido
- Desactivar título
- Desactivar migas de pan
- Desactivar imagen destacada
- Cabecera transparente - Activada
Esto fusionará el contenido de su página con su cabecera diseñada con Header Builder.
¡Hecho!
Publica la página y visita el frontend para ver el diseño.
