Cree una cartera profesional con Beaver Builder y Beaver Themer

Recientemente busqué en línea para encontrar ejemplos de sitios web para artistas. Lo que encontré fueron muchos sitios que demuestran trabajo de profesionales creativos que fueron un desastre. Páginas que tardaron unos minutos en cargarse, sitios web que no estaban completos, carteras que no estaban bien organizadas, funcionalidades que no funcionaban bien. Muchos de los sitios no han pasado la prueba de compatibilidad con los dispositivos móviles de Google o han durado más de un minuto para descargar, defectos que afectan el rendimiento de la búsqueda. Puede buscar una plataforma especializada o un complemento para ayudarlo a construir un sitio web de cartera, pero tengo un secreto para compartir. Es muy fácil crear un sitio de cartera profesional o una cartera de sitios web más grande, utilizando WordPress, Beaver Builders y Beaver Themer.
Una cartera que se ve hermosa y receptiva y que es fácil de agregar, elimina y clasifica el contenido de la cartera en la parte superior, sin tocar la apariencia. Esto significa que si usted es un diseñador web, puede enseñar fácilmente al sitio web del artista a mantenerlo. Lo mejor es que tiene la flexibilidad de crear un gran aspecto con exactamente el contenido deseado. Aún mejor, si desea cambiar el aspecto o el estilo de su cartera, puede hacer cambios simples en el aspecto Beaver Themer sin tocar el contenido. En esta publicación mostraremos por qué es necesario configurar un aspecto básico de la cartera como este:

Comenzaremos a usar publicaciones estándar y un aspecto Themer. A partir de ahí, le daremos una forma de enseñar algunas técnicas avanzadas para estructurar mejor su contenido de back-end y brindarle más opciones para hacer su contenido único: publicaciones personalizadas, campos personalizados, categorías y etiquetas y taxonomías personalizadas. ¿Cómo puede ser tan fácil? Si piensa en cómo puede mostrar las imágenes en una cartera, su primer pensamiento podría ser usar una galería de imágenes, pero a menudo hay información sobre cada trabajo, como el título, la fecha de la creación y los materiales utilizados para hacerlo. ., tal vez incluso una descripción, que la mayoría de las galerías de imágenes no tienen la flexibilidad para administrar. Hay una mejor manera de crear una cartera: crear una publicación para cada artículo. Si está acostumbrado a pensar en publicaciones de WordPress como una entrada típica de blog, puede ser difícil de imaginar, pero verá qué tan bien funciona cuando tiene Beaver Themer. Puede crear un aspecto de archivo para crear una o más páginas de la galería y un tipo singular para presentar toda la información para cada artículo individual. La imagen en la última sección muestra una cartera simple en una página de archivo de WordPress típica construida con Beaver Themer, que utiliza el editor Beaver Builder para construir la página.
Si está familiarizado con los módulos de Beaver Builder, el aspecto usa un módulo de publicaciones con un aspecto de mampostería. El número de columnas se ajusta automáticamente dependiendo del tamaño de la pantalla, de modo que responda sin levantar un dedo. Cualquier artículo en el que haga clic en la cartera se abre en su propia página, controlado por un aspecto de Themer: en este ejemplo, el título de la obra de arte es el título de la publicación, y la descripción es el contenido de la publicación. También puede incluir una descripción en esta página si lo desea, y luego le mostraremos cómo usar campos personalizados para separar la información sobre la ilustración de una descripción, como se muestra aquí:
También puede crear categorías para elementos de cartera, para que pueda agruparlas y mostrar categorías individuales. Comenzaremos mostrándole cómo crear los elementos desde la cartera en el back-end, luego hablaremos sobre cómo crear modelos Themer para mostrar la galería de cartera y los elementos individuales en la cartera. Paso 1. Cree una publicación para cada elemento en la cartera si su sitio no tiene un blog y no tiene la intención de tener un blog en el futuro, puede usar publicaciones estándar para crear su cartera. Si tiene un blog o crea un sitio para un cliente y desea mantener su parte trasera, puede crear una publicación personalizada. Cubriremos esto más tarde.

Tenga en cuenta que para las publicaciones, utilizará el editor de WordPress, ya sea el editor de bloques, el editor clásico, porque crearemos un aspecto de Themer para estas publicaciones únicas y no puede usar un diseño Themer y Beaver Builder juntos. Para crear sus publicaciones estándar:

En el panel de administración de WordPress, vaya a publicaciones> Agregar nuevo. Agregue un título de publicación, que será el título de la obra de arte que desea mostrar.
Establezca la imagen presentada para su publicación haciendo clic en Establecer la imagen recomendada, luego cargue la imagen ilustrada en la biblioteca de medios y seleccione. Asegúrese de agregar otro título y un título amistoso a la imagen mientras está en la biblioteca de medios, ya que esto es importante para la accesibilidad y la búsqueda y aparece en el código de página HTML.
Agregue cualquier información sobre la publicación al editor de bloques de WordPress o al editor clásico de WordPress.
Guarde la publicación y repita para cada elemento en la cartera.
Paso 2. Cree la ubicación para la cartera si no desea que su cartera aparezca en la página de inicio de su sitio, debe crear la página donde desea aparecer. Si tiene la intención de dedicar la página inicial a su galería de cartera, muévase a la siguiente sección.
En el panel de administración de WordPress, vaya a páginas> Agregar nuevo.
Cree un título para esta página, como “My Portfolio” y guárdelo. WordPress generará el contenido de esta página, no debe agregar nada solo.
Paso.
En el panel de administración de WordPress, vaya a Configuración> Leer.
Si su cartera estará en su página inicial, elija sus últimas publicaciones. Si su cartera está en la página que creó en el paso anterior, elija una página estática y en la página Postari elija el título de la página. Ahora, si observa la página que seleccionó para la cartera o la página de inicio, Verá un “archivo” no formado de todos los artículos en la cartera.
WordPress genera este archivo, y el formato y el contenido están controlados por su tema de WordPress. Es bueno por ahora. Si es nuevo en WordPress, aquí hay información básica sobre cómo funcionan las publicaciones y archivos estándar. Paso 4. Cree un aspecto Themer para el archivo de cartera Ahora diseñaremos la apariencia de esa página de archivo generada por WordPress creando un aspecto de Themer. Si necesita instalar Beaver Themer, siga estas instrucciones. Primero, cree una aparición para el archivo del tema:
En el panel de administración de WordPress, elija Beaver Builder> Aspectos temáticos.
Haga clic en Agregar nou.

Ingrese un título como el archivo de mi cartera. Este título aparece solo en la parte posterior.
En el campo de aspecto, elija el archivo.
Haga clic en Agregar el aspecto del tema.
Ahora agregue la ubicación para su aspecto Themer:
En el campo de ubicación, haga clic en el cuadro que elija y elija publicar el archivo.
Haga clic en Publicar.
Haga clic en Iniciar Beaver Builder.
La apariencia de Themer se abre con una plantilla inicial que contiene dos módulos: un módulo de título y un módulo de publicación. Abra el módulo de título y verá que el título utilizado es una conexión de campo al título del archivo:
La conexión de campo significa que, independientemente del tipo de archivo que ve (publicar, publicar categoría, etiqueta de publicación, etc.), verá el nombre correcto para el tipo de archivo. Sin embargo, desea que este archivo refleje su cartera, así que elimine la conexión de campo del campo de título e ingrese su título, como mi cartera. Abra las publicaciones bajo el título. Aquí realizará los cambios que establecerán el contenido y el estilo de esta página. Cambiemos la configuración para que coincida con la captura de pantalla que se muestra en la primera sección de este artículo.

En la pestaña Aspect, establezca el campo de apariencia en la mampostería.
En la sección de la imagen presentada, configure la imagen en ocultar.
En la Sección de Publicación Información o, configure el autor para que se oculte.

Establezca la fecha para esconderse.
En la sección de publicación de contenido, configure el contenido para ocultar.
Establezca múltiples enlaces para ocultar. Ahora debería ver la información correcta para su cartera: un aspecto de mampostería en el que cada artículo tiene una imagen presentada, un título y lo que haya ingresado para el contenido de la publicación.
Guarde el módulo y publique la página.
Ahora puede consultar la página en su sitio que ha designado como cartera y debería ver su aspecto de Themer. Paso 5. Cree una apariencia de Themer para mostrar elementos únicos en la cartera Si ve alguno de sus elementos individuales, descubrirá que también se muestran como publicaciones de blog predeterminadas, con configuraciones que provienen de su tema para crear un tipo de apariencia de tipo singular que formará la página de aspecto y contenido más adecuado para su cartera. Cree un aspecto singular:
En el panel de administración de WordPress, elija Beaver Builder> Aspectos temáticos. Haga clic en Agregar nou.
Ingrese un título como mis artículos en la cartera.
En el campo del aspecto, elige singular.
Haga clic en Agregar el aspecto del tema.
Agregue la ubicación para su aspecto Themer:
En el campo de ubicación, elija publicaciones y luego todas las publicaciones.
Haga clic en Publicar.
Haga clic en Iniciar Beaver Builder.
La apariencia se abre con una plantilla, pero continúe y limpie todas esas líneas. Esto es lo que proponemos, la imagen presentada de la publicación, el título de la publicación y el contenido de la publicación, con las instrucciones a continuación:
Beaver Builder tiene módulos especiales al construir diseños de Themer, que ahorran algunos pasos, por lo que los usaremos. 1. En el editor de Beaver Builder, haga clic en el signo más para abrir el panel contenido, luego haga clic en el campo Grup y elija aspectos temáticos del menú desplegable.
2. Tire del módulo de imagen recomendado para formar una nueva línea, luego guárdela. No debe hacer ningún cambio en este módulo. 3. Dibuja el módulo de título de publicación en una nueva fila. Verá que el texto del título muestra cualquier publicación que obtenga una vista previa, pero el título está alineado a la izquierda y posiblemente el tipo es demasiado grande, así que volvamos a solucionarla. 4. En la pestaña General, cambie la etiqueta HTML para que coincida con lo que se ajusta a esa posición de su página aquí seleccioné H2:
5. En la pestaña de estilo, en la sección de tipografía, haga clic en la fuente para abrir esa subsección y cambiar la configuración de alineación al interruptor central, luego guarde el módulo.
Puede cambiar cualquier otra configuración de impresión aquí si lo desea. 6. Abra el panel contenido, haga clic en el grupo para cambiar a módulos estándar, luego dibuje un módulo de editor de texto en la misma fila debajo del título de la publicación y ábralo para editar. 7. Haga clic en el signo más junto a las pestañas visuales y de texto para abrir la lista de conexiones al campo. Elija publicar contenido.
Verá el contenido de la publicación que aparecerá para el elemento que está previamente. 9. Guarde el módulo. Ahora agregemos algo para navegar en la parte inferior de la publicación para que sus visitantes puedan ir directamente de un artículo a otro. 1. En la pestaña Módulo en el panel contenido, seleccione el grupo de módulos temáticos y extraiga el módulo de navegación posterior en una nueva fila en la parte inferior del aspecto.
2. Guarde el módulo sin cambiar ninguna de las configuraciones. 3. Publique el look de Themer. Para ver el aspecto en la acción, vaya a la página de archivo de la galería y haga clic en cualquiera de los elementos que se muestran. ¡Eso es todo! Creaste una cartera básica. Cambie el estilo con algunas variaciones de cartera de clics ahora que ha creado un marco básico para la cartera, tiene todo el poder de Beaver Builder para crear estilo y buscar solo unos pocos clics. Aquí hay unos ejemplos. Cambie la apariencia de publicar con un solo cambio en el módulo de publicación, puede moverse a un aspecto de columnas, en el que la parte superior de cada capa de columna se alinea horizontalmente, o con un aspecto de la galería, en el que se muestra el título sobre la imagen En el ratón, como se muestra aquí:

También puede crear animación utilizando un módulo Slider de carrusel o publicaciones. Aquí hay un ejemplo de carrusel (menos animación):


¿Cambiar el fondo que prefiere los fondos oscuros? Cambie los colores de fondo y texto en filas y tiene un aspecto completamente nuevo. También puede cambiar el fondo de la publicación y el texto dentro del módulo de publicación, si lo desea, además de muchas otras opciones, como el tamaño de la imagen, la distancia. entre las imágenes y el color del texto. Los arquitectos de cartera más avanzados aquí hay algunas otras formas en que puede configurar su cartera. No le mostraremos todos los pasos para configurar estas funciones, pero solo queremos darle algunas ideas sobre cuán flexible y sofisticado puede ser este sistema. Cree un tipo de publicación personalizado en lugar de usar una publicación de cartera estándar, puede crear un tipo de publicación personalizada (CPT). Es fácil crear tipos de publicaciones personalizadas con un complemento gratuito, como CPT, y le recomendamos que aprenda cómo hacer esto, porque casi podemos garantizar que pensará sobre muchos otros usos para CPT. Creé un CPT llamado “My Portfolio”, que aparece en el menú de administración de WordPress:

Puede ver que esto mejora el grado de uso en la parte posterior, porque es fácil ver a dónde ir para administrar su cartera. Cuando configuré el CPT, configuramos los elementos en la cartera para incluir el título, la imagen presentada y el área de contenido como publicaciones estándar, para que la interfaz de uso sea familiar. Cree campos personalizados Puede agregar campos personalizados a sus publicaciones estándar o personalizadas, lo que también facilita los datos en back-end y estandariza la presentación en el front-end. En nuestro ejemplo, el área de contenido para cada artículo en la cartera contiene tres información: el año, el entorno y las dimensiones para esa obra de arte. Suponga que, en lugar de ingresar esa información en el área de publicación, creamos tres campos personalizados para esta información. Puede elegir entre muchos tipos de campos personalizados, lo que permite, por ejemplo, la introducción gratuita de texto o botones de radio. Puede proporcionar una opción de año y medio para que los usuarios puedan ingresar esos datos con un clic del mouse en lugar de la información de tipos en formato uniforme cada vez. Puede hacer que los campos sean obligatorios si desea asegurarse de que estos detalles no se olviden. Los campos personalizados ofrecen varias ventajas: facilitan la entrada de datos.

Le recuerdo que proporcione esa información para cada publicación.

La información es consistente y constantemente formada en la parte delantera.

En nuestro ejemplo, el uso de campos personalizados libera el área de contenido para otra información, como una descripción o una historia sobre la obra de arte. Aquí hay una captura de pantalla de una de nuestras publicaciones personalizadas en el editor de bloques de WordPress. Puede ver que los tres campos personalizados aparecen bajo el editor de texto. El campo de tamaño se ha configurado para que los usuarios puedan agregar unidades de medida adicionales y se guarden después de agregar. Beaver Themer acepta el complemento de campos avanzados, así como conexiones de campo fácilmente para mostrar esos valores de campo personalizados. También puede usar códigos de conexión de campo cortos, que devuelven un valor de texto, por lo que puede usar más de un valor de campo, o texto más un valor de campo, en una configuración del editor Beaver Builder. Para crear un código corto, haga clic en el mismo icono Plus para el campo Conectar, pero elija Insertar en lugar de Connect. Luego, una pantalla parece poder especificar información sobre el campo personalizado, y el código corto se crea e inserta automáticamente. Aquí agregué un módulo de editor de texto al aspecto Singular Themer, como se muestra en esta captura de pantalla.

La cadena es larga, pero se ha construido un código corto (en corchetes rectos) con comas o el signo de tiempo (x). Cuando se ve después del rescate, el editor muestra lo que verá en el front-end:

Para mostrar estos valores de campo personalizados en la cartera, puede cambiar el resultado estándar HTML en el módulo de publicaciones para incluir campos personalizados.Como se muestra en la siguiente captura de pantalla, cambie el campo Post Design a personalizado, luego haga clic en Editar diseño personalizado.Se muestra el aspecto HTML predeterminado y puede cambiarlo desde allí para agregar el campo personalizado de campo personalizado.En nuestra apariencia personalizada, utilizamos una tubería para separar los tres valores de campo personalizados, como se muestra como resultado. Cree categorías, etiquetas o taxonomías personalizadas en nuestra cartera de ejemplo, tenemos fotos mezcladas con aceite mezclado con tiza, se enfrenta a los humanos mezclados con abstracto abstracto. dibujos.Supongamos que desea la capacidad de clasificar su arte de diferentes maneras para que pueda agrupar o filtrar lo que se muestra.En WordPress, hay dos taxonomías incorporadas:

Categorías, que pueden ser jerárquicas y etiquetas, que no lo son. Puede crear cualquier categoría o etiqueta que desee usar con publicaciones estándar. Si tiene una publicación personalizada, puede aplicar las mismas categorías y etiquetas que usa para publicaciones estándar, pero en muchos casos es más lógico crear una o más taxonomías personalizadas. Una taxonomía personalizada puede ser jerárquica o neo -negraca como etiquetas, pero en la terminología de WordPress, cualquier taxonomía personalizada tiene “términos” en lugar de “categorías” o “etiquetas”. Puede usar el complemento CPT u otros complementos o el método manual para crear taxonomía personalizada. Luego, defina sus términos actuales en el tablero de administración de WordPress, así como para categorías y etiquetas. Ya sea que esté utilizando categorías, etiquetas o términos en taxonomías personalizadas, WordPress crea automáticamente una página de archivo para cada término y puede agregar una ubicación para su aspecto de archivo, para que también se apliquen a estas páginas de archivo. Aquí hay un ejemplo. Creé una taxonomía personalizada llamada categorías de cartera y la asigné a mi cartera. Como muestra esta captura de pantalla, la taxonomía personalizada aparece en el panel de administración de WP. Creamos dos conjuntos jerárquicos de términos:

Regresé a través de las publicaciones en la cartera y atribuí a cada uno de los términos apropiados. Luego, en el archivo de Themer de aspecto, cambié la publicación personalizada para agregar una fila para mostrar los términos de la publicación para cada artículo. Seguí el procedimiento para agregar un código de conexión corto al campo y obtuvimos este panel de visualización para elegir: Establecemos la ubicación de este aspecto de archivo para incluir los archivos de las categorías de publicaciones, y ahora, al hacer clic en uno de esos enlaces. De las categorías en las páginas del archivo, el archivo de categoría comienza con el título correcto y el formato correcto de la publicación: Resumen En esta publicación, le mostré los pasos básicos para crear una cartera hermosa y receptiva con Beaver Builder y Beaver. Le hemos mostrado los elementos básicos de Themer para especificar ubicaciones y usar conexiones de campo para crear fácilmente su cartera. Mostré lo fácil que es cambiar el estilo y la apariencia de estas páginas. También nos aventuramos en el territorio avanzado: crear tipos de publicaciones personalizadas, campos personalizados y taxonomías personalizadas. No hemos incluido cada paso de cómo trabajar, pero esperamos que si nunca ha usado tipos personalizados de publicaciones, se inspirará para investigar y aprender más. ¿Quieres crear tu propia cartera? ¡Intenta decirnos cómo funciona!