ENTREPRENDIDOS

 

SESION 4

Cambiando el diseño de su sitio web

 

 

MOTO CMS te permite modificar el el diseño de tu sitio web en segundos

 

Aprende con nosotros, es gratis!

En esta lección le mostraré el panel de administración de MotoCMS 3. Si ha seguido correctamente todos los pasos de la lección anterior, tendrá un enlace en su correo para activar el período de prueba de la plantilla y acceder a la cuenta de prueba que hemos creado para usted.

 

 

1. Personalización del fondo

 

En pocas palabras, Usted puede utilizar un fondo monocromático o una foto. Todas las variaciones del cambio del fondo hay que guardar como plantillas separadas con sus propias nombres.

Así que, para personalizar el fondo de la plantilla, haga clic en la pestaña “Design” y elija la opción “Backgrounds”. Si Usted quiere utilizar una imagen en calidad del fondo de su plantilla, por favor, haga clic en “+” al lado de “Background Image” y elija la imagen necesaria.

Ahora Usted debe especificar el tamaño (Size) y la posición (Position) adecuada de la imagen del fondo. Usted puede elegir entre las siguientes opciones:

 

Original (guardar el tamaño y la apariencia originales de la imagen)
Cover (estirar la imagen al ancho de la pantalla completa, pero conservando todas las proporciones).
Contain (estirar la imagen a la altura de la pantalla sin cambiar sus proporciones).

Hay otra herramienta útil que le permite configurar la posición de la imagen del fondo.

 

Por otro lado, podemos configurar la repetición de la imagen (Tile):

Don’t repeat - la opción predeterminada. La imagen del fondo no se repite.

Repeat – permite repetir una imagen varias veces en toda la página (los tamaños originales de esta imagen no sa cambian).

Repeat X-  la imagen se repite horizontalmente.

Repeat Y - la imagen se repite verticalmente.

Fixed-  se fija el fondo. De manera predemterminada, esta opción está activada, si Usted desactiva ella, la imagen se moverá cuando se desplaza por la página.


 

2. ¿Cómo cambiar colores?

Para cambiar los colores del diseño del sitio, abra “Design” -> “Colors”.

En general, hay 25 colores predefinidos y 5 colores primarios. Dependiendo del color principal del diseño, se genera automáticamente 5 colores adicionales para el sitio y cada uno de ellos se puede editar.

Para abrir la paleta de colores y cambiar el tono del color elegido, haga clic en cualquiera de los colores ofrecidos. La herramienta le muestra el color actual (current) y el color nuevo (new), que se puede utilizar en el sitio.

Para guardar los cambios, pulse el botón “OK” y luego “Save”.

El botón “Cancel” se puede utilizar para deshacer todos los cambios.

Si todo va bien, en el panel de control aparecerá un mensaje: "Colors were saved successfully."

3. Estilos de textos

En la sección especial “Text Styles” de “Design” Usted puede crear un nuevo estilo o editar lo existente.

Para añadir un nuevo estilo de texto pulse el botón “Add Text Style”.

Style Name — campo para el nombre del estilo. El nombre del estilo puede contener 2-200 caracteres.  

Style Properties —ajustes básicos del estilo.

Preview — vista previa de todos los cambios realizados: de fuente, de tamaño de texto, de color, etc.    
 
B (Bold) — negrita.

I (Italic) — cursiva.

A (Font Color) – color de tipo de letra.

Para cambiar el color del texto hay que hacer clic en “A”.

Después de hacerlo, se aparecerá una ventana que le permite elegir un color nuevo entre los colores predefinidos o los colores adicionales o buscarlo en la paleta (opción “More colors”).

Además, hay muchas otras opciones disponibles:

Line Height — (altura de línea) una opción para configurar espaciado entre líneas.

Letter Spacing — (espaciado entre caracteres) una opción para configurar el tamaño de texto.

Link Properties — (características de enlace) una apariencia de un vínculo. La configuración predeterminada es “Normal”.

Todos los estilos existentes en el panel de control se pueden duplicar o eliminar. Después de la eliminación del estilo, aparece el mensaje: “Style was deleted successfully”, depués de la duplicación: “Style was duplicated successfully”.

4. Categoría “Temas”

Es una sección especial que contiene las opciones de edición del aspecto del sitio.

Aquí Usted puede encontrar un conjunto de ajustes que le permiten cambiar el diseño de los tipos de letras, los estilos de textos, los botones, etc. Cada uno de los temas de esta sección tiene su nombre, miniatura y version (Name, Thumbnail y Version). Cada plantilla es única, aún más, cada una de ellas se actualiza periódicamente. En esta sección del panel de control Usted puede cambiar el tema del sitio.

La categoría “Temas” presenta opciones para cambiar colores, tipos de letras, estilos de texto, listas, fondos y widgets.

 

Colors (Colores)
Hay 30 combinaciones de colores: 5 combinaciones son básicas, 20 – adicionales y 5 - regulares.

Fonts (Fuentes)
Esta sección contiene una colección de tipos de letras personalizados de Google Fonts, que se pueden utilizar para personalizar plantilla.

Text Styles (Estilos de texto)
Hay 15 estilos predefinidos.

Lists (Listas)
Para utilizar nuevos estilos de listas, hay que abrir las sección “Lists”. Aquí Usted puede administrar las listas en un editor de texto.

Backgrounds (Fondos)
Usted puede elegir su fondo entre tres fondos disponibles. Dos fondos son adicionales.

Widgets
Esta sección contiene 4 opciones: Images, Buttons, Menus, Separators (Imágenes, Botones, Menús, Separadores).

Images (Imágenes)
Aquí Usted puede encontrar los tipos de imágenes (5 tipos predeterminados).

Buttons (Botones)
Usted puede cambiar fácilmente el diseño de los botones que se muestran en el sitio. Hay cinco opciones básicas y tres adicionales.

 

Busca tu plantilla aqui!

Clase 5 Widgets de Moto CMS

Comienza a ser dueño de tu propia pagina HOY

Curso 5 como agregar videos y otras aplicaciones