Principiante de WordPress: personalización de nivel medio

Publicado: 2016-07-27

Para ir más allá de los conceptos básicos simples en mi último blog para principiantes de WordPress, durante las últimas dos semanas he estado trabajando para recrear una de nuestras páginas de demostración de ProteusThemes. La demostración del tema Auto para ser específico. Al igual que antes, mis colegas me encomendaron tareas paso a paso para ponerme en camino. Estas son las lecciones más importantes que he aprendido hasta ahora.

Cajas de iconos

Los widgets de Icon Box son una pieza muy útil de lenguaje visual . Puede parecer una obviedad, pero tener el número de teléfono de tu empresa junto a un icono de teléfono es una forma sencilla pero eficaz de mejorar la experiencia de usuario de tu sitio.

Mi tarea era agregar los cuadros de iconos en el encabezado de la página de inicio. Para hacer esto, en su panel de control, debe ir a Apariencia -> Widgets y luego, dentro de 'Barras laterales de tema ', seleccione ' Encabezado '.

Una vez que haya localizado ' Encabezado ', dirija su atención a la parte izquierda de la pantalla, donde verá una lista de ' Widgets disponibles '. ProteusThemes: IconBox es el widget que estás buscando.

Ahora tienes dos opciones . Puede arrastrar y soltar el widget a la derecha de la pantalla y colocarlo en el encabezado, o cuando haga clic en el widget verá un menú desplegable de sus ubicaciones aplicables, puede seleccionar ' Encabezado ' de este lista y haga clic en el botón azul ' Agregar widget ':

MIDIIIMIDIII

Ahora verá que hay muchos íconos para elegir dentro del widget, para este ejercicio elegí el teléfono. Todo lo que necesita hacer es darle un título al Icon Box y decidir qué información le gustaría que apareciera junto a él.

Debajo de todos los íconos en el menú de widgets, verá una opción para ' resaltar este widget '. Marque esa casilla si la información en el cuadro de iconos es muy importante y le gustaría que se destaque más.

MIDIV

Control deslizante de la página principal

Recrear la demostración automática requería agregar un control deslizante como una función en la página de inicio. Para que esto suceda, seleccione Páginas -> Todas las páginas -> Inicio ; Una vez que esté en el editor de su página de inicio, debe encontrar el menú desplegable ' Atributos de página ' en el lado derecho de la pantalla. Encuéntrelo y cambie la ' Plantilla ' a ' Página principal con control deslizante '.

MIDV

Una vez que haya cambiado a ' Página principal con control deslizante ', habrá una nueva meta en la parte inferior de la pantalla titulada ' Control deslizante de la página principal ', haga clic aquí para agregar sus imágenes y texto al control deslizante:

Códigos cortos

Recrear el control deslizante de la página principal nos lleva muy bien a los códigos cortos . ¿Por qué? Porque en la demostración automática que estoy recreando, hay botones dentro del control deslizante .

En este punto, es importante enfatizar que realmente necesita instalar los complementos recomendados . El error que cometí fue insertar el código abreviado en el 'texto de la diapositiva' sin haber activado el complemento ProteusThemes Shortcodes . Si no tiene el complemento activado, el código en sí aparecerá en el control deslizante, en lugar del botón que está tratando de crear.

Hay una sección de 'Códigos cortos' en la documentación de todos nuestros temas que le brinda muchas opciones disponibles para el estilo y la funcionalidad del botón que puede insertar. Todo lo que necesita hacer es copiar y pegar este código en la sección 'texto de la diapositiva' del control deslizante. Simplemente edite el texto del botón dentro del código para adaptarlo a sus necesidades y estará listo para funcionar.

Por supuesto, puede usar códigos cortos en otros lugares además del control deslizante. Por ejemplo, si ha escrito una pieza de marketing de contenido para tratar de vender algo, use los códigos abreviados para crear un botón CTA efectivo en la parte inferior de su publicación de blog.

Creador de páginas

Familiarizarse con el complemento Page Builder de SiteOrigin fue absolutamente fundamental para recrear la demostración automática. La primera tarea para la que tuve que usarlo fue crear este IconBox con la sección Popover debajo del encabezado de la página de inicio:

Para ello, ve a la página que quieras editar, en mi caso la página de inicio. Luego, debe ubicar el menú del generador de páginas , se ve así:

Desde aquí, seleccione ' Agregar fila '. Luego verá opciones relacionadas con las columnas dentro de esta fila. Puede seleccionar cuántas columnas desea, su proporción de tamaño y si las desea en orden de tamaño de izquierda a derecha , o viceversa. Para mi IconBox Popover, seleccioné 3 columnas del mismo tamaño.

Ahora que tiene sus columnas listas, puede comenzar a agregarles funcionalidad agregando widgets. Haga esto haciendo clic en la columna a la que desea agregar, una vez seleccionada la columna, haga clic en el botón ' Agregar widget ' del menú de arriba.

Según el widget que seleccione, puede agregar más funciones a la columna. En mi IconBox Popover 'Horas de apertura ', por ejemplo, fue necesario agregar el widget Hora de apertura de ProteusThemes dentro de IconBox Popover, para que la información relevante se mostrara en la ventana emergente si se hacía clic en la columna.

Un problema que tuve después de crear esta fila de ventanas emergentes de IconBox fue que la fila no tenía el mismo color que la demostración automática, ni se extendía a todo el ancho de mi página. Es fácil resolver este tipo de problemas. Primero, desplace el cursor sobre el ícono de llave inglesa pequeño sobre su fila, luego seleccione ' Editar fila '. Para cambiar el color, el siguiente paso es seleccionar ' Diseño ' en el menú ' Estilos de fila ', aquí puede cambiar el color y otras opciones de diseño.

mediados del siglo xii

Para cambiar el tamaño de su fila, primero seleccione ' Diseño ' en el menú ' Estilos de fila '. Esto le dará la opción de agregar relleno a la fila. Luego, si desea que la fila se extienda a todo el ancho de su página, seleccione el menú desplegable ' Diseño de fila ' y elija ' Ancho completo '.

Usé Page Builder exactamente de la misma manera para crear estas columnas de página destacadas :

Para hacer esto, en lugar de agregar el widget Iconbox with Popover a la columna, elegí el widget ProteusThemes: Featured Page . Debería tener un buen juego colocando diferentes widgets en columnas para tener una idea real de cuán útil será para usted el creador de páginas.

Esto será todo por ahora. Echa un vistazo a mi publicación anterior para obtener algunos consejos más básicos. Haga clic a continuación para suscribirse a nuestro boletín y recibir este tipo de contenido, y mucho más, directamente en su bandeja de entrada...

SUSCRÍBASE AHORA