Certificación Mundial de Sitios Web: Curso para Principiantes Sección 3

Curso para principiantes Sección 3

Bienvenido a la Sección 3 del Curso de capacitación mundial sobre sitios web para principiantes.

Después de completar esta sección, usted podrá:

  • cambiar las fuentes generales que se muestran en su sitio web
  • cambiar las fuentes en una página específica de su sitio web
  • cambiar los colores generales que se muestran en su sitio web
  • cambiar los colores en una página específica de su sitio web

Cambiar el tipo y tamaño de fuente

Puedes cambiar el tipo y tamaño de fuente desde la opción "Diseño" del menú (para todo el sitio web) o en cada página (para páginas individuales). Primero, nos centraremos en la fuente para todo el sitio web. En el menú "Diseño", selecciona "Colores y fuentes".


Desplázate hacia abajo en la página hasta ver las opciones del cuadro "Fuentes". Aquí podrás editar: Fuente general, Fuente del encabezado, Tamaño de fuente y Altura de línea.


Para seleccionar una nueva fuente, haga clic en el botón azul "Seleccionar fuente". En este ejemplo, editaremos la fuente principal (general) y el tamaño de fuente a las opciones Arial, Helvética, URW Gothic L, sans-serif y 16 px.

También verás un cuadro titulado Fuentes personalizadas (MetaInclusiones). Aquí puedes pegar el código específico de Google Fonts, que usaremos para el encabezado de fuente. Para ello, abre una nueva pestaña del navegador y visita Fuentes de Google sitio web, busque la fuente Merriweather, selecciónela y el sitio web de Google Fonts le mostrará algo como esto:


El código de "Estándar @ Importar" debe copiarse y pegarse en el cuadro "Fuentes personalizadas". Haga clic en "Editar" en el cuadro "Fuentes personalizadas" y pegue el código debajo del código existente, como se muestra a continuación:


Haga clic en el botón "Guardar cambios" y cierre el editor. A continuación, copie el texto de la familia de fuentes y péguelo en el cuadro "Fuente (Encabezados)", como se muestra en la imagen de abajo, y pulse "Publicar" para guardar el trabajo.


Cambiar la fuente en una página específica del sitio web

Abra su página de Términos y Condiciones, ya que aquí cambiaremos el tipo y tamaño de fuente solo para esta página.

Primero, seleccione el subtítulo "Política de devoluciones" y haga clic en la flecha desplegable junto al cuadro "Familia tipográfica" en la barra de herramientas de edición. Tenga en cuenta que esto se verá diferente si usa un editor alternativo al que usamos actualmente, TinyMCE3510 (en la esquina superior derecha puede ver el nombre del editor actual y cambiar a un nuevo modo de edición).


Selecciona la fuente Comic Sans MS y el texto resaltado cambiará a esta fuente, mientras que el resto de la página permanecerá igual. Resalta de nuevo el texto "Política de devoluciones" y, esta vez, haz clic en la flecha desplegable junto a "Tamaño de fuente" y selecciona la opción de 24 puntos. Observarás que este encabezado era, por defecto, H3 o Encabezado 3, lo cual es adecuado para esta página. Tu página de Términos y Condiciones ahora se ve así (observa la flecha roja, donde el subtítulo es más grande y tiene una fuente diferente):


Cambiar los colores generales de su sitio web

Puedes cambiar los colores generales de todo tu sitio web desde la pestaña Diseño, seleccionando la opción Colores y fuentes. En la página Opciones de diseño, podrás editar los colores de diferentes áreas de tu sitio web.

Los colores reciben un código hexadecimal o número de color, lo que los hace más específicos que, por ejemplo, simplemente llamarlos "azul oscuro". Puede introducir su código hexadecimal en el cuadro junto al elemento cuyo color desea cambiar y hacer clic en otro cuadro para guardarlo. También puede hacer clic en el botón "Seleccionar color", seleccionar manualmente un color del Asistente de color y seleccionar el botón "Usar color".

IMPORTANTE: anote el código hexadecimal individual para cada una de sus elecciones de color en un lugar seguro, como una agenda o un archivo en su dispositivo, ya que esto le ayudará si necesita editar el diseño de su sitio web. (como en la Sección 1 del curso de nivel intermedio).

Estos son los colores que hemos elegido utilizar:


Guarde su trabajo haciendo clic en los botones Guardar cambios y luego en Publicar.

Cambiar el color del texto en páginas web individuales

Abre de nuevo tu página de Términos y Condiciones. Verás que el color del encabezado ha cambiado según el color que seleccionaste en Opciones de Diseño. Este cambio se ha aplicado a todo el sitio web.


Pero es posible cambiar el color del texto en una página individual, y eso es lo que haremos a continuación. Seleccione el encabezado "Política de Devoluciones" y seleccione el menú desplegable junto al icono "Color del Texto". Esto abrirá una gama de colores preseleccionada para elegir, además de ofrecerle la opción "Más Colores".


Para este ejemplo, seleccionaremos la opción "Más colores", introduciremos el código hexadecimal #0628f8 en el cuadro de color y haremos clic en el botón "Aplicar". El encabezado cambiará de color y se verá así:


Haga clic en los botones Guardar cambios y luego en Publicar para guardar su trabajo hasta el momento.

¡Felicitaciones! Acaba de completar la Sección 3 del curso de nivel principiante. Ahora tiene una evaluación que utiliza las habilidades aprendidas en las Secciones 1, 2 y 3 de este curso, titulada Evaluación Uno. Esta evaluación debe completarse con éxito para obtener su certificación y será evaluada por un miembro de nuestro equipo de soporte de Website World.

Realice la evaluación uno aquí

question_answer Need Help?