Crear una LandigPage Manualmente

Crear una LandigPage Manualmente

El método final de cómo crear una página de destino en WordPress implica el uso de una plantilla de página. Tenga en cuenta que necesitará algunas habilidades de codificación para crear páginas de destino personalizadas desde cero.

Recomendamos el método manual cuando necesite más flexibilidad y opciones de personalización para el diseño. Por ejemplo, es perfecto para crear una página de destino para un dominio dedicado.

En esta guía paso a paso, te mostraremos cómo crear una plantilla de página de destino personalizada utilizando temas de WordPress existentes.

1.Crear un tema secundario

La creación de un tema secundario es esencial para crear una plantilla de página de WordPress personalizada, ya que le permitirá personalizarla sin romper su funcionalidad principal.

Para este método, usaremos el Administrador de para crear un tema secundario . Tenga en cuenta que el proceso requiere algunos conocimientos de HTML, CSS y PHP.

Primero, vaya a hPanel -> Administrador de archivos.

Luego, vaya a public_html -> wp-content -> themes , haga clic en Nueva carpeta en la esquina superior derecha e ingrese un nombre para su tema secundario.

Alternativamente, conéctese a su sitio a través de un cliente FTP como FileZilla y cree una nueva carpeta en su directorio wp-content/themes .

 

2. Modifique el archivo style.css

A continuación, deberá crear un nuevo archivo style.css que será la nueva hoja de estilo en la carpeta del tema secundario. Añádele el siguiente código:

*/

Nombre del tema: Veinte veintiún niños
URI del tema: http://tudominio.com
Descripción: Veinte Veintiún Niño
Autor del tema: Tu nombre
Autor URI: http://tudominio.com
Plantilla: veintitwentyone
Versión: 1.0.0
Dominio de texto: veintitwentyone-child
Licencia: GNU General Public License v2 o posterior
URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html
Etiquetas: una columna, colores personalizados, menú personalizado, logotipo personalizado, estilo de editor, imágenes destacadas

*/

Este código contiene información básica sobre el tema secundario, incluidos su nombre y el tema principal. Después de modificar el archivo style.css según el tema principal que haya elegido, haga clic en Guardar y cerrar .

3.Crea un archivo functions.php

El siguiente paso es poner en cola las hojas de estilo de los temas padre e hijo. Para hacer esto, cree un nuevo archivo llamado functions.php en la carpeta del tema secundario.

Comience con una etiqueta PHP de apertura, luego agregue las funciones para poner en cola la hoja de estilo del tema principal. Por ejemplo, puede insertar el siguiente código:

<?php

add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

función enqueue_parent_styles() {

wp_enqueue_style( 'estilo-principal', get_template_directory_uri().'/style.css' );

}

?>

Ahora tiene un nuevo tema secundario en funcionamiento que se cargará después de su tema principal.

4.Activar el tema hijo

Su tema secundario ahora está listo para usar, así que vaya a su área de administración de WordPress y haga clic en Apariencia -> Tema -> Activar .

5. Cree una nueva página personalizada

Después de activar el nuevo tema, puede crear una plantilla de página de WordPress personalizada para su página de destino con un diseño único.

Comience creando un nuevo archivo llamado landing-page.php en la carpeta del tema de su hijo y agréguele el siguiente código:

<?php /* Nombre de la plantilla: Página de destino */ ?>

Cambie el nombre de la plantilla como mejor le parezca. Luego, haga clic en Guardar y cerrar .

Si edita o agrega una página en su sitio web de WordPress, verá su nueva plantilla personalizada disponible para seleccionarla desde un menú en la barra lateral. Sin embargo, seguirá estando en blanco ya que aún no le hemos agregado ningún contenido.

6.Personaliza la página de destino con CSS

Después de crear la plantilla de la página de destino, es hora de personalizarla.

Primero, copie el código existente comenzando con get_header(); línea del archivo page.php de su tema principal : se ubicará en public_html -> wp-content -> Themes -> yourtheme . Péguelo en su archivo landing-page.php y guarde los cambios. Así es como debería verse su código:

<?php /* Nombre de la plantilla: Página de destino */ ?>
<?php

obtener_encabezado();

/* Iniciar el ciclo */

mientras ( have_posts() ) :

            el cargo();

            get_template_part( 'template-parts/content/content-page' );

            // Si los comentarios están abiertos o hay al menos un comentario, cargue la plantilla de comentarios.

            if (comentarios_abrir() || obtener_comentarios_numero()) {comentarios_plantilla();

            }

mientras tanto; // Fin del bucle.
get_footer();

?>

Puede editar la plantilla de su página y agregarle código dirigiéndose a Apariencia -> Editor de archivos de temas .

Dado que la mayoría de las páginas de destino generalmente no tienen barras laterales ni pies de página para minimizar la distracción, elimínelos eliminando estas dos líneas:

get_sidebar();

get_footer();

Para agregar más contenido a su página de destino, use el editor de WordPress. Además, puede crear una página de inicio de formulario personalizada a través del editor de bloques con el complemento Gutenberg Forms de forma gratuita.

Para ayudar a que su página de destino se destaque de la competencia, agregue más funciones a través de su archivo style.css o navegando a Apariencia -> Personalizar .

Con CSS adicional, puede modificar su hoja de estilo. Esto incluye cambiar el color de fondo y de la barra lateral y modificar su tipo de fuente.

Para cambiar el color de fondo, agregue el siguiente código:

.sitio-contenido-contener {

   color de fondo: #DEF0F5;

   posición: relativa;

}

Esto agregará un color de fondo verde claro basado en el código hexadecimal , como en la imagen a continuación:

Mientras tanto, para cambiar el tipo de fuente, el tamaño y el color de su página de destino, inserte el siguiente código:

pags {

color turquesa;

}

pags {

familia tipográfica: Georgia;

tamaño de fuente: 22px

}

Tenga en cuenta que este código solo cambia el texto de su cuerpo, como en la imagen a continuación:

O, si desea cambiar el encabezado, agregue este fragmento de código:

h1 {

  color blanco;

  alineación de texto: centro;

}

Y con esto tu landingpage o Pagina de aterrizaje estará diseñada y lista para iniciar la captación y la conversión,