Ahora que ha importado las plantillas necesarias, ha llegado el momento del último paso para crear su sitio web con Starter Templates. Por lo tanto, lo único que le queda es sustituir el contenido de la plantilla (ficticia) por el suyo propio y personalizar su sitio web. Además, puede modificar el diseño para ajustarlo a su marca y necesidades.
Este documento le ayudará a comprender los conceptos básicos de los diseños de plantillas y cómo puede editarlos.
Starter Templates Walkthrough Docs:
- Primeros pasos con Starter Templates
- Starter Templates Importación
- ¿Cómo importar un sitio completo con Starter Templates?
- ¿Cómo importar una sola página con Starter Templates?
- Importar páginas, patrones y wireframes de Gutenberg
- Starter Templates - Elementor Ventana emergente
- Cómo solucionar problemas de importación de plantillas de inicio
- Building Your Website With Starter Templates (leyendo actualmente)
- Starter Templates Preguntas frecuentes
Directrices generales para modificar Starter Templates
Starter Templates contiene diseños de página y contenido ficticio realizados por nuestro equipo de diseño. Además, las plantillas vienen con todos los plugins necesarios y la configuración del sitio web (Personalizador, plugins). Una vez importada la plantilla, puede modificarla como desee.
He aquí algunas directrices generales que pueden ayudarle a modificar las plantillas:
- Contenido (páginas, entradas) se crea utilizando el constructor de páginas respectivo. Puedes editar el contenido utilizando el constructor de páginas que seleccionaste al importar la plantilla;
- Encabezado y pie de página se crean utilizando el constructor de Astra Header Footer. Puede personalizarlos en Apariencia > Personalizar > Creador de cabeceras o Creador de pies de página ;
- Barras laterales se añaden a través del Personalizador. Puede personalizarlo en Apariencia > Personalizar > Barra lateral ;
- Diseño, fuentes, colores, configuración de botones están configurados en el Personalizador. Puede editarlos en Apariencia > Personalizar > Global ;
- Contenido para plugins de terceros como WooCommerce o LearnDash se crea a través de estos plugins y se ubicará dentro de estos plugins;
- Páginas para plugins de terceros como WooCommerce o LearnDash se pueden personalizar adicionalmente en el Personalizador en sus respectivos ajustes.
Comprender los diseños
Algunos diseños son bastante sencillos de modificar. En consecuencia, puede cambiar sólo unos pocos ajustes Customizer o editar el diseño con el constructor de página como de costumbre.
Pero a veces, nuestros diseñadores utilizan soluciones más complejas para ofrecerle diseños tan fantásticos. Por lo tanto, no tienes que preocuparte por necesitar plugins o accesos adicionales cuando importas un sitio completo. Todo lo que utilizamos para crear las plantillas se añadió a su sitio web cuando importó una plantilla.
Por otro lado, modificar estos complejos diseños puede desconcertarte a veces. Los diseños pueden lograrse como una combinación de Customizer y configuración del constructor de página o podrían crearse usando algún plugin.
Por lo tanto, debe comprobar los plugins instalados después de la importación de la plantilla como un buen punto de partida. Dado que la importación Starter Templates sólo instala los plugins necesarios, podrá identificar cualquier plugin utilizado en los diseños. A continuación, debe inspeccionar el personalizador y la configuración global del constructor de páginas, así como las imágenes y los fondos.
Más adelante explicaremos varios principios que pueden resultar útiles para entender el diseño Starter Templates.
Edición de plantillas tras la importación completa del sitio
Para aclararlo, hemos creado el siguiente ejemplo para ayudarte a entender mejor cómo se crean los diseños complejos. Además, le mostraremos cómo modificarlos.
En este caso, utilizamos un Plantilla de agencia de viajes para Elementor. Una vez que importe la plantilla Agencia de viajes, es posible que observe las líneas verticales. Estas líneas se extienden desde la parte superior a la inferior de todas las páginas del sitio web. Le mostraremos cómo puede eliminarlas:
Configuración del personalizador
Primer paso - Todas las secciones sin fondo definido son transparentes. En otras palabras, verá el fondo global del sitio web. Puedes editar el fondo del sitio web en Apariencia > Personalizar > Global > Colores > Fondo.
Paso 2 - A continuación, haz clic en el selector de color de fondo y, después, en la pestaña "Imagen".
Paso 3 - Fíjate en la imagen de fondo. Verá que las líneas proceden de una imagen a pantalla completa. Haga clic en el botón "Eliminar imagen".
Esto eliminará el fondo del sitio web. Como resultado, todas las secciones transparentes tendrán ahora este aspecto:
Como puede ver, las líneas desaparecieron de algunas secciones, pero siguen presentes en otras.
Como ya se ha mencionado, las secciones Elementor con el fondo transparente mostraban la imagen de fondo del sitio web que hemos eliminado. Esto significa, que en otras secciones, las líneas del fondo provienen de un lugar diferente. Por lo tanto, debemos echar un vistazo a la configuración de Elementor.
Edición con Elementor
Como el resto de secciones no son transparentes, comprobaremos su configuración de fondo en el editor Elementor:
Paso 4 - Vaya a su página y haga clic en "Editar con Elementor";
Paso 5 - A continuación, haga clic en "Editar sección" para las secciones que aún muestran líneas en el fondo;
Paso 6 - Aquí, vaya a la pestaña "Estilo" y desplácese hasta "Superposición de fondo". Finalmente, verás que las líneas se añaden como imagen superpuesta. Haga clic en el icono "Eliminar" (papelera) para borrar la imagen:
En este ejemplo, le mostramos cómo editar un diseño que combina configuraciones del Personalizador y Elementor. Del mismo modo, puedes consultar y editar diseños en cualquier plantilla.
Sustitución de imágenes
Al modificar el diseño, la mayoría de las veces tendrás que editar imágenes. Aquí también es importante mencionar que los diseños de páginas o entradas se crean por capas. Por lo tanto, comprueba si hay imágenes en secciones, columnas y otros elementos cuando edites tu página con cualquier constructor de páginas.
Para ilustrarlo, le mostraremos ejemplos de secciones diseñadas con Elementor.
Ejemplo 1 - Sección Backgorund
En este ejemplo, le mostraremos cómo se construyó una sección utilizando el fondo de sección. La sección se construyó utilizando varias capas:
- Sección con el fondo;
- Rúbrica (Preparador físico);
- Rúbrica (Cristy Dowson) y Botón (Sobre mí).
Para editar la imagen de fondo, utilice la siguiente ruta:
Primer paso - Comience a editar la página con Elementor;
Paso 2 - Haga clic en "Editar sección" y elija la pestaña "Estilo";
Paso 3 - Puedes editar la imagen de fondo en el panel "Fondo".
Ejemplo 2 - Superposición de fondo de sección, imagen y su fondo
El segundo ejemplo contiene imágenes en varias capas. Esta es la estructura de la sección:
- Sección con el fondo superpuesto;
- Widget de imagen con fondo fijo;
- Capas internas que contienen los widgets Título y Texto.
Veamos ahora cómo editar imágenes en esta sección:
Primer paso - Comience a editar la página con Elementor;
Paso 2 - Aquí, haga clic en "Editar sección" y elija la pestaña "Estilo";
Paso 3 - Puede editar la imagen de superposición de fondo en el panel "Superposición de fondo".
Paso 5 - De forma similar al fondo de la sección, puede editar el "Fondo" del widget de imagen. Para ello, vaya a la pestaña "Avanzado" y desplácese hasta el panel "Fondo":
En resumen, tus opciones de diseño son casi infinitas. Si no estás seguro de cómo editar alguna imagen, examina cuidadosamente todas las capas hasta que encuentres los ajustes necesarios.
Otros plugins y Starter Templates
Por último, nuestros diseñadores a veces utilizan plugins adicionales, así que compruebe sus "Plugins instalados" para estar seguro. Estos plugins se instalarán en tu sitio web cuando importes una plantilla.
Además, tenga en cuenta que esto sólo ocurrirá si importa todo el sitio web. Por lo tanto, si importara una sola página, tendría que añadir los plugins y el contenido dinámico usted mismo.
Elementor Plugin de creación de encabezados y pies de página
El Elementor Header & Footer Builder es un gran plugin gratuito. Le permite añadir bloques separados diseñados por elementor en cualquier lugar de su sitio web. De esta manera, la misma sección se puede añadir a varios lugares en su sitio web. Por ejemplo, algunos Starter Templates tienen secciones de suscripción construidas usando este plugin.
Por lo tanto, compruebe sus plugins instalados para Elementor Header & Footer Builder cuando importe un sitio completo. Si este plugin está presente, todas las plantillas creadas con él se encontrarán en Dashboard > Appearance > Elementor Header & Footer Builder.
Para editar estas plantillas, siga estos pasos:
Primer paso - Vaya a Panel > Apariencia > Elementor Header & Footer Builder y busque la plantilla que desea editar;
Paso 2 - Busque la opción "Editar" debajo del nombre de la plantilla y haga clic en ella para empezar a editarla;
Paso 3 - Además, haz clic en el botón "Editar con Elementor" para abrir el editor Elementor;
Paso 4 - Haga las modificaciones que necesite y pulse el botón "Actualizar". A continuación, haga clic en el menú Elementor y "Salir al panel" para volver al editor de plantillas;
Paso 5 - También, si es necesario, puede actualizar las Opciones de Encabezado y Pie de Elementor. Aquí, puede cambiar el Tipo de Plantilla, cambiar la ubicación (Mostrar en), y limitar Roles de Usuario específicos.
Paso 6 - Actualice la plantilla para aplicar los cambios.
Si desea eliminar algún bloque, sólo tiene que borrarlo o cambiar la configuración de "Mostrar activado".
En conclusión, ahora debería estar equipado para construir su sitio web con Starter Templates sin ningún apuro. Por supuesto, si todavía necesita ayuda con cualquier diseño de plantilla, no dude en ponerse en contacto con nuestro equipo de soporte.
