Pregunta sobre Network Posts Extended de Wordpress:

Diseño de lista: imagen y texto uno al lado del otro

Un usuario preguntó 👇

¿Cómo obtengo la imagen y el texto uno al lado del otro (como en su captura de pantalla 1)?

No encuentro la ubicación. Gracias.

(@johnzenausa)

Hace 11 meses, 4 semanas

Usas CSS. Por favor muéstrame la página y arreglaré algo.

(@jenswilczek)

Hace 11 meses, 4 semanas

Hola,

mi sitio de prueba está aquí: https://wilczek.de/

(@johnzenausa)

Hace 11 meses, 4 semanas

@jenswilczek

No olvide agregar thumbnail='true' al atajo, así que tengo algo con lo que trabajar. Eso es para dar una imagen específica a esas publicaciones de prueba y agregar lo anterior al acceso directo.

(@jenswilczek)

Hace 11 meses, 4 semanas

Todos los atajos ahora tienen la misma estructura. No son iguales al número del blog: 1, 2 y 3

[netsposts include_blog = ‘1’ list = ‘2’ thumbnail = ‘true’ size = ‘wilczek’ date_format = ‘j. F Y ‘]

(@johnzenausa)

Hace 11 meses, 4 semanas

Bien, el título y la megainformación en la parte superior, luego la imagen y el texto uno al lado del otro, ¿verdad? También haré que los dispositivos móviles sean receptivos. Lo tendré listo mañana o viernes.

(@jenswilczek)

Hace 11 meses, 4 semanas

Todo bien. ¿Te das cuenta de que tenemos Navidad?

(@johnzenausa)

Hace 11 meses, 4 semanas

Feliz Navidad

(@johnzenausa)

Hace 11 meses, 4 semanas

Hola @jenswilczek

Coloque esto en su archivo CSS o en el área personalizada donde puede agregar CSS adicional. Mantiene todo en una columna, pero alinea la imagen a la izquierda y el contenido del pasaje a la derecha. Solo comienza a más de 480px porque las pantallas pequeñas no se ven bien si comienzas más abajo.

@media screen and (min-width: 481px) {
	.netsposts-block-wrapper .netsposts-content {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-between;
	}
	.netsposts-block-wrapper .netsposts-content > a {
		width: 150px;
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.netsposts-block-wrapper .netsposts-content .netsposts-excerpt {
		width: calc(90% - 150px);
		padding: 0 1em;
	}
}

(@jenswilczek)

Hace 11 meses, 4 semanas

Hola John,

esto se ve muy bien. No lo pensaría. Todavía soy un principiante. Espero que esta contribución también ayude a muchos otros.

Como ya he visto, ajusto un poco el diseño. La página terminada aparecerá permanentemente en https://karlshorst.de. Es una zona de Berlín (Alemania).

¿De dónde viene la palabra ‘autor’? No pude encontrar la publicación en Header.php. Estoy seguro de que esta palabra está oculta en las líneas 107-121… ((https://wilczek.de)

Te deseo un feliz año nuevo

Esta respuesta fue modificada hace 11 meses, 4 semanas por.

(@johnzenausa)

Hace 11 meses, 4 semanas

Si desea ocultar la palabra autor pero aún mostrar el autor, modificaré el código para que pueda ocultarlo con CSS.

(@jenswilczek)

Hace 11 meses, 4 semanas

Sería bueno si aún pudiera hacer este cambio. No me atreví a hacerte una pregunta …

(@johnzenausa)

Hace 11 meses, 3 semanas

Con la última actualización agregué la etiqueta netsposts-author-label a la palabra autor para que pueda ocultarla a través de CSS. Ejemplo .netsposts-author-label { display: none; }

(@jenswilczek)

Hace 11 meses, 2 semanas

Un ejemplo del uso de este plugin es: https://karlshorst.de
Además, se modificó el archivo de idioma (con locotranslate) para cambiar las palabras relacionadas con el diseño.

(@johnzenausa)

Hace 11 meses, 2 semanas

Bueno. ¿Necesito corregir algo?

(@jenswilczek)

Hace 11 meses, 1 semana

No es necesario corregir nada. La salida del archivo de idioma en Fontend se puede cambiar fácilmente. Debe mencionarse esto en la descripción del plugin. Por ejemplo, reemplacé la palabra «en» con el carácter «/». Eso encajaría mejor con el tema.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *