PLUGIN SHORTCODES ULTIMATE

Presentación del tema: "PLUGIN SHORTCODES ULTIMATE"— Transcripción de la presentación:

1 PLUGIN SHORTCODES ULTIMATE
MANUAL PLUGIN SHORTCODES ULTIMATE Abril /2014 Versión 1

2 PLUGIN SHORTCODES ULTIMATE
Proporciona soporte para múltiples códigos cortos útiles con los que podrás darle un mejor aspecto a tu web. Con este plugin “ Shorcode Ultimate ” puedes crear fácilmente botones, deslizadores, cajas diferentes, Spoiler y mucho más. Convierte tu tema a la prima en tan sólo unos pocos clics. Utilizando códigos cortos con Ultimate y mostrarlo en su sitio.

3 MANUAL DE PLUGINS INSERT SHORTCODE
La imagen siguiente muestra la ventana donde se despliegan los componentes del plugin Insert Shortcode, se enlistan los que por el momento se ejecutaran. Componentes Heading Divider Pullquote List Lightbox Tabs High light Accodion Spoiler Cada componente al ejecutar su código tendrá un prefijo de inicio entre corchetes ( [su_]) un componente con sus características y un fin entre corchetes ([/su] )ejemplo [su_ componente] Contenido [/su_componente]

4 Área de trabajo de Wordpress
Como funciona  ” Shortcodes Ultimate ” Cuando tenga instalado y activado el plugin verá que en la pantalla de nueva entrada le aparece una nueva opción, en la parte de arriba al lado de “añadir objeto” Visual.- Es el área en donde se insertaran los componentes que se vayan trabajando . 1 Área de trabajo de Wordpress

5 Componentes Heading Pone encabezados a las paginas
MANUAL DE PLUGINS INSERT SHORTCODE Componentes Heading Pone encabezados a las paginas Divider Enlace para ir a la parte superior de la página Pullquote Cita de pie de página para poner los datos de responsable de contenido List Enlista contenidos Lightbox Inserta un botón o un texto y al darle clic se despliega la imagen en obscureciendo la pantalla Tabs Inserta tabla con pestañas para mostrar información en los cajones mostrando contenidos en ellos High light Destaca un párrafo con un sombreado en color Accodion Despliega el contenido de una caja, simulando un acordeón para mostrar contenido. Spoiler Inserta tabla con pestaña que se despliega para mostrar contenidos

6 Pone encabezados a las paginas
2 Pone encabezados a las paginas (heading) Regresa al listado de todos los iconos de shortcode A B C D E F 4 3 Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. Elija heading (plugin “Shortcodes Ultimate” ) Se desplegaran las propiedades de contenido de heading. Estilo será por default, el tamaño se recomienda que también sea por default . Alineación, dar clic en la pestaña y elegir la alineación deseada (centrada, izquierda o derecha) Margen, , se recomienda sea por default 20. La clase se queda por default en blanco Escriba el texto del encabezado en el cuadro de contenido. Muestra la vista previa de la acción Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de   heading (Shortcodes), ahí se muestra como se ve ejecutado el componente   heading, sí esta convencido de la acción de clic.

7 Pone encabezados a las paginas
6 (heading) 5 Al dar insertar en el cuadro de propiedades de contenido heading (“ Shortcodes ”), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción, dé clic en actualizar. Así es como se muestra de heading en su página de trabajo de la de la PWP, dé clic y así será como se apreciara 7

8 2 3 4 Enlace para ir a la parte superior de la página (Divider)
MANUAL DE PLUGINS INSERT SHORTCODE 2 Enlace para ir a la parte superior de la página (Divider) 3 Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. Elija Divider (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de Divider. Elija SI para ir a la parte superior de una página. nombre el texto de enlace ( ir arriba) La clase se deja por default en blanco Dar clic para vista previa de la acción Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de Divider (Shortcodes), ahí se muestra la vista previa de como se ve ejecutado el componente Divider, sí esta convencido de la acción de clic. Regresa al listado de todos los iconos de shortcode A B 4 C D

9 Enlace para ir a la parte superior de la página
MANUAL DE PLUGINS INSERT SHORTCODE Enlace para ir a la parte superior de la página 6 (Divider) 5 Al dar insertar en el cuadro de propiedades de contenido Divider (“ Shortcodes ”), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto que haya escrito, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción, dé clic en actualizar. Así es como se muestra Divider en su página de trabajo de la de la PWP, dé clic y se deslizara a la parte superior de su página. 7

10 MANUAL DE PLUGINS INSERT SHORTCODE
Cita de pie de página para poner los datos de responsable de contenido (Pullquote) 2 3 A Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. Elija Pullquote (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de Pullquote. Muestra el tipo de alienación (left ó Right) a elegir para posicionar del pie de página. La clase se queda por default en blanco Escriba los datos del responsable de contenido Dé clic para ver la vista previa Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de Pullquote (Shortcodes), ahí se muestra como se ve ejecutado el componente Pullquote, sí esta convencido de la acción de clic. Regresa al listado de todos los iconos de shortcode A B 4 A C D

11 Cita de pie de página para poner los datos de responsable de contenido
MANUAL DE PLUGINS INSERT SHORTCODE Cita de pie de página para poner los datos de responsable de contenido 6 (Pullquote) Al dar insertar en el cuadro de propiedades de contenido Pullquote (“ Shortcodes ”), se insertará en la página de trabajo de la PWP, el código generado, Insertado el texto, ahí también puede cambiar si lo desea el texto que haya escrito y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar- 5 Así es como se muestra Pullquote. 7

12 Regresa al listado de todos los iconos de shortcode
2 3 Enlista contenidos (List) Regresa al listado de todos los iconos de shortcode icon: check Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. elija List (plugin “Shortcodes Ultimate” ) Se desplegaran las propiedades de contenido List A – B Elija tipo de icono, personalizado (Media manager) ó un icono incorporado del Icon picker. Elija el color que desee de acuerdo al listado La clase se queda por default en blanco En el cuadro de contenido escriba el listado que desee se muestre. ( ver imagen), si desea agregar mas información a la lista, solo debe de copiar y pegar hacia abajo el código. Ejemplo <li> hola<li> </ul> Muestra la vista previa de la acción A B Morado: #7c2791 Café: #c8beb7 Negro: #050606Gris: #a6a3a0 Verde: #83b99a Amarillo: #dcd746 Azul: #9db4d2 Rosa: #d77ab3 C D E F

13 4 5 6 5 Enlista contenidos (List) Código generado con un icono
Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de list (Shortcodes), ahí se muestra como se ve ejecutado el componente list , sí esta convencido de la acción de clic. Enlista contenidos (List) Al dar insertar en el cuadro de propiedades de contenido list (“ Shortcodes ”), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. En su pagina de trabajo se muestra el código generado personalizado (Media manager), por default pone de propiedades el color verde, si sabe el código para cambiar el color puede hacerlo. Si ha elegido un icono incorporado del Icon picker, así se mostrara el código generado con el color seleccionado. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción, dé clic en actualizar. 4 Código generado con un icono 5 B 6 5 A

14 Así es como se muestra de List en su página de trabajo de la de la PWP, dé clic y así será como se apreciara 7

15 Regresa al listado de todos los iconos de shortcode
Inserta un botón y al darle clic se despliega la imagen obscureciendo la pantalla (Lightbox) 2 3 Regresa al listado de todos los iconos de shortcode Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. Elija Lightbox (plugin “Shortcodes Ultimate” ) Se desplegaran las propiedades de contenido Lightbox A Elija la imagen que será la que mostrara- Escriba la url de esa imagen La clase se queda por default en blanco Muestra la vista previa de la acción A B 4 C Al dar vista previa le desplegara el cuadro de contenido, en él aparecerá el código con el componte botton y con el texto imagen, Usted en vista previa visualizará un botton en color azul que al insertarlo en su pagina de trabajo al darle clic le obscurecerá la pantalla en su alrededor, si desea cambiar el texto lo puede hacer con el nombre de lo que desea mostrar. D E

16 Inserta un botón o un texto y al darle clic se despliega la imagen obscureciendo la pantalla
Lightbox Al dar vista previa le desplegara el cuadro de contenido, en él aparecerá el código con el componte botton y con el texto imagen, Usted en vista previa visualizará un botton en color azul que al insertarlo en su pagina de trabajo al darle clic le obscurecerá la pantalla en su alrededor, si desea cambiar el texto lo puede hacer con el nombre de lo que desea mostrar. Ejemplo en el siguiente código [su_lightbox type="image" src=" Imagen TI[/su_button][/su_lightbox] clic en un texto aparece la imagen Usted debe de borrar dentro del código el componente botton ejemplo en el siguiente código. [su_lightbox type="image" src=" Logo de tecnologías de la Información [/su_lightbox]

17 Inserta un botón o aun texto y al darle clic se despliega la imagen obscureciendo la pantalla
6 Lightbox Al dar insertar en el cuadro de propiedades de contenido Lightbox (“ Shortcodes ”), se insertará en la página de trabajo de la PWP, el código generado, Insertado el texto, ahí también puede cambiar si lo desea el texto que haya escrito y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar- 5 Así es como se muestra Lightbox

18 Regresa al listado de todos los iconos de shortcode
Inserta tabla con pestañas para mostrar información en los cajones mostrando contenidos en ellos ( Tabs) 3 2 Regresa al listado de todos los iconos de shortcode Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. elija Tabs (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de Tabs. El estilo es por default Poner en que pestaña de la tabla es en donde se abrirá la tabla Elegirá la posición que quiere se presente la tabla La clase se queda por default en blanco Escriba el código en el cuadro ( content ) [su_tab title="Titulo de la pestaña"]escriba contenido[/su_tab] Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de tabs (Shortcodes), ahí se muestra la vista previa de como se ve ejecutado el componente tabs, sí esta convencido de la acción de clic. A B C 4 4 D E

19 Inserta tabla con pestañas para mostrar contenidos
6 ( Tabs) Al dar insertar en el cuadro de propiedades de contenido  Tabs (“ Shortcodes ), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar . 5 Así es como se muestra  Tabs 7

20 2 3 4 Destaca un párrafo con un sombreado en color ( High light)
Regresa al listado de todos los iconos de shortcode Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. elija High light (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de High light. Seleccione el color de fondo de fondo para su texto y color de letra La clase se deja por default en blanco Escriba dentro del cuadro de contenido el texto que desee destacar dentro de su texto Dé clic para ver la vista previa Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de  High light (Shortcodes), ahí se muestra la vista previa de como se ve ejecutado el componente  High light, sí esta convencido de la acción de clic. A A A A B B 4 A C C D D

21 Destacar los puntos de interés en un
sombreado de texto  (High light) 6 Al dar insertar en el cuadro de propiedades de contenido  High light (“ Shortcodes ), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar . 5 7 Así es como se muestra  High light

22 3 2 Despliega el contenido como simulando un acordeón ( Accordion)
Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. elija Accordion (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de Accordion La clase se deja por default en blanco Escriba dentro del cuadro de contenido el texto ejemplo y reemplace el texto de acuerdo a sus necesidades [su_accordion] [su_spoiler title="Servicios que Ofrece Depto. de Tecnologías"] [su_list icon=" icon: star " icon_color="#baafd0"] Mantenimiento a equipos de cómputo Sistemas Cliente servidor Sistema [/su_spoiler] Dé clic para ver la vista previa Regresa al listado de todos los iconos de shortcode A texto a reemplazar B Código C texto a reemplazar

23 Despliega el contenido como simulando un acordeón
3 ( Accordion) A B Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de   Accordion (Shortcodes), ahí se muestra la vista previa de como se ve ejecutado el componente   Accordion, sí esta convencido de la acción de clic. A – B Se mostrara el contenido en icono listo para que se le de clic para desplegarse como acordeón 4

24 Despliega el contenido de una caja simulando un acordeón para mostrar contenido
6 ( Accordion) Al dar insertar en el cuadro de propiedades de contenido Accordion (“ Shortcodes ), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar . 5 7 Así es como se muestra  Accordion 7

25 3 2 Inserta tabla con pestaña que se despliega
para mostrar contenidos (Spoiler) 3 Regresa al listado de todos los iconos de shortcode 2 A Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. elija Spoiler (plugin “Shortcodes Ultimate” ) Se despliega las propiedades de contenido de Spoiler. Poner el titulo Elija SI en caso de que desee que el Spoiler quiere aparezca abierto o NO si quiere aparezca cerrado El estilo se elige dependiendo si quiere que el spoiler no tenga un recuadro gris (default), simple( con recuadro y imagen eligiendo el icono del cuadro (D), y fancy con recuadro con las esquinas ovaladas y además imagen que elija en el icono del inciso (D). Elegir icono que desea que visualice en su spoiler El anchor se sugiere que sea por default La clase va por default en blanco Escriba el el texto que desee se despliegue en su Spoiler De clic para visualizar el spoiler B C D E F G H

26 Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler)
4 3 A B Muestra la vista previa de la acción dentro del cuadro de propiedades de contenido de Spoiler (Shortcodes), ahí se muestra como se ve ejecutado el componente  Spoiler, sí esta convencido de la acción de clic. A – B Se mostrara el contenido en icono listo para que se le de clic para desplegarse como Spoiler

27 Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler)
6 A Al dar insertar en el cuadro de propiedades de contenido Spoiler (“ Shortcodes ), se insertará en la página de trabajo de la PWP, el código generado, ahí también puede cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos para la publicación en Micrositios del Portal de SESVER. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si esta convencido de la acción dé clic en actualizar . 5 Así es como se muestra   Spoiler 7