Como crear tu web con WordPres y el Theme Neve Pro

16 de agosto, 2021 @ 15:40 — 0 comentariosDescargar PDF

Si has instalado el Theme Neve pro tal y como se indica en nuestra guía de instalación, posiblemente te estés preguntando como empezar con el uso de estas magníficas plantillas.

En esta guía te explicaremos como importar un sitio completo de Neve Pro para empezar con tu nuevo diseño y su empleo básico.

Si desconoces el funcionamiento básico de WordPress, recomendamos que revises nuestra guía de ayuda práctica para WordPress.

Pantalla de Bienvenida

Con Neve Pro recién instalado, en la pantalla principal del administrador de WordPress, veremos una notificación en la parte superior indicando de que ha sido instalado y activado correctamente.

¡Perfecto, esto indica que ya podemos usar las plantillas Premium de Neve!

Actualiza Neve

Lo primero que tendremos que hacer, es actualizar Neve. Accede a tu WordPress y actualiza Neve y todos sus addons en su última versión desde la sección de actualizaciones de WordPress.

Como importar un Sitio

Neve Pro te permite importar un sitio web completo para poder emplearlo como plantilla o sitio de demostración, de esta forma podrás crear tu sitio más fácilmente.

La idea de utilizar una plantilla es que proporcionan un "molde" el cual te ayudará con la edición de tu sitio sin la necesidad de empezar desde 0.

En Neve hay plantillas de todos los tipos, podrás instalar sitios para diferentes usos (Negocios, tiendas...), o para diferentes nichos (Fotografia, blos etc...).

1 - Accede en las opciones de Neve Pro

Para importar un sitio, tan solo tendremos que acceder al buscador de Plantillas de inicio de Neve en las opciones de Neve -> Sitios de inicio. seleccionar la que más se adapte al diseño de web que tenemos pensado hacer e importa la plantilla y todo su contenido.

2 - Importa un sitio

En la parte superior, veremos listados todos los sitios disponibles según el editor que queramos usar y los podremos organizar por categorías con el desplegable de la derecha.

En esta guía, usaremos el editor Gutenber, ya que es gratuito, es el oficial de WordPress y es el editor principal de Neve.

En el buscador de sitios de inicio, podremos visualizar los sitios y navegar por los mismos para poder probarlos, pinchando sobre Preview.

Para poder modificar uno de los sitios, antes tendremos que importarlo en nuestro WordPress con el botón azul que pone Import. Importando un sitio, lo que haremos es instalar un sitio al completo en nuestro WordPress, es decir, con páginas ya creadas, entradas, plugins opcionales etc...

Una vez importado el sitio, podremos borrar lo que no necesitemos y editar lo que queramos.

Al hacer click sobre Import, nos aparecerá el importador del sitio, seleccionamos el contenido que queremos importar y hacemos click sobre Import entire site (recomendamos instalar todo y posteriormente borrar lo que no necesitemos).

3 - Comprueba tu sitio recién importado

Una vez el sitio este instalado, podremos visualiz el sitio importado (View Website), volver al menú principal (back to sites Library) o empezar directamente con la edición (Add you own content)

4 - Como eliminar un sitio importado

Si hemos importado un sitio y queremos eliminar todo su contenido para no tener contenido adicional instalado, tendremos que buscar el sitio que instalamos en el buscador de Sitios de Inicio y pinchar sobre Import nuevamente.

En el importador de sitios, ahora veremos que tenemos un nuevo "Check" que pone Cleanup previous import, marcadlo y desmarcad el resto del contenido, finalmente pinchar sobre Import entire site.

Eliminar un sitio, eliminará todo el contenido que se importó, incluido el ya editado tras el importado, entradas y páginas incluidas.

Opciones de Neve

En la sección de opciones de Neve, encontraremos la documentación, acceso directos a menús, recomendaciones de plugins, la documentación, el registro de actualizaciones y las opciones PRO.

La licencia incluida en todas las instalaciones de Neve de guebs, es la Pro, es decir, la versión completa sin limitaciones de Neve.

Bienvenidos

En la primera pestaña, podremos acceder en varios enlaces directos llamados "Enlaces rápidos del personalizador". Desde estos enlaces, por ejemplo tendremos la posibilidad de acceder al menú de "Subir un logotipo" sin la necesidad de tener que buscar dicho menú en todos los menús del personalizador del tema.

Plugins

Desde la sección plugins podremos instalar varios plugins útiles recomendados por Neve. Algunos de estos Plugins se instalarán automáticamente al realizar una importación de un sitio, ya que la mayoría son complementos para añadir funcionalidades adicionales al sitio. Por ejemplo, para crear formularios (Contact Form by WPForms) o añadir plantillas adicionales (Cloud Templates & Patterns collection).

Ayuda

Básicamente, esta es la ayuda oficial de Neve. En especial recomendamos revisar la Documentación, ya que es bastante completa y posiblemente nos sean de gran ayuda.

Registro de cambios

Tal y como su propio indica, aquí se mostrará el registro completo de todas las actualizaciones de Neve y Neve Pro ordenados por fechas.

Neve Pro

En el último menú podremos activar o desactivar varias funcionalidades adicionales añadidas por la versión Pro de Neve.

Por defecto, la mayoría de las funcionalidades ya vienen activas y recomendamos dejarlas como están, aunque hay ciertos módulos que traen opciones adicionales que no están activadas y las podemos activar si lo deseamos, estos módulos son los siguientes.

  • Header Booster
  • El propósito de este módulo es mejorar las capacidades del constructor de cabecera, básicamente el menú principal de nuestro sitio. La opción más interesante es la de "Mega Menú" con el que podremos añadir más iconos a los elementos del menú y también personalizarlos con la Configuración de Elementos del Menú.

  • WooCommerce Booster
  • Si tenemos pensado crear una tienda, recomendamos activar este módulo y todas sus funcionalidades para lograr una mejor experiencia de personalización. El módulo activará varias características, especialmente diseñadas para una integración fluida con WooCommerce.

Composición básica de un sitio

Por defecto, la mayoría de los sitios que encontraremos en Neve estarán separados en 3 zonas principales, la zona superior llamada "cabecera", la intermedia "cuerpo" y la del fondo "pie".

En un principio, tanto la cabecera como el pie estarán presentes en todas nuestras paginas y mantendrán un unico diseño, aunque en la configuración de cada pagina, podremos indicar que elementos mostrar.

  • Cabecera
  • Esta es la zona superior de nuestra web, normalmente aquí va colocado el logotipo junto al nombre del sitio, el menu principal y el icono o campo de búsqueda. La cabecera puede ser fija, de manera que se ocultaría al hacer scroll por la página web o flotante, manteniéndose siempre en la parte superior de la pantalla mientras navegamos. Podremos editarlo desde el menú Apariencia -> Personalizar.

  • Cuerpo
  • El cuerpo del sitio es la zona "principal" de nuestro sitio y esta compuesto por paginas o entradas. Para crear el cuerpo, primero tendremos que crear una pagina o entrada y después editarlo con el editor de bloques de WordPress.

  • Pie de pagina
  • El pie de pagina es la zona inferior de nuestro sitio, generalmente aquí va colocado el Copyright, los textos legales etc.. aunque realmente podremos añadir lo que queramos. Al igual que la cabecera, lo editaremos desde el menú Apariencia -> Personalizar.

Personalizar el sitio

Todos los sitios que instalemos de Neve tienen su propio personalizador. Con este personalizador podremos realizar fácilmente cambios en el diseño de tu nuestro sitio web en tiempo real, por ejemplo podremos cambiar el estilo de fuente, cambiar el diseño de la cabecera y pie, modificar los colores, menús etc.

Como acceder al personalizador

Al personalizador se puede acceder desde el área de administración de WordPress y luego yendo a Apariencia -> Personalizar desde la barra lateral izquierda. Esto abrirá la interfaz del Personalizador del tema actual que estemos usando de Neve.

Alternativamente, podremos acceder desde cualquier pagina de nuestro sitio, desde la barra de administración situada en la parte superior.

Después de abrir el personalizador de Neve, veremos todos los ajustes de personalización en el lado izquierdo de la pantalla listado en menus y la vista previa en vivo de nuestro sitio web al lado derecho.

No entraremos en detalle con cada menú, ya que cada sitio tiene sus propios menús y configuraciones, pero si que explicaremos los genericos y los que consideramos más importantes.

Personaliza la tipografia

La edición de fuente está disponible en el Personalizador -> Tipografía.

Desde esta sección, podremos cambiar tanto la fuente general de la web, como la de encabezados y entradas del blog, con varías opciones, como variantes adicionales de la fuente; transformación del texto, tamaño de la fuente, altura de la línea, espacio entre letras etc...

La fuente general se aplica en todas las partes del sitio web, excepto en los elementos en los que se especifica explícitamente una fuente diferente, como puede ser para las etiquetas de encabezado o cualquier bloque/widget en el que el editor utilizado haya definido su propio estilo.

Personaliza los botones

Por defecto, todos los sitios que instalemos tendrán un diseño de botones asignado. Desde el personalizador de botones podremos modificar su diseño, color, tipo de borde, redondeado etc...

La edición de los botones está disponible en el Personalizador -> Botones.

Como cambiar el logotipo

En prácticamente todos los sitios, el logotipo lo encontraremos situado en la cabecera en la zona izquierda junto al titulo.

Desde el personalizador del logotipo, podremos cambiar el logotipo, su comportamiento su colocación y el titulo.

Como acceder al personalizador del Logotipo

Al personalizador del logotipo podremos acceder de dos formas diferentes, ya sea desde el menú lateral del Personalizador del sitio (Cabecera -> Cambiar el Logotipo) o haciendo click sobre el Logotipo o Titulo del sitio (el icono lapiz).

Personaliza el Logotipo

En el personalizador, veremos que tenemos bastante opciones de personalización, por ejemplo, podremos cambiar la visualización del Logotipo, su colocación, el tamaño, el color de texto del titulo, ocultar el titulo etc...

Para añadir un logotipo, simplemente pinchad sobre el icono Subir Logotipo y seleccionad vuestro diseño propio.

Esto ya depende de como queramos diseñar nuestra cabecera y logotipo, pero por regla general, el logotipo no suele ser muy grande y en formato .png con transparencia para que se mezcle con el fondo de la cabecera.

Una vez añadido el logotipo, podremos configurarlo, cambiando su posición desde la sección Visualización, cambiar su tamaño y el titulo del sitio y el color. Como podreis apreciar en la imagen, los resultados son rapidos.

Si queremos añadir el iconito que aparece en las pestañas de los navegadores, también lo podremos hacer desde el personalizador del logotipo.

Los iconos del sitio deben ser cuadrados, por ejemplo de 512px por 512px y al igual que el logotipo, recomendamos que sean en .png

Configurar cabecera

Tal y como hemos indicado anteriormente, la cabecera es la parte superior de nuestra web. Desde el personalizador de cabecera, podremos cambiar su color, su tamaño, colocación de menú, logotipo, titulo del sitio etc... incluso añadir nuevos elementos si lo deseamos.

Para acceder, tan solo tendremos que entrar al Personalizador y seleccionar Cabecera en el menu lateral.

Si navegamos por lo diferentes menús de la cabecera, desde las pestañas de Diseño y Estilo, podremos configurar el color de las letras de los menús, la colocación de menú y logotipo, el color de fondo de la cabecera, la posibilidad de mantener u ocultar la cabecera mientras nos desplazamos por la web etc...

Como podréis comprobar, es realmente sencillo configurar una cabecera, en cuestión de minutos tendremos una diseñada con tan solo movernos por unos pocos menús.

Componentes adicionales de la cabecerá

Si en la cabecera queremos añadir más utilidades, por ejemplo otro menu adicional, un icono para la busqueda, iconos sociales etc... lo podremos hacer desde el Cabecera Builder situado en la zona inferior del Personalizador de cabecera.

La cabecerá estará dividida en varios bloques en formato horizontal (Arriba, Principal y abajo) y podremos añadir diferentes componentes en el bloque que queramos (si no añadimos ningun elemento en ningun bloque, el bloque no será visible en nuestra pagina).

Tambien podremos configurar cada bloque haciendo click sobre su tuerca y configurar su tamaño, colocación y colores.

Como añadir componentes adicionales

Para añadir un nuevo componentes en la cabecera, tal solo tendremos que seleccionar uno de los bloques en donde queremos situar el componente y seleccionar el elemento que queramos de todos de los disponibles.

Por ejemplo, nosotros añadiremos el componente "Iconos sociales" en la zona derecha del bloque de abajo, que es donde esta colocado nuestro menú principal.

Como personalizar o añadir un nuevo menú

Desde el editor de Menús, podremos crear y personalizar nuestros menús. En la mayoria de sitios que instalemos, ya tendremos un menú principal creado, de modo que con editarlo ya nos será suficiente, aunque siempre tendremos la posibilidad de crear uno nuevo si lo deseamos y colocarlo en otro lugar.

En el menú podremos añadir nuestras paginas más importantes, categorías o temas, publicaciones del blog e incluso enlaces personalizados, ya sea como menus principales o submenus.

Tambien tendremos la posibilidad de personalizar nuestros menus añadiendo iconos, por ejemplo la tipica casita del menu Home o pagina principal.

Como acceder al editor de menús

Para acceder al editor de menús, accedremos desde Apariencia -> Menús situado en el panel de administración de WordPress.

Elige que menu editar o crear

Nada más entrar al editor de menús, en la parte superior, desde el desplegable podremos seleccionar que menu editar haciendo click en Seleccionar o alternativamente crear uno nuevo desde Crear un nuevo menú

La mayoria de los sitios que usemos, ya vendrán con uno o varios menús creados y el principal siempre estará marcado en parentesis como Menú Principal (normalmente el menú de la cabecerá).

Añadir elementos al menú

Al cargar un menu ya existente o al crear un nuevo menu, podremos elegir las páginas, entradas etc.. que queremos añadir desde el menú de la izquierda.

Por ejemplo, para añadir una de nuestras paginas, tan solo la tendremos que marcar su respectiva casilla y hacer click sobre Añadir al menú.

Modificar y eliminar menús

En la sección de la derecha (estructura del menú) veremos los elementos añadidos. Para ordenarlos, podremos moverlos arrastrándolos y soltándolos donde queramos y editarlos haciendo click sobre la flechita de cada elemento.

Todos los menús tienen sus elementos en una lista vertical (de arriba a abajo) en el editor de menús. Cuando pongas el menú en vivo en tu sitio, se mostrará vertical u horizontalmente (de izquierda a derecha), dependiendo de la ubicación que selecciones.

Personaliza los iconos de los menús

Si deseamos, los menus los podremos personalizar agregando un icono alado de su nombre. Para añadirlo, tan solo pinchamos sobre el recuadro + que esta alado del nombre y seleccionamos el que queramos.

Ejempo de Menú

En este caso de ejemplo, hemos utilizado el propio menu que ya traia el sitio y lo hemos modificado, cambiando el nombre de cada elemento, añadiendo unos iconos y un submenu al menu de galeria con unas paginas.

Etiquetas: