En este artículo, compartiré todos los trucos importantes que he aprendido al utilizar las etiquetas personalizadas, destacaré algunos de los escollos que hay que evitar y mostraré algunos ejemplos de su uso en el mundo real.
Las etiquetas HTML personalizadas son nuevas etiquetas que tú mismo nombras en HTML para crear nuevos elementos. Las etiquetas personalizadas deben contener un guión (-), comenzar con un carácter ASCII (a-z) y estar en minúsculas para que sean válidas. Los elementos personalizados hacen que el HTML sea sencillo de codificar, más fácil de leer y mantienen tu CSS bien organizado.
Los elementos HTML personalizados deben comenzar con un carácter ASCII (a-z), contener al menos un guión (-) y no contener nunca mayúsculas. Después del carácter inicial, puedes incluir cualquier número (0-9) e incluso emojis. Ejemplos de etiquetas personalizadas válidas: <mi-elemento>, <col-3>, <barra-fuego-21>, <morning-☕>
Los elementos HTML personalizados deben tener una etiqueta de apertura y su correspondiente etiqueta de cierre, como <mi-elemento-personalizado></mi-elemento-personalizado>. Los elementos personalizados no pueden contener nada. Una etiqueta personalizada de cierre automático (también llamada etiqueta vacía o etiqueta nula) no es HTML válido, por ejemplo <mi-elemento-personalizado />.
Por defecto, los ajustes de estilo en todo Lighthouse Studio están vacíos. Por ejemplo, si crea una nueva pregunta y hace clic en el icono del pincel para el encabezado 1, no se especifica el tamaño de la fuente. Si no se especifica ningún tamaño de fuente en el nivel de la pregunta, se utilizará el tamaño de fuente especificado en un nivel superior. CSS presenta niveles de prioridad en cascada. Se puede especificar un tamaño de fuente para todo el texto de una encuesta o para una pregunta en particular. Un tamaño de fuente definido para una pregunta concreta anula el tamaño de fuente definido en el nivel de estudio.
Lighthouse Studio ha incorporado CSS que controla los estilos de la encuesta. El siguiente diagrama ayuda a ilustrar cómo se utiliza el CSS en Lighthouse Studio, demostrando los diferentes niveles de prioridad de estilo. Los estilos definidos en el nivel de la pregunta anulan los estilos definidos en el estilo de la encuesta. Los estilos definidos en el estilo de la encuesta anulan los estilos definidos en la hoja de estilo base ssi_style.css.
CSS significa Cascading Style Sheets (hojas de estilo en cascada). CSS permite modificar el estilo (color de fondo, estilo de fuente, espaciado, etc.) del HTML de las páginas web. CSS permite separar el estilo de la estructura de una página web.
El bloque de HTML personalizado te permite insertar tu HTML y CSS en tu mensaje. Esto le da más control sobre los elementos que desea incluir. Con el código personalizado puedes, por ejemplo, añadir botones, tablas o temporizadores en tu boletín para conseguir el aspecto que deseas.
Ten en cuenta que el bloque de HTML personalizado es una herramienta para desarrolladores, así que si no te sientes cómodo utilizando HTML o CSS, consulta a un desarrollador o utiliza nuestros bloques básicos para crear tu mensaje. Añadir HTML o CSS al bloque de código personalizado puede afectar al aspecto de todo tu mensaje, así que utilízalo con precaución.
Si vas a pegar el código desde un editor de texto, asegúrate de que utilizas un editor de texto plano como el bloc de notas. Si pegas el código desde Microsoft Word o un software similar, puedes añadir código o estilos adicionales que no deseas.
La configuración de Personalizar HTML le permite personalizar el HTML de los campos individuales de su formulario. Estos ajustes se pueden encontrar yendo a tu formulario y seleccionando Configuración → Personalizar HTML. Esto le da acceso al HTML para cada campo en su formulario, excluyendo ciertos tipos de campo.Formidable Forms es el mejor plugin de WordPress Form Builder. ¡Consíguelo gratis!
Por defecto, los mensajes de éxito del formulario se muestran encima del formulario. Si desea que el mensaje se muestre debajo del formulario, añada frm_below_success en el cuadro de Clases de formularios. Por favor, vea el hook frm_message_placement para una mayor personalización.
En algunos casos, los mensajes de éxito del formulario se utilizan para mostrar una respuesta en lugar del típico mensaje de éxito. Si está mostrando el formulario con el mensaje de éxito, puede eliminar el estilo verde. Añada frm_plain_success en el cuadro de Clases de formularios.
Cada campo de su formulario tiene una caja correspondiente en la configuración de Personalizar HTML que se rellena con el HTML utilizado para diseñar ese campo. Puede mover la descripción del campo, ocultar las etiquetas de las opciones, añadir atributos de entrada, etc. añadiendo HTML o CSS a las casillas. Los botones del panel de personalización (barra lateral derecha) pueden utilizarse para añadir rápidamente códigos cortos a un campo.