Cómo crear una Plantilla personalizada para los Posts

Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

También hemos Publicado

Tutorial de Esta Semana

Cómo crear una Plantilla personalizada para los Posts

Default Post Template Featured image

Síguenos en Facebook

Default Post Template Featured image

En este Tutorial aprénderás como hacer una Plantilla Predeterminada para tus Publicaciones, utilizando CrocoBlock. Sí ya sé que Elementor provee esa opción y te da unos 10 de ejemplos que puedes utilizar. Pero qúe tal si no quieres usar ninguna de ellas y únicamente por la satisfacción de crearla quieres hacerlo y no sabes cómo, o no tienes la versión Pro de Elementor y sí CrocoBlock.

Anunciate Ahora 360
La Casa del Bordado
Laboratorio San Sebastian
Colon Pratts 360
Funeraria Rios Caldas
On Stage
Tomassini Dental Laboratory
Comercio Local

Estaremos recreando la Plantilla de este Blog -imagen a la izquierda-, la que incluye la Cabecera, Imagen Destacada, una Foto del Autor, Nombre del Autor, Información del Autor, Fecha de Publicación, Número de Comentarios Publicados, el QR Code del Sitio Web, Titular de la Publicación, Barra Lateral donde ubicaremos la Barra de Buscar y lo otro que se nos antoje, Contenido de la Publicación, una Llamada a la Acción y Publicaciones Recientes.

En este sitio web utilizamos Kava, CrocoBlock y Elementor Pro. Ya hemos creado de antemano la Cabecera y el Pie de Página, por lo que únicamente explicaremos el proceso de cómo se crean ambos.

Durante el proceso de crear la Plantilla tan sólo señalaremos los widgets a utilizar sin entrar en detalles de la Personalización ya que esta dependerá de tu gusto y tu necesidad. Además les dejo saber que este Tutorial se actualizará hasta que hayamos terminado la Plantilla.

Plantilla-Predeterrninada-IPara comenzar y crear la Cabecera debes ir a CrocoBlock/My Library en el Menú del Escritorio a mano izquierda. Si has creado alguna Plantilla aparecerá aquí. Si es tu primera plantilla la ventana que se abre estará en Blanco en el área donde se enumeran la Plantillas. En cualquiera de los casos oprime Add New. En la ventanilla que se abre selecciona Header -Cabecera- y ponle el nombre que desees. Por lo general uso Cabecera de+el nombre del sitio. Al continuar se abre el Editor de Elementor. Allí puedes escoger entre usar una de las previamente diseñadas por CrocoBlock o diseñarla tú desde cero. Para lo último simplemente oprimes el Icono + y comienzas tu diseño. Para la primera opción oprimes el Magic Button y escoges la que desees, personalizándola a tu gusto. Una vez estás conforme vas a los ajustes en la parte inferior del Menú de Elementor -el primer botón, es como una rueda dentada- y lo abres. Allí vas a Conditions y seleccionas la opción que desees -en mi caso selecioné Singular y del Menú Desplegable Post- y procedes a Publicar.

Ahora vuelves a CrocoBlock/My Library y allí estará la Plantilla de la Cabecera que acabas de crear. Vuelve a presionar Add New y esta vez escoges Footer o Pié de Página y sigues los pasos anteriores en la creación de la cabecera. Una vez hecho estos estamos en condición de comenzar nuestra Plantilla Predeterminada para las Publicaciones.

Comencemos ahora. Vayamos a CrocoBlock/My Library y oprimamos Add New/. De inmediato se nos abre una ventana para seleccionar el tipo de Plantilla que queremos hacer. En Select Type del Menú Desplegable seleccionaremos Single y le daremos un nombre a la Plantilla de modo que podamos encontrarla luego en My Library, en caso de tener que editarla o que querramos exportarla para usarla en otro sitio.

Antes de continuar analicemos la Plantilla que vamos a recrear. Vemos que en la parte superior debajo de la Cabecera tenemos una sección de dos partes o columnas -1/3|2/3- que es con la que trabajaremos primero. En ella tenemos en la columna de la izquierda la Foto y la información del autor, la Fecha de publicación, el Número de comentarios publicados y un QR code de la Página. En la columna de la derecha tenemos la Imagen destacada de la Publicación.

Inicemos añadiendo la Sección de dos columnas  -1/3|2/3-. Inmediatamente vayamos a la parte inferior y oprimamos Publicar. Si vamos a los Ajustes de Elementor en Configuración General, veremos que dice que estamos usando la plantilla “con el nombre que le dimos anteriormente”, y en Estado aparece publicada. Ahora vayamos a Preview y en Post Type escojamos Entrada o Post.

Vayamos al Menú de Elementor y busquemos Listing Elements. Normalmente aparece al final o casi al final del Menú. Allí vamos a arrastrar a la columna de la derecha el Widget de Dynamic Image. Veremos que de inmediato aparece la imagen de la Publicación.

Es momento de trabajar con la columna izquierda. En la Plantilla que estamos recreando la información e imagen del autor fue creada con elementos individuales de Elementor a los que sse le atribuyó contenido dinámico. En el Tutorial usaremos la opción que provee Author Box. Así que lo escribimos en el Search del Menú y cuando aparece lo arrastramos a la columna izquierda. Puedes observar que ofrece una gran variedad de opciones para la personalización. Usalas a tu gusto.

Lo próximo que haremos es arrastrar a la columna el Widget de Dynamic Data y lo configuras conforme a tu gusto y necesidades.

Para el QR code utilizaremos o el Widget de Shortcode si lo que tenemos es esto o el Widget de Image si tenemos una. Por lo pronto actualicemos nuestra Plantilla y echémosle un vistazo. No te asustes si lo único que ves es la columna izquierda. La imagen destacada no la verás hasta que no apliquemos la Plantilla a las Publicación, pero eso lo haremos en Conditions al final.

Ahora añadiremos una sección de una columna a la que arrastraremos el Widget de Dynamic Field y afortunadamente el default es el Título de la Publicación. Configúralo a tu gusto.

Seguiremos esta vez añadiendo una Sección de dos columnas, mas para variar y no seguir al pie de la letra la imagen de la Plantilla que estamos recreando usaremos -2/3|1/3-. A la Columna de la derecha arrastraremos el Widget de Posts de Jet Elements y lo configuramos como querramos.

A la columna de la Izquierda arrastramos el Widget de Dynamic Field y en Object Field seleccionamos “content”. Luego Arrastramos el Widget “Valoración de Estrellas” y lo configuramos a nuestro gusto y necesidad.

Ahora buscamos en el Search del Menú el Widget Post Content y lo arrastramos debajo de Valoraciones de Estrellas. Por último arrastramos el Widget de Encabezado para el Título que desees ponerle y luego nuevamente el Widget de Posts y lo configuramos  para la cantidad de Publicaciones que desees.

Eso es todo. Sólo te resta ir a Conditions y aplicar la condición que desees. En nuestro caso usamos “Singular”.

 

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit