Cómo crear un índice de contenido AZ con consejos de herramientas para el consultorio de la división del médico de la división

Crear un índice facilita a los usuarios encontrar rápidamente lo que están buscando sin leer demasiado y / o desplazarse. Este tipo de indexación es común en el campo de la medicina, ya que hace que los pacientes sean más fáciles de encontrar y leer sobre ciertas enfermedades o afecciones médicas. Para este tutorial de casos, le mostraré cómo crear un índice AZ de trastornos médicos para el paquete del esquema de la oficina del divisor. Usaré el módulo de archivo de la división para construir el índice AZ con un diseño personalizado que se ajuste al índice con el aspecto del consultorio del médico. Y, si desea agregar consejos de herramientas en su sitio, introduciré una solución extremadamente fácil utilizando el complemento Simply ToolTips.
¡Vamos a hacerlo! Dibuja con el ojo para echar un vistazo a lo que creamos.

Aquí hay un vistazo a la funcionalidad.

¿Qué necesitas? Es lo que necesitas para este tutorial:
El tema de la división (instalado y activo)
Paquete de disposición del gabinete médico (accesible desde Divi Builder)
Consejos simples (instalados y activos)
Estrategia de diseño La estrategia para el diseño del índice AZ es el uso del módulo de archivo de división. Básicamente, todo lo que tiene que hacer es crear una pestaña para cada letra del alfabeto y luego organizar sus condiciones alfabéticas en cada pestaña / letra apropiada. Todas las condiciones que comienzan con “A” estarán debajo de la pestaña “A”, etc. Esto funciona bien para condensar la longitud de sus listas y minimiza la necesidad de desplazamiento. Un usuario simplemente haga clic en una carta y luego viaja solo las condiciones que comienzan con esa carta.
Hay otras dos formas de agregar un índice que hemos considerado para este caso de uso. La primera idea fue crear un alfabeto de enlaces de anclaje que se desarrollarán en las secciones de la página. La segunda idea era construir un menú personalizado con una letra para cada elemento de menú que dirigiera al usuario a una página (o publicación) separada con condiciones que comienzan con la letra apropiada. Ambas son opciones viables, pero pensé que no es tan conveniente (o simple) como usar el módulo de filete. Creación de la página de índice El paquete de presentación del consultorio del médico nos dará un comienzo importante en el diseño de nuestra página de índice. Por supuesto, siempre puede incorporar el índice en una página existente, si desea comenzar a crear una nueva página (páginas> nueva adición), ingresar un título de página e implementar el Visual Builder. Abra el menú Configuración en la parte inferior de la página y haga clic en Agregar en la biblioteca. Luego seleccione el paquete médico del consultorio de diseño y elija la plantilla de página de preguntas frecuentes.
Una vez que la apariencia se carga en la página, elimine todas las secciones de la apariencia, excepto la sección titulada “Su salud comienza aquí” con el formulario de solicitud de programación.

Cambie el aspecto de su fila en una estructura de dos tercios de columnas. Luego mueva los módulos existentes en la columna izquierda a la columna derecha.

Copie el módulo de texto en la sección principal del encabezado con el título “Estamos dedicados a su salud” y adhiérase a la columna izquierda de la segunda sección.

Cambie el texto para leer “Condiciones de búsqueda” y luego cambie el color del texto a la luz.

Agregue un nuevo módulo de texto en ese módulo de texto en la columna izquierda e ingrese el texto “Index AZ” y guarde el módulo. Ahora copie los estilos del módulo (use clic derecho) del segundo módulo de texto en la columna derecha y pegue los estilos del módulo en el módulo “Index AZ”.

Luego actualice la configuración de diseño del módulo de texto “Index AZ” de la siguiente manera:

Tamaño del texto del texto: 32 PX Orientación del texto: izquierda
Guarde la configuración ahora estamos listos para crear nuestro índice con el módulo de archivo. Vaya más allá y agregue un módulo de pestaña en el módulo de texto del índice AZ. Antes de comenzar a agregar nuevas pestañas al modo, actualice la configuración de la hoja de la siguiente manera: Fondo de pestaña Activa: # 2f8cff FFFF Pestaña Información de fondo: RGBA (0.0,0.33) TAB TEM: #FFFFFFF FONT: Montserrat Width: 0 PX

Para un diseño extra personalizado, podemos agregar algunos CSS personalizados para estilizar nuestras pestañas. En la pestaña avanzada, agregue el siguiente CSS al cuadro de ampliación de pedidos de pestañas:

Antecedentes: ninguno;
Elimina el fondo gris detrás de las pestañas. Luego agregue el siguiente CSS al cuadro de entrada de pestaña: Border: 2px Solid #FFF! IMPORTANTE;
Border-radio: 15px;
margen: 0 .5em .5em 0;
Flotador izquierdo;
Esto estiliza las pestañas para tener un borde y distancia personalizados. Agregar el flotador: a la izquierda asegurará que las pestañas permanezcan alineadas a la izquierda incluso en los dispositivos móviles.
Ahora estamos listos para agregar las pestañas y el contenido de las pestañas. En la pestaña Contenido, elimine la segunda pestaña y haga clic para editar la configuración de esa pestaña restante. Proporcione la pestaña el título “A” y actualice el cuadro de contenido con una lista de condiciones que comienzan con la letra “A”.

Aquí está el contenido falso que agrego: [/simple_tooltip]- ultricies CRAS ligula sed magna dictum porta. Nulla Accumsan Tincidunt. Donec Rutrum Congger Leo Eget Malesuada. Praesent Sapien Massa, Convallis de Pellentesque NEC, E -Gestas Non Nisi.
[Simple_ToolTip Content = ‘Este es el contenido para la burbuja de tooltip leer más … ‘] dolor abdominal [/simple_tooltip] – – – Cras Ultricies Ligula Sed Magna dictum Porta. Nulla Port Tittor Accumsan Tincidunt. Donec Rutrum Congger Leo Eget Malesuada. Praesent Sapien Massa, Convallis de Pellentesque NEC, E -Gestas Non Nisi.

dolor abdominal – Cras ultricías ligula sed magna dictum porta. Nulla Port Tittor Accumsan Tincidunt. Donec Rutrum Congger Leo Eget Malesuada. Praesent Sapien Massa, Convallis de Pellentesque NEC, E -Gestas Non Nisi.
dolor abdominal – Cras ultricías ligula sed magna dictum porta. Nulla Port Tittor Accumsan Tincidunt. Donec Rutrum Congger Leo Eget Malesuada. Praesent Sapien Massa, Convallis de Pellentesque NEC, E -Gestas Non Nisi.
dolor abdominal – Cras ultricías ligula sed magna dictum porta. Nulla Port Tittor Accumsan Tincidunt. Donec Rutrum Congger Leo Eget Malesuada. Praesent Sapien Massa, Convallis de Pellentesque NEC, E -Gestas Non Nisi.
Puede notar que hemos incluido enlaces allí. Este podría ser un gran lugar para redirigir a los usuarios a una página que describe esa condición especial. También incluí un código corto que agrega una descripción alrededor del primer enlace en la lista. Pasaré este bacco corto más tarde, pero por ahora, continuamos configurando las pestañas. Establezca la configuración para la pestaña y luego copie la pestaña 25 veces (hay 26 letras en el alfabeto si lo olvidó). De hecho, puede cantar la melodía del alfabeto al hacer clic en el botón Duplicado para una diversión seria. Una vez que haya terminado, guarde su configuración.
Ahora puede usar el editor en línea para cambiar las letras en sus pestañas. Esto lo eximará cada vez que haga clic en la configuración de la pestaña.
Deberá actualizar el contenido debajo de cada pestaña para incluir las condiciones correspondientes a la letra de las hojas, pero el índice ahora está listo para comenzar.
Utilizando el código corto de información sobre herramientas como se mencionó anteriormente, agregué un COD corto al primer enlace en el contenido. Este código corto funciona si ha instalado e instalado activamente las información sobre herramientas de complemento. Aquí está la estructura básica del código corto: [Simple_Tooltip Content = ‘Este es el contenido para la burbuja ToolTip’] esto desencadena el ToolTip [/Simple_Tooltip]
Simplemente reemplace “Este es el contenido del globo de tipo ToolTip” con el contenido que desea mostrar en la burbuja de información sobre herramientas y reemplace “esto desencadena la información sobre herramientas” con el contenido que activará la bola de información sobre herramientas.

También puede implementar el código de información de herramientas corta utilizando el generador codificado de tipo TOLTIP. Para usar esto, deberá usar el generador de retrodjición (no el constructor visual). En el generador de backend, edite la configuración del módulo de archivo y verá un botón de punta en el editor Wysiwyg. También incluye enlaces en la bola de información. Esto será maravilloso para los usuarios redirigir a otra página para obtener más información. Ya hemos incluido un enlace de lectura más en el primer elemento del contenido de la pestaña, para que pueda ver cómo podría verse. Consulte la publicación de su blog para obtener más ideas sobre cómo usar este complemento.
El complemento también tiene algunas opciones configurables para cambiar el color, el tamaño, la posición y la opacidad del asesoramiento de la herramienta. Puede acceder a esta página de configuraciones navegando en Configuración> Consejos simples.
Al poner los últimos toques en la página, puede mantener la sección del encabezado si lo desea, pero para este ejemplo, lo eliminaré para que solo tenga la sección AZ Index AZ para mi página. Luego, actualice la configuración de la sección para eliminar la imagen de fondo y agregue un relleno superior de 50 px.
Para los módulos de texto en la columna derecha, cambie el texto al texto a la izquierda. Luego actualice la configuración de campo para su formulario de contacto haciendo todos los campos completos.

Luego actualice el color de fondo del botón Formulario de contacto y el color de fila en # 2f8cff. ¡Eso es todo! Verifique el resultado final.

Observe cómo funcionan las pestañas y la función de descarga.

Así es como se verá el índice en el móvil.