Cómo crear una revista en línea en Elementor

A diferencia del compositor de TagDiv, Elementor no está especialmente diseñado para crear una revista en línea. Elementor no tiene widgets nativos para mostrar publicaciones en un estilo de cuadrícula, como TagDiv Composer. En TagDiv Composer, tiene más de 10 códigos cortos GID grandes para mostrar elementos en su sitio en múltiples estilos de cuadrícula. Si desea crear una revista en línea con Elementor y desea agregar algunos elementos de cuadrícula para mostrar sus artículos, puede usar el suplemento de JetBlog. JetBlog es un complemento de Elementor (que cuesta $ 19 por año) que está especialmente diseñado para crear una revista en línea y tipos similares de sitios. Es parte de la familia Jet Plugins, un conjunto de suplementos elementales desarrollados por Crocoblock. JetBlog viene con los siguientes widgets:
Lista de reproducción de video: para crear listas de reproducción de video (admitir YouTube y Vimeo)
Publicaciones de paginación: para agregar publicaciones de paginación
Publicaciones de navegación: para agregar post navegación
Ticker: para agregar un ticker de noticias
Publicación: para mostrar publicaciones en un estilo de cuadrícula. Puedes elegir entre 9 estilos de cuadrícula diferentes
Lista de publicaciones inteligentes: para mostrar elementos en un estilo de lista.
En este artículo, demostraremos cómo crear la página inicial de una revista JetBlog en línea. Aquí está el ejemplo de la página inicial que vamos a crear.

Además del JetBlog, también necesita Elementor Pro (opcional) para mostrar elementos en un estilo de lista. O bien, también puede usar el widget de lista de publicaciones inteligentes para mostrar elementos en un estilo de lista.
Preparación Antes de comenzar, asegúrese de haber actualizado Elementor a la versión Pro (lea la diferencia entre Elementor Free y Elementor Pro) y que haya instalado y activado el suplemento de JetBlog. Puede obtener un JetBlog en el sitio web oficial de Crocoblock. Alternativamente, también puede obtener un JetBlog con una opción de compra única en el paquete Jupiter X -Themes.
Una vez que esté listo, cree una nueva página (páginas -> Agregar nuevo) y edítelo con Elementor.
Si es completamente nuevo en el elemento, puede leer la guía para principiantes que escribí para averiguar cómo usar Elementor.

Comience a crear la página inicial La página de inicio que creamos está compuesta por tres secciones. Sección 1 Usamos esta sección para colocar los siguientes widgets:
Publicaciones de diapositivas (JetBlog)
Divisor (elemento)
Postes (Elementor Pro)
Publicaciones inteligentes de azulejos de widget Agregue una nueva sección haciendo clic en el botón Plus en el área de lona y seleccione la estructura con una sola columna. Agregue el widget de mosaicos Smart Publics a la sección que acaba de crear sacándola desde el panel izquierdo.
Vaya al panel izquierdo para personalizar el widget. Primero, abra el bloque de opciones generales en la pestaña Contenido. Seleccione su apariencia de cuadrícula favorita y establezca la altura, así como el ancho de la caja principal.

Desde este bloque de opciones, también puede establecer el tamaño de la imagen, mostrar/ocultar los términos de la publicación, establecer la longitud del extracto, mostrar/ocultar la meta post, mostrar/ocultar el postor, mostrar/ocultar la fecha de publicar y para mostrar/ocultar comentarios de publicación.

Luego abra el bloque de opciones de interrogación y controla para filtrar los elementos. Por defecto, el widget muestra los últimos elementos en su sitio web. Puede usar una consulta personalizada para mostrar elementos por categorías o etiquetas. También puede seleccionar manualmente los artículos ingresando las ID de publicación. También puede abrir el bloque de opciones de campo personalizado para agregar campos personalizados. No utilizamos campos personalizados en este ejemplo. Luego abra la pestaña de estilo para estilizar el widget. Aquí están los bloques principales de opciones de estilo que puede abrir:

Caja

Puede abrir este bloque para establecer el espacio entre las cajas/mosaicos en la cuadrícula. También puede establecer el relleno, el rayo del borde y la superposición de la caja.
Contenido
Puede abrir este bloque para establecer el color del título de contenido, el color del flotador, la tipografía (la familia de fuentes, el tamaño de fuente, el estilo de fuente, etc.), el color del título de publicación en la caja principal, El color de la publicación de la publicación, la alineación de contenido, etc.

Meta
Puede abrir este bloque para personalizar la apariencia meta, como el color del texto, la tipografía, el tamaño del icono, los huecos entre los iconos, la alineación, el relleno, el borde, etc.

Puede abrir otros bloques de opciones de estilo de acuerdo con las opciones que establece en la pestaña de contenido. Widget of Divisor Utilizaremos este widget para agregar un separador entre el elemento de la cuadrícula (widget de los mosaicos de publicaciones inteligentes) y las publicaciones. Tire del divisor de widgets y colóquelo justo debajo del widget de mosaicos de publicaciones inteligentes. Agregue un elemento de texto del bloque divisivo en la pestaña Contenido. Puede agregar cualquier texto, como “historias especiales”, “historias organizadas” o cualquier texto que desee. Desde este bloque, puede establecer el ancho del separador, el estilo del divisor y la alineación. Una vez que haya terminado de configurar la opción básica, vaya a la pestaña Estilo para estilizar el separador. Puede establecer el color, el grosor (peso) y el espacio en el bloque de división r.
Para personalizar el texto del divisor, puede abrir el bloque de texto. Aquí, puede establecer el color del texto, la posición, la tipografía y el espacio.

Widget para publicaciones agregue postes de widget tirándolo desde el panel izquierdo al área de lona. Colóquelo justo debajo del divisor de widgets. Abra el bloque de apariencia debajo de la pestaña contenida en el panel izquierdo para establecer la apariencia, columna, publicaciones de página, posición de imagen, etc.

Aquí están las opciones de configuración que utilizamos:

Cuero: clásico

Número de columnas: 3

Publicaciones de la página: 3
Posición de la imagen: arriba
Masonería: detenido
Tamaño de la imagen: completamente
Informe de imagen: 0.55
Ancho de imagen: 100 %
Metadato: autor, fecha
Una vez que haya terminado con el bloque de apariencia, abra el bloque de consulta para filtrar los elementos. Por defecto, Widget Postari muestra los últimos artículos en su sitio. Puede filtrar elementos de acuerdo con categorías, etiquetas, autores, etc. Si desea filtrar los artículos de acuerdo con las categorías, por ejemplo, seleccione el término en el campo incluye e ingrese sus categorías favoritas. Puede pedir los elementos después de la fecha, el título o el azar. Si desea activar la paginación, puede abrir el bloque de paginación. Después de haber terminado con la pestaña Contenido, puede acceder a la pestaña Estilo para estilizar las publicaciones. Aquí están los bloques clave de opciones de estilo que puede abrir según las opciones que establezca en la pestaña de contenido.
apariencia
Puede abrir este bloque para establecer el espacio entre las columnas, el espacio entre las filas y la alineación de contenido.
Caja

La caja se refiere al contenedor de cada publicación. Puede abrir este bloque para establecer el ancho de los contenedores, el rayo del borde, el color del borde, el contenido del contenido, el color de fondo y la sombra de la caja.

Imagen
Puede abrir este bloque para establecer el radio fronterizo de la imagen presentada de cada publicación. También puede establecer la distancia entre la imagen presentada y el contenido. También puede aplicar filtros CSS si lo desea.

Sección 2 Usamos esta sección para colocar los siguientes widgets en dos columnas diferentes:
Divisor (elemento)

Postes (Elementor Pro)
Imagen (Elementor)

Antes de agregar widgets, primero agregue una nueva sección. Seleccione la estructura con dos columnas y establezca el ancho de las columnas con una comparación de aproximadamente 68: 32%.
La primera columna (la izquierda) agregue el divisor del widget a la primera columna en la sección que acaba de agregar anteriormente. En el bloque divisivo en la pestaña de contenido, seleccione el estilo divisor que le guste y establezca el ancho en aproximadamente el 25%. Establezca su alineación izquierda y agregue el elemento de texto. Puede agregar un mensaje de texto como “Las últimas historias”, “Las últimas noticias”, etc. Abra el bloque divisivo para configurar el color del separador, el grosor (peso) y el espacio.
Abra el bloque de texto para personalizar el texto, como color de texto, tipografía, posición y espaciado.
Agregue las publicaciones de widget y colóquelo justo debajo del individuo widget. Acceda al bloque de apariencia en la pestaña Contenido para establecer las opciones de configuración básica. Las siguientes son la configuración básica que utilizamos.
Cuero: clásico

Número de columnas: 1

Publicaciones de la página: 5

Posición de la imagen: izquierda

Masonería: detenido
Tamaño de la imagen: completamente
Informe de imagen: 0.55
Ancho de imagen: 40 %
Longitud extra: 25
Metadato: autor, fecha
Puede abrir el bloque de consultas si desea utilizar una consulta personalizada, como se describe en la Sección 1 anterior. Abra el bloque de paginación para activar la paginación. Traté cómo agregar paginación al elemento anterior. Puedes leerlo para obtener más información. Después de haber terminado de configurar las opciones básicas, vaya a la pestaña Estilo para estilizar las publicaciones como lo hizo en la Sección 1. La segunda columna (la correcta) Agregue el widget de la imagen y colóquelo en la segunda columna. De hecho, el lugar de imagen del widget está diseñado para mostrar un banner publicitario de 300 × 600. Puede reemplazar este widget con el widget HTML para mostrar un banner publicitario de 300 × 600 una vez que su sitio esté listo para publicar y usted tiene un banner comercial. En la fase de desarrollo del sitio, puede usar temporalmente el widget de imagen para demostrar el banner publicitario. Prepare una imagen con un tamaño de 300 × 600 px para ser utilizado en este lugar. Una vez que haya terminado con el widget de la imagen, agregue el widget Divser y colóquelo justo debajo del widget de la imagen. En el bloque divisivo en la pestaña de contenido, seleccione un estilo divisor que le guste, establezca el grosor (ancho) en aproximadamente 65%, establezca la alineación y agregue un texto que le guste. Puede establecer el color del separador, el grosor y el espacio en el bloque divino. Mientras establezca el color del texto y la tipografía, puede abrir el bloque de texto.
Luego agregue las publicaciones de widget y colóquelo justo debajo del widget divino. Acceda al bloque de apariencia en la pestaña Contenido para establecer las opciones de configuración básica. Aquí están la configuración que utilizamos:
Cuero: clásico
Número de columnas: 2
Publicaciones de la página: 4
Posición de la imagen: Soporte: detenido

Tamaño de la imagen: completamente

Informe de imagen: 0.55
Ancho de imagen: 100 %
Longitud extra: apagado
Metadatos: discapacitado
Abra el bloque de consulta para filtrar los artículos como lo hizo con las otras publicaciones anteriores. Después de haber terminado ir a la pestaña de estilo para estilizar su widget. Vaya a la pestaña avanzada si desea hacer algunas opciones avanzadas. En este ejemplo, establecemos el relleno de la izquierda a 45 para que las publicaciones de widget tengan la misma alineación vertical que el widget de la imagen.
Sección 3 Usamos esta sección para colocar el divisor de widgets y la lista de reproducción de video. Agregue una nueva sección haciendo clic en el icono más en el área de lienzo. Seleccione la estructura con una sola columna. Una vez que la sección esté lista, agregue el widget de lista de reproducción de video.
Hay dos formas de crear una lista de widgets de lista de reproducción. Primero, puede incorporar una lista de reproducción en su cuenta de YouTube. Tenemos un artículo separado que cubre esto. Puedes leerlo para obtener más información. En segundo lugar, puede crear una nueva lista de reproducción agregando los videos que desea agregar a la lista de reproducción. Para crear una nueva lista de reproducción, simplemente pegue las URL de los videos en el bloque de pestañas de contenido. Haga clic en Agregar elemento para agregar un nuevo video.
Abra el bloque de configuración para establecer la altura de la lista de reproducción, la orientación de las miniaturas, la posición de las miniaturas, etc.
Vaya a la pestaña de estilo para estresar la lista de reproducción.Puede leer nuestro artículo anterior para obtener más información sobre cómo crear una lista de reproducción de YouTube en Elementer usando JetBlog.Hasta ahora, ha creado una página para comenzar una revista en línea en Elementor usando JetBlog.Puedes jugar para obtener más información sobre el suplemento de JetBlog.Haga clic en el botón de publicación para publicar su página de inicio.Una vez que se publique la página, asegúrese de configurarla como una página de inicio en su sitio de WordPress una vez que su sitio esté completamente listo.Para hacer esto, vaya a Configuración -> Leer.En la sección Muestra su página de inicio, seleccione la opción Una página estática y seleccione la página de inicio que acaba de crear en el menú desplegable.