<script> var pa_id = "demo"; /* Id of Artist page */ var pa_showHideMenu = ".navigation-top"; /* Ids of elements to hide when a modal is showed / image is zoomed */ </script> <script src="https://prodiart.com/include/js/iframeResizer.min.js"></script> <style>#pa_if_artist{width:100% !important;/*Might be needed for Wordpress website*/</style> <iframe id="pa_if_artist" style="width: 100% !important; min-height: 220px;overflow: hidden;z-index: 99999999;" src="" frameborder="0" scrolling="no"></iframe> <script type="text/javascript" src="https://prodiart.com/include/php/prodomain-iframe.js.php"></script>

Integración paso a paso en un sitio de Wordpress

Para este ejemplo, se utilizó la versión 5 de Wordpress con su tema predeterminado: https://demo-wp.prodiart.com/

1. Crear una nueva página

2. Seleccione un bloque HTML personalizado

Pulsa en el y busca "html" para seleccionar un bloque de "HTML personalizado".

3. Copiar/pegar el código de Prodi Art

Inserte en este bloque de HTML el código proporcionado anteriormente. Luego guarda esta página. Puedes dejar el título en blanco y mostrar la galería en la parte superior de la página.

4. Extender la galería a lo largo de todo el ancho con un plugin

De forma predeterminada, una nueva página creada con Wordpress no se extenderá a todo el ancho de la pantalla: https://demo-wp.prodiart.com/en/test-no-fullwidth/

Necesitas extender la visualización de la página. Esto puede hacerse insertando CSS en Wordpres o usando un plugin de Wordpress como "Fullwidth Templates for Any Theme & Page Builder".

4.1 Pasos para instalar y activar el plugin "Fullwidth Templates for Any Theme & Page Builder":

4.2 Usando el Plugin en la página de la galería:

Para usar este Plugin en la página de la galería, necesitas activar la FW Fullwidth Template:

La galería ahora ocupa todo el ancho de la pantalla: https://demo-wp.prodiart.com/en/test-fullwidth/.

Con este plugin habilitado, el título ya no aparece, puedes por ejemplo añadir un bloque sobre el bloque de la galería para mostrar un título.

5. La galería no es visible

Añadiendo directamente el código HTML de la galería a tu página, un tema de Wordpress como Hitchcock puede posicionar tu galería detrás de otro elemento. En este caso, está detrás de la imagen de cabecera, y puedes ver que la parte inferior de la galería:

• https://demo-wp-hitchcock.prodiart.com/no-section-inner/ (Desplácese hacia abajo para ver la galería)

En este caso particular, tienes que añadir el código de la galería entre estas 2 líneas HTML:

<div class="content section-inner"> ...código de la galería... </div>

La galería es ahora visible y ocupa todo el ancho de la pantalla gracias al plugin "Fullwidth Templates for Any Theme & Page Builder":

• https://demo-wp-hitchcock.prodiart.com/with-section-inner

6. Galería en un bloque en el centro de la pantalla

Pour les écrans larges, vous pouvez mettre la galerie dans un bloc situé au milieu de l'écran et ainsi afficher l'arrière plan du site ou sa couleur.

• https://demo-wp-hitchcock.prodiart.com/shop/

Este diseño debe hacerse con código CSS y puede depender del tema de Wordpress que esté utilizando. Para insertar el código CSS en tu sitio de Wordpress, puedes utilizar la extensión Simple CSS que debes instalar y activar. Una vez instalada, esta extensión estará disponible en el menú de Wordpress Apariencia -> CSS Simple.

Antes de crear el CSS, necesitas saber el ID de tu página de la galería. Este Id se mostrará en la URL donde se edite la página:

La galería debe estar dentro de un bloque de tipo <div>.../div> incluyendo una clase como "sección-galería" para identificarlo, por ejemplo:

<div class="section-gallery"> ...código de la galería... </div>

Con este Id, el código CSS de esta página puede ser añadido con la extensión Simple CSS.

En este ejemplo, el Id de la página es 61 y el código CSS utilizado para mostrar la galería en un bloque es:

.page-id-61 .section-gallery { width:100%; max-width: 1400px !important; margin: auto !important; padding-bottom: 40px; }

Resultado con el tema predeterminado de Wordpress:

• https://demo-wp.prodiart.com/gallery-in-a-block/