Icono Plantillas HTML

Plantillas HTML con iconos listas para usar

Encontrar paquetes de iconos es sencillo y muchos son gratuitos. Lo que lleva tiempo es construir los bloques que los rodean, tarjeta tras tarjeta, con un encabezado y una línea de texto debajo de cada símbolo. Las plantillas HTML con iconos se encargan de ese trabajo. Dispones de secciones HTML listas para editar donde los iconos ya están integrados en diseños acabados.

Cuatro formas de combinar un símbolo con texto

La mayoría de las plantillas se basan en unas pocas disposiciones, y cada una se adapta a un tipo distinto de contenido:

• un icono sobre un encabezado: la clásica tarjeta de características para una fila de beneficios breves;
• un icono junto a un párrafo: resulta más cómodo de leer cuando cada punto necesita una o dos oraciones;
• una cuadrícula de celdas con iconos para mostrar un catálogo de servicios, a menudo con un botón debajo de cada descripción;
• una fila de contacto donde un pequeño símbolo acompaña a cada número o dirección.

Algunos servicios no cuentan con un símbolo evidente. La entrega utiliza un camión y el soporte unos auriculares, pero la asesoría fiscal suele resolverse con un icono genérico de documento, por lo que el encabezado asume la explicación. Los datos de contacto otorgan al icono una función más práctica. Con Icono en texto de Nicepage, el icono se ubica dentro de una línea de texto y puede enlazar directamente a un número de teléfono o a una dirección de correo electrónico.

Del contenido de muestra al código exportado

En el editor de Nicepage puedes reemplazar los iconos de demostración por tus propios archivos o por los incluidos en la herramienta. Luego solo debes reescribir los encabezados y vincular cada enlace a su destino correspondiente. Tras la exportación, los archivos HTML siguen disponibles para su edición directa, de modo que un desarrollador puede sustituir un archivo SVG, ajustar el marcado o trasladar una sección a un proyecto existente.

Un mismo diseño de tarjetas puede presentar servicios en una página y pasos de incorporación en otra. Solo cambian el icono, el encabezado y el texto de cada tarjeta. Las secciones son adaptables, por lo que una fila de tarjetas con iconos se reorganiza en un móvil y los símbolos continúan siendo reconocibles.

Definir el número de elementos con antelación

Comienza evaluando tus elementos reales y la extensión que requiere cada uno. Una cuadrícula planteada para beneficios breves se verá descompensada si una tarjeta necesita un párrafo completo, y un bloque de contacto pensado para tres canales dejará un hueco si solo incluyes dos. Decide pronto si los elementos llevarán un enlace o un botón, ya que forzar su inclusión en una tarjeta compacta raras veces da buen resultado. Para una lista directa de ventajas, una lista de iconos con viñetas en formato SVG puede ser suficiente. Como una sección exportada puede integrarse en un proyecto ya en marcha, puedes elegir una plantilla solo por un buen bloque de contacto o de servicios e ignorar los demás.