• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto

Tutorial Bettaso: 3. Personalizador (parte 2)

El 31 de enero de 2019 por dani Deja un comentario

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.

Tipografías

Llega la hora para seleccionar las fuentes para nuestro sitio web. Bettaso nos ofrece un extenso personalizador de fuentes para prácticamente cada elemento, como los textos generales (Body text) como los encabezados (H1, H2, H3…), migas de pan, paginación…

Dentro de cada elemento podremos cambiar aspectos como la fuente (familia), estilo (normal, cursiva…), el peso, el tamaño, el interlineado, el espacio entre caracteres, el set de caracteres, la alineación, prácticamente cualquier aspecto que necesitemos.

Cabecera / Portada

Posiblemente el apartado donde destinaremos más tiempo, pues se trata de la imagen principal del sitio web, lo que verán nuestros clientes cuando accedan a nuestro sitio. Cómo vamos a presentarles nuestro logotipo, nuestros textos de bienvenida, la imagen principal, etc.

El personalizador del Header (cabecera) está dividido en 4 grupos: Styles, Top Panel, Showcase Panel y Main Menu.

Styles

En este apartado definiremos el color de la cabecera del sitio web. Tenemos un panel donde elegir de toda la paleta de colores disponible, o especificar el color concreto en hexademidal.

Así mismo tenemos la posibilidad de escoger otro estilo de cabecera, como este con el logo y menú centrados:

Top Panel

El Top Panel es la barra más superior del sitio web, donde aparecen datos como la dirección, teléfono, horario de apertura, iconos sociales, etc. La información sobre dirección, teléfono y apertura se debe especificar en formato HTML. Si nos gusta la que nos propone Bettaso, solamente basta con modificar los textos. Pero también tenemos la posibilidad de sustituir los iconos llamándolos por su identificador. Estos identificadores puedes localizarlos en la web de Font Awesome.

Por supuesto podremos modificar también el color de fondo de este:

Showcase Panel

Ahora vamos a definir los textos principales de bienvenida, eslogans, llamadas de atención, etc. También podemos configurar un botón para dirigir a nuestros clientes a nuestra sección de reservas. Se puede especificar tanto una URL absoluta (http://midominio.com/ruta-a-pagina), tanto una URL relativa (/ruta-a-pagina).

Vamos a seleccionar una imagen para nuestra portada. Escoge «la mejor imagen de tu restaurante».

Y así quedaría plasmada en la portada de nuestro sitio.

Si notas que los textos no se distinguen del todo bien, existe la posibilidad de añadir una máscara de color a la imagen de fondo. Por defecto se aplica una máscara de color negro, podríamos aprovecharla y subir un poco más la opacidad, hasta conseguir un buen equilibrio entre la imagen de fondo y los textos:

Main menú

Betasso está preparada para recortar el menú principal en caso de que no quepa en pantalla (sin llegar a mostrar el menú burger de la vista responsive), cuando llega al límite, oculta el resto de elementos y muestra una etiqueta «Más». Podemos ajustar esta etiqueta en la casilla «Hidden menu items title«.

Otra opción interesante es habilitar el menú «pegajoso», que se aprecia en la vista responsive, y mantiene el botón de menú visible a lo largo de todo el scroll de la web.

Imagen de fondo

Podemos seleccionar una imagen de fondo para el contenido, que normalmente suelen ser los textos de las páginas y entradas.

Yo personalmente no uso imágenes de fondo para el contenido, pues intento que los textos se lean lo mejor posible, pero si quieres usar algún fondo temático, puedes seleccionarlo en este apartado:

Asegúrate de adaptar el color de los contenidos (body text) en la sección de tipografías.

Comprar plantilla Bettaso

Mi enlace de afiliado: http://bit.ly/2GtEMcj (La compañía me regala una pequeña comisión por la venta, sin que a ti te cueste un céntimo más, y de este modo me ayudarás a mantener la web y seguir añadiendo nuevos contenidos). Además, si me envías un correo electrónico a daniel@gestionatuweb.net, te enviaré las traducciones, tanto de la plantilla como de los plugins que la acompañan.

Enlace normal: https://www.templatemonster.com/es/temas-wordpress-tipo-58667.html

Siguiente…

Tutorial Bettaso: 3. Personalizador (parte 3)

Archivado en: Bettaso Web Restaurantes, Cursos Etiquetado como: bettaso

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Barra lateral principal

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies