En este apartado encontrarás algunos vídeos de la versión del tema Sydney con el constructor Page Builder. Aunque el creador el tema ya no da soporte a esta combinación, hay muchos que crearon su sitio con este método y merecen conocer cono se realizan algunos cambios.
Tengo que recordar que no basta con instalar el tema y tirar millas, tenemos que tener muy presente algunas condiciones para evitar fallos y errores en nuestra web, contratar un hosting decente, configurar correctamente WordPress... Muchas pequeñas cosas que sé muy bien que muchos no hacen.
Si estás interesado en aprender a mejorar tu web, apúntate a la Zona Premium.
Tutoriales para CONFIGURAR el tema SYDNEY
Personalizar la "Página principal" de Sydney
y crear enlaces para navegar por ella
Puede que alguno se pierda al recibir de golpe toda la información de los archivos de la Demo, pero no hay que asustarse, veréis que es muy sencillo cambiar los textos y las imágenes por las nuestras.
Para empezar, casi todas las opciones las vamos a modificar en las nuevas pestañas de la zona de Administración del tema Sydney, y además, el modo de hacerlo es muy similar.
Otro asunto son los enlaces del menú o de los botones para navegar arriba y abajo en la página principal (o en cualquier otra).
Los links los generamos con el identificador de la página y el número que ocupa la sección o módulo al que queremos acceder. El esquema del enlace sería algo parecido a esto: "tudominio/#pg-identificador depágna-posición del módulo".
Modificar y traducir los "Post Type" de las urls
El tema Sydney incorpora unos contenidos adicionales al instalar el plugin "Sydney Toolbox" (exclusivo para el tema Sydney) que insertar una serie de contenidos diferentes a las entradas o los post.
- Services (Servicios)
- Employees (Empleados)
- Testimonials (Testimonios)
- Clients (Clientes)
- Projects (Proyectos)
Estos contenidos se muestran a través de widgets o accediendo con un link a las páginas que los contienen. Y es aquí donde podemos ver que las urls que enlazan con el contenido no es el deseado.
Cuando se abre una página de cualquiera de estas secciones, la url que muestra la sección está en inglés. Y la administración de WordPress no permite modificarlo.
Gracias a un plugin llamado "Simple Post Type Permalinks", podemos modificar los enlaces permanentes de esas urls, haciendo que sean amigables y se muestren con la traducción o palabra que nosotros queramos. Algo que podemos aprovechar para el SEO.
Pero para tener bien configurada nuestra web, necesitamos evitar el contenido duplicado, realizando una redirección permanente 301 de las url antiguas a las nuevas. En el vídeo explico cómo hacerlo de dos formas.
NOTA: Es importante realizar una copia de seguridad del archivo ".htaccess" antes de realizar cualquier modificación.
El código de las redireeciones 301 es el siguiente (cambiar "tuetiqueta" por la que pongáis en los enlaces permanentes" y "tudominio.com" por vuestro dominio):
1 2 3 4 5 6 7 | # Redirecciona una página individual a otra página Redirect 301 /services http://tudominio.com/tuetiqueta/ Redirect 301 /employees http://tudominio.com/tuetiqueta/ Redirect 301 /testimonials http://tudominio.com/tuetiqueta/ Redirect 301 /clients http://tudominio.com/tuetiqueta/ Redirect 301 /projects http://tudominio.com/tuetiqueta/ # END Redirección |
Como parte adicional a este apartado, te enseño a traducir el título de las páginas de archivo para tener tu web lo más completa posible.
Cómo cambiar imágenes de fondo y utilizar el widget de vídeo
Aunque no es un tema propio del tema Sydney, utiliza un plugin para diseñar la página principal llamado "Page Builder by SiteOrigin".
Este plugin puede utilizarse con cualquier tema de WordPress, pero es ideal para Sydney por la facilidad de inserción que permite de los widgets propios del tema.
Seguramente existan muchos tutoriales en internet para aprender a manejar este plugin, pero aquí te indico cómo hacerlo en Sydney.
Las imágenes de fondo se colocan de fondo en la fila que contiene los módulos que añadamos, por lo que si queremos cambiar, quitar o poner una imagen, debemos editar la fila y no el módulo.
En cuanto a los widgets de vídeo, no tienen ningún misterio, se manejan como todos los demás widgets, sólo tienes que saber donde está colocado para poder eliminarlo o modificarlo. En el vídeo te lo enseño.
Cómo utilizar y configurar las CATEGORÍAS
Tanto las categorías como las etiquetas, son un modo de catalogar las entradas, o los post, de WordPress.
Cualquier otra opción que utilicemos para asignar categorías no llevará a una página de "No encontrado"
Aunque creemos las categorías, estas no se mostrarán si no las adignamos un artículo o entrada. Ya que esa categoría estará vacía.
Sydney utiliza este método para poder mostrar diferentes configuraciones de sus widgets, pero aunque utilice las categorías de wordpress, volvemos a lo de antes, están vacías porque no tienen ningún artículo asignado.
Por lo tanto, las categorías en el tema Sydney de WordPress tienen dos funciones completamente diferentes:
- Catalogar las entradas y los post
- Configurar los widgets propios del tema Sydeny
Cambiar el orden del contenido del tema SYDNEY dependiendo del dispositivo donde se visualice
Cuando cargamos las demos de Sydney, todo queda muy bonito en el ordenador. En la pantalla del escritorio todo está bien colocado y queda armónico.
Pero al visualizar el contenido en un dispositivo móvil, ya sea tablet o smartphone, el comportamiento de los elementos siguen las órdenes del escritorio, mostrando los elementos de una forma que no se adapta a lo que queremos.
La solución pasa por duplicar la sección o fila que queremos mostrar de forma diferente, colocarla como queremos y hacer un juego de mostrar y ocultar cada fila o sección dependiendo de si abrimos la web en un ordenador con pantalla de sobremesa o en un dispositivo móvil.
Un consejo, realiza este paso cuando tengas configurada por completo la web, o tendrás que realizar los cambios por duplicado.
Configurar la SECCIÓN PROYECTOS y cambiar las imágenes de la galería del tema SYDNEY
El módulo que muestra una galería de imágenes en la página principal, corresponde a las imágenes destacadas de los proyectos que vamos generando de forma individual.
Cada proyecto dispone de unas opciones y características parecidas a las opciones que podemos encontrar en las entradas.
La imagen que coloquemos como destacada en el proyecto, será la que luego aparecerá en la galería al configurar Sydney.
Hay que tener presente, que aunque seleccionemos una categoría y una imagen para mostrar, debemos configurar el módulo del constructor "Page Builder" para que aparezca y se muestre con el resto de imágenes.
Crear una página de contacto
La interacción con los usuarios de nuestro sitio es muy importante si queremos que nuestra web tenga algo de vida, y la mejor forma más sencilla es es crear una página de contacto con un formulario personalizado.
Configuración básica de una página de contacto en Sydney
Para este vídeo utilizamos el plugin "Contact Form 7", uno de los más utilizados. Se configura en HTML y proporciona un shortcode con el que podemos colocar un formulario de contacto donde queramos dentro de nuestra web.
En las páginas de demostración descargadas de "Page Builder", aparece un formulario de contacto ya creado que sólo veremos si hemos instalado y activado el plugin.
Creación de un formulario personalizado
La página de contacto que hemos creado podemos personalizarla en todos los aspectos. Gracias al código CSS se puede adaptar los campos del formulario a la identidad de nuestro sitio, tanto en los colores, fuentes utilizadas o adaptabilidad, consiguiendo que la página de contacto que creemos sea 100% responsive.
Este es el código que he utilizado para la página de contacto que muestro en el vídeo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .campouno { width: 98%; margin-bottom: 10px; border: none !important; } .campomedio { width: 48%; float: left; margin-right; 2%; margin-bottom: 10px; border: none !important; } @media only screen and (max-width: 640px) { .campomedio { width: 98%; } } |
Gracias al constructor "Page Builder", también podemos configurar la página con módulos y secciones adicionales para hacerla mucho más atractiva, como colocar un mapa de situación o los datos de contacto como el teléfono o la dirección.
Google Maps ofrece la opción de insertar un mapa sin necesidad de crear cuentas especiales ni generar claves API que conecten nuestro sitio con los servicios de Google, tan sólo necesitamos una cuenta de correo para generar el código que luego insertaremos de forma gratuita en el sitio donde queramos mostrar el mapa.
Por último, es importante que esta página de contacto se encuentre accesible en todo momento, no sabemos cuándo al usuario le surgirá una duda mientras navega por nuestra web, y la mejor forma es colocar un enlace directo en el menú principal.
Instalar Sydney en un servidor gratuito
Muchos me habéis preguntado por un error que surge al instalar los archivos de la demostración, pero al preguntaros, todos teníais el mismo problema, tenéis un servidor gratuito.
Los servidores gratuitos están bien para hacer pequeñas pruebas, pero sus limitaciones impiden trabajar con fluided. Una de esas limitaciones es el escaso tiempo que permiten para subir o instalar archivos externos a su servidor.
Espero que este vídeo solucione el problema que podéis tener algunos.
Como se agrega o se quita las barras laterales de las paginas???
La barra lateral se activa o desactiva desde la configuración de la página, una vez que entras a editarla. En el apartado de "Atributos de página". La plantilla por defecto es la que activa la barra lateral o sidebar.
Hola, muchas gracias por todos estos tutoriales. Estoy usando este tema, pero no consigo que en el menú principal, cuando se despliega, se marque en otro color o se resalte de alguna manera.
Si me puede dar alguna idea de cómo conseguirlo, se lo agradezco.
Muchas gracias
Hola Irene,
Desde el personalizador de WordPress, hay una pestaña llamada "Colores" y dentro otra con el nombre "Encabezasos", ahí puedes modificar los colores tanto del menú principal como de los submenús que se despliegan
Excelente la explicación, una sola cosa, como puedo hacer para modificar el color de los widgest?
Hola gonzalo,
El color de los widgets puedes cambiarlos según los colores que escojas en el personalizador de WordPress, si quieres hacer cambios más puntuales tendrías que usar código CSS.
Si estás usando Page Builder en lugar de Elementor, tienes que saber que los creadores de Sydney han dejado de dar soporte para configurar ese plugin
Modificar el pie de página de Sydney.
todo correcto hasta llegar a "Editor". No está esta opción en el desplegable de "Apariencia" ¿?
Hola Josep,
Si no te aparece la opción de "editor" es seguramente porque tienes algún plugin de seguridad que lo tiene bloqueado, es muy usual en plugins como wordfence, sucury, ithemes... prueba a desactivar el plugin de seguridad que tengas instalado mientras realizas el cambio, luego lo vuelves a activar.
Hola felicidades por su aportación es muy valiosa. una pregunta cómo hago para quitar mi logotipo de la cabecera y poner el nombre de mi empresa, ya borré la imagen del logotipo en el escritorio y la eliminé de la biblioteca de medios, pero sigue apareciendo. Gracias anticipadas
Hola Fernando, si la eliminaste del escritorio, en el apartado del personalizador del tema y la borraste de los medios, es posible que tengas algún sistema de caché que la mantenga temporalmente. Prueba a entrar desde otro navegador diferente o desde una página de incógnito, tendría que haber desaparecido.
Hola Juan
Agradezco tu pronta respuesta, uso Google Chrome generalmente, ya lo busque con internet explorer, y desde celulares adndroide y iOs y sigue apareciendo el logo, desafortunadamente no puedo enviarte la impresión de la pantalla para que veas que en la personalización no tiene imagen seleccionada en el LOGO.
¿Hay algún lugar en donde especificar que use texto y no el logotipo?
Gracias
Hola fernando
Según el inspector del navegador, aun tienes asignada la imagen del logo en el personalizador. Puedes mirar esta captura: http://prntscr.com/jvh2eb
Prueba a cargar una imagen diferente a ver si se cambia y luego la eliminas desde el mismo personalizador. Te dejo otra captura: http://prntscr.com/jvh4en
Buenas tardes Juan, he visto que en otros temas como DIVI se puede poner un "hover" en las imágenes, estoy configurando el tema SYDNEY y me gustaría poner este efecto en algunas imágenes, me puedes decir, primero si se puede, entiendo que si, de que manera hacerlo y que código hay que usar y donde colocarlo. Muchas gracias por los "tuto" que haces que, por lo menos a mi, me están siendo de mucha ayuda.
Hola Alex, depende que tipo de efecto quieras aplicar a la imagen, puedes hacerlo de forma sencilla con código CSS desde el personalizador o algo más compleja si quieres realizar efectos dinámicos con javascript. Puede probar a instalar un plugin como SB image hover effects. Pero si quieres algo concreto, dime exactamente lo que quieres e intento ver si se puede hacer.
Hola quiero saber que tal la va este tema con la visualización en celulares y si es del caso como se puede mejorar. Gracias.
Hola María, el tema es totlamente "responsive" y se adapta a cualquier dispositivo móvil. puedes ver como se comporta según el medio en este enlace http://bit.ly/2rUcXAf
No me aparece el mapa del contacto
Help me gracias
Asegurate de copiar todo el código que aparece en la página de Google Maps, debe empezar por la etiqueta
iframey terminar con el cierre de la misma/iframe. Este código se pega en un módulo de texto o de HTML. Si utilizas el módulo de mapas tienes que crear una clave API en la cuenta de Google Developers.Por que Sydney no me permite insertar la etiqueta LEER MAS.. en mis páginas; y si lo hace donde puedo configurar para que me salga la opción.
Saludos
Hola Luis Condori, La etiqueta "Leer más..." se utiliza para cortar un texto de una entrada o página, porque consideramos que es demasiado largo, y mostrar un extracto del texto normalmente en la página de inicio. Es un enlace que dirige a la entrada o página concreta para leer el contenido completo.
Desde el editor de WordPress tradicional, en las páginas y las entradas, hay un icono que inserta la etiquete "Leer más..." en el lugar que elijas de forma automática. Desde HTML puedes escribir la etiqueta de forma manual "
Si utilizas el constructor "Page Builder" para confeccionar las páginas, debes utilizar el widget "Editor SiteOrigin" para que te aparezca la opción, si usas el widget texto o html de WordPress, tendrás que poner la etiqueta a mano.
Recuerda que "Leer más..." es una llamada a otra página o entrada diferente, por lo que no tendrá efecto si lo que quieres es ocultar texto dentro de la misma entrada o página.
Genial genial.
Como podría en el modulo tienda vender un producto digital que al comprarlo el cliente lo pueda descargar??
Cuando configuras el producto, en la ventana donde tienes que poner el precio, tienes que seleccionar que sea un "producto simple", aparecerán dos pestañas, una para indicar que es virtual y no necesita un método de envío o transporte y otra que indica que es descargable, que al marcarla te aparecerán los campos a rellenar para indicar donde se encuentra alojado el archivo.
¡Muchas gracias por tu post, está genial!
Estoy usando este tema en una web corporativa y quiero crear una página de blog con un review de las últimas entradas. ¿Podrías decirme cómo? En Atributos de página no me da la opción de "blog page" como sí sucede en otras plantillas.
También estoy usando el compositor visual Elementor por si te sirve de guía.
Gracias!
Para añadir un blog debes crear una página nueva vacia, sin nada (puedes llamarla blog, noticias, escritos...), donde wordpress irá colocando las entradas automáticamente según se vayan creando y ordenadas por fecha.
Para que WordPress sepa donde tiene que colocar las entradas, tienes que ir desde la administración a la opción "Ajustes > Lectura", seleccionas "Una página estática" y elige en las opciones desplegables la página que usas como inicio de tu web y en "Páginas de entrada" la nueva que has creado.
Por último, añade el enlace a la página nueva en el menú.