homefinance blog
Es algo curioso, pero aunque los temas de WordPress continúan girando en gran medida en torno a los métodos probados y confiables para proporcionar contenido y experiencia de lectura, los creadores de aplicaciones son los que exceden los límites.El desfile horizontal como enfoque casi es evitado por los desarrolladores de WordPress y, sin embargo, se acepta como una técnica de historia, especialmente en tabletas.Así que eliminemos una hoja de la tableta y veamos cómo traer contenido de desplazamiento horizontal en su contenido de WordPress.
Horizontal rara vez se usa, pero es un formato extremadamente efectivo para la historia de la Corporación de Broadcasting de Australia, la emisora pública local, siempre ha sido una fuerza innovadora en el campo digital.La primera organización en lanzar un servicio de televisión en línea en Australia, a menudo experimenta y finalmente estimula la adopción de nuevas tecnologías y enfoques.
El resumen muestra cuán efectivo puede ser el desarrollo horizontal, ha lanzado dos nuevas revistas digitales, la breve, basada en aplicaciones y el documento blanco (interesante por la rama de radio de la corporación). Ambos reutilizan el contenido existente y combinan la palabra escrita con audio, video, fotos e ilustraciones para proporcionar esas historias a una nueva audiencia. El resumen realmente me llamó la atención y es la razón de esta publicación, porque adoptó el enfoque del desarrollo horizontal para proporcionar contenido. El desfile horizontal definitivamente no es único, pero es raro, especialmente en el mundo de WordPress. Con una excepción extraña, como el estante, la mayoría de las implementaciones son simplemente niños horizontales de temas verticales, con un fuerte énfasis en los efectos de paralaje, que a menudo conducen a un truco real. Ese horizontal no debe ser necesariamente sabio y, aunque requiere más Trabajar que sus contrapartes verticales, el resultado final puede ser tan efectivo, si no más, especialmente para dispositivos móviles. Entonces, en este artículo presentaremos cómo podríamos implementar las publicaciones con el desfile horizontal y, con suerte, inspirarlo a explorar más a fondo este enfoque subyacente. Haciendo el contenido en horizontal en esta implementación del desarrollo horizontal, no simplemente flotaremos todo el contenido restante y reemplazaremos la barra de desplazamiento vertical con una barra de desplazamiento horizontal. Eso no dará demasiada experiencia.
Más bien, el contenido se dividirá en secciones, páginas si lo desea, que se mostrarán en una fila, con una simple navegación previa para navegar en secciones. Esto ofrece una experiencia mucho más satisfactoria y también significa que cada sección se puede diseñar por separado. No lleva mucho tiempo cuando lees el informe para ver que el enfoque horizontal realmente se beneficia de una variedad de formateo. Entonces, en nuestra publicación utilizaremos un código simple [sección] simple para concluir el contenido de cada sección. También usaremos un código corto [de bloqueo] para permitir el contenido del contenido de la sección. Verá cómo funciona un poco más tarde. Schortcodes está configurado en un complemento, que también establece un filtro que sobrescribirá la plantilla que se utilizará para mostrar una publicación si tiene un campo personalizado con una tecla horizontal. Hemos incluido la plantilla en la carpeta del complemento y es completamente independiente solo para facilitar el uso, pero es posible que desee integrarla más de cerca con su sitio o incluso usar una publicación personalizada y simplemente aprovechar la jerarquía de plantillas de WordPress. Y finalmente, estilo. En lugar de crear muchos códigos cortos, lo mantuve en solo dos y luego usé CSS para mejorar el artículo con estilos específicos que se almacenan en un campo personalizado, post_style y luego me eliminan en la plantilla. Es un enfoque rápido y sucio, pero permite flexibilidad cuando juegas con la solución.
Obtener horizontal con la pantalla: la celda de mesa, ya que es casi siempre, es raro comenzar un proyecto como este desde cero y una búsqueda del desfile horizontal me lleva al artículo de Ezequiel Bruni sobre el desfile horizontal, y esta solución se basa en gran medida en ese artículo . El marcado imita una tabla: un DIV que contiene está configurado para mostrar: tabla y la capa de tabla: fijo; Sus elementos de sección infantil se establecen en la pantalla: Table-Cel. No hay necesidad de flotar las secciones, esto sucede automáticamente y mientras el desbordamiento esté oculto en la división principal del contenedor, es simplemente una cuestión de desplazar las secciones dentro y fuera de la visión para hacer la navegación entre las secciones. El complemento JQuery SmoothScroll se usa para el desfile. También hay JavaScript para administrar el contenido del tamaño de la ventana, administrar los botones de navegación y agregar las ID a las secciones. Caminando a través del contenido de la prueba, creé 5 páginas para las pruebas de complementos y el juego con entrega horizontal. Pasaré por cada uno para explicar lo que está detrás de ellos. Algunas cosas para recordar:
Agregue el estilo a un campo personalizado post_style en la publicación
Agregue un campo personalizado horizontal con valor verdadero
Las secciones están numeradas y asignadas automáticamente ID del lado del cliente, así que asegúrese de saber qué sección está diseñando
¡Cambie los enlaces a mis imágenes de prueba con sus enlaces de imagen de prueba!
Página de texto simple
Dos columnas de texto simples Dos columnas de texto, sin baratijas. Tenga en cuenta que las columnas no se generan automáticamente, sino que se crean utilizando dos códigos de bloque corto y la configuración de ancho para cada uno.
Sección 1
[Bloque] lorem ipsum dolor sit amet, consecuencia adipiscing elit. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. [/Block]
[/sección] estilos CSS
#Sección1 .Bloc {ancho: 48%; Margine-Right: 20px; flota a la izquierda; } Imagen de pantalla completa con superposición de texto
Un puño visual mucho más grande con una imagen en toda la pantalla y una superposición de texto, la pantalla completa, es fácil de hacer con el tamaño de fondo: el estilo de cubierta, aunque, dependiendo del tamaño de la imagen, es posible que deba reproducir con la X y y configuraciones para obtener la posición deseada. El texto se puede establecer en un bloque o, como es el caso aquí, el contenido principal Div en sí mismo se puede estilizar. Contenido [Sección]
Sección 2
Lorem ipsum dolor sit amet, consecuencia adipiscing elit. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. Color: #ffffff; Antecedentes: URL (http://www.test.dev/wp-content/uploads/2013/03/captian-america.jpg) 50% 40%; Tamaño del fondo: cubierta; } #Sección2 .Section-Account {ancho: 30%; Color: #ffffff; Peso de fuente: en negrita; } Imagen de media página a la izquierda
Las imágenes de fondo se utilizan para dar el aspecto completo de la media página a esta página
Esta técnica también utiliza imágenes de fondo, pero este tamaño está establecido en 50%, de modo que ocupa la mitad de la página. Luego, el contenido utiliza un margen izquierdo del 50% para garantizar que esté en el espacio en blanco.
Contenido [Sección]
Sección 3
Lorem ipsum dolor sit amet, consecuencia adipiscing elit. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. Antecedentes: URL (http://www.test.dev/wp-content/uploads/2013/03/spider-man.jpg) superior izquierda sin repetición; Tamaño de fondo: 50%; } #Section3 .Section-Account {ancho: 46%; Marja-Lft: 50%; Llenado: 20px; } La mitad de la página de la imagen de la derecha como técnica como media página a la izquierda, pero la imagen se fija a la derecha opuesta a la imagen de media página, el tamaño de la imagen de fondo todavía se establece en 50%, pero esta vez Se coloca a la derecha, en lugar de a la izquierda. No hay necesidad de establecer un margen para el contenido, solo un ancho. Contenido [Sección]
Sección 4
Lorem ipsum dolor sit amet, consecuencia adipiscing elit. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. Antecedentes: URL (http://www.test.dev/wp-content/uploads/2013/03/ironman-2.jpg) justo sin repetición; Tamaño de fondo: 50%; } #Sección4 .Section-Account {ancho: 46%; Llenado: 20px; } Imagen en toda la página, Opque Text Overlap
El uso de un fondo opaco para el texto hace que se destaque más que el contenido simple de texto [Sección]
Sección 5
lorem ipsum dolor sitt, consecuencia de adipiscing elit. Curabitur Ut Tincidunt Lorem, Quis Vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque I nulla ligula. Mauris Element Urna I consecuente porta. Proin laccinia odio sed adipiscing semper. Ut Sem Mi, a Eggesta Vel le gustó en Pulvinar Quis Tortor. Fusce Sagittis Massa Vel Dui Rhoncus Adipiscing. Antecedentes: URL (http://www.test.dev/wp-content/uploads/2013/03/man-ofteel.jpg) 50% 50%; Tamaño del fondo: cubierta; } #Section5 .Section-Account {Background Color: #ffffff; Opacidad: 0.70; Ancho: 40%; Margine-izquierda: 20px; Llenado: 20px; } ¡Recuerda! Al configurar su contenido, agregue los siguientes campos personalizados:
horizontalmente (valor: verdadero)
Post_style (valor: estilo CSS para publicar)
La adición horizontal a su mezcla horizontal parece tener muchas promesas, especialmente en tabletas. El contenido con muchas imágenes parece funcionar bien, así como el contenido en el que hay una gran variedad potencial en las secciones. Además de jugar con este complemento y contenido, y si está en Australia, le recomiendo que descargue el informe de ABC y vea cómo funciona horizontalmente: es impresionante. Y, por supuesto, si convierte estas ideas y fragmentos en algo más digno de producción, dígale a todos en los comentarios a continuación.
¿Qué opinas sobre el contenido de Desfile Horizontal? ¿Tienes o puedes ver una necesidad?
Etiquetas:
contenido
