Cómo Diseñar Páginas en WordPress con Elementor Page Builder

Categorias: Plugins, Wordpress

Cómo Diseñar Páginas en WordPress con Elementor Page Builder

¡¡¡¡ATENCIÓN!!!! Ampliamos la promoción descuento para hosting . Podrás contratar tu alojamiento web con un 50% de descuento (acumulable al 20% ya ofrecido en nuestra web) y beneficiarte de todas las ventajas y servicios que incluye nuestro alojamiento web.
Para poder beneficiarte de esta promoción descuento para la contratación de tu alojamiento web tan solo debes emplear el cupón promocional MIGRACIONHOSTINET a la hora de hacer tu pedido.

Hosting Genérico

A la hora de crear un sitio web por primera vez hay que tener en cuenta ciertos aspectos, uno de los más importantes es el gestor de contenidos que vamos a usar, si es que vamos a usar uno.

Las estadísticas muestran que WordPress es la opción preferida por la mayoría de los usuarios y no es de extrañar, es sencillo de usar, muy configurable, con una gran comunidad detrás y con cientos de plugins y temas gratuitos disponibles para crear un sitio web perfecto para el proyecto que se tenga en mente.

Instalar WordPress es muy sencillo en Hostinet, ya que contamos con el instalador automático Softaculous en todos los alojamientos que cuenten con cPanel como panel de control, por cierto, todos los alojamientos (Linux compartidos) que ofrece Hostinet cuentan con cPanel como panel de control, así que instalar WordPress está al alcance de cualquiera.

Una vez instalado WordPress, lo normal es empezar a buscar el theme que más se adapte a las necesidades del proyecto que se tenga en mente. Una vez elegido, sólo hay que instalarlo.

Así que se tiene WordPress instalado en el alojamiento web y el theme elegido instalado, pero los themes hay que modificarlos y ahí puede llegar el problema.

Cambiar la cabecera y cosas así es muy sencillo en WordPress, pero si se quiere realizar un diseño o una modificación importante de una página habrá que lidiar con código HTML y CSS.

Esto es un problema para los usuarios que no tengan conocimientos en la materia, pero esto se puede solucionar con los llamados maquetadores visuales o Page Builder.

Con un maquetador visual se puede realizar el diseño de una web arrastrando elementos de un menú a la propia página, algo que se conoce como Drag & Drop (Arrastrar y Soltar).

Existen varios maquetadores visuales para WordPress en forma de plugin, pero hay uno que, pese al poco tiempo que está disponible, está ganándose la confianza de muchos usuarios, y se llama Elementor Page Builder.

Si buscas una guía básica para Elementor, puedes consultar nuestro tutorial.

Plugin Elementor Page Builder

El plugin Elementor Page Builder está calando en WordPress gracias a su facilidad de uso, a la limpieza de su código, diseño en vivo y varias características más que están gustando mucho a los usuarios de WordPress.

Además, es gratuito, tiene una opción PRO de pago por si se queda corto, pero en la mayoría de los casos la versión gratuita servirá.

Se puede instalar directamente del repositorio de plugins de WordPress o descargarlo desde aquí.


Una vez activado, podemos encontrar un nuevo apartado en el menú lateral de WordPress, desde donde podemos ir a Settings para determinar una configuración básica.

menu elementor Page Builder

La configuración puede cambiar dependiendo de cada uno, pero lo habitual es editar sólo las páginas en la pestaña General y determinar el ancho en la pestaña Style.

Por defecto, el ancho vienen con 1140 px. Si lo dejamos en blanco usará todo el espacio disponible.

editar paginas elementor plugin WordPress

 

Editando un Página con Elementor Page Builder

A la hora de empezar a utilizar Elementor para editar una página no existe perdida. Sólo tenemos que añadir una nueva página y veremos un enorme botón azul con la leyenda Edit with Elementor.

empezar editar pagina elementor WordPress

Al pulsar el botón nos levará a una nueva ventana donde cambiará toda la interface gráfica. Podemos ver una barra lateral con multitud de elementos (widgets) y una parte central donde se podrán añadir dichos elementos.

En la parte central también veremos un botón desde donde se pueden revisar templates por si alguno nos interesara para la página.

elementor interface WordPress

En la ventana de templates veremos varios modelos que podemos agregar, los que estén marcados con la palabra PRO no están disponibles en la versión gratuita, pero si alguno nos interesa solo hay que pasar el ratón por encima y pulsar en Insert.

Una vez cargada la el template la edición del mismo es muy intuitiva.

Si hacemos doble click sobre cualquier texto, podemos editarlo sin más.

editor texto prueba WordPress

Al pasar el ratón por cada elemento aparece un pequeño menú en la parte superior desde donde podemos editar dicho elemento. Si pulsamos en el icono de la izquierda (Edit Section), en el menú lateral izquierdo aparecerán distintas opciones de edición como el ancho, modificar la imagen, cambiar textos, colores, etc…

Se pueden tocar todas las opciones para saber que modifican sin ningún miedo, ya que existe un botón para resetear la sección como estaba.

opciones seccion elementor WordPress

Creando un Página con Elementor Page Builder

Si lo que buscamos es crear una página con un diseño propio y sin usar plantillas, sólo hay que volver a empezar pero esta vez usar las secciones de menú izquierdo.

Añadir una sección es muy sencillo en Elementor, tan sólo hay que hacer click con el ratón y arrastrarla hasta la zona marcada en la parte central.

anadir seccion elementor WordPress

Al añadir la sección aparecerán las opciones de la misma en el menú lateral. Desde ahí podremos editarla hasta dejarla como queramos.

Cada sección dispone de opciones distintas, ya que no es lo mismo editar un botón que editar una caja de texto.

editar boton elementor WordPRess

De esta forma, elemento a elemento, iremos construyendo la página de la forma que se quiera mientras se ve en vivo como va quedado.

Otras Opciones de Elementor

En la parte inferior del menú lateral tenemos un botón para guardar los cambios, importante para no perder trabajo por un cierre inesperado de la web, por ejemplo

También tenemos una opción muy interesante que es visualizar la página en un móvil o tableta

visualizar movil elementor plugin WordPress

Y es que otra de las cosas buenas que tiene Elementor, es que sus diseños son responsives para que puedan adaptarse a cualquier tipo de pantalla.

también tenemos un botón de historial, para volver hacia atrás respecto a las acciones que realicemos y otro botón por si queremos guardar el diseño como template para usarlo en otras páginas, algo muy útil para conseguir un diseño homogéneo.

Cosas a Tener en Cuenta

Sin duda el plugin Elementor Page Builder es una buena opción para trabajar el diseño de las páginas en WordPress sin tener que tocar una sola linea de código y la versión gratuita dispone de un montón de opciones para cumplir con las demandas de la mayoría de usuarios.

Si se necesitan más opciones o se usa WooCommerce, la opción de pago puede ser una buena idea, pero eso es algo que tiene que decidir cada uno.

Si se es cliente de Hostinet pero no se quiere usar WordPress, también se dispone de la posibilidad de usar un maquetador visual para desarrollar una página web sencilla.

En todos los planes de hosting, menos el Básico y SSD 1, existe la herramienta RV SiteBuilder, que funciona de una manera similar a Elementor.

Y desde Softaculous también se puede usar un maquetador llamado SitePad, aunque este está algo más limitado en la versión gratuita.

Para usar RV SiteBuilder, sólo hay que contratar un hosting SSD 2 en adelante:

Hosting SSD NVMe