Cómo crear cuadros de funciones en WordPress con iconos










  • Agregar cuadros de características a un sitio web brinda a los visitantes una forma rápida y fácil de ver los beneficios de un producto o servicio en particular. Por lo general, consisten en una sola imagen de icono y quizás una o dos oraciones sobre la característica. Y es excepcionalmente fácil crear cuadros de características en WordPress.

    En este tutorial, le mostraré cómo crear cuadros de funciones en WordPress para usar en una página de inicio o de destino. Agregará una apariencia profesional mientras informa a los visitantes.

    Creación de columnas con el generador de páginas de SiteOrigin

    Page Builder de SiteOrigin es una herramienta útil cuando se trata de personalizar cualquier sitio web de WordPress. Funciona con la mayoría de los temas y le brinda mucha flexibilidad para personalizar su contenido.

    En este caso, lo usaremos para crear una página sencilla basada en columnas. Es un complemento de cuadro de funciones gratuito que viene con una amplia gama de habilidades.

    Instale y active " Page Builder by SiteOrigin ".

    Creador de páginas

    Configuración de las columnas

    Para este tutorial, vamos a crear una nueva página de destino básica solo para mostrarle cómo se hace.

    Crea una nueva página para tu sitio web.

    Agregar nueva página

    Dale un nombre a esta página. Solo voy a llamarlo, "Página de destino" por ahora.

    Página de nombre

    Haga clic en la pestaña "Creador de páginas" encima del editor.

    Pestaña Creador de páginas

    Haga clic en el botón "Agregar widget" en la parte superior izquierda.

    Añadir widget

    En este tutorial, vamos a utilizar el paquete de widgets de SiteOrigin. Es una colección de herramientas diseñadas específicamente para trabajar con Page Builder. Desea explorar lo que está disponible más adelante, ya que Page Builder tiene algunas habilidades geniales.

    Haga clic en el botón "Características de SiteOrigin" de la lista.

    Características del sitio de origen

    Esto agregará un nuevo segmento de cuadro a la página. Es un widget especial de SiteOrigin, pero debe instalarse antes de que podamos comenzar a agregar íconos y funciones.

    Pase el mouse sobre el cuadro y haga clic en "Editar".

    Editar widget

    Instalación del paquete de widgets de SiteOrigin

    Antes de que podamos usar las herramientas específicas de SiteOrigin, debemos instalar el paquete que incluye el cuadro de funciones y los íconos que usará. Haga clic en el enlace para instalar este paquete.

    Vínculo del widget de SiteOrigin

    Esto abrirá inmediatamente una nueva ventana e instalará automáticamente el paquete de widgets en WordPress. Haga clic en el botón "Activar complemento" cuando esté listo. No te preocupes, solo tendrás que pasar por este aro una vez. Después de lo cual, tendrá acceso a los widgets sin futuras instalaciones.

    Activar el complemento SiteOrigin

    Es seguro cerrar la pestaña del complemento adicional después de que SiteOrigin instale el paquete de widgets. Vuelva a la página de destino en la que estaba trabajando.

    Haga clic en el botón "Listo" en la parte inferior derecha. Necesitamos guardar y volver a cargar la página antes de que los widgets estén disponibles.

    Hecho

    Haga clic en "Guardar borrador" para la página que estamos creando. Esto actualizará los widgets para que podamos continuar.

    Guardar borrador

    Pase el cursor sobre el cuadro y haga clic en "Editar" nuevamente.

    Editar de nuevo

    Adición de funciones

    Lo primero que debe hacer es decidir cuántas funciones mostrará por fila. Para este tutorial, lo mantendré agradable y fácil y lo dejaré como el predeterminado de SiteOrigin de tres.

    Características

    También tenga en cuenta que SiteOrigin habilita el "Diseño receptivo" de forma predeterminada. Esto es para que aquellos en dispositivos móviles tengan la mejor experiencia posible. Nunca subestimes el valor de usar un sitio web optimizado para dispositivos móviles .

    En la parte superior, haga clic en el botón "Agregar" para agregar funciones. Puede hacer esto tantas veces como desee, dependiendo de cuántas desee mostrar a los visitantes. Para este tutorial, voy a crear solo tres diseños básicos.

    Añadir función

    Haga clic en la flecha hacia abajo junto a la entidad para editar. Esto amplía las opciones de la función para que pueda agregar texto e imágenes, así como realizar otros ajustes.

    Opciones de características

    Esta pantalla viene con varias opciones de personalización que van desde los colores hasta el texto real que desea usar en la columna.

    Haga clic en el botón "Elegir icono".

    Elegir icono

    SiteOrigin admite una variedad de tipos de íconos, desde Font Awesome hasta cualquiera que utilice su tema real. Elija el icono que mejor se adapte a la característica que está creando.

    Elija el mejor icono

    NOTA: No tiene que limitarse a los iconos para mostrar sus funciones. También puede usar imágenes de íconos de su biblioteca de medios en WordPress.

    Biblioteca de imágenes

    Asigne un título a la característica. Para este ejemplo, voy a decir algo breve como "Soporte de Android".

    Título de la función

    Ingrese la descripción de la característica. Recuerde, querrá que sea breve, ya que está destinado a resaltar una función o atracción específica de un producto o servicio. En mi ejemplo, voy a explicar de forma sencilla cómo algo es compatible con Android.

    Característica Descripción

    Elija si desea un enlace "Más" y texto en la función. Esto le permite crear enlaces a páginas relacionadas con la característica si desea entrar en más detalles. Por ejemplo, esto funcionaría muy bien para la página de biografía de un miembro del personal si está creando una lista de equipo.

    Más enlace

    Sin embargo, la función "Más" es puramente opcional.

    Haga esto para cada función que desee crear en la página.

    Publica tu página

    Cuando haya terminado de crear sus funciones, haga clic en "Listo" en la parte inferior derecha.

    Haga clic en Listo

    Haga clic en el botón "Publicar" o "Actualizar", dependiendo de si creó uno nuevo o lo agregó a una página existente.

    Publicar

    Sus cuadros de iconos en WordPress ya están disponibles.

    Cajas de iconos WordPress

    Dale a tu sitio una apariencia agradable

    Page Builder tiene mucha flexibilidad cuando se trata de crear cuadros de contenido de WordPress y mostrar funciones. Incluso puede ir tan lejos como para eliminar las barras laterales de sus páginas de destino específicamente para darle a la página una apariencia más limpia.

    Explore lo que puede hacer para crear una página de destino que convierta. Algo tan simple como los cuadros de funciones en WordPress podría marcar la diferencia cuando se trata de atraer a un usuario.

    ¿Qué tipo de elementos visuales usas en WordPress? ¿De qué maneras ha utilizado Page Builder en el pasado?










  • Subir