No es necesario conocer nada de código para manejar WordPress y Divi. Peeero si quieres lograr diseños y elementos que estén fuera de las limitaciones que nos dan éstas herramientas, es un súper gran plus que conozcas al menos lo básico de los códigos que comúnmente componen una página web.
Siendo: HTML, CSS, JAVASCRIPT y en caso de WordPress incluso algo de PHP. Si no eres desarrollador, tranquilo, no es necesario que hagas un máster de cada uno. Como digo, lo importante es conocer al menos lo básico.
Para mis suscriptores y lectores habituales, conocer ésto significará que podrán sacar más provecho a los trucos y tutoriales que subo a mi Blog.
En ésta ocasión empezaremos con HTML. ¡Espero que disfruten el Post y les sea de mucho provecho!
¿Qué es HTML?
La definición formal es:
«HTML (Hypertext Markup Language) es un lenguaje de marcado utilizado para crear páginas web.»
Pero en cristiano, se refiere a los elementos que constituyen la estructura de la página web. Digamos los ladrillos de la pared que es una página.
HTML define el contenido de una página web, utilizando etiquetas (también conocidas como marcas) para especificar distintos elementos, como encabezados, párrafos, imágenes, enlaces, listas y mucho más.
Cada etiqueta HTML se encierra en corchetes angulares (< y >), y suele tener una estructura de apertura y cierre, por ejemplo: <etiqueta>contenido</etiqueta>, como veremos más adelante.
¿Qué es Divi?
Divi es un constructor visual que permite agregar y editar elementos dentro de una página web, de una forma sencilla y muy visual. Cada elemento que agrega Divi, llamados módulos, están estructurados con HTML como su base. Cabe mencionar que no es necesario saber manejar HTML para usar Divi.
Se integra con WordPress, una de las plataformas de gestión de sitios web más populares en el mundo, y permite a los usuarios crear páginas web con una interfaz visual y sin necesidad de escribir código.
Psssst… Si aún no cuentas con el tema Divi, puedes adquirir la instalación y activación de una licencia desde aquí: Licencia Tema Divi 1 sitio
Por qué es importante entender HTML básico
Aunque NO es obligatorio conocer HTML para manejar WordPress como gestor de contenidos y Divi como constructor visual de páginas web, es bueno conocer al menos lo básico de los componentes generales con los que trabaja una página web. Dígase HTML, un poco de CSS para los estilos, Javascript quizá, etc. Al menos si deseas construir páginas más avanzadas o que salgan fuera de los parámetros que establecen tanto WordPress como Divi.
¿Es necesario saber HTML en herramientas no code como éstas?
Si, WordPress y Divi son herramientas no code, lo cuál implica que se crearon pensando en usuarios que no conocen código. Pero créeme que al conocer al menos lo básico, en éste caso de HTML, te da un mayor control sobre lo que estás construyendo y una mejor capacidad de personalización.
Por otro lado, la mayoría de usuarios que visitan mi blog vienen por trucos para lograr determinadas cosas avanzadas en WordPress o Divi, y para realizar esos trucos, conocer lo básico de HTML les viene como anillo al dedo. Sobretodo ahora que se vienen más trucos con PHP, vamos a hacer que WordPress haga lo que se nos dé la gana.
Por cierto, voy a estar sacando muchos trucos nuevos para WordPress, Woocommerce y Divi, así que suscríbete a mi boletín de correo para no perderte nada.
¿Qué son los elementos o etiquetas HTML?
Los elementos HTML son etiquetas que describen la estructura y el contenido de una página web. Cada elemento HTML envuelve una porción de contenido y le da un significado específico. Por ejemplo, la etiqueta <h2> se utiliza para describir un encabezado de nivel 2 o mejor dicho, un subtitulo; mientras que la etiqueta <p> se utiliza para describir un párrafo de texto.
Véamos un ejemplo:
<h2>Subtitulo Encabezado</h2>
<p>Este es un párrafo debajo del subtitulo h2 que acabamos de crear</p>
En éste caso la etiqueta «h2» envuelve el texto «Subtitulo Encabezado». Iniciando con <h2> y cerrándo con </h2>. Puedes ver que las etiquetas de cierre son lo mismo pero con un «/» al inicio.
Puedes notar el mismo patrón en la etiqueta «p» de párrafo.
Éste pedazo de HTML se interpretará de la siguiente forma:
Subtitulo Encabezado
Este es un párrafo debajo del subtitulo h2 que acabamos de crear
Genial, ¡Ya sabes agregar subtitulos y párrafos con HTML!
¿Qué son los atributos HTML?
Los atributos HTML son valores adicionales que se pueden agregar a las etiquetas HTML para proporcionar información adicional o personalizar la apariencia y comportamiento de un elemento en una página web.
Los atributos se escriben dentro de la etiqueta HTML y se definen como una pareja nombre-valor. Por ejemplo:
<p id="texto" class="primer-parrafo">Texto de Ejemplo</p>
En este ejemplo, el atributo id especifica un identificador único para éste «p» o párrafo y el atributo class le asigna una clase CSS. El punto es que hemos agregado infromación adicional a ésta etiqueta. Y como se dijo, se agrega poniendo el nombre del atributo, como id seguido de un = y luego el valor del atributo, que en ése caso es «texto» (entre comillas).
Algunos de los atributos HTML más comunes incluyen:
class: Este atributo se utiliza para especificar una clase CSS que se aplicará a un elemento.id: Este atributo se utiliza para especificar un identificador único para un elemento, que luego puede ser utilizado para referenciar el elemento en CSS o JavaScript.style: Este atributo se utiliza para especificar un estilo en línea para un elemento.src: Este atributo se utiliza para especificar la ubicación de un recurso, como una imagen o un archivo de audio.alt: Este atributo se utiliza para proporcionar una descripción alternativa para un elemento, como una imagen o una descripción de una gráfica.href: Este atributo se utiliza para especificar la ubicación de un recurso al hacer clic en un enlace.
No te vayas a complicar con todo éste tema, lo importante hasta ahora es simplemente que sepas qué es un atributo y cómo agregarlo.
Psst sestoy seguro que estos artículos también te encantarán:
Elementos HTML de la estructura básica de una Web
Hay algunos elementos o etiquetas que definen la estructura básica de una web. Definen secciones generales.
Aquí hay una lista de algunos de los elementos HTML básicos:
- <html>: Define el inicio y el final de la página o documento HTML.
- <head>: Contiene información sobre el documento, como el título y las hojas de estilo.
- <body>: Contiene el contenido visible de la página web.
- <header>: Contiene encabezados, como el logotipo y el menú de navegación.
- <main>: Contiene el contenido principal de la página web.
- <footer>: Contiene información sobre el pie de página, como el copyright y los enlaces a redes sociales.
No nos vamos a centrar mucho en ellos porque NO vamos a crear una web HTML desde cero (para eso usamos WordPress y Divi), pero es bueno que sepas que están allí y que la mayoría de páginas web siguen ésta estructura.
Mención especial al header y el footer que corresponde a la sección donde está el menú de navegación y al pie de página respectivamente, que posiblemente mencionemos en algunos tutoriales.
Elementos o etiquetas HTML más usadas
Dijimos que las anteriores etiquetas a pesar de ser muy usadas en creación web, no las íbamos a ver en profundidad ya que se utilizan más para cuando se construyen sitios web desde cero. Pero hay otro grupo de elementos que sí vamos a verlos constantemente en nuestro trabajo diario como diseñadores o desarrolladores, Y que es bueno conocer al menos su función y uso.
1. Etiqueta <a> o de enlace
¿Quién no ha visto o necesitado agregar enlaces a una web? Pues la etiqueta responsable de que existan en una web es la etiqueta «<a>». Ésta etiqueta debe envolver todo lo que deseas que sea enlazado. Puedes envolver texto:
<a>Haz click aquí</a>
… Imágenes u otros elementos HTML:
<a><img src=""></a>
Cabe mencionar que la etiqueta así como la he usado hasta ahora está incompleta. Seguro te estarás preguntando: Si es la etiqueta de enlace, ¿Dónde se pone la URL?. Para ello la etiqueta <a> trabaja con el atributo href. De la siguiente manera:
<a href="https://victoraqui.com">Haz click aquí</a>
Hay otros atributos que se pueden agregar a la etiqueta <a>, entre ellos:
target: Este atributo especifica en qué ventana o marco deberá abrirse el enlace. Los valores comunes incluyen_blank(Al agregar éste valor, el enlace se abre en una nueva pestaña o ventana),download: Este atributo especifica si se debe descargar el archivo en lugar de abrirlo en un navegador.rel: Este atributo describe la relación entre la página actual y la página a la que se está enlazando. Los valores comunes incluyennofollowyalternate. Seguro haz escuchado hablar sobre el nofollow en temas de SEO.title: Este atributo proporciona una descripción o información adicional sobre el enlace. Es el texto que aparece cuando pasas el mouse sobre un enlace.
Veámos un ejemplo utilizando todos los atributos:
<a href="https://victoraqui.com" target="_blank" rel="nofollow" title="Enlace de acceso" download>Click aquí</a>
y el resultado sería éste:
Click aquíGenial, ¡Ya sabes trabajar con enlaces en HTML!
2. Etiqueta <img> o de Imagen
Otro componente importante dentro de una web son las imágenes. Para agregarlas utilizaremos la etiqueta <img>. A diferencia de las que hemos visto hasta ahora, ésta etiqueta es de autocierre. Lo cual significa que no es necesario agregarle una etiqueta de cierre. Por ejemplo, no se suele poner <img></img>, sino sólo <img>.
Tiene sentido porque ésta etiqueta sólo implica una imagen, por lo que, ¿qué otro contenido podría envolver?.
Bien, igual que con la etiqueta anterior, ésta funciona con una serie atributos:
src: Especifica la URL de la imagen que se va a mostrar.alt: Especifica un texto alternativo que describa la imagen. Este atributo es importante porque puede ser leído por lectores de pantalla para personas con discapacidad visual. Además es muy imporatnte para el SEO. Por lo que se aprovecha para agregarle palabras clave relacionadas.widthyheight: Especifican el ancho y la altura de la imagen en pixels.title: Especifica un título para la imagen, que suele ser mostrado como un tooltip al pasar el cursor sobre la imagen.
<img src="https://victoraqui.com/wp-content/uploads/2023/02/Logo-victoraqui.png" alt="Descripción de la imagen" title="Título de la Imagen">
Ésto se vería así:
3. Etiqueta <p> Párrafo
A ésta etiqueta ya la hemos visto en acción más arriba. La etiqueta <p> representa a un párrafo de texto y se caracteriza porque por defecto posee una propiedad de bloque, ésto implica que ocupa todo el ancho del elemento en el que esté contenido.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
4. Etiqueta <span> texto
Ésta etiqueta es similar a la anterior. También envuelve textos. Pero así como el <p> por defecto tenía la propiedad de bloque, la etiqueta <span> posee la propiedad inline o en línea. ¿Qué significa ésto? Que sólo va a ocupar el ancho que corresponde a su contenido. Puede formar parte de una línea de texto sin que empuje a las demás por ocupar todo el ancho. De ahí que se puede ubicar en línea.
Véamos un ejemplo:
<p>Lorem ipsum dolor <span>sit</span> amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.</p>
Tenemos el mismo párrafo que vimos en <p>, pero ahora hemos envuelto la palabra «sit» con la etiqueta <span>, y como puede verse aquí abajo, no se altera el orden:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
Generalmente usamos la etiqueta <span> para darle propiedades a porciones específicas de un texto.
Por ejemplo, si utilizo ésto:
<p>Lorem ipsum dolor <span style="background-color:red; color:white;">sit</span> amet,
consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit
amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem
velit, viverra eu malesuada ut, convallis vel leo.</p>
Nos dará como resultado ésto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
Lo que se hizo fue agregar estilos CSS utilizando el atributo STYLE (color de fondo rojo y color de letras blanco) sólo a la etiqueta <span>.
Si aún no sabes qué es CSS, descuida, nos referimos a código para añadir estilos a los elementos HTML, ya hablaremos a profundidad sobre CSS en otro artículo. (Así que para no perdértelo, no olvides suscribirte a mi Newsletter, guiño guiño)
El punto del ejemplo es ver que podemos agregar propiedades a porciones específicas del texto utilizando la etiqueta <span>.
Tip para Divi Users: El ejemplo que acabamos de ver es genial para saber cómo resaltar alguna parte del texto dentro del módulo texto de Divi. Recordemos que si cambiamos de color en texto o damos un color de fondo, se aplica a TODO el texto. Con <span> podemos modificar sólo la parte que deseamos. Saber lo básico de código es genial…
5. Etiqueta <div> Contenedor
En ejemplos anteriores hemos visto que pueden utilizarse etiquetas dentro de otras etiquetas (Por ejemplo el <span> dentro del <p>). Incluso puede usarse imagenes (<img>)dentro del <p>. Pero si deseamos utilizar un elemento como contenedor de otros o simplemente agregar un bloque y no necesariamente de texto, lo más correcto es utilizar la etiqueta <div>. Ésta etiqueta se utiliza cómo un bloque contenedor, y puede utilizarse para contener cualquier elemento.
El elemento <div> es tan usado y tan versátil que en honor a éste, la empresa Elegant Themes, llamó a su constructor visual «Divi»
Vamos a crear por ejemplo un bloque <div> que contenga en su interior una imagen y debajo un párrafo. Y por puro capricho voy a agregar el atributo class para definirle una clase (vic-bloque). Ésto último no es obligatorio, pero lo hago para que se vea cómo agregarle atributos.
<div class="vic-bloque">
<img src="https://victoraqui.com/wp-content/uploads/2022/07/Miniatura-Formularios-Divi-2.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus
ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque
velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada
ut, convallis vel leo.</p>
</div>
Ésto se vería así:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
Aquí hice un poco de trampa y le agregué el fondo gris y un pequeño relleno con CSS, pero fuera de eso fue HTML puro.
Por cierto, la imagen pertenece a un artículo real que puedes encontrar en mi blog
6. Etiqueta del <h1> al <h6> Encabezados
Éstas etiquetas son tan usadas como el <p> o el <div>. La mayoría de textos necesitan títulos.
Podemos elegir desde el <h1> que vendría a definir un título principal. Pasando por menores jerararquías como <h2> subtitulos, <h3> sub-subtitulos y así sucesivamente hasta <h6>.
Cabe mencionar que por cuestiones de SEO, es recomendable que en la página sólo haya un título principal o <h1>. Por lo que, mayormente trabajarás con <h2> o <h3>, etc.
¿Que tal si a nuestro ejemplo anterior le agregamos un título <h3>?
<div class="vic-bloque">
<img src="https://victoraqui.com/wp-content/uploads/2022/07/Miniatura-Formularios-Divi-2.jpg">
<h3>Mi primer Título</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus
ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque
velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada
ut, convallis vel leo.</p>
</div>
El resultado sería:
Mi primer Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
Prácticamente hemos emulado lo que hace el módulo Anuncio de Divi, pero totalmente personalizado.
¡Imagina las posibilidades!-
7. Etiqueta <style> o Estilos
Otra etiqueta importante es la de estilos, y sirve para envolver código CSS personalizado. El código CSS se utiliza para agregar estilos a los elementos HTML, tales como: colores de texto, colores de fondo, tamaños, márgenes, rellenos, posiciones, y mucho más.
En éste artículo no vamos a profundizar en CSS (Eso lo haremos en otro, suscríbete guiño guiño), pero es bueno que sepas que podemos agregar CSS gracias a éstas etiquetas.
Si eres seguidor de mi blog, verás que utilizamos ésta etiqueta en muchos de mis tutoriales.
En un anterior ejemplo, vimos como se mostraba el HTML en vivo, éste aparecía con un fondo gris y con un relleno. En CSS eso significa: background-color:#e2e2e2;padding:25px; . Vamos a ver cómo podemos agregar ese código utilizando la etiqueta <style>
<style>
.vic-bloque {
background-color:#e2e2e2;
padding:25px;
}
</style>
Vamos por nuestro último ejemplo
Apliquemos todo lo que hemos aprendido. Crearemos un contenedor <div> de clase vic-bloque, dentro deberá haber un enlace <a> (que redirijirá a un artículo en mi blog) que envolverá una imagen y un subtitulo <h3>; debajo añadiremos un párrafo y más abajo debajo pegaremos el siguiente código CSS (que dará un color de fondo, un relleno y centrará los textos), dentro de una etiqueta <style>:
/* Código CSS de ejemplo */
.vic-bloque {
background-color:#e2e2e2;
padding:25px;
}
.vic-bloque h3{
margin-top:15px;
text-align:center;
}
.vic-bloque p {
text-align:center;
}
Manos a la obra:
<div class="vic-bloque">
<a href="https://victoraqui.com/crear-formularios-contacto-divi-desde-que-url-se-envia/">
<img src="https://victoraqui.com/wp-content/uploads/2022/07/Miniatura-Formularios-Divi-2.jpg">
<h3>Mi primer Título</h3>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus
ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque
velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada
ut, convallis vel leo.</p>
</div>
<style>
.vic-bloque {
background-color:#e2e2e2;
padding:25px;}
.vic-bloque h3{
margin-top:15px;
text-align:center;
}
.vic-bloque p {
text-align:center;
}
</style>
Y tenemos ésto:
Mi primer Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet, sapien sit amet congue volutpat, quam erat dapibus ante, sit amet facilisis sapien est vel magna. Nulla accumsan scelerisque velit, et tempor nisl congue ac. Aliquam lorem velit, viverra eu malesuada ut, convallis vel leo.
Si lograste entender lo que acabamos de hacer, FELICIDADES, ya manejas HTML al menos al nivel básico.
Cómo insertar HTML en WordPress
Desde versiones muy antiguas,se podía agregar HTML a las publicaciones de WordPress. Pero con la llegada de los Bloques y de Gutenberg, el manejar HTML en WordPress se ha vuelto más sencillo aún.
Para insertar HTML en WordPress, simplemente bastará con agregar el bloque: «HTML personalizado»:
Una vez que haz agregado tu código personalizado, te aparecerá de la siguiente forma:
Y si deseas ver como va quedando en vivo, puedes hacer click al botón «vista previa». Tan simple como eso.
Como agregar HTML personalizado a Divi
De igual forma, para agregar HTML personalizado a Divi bastará con añadir el módulo «Código» y escribir nuestro código HTML dentro:
La ventaja en Divi, es que al ser un constructor visual, podemos ver lo que estamos construyendo en vivo, como puede verse en la imagen de arriba.
Conclusión
HTML es un lenguaje de marcado importante para crear páginas web, y Divi utiliza HTML como su base. Entender los conceptos básicos de HTML puede mejorar la capacidad de los usuarios de Divi para crear páginas web avanzadas y personalizadas, así como solucionar problemas y errores de manera más eficiente. Con la combinación de la interfaz visual de Divi y el conocimiento básico de HTML, los usuarios pueden crear páginas web impresionantes y efectivas.
0 comentarios