how_to_build_templates_720p.mp4

00:00:00

¡Hola! En este videotutorial aprenderás a crear temas y plantillas que tus clientes podrán usar al crear sitios nuevos o cambiar el estilo de los existentes.

00:00:11

Solo una nota rápida antes de comenzar: para comprender completamente este proceso y utilizar las funciones de creación de temas y plantillas, debe tener al menos un conocimiento básico de cómo funcionan HTML y CSS.

00:00:24

Como verás, hemos hecho todo este sistema lo más sencillo posible, pero es necesario que al menos sepas de qué estamos hablando.

00:00:31

Bien, dicho esto, como ya deberías saber, las plantillas son sitios web listos para usar con páginas, contenidos y estilo que tú y tus usuarios pueden elegir en un punto de partida en el proceso de creación de un nuevo sitio.

00:00:41

sitio

00:00:43

En este tutorial aprenderás cómo puedes agregar nuevas plantillas, brindando a tus clientes una experiencia aún más amplia y personalizada, lo que significa que si te diriges, por ejemplo, a agencias inmobiliarias, puedes crear

00:00:53

Temas inmobiliarios personalizados que solo usted y sus usuarios podrán utilizar

00:00:58

El primer paso o mejor, el paso previo en este proceso es inspirarse para una nueva plantilla.

00:01:05

Generalmente partimos de temas existentes de WordPress, pero si tienes más imaginación que eso, puedes empezar con lo que tengas en mente, o utilizar otros recursos como sitios web existentes o plantillas de otras plataformas.

00:01:16

Simplemente tenga en cuenta cualquier problema de derechos de autor.

00:01:20

De todos modos, en este tutorial, comencemos con este tema gratuito de WordPress aquí mismo.

00:01:24

Queremos replicar algo similar a esto con este estilo muy limpio pero elegante.

00:01:28

Vayamos al creador del sitio para comenzar este proceso creando un nuevo sitio web, no usando el asistente, sino construyéndolo desde cero.

00:01:36

Vamos a darle un nombre a este sitio y guardarlo, y luego vamos a la lista de páginas.

00:01:42

Aquí podemos empezar a añadir el contenido de este sitio web.

00:01:46

Recuerde, todo lo que agreguemos a este sitio web, incluidas páginas, imágenes, opciones de comercio electrónico, opciones de inicio de sesión, widgets y todo lo demás se utilizará como contenido listo para usar que los usuarios encontrarán cuando elijan esta plantilla.

00:02:00

en el proceso del asistente

00:02:03

Bien, comencemos desde la página de inicio.

00:02:05

Crearemos un sitio web muy sencillo.

00:02:08

Lo primero que queremos agregar es un encabezado bonito, replicando lo que hemos encontrado en el tema de WordPress y en el que nos estamos inspirando.

00:02:15

Vamos a establecer la altura del encabezado.

00:02:18

Como puede ver, podemos configurar uno diferente para el escritorio y para el móvil.

00:02:21

Y luego vamos a configurar el tipo de fondo.

00:02:23

Si queremos utilizar la galería multimedia gratuita, primero debemos guardar la página

00:02:27

Así que vamos a agregar más datos antes de guardar.

00:02:29

El título principal, que es un H1, y el subtítulo, un H2

00:02:35

Y luego, como lo tenemos en la plantilla original, agreguemos también un botón.

00:02:39

Está bien, genial.

00:02:40

Dejemos el espacio horizontal

00:02:41

Este país ocupará en el encabezado todo el ancho.

00:02:44

Podríamos hacerlo menos ancho y, por ejemplo, centrarlo.

00:02:47

Pero dejémoslo en ancho completo.

00:02:49

Y luego agreguemos una animación agradable al texto para que se desvanezca desde la parte superior cuando los usuarios visiten la página.

00:02:55

Muy lindo

00:02:56

Ahora podemos configurar este widget y comenzar a agregar imágenes de fondo.

00:02:59

Seleccionándolos de la mediateca, tienes acceso gratuito a

00:03:03

Elijamos una imagen en la categoría de computadoras como ésta

00:03:07

Tan pronto como lo guardemos, verás en la vista previa que se usa como fondo para el encabezado.

00:03:12

Veamos en la página de dispositivos, página de vista previa, cómo va nuestro sitio.

00:03:16

Lindo

00:03:17

Pero el botón no está alineado como queremos

00:03:19

Bien, volvamos al editor del sitio.

00:03:21

Y cambiemos la alineación del botón.

00:03:23

Esto se aplica solo en computadoras de escritorio, en dispositivos móviles, todos los botones se bloquean de forma predeterminada.

00:03:30

Bueno, mejor, pero todavía hay una cosa.

00:03:32

Necesitamos hacer el encabezado un poco más alto en el escritorio para replicar más fielmente la plantilla original.

00:03:38

Nos inspiramos en

00:03:41

Y ahora volvamos al creador del sitio y cambiemos la altura del encabezado para el escritorio.

00:03:45

Dejaremos el del móvil a pantalla completa

00:03:49

Guardemos todo esto y comprobemos de nuevo el resultado.

00:03:51

Está bien, hermosa.

00:03:53

Ahora, solo para informarle, podríamos haber creado un control deslizante similar al que ve en el equipo de WordPress.

00:03:57

Pero antes que nada, realmente no nos gusta.

00:04:00

Y en segundo lugar, queríamos crear algo rápido.

00:04:02

En cualquier caso, encontrarás tutoriales que te explicarán cómo crear todo tipo de slider en la sección de ayuda de la plataforma.

00:04:08

Ahora es el momento de comenzar a agregar más contenidos debajo del encabezado principal.

00:04:12

Usaremos el widget de columnas de texto.

00:04:14

Así que vamos a agregarlo a la página y luego hagamos clic en este widget para editar sus detalles y contenidos.

00:04:21

Lo primero que podemos hacer es agregar un título y un subtítulo a esta sección.

00:04:25

Podemos hacer esto ingresando el contexto que queremos en estos dos campos aquí y guardándolo.

00:04:30

Ahora podemos comenzar a agregar columnas con texto a este widget.

00:04:34

Una forma sencilla de mostrar bloques de contenido con una imagen o un icono en formato de cuadrícula

00:04:38

En este formulario podemos agregar un título, un subtítulo si queremos y luego el texto real que se mostrará en esta columna.

00:04:45

También podemos agregar una o más imágenes o como lo estamos haciendo ahora elegir un ícono de la biblioteca gratuita de íconos que puedes usar.

00:04:52

Bien, guardemos esto y veamos cómo se ve.

00:04:54

Bueno, digamos

00:04:56

Ahora podemos volver al editor del sitio y agregar algunas columnas más.

00:04:59

Omitiremos este proceso ya que es exactamente lo mismo que hemos hecho antes.

00:05:04

Y aquí están

00:05:05

Nuestras tres columnas y texto con los iconos que hemos seleccionado

00:05:10

Ahora queremos agregar otro elemento a la página: un botón grande y atractivo como llamado a la acción justo debajo de estas columnas de texto.

00:05:17

Entonces, hagamos clic nuevamente en agregar widget y luego elijamos el widget de botones.

00:05:22

Al abrirlo volvemos a tener una lista en este caso podemos crear un nuevo botón haciendo click en el enlace aquí

00:05:28

Podemos especificar todas las opciones que necesitamos y queremos el tipo de enlace, el enlace real, el texto que se muestra en el botón, etc.

00:05:35

Bueno, guardemos esta página y aquí está.

00:05:38

Ahora para completar el contenido de esta página y replicar lo más fielmente posible la página de inicio del tema en el que nos inspiramos, nos falta la sección del blog.

00:05:48

En este momento podemos crear esto usando un widget de lista y luego agregando a cada proceso una herramienta de elemento de esta lista.

00:05:54

Así que volvamos a nuestra lista de widgets en la página de inicio y hagamos clic nuevamente en el botón para agregar un nuevo widget.

00:05:59

Esta vez elegiremos el tipo de widget de lista y a medida que lo agregamos a la página ahora podemos hacer clic en él para editar su contenido y detalles.

00:06:07

Nuevamente, vamos a darle a este widget un texto de introducción y guardarlo.

00:06:11

Ahora podemos empezar a agregar elementos a esta lista que es la publicación en nuestro blog.

00:06:17

Hagamos clic en el botón Agregar un elemento a la lista para que podamos editar los detalles de este artículo.

00:06:22

En este formulario aquí ahora podemos ingresar el título, el subtítulo, el resumen que es el texto que aparece en lista como la que estamos creando ahora, el cuerpo del artículo y si

00:06:31

queremos también podemos subir una o varias imágenes desde nuestro ordenador

00:06:35

Al igual que lo hacemos aquí, especificando también cómo queremos alinear estas imágenes en el escritorio, en el móvil siempre se muestra encima del cuerpo principal del elemento de la lista.

00:06:44

Tenga en cuenta también que si agrega más de una imagen, este sistema creará automáticamente un control deslizante.

00:06:52

Está bien, genial, lo hemos guardado, así que vamos a ver el sitio web.

00:06:56

Aquí está el post que acabamos de publicar con la imagen que subimos y el resumen que escribimos.

00:07:00

Ahora, terminemos rápidamente este sitio web de muestra que usaremos como base para nuestra nueva plantilla agregando una nueva página.

00:07:08

Regresemos a la lista de páginas y luego agreguemos una nueva, por ejemplo, acerca de nosotros con un encabezado y un bloque de contenido.

00:07:14

El proceso para personalizar y crear este widget es el mismo que hemos visto antes, así que saltaremos directamente a la página terminada aquí.

00:07:23

Veis que en el menú de navegación tenemos una nueva página y si pinchamos en este enlace la abrimos con su cabecera roja, su bloque de contenido y slider de imágenes.

00:07:32

Muy bien, ahora hemos terminado de agregar contenidos al sitio web que transformaremos en una plantilla, así que es hora de personalizar su estilo y apariencia.

00:07:41

Para hacer esto necesitamos hacer clic en esta pestaña de estilo en el creador del sitio.

00:07:45

Como puede ver, hay algunas cosas que puede hacer aquí, comenzando por cambiar el tema general o personalizando las fuentes y los colores de ciertos elementos del sitio web, como encabezados o párrafos.

00:07:57

Si bien estas personalizaciones son útiles cuando no conoces CSS o simplemente quieres agregar un cambio rápido a un sitio web, ya que estamos creando una plantilla y un tema, debemos avanzar un poco.

00:08:06

Más profundamente, se agrega algo de CSS real en esta sección aquí mismo.

00:08:11

La forma en que funciona el sistema es que puedes escribir todo el código CSS que quieras en este cuadro y se aplicará a este sitio web, lo que te permitirá personalizar la forma en que se ve en un

00:08:19

forma totalmente flexible

00:08:21

Pero, ¿cómo sabes qué CSS necesitas agregar? Buena pregunta

00:08:25

Para hacer las cosas lo más fáciles posible, hemos creado una hoja de estilos esqueleto que es un conjunto de identificadores vacíos que cubren más o menos todos los elementos de las páginas que creas con la plataforma.

00:08:35

y que podrás rellenar rápidamente con las reglas CSS que quieras

00:08:39

Para importar esta hoja de estilos vacía ya preparada, puede hacer clic en este botón aquí mismo y aquí está lista para ser completada y personalizada con las reglas CSS que desee para este sitio web.

00:08:49

Para comenzar a escribir reglas y definiciones de estilos, volvamos al tema original del que nos inspiramos y, como primer paso, veamos qué fuente está usando.

00:09:00

Ahora podemos inspeccionar cualquier elemento. Tenga en cuenta que esto es algo muy útil e importante. La herramienta de inspección está disponible en Chrome y Firefox. Le recomendamos encarecidamente que utilice uno de estos dos navegadores.

00:09:11

y sus herramientas para desarrolladores web

00:09:13

De todos modos, estábamos diciendo que al inspeccionar un elemento podemos obtener la fuente que están usando aquí, aquí está abierto, ahora podemos ir a buscar esta fuente en Google Fonts y

00:09:22

Úselo en nuestro estilo usando el método de importación y luego agregando la familia de fuentes a esta regla aquí mismo que controla todo el cuerpo y todo lo que está dentro de él.

00:09:31

Bien, guardemos nuestro CSS y, como puedes ver, la fuente ha cambiado de la predeterminada que teníamos antes a open -sens que acabamos de incluir de Google Fonts.

00:09:42

El esqueleto CSS está organizado en orden comenzando con las reglas más generales hasta las más granulares y específicas.

00:09:49

Una de las primeras cosas que podemos controlar son los encabezados principales y cualquier encabezado particular en el encabezado, por ejemplo, el h1 que vemos aquí.

00:09:57

Para cambiar la apariencia, podemos usar el contenido del encabezado y la regla CSS h1

00:10:03

Agreguemos algunos estilos aquí y guardemos esto para ver cómo se ve.

00:10:08

Bien, casi estamos allí en la versión móvil. Verifiquemos la versión de escritorio. No hay núcleos y el fondo está bien, pero el ancho de este elemento es incorrecto.

00:10:16

Así que volvamos a nuestra definición CSS y arreglémosla.

00:10:19

Podemos agregar una regla de ancho máximo, por ejemplo, de 100 píxeles y ahorrar una ganancia. Vayamos nuevamente al sitio, entonces sí, mucho mejor ahora.

00:10:28

Ahora podemos cambiar los subtítulos h2 aquí como ves volviendo al cuadro CSS personalizado, no tenemos una regla predefinida para este elemento, todo lo que necesitamos hacer es copiar el h1.

00:10:39

Regla que cambia ligeramente reemplazando h1 con h2

00:10:44

Ahora podemos agregar las reglas que queramos aquí para hacer que este elemento de la página se vea lo más parecido posible al modelo que elegimos, por ejemplo, agregando un relleno y un color de fondo con

00:10:53

cierta opacidad y demás

00:10:55

Como de costumbre, guardemos y verifiquemos el resultado.

00:10:58

No está mal, pero probablemente sea necesario reducir un poco el tamaño de la fuente.

00:11:02

Bien, volvamos al editor CSS y cambiemos esto a una fuente un poco más pequeña, por ejemplo, 15 píxeles en lugar de 20.

00:11:10

Vamos a comprobarlo ahora

00:11:12

Sí, mucho mejor ahora.

00:11:15

Una nota importante antes de continuar

00:11:17

Uno de los aspectos más poderosos de toda esta plataforma es que es móvil y adaptable a computadoras de escritorio, lo que significa que su sitio web se verá genial en teléfonos inteligentes, computadoras de escritorio y pantallas más grandes.

00:11:28

Para darle aún más control y utilizar esta función lo mejor posible, puede y debe utilizar consultas de medios.

00:11:33

en tu CSS

00:11:34

Ya hemos preparado algunos para ti, por ejemplo aquí, donde puedes cambiar cómo se ven los títulos principales en el escritorio y en el móvil.

00:11:42

Bueno, habiendo tocado brevemente la consulta de medios

00:11:44

Tema ahora hemos terminado con estos dos elementos y podemos abordar botones y enlaces.

00:11:49

Queremos usar exactamente el color rojo que se usa en el tema original y, por lo tanto, nuevamente podemos usar las herramientas de inspección en Chrome y Firefox para obtener el valor accidental de este color.

00:12:00

Aquí todo lo que tenemos que hacer es copiarlo y pegarlo aquí para los enlaces y aquí para los botones. Recuerde que los botones por defecto también tienen un borde, por lo que debemos usar el color.

00:12:09

También para la regla del color del borde.

00:12:12

Como puedes notar, los botones en el tema original también tienen una sombra o algún tipo de borde inferior o algo así.

00:12:19

Inspeccionemos este botón y aquí está, copiemos y peguemos directamente esta regla de sombra de cuadro de esta manera.

00:12:27

Muy bien, guardemos ahora y veamos cómo se ven los botones.

00:12:31

Hmm, el botón de cierre no tiene cigarro

00:12:33

Necesitamos jugar un poco con el relleno y quizás forzar también la variación del texto en mayúsculas.

00:12:37

Bien, volvamos al editor CSS y agreguemos un poco más de relleno lateral a la variación de texto. Nuevamente guardemos y listo. Bien, ahora este botón se ve exactamente como lo queríamos.

00:12:49

Hablando de botones, ahora podemos personalizar este botón aquí mismo, cuando agregamos un solo botón en un widget de botones, el sistema lo trata automáticamente como un bloque de visualización y, por lo tanto, podemos personalizar la forma en que se muestra.

00:13:00

Se ve diferente a cómo lo hacemos para el resto de los botones.

00:13:03

Puedes ver el código CSS aquí mismo y, por ejemplo, podemos hacerlo más grande centrado con el truco de margen automático y con un peso fijo.

00:13:13

Ah, ahí está mucho mejor ahora, ¿no?

00:13:16

Bien, si nos movemos hacia abajo en nuestro esqueleto CSS y hacia arriba en el sitio web, ahora podemos personalizar la forma en que se ven el encabezado superior y la barra de navegación.

00:13:24

Como puede ver aquí, el modelo que estamos usando tiene una barra de navegación blanca con más relleno que el que tenemos actualmente y estamos a punto de solucionar esto.

00:13:32

El identificador CSS que podemos usar para controlar cómo se ve la barra de navegación en el escritorio y el móvil es la navegación principal y, como puede ver aquí, hemos agregado algunos CSS para configurarlo.

00:13:43

Fondo y relleno

00:13:45

La barra de navegación es el elemento que más se diferencia entre el móvil y el escritorio y, por lo tanto, es donde se encuentran las consultas de medios.

00:13:52

se utilizan ampliamente

00:13:54

Aquí puede ver la parte para administrar la versión de escritorio de la barra de navegación, en particular, configurar el peso del color de los menús, por ejemplo, configuremos estos valores y vayamos al tema original.

00:14:04

A ver si hay algo especial que queramos que se transfiera.

00:14:06

Oh sí, parece que el espaciado entre letras es diferente, así que simplemente copiamos nuestra regla en nuestro CSS aquí.

00:14:15

Guardemos esto y ahí lo tienes, los menús en el escritorio se ven muy similares al modelo que estamos replicando, solo necesitamos cambiar el aspecto mental activo ahora y lo hacemos yendo a

00:14:25

Volviendo al editor CSS y cambiando la regla para los enlaces de la barra de navegación activa, aquí queremos eliminar el gran fondo y agregar otro estilo para identificar el menú actual, por ejemplo, mostrándolo.

00:14:38

testado

00:14:39

Bien, de nuevo guardemos esto y volvamos a cargar nuestro sitio web de escritorio. Sí, ahora tenemos nuestros menús superiores para cargar exactamente como queríamos.

00:14:48

Ahora debemos pasar a la navegación móvil del sitio y todo lo que tenemos que hacer es desplazarnos un poco más abajo en el cuadro de reglas CSS para editar las reglas para la barra superior.

00:14:57

y botones de navegación en el móvil

00:15:01

Las dos cosas principales que podemos hacer aquí son cambiar el aspecto de los botones, en este caso solo tenemos el botón de menú pero podemos tener el carrito de compras, la búsqueda de inicio de sesión y otros botones y también cambiar

00:15:11

el estilo del menú que se desliza hacia abajo cuando hacemos clic en el botón

00:15:15

Primero que todo, seleccionemos los botones.

00:15:17

Aquí podemos quitar la sombra que tenemos para todos los botones, cambiar el color y el fondo, no olvides cambiar también el color del borde y listo el botón ahora está con este estilo que queríamos.

00:15:28

Para cambiar el estilo de los elementos del menú desplegable y del menú, podemos usar esta regla CSS aquí y, por ejemplo, podemos establecer el fondo en blanco.

00:15:37

Está bien, genial, sé que te estás divirtiendo y ahora podríamos seguir jugando con el tema CSS, cambiando todos los demás elementos de este sitio web, pero nos detendremos aquí por dos razones.

00:15:47

Ahora que tienes claro el concepto, lo único que tienes que hacer es editar el contenido de este cuadro CSS aquí mismo y ver inmediatamente cómo estos cambios afectan a tu sitio web.

00:15:56

Este carácter en CSS debería hacer un buen trabajo al darte una pista de todos los cambios posibles que puedes hacer y, sobre todo, tienes la herramienta mágica de inspección, simplemente inspecciona un elemento que

00:16:06

Si quieres cambiar, copia su regla en el CSS y personalízala como quieras.

00:16:12

Es así de simple

00:16:17

Bien, ahora que terminamos de cambiar el estilo de nuestro sitio web, podemos ver rápidamente cómo transformar este sitio web en un tema y una plantilla que usted y sus clientes pueden usar al crear.

00:16:27

Un nuevo sitio o cambiar el estilo de uno existente

00:16:30

Pero antes de continuar solo un segundo de teoría para entender rápidamente de qué estamos hablando.

00:16:36

En primer lugar, un sitio web se compone de contenidos, páginas, textos, imágenes, vídeos, titulares, etc. y estilo.

00:16:46

Aquí solo estamos hablando del estilo, es decir, de cambios que afectan la apariencia de un sitio web, pero no su contenido.

00:16:53

Para entender este concepto aún mejor, puedes intentar cambiar el tema de un sitio web en la pestaña de estilo y notarás que, si bien los colores, las fuentes y los botones cambian, el estado real del contenido siempre es el mismo.

00:17:06

Un tema es el CSS que define cómo se ve un sitio web.

00:17:11

En los últimos 15 minutos hemos estado editando el CSS de un sitio web, esencialmente creando un nuevo tema.

00:17:17

Cuando seleccionas un tema en la sección de estilo del creador de sitios, básicamente estás aplicando a ese sitio web un conjunto predefinido de reglas CSS.

00:17:26

Finalmente, una plantilla es una combinación de contenidos y estilo, un sitio web listo para usar, un sitio web completo que usted y sus clientes pueden usar para comenzar con algo prediseñado y un tema que es un CSS predefinido.

00:17:47

Bien, ahora que entiendes este concepto, haremos lo siguiente:

00:17:50

Obtenga el CSS que hemos estado escribiendo y transformándolo en un tema para que pueda reutilizarse en la sección de estilo del creador del sitio.

00:17:58

Aplique ese tema al sitio web que hemos estado construyendo y transforme ese sitio web, que recuerda la combinación de contenidos y estilo, en una plantilla para que usted y sus clientes puedan usarlo al crear.

00:18:11

un nuevo sitio

00:18:13

Bueno, listo, vamos.

00:18:15

Lo primero que debemos hacer es volver a la página de inicio del sitio web y hacer clic en temas.

00:18:21

Aquí hacemos clic en crear un nuevo tema y copiamos y pegamos en este cuadro de aquí el CSS que hemos creado para la web en la que hemos estado trabajando así

00:18:32

Luego le damos un nombre a este nuevo tema, seleccionamos el sitio web de demostración para este tema y cargamos una captura de pantalla (generalmente, esta es una captura de pantalla de la vista previa del formulario) y la guardamos.

00:18:45

A partir de ahora, este nuevo tema estará disponible en la sección de temas de la pestaña de estilos del creador del sitio.

00:18:52

Ahora es el momento de crear una plantilla que recuerde básicamente un sitio web reutilizable al que se le ha aplicado un tema.

00:18:59

Entonces volvamos al panel de control, haga clic en Plantillas y luego en Crear una nueva plantilla.

00:19:05

Lo primero que debemos hacer aquí es seleccionar de este menú desplegable el sitio web que queremos transformar en plantilla.

00:19:10

Es tan sencillo como que una vez elegido el sitio web que queremos transformar en plantilla podemos darle un nombre elegir algunas etiquetas y agregarlo a una o varias categorías y

00:19:20

Finalmente cargamos la imagen o captura de pantalla que queremos mostrar en la lista de plantillas en el asistente de creación de sitios web y eso es todo si nosotros o nuestros clientes comenzamos a crear un nuevo sitio web y elegimos

00:19:32

Utilice el asistente y veremos la nueva plantilla que acabamos de crear en la lista aquí y podremos usarla como un sitio listo para usar al igual que todos los demás sitios y

00:19:42

Recuerde que solo usted y sus clientes verán esta nueva plantilla.

00:19:47

Vaya, eso fue largo, pero espero que todo haya quedado claro y que ahora tengas una mejor idea de cómo usar el creador de sitios y cómo crear temas y plantillas nuevos y hermosos con él.

00:19:57

él

00:19:58

Gracias por ver y adiós.