Cómo construir un sitio web con Drupal










  • Drupal es un gran sistema para usar cuando necesita un sitio web configurado rápidamente. En lugar de intentar aprender a programar o pagar a un tercero para que construya un sitio para usted, Drupal ofrece todos los elementos para una presencia en línea. Ya sea que esté creando un sitio atractivo para el negocio o simplemente necesite un blog personal, todo se puede hacer con este sistema de administración de contenido de código abierto.

    Después de instalar Drupal , es hora de comenzar a construir. En este tutorial, repasaré las etapas iniciales para crear un sitio web con el sistema. En poco tiempo, tendrá una porción de bienes raíces en Internet que se verá increíble y estará lista para el tráfico.

    Configuración de Drupal con elementos básicos

    El primer paso es tener un alojamiento web que sea compatible con Drupal. Hay algunos requisitos que deberá seguir, como asegurarse de tener la versión correcta de PHP. No todas las plataformas de alojamiento utilizan el mismo software.

    En versiones anteriores de Drupal, el editor WYSIWYG debía instalarse por separado del sistema. Sin embargo, Drupal 8 viene con el módulo de edición de texto más popular, así como con el cargador de imágenes. Si está utilizando una versión anterior de Drupal, sugeriría actualizar o instalar el módulo TinyMCE y realizar cambios de configuración.

    Para editar la configuración del editor de texto de Drupal, haga clic en el enlace "Configuración" en la barra de herramientas superior.

    Enlace de configuración de Drupal

    Busque y haga clic en el control "Editores y formatos de texto" en la pantalla de configuración.

    Editores de texto Drupal

    En la siguiente pantalla, puede controlar cómo otros editan el contenido en el sitio web mientras configura roles para el editor de texto preferido. De forma predeterminada, Drupal le brinda control y herramientas básicas de HTML al escribir texto. Esto se puede cambiar desde la pantalla Formatos de texto y editores. Utiliza una interfaz de arrastrar y soltar para organizar qué editor se usa principalmente.

    Por ahora, solo desea configurar el control del administrador. Mantenga presionado el botón del mouse, haga clic en la flecha de cuatro puntas para el "HTML completo" y arrástrelo hacia la parte superior. Haga clic en el botón "Guardar" en la parte inferior izquierda.

    Editor de texto principal de Drupal

    A continuación, haga clic en el botón "Configurar" del editor HTML completo. Esto abrirá una ventana para ajustar aún más la configuración.

    Configuración del editor de Drupal

    Desde esta pantalla, puede modificar la configuración y cómo aparece el editor al escribir texto. Puede:

    • Establecer roles de usuario: esto se basa en los permisos que desea otorgar a otros que escriben en su sitio.
    • Determine qué editor de texto usar: si instala un módulo de edición de texto diferente, puede cambiarlo desde el menú desplegable.
    • Configuración de la barra de herramientas de arrastrar y soltar: arrastre las herramientas de edición que desea usar y elimine las que no necesita.
    • Cambie la configuración de carga de imágenes: el directorio, los tamaños de archivo y las dimensiones máximas se pueden cambiar aquí.
    • Habilitar filtros: use casillas de verificación para asignar cómo se comporta el editor, como convertir URL en enlaces automáticamente o alinear imágenes.
    • Cambie el orden de procesamiento del filtro: al arrastrar y soltar, puede modificar la forma en que Drupal realiza sus pedidos.

    Editor HTML completo de Drupal

    Haga clic en el botón "Guardar configuración" en la parte inferior cuando haya terminado.

    Drupal Guardar Editar Configuración

    Ahora su sitio web está listo para el contenido utilizando un editor de texto personalizado. Hay muchos sistemas de edición que puede encontrar en Internet si no le gusta el CKEditor predeterminado dentro de Drupal 8. Sin embargo, esta es una de las mejores plataformas y es estable.

    Elegir un diseño y un tema

    El siguiente paso es decidir un diseño y un tema para el sitio web. Aquí es donde comienzan algunos de los aspectos más divertidos.

    La apariencia de su sitio jugará un papel fundamental en la reacción de los visitantes. Puede conducir a mejorar las relaciones comerciales, así como a aumentar la cantidad de tiempo que una persona permanece en su sitio leyendo contenido.

    Haga clic en el enlace "Apariencia" en la parte superior de la barra de herramientas de administración.

    Apariencia Drupal

    Desde esta pantalla, puede editar cada tema haciendo clic en el botón de configuración de cualquiera que haya instalado. Los ajustes disponibles pueden ser diferentes con cada tema, ya que los desarrolladores ofrecen diferentes componentes. Sin embargo, la mayoría permitirá una gran personalización en colores, así como modificaciones a los elementos de la página.

    En este tutorial, solo le mostraré cómo instalar un nuevo tema. Vamos a entrar en hacer ajustes en una fecha posterior. Por ahora, haga clic en el botón "Instalar nuevo tema" encima de su lista de temas.

    Nuevo tema de Drupal

    En esta nueva ventana, puede instalar directamente un tema desde la URL de un sitio web o cargar uno directamente desde su computadora. Drupal admite archivos en formatos ZIP, TAR, TGZ, GZ y BZ2. Una vez que seleccione el nuevo tema, haga clic en el botón "Instalar" en la parte inferior izquierda.

    Después de cargar el tema, vuelva al área Apariencia y haga clic en el enlace "Instalar y configurar como predeterminado".

    Establecer tema predeterminado de Drupal

    Puede encontrar temas en muchas áreas de Internet, pero le sugiero que consulte primero el sitio web de Drupal. Estos tienen la mayor probabilidad de ser estables con un riesgo reducido de problemas de seguridad.

    NOTA: Algunos temas más antiguos no podrán transferirse a Drupal 8 debido a que se necesitan archivos específicos para la versión más reciente.

    Búsqueda de temas de Drupal

    Una vez que se haya instalado el tema, ahora puede acceder a su configuración y realizar sus cambios personalizados.

    Drupal personalizar tema

    Desarrollo de la página de inicio

    La página de inicio es lo primero que la gente verá cuando visite tu dominio. En este tutorial de creación de sitios de Drupal, le mostraré cómo configurar una página estática para que actúe como vanguardia. Es una de las formas más sencillas de preparar inmediatamente el sitio para el tráfico.

    Lo primero que necesitas es crear una página estática. Haga clic en el enlace "Contenido" en la barra de herramientas de administración superior.

    Drupal Agregar contenido

    A continuación, verá un botón para “ + Agregar contenido ”. Haga clic aquí y luego seleccione la opción para crear una " Página básica ".

    Agregue un título al artículo y complete el cuerpo con el texto que desea mostrar en la página principal. Una vez que se agrega su contenido, haga clic en "Opciones de promoción" a la derecha para expandir su ventana. Seleccione la casilla de verificación junto a "Promocionado a la página principal".

    Una vez que haya terminado, haga clic en el botón "Guardar y publicar" a la izquierda debajo de la pantalla del editor de texto.

    Página principal de promoción de Drupal

    Después de guardar el contenido, tome nota de la URL de la página en la barra de direcciones del navegador. Necesitarás esto para la siguiente parte. Por ejemplo, mi URL muestra el dominio y “/nodo/1” a continuación. Es esta parte la que quieres tomar nota.

    Vuelva al menú Configuración en la barra de administración superior y haga clic en "Configuración básica del sitio" en la ventana Sistema.

    Configuración básica del sitio de Drupal

    Ingrese la URL que creó para la página de inicio y haga clic en el botón "Guardar configuración".

    Drupal Inicio Guardar

    Ahora, tiene una página de inicio lista y esperando a los visitantes.

    Adición de páginas informativas

    El siguiente paso para construir un sitio con Drupal es configurar sus páginas estáticas. Cosas como "Acerca de nosotros" o la descripción de los servicios que brinda brinda información a los visitantes curiosos y se suma al compromiso.

    Para comenzar, regrese al área de Contenido y cree una nueva página básica como se describe anteriormente.

    Página estática de Drupal

    En este ejemplo, estoy creando una página "Acerca de nosotros". En el lado derecho de Drupal, busque la opción Configuración de ruta de URL y haga clic en ella. Esto expandirá la ventana para mostrar el alias de URL. Cambiaré el alias a " /about ". Desea que este alias sea algo relacionado con lo que está creando. Por ejemplo, puede usar " /servicio " para una página de servicios.

    Alias ​​de página estática de Drupal

    Será importante conocer este alias más adelante. Tome nota escribiendo el alias en algún lugar donde no perderá el nombre.

    Una vez que haya terminado de crear la página, haga clic en el botón "Guardar y publicar" en la parte inferior.

    Drupal Sobre Nosotros Botón Guardar

    Adición de un blog al sitio

    Un blog es una de las partes más importantes para impulsar el tráfico y el marketing de contenidos. Desempeña un papel tan vital que la mayoría de las empresas lo alojan cuando crean un sitio web de Drupal.

    En versiones anteriores de Drupal, el blog era parte del núcleo. Sin embargo, desde entonces los desarrolladores han eliminado esta capacidad para mejorar la funcionalidad general del núcleo. Afortunadamente, este módulo se puede encontrar en Drupal e instalar en el sitio web. Sugiero buscar un buen módulo para agregar un blog al sitio.

    Para instalar el módulo de blog, vaya al área "Extender" de Drupal y haga clic en el botón "Instalar nuevo módulo".

    Drupal instalar nuevo módulo

    Abra una nueva pestaña y descargue el módulo Blog del sitio web de Drupal . Puede ser más fácil guardarlo en su escritorio. Una vez que haya descargado el archivo, regrese a la pestaña de administración de Drupal de su navegador y elija el archivo. Haga clic en instalar.

    Instalación del blog de Drupal

    Regrese al área Extender de Drupal y desplácese hacia abajo hasta que vea el módulo "Blog" dentro de la categoría "Otro". Haga clic en la casilla de verificación junto a Blog y haga clic en Instalar.

    Blog de instalación de Drupal

    Ve al área de “Contenido” de Drupal. Verá un nuevo tipo llamado "Publicación de blog". Crea tu primera publicación de blog y haz clic en el botón "Guardar y publicar". En este tutorial, estoy haciendo una publicación simple y agregando una etiqueta de blog.

    Drupal Guardar Blog

    Ahora que tiene una publicación de blog lista, es hora de vincular el blog al menú. Vaya al área "Estructura" de Drupal y haga clic en "Menús".

    Menú del blog de Drupal

    Haga clic en el menú desplegable de "Navegación principal" y seleccione "Agregar enlace".

    Enlace del blog de Drupal

    Desde esta pantalla, ingrese "Blog" como el título del enlace del Menú y "blog" como el Enlace. Puede agregar una descripción del enlace que se mostrará cuando pase el mouse sobre él.

    Cuando haya terminado de completar la información, haga clic en el botón "Guardar".

    Enlace del blog de Drupal Guardar

    Agregar una página de "Contáctenos"

    Una página de contacto ofrece a sus visitantes una forma de ponerse en contacto con usted. Es una gran adición si el sitio es para un negocio o simplemente para agregar interacción.

    Drupal 8 viene con el módulo de contacto ya instalado y listo para funcionar. Sin embargo, se puede encontrar en el área Extender si desea asegurarse de que el módulo esté activado.

    Para crear un formulario de contacto, vaya al área Estructura de Drupal y haga clic en el enlace "Formularios de contacto".

    Formulario de contacto de Drupal

    Haga clic en el botón "Agregar formulario de contacto" para crear un nuevo formulario. Complete la información y haga clic en el botón "Guardar" en la parte inferior.

    Drupal Contacto Guardar

    Una vez que el formulario esté completo, vaya al área Estructura de Drupal 8 y haga clic en Menús. Nuevamente, cambiará el menú desplegable de la navegación principal para agregar un enlace. Complete la información, pero esta vez use "Contáctenos" como título del enlace y "/contacto" como enlace. Haz clic en Guardar cuando hayas terminado.

    Drupal Contáctanos Guardar

    Ahora es el momento de asegurarse de que los permisos estén configurados para sus visitantes. Vuelva al área Extender de Drupal y expanda el control de Contacto haciendo clic en su descripción. Aquí puede cambiar la configuración de permisos para varios aspectos de Drupal.

    Descripción de contacto de Drupal

    El sistema debe tener la casilla de verificación Usuario anónimo seleccionada para "Usar el formulario de contacto para todo el sitio". Si no es así, agregue una marca a la columna Usuario anónimo para usar el formulario de contacto de todo el sitio y haga clic en "Guardar permisos" en la parte inferior.

    Permisos del formulario de contacto de Drupal

    Desarrollo del menú principal

    Configurar buenos menús de navegación ayuda a los visitantes a encontrar contenido. Desempeñará un papel destacado en la forma en que otros utilizarán su sitio web. Después de crear el sitio web de Drupal siguiendo los pasos anteriores, es hora de crear este diseño.

    Primero, deberá ir a la sección Estructura de Drupal y hacer clic en el enlace Menús. En este tutorial, simplemente editaré la navegación principal que ya está disponible. Para hacer esto, haga clic en el botón "Editar menú" a la derecha de "Navegación principal".

    Navegación principal de Drupal Editar

    En la siguiente pantalla, verá que la mayoría de los archivos que creamos anteriormente ya están disponibles. Lo único que falta es la página "Acerca de nosotros". Haga clic en el botón "+ Agregar enlace" en la parte superior. Ingrese la información para el enlace del menú, incluido el nombre del enlace.

    ¿Recuerdas cuando te dije que escribieras esa parte? En este ejemplo, pondré el título de mi enlace "Acerca de nosotros" y el "/acerca de" en el enlace. Una vez que haya completado la información del enlace, haga clic en el botón "Guardar".

    Drupal Acerca de nosotros Enlace

    Una vez que tenga todos sus enlaces disponibles, puede organizarlos como desee usando arrastrar y soltar. Por ejemplo, estoy arrastrando "Inicio" a la parte superior porque quiero que aparezca primero.

    Después de organizar los enlaces, haga clic en el botón Guardar. Tu menú ya está listo.

    Drupal Navegación Guardar

    Vinculación a las redes sociales

    Muchos temas vienen con la capacidad de vincular las redes sociales al sitio web. En este tutorial, demostraré dónde se encuentra esta función en el tema Business Responsive del sitio web de Drupal .

    Vaya a Apariencia en el panel de administración de Drupal. Localice su tema y haga clic en el enlace "Configuración". Desplázate hacia abajo hasta encontrar las opciones de Social Media o similar. Cada desarrollador es diferente, y los enlaces sociales pueden etiquetarse como algo más. En este ejemplo, haré clic en el enlace de redes sociales para expandir las opciones e ingresar las URL del perfil.

    Una vez hecho esto, haga clic en el botón "Guardar configuración" en la parte inferior.

    Drupal Guardar configuraciones sociales

    ¿Qué hay de agregar un feed de Twitter u otro sitio social?

    Puede agregar un feed desde sus redes sociales agregando un bloque y pegando el código directamente en él.
    Así es como implementa esos feeds en su sitio web.

    Obtén el código de Twitter o para mostrar tu feed. Esto se hace yendo directamente a esos sitios web y configurando la cuenta. Una vez que haya personalizado la configuración, el sitio social le dará un código para copiar.

    Vaya al área Estructura de Drupal y haga clic en "Diseño de bloque". Cada tema tendrá diferentes bloques para elegir. En este caso, voy a usar una barra lateral derecha para el feed. Haga clic en el botón "Colocar bloque" junto a la opción de la barra lateral derecha.

    Esto abrirá una ventana emergente que le ofrece varias opciones para el contenido predesarrollado. Haga clic en el botón "+ Agregar bloque personalizado" en la parte superior.

    Drupal Agregar bloque personalizado

    Dale una descripción al bloque. En este caso, lo estoy describiendo con "Feed de redes sociales". Haga clic en el control "Fuente" en el extremo derecho de la barra de herramientas y pegue su código. Haga clic en el botón Guardar.

    Botón de código fuente de Drupal

    En la siguiente ventana, seleccione la región en la que desea que se muestre el bloque de código. Recuerde, esto es específico del tema. En este ejemplo, mi tema tiene la barra lateral derecha disponible, así que estoy seleccionando esa ubicación. Haga clic en "Guardar bloque" cuando haya terminado.

    Bloque de código guardado de Drupal

    Y ahí lo tienes. Este tutorial acaba de explicar cómo crear un sitio web con Drupal 8 y las diferentes funciones que puede usar. Sin embargo, hay mucho más que este sistema puede hacer. Este fue solo un diseño básico de los pasos iniciales. Después de esto viene la parte divertida de desarrollar contenido y agregar funcionalidad.










  • Subir