in

Cómo construir un sitio web con el complemento WP Page Builder

¿Buscas una forma de crear tu propio sitio web sin tener que contratar a un desarrollador? No busques más: WP Page Builder es un complemento gratuito que hace la mayor parte del trabajo pesado por ti.

Los creadores de páginas de WordPress son la primera opción para crear un sitio web perfecto sin la ayuda de un desarrollador. Y hay uno en el mercado que vamos a probar en este artículo. Es WP Page Builder. Aprenderemos a utilizar este complemento de creación de páginas para crear un sitio web. WP Page Builder es un complemento gratuito que se integra con cualquier tema de WordPress. Puedes arrastrar y soltar elementos fácilmente en las páginas que estás creando, y no necesitas ninguna habilidad de codificación para hacerlo. Al menos, ese es el punto de vista del desarrollador Themeum, que pondré a prueba en este artículo. ¿El complemento realmente nos ayuda a crear un sitio web con tanta facilidad? ¿Podemos lograr nuestros objetivos para un sitio web con él? Estamos a punto de averiguarlo. Repasemos el proceso de creación de un sitio web real utilizando el complemento WP Page Builder. Construiremos un sitio web de algunas páginas simples relacionadas con el parque ficticio Rockhedge. Aprenderemos sobre el complemento desde la instalación hasta el lanzamiento del sitio web. Nuestras metas son:

  • crear rápidamente el sitio web,
  • crear una página de inicio con las características y aspectos destacados del parque,
  • crear una página para ayudar a los visitantes a encontrar el parque,
  • crear una página de contacto.

Comencemos con un sitio web de WordPress en blanco, con el tema Twenty Seventeen instalado.

wppagebuilderplugin-image13-7337998
(Vista previa grande)

Instalación del complemento  #

WP Page Builder es gratuito y puedes descargarlo del sitio web de Themeum. También es fácil de instalar a través del panel de administración de WordPress. Nos desplazamos hacia abajo en la lista para encontrarlo. Busca el que tiene el icono azul «P» con un cuadrado en el interior.

wppagebuilderplugin-image5-6308645
(Vista previa grande)

Después de la instalación, no se te molestará con ninguna pantalla de bienvenida, y lo único nuevo en el área de administración que puedes notar es un nuevo elemento en el menú. Esta es la página de configuración general del complemento, donde puedes controlar algunas cosas, como qué tipos de publicaciones debes admitir el complemento y quién debería poder editar una página con el creador de páginas.

>Me gusta que el complemento no se apodere de todo el panel de administración. Es discreto y ni siquiera estás obligado a usarlo para crear páginas o publicaciones:

Después de hacer clic en el botón, te dirige a una nueva pantalla donde realmente aparece el creador de páginas.

wppagebuilderplugin-image3-8997240
(Vista previa grande)

El aspecto y la sensación en general son muy buenos. Me gusta especialmente la forma en que funcionan las opciones de respuesta; todo el sitio web se encoge con una bonita animación al hacer clic en el icono de la tableta o del móvil. Todo el contenido y las opciones que puedes modificar están en el lado izquierdo, lo cual es bastante conveniente porque los paneles de edición no se mezclan con el contenido real de la página. Lo que no encuentro tan bueno son los íconos de la barra de herramientas de filas y complementos. Son demasiado pequeños y realmente no se pueden distinguir entre sí sin acercarse al monitor. Además, tuve que pensar un rato en los elementos del menú de la izquierda, porque el nombre «Complementos» me resultaba un poco confuso. En este complemento, los complementos son las piezas de contenido que colocas en tu sitio web, no complementos premium que puedes instalar para hacer que tu sitio web sea aún más genial. Otra cosa que se necesita es soporte. No hay ninguno. Sería muy bueno tener algún texto de ayuda, aunque el generador de páginas parece ser muy fácil de usar. Por ejemplo, la pestaña «Biblioteca» no tiene ningún contenido y realmente no sé qué es o qué puedo hacer con él. Aparte de estas pequeñas cosas, me gusta este editor. ¡Procedamos a configurar nuestra primera página!

Creación de la página de inicio  #

De forma predeterminada, puedes colocar el contenido creado con WP Page Builder en un lugar, donde aparecería el contenido estándar. Si bien este sería el comportamiento esperado con la mayoría de los temas, no es en mi caso. No quiero que mi contenido se aplaste en la plantilla predeterminada:

Probablemente esta sea la razón por la que el complemento viene incluido con una plantilla de página llamada WP Page Builder Template. Difunde el contenido creado por toda la página y solo se utilizan el encabezado y el pie de página del tema. El contenido se ve mucho mejor ahora. Creo que este creador de páginas podría encajar en cualquier tema usando esta plantilla de página.

De acuerdo, el tema está instalado, el generador de páginas está instalado y la página está preparada. ¿Qué hacemos a continuación? Estoy seguro de que has estado en esta posición al usar creadores de páginas antes; simplemente no sabes qué hacer con la página. Ni siquiera sabes lo que puedes hacer con la página. Es el problema estándar del «lienzo en blanco». Sin embargo, descubrí algo llamado «Diseños» en la barra lateral del complemento. Y la forma en que funciona me impresionó.

Diseños de página  #

Los diseños de página son páginas completas, listas para ser importadas en su sitio web de WordPress. Suena bien, ¿no? Ver este:

(Vista previa grande)

Como puedes ver, hay muchas plantillas y la mayoría de ellas son de pago. Sin embargo, algunos son gratuitos y puedes usarlos para inspirarte. La mejor parte de esta importación es que no hincha WordPress. Puedes borrar el contenido de la página con dos clics y no queda nada. Incluso las imágenes no se cargan en la biblioteca de WordPress. Puedes probar muchos conceptos y opciones, y ajustar todo a sus necesidades sin terminar con un montón de cosas no utilizadas importadas a su instalación de WordPress. Realmente me gusta eso.

Composición de la página de inicio  #

Mi idea inicial para la página de inicio fueron algunas imágenes del parque y algunas características destacadas. Después de inspirarme con los diseños preparados por Themeum, comencé con una imagen de encabezado y creé mis otras páginas, así como la navegación principal. Decidí no usar ningún diseño porque los bloques y complementos son muy simples de usar y vienen con contenido predeterminado. Comencé con una sección de imagen grande justo debajo del encabezado, con un fondo fijo y un título genérico.

(Vista previa grande)

Configurar esta sección fue muy fácil, pero tuve algunos problemas con la fuente personalizada para los títulos. Me di cuenta de que tengo que eliminar mi selección anterior y luego puedo elegir una nueva familia de fuentes. Una cosa que me gusta es la forma en que puedes ajustar el relleno del complemento en vivo en la pantalla:

(Vista previa grande)

Para la siguiente sección, decidí usar un bloque de contenido predefinido, que me parece perfecto. Agregarlo a la página también es muy simple: simplemente lo coloqué en el lugar deseado y ajusté el contenido de muestra.

(Vista previa grande)

Completar el contenido fue muy sencillo y rápidamente llegué a la última sección, la llamada a la acción. Allí, utilicé el bloque de llamada a la acción con contenido muy simple.

Et voilà! El proceso de creación de la página fue muy simple y lo disfruté.

La creación de “encontrarnos” Página  #

La siguiente página es aquella en la que la gente puede encontrar fácilmente nuestro parque. Esto implicó el uso de secciones más avanzadas, como un mapa. Desafortunadamente, el complemento de mapa no está disponible en la versión gratuita del complemento, así que decidí escribirlo yo mismo y ver cómo se ve el código base del complemento. El código no está nada mal. Es claro y fácil de leer, a pesar de que casi no hay comentarios en línea. No he encontrado ninguna documentación, así que tuve que investigar para ver cómo podía extender el complemento. Y no parecía que necesitaba mucho, solo una clase adicional y un filtro.

Complemento personalizado de Google Map  #

Cuando no tiene ninguna documentación, el mejor enfoque es copiar y ajustar el código existente. Parece que hay muchas opciones de configuración disponibles, algunas de las cuales realmente necesitan documentación sólida. Pero para nuestro caso, haremos un iframe simple de Google Map usando una clave API de Google, con un lugar para consultar y la altura del iframe. Así es como se ve nuestra clase:

class JakubMikita_Addon_GoogleMap{

    public function get_name(){
        return 'jakubmikita_googlemap_block';
    }
    public function get_title(){
        return 'Google Map';
    }
    public function get_icon() {
        return 'wppb-font-location-map';
    }

    // Google Map block Settings Fields
    public function get_settings() {

        $settings = array(
            'apikey' => array(
                'type' => 'text',
                'title' => __('Google Maps API key','wp-pagebuilder'),
            ),
            'place' => array(
                'type' => 'text',
                'title' => __('Map place','wp-pagebuilder'),
            ),
            'height' => array(
                'type' => 'number',
                'title' => 'Height',
                'unit' => array( 'px','em','%' ),
                'responsive' => true,
                'std' => array(
                    'md' => '500px',
                    'sm' => '500px',
                    'xs' => '500px',
                ),
                'tab' => 'style',
                'selector' => '{{SELECTOR}} iframe { height: {{data.height}}; }',
            ),
        );
        return $settings;
    }

    // Google Map Render HTML
    public function render($data = null){
        $settings       = $data['settings'];
        $apikey         = isset($settings['apikey']) ? $settings['apikey'] : false;
        $place          = isset($settings['place']) ? $settings['place'] : false;

        $output = '';
        return $output;
    }

    // Google Map Template
    public function getTemplate(){
        $output = '';
        return $output;
    }

}

Parece simple, ¿verdad? En la parte superior, tenemos tres métodos que identifican el complemento: nombre, título e icono. El siguiente método get_settings() es donde definimos todas las entradas del usuario. Los definimos como una matriz; solo miré otros complementos para descubrir los campos que puedo agregar. Bastante simple y fácil de implementar. Descubrí que el siguiente método render(), se usa en la parte frontal. Obtiene todas las configuraciones del usuario y devuelve el iframe del mapa. El último método, getTemplate() se utiliza en la pantalla del generador de páginas. Tener dos métodos para renderizar el mismo código no es genial, pero supongo que la razón es que el segundo tiene que ser analizado con JavaScript. Otra cosa que funcionaría mejor es el método de registro de un complemento. Si este fuera un complemento más avanzado, me gustaría incluir CSS y JavaScript en archivos separados. No muy conveniente, pero tampoco el fin del mundo. Lo último que tenemos que hacer para registrar el complemento es incluirlo en la matriz, lo que podemos hacer con un simple filtro:

add_filter('wppb_available_addons', function( $addons) {
    $addons[] = 'JakubMikita_Addon_GoogleMap';
    return $addons;
} );

Eso es todo. El proceso es rápido y sencillo. Aquí está nuestro complemento personalizado:

Ahora tenemos un increíble mapa de página completa en esta página.

Creación de la página «Contacta con nosotros»  #

Para la última página, pongamos un formulario de contacto. Estaba a punto de instalar uno de los complementos de formulario de contacto más populares cuando noté el complemento «Formulario». Le di una oportunidad. Sorprendentemente, cuando solté el complemento en la página, vi todos los campos que quería ya configurados y alineados correctamente.

La parte más interesante es que WP Page Builder se integra con los complementos Contact Form 7 y weForms. Incluso puedes agregar un CAPTCHA simple o usar reCAPTCHA de Google después de proporcionar las claves del sitio web. Complemento muy guay. Los envíos al formulario llegan a mi bandeja de entrada sin ningún problema, incluidos todos los campos, y el usuario ve un bonito mensaje de confirmación al enviar el formulario.

Resumen  #

Debo decir que WP Page Builder es un complemento sólido. Obviamente, tiene algunos defectos, pero todavía es un producto nuevo, y estoy seguro de que Themeum corregirá todos los errores e implementará las mejoras mencionadas en este artículo. La sensación general del complemento es excelente. El complemento hace la mayor parte del trabajo pesado, y no tienes que pensar en cómo hacer lo que quieres porque en su mayoría ya está hecho. El contenido predeterminado hace un muy buen trabajo y acelera el trabajo. Themeum tiene razón: crear una página con su complemento es simple, pero no porque el complemento sea básico. El complemento es intuitivo, pero está repleto de complementos geniales. Usé solo algunos de los complementos, pero el complemento viene con muchos más. Los bloques que normalmente pasarías horas tratando de averiguar cómo implementar son simplemente arrastrar y soltar cuando usas el complemento WP Page Builder. Por ejemplo, las barras de progreso, los íconos sociales, los testimonios y los cuadros de contenido para voltear están listos y esperando para ser utilizados. Es difícil transmitir la experiencia por escrito. Solo tienes que instalar el complemento y verlo por ti mismo.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

23 formas prácticas de dirigir el tráfico a un nuevo sitio web de WordPress, a partir de hoy

8 excelentes editores de texto para Windows, macOS y Linux (2022)