Plan Pro: Integración en su sitio web
Inicial ¿Es usted un artista? Pro Plan: Documentación

Plan Pro: Integración en su sitio web

Documentación

Integración de una galería Prodi Art

Inserte fácilmente su galería de ProdiArt en su sitio web.

  • Los clientes pueden comprar directamente desde su sitio.
  • La apariencia de una galería es personalizable y se integra mejor en un sitio web.
    Ejemplo de inserción en un sitio de Wordpress: https://alissart.com/en/boutique

La integración se hace simplemente añadiendo en su sitio el código HTML/Javascript proporcionado por Prodi Art.

Pruebe la integración en su sitio web

Sin tener que crear una cuenta en Prodi Art, pruebe la inserción en su sitio con una galería de demostración.

Cree una página de prueba e inserte en esta página el código HTML/Javascript abajo :

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-wp5.prodiart.com/en/

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. No puedes especificar un título para 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-wp5.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":
1. Haz clic en Agregar nuevo plugin

2. Busca e instala el plugin 'Fullwidth Templates for Any Theme & Page Builder'.

3. 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:


1. Editar la página de la galería

2. Habilitar la plantilla 'FW Fullwidth'

La galería ahora ocupa todo el ancho de la pantalla: https://demo-wp5.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:

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


Apertura de la div 'content section-inner'

El cierre de esta 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":

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.


Galería en un bloque

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:


Edita la página de la galería

Localiza el ID de esta página, después de "post=". Aquí 5

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:

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


Abriendo el div antes del código de la galería

Cierre de la div

Añadir código CSS con 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:

Resultado con el tema predeterminado de Wordpress:

¿Necesita ayuda?